'use client';
import * as React from 'react';
import React__default, { useState, useEffect, useContext, useRef, Fragment, Children, cloneElement } from 'react';
import { CSSTransition as CSSTransition$1, TransitionGroup } from 'react-transition-group';
import ReactDOM from 'react-dom';
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 _arrayLikeToArray$i(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 _arrayWithoutHoles(r) {
if (Array.isArray(r)) return _arrayLikeToArray$i(r);
}
function _iterableToArray(r) {
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
}
function _unsupportedIterableToArray$i(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray$i(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$i(r, a) : void 0;
}
}
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 _toConsumableArray(r) {
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray$i(r) || _nonIterableSpread();
}
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);
}
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 toPropertyKey(t) {
var i = toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
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 _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
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 _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 _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray$i(r, e) || _nonIterableRest();
}
var FilterMatchMode = Object.freeze({
STARTS_WITH: 'startsWith',
CONTAINS: 'contains',
NOT_CONTAINS: 'notContains',
ENDS_WITH: 'endsWith',
EQUALS: 'equals',
NOT_EQUALS: 'notEquals',
IN: 'in',
NOT_IN: 'notIn',
LESS_THAN: 'lt',
LESS_THAN_OR_EQUAL_TO: 'lte',
GREATER_THAN: 'gt',
GREATER_THAN_OR_EQUAL_TO: 'gte',
BETWEEN: 'between',
DATE_IS: 'dateIs',
DATE_IS_NOT: 'dateIsNot',
DATE_BEFORE: 'dateBefore',
DATE_AFTER: 'dateAfter',
CUSTOM: 'custom'
});
var FilterOperator = Object.freeze({
AND: 'and',
OR: 'or'
});
function classNames() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
if (args) {
var classes = [];
for (var i = 0; i < args.length; i++) {
var className = args[i];
if (!className) {
continue;
}
var type = _typeof(className);
if (type === 'string' || type === 'number') {
classes.push(className);
} else if (type === 'object') {
var _classes = Array.isArray(className) ? className : Object.entries(className).map(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
key = _ref2[0],
value = _ref2[1];
return value ? key : null;
});
classes = _classes.length ? classes.concat(_classes.filter(function (c) {
return !!c;
})) : classes;
}
}
return classes.join(' ').trim();
}
return undefined;
}
function _classCallCheck(a, n) {
if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
}
function _defineProperties(e, r) {
for (var t = 0; t < r.length; t++) {
var o = r[t];
o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, toPropertyKey(o.key), o);
}
}
function _createClass(e, r, t) {
return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
writable: !1
}), e;
}
function _createForOfIteratorHelper$h(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$h(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray$h(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$h(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$h(r, a) : void 0; } }
function _arrayLikeToArray$h(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; }
var DomHandler = /*#__PURE__*/function () {
function DomHandler() {
_classCallCheck(this, DomHandler);
}
return _createClass(DomHandler, null, [{
key: "innerWidth",
value: function innerWidth(el) {
if (el) {
var width = el.offsetWidth;
var style = getComputedStyle(el);
width = width + (parseFloat(style.paddingLeft) + parseFloat(style.paddingRight));
return width;
}
return 0;
}
}, {
key: "width",
value: function width(el) {
if (el) {
var _width = el.offsetWidth;
var style = getComputedStyle(el);
_width = _width - (parseFloat(style.paddingLeft) + parseFloat(style.paddingRight));
return _width;
}
return 0;
}
}, {
key: "getBrowserLanguage",
value: function getBrowserLanguage() {
return navigator.userLanguage || navigator.languages && navigator.languages.length && navigator.languages[0] || navigator.language || navigator.browserLanguage || navigator.systemLanguage || 'en';
}
}, {
key: "getWindowScrollTop",
value: function getWindowScrollTop() {
var doc = document.documentElement;
return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
}
}, {
key: "getWindowScrollLeft",
value: function getWindowScrollLeft() {
var doc = document.documentElement;
return (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
}
}, {
key: "getOuterWidth",
value: function getOuterWidth(el, margin) {
if (el) {
var width = el.getBoundingClientRect().width || el.offsetWidth;
if (margin) {
var style = getComputedStyle(el);
width = width + (parseFloat(style.marginLeft) + parseFloat(style.marginRight));
}
return width;
}
return 0;
}
}, {
key: "getOuterHeight",
value: function getOuterHeight(el, margin) {
if (el) {
var height = el.getBoundingClientRect().height || el.offsetHeight;
if (margin) {
var style = getComputedStyle(el);
height = height + (parseFloat(style.marginTop) + parseFloat(style.marginBottom));
}
return height;
}
return 0;
}
}, {
key: "getClientHeight",
value: function getClientHeight(el, margin) {
if (el) {
var height = el.clientHeight;
if (margin) {
var style = getComputedStyle(el);
height = height + (parseFloat(style.marginTop) + parseFloat(style.marginBottom));
}
return height;
}
return 0;
}
}, {
key: "getClientWidth",
value: function getClientWidth(el, margin) {
if (el) {
var width = el.clientWidth;
if (margin) {
var style = getComputedStyle(el);
width = width + (parseFloat(style.marginLeft) + parseFloat(style.marginRight));
}
return width;
}
return 0;
}
}, {
key: "getViewport",
value: function getViewport() {
var win = window;
var d = document;
var e = d.documentElement;
var g = d.getElementsByTagName('body')[0];
var w = win.innerWidth || e.clientWidth || g.clientWidth;
var h = win.innerHeight || e.clientHeight || g.clientHeight;
return {
width: w,
height: h
};
}
}, {
key: "getOffset",
value: function getOffset(el) {
if (el) {
var rect = el.getBoundingClientRect();
return {
top: rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0),
left: rect.left + (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0)
};
}
return {
top: 'auto',
left: 'auto'
};
}
}, {
key: "index",
value: function index(element) {
if (element) {
var children = element.parentNode.childNodes;
var num = 0;
for (var i = 0; i < children.length; i++) {
if (children[i] === element) {
return num;
}
if (children[i].nodeType === 1) {
num++;
}
}
}
return -1;
}
}, {
key: "addMultipleClasses",
value: function addMultipleClasses(element, className) {
if (element && className) {
if (element.classList) {
var styles = className.split(' ');
for (var i = 0; i < styles.length; i++) {
element.classList.add(styles[i]);
}
} else {
var _styles = className.split(' ');
for (var _i = 0; _i < _styles.length; _i++) {
element.className = element.className + (' ' + _styles[_i]);
}
}
}
}
}, {
key: "removeMultipleClasses",
value: function removeMultipleClasses(element, className) {
if (element && className) {
if (element.classList) {
var styles = className.split(' ');
for (var i = 0; i < styles.length; i++) {
element.classList.remove(styles[i]);
}
} else {
var _styles2 = className.split(' ');
for (var _i2 = 0; _i2 < _styles2.length; _i2++) {
element.className = element.className.replace(new RegExp('(^|\\b)' + _styles2[_i2].split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
}
}
}
}, {
key: "addClass",
value: function addClass(element, className) {
if (element && className) {
if (element.classList) {
element.classList.add(className);
} else {
element.className = element.className + (' ' + className);
}
}
}
}, {
key: "removeClass",
value: function removeClass(element, className) {
if (element && className) {
if (element.classList) {
element.classList.remove(className);
} else {
element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
}
}
}, {
key: "hasClass",
value: function hasClass(element, className) {
if (element) {
if (element.classList) {
return element.classList.contains(className);
}
return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
}
return false;
}
}, {
key: "addStyles",
value: function addStyles(element) {
var styles = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
if (element) {
Object.entries(styles).forEach(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
key = _ref2[0],
value = _ref2[1];
return element.style[key] = value;
});
}
}
}, {
key: "find",
value: function find(element, selector) {
return element ? Array.from(element.querySelectorAll(selector)) : [];
}
}, {
key: "findSingle",
value: function findSingle(element, selector) {
if (element) {
return element.querySelector(selector);
}
return null;
}
}, {
key: "setAttributes",
value: function setAttributes(element) {
var _this = this;
var attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
if (element) {
var _computedStyles = function computedStyles(rule, value) {
var _element$$attrs, _element$$attrs2;
var styles = element !== null && element !== void 0 && (_element$$attrs = element.$attrs) !== null && _element$$attrs !== void 0 && _element$$attrs[rule] ? [element === null || element === void 0 || (_element$$attrs2 = element.$attrs) === null || _element$$attrs2 === void 0 ? void 0 : _element$$attrs2[rule]] : [];
return [value].flat().reduce(function (cv, v) {
if (v !== null && v !== undefined) {
var type = _typeof(v);
if (type === 'string' || type === 'number') {
cv.push(v);
} else if (type === 'object') {
var _cv = Array.isArray(v) ? _computedStyles(rule, v) : Object.entries(v).map(function (_ref3) {
var _ref4 = _slicedToArray(_ref3, 2),
_k = _ref4[0],
_v = _ref4[1];
return rule === 'style' && (!!_v || _v === 0) ? "".concat(_k.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(), ":").concat(_v) : _v ? _k : undefined;
});
cv = _cv.length ? cv.concat(_cv.filter(function (c) {
return !!c;
})) : cv;
}
}
return cv;
}, styles);
};
Object.entries(attributes).forEach(function (_ref5) {
var _ref6 = _slicedToArray(_ref5, 2),
key = _ref6[0],
value = _ref6[1];
if (value !== undefined && value !== null) {
var matchedEvent = key.match(/^on(.+)/);
if (matchedEvent) {
element.addEventListener(matchedEvent[1].toLowerCase(), value);
} else if (key === 'p-bind') {
_this.setAttributes(element, value);
} else {
value = key === 'class' ? _toConsumableArray(new Set(_computedStyles('class', value))).join(' ').trim() : key === 'style' ? _computedStyles('style', value).join(';').trim() : value;
(element.$attrs = element.$attrs || {}) && (element.$attrs[key] = value);
element.setAttribute(key, value);
}
}
});
}
}
}, {
key: "getAttribute",
value: function getAttribute(element, name) {
if (element) {
var value = element.getAttribute(name);
if (!isNaN(value)) {
return +value;
}
if (value === 'true' || value === 'false') {
return value === 'true';
}
return value;
}
return undefined;
}
}, {
key: "isAttributeEquals",
value: function isAttributeEquals(element, name, value) {
return element ? this.getAttribute(element, name) === value : false;
}
}, {
key: "isAttributeNotEquals",
value: function isAttributeNotEquals(element, name, value) {
return !this.isAttributeEquals(element, name, value);
}
}, {
key: "getHeight",
value: function getHeight(el) {
if (el) {
var height = el.offsetHeight;
var style = getComputedStyle(el);
height = height - (parseFloat(style.paddingTop) + parseFloat(style.paddingBottom) + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth));
return height;
}
return 0;
}
}, {
key: "getWidth",
value: function getWidth(el) {
if (el) {
var width = el.offsetWidth;
var style = getComputedStyle(el);
width = width - (parseFloat(style.paddingLeft) + parseFloat(style.paddingRight) + parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth));
return width;
}
return 0;
}
}, {
key: "alignOverlay",
value: function alignOverlay(overlay, target, appendTo) {
var calculateMinWidth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
if (overlay && target) {
if (appendTo === 'self') {
this.relativePosition(overlay, target);
} else {
calculateMinWidth && (overlay.style.minWidth = DomHandler.getOuterWidth(target) + 'px');
this.absolutePosition(overlay, target);
}
}
}
}, {
key: "absolutePosition",
value: function absolutePosition(element, target) {
var align = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'left';
if (element && target) {
var elementDimensions = element.offsetParent ? {
width: element.offsetWidth,
height: element.offsetHeight
} : this.getHiddenElementDimensions(element);
var elementOuterHeight = elementDimensions.height;
var elementOuterWidth = elementDimensions.width;
var targetOuterHeight = target.offsetHeight;
var targetOuterWidth = target.offsetWidth;
var targetOffset = target.getBoundingClientRect();
var windowScrollTop = this.getWindowScrollTop();
var windowScrollLeft = this.getWindowScrollLeft();
var viewport = this.getViewport();
var top;
var left;
if (targetOffset.top + targetOuterHeight + elementOuterHeight > viewport.height) {
top = targetOffset.top + windowScrollTop - elementOuterHeight;
if (top < 0) {
top = windowScrollTop;
}
element.style.transformOrigin = 'bottom';
} else {
top = targetOuterHeight + targetOffset.top + windowScrollTop;
element.style.transformOrigin = 'top';
}
var targetOffsetPx = targetOffset.left;
if (align === 'left') {
if (targetOffsetPx + elementOuterWidth > viewport.width) {
left = Math.max(0, targetOffsetPx + windowScrollLeft + targetOuterWidth - elementOuterWidth);
} else {
left = targetOffsetPx + windowScrollLeft;
}
} else {
if (targetOffsetPx + targetOuterWidth - elementOuterWidth < 0) {
left = windowScrollLeft;
} else {
left = targetOffsetPx + targetOuterWidth - elementOuterWidth + windowScrollLeft;
}
}
element.style.top = top + 'px';
element.style.left = left + 'px';
}
}
}, {
key: "relativePosition",
value: function relativePosition(element, target) {
if (element && target) {
var elementDimensions = element.offsetParent ? {
width: element.offsetWidth,
height: element.offsetHeight
} : this.getHiddenElementDimensions(element);
var targetHeight = target.offsetHeight;
var targetOffset = target.getBoundingClientRect();
var viewport = this.getViewport();
var top;
var left;
if (targetOffset.top + targetHeight + elementDimensions.height > viewport.height) {
top = -1 * elementDimensions.height;
if (targetOffset.top + top < 0) {
top = -1 * targetOffset.top;
}
element.style.transformOrigin = 'bottom';
} else {
top = targetHeight;
element.style.transformOrigin = 'top';
}
if (elementDimensions.width > viewport.width) {
// element wider then viewport and cannot fit on screen (align at left side of viewport)
left = targetOffset.left * -1;
} else if (targetOffset.left + elementDimensions.width > viewport.width) {
// element wider then viewport but can be fit on screen (align at right side of viewport)
left = (targetOffset.left + elementDimensions.width - viewport.width) * -1;
} else {
// element fits on screen (align with target)
left = 0;
}
element.style.top = top + 'px';
element.style.left = left + 'px';
}
}
}, {
key: "flipfitCollision",
value: function flipfitCollision(element, target) {
var _this2 = this;
var my = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'left top';
var at = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'left bottom';
var callback = arguments.length > 4 ? arguments[4] : undefined;
if (element && target) {
var targetOffset = target.getBoundingClientRect();
var viewport = this.getViewport();
var myArr = my.split(' ');
var atArr = at.split(' ');
var getPositionValue = function getPositionValue(arr, isOffset) {
return isOffset ? +arr.substring(arr.search(/(\+|-)/g)) || 0 : arr.substring(0, arr.search(/(\+|-)/g)) || arr;
};
var position = {
my: {
x: getPositionValue(myArr[0]),
y: getPositionValue(myArr[1] || myArr[0]),
offsetX: getPositionValue(myArr[0], true),
offsetY: getPositionValue(myArr[1] || myArr[0], true)
},
at: {
x: getPositionValue(atArr[0]),
y: getPositionValue(atArr[1] || atArr[0]),
offsetX: getPositionValue(atArr[0], true),
offsetY: getPositionValue(atArr[1] || atArr[0], true)
}
};
var myOffset = {
left: function left() {
var totalOffset = position.my.offsetX + position.at.offsetX;
return totalOffset + targetOffset.left + (position.my.x === 'left' ? 0 : -1 * (position.my.x === 'center' ? _this2.getOuterWidth(element) / 2 : _this2.getOuterWidth(element)));
},
top: function top() {
var totalOffset = position.my.offsetY + position.at.offsetY;
return totalOffset + targetOffset.top + (position.my.y === 'top' ? 0 : -1 * (position.my.y === 'center' ? _this2.getOuterHeight(element) / 2 : _this2.getOuterHeight(element)));
}
};
var alignWithAt = {
count: {
x: 0,
y: 0
},
left: function left() {
var left = myOffset.left();
var scrollLeft = DomHandler.getWindowScrollLeft();
element.style.left = left + scrollLeft + 'px';
if (this.count.x === 2) {
element.style.left = scrollLeft + 'px';
this.count.x = 0;
} else if (left < 0) {
this.count.x++;
position.my.x = 'left';
position.at.x = 'right';
position.my.offsetX *= -1;
position.at.offsetX *= -1;
this.right();
}
},
right: function right() {
var left = myOffset.left() + DomHandler.getOuterWidth(target);
var scrollLeft = DomHandler.getWindowScrollLeft();
element.style.left = left + scrollLeft + 'px';
if (this.count.x === 2) {
element.style.left = viewport.width - DomHandler.getOuterWidth(element) + scrollLeft + 'px';
this.count.x = 0;
} else if (left + DomHandler.getOuterWidth(element) > viewport.width) {
this.count.x++;
position.my.x = 'right';
position.at.x = 'left';
position.my.offsetX *= -1;
position.at.offsetX *= -1;
this.left();
}
},
top: function top() {
var top = myOffset.top();
var scrollTop = DomHandler.getWindowScrollTop();
element.style.top = top + scrollTop + 'px';
if (this.count.y === 2) {
element.style.left = scrollTop + 'px';
this.count.y = 0;
} else if (top < 0) {
this.count.y++;
position.my.y = 'top';
position.at.y = 'bottom';
position.my.offsetY *= -1;
position.at.offsetY *= -1;
this.bottom();
}
},
bottom: function bottom() {
var top = myOffset.top() + DomHandler.getOuterHeight(target);
var scrollTop = DomHandler.getWindowScrollTop();
element.style.top = top + scrollTop + 'px';
if (this.count.y === 2) {
element.style.left = viewport.height - DomHandler.getOuterHeight(element) + scrollTop + 'px';
this.count.y = 0;
} else if (top + DomHandler.getOuterHeight(target) > viewport.height) {
this.count.y++;
position.my.y = 'bottom';
position.at.y = 'top';
position.my.offsetY *= -1;
position.at.offsetY *= -1;
this.top();
}
},
center: function center(axis) {
if (axis === 'y') {
var top = myOffset.top() + DomHandler.getOuterHeight(target) / 2;
element.style.top = top + DomHandler.getWindowScrollTop() + 'px';
if (top < 0) {
this.bottom();
} else if (top + DomHandler.getOuterHeight(target) > viewport.height) {
this.top();
}
} else {
var left = myOffset.left() + DomHandler.getOuterWidth(target) / 2;
element.style.left = left + DomHandler.getWindowScrollLeft() + 'px';
if (left < 0) {
this.left();
} else if (left + DomHandler.getOuterWidth(element) > viewport.width) {
this.right();
}
}
}
};
alignWithAt[position.at.x]('x');
alignWithAt[position.at.y]('y');
if (this.isFunction(callback)) {
callback(position);
}
}
}
}, {
key: "findCollisionPosition",
value: function findCollisionPosition(position) {
if (position) {
var isAxisY = position === 'top' || position === 'bottom';
var myXPosition = position === 'left' ? 'right' : 'left';
var myYPosition = position === 'top' ? 'bottom' : 'top';
if (isAxisY) {
return {
axis: 'y',
my: "center ".concat(myYPosition),
at: "center ".concat(position)
};
}
return {
axis: 'x',
my: "".concat(myXPosition, " center"),
at: "".concat(position, " center")
};
}
}
}, {
key: "getParents",
value: function getParents(element) {
var parents = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
return element.parentNode === null ? parents : this.getParents(element.parentNode, parents.concat([element.parentNode]));
}
/**
* Gets all scrollable parent elements of a given element
* @param {HTMLElement} element - The element to find scrollable parents for
* @returns {Array} Array of scrollable parent elements
*/
}, {
key: "getScrollableParents",
value: function getScrollableParents(element) {
var _this3 = this;
var scrollableParents = [];
if (element) {
// Get all parent elements
var parents = this.getParents(element);
// Regex to match auto or scroll overflow values
var overflowRegex = /(auto|scroll)/;
/**
* Checks if an element has overflow scroll/auto in any direction
* @param {HTMLElement} node - Element to check
* @returns {boolean} True if element has overflow scroll/auto
*/
var overflowCheck = function overflowCheck(node) {
var styleDeclaration = node ? getComputedStyle(node) : null;
return styleDeclaration && (overflowRegex.test(styleDeclaration.getPropertyValue('overflow')) || overflowRegex.test(styleDeclaration.getPropertyValue('overflow-x')) || overflowRegex.test(styleDeclaration.getPropertyValue('overflow-y')));
};
/**
* Adds a scrollable parent element to the collection
* @param {HTMLElement} node - Element to add
*/
var addScrollableParent = function addScrollableParent(node) {
// For document/body/html elements, add window instead
scrollableParents.push(node.nodeName === 'BODY' || node.nodeName === 'HTML' || _this3.isDocument(node) ? window : node);
};
// Iterate through all parent elements
var _iterator = _createForOfIteratorHelper$h(parents),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var _parent$dataset;
var parent = _step.value;
// Check for custom scroll selectors in data attribute
var scrollSelectors = parent.nodeType === 1 && ((_parent$dataset = parent.dataset) === null || _parent$dataset === void 0 ? void 0 : _parent$dataset.scrollselectors);
if (scrollSelectors) {
var selectors = scrollSelectors.split(',');
// Check each selector
var _iterator2 = _createForOfIteratorHelper$h(selectors),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var selector = _step2.value;
var el = this.findSingle(parent, selector);
if (el && overflowCheck(el)) {
addScrollableParent(el);
}
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
}
// Check if the parent itself is scrollable
if (parent.nodeType === 1 && overflowCheck(parent)) {
addScrollableParent(parent);
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
}
return scrollableParents;
}
}, {
key: "getHiddenElementOuterHeight",
value: function getHiddenElementOuterHeight(element) {
if (element) {
element.style.visibility = 'hidden';
element.style.display = 'block';
var elementHeight = element.offsetHeight;
element.style.display = 'none';
element.style.visibility = 'visible';
return elementHeight;
}
return 0;
}
}, {
key: "getHiddenElementOuterWidth",
value: function getHiddenElementOuterWidth(element) {
if (element) {
element.style.visibility = 'hidden';
element.style.display = 'block';
var elementWidth = element.offsetWidth;
element.style.display = 'none';
element.style.visibility = 'visible';
return elementWidth;
}
return 0;
}
}, {
key: "getHiddenElementDimensions",
value: function getHiddenElementDimensions(element) {
var dimensions = {};
if (element) {
element.style.visibility = 'hidden';
element.style.display = 'block';
dimensions.width = element.offsetWidth;
dimensions.height = element.offsetHeight;
element.style.display = 'none';
element.style.visibility = 'visible';
}
return dimensions;
}
}, {
key: "fadeIn",
value: function fadeIn(element, duration) {
if (element) {
element.style.opacity = 0;
var last = +new Date();
var opacity = 0;
var _tick = function tick() {
opacity = +element.style.opacity + (new Date().getTime() - last) / duration;
element.style.opacity = opacity;
last = +new Date();
if (+opacity < 1) {
window.requestAnimationFrame && requestAnimationFrame(_tick) || setTimeout(_tick, 16);
}
};
_tick();
}
}
}, {
key: "fadeOut",
value: function fadeOut(element, duration) {
if (element) {
var opacity = 1;
var interval = 50;
var gap = interval / duration;
var fading = setInterval(function () {
opacity = opacity - gap;
if (opacity <= 0) {
opacity = 0;
clearInterval(fading);
}
element.style.opacity = opacity;
}, interval);
}
}
}, {
key: "getUserAgent",
value: function getUserAgent() {
return navigator.userAgent;
}
}, {
key: "isIOS",
value: function isIOS() {
return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
}
}, {
key: "isAndroid",
value: function isAndroid() {
return /(android)/i.test(navigator.userAgent);
}
}, {
key: "isChrome",
value: function isChrome() {
return /(chrome)/i.test(navigator.userAgent);
}
}, {
key: "isClient",
value: function isClient() {
return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
}
}, {
key: "isTouchDevice",
value: function isTouchDevice() {
return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
}
}, {
key: "isFunction",
value: function isFunction(obj) {
return !!(obj && obj.constructor && obj.call && obj.apply);
}
}, {
key: "appendChild",
value: function appendChild(element, target) {
if (this.isElement(target)) {
target.appendChild(element);
} else if (target.el && target.el.nativeElement) {
target.el.nativeElement.appendChild(element);
} else {
throw new Error('Cannot append ' + target + ' to ' + element);
}
}
}, {
key: "removeChild",
value: function removeChild(element, target) {
if (this.isElement(target)) {
target.removeChild(element);
} else if (target.el && target.el.nativeElement) {
target.el.nativeElement.removeChild(element);
} else {
throw new Error('Cannot remove ' + element + ' from ' + target);
}
}
}, {
key: "isElement",
value: function isElement(obj) {
return (typeof HTMLElement === "undefined" ? "undefined" : _typeof(HTMLElement)) === 'object' ? obj instanceof HTMLElement : obj && _typeof(obj) === 'object' && obj !== null && obj.nodeType === 1 && typeof obj.nodeName === 'string';
}
}, {
key: "isDocument",
value: function isDocument(obj) {
return (typeof Document === "undefined" ? "undefined" : _typeof(Document)) === 'object' ? obj instanceof Document : obj && _typeof(obj) === 'object' && obj !== null && obj.nodeType === 9;
}
}, {
key: "scrollInView",
value: function scrollInView(container, item) {
var borderTopValue = getComputedStyle(container).getPropertyValue('border-top-width');
var borderTop = borderTopValue ? parseFloat(borderTopValue) : 0;
var paddingTopValue = getComputedStyle(container).getPropertyValue('padding-top');
var paddingTop = paddingTopValue ? parseFloat(paddingTopValue) : 0;
var containerRect = container.getBoundingClientRect();
var itemRect = item.getBoundingClientRect();
var offset = itemRect.top + document.body.scrollTop - (containerRect.top + document.body.scrollTop) - borderTop - paddingTop;
var scroll = container.scrollTop;
var elementHeight = container.clientHeight;
var itemHeight = this.getOuterHeight(item);
if (offset < 0) {
container.scrollTop = scroll + offset;
} else if (offset + itemHeight > elementHeight) {
container.scrollTop = scroll + offset - elementHeight + itemHeight;
}
}
}, {
key: "clearSelection",
value: function clearSelection() {
if (window.getSelection) {
if (window.getSelection().empty) {
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges && window.getSelection().rangeCount > 0 && window.getSelection().getRangeAt(0).getClientRects().length > 0) {
window.getSelection().removeAllRanges();
}
} else if (document.selection && document.selection.empty) {
try {
document.selection.empty();
} catch (error) {
//ignore IE bug
}
}
}
}, {
key: "calculateScrollbarWidth",
value: function calculateScrollbarWidth(el) {
if (el) {
var style = getComputedStyle(el);
return el.offsetWidth - el.clientWidth - parseFloat(style.borderLeftWidth) - parseFloat(style.borderRightWidth);
}
if (this.calculatedScrollbarWidth != null) {
return this.calculatedScrollbarWidth;
}
var scrollDiv = document.createElement('div');
scrollDiv.className = 'p-scrollbar-measure';
document.body.appendChild(scrollDiv);
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
document.body.removeChild(scrollDiv);
this.calculatedScrollbarWidth = scrollbarWidth;
return scrollbarWidth;
}
}, {
key: "calculateBodyScrollbarWidth",
value: function calculateBodyScrollbarWidth() {
return window.innerWidth - document.documentElement.offsetWidth;
}
}, {
key: "getBrowser",
value: function getBrowser() {
if (!this.browser) {
var matched = this.resolveUserAgent();
this.browser = {};
if (matched.browser) {
this.browser[matched.browser] = true;
this.browser.version = matched.version;
}
if (this.browser.chrome) {
this.browser.webkit = true;
} else if (this.browser.webkit) {
this.browser.safari = true;
}
}
return this.browser;
}
}, {
key: "resolveUserAgent",
value: function resolveUserAgent() {
var ua = navigator.userAgent.toLowerCase();
var match = /(chrome)[ ]([\w.]+)/.exec(ua) || /(webkit)[ ]([\w.]+)/.exec(ua) || /(opera)(?:.*version|)[ ]([\w.]+)/.exec(ua) || /(msie) ([\w.]+)/.exec(ua) || ua.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec(ua) || [];
return {
browser: match[1] || '',
version: match[2] || '0'
};
}
}, {
key: "blockBodyScroll",
value: function blockBodyScroll() {
var className = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'p-overflow-hidden';
/* PR Ref: https://github.com/primefaces/primereact/pull/4976
* @todo This method is called several times after this PR. Refactors will be made to prevent this in future releases.
*/
var hasScrollbarWidth = !!document.body.style.getPropertyValue('--scrollbar-width');
!hasScrollbarWidth && document.body.style.setProperty('--scrollbar-width', this.calculateBodyScrollbarWidth() + 'px');
this.addClass(document.body, className);
}
}, {
key: "unblockBodyScroll",
value: function unblockBodyScroll() {
var className = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'p-overflow-hidden';
document.body.style.removeProperty('--scrollbar-width');
this.removeClass(document.body, className);
}
}, {
key: "isVisible",
value: function isVisible(element) {
// https://stackoverflow.com/a/59096915/502366 (in future use IntersectionObserver)
return element && (element.clientHeight !== 0 || element.getClientRects().length !== 0 || getComputedStyle(element).display !== 'none');
}
}, {
key: "isExist",
value: function isExist(element) {
return !!(element !== null && typeof element !== 'undefined' && element.nodeName && element.parentNode);
}
}, {
key: "getFocusableElements",
value: function getFocusableElements(element) {
var selector = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
var focusableElements = DomHandler.find(element, "button:not([tabindex = \"-1\"]):not([disabled]):not([style*=\"display:none\"]):not([hidden])".concat(selector, ",\n [href][clientHeight][clientWidth]:not([tabindex = \"-1\"]):not([disabled]):not([style*=\"display:none\"]):not([hidden])").concat(selector, ",\n input:not([tabindex = \"-1\"]):not([disabled]):not([style*=\"display:none\"]):not([hidden])").concat(selector, ",\n select:not([tabindex = \"-1\"]):not([disabled]):not([style*=\"display:none\"]):not([hidden])").concat(selector, ",\n textarea:not([tabindex = \"-1\"]):not([disabled]):not([style*=\"display:none\"]):not([hidden])").concat(selector, ",\n [tabIndex]:not([tabIndex = \"-1\"]):not([disabled]):not([style*=\"display:none\"]):not([hidden])").concat(selector, ",\n [contenteditable]:not([tabIndex = \"-1\"]):not([disabled]):not([style*=\"display:none\"]):not([hidden])").concat(selector));
var visibleFocusableElements = [];
var _iterator3 = _createForOfIteratorHelper$h(focusableElements),
_step3;
try {
for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
var focusableElement = _step3.value;
if (getComputedStyle(focusableElement).display !== 'none' && getComputedStyle(focusableElement).visibility !== 'hidden') {
visibleFocusableElements.push(focusableElement);
}
}
} catch (err) {
_iterator3.e(err);
} finally {
_iterator3.f();
}
return visibleFocusableElements;
}
}, {
key: "getFirstFocusableElement",
value: function getFirstFocusableElement(element, selector) {
var focusableElements = DomHandler.getFocusableElements(element, selector);
return focusableElements.length > 0 ? focusableElements[0] : null;
}
}, {
key: "getLastFocusableElement",
value: function getLastFocusableElement(element, selector) {
var focusableElements = DomHandler.getFocusableElements(element, selector);
return focusableElements.length > 0 ? focusableElements[focusableElements.length - 1] : null;
}
/**
* Focus an input element if it does not already have focus.
*
* @param {HTMLElement} el a HTML element
* @param {boolean} scrollTo flag to control whether to scroll to the element, false by default
*/
}, {
key: "focus",
value: function focus(el, scrollTo) {
var preventScroll = scrollTo === undefined ? true : !scrollTo;
el && document.activeElement !== el && el.focus({
preventScroll: preventScroll
});
}
/**
* Focus the first focusable element if it does not already have focus.
*
* @param {HTMLElement} el a HTML element
* @param {boolean} scrollTo flag to control whether to scroll to the element, false by default
* @return {HTMLElement | undefined} the first focusable HTML element found
*/
}, {
key: "focusFirstElement",
value: function focusFirstElement(el, scrollTo) {
if (!el) {
return;
}
var firstFocusableElement = DomHandler.getFirstFocusableElement(el);
firstFocusableElement && DomHandler.focus(firstFocusableElement, scrollTo);
return firstFocusableElement;
}
}, {
key: "getCursorOffset",
value: function getCursorOffset(el, prevText, nextText, currentText) {
if (el) {
var style = getComputedStyle(el);
var ghostDiv = document.createElement('div');
ghostDiv.style.position = 'absolute';
ghostDiv.style.top = '0px';
ghostDiv.style.left = '0px';
ghostDiv.style.visibility = 'hidden';
ghostDiv.style.pointerEvents = 'none';
ghostDiv.style.overflow = style.overflow;
ghostDiv.style.width = style.width;
ghostDiv.style.height = style.height;
ghostDiv.style.padding = style.padding;
ghostDiv.style.border = style.border;
ghostDiv.style.overflowWrap = style.overflowWrap;
ghostDiv.style.whiteSpace = style.whiteSpace;
ghostDiv.style.lineHeight = style.lineHeight;
ghostDiv.innerHTML = prevText.replace(/\r\n|\r|\n/g, '
');
var ghostSpan = document.createElement('span');
ghostSpan.textContent = currentText;
ghostDiv.appendChild(ghostSpan);
var text = document.createTextNode(nextText);
ghostDiv.appendChild(text);
document.body.appendChild(ghostDiv);
var offsetLeft = ghostSpan.offsetLeft,
offsetTop = ghostSpan.offsetTop,
clientHeight = ghostSpan.clientHeight;
document.body.removeChild(ghostDiv);
return {
left: Math.abs(offsetLeft - el.scrollLeft),
top: Math.abs(offsetTop - el.scrollTop) + clientHeight
};
}
return {
top: 'auto',
left: 'auto'
};
}
}, {
key: "invokeElementMethod",
value: function invokeElementMethod(element, methodName, args) {
element[methodName].apply(element, args);
}
}, {
key: "isClickable",
value: function isClickable(element) {
var targetNode = element.nodeName;
var parentNode = element.parentElement && element.parentElement.nodeName;
return targetNode === 'INPUT' || targetNode === 'TEXTAREA' || targetNode === 'BUTTON' || targetNode === 'A' || parentNode === 'INPUT' || parentNode === 'TEXTAREA' || parentNode === 'BUTTON' || parentNode === 'A' || this.hasClass(element, 'p-button') || this.hasClass(element.parentElement, 'p-button') || this.hasClass(element.parentElement, 'p-checkbox') || this.hasClass(element.parentElement, 'p-radiobutton');
}
}, {
key: "applyStyle",
value: function applyStyle(element, style) {
if (typeof style === 'string') {
element.style.cssText = style;
} else {
for (var prop in style) {
element.style[prop] = style[prop];
}
}
}
}, {
key: "exportCSV",
value: function exportCSV(csv, filename) {
var blob = new Blob([csv], {
type: 'application/csv;charset=utf-8;'
});
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveOrOpenBlob(blob, filename + '.csv');
} else {
var isDownloaded = DomHandler.saveAs({
name: filename + '.csv',
src: URL.createObjectURL(blob)
});
if (!isDownloaded) {
csv = 'data:text/csv;charset=utf-8,' + csv;
window.open(encodeURI(csv));
}
}
}
}, {
key: "saveAs",
value: function saveAs(file) {
if (file) {
var link = document.createElement('a');
if (link.download !== undefined) {
var name = file.name,
src = file.src;
link.setAttribute('href', src);
link.setAttribute('download', name);
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
return true;
}
}
return false;
}
}, {
key: "createInlineStyle",
value: function createInlineStyle(nonce, styleContainer) {
var styleElement = document.createElement('style');
DomHandler.addNonce(styleElement, nonce);
if (!styleContainer) {
styleContainer = document.head;
}
styleContainer.appendChild(styleElement);
return styleElement;
}
}, {
key: "removeInlineStyle",
value: function removeInlineStyle(styleElement) {
if (this.isExist(styleElement)) {
try {
styleElement.parentNode.removeChild(styleElement);
} catch (error) {
// style element may have already been removed in a fast refresh
}
styleElement = null;
}
return styleElement;
}
}, {
key: "addNonce",
value: function addNonce(styleElement, nonce) {
try {
if (!nonce) {
nonce = process.env.REACT_APP_CSS_NONCE;
}
} catch (error) {
// NOOP
}
nonce && styleElement.setAttribute('nonce', nonce);
}
}, {
key: "getTargetElement",
value: function getTargetElement(target) {
if (!target) {
return null;
}
if (target === 'document') {
return document;
} else if (target === 'window') {
return window;
} else if (_typeof(target) === 'object' && target.hasOwnProperty('current')) {
return this.isExist(target.current) ? target.current : null;
}
var isFunction = function isFunction(obj) {
return !!(obj && obj.constructor && obj.call && obj.apply);
};
var element = isFunction(target) ? target() : target;
return this.isDocument(element) || this.isExist(element) ? element : null;
}
/**
* Get the attribute names for an element and sorts them alpha for comparison
*/
}, {
key: "getAttributeNames",
value: function getAttributeNames(node) {
var index;
var rv;
var attrs;
rv = [];
attrs = node.attributes;
for (index = 0; index < attrs.length; ++index) {
rv.push(attrs[index].nodeName);
}
rv.sort();
return rv;
}
/**
* Compare two elements for equality. Even will compare if the style element
* is out of order for example:
*
* elem1 = style="color: red; font-size: 28px"
* elem2 = style="font-size: 28px; color: red"
*/
}, {
key: "isEqualElement",
value: function isEqualElement(elm1, elm2) {
var attrs1;
var attrs2;
var name;
var node1;
var node2;
// Compare attributes without order sensitivity
attrs1 = DomHandler.getAttributeNames(elm1);
attrs2 = DomHandler.getAttributeNames(elm2);
if (attrs1.join(',') !== attrs2.join(',')) {
// console.log("Found nodes with different sets of attributes; not equiv");
return false;
}
// ...and values
// unless you want to compare DOM0 event handlers
// (onclick="...")
for (var index = 0; index < attrs1.length; ++index) {
name = attrs1[index];
if (name === 'style') {
var astyle = elm1.style;
var bstyle = elm2.style;
var rexDigitsOnly = /^\d+$/;
for (var _i3 = 0, _Object$keys = Object.keys(astyle); _i3 < _Object$keys.length; _i3++) {
var key = _Object$keys[_i3];
if (!rexDigitsOnly.test(key) && astyle[key] !== bstyle[key]) {
// Not equivalent, stop
//console.log("Found nodes with mis-matched values for attribute '" + name + "'; not equiv");
return false;
}
}
} else if (elm1.getAttribute(name) !== elm2.getAttribute(name)) {
// console.log("Found nodes with mis-matched values for attribute '" + name + "'; not equiv");
return false;
}
}
// Walk the children
for (node1 = elm1.firstChild, node2 = elm2.firstChild; node1 && node2; node1 = node1.nextSibling, node2 = node2.nextSibling) {
if (node1.nodeType !== node2.nodeType) {
// display("Found nodes of different types; not equiv");
return false;
}
if (node1.nodeType === 1) {
// Element
if (!DomHandler.isEqualElement(node1, node2)) {
return false;
}
} else if (node1.nodeValue !== node2.nodeValue) {
// console.log("Found nodes with mis-matched nodeValues; not equiv");
return false;
}
}
if (node1 || node2) {
// One of the elements had more nodes than the other
// console.log("Found more children of one element than the other; not equivalent");
return false;
}
// Seem the same
return true;
}
}, {
key: "hasCSSAnimation",
value: function hasCSSAnimation(element) {
if (element) {
var style = getComputedStyle(element);
var animationDuration = parseFloat(style.getPropertyValue('animation-duration') || '0');
return animationDuration > 0;
}
return false;
}
}, {
key: "hasCSSTransition",
value: function hasCSSTransition(element) {
if (element) {
var style = getComputedStyle(element);
var transitionDuration = parseFloat(style.getPropertyValue('transition-duration') || '0');
return transitionDuration > 0;
}
return false;
}
}]);
}();
/**
* All data- properties like data-test-id
*/
_defineProperty(DomHandler, "DATA_PROPS", ['data-']);
/**
* All ARIA properties like aria-label and focus-target for https://www.npmjs.com/package/@q42/floating-focus-a11y
*/
_defineProperty(DomHandler, "ARIA_PROPS", ['aria', 'focus-target']);
function EventBus() {
var allHandlers = new Map();
return {
on: function on(type, handler) {
var handlers = allHandlers.get(type);
if (!handlers) {
handlers = [handler];
} else {
handlers.push(handler);
}
allHandlers.set(type, handlers);
},
off: function off(type, handler) {
var handlers = allHandlers.get(type);
handlers && handlers.splice(handlers.indexOf(handler) >>> 0, 1);
},
emit: function emit(type, evt) {
var handlers = allHandlers.get(type);
handlers && handlers.slice().forEach(function (handler) {
return handler(evt);
});
}
};
}
function _createForOfIteratorHelper$g(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$g(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray$g(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$g(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$g(r, a) : void 0; } }
function _arrayLikeToArray$g(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; }
var ObjectUtils = /*#__PURE__*/function () {
function ObjectUtils() {
_classCallCheck(this, ObjectUtils);
}
return _createClass(ObjectUtils, null, [{
key: "equals",
value: function equals(obj1, obj2, field) {
if (field && obj1 && _typeof(obj1) === 'object' && obj2 && _typeof(obj2) === 'object') {
return this.deepEquals(this.resolveFieldData(obj1, field), this.resolveFieldData(obj2, field));
}
return this.deepEquals(obj1, obj2);
}
/**
* Compares two JSON objects for deep equality recursively comparing both objects.
* @param {*} a the first JSON object
* @param {*} b the second JSON object
* @returns true if equals, false it not
*/
}, {
key: "deepEquals",
value: function deepEquals(a, b) {
if (a === b) {
return true;
}
if (a && b && _typeof(a) === 'object' && _typeof(b) === 'object') {
var arrA = Array.isArray(a);
var arrB = Array.isArray(b);
var i;
var length;
var key;
if (arrA && arrB) {
length = a.length;
if (length !== b.length) {
return false;
}
for (i = length; i-- !== 0;) {
if (!this.deepEquals(a[i], b[i])) {
return false;
}
}
return true;
}
if (arrA !== arrB) {
return false;
}
var dateA = a instanceof Date;
var dateB = b instanceof Date;
if (dateA !== dateB) {
return false;
}
if (dateA && dateB) {
return a.getTime() === b.getTime();
}
var regexpA = a instanceof RegExp;
var regexpB = b instanceof RegExp;
if (regexpA !== regexpB) {
return false;
}
if (regexpA && regexpB) {
return a.toString() === b.toString();
}
var keys = Object.keys(a);
length = keys.length;
if (length !== Object.keys(b).length) {
return false;
}
for (i = length; i-- !== 0;) {
if (!Object.prototype.hasOwnProperty.call(b, keys[i])) {
return false;
}
}
for (i = length; i-- !== 0;) {
key = keys[i];
if (!this.deepEquals(a[key], b[key])) {
return false;
}
}
return true;
}
/*eslint no-self-compare: "off"*/
return a !== a && b !== b;
}
}, {
key: "resolveFieldData",
value: function resolveFieldData(data, field) {
if (!data || !field) {
// short circuit if there is nothing to resolve
return null;
}
try {
var value = data[field];
if (this.isNotEmpty(value)) {
return value;
}
} catch (_unused) {
// Performance optimization: https://github.com/primefaces/primereact/issues/4797
// do nothing and continue to other methods to resolve field data
}
if (Object.keys(data).length) {
if (this.isFunction(field)) {
return field(data);
} else if (this.isNotEmpty(data[field])) {
return data[field];
} else if (field.indexOf('.') === -1) {
return data[field];
}
var fields = field.split('.');
var _value = data;
for (var i = 0, len = fields.length; i < len; ++i) {
if (_value == null) {
return null;
}
_value = _value[fields[i]];
}
return _value;
}
return null;
}
}, {
key: "findDiffKeys",
value: function findDiffKeys(obj1, obj2) {
if (!obj1 || !obj2) {
return {};
}
return Object.keys(obj1).filter(function (key) {
return !obj2.hasOwnProperty(key);
}).reduce(function (result, current) {
result[current] = obj1[current];
return result;
}, {});
}
/**
* Removes keys from a JSON object that start with a string such as "data" to get all "data-id" type properties.
*
* @param {any} obj the JSON object to reduce
* @param {string[]} startsWiths the string(s) to check if the property starts with this key
* @returns the JSON object containing only the key/values that match the startsWith string
*/
}, {
key: "reduceKeys",
value: function reduceKeys(obj, startsWiths) {
var result = {};
if (!obj || !startsWiths || startsWiths.length === 0) {
return result;
}
Object.keys(obj).filter(function (key) {
return startsWiths.some(function (value) {
return key.startsWith(value);
});
}).forEach(function (key) {
result[key] = obj[key];
delete obj[key];
});
return result;
}
}, {
key: "reorderArray",
value: function reorderArray(value, from, to) {
if (value && from !== to) {
if (to >= value.length) {
to = to % value.length;
from = from % value.length;
}
value.splice(to, 0, value.splice(from, 1)[0]);
}
}
}, {
key: "findIndexInList",
value: function findIndexInList(value, list, dataKey) {
var _this = this;
if (list) {
return dataKey ? list.findIndex(function (item) {
return _this.equals(item, value, dataKey);
}) : list.findIndex(function (item) {
return item === value;
});
}
return -1;
}
}, {
key: "getJSXElement",
value: function getJSXElement(obj) {
for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
params[_key - 1] = arguments[_key];
}
return this.isFunction(obj) ? obj.apply(void 0, params) : obj;
}
}, {
key: "getItemValue",
value: function getItemValue(obj) {
for (var _len2 = arguments.length, params = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
params[_key2 - 1] = arguments[_key2];
}
return this.isFunction(obj) ? obj.apply(void 0, params) : obj;
}
}, {
key: "getProp",
value: function getProp(props) {
var prop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
var defaultProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var value = props ? props[prop] : undefined;
return value === undefined ? defaultProps[prop] : value;
}
}, {
key: "getPropCaseInsensitive",
value: function getPropCaseInsensitive(props, prop) {
var defaultProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var fkey = this.toFlatCase(prop);
for (var key in props) {
if (props.hasOwnProperty(key) && this.toFlatCase(key) === fkey) {
return props[key];
}
}
for (var _key3 in defaultProps) {
if (defaultProps.hasOwnProperty(_key3) && this.toFlatCase(_key3) === fkey) {
return defaultProps[_key3];
}
}
return undefined; // Property not found
}
}, {
key: "getMergedProps",
value: function getMergedProps(props, defaultProps) {
return Object.assign({}, defaultProps, props);
}
}, {
key: "getDiffProps",
value: function getDiffProps(props, defaultProps) {
return this.findDiffKeys(props, defaultProps);
}
/**
* Gets the value of a property which can be a function or a direct value.
* If the property is a function, it will be invoked with the provided parameters.
* @param {*} obj - The object to get the value from
* @param {...*} params - Parameters to pass to the function if obj is a function
* @returns {*} The resolved value
*/
}, {
key: "getPropValue",
value: function getPropValue(obj) {
// If obj is not a function, return it directly
if (!this.isFunction(obj)) {
return obj;
}
// Handle function invocation
for (var _len3 = arguments.length, params = new Array(_len3 > 1 ? _len3 - 1 : 0), _key4 = 1; _key4 < _len3; _key4++) {
params[_key4 - 1] = arguments[_key4];
}
if (params.length === 1) {
// For single parameter case, unwrap array if needed to avoid extra nesting
var param = params[0];
return obj(Array.isArray(param) ? param[0] : param);
}
// Pass all parameters to function
return obj.apply(void 0, params);
}
}, {
key: "getComponentProp",
value: function getComponentProp(component) {
var prop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
var defaultProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
return this.isNotEmpty(component) ? this.getProp(component.props, prop, defaultProps) : undefined;
}
}, {
key: "getComponentProps",
value: function getComponentProps(component, defaultProps) {
return this.isNotEmpty(component) ? this.getMergedProps(component.props, defaultProps) : undefined;
}
}, {
key: "getComponentDiffProps",
value: function getComponentDiffProps(component, defaultProps) {
return this.isNotEmpty(component) ? this.getDiffProps(component.props, defaultProps) : undefined;
}
}, {
key: "isValidChild",
value: function isValidChild(child, type, validTypes) {
/* eslint-disable */
if (child) {
var _child$type;
var childType = this.getComponentProp(child, '__TYPE') || (child.type ? child.type.displayName : undefined);
// for App Router in Next.js ^14,
if (!childType && child !== null && child !== void 0 && (_child$type = child.type) !== null && _child$type !== void 0 && (_child$type = _child$type._payload) !== null && _child$type !== void 0 && _child$type.value) {
childType = child.type._payload.value.find(function (v) {
return v === type;
});
}
var isValid = childType === type;
try {
var messageTypes; if ("production" !== 'production' && !isValid) ;
} catch (error) {
// NOOP
}
return isValid;
}
return false;
/* eslint-enable */
}
}, {
key: "getRefElement",
value: function getRefElement(ref) {
if (ref) {
return _typeof(ref) === 'object' && ref.hasOwnProperty('current') ? ref.current : ref;
}
return null;
}
}, {
key: "combinedRefs",
value: function combinedRefs(innerRef, forwardRef) {
if (innerRef && forwardRef) {
if (typeof forwardRef === 'function') {
forwardRef(innerRef.current);
} else {
forwardRef.current = innerRef.current;
}
}
}
}, {
key: "removeAccents",
value: function removeAccents(str) {
if (str && str.search(/[\xC0-\xFF]/g) > -1) {
str = str.replace(/[\xC0-\xC5]/g, 'A').replace(/[\xC6]/g, 'AE').replace(/[\xC7]/g, 'C').replace(/[\xC8-\xCB]/g, 'E').replace(/[\xCC-\xCF]/g, 'I').replace(/[\xD0]/g, 'D').replace(/[\xD1]/g, 'N').replace(/[\xD2-\xD6\xD8]/g, 'O').replace(/[\xD9-\xDC]/g, 'U').replace(/[\xDD]/g, 'Y').replace(/[\xDE]/g, 'P').replace(/[\xE0-\xE5]/g, 'a').replace(/[\xE6]/g, 'ae').replace(/[\xE7]/g, 'c').replace(/[\xE8-\xEB]/g, 'e').replace(/[\xEC-\xEF]/g, 'i').replace(/[\xF1]/g, 'n').replace(/[\xF2-\xF6\xF8]/g, 'o').replace(/[\xF9-\xFC]/g, 'u').replace(/[\xFE]/g, 'p').replace(/[\xFD\xFF]/g, 'y');
}
return str;
}
}, {
key: "toFlatCase",
value: function toFlatCase(str) {
// convert snake, kebab, camel and pascal cases to flat case
return this.isNotEmpty(str) && this.isString(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
}
}, {
key: "toCapitalCase",
value: function toCapitalCase(str) {
return this.isNotEmpty(str) && this.isString(str) ? str[0].toUpperCase() + str.slice(1) : str;
}
}, {
key: "trim",
value: function trim(value) {
// trim only if the value is actually a string
return this.isNotEmpty(value) && this.isString(value) ? value.trim() : value;
}
}, {
key: "isEmpty",
value: function isEmpty(value) {
return value === null || value === undefined || value === '' || Array.isArray(value) && value.length === 0 || !(value instanceof Date) && _typeof(value) === 'object' && Object.keys(value).length === 0;
}
}, {
key: "isNotEmpty",
value: function isNotEmpty(value) {
return !this.isEmpty(value);
}
}, {
key: "isFunction",
value: function isFunction(value) {
return !!(value && value.constructor && value.call && value.apply);
}
}, {
key: "isObject",
value: function isObject(value) {
return value !== null && value instanceof Object && value.constructor === Object;
}
}, {
key: "isDate",
value: function isDate(value) {
return value !== null && value instanceof Date && value.constructor === Date;
}
}, {
key: "isArray",
value: function isArray(value) {
return value !== null && Array.isArray(value);
}
}, {
key: "isString",
value: function isString(value) {
return value !== null && typeof value === 'string';
}
}, {
key: "isPrintableCharacter",
value: function isPrintableCharacter() {
var _char = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
return this.isNotEmpty(_char) && _char.length === 1 && _char.match(/\S| /);
}
}, {
key: "isLetter",
value: function isLetter(_char2) {
return /^[a-zA-Z\u00C0-\u017F]$/.test(_char2);
}
}, {
key: "isScalar",
value: function isScalar(value) {
return value != null && (typeof value === 'string' || typeof value === 'number' || typeof value === 'bigint' || typeof value === 'boolean');
}
/**
* Firefox-v103 does not currently support the "findLast" method. It is stated that this method will be supported with Firefox-v104.
* https://caniuse.com/mdn-javascript_builtins_array_findlast
*/
}, {
key: "findLast",
value: function findLast(arr, callback) {
var item;
if (this.isNotEmpty(arr)) {
try {
item = arr.findLast(callback);
} catch (_unused2) {
item = _toConsumableArray(arr).reverse().find(callback);
}
}
return item;
}
/**
* Firefox-v103 does not currently support the "findLastIndex" method. It is stated that this method will be supported with Firefox-v104.
* https://caniuse.com/mdn-javascript_builtins_array_findlastindex
*/
}, {
key: "findLastIndex",
value: function findLastIndex(arr, callback) {
var index = -1;
if (this.isNotEmpty(arr)) {
try {
index = arr.findLastIndex(callback);
} catch (_unused3) {
index = arr.lastIndexOf(_toConsumableArray(arr).reverse().find(callback));
}
}
return index;
}
}, {
key: "sort",
value: function sort(value1, value2) {
var order = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
var comparator = arguments.length > 3 ? arguments[3] : undefined;
var nullSortOrder = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
var result = this.compare(value1, value2, comparator, order);
var finalSortOrder = order;
// nullSortOrder == 1 means Excel like sort nulls at bottom
if (this.isEmpty(value1) || this.isEmpty(value2)) {
finalSortOrder = nullSortOrder === 1 ? order : nullSortOrder;
}
return finalSortOrder * result;
}
}, {
key: "compare",
value: function compare(value1, value2, comparator) {
var order = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
var result = -1;
var emptyValue1 = this.isEmpty(value1);
var emptyValue2 = this.isEmpty(value2);
if (emptyValue1 && emptyValue2) {
result = 0;
} else if (emptyValue1) {
result = order;
} else if (emptyValue2) {
result = -order;
} else if (typeof value1 === 'string' && typeof value2 === 'string') {
result = comparator(value1, value2);
} else {
result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
}
return result;
}
}, {
key: "localeComparator",
value: function localeComparator(locale) {
//performance gain using Int.Collator. It is not recommended to use localeCompare against large arrays.
return new Intl.Collator(locale, {
numeric: true
}).compare;
}
}, {
key: "findChildrenByKey",
value: function findChildrenByKey(data, key) {
var _iterator = _createForOfIteratorHelper$g(data),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var item = _step.value;
if (item.key === key) {
return item.children || [];
} else if (item.children) {
var result = this.findChildrenByKey(item.children, key);
if (result.length > 0) {
return result;
}
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return [];
}
/**
* This function takes mutates and object with a new value given
* a specific field. This will handle deeply nested fields that
* need to be modified or created.
*
* e.g:
* data = {
* nested: {
* foo: "bar"
* }
* }
*
* field = "nested.foo"
* value = "baz"
*
* The function will mutate data to be
* e.g:
* data = {
* nested: {
* foo: "baz"
* }
* }
*
* @param {object} data the object to be modified
* @param {string} field the field in the object to replace
* @param {any} value the value to have replaced in the field
*/
}, {
key: "mutateFieldData",
value: function mutateFieldData(data, field, value) {
if (_typeof(data) !== 'object' || typeof field !== 'string') {
// short circuit if there is nothing to resolve
return;
}
var fields = field.split('.');
var obj = data;
for (var i = 0, len = fields.length; i < len; ++i) {
// Check if we are on the last field
if (i + 1 - len === 0) {
obj[fields[i]] = value;
break;
}
if (!obj[fields[i]]) {
obj[fields[i]] = {};
}
obj = obj[fields[i]];
}
}
/**
* This helper function takes an object and a dot-separated key path. It traverses the object based on the path,
* returning the value at the specified depth. If any part of the path is missing or undefined, it returns undefined.
*
* Example:
* const obj = { name: 'Alice', address: { city: 'Wonderland', zip: 12345 } };
* const path = 'address.city';
* const result = ObjectUtils.getNestedValue(obj, path);
* console.log(result); // Output: "Wonderland"
*
* @param {object} obj - The object to traverse.
* @param {string} path - The dot-separated key path.
* @returns {*} The value at the specified depth, or undefined if any part of the path is missing or undefined.
*/
}, {
key: "getNestedValue",
value: function getNestedValue(obj, path) {
return path.split('.').reduce(function (acc, part) {
return acc && acc[part] !== undefined ? acc[part] : undefined;
}, obj);
}
/**
* This function takes an object and a dot-separated key path. It traverses the object based on the path,
* returning the value at the specified depth. If any part of the path is missing or undefined, it returns undefined.
*
* Example:
* const objA = { name: 'Alice', address: { city: 'Wonderland', zip: 12345 } };
* const objB = { name: 'Alice', address: { city: 'Wonderland', zip: 12345 } };
* const result = ObjectUtils.absoluteCompare(objA, objB);
* console.log(result); // Output: true
*
* const objC = { name: 'Alice', address: { city: 'Wonderland', zip: 12346 } };
* const result2 = ObjectUtils.absoluteCompare(objA, objC);
* console.log(result2); // Output: false
*
* @param {object} objA - The first object to compare.
* @param {object} objB - The second object to compare.
* @param {number} [maxDepth=1] - The maximum depth to compare.
* @param {number} [currentDepth=0] - The current depth (used internally for recursion).
* @returns {boolean} True if the objects are equal within the specified depth, false otherwise.
*
*/
}, {
key: "absoluteCompare",
value: function absoluteCompare(objA, objB) {
var maxDepth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
var currentDepth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
if (!objA || !objB) return true;
if (currentDepth > maxDepth) return true;
if (_typeof(objA) !== _typeof(objB)) return false;
var aKeys = Object.keys(objA);
var bKeys = Object.keys(objB);
if (aKeys.length !== bKeys.length) return false;
for (var _i = 0, _aKeys = aKeys; _i < _aKeys.length; _i++) {
var key = _aKeys[_i];
var aValue = objA[key];
var bValue = objB[key];
// Skip comparison if values are objects
var isObject = ObjectUtils.isObject(aValue) && ObjectUtils.isObject(bValue);
var isFunction = ObjectUtils.isFunction(aValue) && ObjectUtils.isFunction(bValue);
if ((isObject || isFunction) && !this.absoluteCompare(aValue, bValue, maxDepth, currentDepth + 1)) return false;
if (!isObject && aValue !== bValue) return false;
}
return true;
}
/**
* This helper function takes two objects and a list of keys to compare. It compares the values of the specified keys
* in both objects. If any comparison fails, it returns false. If all specified properties are equal, it returns true.
* It performs a shallow comparison using absoluteCompare if no keys are provided.
*
* Example:
* const objA = { name: 'Alice', address: { city: 'Wonderland', zip: 12345 } };
* const objB = { name: 'Alice', address: { city: 'Wonderland', zip: 12345 } };
* const keysToCompare = ['name', 'address.city', 'address.zip'];
* const result = ObjectUtils.selectiveCompare(objA, objB, keysToCompare);
* console.log(result); // Output: true
*
* const objC = { name: 'Alice', address: { city: 'Wonderland', zip: 12346 } };
* const result2 = ObjectUtils.selectiveCompare(objA, objC, keysToCompare);
* console.log(result2); // Output: false
*
* @param {object} a - The first object to compare.
* @param {object} b - The second object to compare.
* @param {string[]} [keysToCompare] - The keys to compare. If not provided, performs a shallow comparison using absoluteCompare.
* @param {number} [maxDepth=1] - The maximum depth to compare if the variables are objects.
* @returns {boolean} True if all specified properties are equal, false otherwise.
*/
}, {
key: "selectiveCompare",
value: function selectiveCompare(a, b, keysToCompare) {
var maxDepth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
if (a === b) return true;
if (!a || !b || _typeof(a) !== 'object' || _typeof(b) !== 'object') return false;
if (!keysToCompare) return this.absoluteCompare(a, b, 1); // If no keys are provided, the comparison is limited to one depth level.
var _iterator2 = _createForOfIteratorHelper$g(keysToCompare),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var key = _step2.value;
var aValue = this.getNestedValue(a, key);
var bValue = this.getNestedValue(b, key);
var isObject = _typeof(aValue) === 'object' && aValue !== null && _typeof(bValue) === 'object' && bValue !== null;
// If the current key is an object, they are compared in one further level only.
if (isObject && !this.absoluteCompare(aValue, bValue, maxDepth)) return false;
if (!isObject && aValue !== bValue) return false;
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
return true;
}
}]);
}();
var lastId = 0;
function UniqueComponentId() {
var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'pr_id_';
lastId++;
return "".concat(prefix).concat(lastId);
}
function ownKeys$22(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$22(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$22(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$22(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var IconUtils = /*#__PURE__*/function () {
function IconUtils() {
_classCallCheck(this, IconUtils);
}
return _createClass(IconUtils, null, [{
key: "getJSXIcon",
value: function getJSXIcon(icon) {
var iconProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var content = null;
if (icon !== null) {
var iconType = _typeof(icon);
var className = classNames(iconProps.className, iconType === 'string' && icon);
content = /*#__PURE__*/React.createElement("span", _extends({}, iconProps, {
className: className,
key: UniqueComponentId('icon')
}));
if (iconType !== 'string') {
var defaultContentOptions = _objectSpread$22({
iconProps: iconProps,
element: content
}, options);
return ObjectUtils.getJSXElement(icon, defaultContentOptions);
}
}
return content;
}
}]);
}();
function ownKeys$21(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$21(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$21(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$21(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function mask(el, options) {
var defaultOptions = {
mask: null,
slotChar: '_',
autoClear: true,
unmask: false,
readOnly: false,
onComplete: null,
onChange: null,
onFocus: null,
onBlur: null
};
options = _objectSpread$21(_objectSpread$21({}, defaultOptions), options);
var tests;
var partialPosition;
var len;
var firstNonMaskPos;
var defs;
var androidChrome;
var lastRequiredNonMaskPos;
var oldVal;
var focusText;
var caretTimeoutId;
var buffer;
var defaultBuffer;
var caret = function caret(first, last) {
var range;
var begin;
var end;
if (!el.offsetParent || el !== document.activeElement) {
return;
}
if (typeof first === 'number') {
begin = first;
end = typeof last === 'number' ? last : begin;
if (el.setSelectionRange) {
el.setSelectionRange(begin, end);
} else if (el.createTextRange) {
range = el.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', begin);
range.select();
}
} else {
if (el.setSelectionRange) {
begin = el.selectionStart;
end = el.selectionEnd;
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
begin = 0 - range.duplicate().moveStart('character', -100000);
end = begin + range.text.length;
}
return {
begin: begin,
end: end
};
}
};
var isCompleted = function isCompleted() {
for (var i = firstNonMaskPos; i <= lastRequiredNonMaskPos; i++) {
if (tests[i] && buffer[i] === getPlaceholder(i)) {
return false;
}
}
return true;
};
var getPlaceholder = function getPlaceholder(i) {
if (i < options.slotChar.length) {
return options.slotChar.charAt(i);
}
return options.slotChar.charAt(0);
};
var getValue = function getValue() {
return options.unmask ? getUnmaskedValue() : el && el.value;
};
var seekNext = function seekNext(pos) {
while (++pos < len && !tests[pos]) {}
return pos;
};
var seekPrev = function seekPrev(pos) {
while (--pos >= 0 && !tests[pos]) {}
return pos;
};
var shiftL = function shiftL(begin, end) {
var i;
var j;
if (begin < 0) {
return;
}
for (i = begin, j = seekNext(end); i < len; i++) {
if (tests[i]) {
if (j < len && tests[i].test(buffer[j])) {
buffer[i] = buffer[j];
buffer[j] = getPlaceholder(j);
} else {
break;
}
j = seekNext(j);
}
}
writeBuffer();
caret(Math.max(firstNonMaskPos, begin));
};
var shiftR = function shiftR(pos) {
var i;
var c;
var j;
var t;
for (i = pos, c = getPlaceholder(pos); i < len; i++) {
if (tests[i]) {
j = seekNext(i);
t = buffer[i];
buffer[i] = c;
if (j < len && tests[j].test(t)) {
c = t;
} else {
break;
}
}
}
};
var handleAndroidInput = function handleAndroidInput(e) {
var curVal = el.value;
var pos = caret();
if (oldVal && oldVal.length && oldVal.length > curVal.length) {
// a deletion or backspace happened
checkVal(true);
while (pos.begin > 0 && !tests[pos.begin - 1]) {
pos.begin--;
}
if (pos.begin === 0) {
while (pos.begin < firstNonMaskPos && !tests[pos.begin]) {
pos.begin++;
}
}
caret(pos.begin, pos.begin);
} else {
checkVal(true);
while (pos.begin < len && !tests[pos.begin]) {
pos.begin++;
}
caret(pos.begin, pos.begin);
}
if (options.onComplete && isCompleted()) {
options.onComplete({
originalEvent: e,
value: getValue()
});
}
};
var onBlur = function onBlur(e) {
checkVal();
options.onBlur && options.onBlur(e);
updateModel(e);
if (el.value !== focusText) {
var event = document.createEvent('HTMLEvents');
event.initEvent('change', true, false);
el.dispatchEvent(event);
}
};
var onKeyDown = function onKeyDown(e) {
if (options.readOnly) {
return;
}
var k = e.which || e.keyCode;
var pos;
var begin;
var end;
oldVal = el.value;
//backspace, delete, and escape get special treatment
if (k === 8 || k === 46 || DomHandler.isIOS() && k === 127) {
pos = caret();
begin = pos.begin;
end = pos.end;
if (end - begin === 0) {
begin = k !== 46 ? seekPrev(begin) : end = seekNext(begin - 1);
end = k === 46 ? seekNext(end) : end;
}
clearBuffer(begin, end);
shiftL(begin, end - 1);
updateModel(e);
e.preventDefault();
} else if (k === 13) {
// enter
onBlur(e);
updateModel(e);
} else if (k === 27) {
// escape
el.value = focusText;
caret(0, checkVal());
updateModel(e);
e.preventDefault();
}
};
var onKeyPress = function onKeyPress(e) {
if (options.readOnly) {
return;
}
var k = e.which || e.keyCode;
var pos = caret();
var p;
var c;
var next;
var completed;
if (e.ctrlKey || e.altKey || e.metaKey || k < 32) {
//Ignore
return;
} else if (k && k !== 13) {
if (pos.end - pos.begin !== 0) {
clearBuffer(pos.begin, pos.end);
shiftL(pos.begin, pos.end - 1);
}
p = seekNext(pos.begin - 1);
if (p < len) {
c = String.fromCharCode(k);
if (tests[p].test(c)) {
shiftR(p);
buffer[p] = c;
writeBuffer();
next = seekNext(p);
if (DomHandler.isAndroid()) {
//Path for CSP Violation on FireFox OS 1.1
var proxy = function proxy() {
caret(next);
};
setTimeout(proxy, 0);
} else {
caret(next);
}
if (pos.begin <= lastRequiredNonMaskPos) {
completed = isCompleted();
}
}
}
e.preventDefault();
}
updateModel(e);
if (options.onComplete && completed) {
options.onComplete({
originalEvent: e,
value: getValue()
});
}
};
var clearBuffer = function clearBuffer(start, end) {
var i;
for (i = start; i < end && i < len; i++) {
if (tests[i]) {
buffer[i] = getPlaceholder(i);
}
}
};
var writeBuffer = function writeBuffer() {
el.value = buffer.join('');
};
var checkVal = function checkVal(allow) {
//try to place characters where they belong
var test = el.value;
var lastMatch = -1;
var i;
var c;
var pos;
for (i = 0, pos = 0; i < len; i++) {
if (tests[i]) {
buffer[i] = getPlaceholder(i);
while (pos++ < test.length) {
c = test.charAt(pos - 1);
if (tests[i].test(c)) {
buffer[i] = c;
lastMatch = i;
break;
}
}
if (pos > test.length) {
clearBuffer(i + 1, len);
break;
}
} else {
if (buffer[i] === test.charAt(pos)) {
pos++;
}
if (i < partialPosition) {
lastMatch = i;
}
}
}
if (allow) {
writeBuffer();
} else if (lastMatch + 1 < partialPosition) {
if (options.autoClear || buffer.join('') === defaultBuffer) {
// Invalid value. Remove it and replace it with the
// mask, which is the default behavior.
if (el.value) {
el.value = '';
}
clearBuffer(0, len);
} else {
// Invalid value, but we opt to show the value to the
// user and allow them to correct their mistake.
writeBuffer();
}
} else {
writeBuffer();
el.value = el.value.substring(0, lastMatch + 1);
}
return partialPosition ? i : firstNonMaskPos;
};
var onFocus = function onFocus(e) {
if (options.readOnly) {
return;
}
clearTimeout(caretTimeoutId);
var pos;
focusText = el.value;
pos = checkVal();
caretTimeoutId = setTimeout(function () {
if (el !== document.activeElement) {
return;
}
writeBuffer();
if (pos === options.mask.replace('?', '').length) {
caret(0, pos);
} else {
caret(pos);
}
}, 100);
if (options.onFocus) {
options.onFocus(e);
}
};
var onInput = function onInput(event) {
if (androidChrome) {
handleAndroidInput(event);
} else {
handleInputChange(event);
}
};
var handleInputChange = function handleInputChange(e) {
if (options.readOnly) {
return;
}
var pos = checkVal(true);
caret(pos);
updateModel(e);
if (options.onComplete && isCompleted()) {
options.onComplete({
originalEvent: e,
value: getValue()
});
}
};
var getUnmaskedValue = function getUnmaskedValue() {
var unmaskedBuffer = [];
for (var i = 0; i < buffer.length; i++) {
var c = buffer[i];
if (tests[i] && c !== getPlaceholder(i)) {
unmaskedBuffer.push(c);
}
}
return unmaskedBuffer.join('');
};
var updateModel = function updateModel(e) {
if (options.onChange) {
var val = getValue();
options.onChange({
originalEvent: e,
value: defaultBuffer !== val ? val : '',
stopPropagation: function stopPropagation() {
e.stopPropagation();
},
preventDefault: function preventDefault() {
e.preventDefault();
},
target: {
value: defaultBuffer !== val ? val : ''
}
});
}
};
var bindEvents = function bindEvents() {
el.addEventListener('focus', onFocus);
el.addEventListener('blur', onBlur);
el.addEventListener('keydown', onKeyDown);
el.addEventListener('keypress', onKeyPress);
el.addEventListener('input', onInput);
el.addEventListener('paste', handleInputChange);
};
var unbindEvents = function unbindEvents() {
el.removeEventListener('focus', onFocus);
el.removeEventListener('blur', onBlur);
el.removeEventListener('keydown', onKeyDown);
el.removeEventListener('keypress', onKeyPress);
el.removeEventListener('input', onInput);
el.removeEventListener('paste', handleInputChange);
};
var init = function init() {
tests = [];
partialPosition = options.mask.length;
len = options.mask.length;
firstNonMaskPos = null;
defs = {
9: '[0-9]',
a: '[A-Za-z]',
'*': '[A-Za-z0-9]'
};
androidChrome = DomHandler.isChrome() && DomHandler.isAndroid();
var maskTokens = options.mask.split('');
for (var i = 0; i < maskTokens.length; i++) {
var c = maskTokens[i];
if (c === '?') {
len--;
partialPosition = i;
} else if (defs[c]) {
tests.push(new RegExp(defs[c]));
if (firstNonMaskPos === null) {
firstNonMaskPos = tests.length - 1;
}
if (i < partialPosition) {
lastRequiredNonMaskPos = tests.length - 1;
}
} else {
tests.push(null);
}
}
buffer = [];
for (var _i = 0; _i < maskTokens.length; _i++) {
var _c = maskTokens[_i];
if (_c !== '?') {
if (defs[_c]) {
buffer.push(getPlaceholder(_i));
} else {
buffer.push(_c);
}
}
}
defaultBuffer = buffer.join('');
};
if (el && options.mask) {
init();
bindEvents();
}
return {
init: init,
bindEvents: bindEvents,
unbindEvents: unbindEvents,
updateModel: updateModel,
getValue: getValue
};
}
function ownKeys$20(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$20(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$20(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$20(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
* Merges properties together taking an Array of props and merging into one single set of
* properties. The options can contain a "classNameMergeFunction" which can be something
* like Tailwind Merge for properly merging Tailwind classes.
*
* @param {object[]} props the array of object properties to merge
* @param {*} options either empty or could contain a custom merge function like TailwindMerge
* @returns the single properties value after merging
*/
function mergeProps(props) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
if (!props) {
return undefined;
}
var isFunction = function isFunction(obj) {
return typeof obj === 'function';
};
var classNameMergeFunction = options.classNameMergeFunction;
var hasMergeFunction = isFunction(classNameMergeFunction);
return props.reduce(function (merged, ps) {
if (!ps) {
return merged;
}
var _loop = function _loop() {
var value = ps[key];
if (key === 'style') {
merged.style = _objectSpread$20(_objectSpread$20({}, merged.style), ps.style);
} else if (key === 'className') {
var newClassName = '';
if (hasMergeFunction) {
newClassName = classNameMergeFunction(merged.className, ps.className);
} else {
newClassName = [merged.className, ps.className].join(' ').trim();
}
merged.className = newClassName || undefined;
} else if (isFunction(value)) {
var existingFn = merged[key];
merged[key] = existingFn ? function () {
existingFn.apply(void 0, arguments);
value.apply(void 0, arguments);
} : value;
} else {
merged[key] = value;
}
};
for (var key in ps) {
_loop();
}
return merged;
}, {});
}
function handler() {
var zIndexes = [];
var generateZIndex = function generateZIndex(key, autoZIndex) {
var baseZIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 999;
var lastZIndex = getLastZIndex(key, autoZIndex, baseZIndex);
var newZIndex = lastZIndex.value + (lastZIndex.key === key ? 0 : baseZIndex) + 1;
zIndexes.push({
key: key,
value: newZIndex
});
return newZIndex;
};
var revertZIndex = function revertZIndex(zIndex) {
zIndexes = zIndexes.filter(function (obj) {
return obj.value !== zIndex;
});
};
var getCurrentZIndex = function getCurrentZIndex(key, autoZIndex) {
return getLastZIndex(key, autoZIndex).value;
};
var getLastZIndex = function getLastZIndex(key, autoZIndex) {
var baseZIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
return _toConsumableArray(zIndexes).reverse().find(function (obj) {
return autoZIndex ? true : obj.key === key;
}) || {
key: key,
value: baseZIndex
};
};
var getZIndex = function getZIndex(el) {
return el ? parseInt(el.style.zIndex, 10) || 0 : 0;
};
return {
get: getZIndex,
set: function set(key, el, autoZIndex, baseZIndex) {
if (el) {
el.style.zIndex = String(generateZIndex(key, autoZIndex, baseZIndex));
}
},
clear: function clear(el) {
if (el) {
revertZIndex(ZIndexUtils.get(el));
el.style.zIndex = '';
}
},
getCurrent: function getCurrent(key, autoZIndex) {
return getCurrentZIndex(key, autoZIndex);
}
};
}
var ZIndexUtils = handler();
function _createForOfIteratorHelper$f(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$f(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray$f(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$f(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$f(r, a) : void 0; } }
function _arrayLikeToArray$f(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; }
var FilterService = {
filter: function filter(value, fields, filterValue, filterMatchMode, filterLocale) {
var filteredItems = [];
if (!value) {
return filteredItems;
}
var _iterator = _createForOfIteratorHelper$f(value),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var item = _step.value;
if (typeof item === 'string') {
if (this.filters[filterMatchMode](item, filterValue, filterLocale)) {
filteredItems.push(item);
continue;
}
} else {
var _iterator2 = _createForOfIteratorHelper$f(fields),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var field = _step2.value;
var fieldValue = ObjectUtils.resolveFieldData(item, field);
if (this.filters[filterMatchMode](fieldValue, filterValue, filterLocale)) {
filteredItems.push(item);
break;
}
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return filteredItems;
},
filters: {
startsWith: function startsWith(value, filter, filterLocale) {
if (filter === undefined || filter === null || filter.trim() === '') {
return true;
}
if (value === undefined || value === null) {
return false;
}
var filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
var stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
return stringValue.slice(0, filterValue.length) === filterValue;
},
contains: function contains(value, filter, filterLocale) {
if (filter === undefined || filter === null || typeof filter === 'string' && filter.trim() === '') {
return true;
}
if (value === undefined || value === null) {
return false;
}
var filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
var stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
return stringValue.indexOf(filterValue) !== -1;
},
notContains: function notContains(value, filter, filterLocale) {
if (filter === undefined || filter === null || typeof filter === 'string' && filter.trim() === '') {
return true;
}
if (value === undefined || value === null) {
return false;
}
var filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
var stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
return stringValue.indexOf(filterValue) === -1;
},
endsWith: function endsWith(value, filter, filterLocale) {
if (filter === undefined || filter === null || filter.trim() === '') {
return true;
}
if (value === undefined || value === null) {
return false;
}
var filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
var stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
return stringValue.indexOf(filterValue, stringValue.length - filterValue.length) !== -1;
},
equals: function equals(value, filter, filterLocale) {
if (filter === undefined || filter === null || typeof filter === 'string' && filter.trim() === '') {
return true;
}
if (value === undefined || value === null) {
return false;
}
if (value.getTime && filter.getTime) {
return value.getTime() === filter.getTime();
}
return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) === ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
},
notEquals: function notEquals(value, filter, filterLocale) {
if (filter === undefined || filter === null || typeof filter === 'string' && filter.trim() === '') {
return true;
}
if (value === undefined || value === null) {
return true;
}
if (value.getTime && filter.getTime) {
return value.getTime() !== filter.getTime();
}
return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) !== ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
},
"in": function _in(value, filter) {
if (filter === undefined || filter === null || filter.length === 0) {
return true;
}
for (var i = 0; i < filter.length; i++) {
if (ObjectUtils.equals(value, filter[i])) {
return true;
}
}
return false;
},
notIn: function notIn(value, filter) {
if (filter === undefined || filter === null || filter.length === 0) {
return true;
}
for (var i = 0; i < filter.length; i++) {
if (ObjectUtils.equals(value, filter[i])) {
return false;
}
}
return true;
},
between: function between(value, filter) {
if (filter == null || filter[0] == null || filter[1] == null) {
return true;
}
if (value === undefined || value === null) {
return false;
}
if (value.getTime) {
return filter[0].getTime() <= value.getTime() && value.getTime() <= filter[1].getTime();
}
return filter[0] <= value && value <= filter[1];
},
lt: function lt(value, filter) {
if (filter === undefined || filter === null) {
return true;
}
if (value === undefined || value === null) {
return false;
}
if (value.getTime && filter.getTime) {
return value.getTime() < filter.getTime();
}
return value < filter;
},
lte: function lte(value, filter) {
if (filter === undefined || filter === null) {
return true;
}
if (value === undefined || value === null) {
return false;
}
if (value.getTime && filter.getTime) {
return value.getTime() <= filter.getTime();
}
return value <= filter;
},
gt: function gt(value, filter) {
if (filter === undefined || filter === null) {
return true;
}
if (value === undefined || value === null) {
return false;
}
if (value.getTime && filter.getTime) {
return value.getTime() > filter.getTime();
}
return value > filter;
},
gte: function gte(value, filter) {
if (filter === undefined || filter === null) {
return true;
}
if (value === undefined || value === null) {
return false;
}
if (value.getTime && filter.getTime) {
return value.getTime() >= filter.getTime();
}
return value >= filter;
},
dateIs: function dateIs(value, filter) {
if (filter === undefined || filter === null) {
return true;
}
if (value === undefined || value === null) {
return false;
}
return value.toDateString() === filter.toDateString();
},
dateIsNot: function dateIsNot(value, filter) {
if (filter === undefined || filter === null) {
return true;
}
if (value === undefined || value === null) {
return false;
}
return value.toDateString() !== filter.toDateString();
},
dateBefore: function dateBefore(value, filter) {
if (filter === undefined || filter === null) {
return true;
}
if (value === undefined || value === null) {
return false;
}
return value.getTime() < filter.getTime();
},
dateAfter: function dateAfter(value, filter) {
if (filter === undefined || filter === null) {
return true;
}
if (value === undefined || value === null) {
return false;
}
return value.getTime() > filter.getTime();
}
},
register: function register(rule, fn) {
this.filters[rule] = fn;
}
};
/**
* @deprecated please use PrimeReactContext
*/
var PrimeReact$1 = /*#__PURE__*/_createClass(function PrimeReact() {
_classCallCheck(this, PrimeReact);
});
_defineProperty(PrimeReact$1, "ripple", false);
_defineProperty(PrimeReact$1, "inputStyle", 'outlined');
_defineProperty(PrimeReact$1, "locale", 'en');
_defineProperty(PrimeReact$1, "appendTo", null);
_defineProperty(PrimeReact$1, "cssTransition", true);
_defineProperty(PrimeReact$1, "autoZIndex", true);
_defineProperty(PrimeReact$1, "hideOverlaysOnDocumentScrolling", false);
_defineProperty(PrimeReact$1, "nonce", null);
_defineProperty(PrimeReact$1, "nullSortOrder", 1);
_defineProperty(PrimeReact$1, "zIndex", {
modal: 1100,
overlay: 1000,
menu: 1000,
tooltip: 1100,
toast: 1200
});
_defineProperty(PrimeReact$1, "pt", undefined);
_defineProperty(PrimeReact$1, "filterMatchModeOptions", {
text: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS],
numeric: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO],
date: [FilterMatchMode.DATE_IS, FilterMatchMode.DATE_IS_NOT, FilterMatchMode.DATE_BEFORE, FilterMatchMode.DATE_AFTER]
});
_defineProperty(PrimeReact$1, "changeTheme", function (currentTheme, newTheme, linkElementId, callback) {
var _linkElement$parentNo;
var linkElement = document.getElementById(linkElementId);
if (!linkElement) {
throw Error("Element with id ".concat(linkElementId, " not found."));
}
var newThemeUrl = linkElement.getAttribute('href').replace(currentTheme, newTheme);
var newLinkElement = document.createElement('link');
newLinkElement.setAttribute('rel', 'stylesheet');
newLinkElement.setAttribute('id', linkElementId);
newLinkElement.setAttribute('href', newThemeUrl);
newLinkElement.addEventListener('load', function () {
if (callback) {
callback();
}
});
(_linkElement$parentNo = linkElement.parentNode) === null || _linkElement$parentNo === void 0 || _linkElement$parentNo.replaceChild(newLinkElement, linkElement);
});
function ownKeys$1$(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$1$(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1$(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1$(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var locales = {
en: {
accept: 'Yes',
addRule: 'Add Rule',
am: 'AM',
apply: 'Apply',
cancel: 'Cancel',
choose: 'Choose',
chooseDate: 'Choose Date',
chooseMonth: 'Choose Month',
chooseYear: 'Choose Year',
clear: 'Clear',
completed: 'Completed',
contains: 'Contains',
custom: 'Custom',
dateAfter: 'Date is after',
dateBefore: 'Date is before',
dateFormat: 'mm/dd/yy',
dateIs: 'Date is',
dateIsNot: 'Date is not',
dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
emptyFilterMessage: 'No results found',
emptyMessage: 'No available options',
emptySearchMessage: 'No results found',
emptySelectionMessage: 'No selected item',
endsWith: 'Ends with',
equals: 'Equals',
fileChosenMessage: '{0} files',
fileSizeTypes: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
filter: 'Filter',
firstDayOfWeek: 0,
gt: 'Greater than',
gte: 'Greater than or equal to',
lt: 'Less than',
lte: 'Less than or equal to',
matchAll: 'Match All',
matchAny: 'Match Any',
medium: 'Medium',
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
nextDecade: 'Next Decade',
nextHour: 'Next Hour',
nextMinute: 'Next Minute',
nextMonth: 'Next Month',
nextSecond: 'Next Second',
nextYear: 'Next Year',
noFileChosenMessage: 'No file chosen',
noFilter: 'No Filter',
notContains: 'Not contains',
notEquals: 'Not equals',
now: 'Now',
passwordPrompt: 'Enter a password',
pending: 'Pending',
pm: 'PM',
prevDecade: 'Previous Decade',
prevHour: 'Previous Hour',
prevMinute: 'Previous Minute',
prevMonth: 'Previous Month',
prevSecond: 'Previous Second',
prevYear: 'Previous Year',
reject: 'No',
removeRule: 'Remove Rule',
searchMessage: '{0} results are available',
selectionMessage: '{0} items selected',
showMonthAfterYear: false,
startsWith: 'Starts with',
strong: 'Strong',
today: 'Today',
upload: 'Upload',
weak: 'Weak',
weekHeader: 'Wk',
aria: {
cancelEdit: 'Cancel Edit',
close: 'Close',
collapseLabel: 'Collapse',
collapseRow: 'Row Collapsed',
editRow: 'Edit Row',
expandLabel: 'Expand',
expandRow: 'Row Expanded',
falseLabel: 'False',
filterConstraint: 'Filter Constraint',
filterOperator: 'Filter Operator',
firstPageLabel: 'First Page',
gridView: 'Grid View',
hideFilterMenu: 'Hide Filter Menu',
jumpToPageDropdownLabel: 'Jump to Page Dropdown',
jumpToPageInputLabel: 'Jump to Page Input',
lastPageLabel: 'Last Page',
listLabel: 'Option List',
listView: 'List View',
moveAllToSource: 'Move All to Source',
moveAllToTarget: 'Move All to Target',
moveBottom: 'Move Bottom',
moveDown: 'Move Down',
moveToSource: 'Move to Source',
moveToTarget: 'Move to Target',
moveTop: 'Move Top',
moveUp: 'Move Up',
navigation: 'Navigation',
next: 'Next',
nextPageLabel: 'Next Page',
nullLabel: 'Not Selected',
otpLabel: 'Please enter one time password character {0}',
pageLabel: 'Page {page}',
passwordHide: 'Hide Password',
passwordShow: 'Show Password',
previous: 'Previous',
prevPageLabel: 'Previous Page',
removeLabel: 'Remove',
rotateLeft: 'Rotate Left',
rotateRight: 'Rotate Right',
rowsPerPageLabel: 'Rows per page',
saveEdit: 'Save Edit',
scrollTop: 'Scroll Top',
selectAll: 'All items selected',
selectLabel: 'Select',
selectRow: 'Row Selected',
showFilterMenu: 'Show Filter Menu',
slide: 'Slide',
slideNumber: '{slideNumber}',
star: '1 star',
stars: '{star} stars',
trueLabel: 'True',
unselectAll: 'All items unselected',
unselectLabel: 'Unselect',
unselectRow: 'Row Unselected',
zoomImage: 'Zoom Image',
zoomIn: 'Zoom In',
zoomOut: 'Zoom Out'
}
}
};
function locale(locale) {
locale && (PrimeReact$1.locale = locale);
return {
locale: PrimeReact$1.locale,
options: locales[PrimeReact$1.locale]
};
}
function addLocale(locale, options) {
if (locale.includes('__proto__') || locale.includes('prototype')) {
throw new Error('Unsafe locale detected');
}
locales[locale] = _objectSpread$1$(_objectSpread$1$({}, locales.en), options);
}
function updateLocaleOption(key, value, locale) {
if (key.includes('__proto__') || key.includes('prototype')) {
throw new Error('Unsafe key detected');
}
localeOptions(locale)[key] = value;
}
function updateLocaleOptions(options, locale) {
if (locale.includes('__proto__') || locale.includes('prototype')) {
throw new Error('Unsafe locale detected');
}
var _locale = locale || PrimeReact$1.locale;
locales[_locale] = _objectSpread$1$(_objectSpread$1$({}, locales[_locale]), options);
}
function localeOption(key, locale) {
if (key.includes('__proto__') || key.includes('prototype')) {
throw new Error('Unsafe key detected');
}
var _locale = locale || PrimeReact$1.locale;
try {
return localeOptions(_locale)[key];
} catch (error) {
throw new Error("The ".concat(key, " option is not found in the current locale('").concat(_locale, "')."));
}
}
/**
* Find an ARIA label in the locale by key. If options are passed it will replace all options:
* ```ts
* const ariaValue = "Page {page}, User {user}, Role {role}";
* const options = { page: 2, user: "John", role: "Admin" };
* const result = ariaLabel('yourLabel', { page: 2, user: "John", role: "Admin" })
* console.log(result); // Output: Page 2, User John, Role Admin
* ```
* @param {string} ariaKey key of the ARIA label to look up in locale.
* @param {any} options JSON options like { page: 2, user: "John", role: "Admin" }
* @returns the ARIA label with replaced values
*/
function ariaLabel(ariaKey, options) {
if (ariaKey.includes('__proto__') || ariaKey.includes('prototype')) {
throw new Error('Unsafe ariaKey detected');
}
var _locale = PrimeReact$1.locale;
try {
var _ariaLabel = localeOptions(_locale).aria[ariaKey];
if (_ariaLabel) {
for (var key in options) {
if (options.hasOwnProperty(key)) {
_ariaLabel = _ariaLabel.replace("{".concat(key, "}"), options[key]);
}
}
}
return _ariaLabel;
} catch (error) {
throw new Error("The ".concat(ariaKey, " option is not found in the current locale('").concat(_locale, "')."));
}
}
function localeOptions(locale) {
var _locale = locale || PrimeReact$1.locale;
if (_locale.includes('__proto__') || _locale.includes('prototype')) {
throw new Error('Unsafe locale detected');
}
return locales[_locale];
}
var MessageSeverity = Object.freeze({
SUCCESS: 'success',
INFO: 'info',
WARN: 'warn',
ERROR: 'error',
SECONDARY: 'secondary',
CONTRAST: 'contrast'
});
var PrimeIcons = Object.freeze({
ADDRESS_BOOK: 'pi pi-address-book',
ALIGN_CENTER: 'pi pi-align-center',
ALIGN_JUSTIFY: 'pi pi-align-justify',
ALIGN_LEFT: 'pi pi-align-left',
ALIGN_RIGHT: 'pi pi-align-right',
AMAZON: 'pi pi-amazon',
ANDROID: 'pi pi-android',
ANGLE_DOUBLE_DOWN: 'pi pi-angle-double-down',
ANGLE_DOUBLE_LEFT: 'pi pi-angle-double-left',
ANGLE_DOUBLE_RIGHT: 'pi pi-angle-double-right',
ANGLE_DOUBLE_UP: 'pi pi-angle-double-up',
ANGLE_DOWN: 'pi pi-angle-down',
ANGLE_LEFT: 'pi pi-angle-left',
ANGLE_RIGHT: 'pi pi-angle-right',
ANGLE_UP: 'pi pi-angle-up',
APPLE: 'pi pi-apple',
ARROW_CIRCLE_DOWN: 'pi pi-arrow-circle-down',
ARROW_CIRCLE_LEFT: 'pi pi-arrow-circle-left',
ARROW_CIRCLE_RIGHT: 'pi pi-arrow-circle-right',
ARROW_CIRCLE_UP: 'pi pi-arrow-circle-up',
ARROW_DOWN_LEFT_AND_ARROW_UP_RIGHT_TO_CENTER: 'pi pi-arrow-down-left-and-arrow-up-right-to-center',
ARROW_DOWN_LEFT: 'pi pi-arrow-down-left',
ARROW_DOWN_RIGHT: 'pi pi-arrow-down-right',
ARROW_DOWN: 'pi pi-arrow-down',
ARROW_LEFT: 'pi pi-arrow-left',
ARROW_RIGHT_ARROW_LEFT: 'pi pi-arrow-right-arrow-left',
ARROW_RIGHT: 'pi pi-arrow-right',
ARROW_UP_LEFT: 'pi pi-arrow-up-left',
ARROW_UP_RIGHT_AND_ARROW_DOWN_LEFT_FROM_CENTER: 'pi pi-arrow-up-right-and-arrow-down-left-from-center',
ARROW_UP_RIGHT: 'pi pi-arrow-up-right',
ARROW_UP: 'pi pi-arrow-up',
ARROWS_ALT: 'pi pi-arrows-alt',
ARROWS_H: 'pi pi-arrows-h',
ARROWS_V: 'pi pi-arrows-v',
ASTERISK: 'pi pi-asterisk',
AT: 'pi pi-at',
BACKWARD: 'pi pi-backward',
BAN: 'pi pi-ban',
BARCODE: 'pi pi-barcode',
BARS: 'pi pi-bars',
BELL_SLASH: 'pi pi-bell-slash',
BELL: 'pi pi-bell',
BITCOIN: 'pi pi-bitcoin',
BOLT: 'pi pi-bolt',
BOOK: 'pi pi-book',
BOOKMARK_FILL: 'pi pi-bookmark-fill',
BOOKMARK: 'pi pi-bookmark',
BOX: 'pi pi-box',
BRIEFCASE: 'pi pi-briefcase',
BUILDING_COLUMNS: 'pi pi-building-columns',
BUILDING: 'pi pi-building',
BULLSEYE: 'pi pi-bullseye',
CALCULATOR: 'pi pi-calculator',
CALENDAR_CLOCK: 'pi pi-calendar-clock',
CALENDAR_MINUS: 'pi pi-calendar-minus',
CALENDAR_PLUS: 'pi pi-calendar-plus',
CALENDAR_TIMES: 'pi pi-calendar-times',
CALENDAR: 'pi pi-calendar',
CAMERA: 'pi pi-camera',
CAR: 'pi pi-car',
CARET_DOWN: 'pi pi-caret-down',
CARET_LEFT: 'pi pi-caret-left',
CARET_RIGHT: 'pi pi-caret-right',
CARET_UP: 'pi pi-caret-up',
CART_ARROW_DOWN: 'pi pi-cart-arrow-down',
CART_MINUS: 'pi pi-cart-minus',
CART_PLUS: 'pi pi-cart-plus',
CHART_BAR: 'pi pi-chart-bar',
CHART_LINE: 'pi pi-chart-line',
CHART_PIE: 'pi pi-chart-pie',
CHART_SCATTER: 'pi pi-chart-scatter',
CHECK_CIRCLE: 'pi pi-check-circle',
CHECK_SQUARE: 'pi pi-check-square',
CHECK: 'pi pi-check',
CHEVRON_CIRCLE_DOWN: 'pi pi-chevron-circle-down',
CHEVRON_CIRCLE_LEFT: 'pi pi-chevron-circle-left',
CHEVRON_CIRCLE_RIGHT: 'pi pi-chevron-circle-right',
CHEVRON_CIRCLE_UP: 'pi pi-chevron-circle-up',
CHEVRON_DOWN: 'pi pi-chevron-down',
CHEVRON_LEFT: 'pi pi-chevron-left',
CHEVRON_RIGHT: 'pi pi-chevron-right',
CHEVRON_UP: 'pi pi-chevron-up',
CIRCLE_FILL: 'pi pi-circle-fill',
CIRCLE_OFF: 'pi pi-circle-off',
CIRCLE_ON: 'pi pi-circle-on',
CIRCLE: 'pi pi-circle',
CLIPBOARD: 'pi pi-clipboard',
CLOCK: 'pi pi-clock',
CLONE: 'pi pi-clone',
CLOUD_DOWNLOAD: 'pi pi-cloud-download',
CLOUD_UPLOAD: 'pi pi-cloud-upload',
CLOUD: 'pi pi-cloud',
CODE: 'pi pi-code',
COG: 'pi pi-cog',
COMMENT: 'pi pi-comment',
COMMENTS: 'pi pi-comments',
COMPASS: 'pi pi-compass',
COPY: 'pi pi-copy',
CREDIT_CARD: 'pi pi-credit-card',
CROWN: 'pi pi-crown',
DATABASE: 'pi pi-database',
DELETE_LEFT: 'pi pi-delete-left',
DESKTOP: 'pi pi-desktop',
DIRECTIONS_ALT: 'pi pi-directions-alt',
DIRECTIONS: 'pi pi-directions',
DISCORD: 'pi pi-discord',
DOLLAR: 'pi pi-dollar',
DOWNLOAD: 'pi pi-download',
EJECT: 'pi pi-eject',
ELLIPSIS_H: 'pi pi-ellipsis-h',
ELLIPSIS_V: 'pi pi-ellipsis-v',
ENVELOPE: 'pi pi-envelope',
EQUALS: 'pi pi-equals',
ERASER: 'pi pi-eraser',
ETHEREUM: 'pi pi-ethereum',
EURO: 'pi pi-euro',
EXCLAMATION_CIRCLE: 'pi pi-exclamation-circle',
EXCLAMATION_TRIANGLE: 'pi pi-exclamation-triangle',
EXPAND: 'pi pi-expand',
EXTERNAL_LINK: 'pi pi-external-link',
EYE_SLASH: 'pi pi-eye-slash',
EYE: 'pi pi-eye',
FACE_SMILE: 'pi pi-face-smile',
FACEBOOK: 'pi pi-facebook',
FAST_BACKWARD: 'pi pi-fast-backward',
FAST_FORWARD: 'pi pi-fast-forward',
FILE_ARROW_UP: 'pi pi-file-arrow-up',
FILE_CHECK: 'pi pi-file-check',
FILE_EDIT: 'pi pi-file-edit',
FILE_EXCEL: 'pi pi-file-excel',
FILE_EXPORT: 'pi pi-file-export',
FILE_IMPORT: 'pi pi-file-import',
FILE_O: 'pi pi-file-o',
FILE_PDF: 'pi pi-file-pdf',
FILE_PLUS: 'pi pi-file-plus',
FILE_WORD: 'pi pi-file-word',
FILE: 'pi pi-file',
FILTER_FILL: 'pi pi-filter-fill',
FILTER_SLASH: 'pi pi-filter-slash',
FILTER: 'pi pi-filter',
FLAG_FILL: 'pi pi-flag-fill',
FLAG: 'pi pi-flag',
FOLDER_OPEN: 'pi pi-folder-open',
FOLDER_PLUS: 'pi pi-folder-plus',
FOLDER: 'pi pi-folder',
FORWARD: 'pi pi-forward',
GAUGE: 'pi pi-gauge',
GIFT: 'pi pi-gift',
GITHUB: 'pi pi-github',
GLOBE: 'pi pi-globe',
GOOGLE: 'pi pi-google',
GRADUATION_CAP: 'pi pi-graduation-cap',
HAMMER: 'pi pi-hammer',
HASHTAG: 'pi pi-hashtag',
HEADPHONES: 'pi pi-headphones',
HEART_FILL: 'pi pi-heart-fill',
HEART: 'pi pi-heart',
HISTORY: 'pi pi-history',
HOME: 'pi pi-home',
HOURGLASS: 'pi pi-hourglass',
ID_CARD: 'pi pi-id-card',
IMAGE: 'pi pi-image',
IMAGES: 'pi pi-images',
INBOX: 'pi pi-inbox',
INDIAN_RUPEE: 'pi pi-indian-rupee',
INFO_CIRCLE: 'pi pi-info-circle',
INFO: 'pi pi-info',
INSTAGRAM: 'pi pi-instagram',
KEY: 'pi pi-key',
LANGUAGE: 'pi pi-language',
LIGHTBULB: 'pi pi-lightbulb',
LINK: 'pi pi-link',
LINKEDIN: 'pi pi-linkedin',
LIST_CHECK: 'pi pi-list-check',
LIST: 'pi pi-list',
LOCK_OPEN: 'pi pi-lock-open',
LOCK: 'pi pi-lock',
MAP_MARKER: 'pi pi-map-marker',
MAP: 'pi pi-map',
MARS: 'pi pi-mars',
MEGAPHONE: 'pi pi-megaphone',
MICROCHIP_AI: 'pi pi-microchip-ai',
MICROCHIP: 'pi pi-microchip',
MICROPHONE: 'pi pi-microphone',
MICROSOFT: 'pi pi-microsoft',
MINUS_CIRCLE: 'pi pi-minus-circle',
MINUS: 'pi pi-minus',
MOBILE: 'pi pi-mobile',
MONEY_BILL: 'pi pi-money-bill',
MOON: 'pi pi-moon',
OBJECTS_COLUMN: 'pi pi-objects-column',
PALETTE: 'pi pi-palette',
PAPERCLIP: 'pi pi-paperclip',
PAUSE_CIRCLE: 'pi pi-pause-circle',
PAUSE: 'pi pi-pause',
PAYPAL: 'pi pi-paypal',
PEN_TO_SQUARE: 'pi pi-pen-to-square',
PENCIL: 'pi pi-pencil',
PERCENTAGE: 'pi pi-percentage',
PHONE: 'pi pi-phone',
PINTEREST: 'pi pi-pinterest',
PLAY_CIRCLE: 'pi pi-play-circle',
PLAY: 'pi pi-play',
PLUS_CIRCLE: 'pi pi-plus-circle',
PLUS: 'pi pi-plus',
POUND: 'pi pi-pound',
POWER_OFF: 'pi pi-power-off',
PRIME: 'pi pi-prime',
PRINT: 'pi pi-print',
QRCODE: 'pi pi-qrcode',
QUESTION_CIRCLE: 'pi pi-question-circle',
QUESTION: 'pi pi-question',
RECEIPT: 'pi pi-receipt',
REDDIT: 'pi pi-reddit',
REFRESH: 'pi pi-refresh',
REPLAY: 'pi pi-replay',
REPLY: 'pi pi-reply',
SAVE: 'pi pi-save',
SEARCH_MINUS: 'pi pi-search-minus',
SEARCH_PLUS: 'pi pi-search-plus',
SEARCH: 'pi pi-search',
SEND: 'pi pi-send',
SERVER: 'pi pi-server',
SHARE_ALT: 'pi pi-share-alt',
SHIELD: 'pi pi-shield',
SHOP: 'pi pi-shop',
SHOPPING_BAG: 'pi pi-shopping-bag',
SHOPPING_CART: 'pi pi-shopping-cart',
SIGN_IN: 'pi pi-sign-in',
SIGN_OUT: 'pi pi-sign-out',
SITEMAP: 'pi pi-sitemap',
SLACK: 'pi pi-slack',
SLIDERS_H: 'pi pi-sliders-h',
SLIDERS_V: 'pi pi-sliders-v',
SORT_ALPHA_DOWN_ALT: 'pi pi-sort-alpha-down-alt',
SORT_ALPHA_DOWN: 'pi pi-sort-alpha-down',
SORT_ALPHA_UP_ALT: 'pi pi-sort-alpha-up-alt',
SORT_ALPHA_UP: 'pi pi-sort-alpha-up',
SORT_ALT_SLASH: 'pi pi-sort-alt-slash',
SORT_ALT: 'pi pi-sort-alt',
SORT_AMOUNT_DOWN_ALT: 'pi pi-sort-amount-down-alt',
SORT_AMOUNT_DOWN: 'pi pi-sort-amount-down',
SORT_AMOUNT_UP_ALT: 'pi pi-sort-amount-up-alt',
SORT_AMOUNT_UP: 'pi pi-sort-amount-up',
SORT_DOWN_FILL: 'pi pi-sort-down-fill',
SORT_DOWN: 'pi pi-sort-down',
SORT_NUMERIC_DOWN_ALT: 'pi pi-sort-numeric-down-alt',
SORT_NUMERIC_DOWN: 'pi pi-sort-numeric-down',
SORT_NUMERIC_UP_ALT: 'pi pi-sort-numeric-up-alt',
SORT_NUMERIC_UP: 'pi pi-sort-numeric-up',
SORT_UP_FILL: 'pi pi-sort-up-fill',
SORT_UP: 'pi pi-sort-up',
SORT: 'pi pi-sort',
SPARKLES: 'pi pi-sparkles',
SPINNER_DOTTED: 'pi pi-spinner-dotted',
SPINNER: 'pi pi-spinner',
STAR_FILL: 'pi pi-star-fill',
STAR_HALF_FILL: 'pi pi-star-half-fill',
STAR_HALF: 'pi pi-star-half',
STAR: 'pi pi-star',
STEP_BACKWARD_ALT: 'pi pi-step-backward-alt',
STEP_BACKWARD: 'pi pi-step-backward',
STEP_FORWARD_ALT: 'pi pi-step-forward-alt',
STEP_FORWARD: 'pi pi-step-forward',
STOP_CIRCLE: 'pi pi-stop-circle',
STOP: 'pi pi-stop',
STOPWATCH: 'pi pi-stopwatch',
SUN: 'pi pi-sun',
SYNC: 'pi pi-sync',
TABLE: 'pi pi-table',
TABLET: 'pi pi-tablet',
TAG: 'pi pi-tag',
TAGS: 'pi pi-tags',
TELEGRAM: 'pi pi-telegram',
TH_LARGE: 'pi pi-th-large',
THUMBS_DOWN_FILL: 'pi pi-thumbs-down-fill',
THUMBS_DOWN: 'pi pi-thumbs-down',
THUMBS_UP_FILL: 'pi pi-thumbs-up-fill',
THUMBS_UP: 'pi pi-thumbs-up',
THUMBTACK: 'pi pi-thumbtack',
TICKET: 'pi pi-ticket',
TIKTOK: 'pi pi-tiktok',
TIMES_CIRCLE: 'pi pi-times-circle',
TIMES: 'pi pi-times',
TRASH: 'pi pi-trash',
TROPHY: 'pi pi-trophy',
TRUCK: 'pi pi-truck',
TURKISH_LIRA: 'pi pi-turkish-lira',
TWITCH: 'pi pi-twitch',
TWITTER: 'pi pi-twitter',
UNDO: 'pi pi-undo',
UNLOCK: 'pi pi-unlock',
UPLOAD: 'pi pi-upload',
USER_EDIT: 'pi pi-user-edit',
USER_MINUS: 'pi pi-user-minus',
USER_PLUS: 'pi pi-user-plus',
USER: 'pi pi-user',
USERS: 'pi pi-users',
VENUS: 'pi pi-venus',
VERIFIED: 'pi pi-verified',
VIDEO: 'pi pi-video',
VIMEO: 'pi pi-vimeo',
VOLUME_DOWN: 'pi pi-volume-down',
VOLUME_OFF: 'pi pi-volume-off',
VOLUME_UP: 'pi pi-volume-up',
WALLET: 'pi pi-wallet',
WAREHOUSE: 'pi pi-warehouse',
WAVE_PULSE: 'pi pi-wave-pulse',
WHATSAPP: 'pi pi-whatsapp',
WIFI: 'pi pi-wifi',
WINDOW_MAXIMIZE: 'pi pi-window-maximize',
WINDOW_MINIMIZE: 'pi pi-window-minimize',
WRENCH: 'pi pi-wrench',
YOUTUBE: 'pi pi-youtube'
});
var SortOrder = Object.freeze({
DESC: -1,
UNSORTED: 0,
ASC: 1
});
var PrimeReactContext = /*#__PURE__*/React__default.createContext();
var PrimeReactProvider = function PrimeReactProvider(props) {
var _props$value, _propsValue$ripple, _propsValue$inputStyl, _propsValue$locale, _propsValue$appendTo, _propsValue$styleCont, _propsValue$cssTransi, _propsValue$autoZInde, _propsValue$hideOverl, _propsValue$nonce, _propsValue$nullSortO, _propsValue$zIndex, _propsValue$ptOptions, _propsValue$pt, _propsValue$unstyled, _propsValue$filterMat;
var propsValue = (_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : {};
var _useState = useState((_propsValue$ripple = propsValue.ripple) !== null && _propsValue$ripple !== void 0 ? _propsValue$ripple : false),
_useState2 = _slicedToArray(_useState, 2),
ripple = _useState2[0],
setRipple = _useState2[1];
var _useState3 = useState((_propsValue$inputStyl = propsValue.inputStyle) !== null && _propsValue$inputStyl !== void 0 ? _propsValue$inputStyl : 'outlined'),
_useState4 = _slicedToArray(_useState3, 2),
inputStyle = _useState4[0],
setInputStyle = _useState4[1];
var _useState5 = useState((_propsValue$locale = propsValue.locale) !== null && _propsValue$locale !== void 0 ? _propsValue$locale : 'en'),
_useState6 = _slicedToArray(_useState5, 2),
locale = _useState6[0],
setLocale = _useState6[1];
var _useState7 = useState((_propsValue$appendTo = propsValue.appendTo) !== null && _propsValue$appendTo !== void 0 ? _propsValue$appendTo : null),
_useState8 = _slicedToArray(_useState7, 2),
appendTo = _useState8[0],
setAppendTo = _useState8[1];
var _useState9 = useState((_propsValue$styleCont = propsValue.styleContainer) !== null && _propsValue$styleCont !== void 0 ? _propsValue$styleCont : null),
_useState10 = _slicedToArray(_useState9, 2),
styleContainer = _useState10[0],
setStyleContainer = _useState10[1];
var _useState11 = useState((_propsValue$cssTransi = propsValue.cssTransition) !== null && _propsValue$cssTransi !== void 0 ? _propsValue$cssTransi : true),
_useState12 = _slicedToArray(_useState11, 2),
cssTransition = _useState12[0],
setCssTransition = _useState12[1];
var _useState13 = useState((_propsValue$autoZInde = propsValue.autoZIndex) !== null && _propsValue$autoZInde !== void 0 ? _propsValue$autoZInde : true),
_useState14 = _slicedToArray(_useState13, 2),
autoZIndex = _useState14[0],
setAutoZIndex = _useState14[1];
var _useState15 = useState((_propsValue$hideOverl = propsValue.hideOverlaysOnDocumentScrolling) !== null && _propsValue$hideOverl !== void 0 ? _propsValue$hideOverl : false),
_useState16 = _slicedToArray(_useState15, 2),
hideOverlaysOnDocumentScrolling = _useState16[0],
setHideOverlaysOnDocumentScrolling = _useState16[1];
var _useState17 = useState((_propsValue$nonce = propsValue.nonce) !== null && _propsValue$nonce !== void 0 ? _propsValue$nonce : null),
_useState18 = _slicedToArray(_useState17, 2),
nonce = _useState18[0],
setNonce = _useState18[1];
var _useState19 = useState((_propsValue$nullSortO = propsValue.nullSortOrder) !== null && _propsValue$nullSortO !== void 0 ? _propsValue$nullSortO : 1),
_useState20 = _slicedToArray(_useState19, 2),
nullSortOrder = _useState20[0],
setNullSortOrder = _useState20[1];
var _useState21 = useState((_propsValue$zIndex = propsValue.zIndex) !== null && _propsValue$zIndex !== void 0 ? _propsValue$zIndex : {
modal: 1100,
overlay: 1000,
menu: 1000,
tooltip: 1100,
toast: 1200
}),
_useState22 = _slicedToArray(_useState21, 2),
zIndex = _useState22[0],
setZIndex = _useState22[1];
var _useState23 = useState((_propsValue$ptOptions = propsValue.ptOptions) !== null && _propsValue$ptOptions !== void 0 ? _propsValue$ptOptions : {
mergeSections: true,
mergeProps: true
}),
_useState24 = _slicedToArray(_useState23, 2),
ptOptions = _useState24[0],
setPtOptions = _useState24[1];
var _useState25 = useState((_propsValue$pt = propsValue.pt) !== null && _propsValue$pt !== void 0 ? _propsValue$pt : undefined),
_useState26 = _slicedToArray(_useState25, 2),
pt = _useState26[0],
setPt = _useState26[1];
var _useState27 = useState((_propsValue$unstyled = propsValue.unstyled) !== null && _propsValue$unstyled !== void 0 ? _propsValue$unstyled : false),
_useState28 = _slicedToArray(_useState27, 2),
unstyled = _useState28[0],
setUnstyled = _useState28[1];
var _useState29 = useState((_propsValue$filterMat = propsValue.filterMatchModeOptions) !== null && _propsValue$filterMat !== void 0 ? _propsValue$filterMat : {
text: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS],
numeric: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO],
date: [FilterMatchMode.DATE_IS, FilterMatchMode.DATE_IS_NOT, FilterMatchMode.DATE_BEFORE, FilterMatchMode.DATE_AFTER]
}),
_useState30 = _slicedToArray(_useState29, 2),
filterMatchModeOptions = _useState30[0],
setFilterMatchModeOptions = _useState30[1];
var changeTheme = function changeTheme(currentTheme, newTheme, linkElementId, callback) {
var _linkElement$parentNo;
var linkElement = document.getElementById(linkElementId);
if (!linkElement) {
throw Error("Element with id ".concat(linkElementId, " not found."));
}
var newThemeUrl = linkElement.getAttribute('href').replace(currentTheme, newTheme);
var newLinkElement = document.createElement('link');
newLinkElement.setAttribute('rel', 'stylesheet');
newLinkElement.setAttribute('id', linkElementId);
newLinkElement.setAttribute('href', newThemeUrl);
newLinkElement.addEventListener('load', function () {
if (callback) {
callback();
}
});
(_linkElement$parentNo = linkElement.parentNode) === null || _linkElement$parentNo === void 0 || _linkElement$parentNo.replaceChild(newLinkElement, linkElement);
};
/**
* @deprecated
*/
React__default.useEffect(function () {
PrimeReact$1.ripple = ripple;
}, [ripple]);
/**
* @deprecated
*/
React__default.useEffect(function () {
PrimeReact$1.inputStyle = inputStyle;
}, [inputStyle]);
/**
* @deprecated
*/
React__default.useEffect(function () {
PrimeReact$1.locale = locale;
}, [locale]);
var value = {
changeTheme: changeTheme,
ripple: ripple,
setRipple: setRipple,
inputStyle: inputStyle,
setInputStyle: setInputStyle,
locale: locale,
setLocale: setLocale,
appendTo: appendTo,
setAppendTo: setAppendTo,
styleContainer: styleContainer,
setStyleContainer: setStyleContainer,
cssTransition: cssTransition,
setCssTransition: setCssTransition,
autoZIndex: autoZIndex,
setAutoZIndex: setAutoZIndex,
hideOverlaysOnDocumentScrolling: hideOverlaysOnDocumentScrolling,
setHideOverlaysOnDocumentScrolling: setHideOverlaysOnDocumentScrolling,
nonce: nonce,
setNonce: setNonce,
nullSortOrder: nullSortOrder,
setNullSortOrder: setNullSortOrder,
zIndex: zIndex,
setZIndex: setZIndex,
ptOptions: ptOptions,
setPtOptions: setPtOptions,
pt: pt,
setPt: setPt,
filterMatchModeOptions: filterMatchModeOptions,
setFilterMatchModeOptions: setFilterMatchModeOptions,
unstyled: unstyled,
setUnstyled: setUnstyled
};
return /*#__PURE__*/React__default.createElement(PrimeReactContext.Provider, {
value: value
}, props.children);
};
var PrimeReact = PrimeReact$1;
var usePrevious = function usePrevious(newValue) {
var ref = React.useRef(null);
React.useEffect(function () {
ref.current = newValue;
return function () {
ref.current = null;
};
}, [newValue]);
return ref.current;
};
/* eslint-disable */
var useUnmountEffect = function useUnmountEffect(fn) {
return React.useEffect(function () {
return fn;
}, []);
};
/* eslint-enable */
var useEventListener = function useEventListener(_ref) {
var _ref$target = _ref.target,
target = _ref$target === void 0 ? 'document' : _ref$target,
type = _ref.type,
listener = _ref.listener,
options = _ref.options,
_ref$when = _ref.when,
when = _ref$when === void 0 ? true : _ref$when;
var targetRef = React.useRef(null);
var listenerRef = React.useRef(null);
var prevListener = usePrevious(listener);
var prevOptions = usePrevious(options);
var bind = function bind() {
var bindOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var bindTarget = bindOptions.target;
if (ObjectUtils.isNotEmpty(bindTarget)) {
unbind();
(bindOptions.when || when) && (targetRef.current = DomHandler.getTargetElement(bindTarget));
}
if (!listenerRef.current && targetRef.current) {
listenerRef.current = function (event) {
return listener && listener(event);
};
targetRef.current.addEventListener(type, listenerRef.current, options);
}
};
var unbind = function unbind() {
if (listenerRef.current) {
targetRef.current.removeEventListener(type, listenerRef.current, options);
listenerRef.current = null;
}
};
var dispose = function dispose() {
unbind();
// Prevent memory leak by releasing
prevListener = null;
prevOptions = null;
};
var updateTarget = React.useCallback(function () {
if (when) {
targetRef.current = DomHandler.getTargetElement(target);
} else {
unbind();
targetRef.current = null;
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [target, when]);
React.useEffect(function () {
updateTarget();
}, [updateTarget]);
React.useEffect(function () {
var listenerChanged = "".concat(prevListener) !== "".concat(listener);
var optionsChanged = prevOptions !== options;
var listenerExists = listenerRef.current;
if (listenerExists && (listenerChanged || optionsChanged)) {
unbind();
when && bind();
} else if (!listenerExists) {
dispose();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [listener, options, when]);
useUnmountEffect(function () {
dispose();
});
return [bind, unbind];
};
var useClickOutside = function useClickOutside(ref, callback) {
var isOutsideClicked = function isOutsideClicked(event) {
if (!ref.current || ref.current.contains(event.target)) {
return;
}
callback(event);
};
var _useEventListener = useEventListener({
type: 'mousedown',
listener: isOutsideClicked
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindMouseDownListener = _useEventListener2[0],
unbindMouseDownListener = _useEventListener2[1];
var _useEventListener3 = useEventListener({
type: 'touchstart',
listener: isOutsideClicked
}),
_useEventListener4 = _slicedToArray(_useEventListener3, 2),
bindTouchStartListener = _useEventListener4[0],
unbindTouchStartListener = _useEventListener4[1];
React.useEffect(function () {
if (!ref.current) {
return;
}
bindMouseDownListener();
bindTouchStartListener();
return function () {
unbindMouseDownListener();
unbindTouchStartListener();
};
});
return [ref, callback];
};
var useCounter = function useCounter() {
var initialValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
step: 1
};
var _React$useState = React.useState(initialValue),
_React$useState2 = _slicedToArray(_React$useState, 2),
count = _React$useState2[0],
setCount = _React$useState2[1];
var increment = function increment() {
if (options.max && count >= options.max) {
return;
}
setCount(count + options.step);
};
var decrement = function decrement() {
if (options.min || options.min === 0 && count <= options.min) {
return null;
}
setCount(count - options.step);
};
var reset = function reset() {
setCount(0);
};
return {
count: count,
increment: increment,
decrement: decrement,
reset: reset
};
};
var useDebounce = function useDebounce(initialValue, delay) {
var _React$useState = React.useState(initialValue),
_React$useState2 = _slicedToArray(_React$useState, 2),
inputValue = _React$useState2[0],
setInputValue = _React$useState2[1];
var _React$useState3 = React.useState(initialValue),
_React$useState4 = _slicedToArray(_React$useState3, 2),
debouncedValue = _React$useState4[0],
setDebouncedValue = _React$useState4[1];
var mountedRef = React.useRef(false);
var timeoutRef = React.useRef(null);
var cancelTimer = function cancelTimer() {
return window.clearTimeout(timeoutRef.current);
};
useMountEffect(function () {
mountedRef.current = true;
});
useUnmountEffect(function () {
cancelTimer();
});
React.useEffect(function () {
if (!mountedRef.current) {
return;
}
cancelTimer();
timeoutRef.current = window.setTimeout(function () {
setDebouncedValue(inputValue);
}, delay);
}, [inputValue, delay]);
return [inputValue, debouncedValue, setInputValue];
};
var groupToDisplayedElements = {};
var useDisplayOrder = function useDisplayOrder(group) {
var isVisible = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var _React$useState = React.useState(function () {
return UniqueComponentId();
}),
_React$useState2 = _slicedToArray(_React$useState, 1),
uid = _React$useState2[0];
var _React$useState3 = React.useState(0),
_React$useState4 = _slicedToArray(_React$useState3, 2),
displayOrder = _React$useState4[0],
setDisplayOrder = _React$useState4[1];
React.useEffect(function () {
if (isVisible) {
if (!groupToDisplayedElements[group]) {
groupToDisplayedElements[group] = [];
}
var newDisplayOrder = groupToDisplayedElements[group].push(uid);
setDisplayOrder(newDisplayOrder);
return function () {
delete groupToDisplayedElements[group][newDisplayOrder - 1];
// Reduce array length, by removing undefined elements at the end of array:
var lastIndex = groupToDisplayedElements[group].length - 1;
var lastOrder = ObjectUtils.findLastIndex(groupToDisplayedElements[group], function (el) {
return el !== undefined;
});
if (lastOrder !== lastIndex) {
groupToDisplayedElements[group].splice(lastOrder + 1);
}
setDisplayOrder(undefined);
};
}
}, [group, uid, isVisible]);
return displayOrder;
};
var TYPE_MAP = {
ico: 'image/x-icon',
png: 'image/png',
svg: 'image/svg+xml',
gif: 'image/gif'
};
var useFavicon = function useFavicon() {
var newIcon = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var rel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'shortcut icon';
React.useLayoutEffect(function () {
if (newIcon) {
var linkElements = document.querySelectorAll("link[rel*='icon']");
linkElements.forEach(function (linkEl) {
document.head.removeChild(linkEl);
});
var link = document.createElement('link');
link.setAttribute('type', TYPE_MAP[newIcon.split('.').pop()]);
link.setAttribute('rel', rel);
link.setAttribute('href', newIcon);
document.head.appendChild(link);
}
}, [newIcon, rel]);
};
/**
* Priorities of different components (bigger number handled first)
*/
var ESC_KEY_HANDLING_PRIORITIES = {
SIDEBAR: 100,
SLIDE_MENU: 200,
DIALOG: 300,
IMAGE: 400,
MENU: 500,
OVERLAY_PANEL: 600,
PASSWORD: 700,
CASCADE_SELECT: 800,
SPLIT_BUTTON: 900,
SPEED_DIAL: 1000,
TOOLTIP: 1200
};
/**
* Object, that manages global escape key handling logic
*/
var globalEscKeyHandlingLogic = {
/**
* Mapping from ESC_KEY_HANDLING_PRIORITY to array of related listeners, grouped by priority
* @example
* Map<{
* [ESC_KEY_HANDLING_PRIORITIES.SIDEBAR]: Map<{
* 1: () => {...},
* 2: () => {...}
* }>,
* [ESC_KEY_HANDLING_PRIORITIES.DIALOG]: Map<{
* 1: () => {...},
* 2: () => {...}
* }>
* }>;
*/
escKeyListeners: new Map(),
/**
* Keydown handler (attached to any keydown)
*/
onGlobalKeyDown: function onGlobalKeyDown(event) {
// Do nothing if not an "esc" key is pressed:
if (event.code !== 'Escape') {
return;
}
var escKeyListeners = globalEscKeyHandlingLogic.escKeyListeners;
var maxPrimaryPriority = Math.max.apply(Math, _toConsumableArray(escKeyListeners.keys()));
var theMostImportantEscHandlersSet = escKeyListeners.get(maxPrimaryPriority);
var maxSecondaryPriority = Math.max.apply(Math, _toConsumableArray(theMostImportantEscHandlersSet.keys()));
var theMostImportantEscHandler = theMostImportantEscHandlersSet.get(maxSecondaryPriority);
theMostImportantEscHandler(event);
},
/**
* Attach global keydown listener if there are any "esc" key handlers assigned,
* otherwise detach.
*/
refreshGlobalKeyDownListener: function refreshGlobalKeyDownListener() {
var document = DomHandler.getTargetElement('document');
if (this.escKeyListeners.size > 0) {
document.addEventListener('keydown', this.onGlobalKeyDown);
} else {
document.removeEventListener('keydown', this.onGlobalKeyDown);
}
},
/**
* Add "Esc" key handler
*/
addListener: function addListener(callback, _ref) {
var _this = this;
var _ref2 = _slicedToArray(_ref, 2),
primaryPriority = _ref2[0],
secondaryPriority = _ref2[1];
var escKeyListeners = this.escKeyListeners;
if (!escKeyListeners.has(primaryPriority)) {
escKeyListeners.set(primaryPriority, new Map());
}
var primaryPriorityListeners = escKeyListeners.get(primaryPriority);
// To prevent unexpected override of callback:
if (primaryPriorityListeners.has(secondaryPriority)) {
throw new Error("Unexpected: global esc key listener with priority [".concat(primaryPriority, ", ").concat(secondaryPriority, "] already exists."));
}
primaryPriorityListeners.set(secondaryPriority, callback);
this.refreshGlobalKeyDownListener();
return function () {
primaryPriorityListeners["delete"](secondaryPriority);
if (primaryPriorityListeners.size === 0) {
escKeyListeners["delete"](primaryPriority);
}
_this.refreshGlobalKeyDownListener();
};
}
};
var useGlobalOnEscapeKey = function useGlobalOnEscapeKey(_ref3) {
var callback = _ref3.callback,
when = _ref3.when,
priority = _ref3.priority;
useEffect(function () {
if (!when) {
return;
}
return globalEscKeyHandlingLogic.addListener(callback, priority);
}, [callback, when, priority]);
};
var useIntersectionObserver = function useIntersectionObserver(ref) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
isElementVisible = _React$useState2[0],
setIsElementVisible = _React$useState2[1];
React.useEffect(function () {
if (!ref.current) {
return;
}
var observer = new IntersectionObserver(function (_ref) {
var _ref2 = _slicedToArray(_ref, 1),
entry = _ref2[0];
setIsElementVisible(entry.isIntersecting);
}, options);
observer.observe(ref.current);
return function () {
observer.disconnect();
};
}, [options, ref]);
return isElementVisible;
};
/* eslint-disable */
var useInterval = function useInterval(fn) {
var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var when = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
var timeout = React.useRef(null);
var savedCallback = React.useRef(null);
var clear = React.useCallback(function () {
return clearInterval(timeout.current);
}, [timeout.current]);
React.useEffect(function () {
savedCallback.current = fn;
});
React.useEffect(function () {
function callback() {
savedCallback.current();
}
if (when) {
timeout.current = setInterval(callback, delay);
return clear;
} else {
clear();
}
}, [delay, when]);
useUnmountEffect(function () {
clear();
});
return [clear];
};
/* eslint-enable */
var useMatchMedia = function useMatchMedia(query) {
var when = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
matches = _React$useState2[0],
setMatches = _React$useState2[1];
var matchMedia = React.useRef(null);
var handleChange = function handleChange(e) {
return setMatches(e.matches);
};
var bind = function bind() {
return matchMedia.current && matchMedia.current.addEventListener('change', handleChange);
};
var unbind = function unbind() {
return matchMedia.current && matchMedia.current.removeEventListener('change', handleChange) && (matchMedia.current = null);
};
React.useEffect(function () {
if (when) {
matchMedia.current = window.matchMedia(query);
setMatches(matchMedia.current.matches);
bind();
}
return unbind;
}, [query, when]);
return matches;
};
/* eslint-enable */
/**
* Hook to merge properties including custom merge function for things like Tailwind merge.
*/
var useMergeProps = function useMergeProps() {
var context = useContext(PrimeReactContext);
return function () {
for (var _len = arguments.length, props = new Array(_len), _key = 0; _key < _len; _key++) {
props[_key] = arguments[_key];
}
return mergeProps(props, context === null || context === void 0 ? void 0 : context.ptOptions);
};
};
/* eslint-disable */
/**
* Custom hook to run a mount effect only once.
* @param {*} fn the callback function
* @returns the hook
*/
var useMountEffect = function useMountEffect(fn) {
var mounted = React.useRef(false);
return React.useEffect(function () {
if (!mounted.current) {
mounted.current = true;
return fn && fn();
}
}, []);
};
/* eslint-enable */
function ownKeys$1_(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$1_(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1_(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1_(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var useMouse = function useMouse() {
var _React$useState = React.useState({
x: 0,
y: 0
}),
_React$useState2 = _slicedToArray(_React$useState, 2),
position = _React$useState2[0],
setPosition = _React$useState2[1];
var ref = React.useRef(null);
var handleMouseMove = React.useCallback(function (event) {
var x;
var y;
if (ref.current) {
var rect = event.currentTarget.getBoundingClientRect();
x = event.pageX - rect.left - (window.pageXOffset || window.scrollX);
y = event.pageY - rect.top - (window.pageYOffset || window.scrollY);
} else {
x = event.clientX;
y = event.clientY;
}
setPosition({
x: Math.max(0, Math.round(x)),
y: Math.max(0, Math.round(y))
});
}, []);
var _useEventListener = useEventListener({
target: ref,
type: 'mousemove',
listener: handleMouseMove
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindMouseMoveEventListener = _useEventListener2[0],
unbindMouseMoveEventListener = _useEventListener2[1];
var _useEventListener3 = useEventListener({
type: 'mousemove',
listener: handleMouseMove
}),
_useEventListener4 = _slicedToArray(_useEventListener3, 2),
bindDocumentMoveEventListener = _useEventListener4[0],
unbindDocumentMoveEventListener = _useEventListener4[1];
var reset = function reset() {
return setPosition({
x: 0,
y: 0
});
};
React.useEffect(function () {
bindMouseMoveEventListener();
if (!ref.current) {
bindDocumentMoveEventListener();
}
return function () {
unbindMouseMoveEventListener();
// eslint-disable-next-line react-hooks/exhaustive-deps
if (!ref.current) {
unbindDocumentMoveEventListener();
}
};
}, [bindDocumentMoveEventListener, bindMouseMoveEventListener, unbindDocumentMoveEventListener, unbindMouseMoveEventListener]);
return _objectSpread$1_(_objectSpread$1_({
ref: ref
}, position), {}, {
reset: reset
});
};
function ownKeys$1Z(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$1Z(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1Z(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1Z(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function useMove(_ref) {
var _ref$mode = _ref.mode,
mode = _ref$mode === void 0 ? 'both' : _ref$mode,
_ref$initialValue = _ref.initialValue,
initialValue = _ref$initialValue === void 0 ? {
x: 0,
y: 0
} : _ref$initialValue;
var _React$useState = React.useState(initialValue),
_React$useState2 = _slicedToArray(_React$useState, 2),
positions = _React$useState2[0],
setPositions = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
active = _React$useState4[0],
setActive = _React$useState4[1];
var isMounted = React.useRef(false);
var isSliding = React.useRef(false);
var ref = React.useRef(null);
var onMouseMove = function onMouseMove(event) {
return updateMousePosition({
x: event.clientX,
y: event.clientY
});
};
var handlePositionChange = function handlePositionChange(_ref2) {
var clampedX = _ref2.clampedX,
clampedY = _ref2.clampedY;
if (mode === 'vertical') {
setPositions({
y: 1 - clampedY
});
} else if (mode === 'horizontal') {
setPositions({
x: clampedX
});
} else if (mode === 'both') {
setPositions({
x: clampedX,
y: clampedY
});
}
};
var onMouseDown = function onMouseDown(event) {
startScrubbing();
event.preventDefault();
onMouseMove(event);
};
var stopScrubbing = function stopScrubbing() {
if (isSliding.current && isMounted.current) {
isSliding.current = false;
setActive(false);
unbindListeners();
}
};
var onTouchMove = function onTouchMove(event) {
if (event.cancelable) {
event.preventDefault();
}
updateMousePosition({
x: event.changedTouches[0].clientX,
y: event.changedTouches[0].clientY
});
};
var onTouchStart = function onTouchStart(event) {
if (event.cancelable) {
event.preventDefault();
}
startScrubbing();
onTouchMove(event);
};
var _useEventListener = useEventListener({
type: 'mousemove',
listener: onMouseMove
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentMouseMoveListener = _useEventListener2[0],
unbindDocumentMouseMoveListener = _useEventListener2[1];
var _useEventListener3 = useEventListener({
type: 'mouseup',
listener: stopScrubbing
}),
_useEventListener4 = _slicedToArray(_useEventListener3, 2),
bindDocumentMouseUpListener = _useEventListener4[0],
unbindDocumentMouseUpListener = _useEventListener4[1];
var _useEventListener5 = useEventListener({
type: 'touchmove',
listener: onTouchMove
}),
_useEventListener6 = _slicedToArray(_useEventListener5, 2),
bindDocumentTouchMoveListener = _useEventListener6[0],
unbindDocumentTouchMoveListener = _useEventListener6[1];
var _useEventListener7 = useEventListener({
type: 'touchend',
listener: stopScrubbing
}),
_useEventListener8 = _slicedToArray(_useEventListener7, 2),
bindDocumentTouchEndListener = _useEventListener8[0],
unbindDocumentTouchEndListener = _useEventListener8[1];
var _useEventListener9 = useEventListener({
target: ref,
type: 'mousedown',
listener: onMouseDown
}),
_useEventListener10 = _slicedToArray(_useEventListener9, 2),
bindMouseDownListener = _useEventListener10[0],
unbindMouseDownListener = _useEventListener10[1];
var _useEventListener11 = useEventListener({
target: ref,
type: 'touchstart',
listener: onTouchStart,
options: {
passive: false
}
}),
_useEventListener12 = _slicedToArray(_useEventListener11, 2),
bindTouchStartListener = _useEventListener12[0],
unbindTouchStartListener = _useEventListener12[1];
var clamp = function clamp(value, min, max) {
return Math.min(Math.max(value, min), max);
};
var clampPositions = function clampPositions(_ref3) {
var x = _ref3.x,
y = _ref3.y;
return {
clampedX: clamp(x, 0, 1),
clampedY: clamp(y, 0, 1)
};
};
var bindListeners = function bindListeners() {
bindDocumentMouseMoveListener();
bindDocumentMouseUpListener();
bindDocumentTouchMoveListener();
bindDocumentTouchEndListener();
};
var unbindListeners = function unbindListeners() {
unbindDocumentMouseMoveListener();
unbindDocumentMouseUpListener();
unbindDocumentTouchMoveListener();
unbindDocumentTouchEndListener();
};
var reset = function reset() {
setPositions(initialValue);
};
React.useEffect(function () {
isMounted.current = true;
}, []);
var startScrubbing = function startScrubbing() {
if (!isSliding.current && isMounted.current) {
isSliding.current = true;
setActive(true);
bindListeners();
}
};
var updateMousePosition = function updateMousePosition(_ref4) {
var x = _ref4.x,
y = _ref4.y;
if (isSliding.current) {
var rect = ref.current.getBoundingClientRect();
var _clampPositions = clampPositions({
x: (x - rect.left) / rect.width,
y: (y - rect.top) / rect.height
}),
clampedX = _clampPositions.clampedX,
clampedY = _clampPositions.clampedY;
handlePositionChange({
clampedX: clampedX,
clampedY: clampedY
});
}
};
React.useEffect(function () {
if (ref.current) {
bindMouseDownListener();
bindTouchStartListener();
}
return function () {
if (ref.current) {
unbindMouseDownListener();
unbindTouchStartListener();
}
};
}, [bindMouseDownListener, bindTouchStartListener, positions, unbindMouseDownListener, unbindTouchStartListener]);
return _objectSpread$1Z(_objectSpread$1Z({
ref: ref
}, positions), {}, {
active: active,
reset: reset
});
}
var useOverlayScrollListener = function useOverlayScrollListener(_ref) {
var target = _ref.target,
listener = _ref.listener,
options = _ref.options,
_ref$when = _ref.when,
when = _ref$when === void 0 ? true : _ref$when;
var context = React.useContext(PrimeReactContext);
var targetRef = React.useRef(null);
var listenerRef = React.useRef(null);
var scrollableParentsRef = React.useRef([]);
var prevListener = usePrevious(listener);
var prevOptions = usePrevious(options);
var bind = function bind() {
var bindOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
if (ObjectUtils.isNotEmpty(bindOptions.target)) {
unbind();
(bindOptions.when || when) && (targetRef.current = DomHandler.getTargetElement(bindOptions.target));
}
if (!listenerRef.current && targetRef.current) {
var hideOnScroll = context ? context.hideOverlaysOnDocumentScrolling : PrimeReact.hideOverlaysOnDocumentScrolling;
var nodes = scrollableParentsRef.current = DomHandler.getScrollableParents(targetRef.current);
// Ensure window/body is always included as fallback
if (!nodes.some(function (node) {
return node === document.body || node === window;
})) {
nodes.push(hideOnScroll ? window : document.body);
}
listenerRef.current = function (event) {
return listener && listener(event);
};
nodes.forEach(function (node) {
return node.addEventListener('scroll', listenerRef.current, options);
});
}
};
var unbind = function unbind() {
if (listenerRef.current) {
var nodes = scrollableParentsRef.current;
nodes.forEach(function (node) {
return node.removeEventListener('scroll', listenerRef.current, options);
});
listenerRef.current = null;
}
};
var dispose = function dispose() {
unbind();
// #5927 prevent memory leak by releasing
scrollableParentsRef.current = null;
prevListener = null;
prevOptions = null;
};
var updateTarget = React.useCallback(function () {
if (when) {
targetRef.current = DomHandler.getTargetElement(target);
} else {
unbind();
targetRef.current = null;
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [target, when]);
React.useEffect(function () {
updateTarget();
}, [updateTarget]);
React.useEffect(function () {
var listenerChanged = "".concat(prevListener) !== "".concat(listener);
var optionsChanged = prevOptions !== options;
var listenerExists = listenerRef.current;
if (listenerExists && (listenerChanged || optionsChanged)) {
unbind();
when && bind();
} else if (!listenerExists) {
dispose();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [listener, options, when]);
useUnmountEffect(function () {
dispose();
});
return [bind, unbind];
};
var useResizeListener = function useResizeListener(_ref) {
var listener = _ref.listener,
_ref$when = _ref.when,
when = _ref$when === void 0 ? true : _ref$when;
return useEventListener({
target: 'window',
type: 'resize',
listener: listener,
when: when
});
};
var useOverlayListener = function useOverlayListener(_ref) {
var target = _ref.target,
overlay = _ref.overlay,
_listener = _ref.listener,
_ref$when = _ref.when,
when = _ref$when === void 0 ? true : _ref$when,
_ref$type = _ref.type,
type = _ref$type === void 0 ? 'click' : _ref$type;
var targetRef = React.useRef(null);
var overlayRef = React.useRef(null);
/**
* The parameters of the 'listener' method in the following event handlers;
* @param {Event} event A click event of the document.
* @param {string} options.type The custom type to detect event.
* @param {boolean} options.valid It is controlled by PrimeReact. It is determined whether it is valid or not according to some custom validation.
*/
var _useEventListener = useEventListener({
target: 'window',
type: type,
listener: function listener(event) {
_listener && _listener(event, {
type: 'outside',
valid: event.which !== 3 && isOutsideClicked(event)
});
},
when: when
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentClickListener = _useEventListener2[0],
unbindDocumentClickListener = _useEventListener2[1];
var _useResizeListener = useResizeListener({
listener: function listener(event) {
_listener && _listener(event, {
type: 'resize',
valid: !DomHandler.isTouchDevice()
});
},
when: when
}),
_useResizeListener2 = _slicedToArray(_useResizeListener, 2),
bindWindowResizeListener = _useResizeListener2[0],
unbindWindowResizeListener = _useResizeListener2[1];
var _useEventListener3 = useEventListener({
target: 'window',
type: 'orientationchange',
listener: function listener(event) {
_listener && _listener(event, {
type: 'orientationchange',
valid: true
});
},
when: when
}),
_useEventListener4 = _slicedToArray(_useEventListener3, 2),
bindWindowOrientationChangeListener = _useEventListener4[0],
unbindWindowOrientationChangeListener = _useEventListener4[1];
var _useOverlayScrollList = useOverlayScrollListener({
target: target,
listener: function listener(event) {
_listener && _listener(event, {
type: 'scroll',
valid: true
});
},
when: when
}),
_useOverlayScrollList2 = _slicedToArray(_useOverlayScrollList, 2),
bindOverlayScrollListener = _useOverlayScrollList2[0],
unbindOverlayScrollListener = _useOverlayScrollList2[1];
var isOutsideClicked = function isOutsideClicked(event) {
return targetRef.current && !(targetRef.current.isSameNode(event.target) || targetRef.current.contains(event.target) || overlayRef.current && overlayRef.current.contains(event.target));
};
var bind = function bind() {
bindDocumentClickListener();
bindWindowResizeListener();
bindWindowOrientationChangeListener();
bindOverlayScrollListener();
};
var unbind = function unbind() {
unbindDocumentClickListener();
unbindWindowResizeListener();
unbindWindowOrientationChangeListener();
unbindOverlayScrollListener();
};
React.useEffect(function () {
if (when) {
targetRef.current = DomHandler.getTargetElement(target);
overlayRef.current = DomHandler.getTargetElement(overlay);
} else {
unbind();
targetRef.current = overlayRef.current = null;
}
}, [target, overlay, when]);
useUnmountEffect(function () {
unbind();
});
return [bind, unbind];
};
/* eslint-enable */
/**
* Hook to wrap around useState that stores the value in the browser local/session storage.
*
* @param {any} initialValue the initial value to store
* @param {string} key the key to store the value in local/session storage
* @param {string} storage either 'local' or 'session' for what type of storage
* @returns a stateful value, and a function to update it.
*/
var useStorage = function useStorage(initialValue, key) {
var storage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'local';
// Since the local storage API isn't available in server-rendering environments,
// we check that typeof window !== 'undefined' to make SSR and SSG work properly.
var storageAvailable = typeof window !== 'undefined';
// subscribe to window storage event so changes in one tab to a stored value
// are properly reflected in all tabs
var _useEventListener = useEventListener({
target: 'window',
type: 'storage',
listener: function listener(event) {
var area = storage === 'local' ? window.localStorage : window.sessionStorage;
if (event.storageArea === area && event.key === key) {
var newValue = event.newValue ? JSON.parse(event.newValue) : undefined;
setStoredValue(newValue);
}
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindWindowStorageListener = _useEventListener2[0],
unbindWindowStorageListener = _useEventListener2[1];
var _React$useState = React.useState(initialValue),
_React$useState2 = _slicedToArray(_React$useState, 2),
storedValue = _React$useState2[0],
setStoredValue = _React$useState2[1];
var setValue = function setValue(value) {
try {
// Allow value to be a function so we have same API as useState
var valueToStore = value instanceof Function ? value(storedValue) : value;
setStoredValue(valueToStore);
if (storageAvailable) {
var serializedValue = JSON.stringify(valueToStore);
storage === 'local' ? window.localStorage.setItem(key, serializedValue) : window.sessionStorage.setItem(key, serializedValue);
}
} catch (error) {
throw new Error("PrimeReact useStorage: Failed to serialize the value at key: ".concat(key));
}
};
React.useEffect(function () {
if (!storageAvailable) {
setStoredValue(initialValue);
}
try {
var item = storage === 'local' ? window.localStorage.getItem(key) : window.sessionStorage.getItem(key);
setStoredValue(item ? JSON.parse(item) : initialValue);
} catch (error) {
// If error also return initialValue
setStoredValue(initialValue);
}
bindWindowStorageListener();
return function () {
return unbindWindowStorageListener();
};
}, []);
return [storedValue, setValue];
};
/**
* Hook to wrap around useState that stores the value in the browser local storage.
*
* @param {any} initialValue the initial value to store
* @param {string} key the key to store the value in local storage
* @returns a stateful value, and a function to update it.
*/
var useLocalStorage = function useLocalStorage(initialValue, key) {
return useStorage(initialValue, key, 'local');
};
/**
* Hook to wrap around useState that stores the value in the browser session storage.
*
* @param {any} initialValue the initial value to store
* @param {string} key the key to store the value in session storage
* @returns a stateful value, and a function to update it.
*/
var useSessionStorage = function useSessionStorage(initialValue, key) {
return useStorage(initialValue, key, 'session');
};
/* eslint-enable */
var _id = 0;
var useStyle = function useStyle(css) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isLoaded = _useState2[0],
setIsLoaded = _useState2[1];
var styleRef = useRef(null);
var context = useContext(PrimeReactContext);
var defaultDocument = DomHandler.isClient() ? window.document : undefined;
var _options$document = options.document,
document = _options$document === void 0 ? defaultDocument : _options$document,
_options$manual = options.manual,
manual = _options$manual === void 0 ? false : _options$manual,
_options$name = options.name,
name = _options$name === void 0 ? "style_".concat(++_id) : _options$name,
_options$id = options.id,
id = _options$id === void 0 ? undefined : _options$id,
_options$media = options.media,
media = _options$media === void 0 ? undefined : _options$media;
var getCurrentStyleRef = function getCurrentStyleRef(styleContainer) {
var existingStyle = styleContainer.querySelector("style[data-primereact-style-id=\"".concat(name, "\"]"));
if (existingStyle) {
return existingStyle;
}
if (id !== undefined) {
var existingElement = document.getElementById(id);
if (existingElement) {
return existingElement;
}
}
// finally if not found create the new style
return document.createElement('style');
};
var update = function update(newCSS) {
isLoaded && css !== newCSS && (styleRef.current.textContent = newCSS);
};
var load = function load() {
if (!document || isLoaded) {
return;
}
var styleContainer = (context === null || context === void 0 ? void 0 : context.styleContainer) || document.head;
styleRef.current = getCurrentStyleRef(styleContainer);
if (!styleRef.current.isConnected) {
styleRef.current.type = 'text/css';
if (id) {
styleRef.current.id = id;
}
if (media) {
styleRef.current.media = media;
}
DomHandler.addNonce(styleRef.current, context && context.nonce || PrimeReact.nonce);
styleContainer.appendChild(styleRef.current);
if (name) {
styleRef.current.setAttribute('data-primereact-style-id', name);
}
}
styleRef.current.textContent = css;
setIsLoaded(true);
};
var unload = function unload() {
if (!document || !styleRef.current) {
return;
}
DomHandler.removeInlineStyle(styleRef.current);
setIsLoaded(false);
};
useEffect(function () {
if (!manual) {
load();
}
// return () => {if (!manual) unload()}; /* @todo */
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [manual]);
return {
id: id,
name: name,
update: update,
unload: unload,
load: load,
isLoaded: isLoaded
};
};
/* eslint-disable */
var useTimeout = function useTimeout(fn) {
var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var when = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
var timeout = React.useRef(null);
var savedCallback = React.useRef(null);
var clear = React.useCallback(function () {
return clearTimeout(timeout.current);
}, [timeout.current]);
React.useEffect(function () {
savedCallback.current = fn;
});
React.useEffect(function () {
function callback() {
savedCallback.current();
}
if (when) {
timeout.current = setTimeout(callback, delay);
return clear;
} else {
clear();
}
}, [delay, when]);
useUnmountEffect(function () {
clear();
});
return [clear];
};
/* eslint-enable */
/* eslint-disable */
var useUpdateEffect = function useUpdateEffect(fn, deps) {
var mounted = React.useRef(false);
return React.useEffect(function () {
if (!mounted.current) {
mounted.current = true;
return;
}
return fn && fn();
}, deps);
};
/* eslint-enable */
function ownKeys$1Y(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$1Y(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1Y(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1Y(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var baseStyle = "\n.p-hidden-accessible {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n opacity: 0;\n overflow: hidden;\n padding: 0;\n pointer-events: none;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.p-overflow-hidden {\n overflow: hidden;\n padding-right: var(--scrollbar-width);\n}\n";
var buttonStyles = "\n.p-button {\n margin: 0;\n display: inline-flex;\n cursor: pointer;\n user-select: none;\n align-items: center;\n vertical-align: bottom;\n text-align: center;\n overflow: hidden;\n position: relative;\n}\n\n.p-button-label {\n flex: 1 1 auto;\n}\n\n.p-button-icon {\n pointer-events: none;\n}\n\n.p-button-icon-right {\n order: 1;\n}\n\n.p-button:disabled {\n cursor: default;\n}\n\n.p-button-icon-only {\n justify-content: center;\n}\n\n.p-button-icon-only .p-button-label {\n visibility: hidden;\n width: 0;\n flex: 0 0 auto;\n}\n\n.p-button-vertical {\n flex-direction: column;\n}\n\n.p-button-icon-bottom {\n order: 2;\n}\n\n.p-button-group .p-button {\n margin: 0;\n}\n\n.p-button-group .p-button:not(:last-child) {\n border-right: 0 none;\n}\n\n.p-button-group .p-button:not(:first-of-type):not(:last-of-type) {\n border-radius: 0;\n}\n\n.p-button-group .p-button:first-of-type {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.p-button-group .p-button:last-of-type {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.p-button-group .p-button:focus {\n position: relative;\n z-index: 1;\n}\n\n.p-button-group-single .p-button:first-of-type {\n border-top-right-radius: var(--border-radius) !important;\n border-bottom-right-radius: var(--border-radius) !important;\n}\n\n.p-button-group-single .p-button:last-of-type {\n border-top-left-radius: var(--border-radius) !important;\n border-bottom-left-radius: var(--border-radius) !important;\n}\n";
var inputTextStyles = "\n.p-inputtext {\n margin: 0;\n}\n\n.p-fluid .p-inputtext {\n width: 100%;\n}\n\n/* InputGroup */\n.p-inputgroup {\n display: flex;\n align-items: stretch;\n width: 100%;\n}\n\n.p-inputgroup-addon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.p-inputgroup .p-float-label {\n display: flex;\n align-items: stretch;\n width: 100%;\n}\n\n.p-inputgroup .p-inputtext,\n.p-fluid .p-inputgroup .p-inputtext,\n.p-inputgroup .p-inputwrapper,\n.p-fluid .p-inputgroup .p-input {\n flex: 1 1 auto;\n width: 1%;\n}\n\n/* Floating Label */\n.p-float-label {\n display: block;\n position: relative;\n}\n\n.p-float-label label {\n position: absolute;\n pointer-events: none;\n top: 50%;\n margin-top: -0.5rem;\n transition-property: all;\n transition-timing-function: ease;\n line-height: 1;\n}\n\n.p-float-label textarea ~ label,\n.p-float-label .p-mention ~ label {\n top: 1rem;\n}\n\n.p-float-label input:focus ~ label,\n.p-float-label input:-webkit-autofill ~ label,\n.p-float-label input.p-filled ~ label,\n.p-float-label textarea:focus ~ label,\n.p-float-label textarea.p-filled ~ label,\n.p-float-label .p-inputwrapper-focus ~ label,\n.p-float-label .p-inputwrapper-filled ~ label,\n.p-float-label .p-tooltip-target-wrapper ~ label {\n top: -0.75rem;\n font-size: 12px;\n}\n\n.p-float-label .p-placeholder,\n.p-float-label input::placeholder,\n.p-float-label .p-inputtext::placeholder {\n opacity: 0;\n transition-property: all;\n transition-timing-function: ease;\n}\n\n.p-float-label .p-focus .p-placeholder,\n.p-float-label input:focus::placeholder,\n.p-float-label .p-inputtext:focus::placeholder {\n opacity: 1;\n transition-property: all;\n transition-timing-function: ease;\n}\n\n.p-input-icon-left,\n.p-input-icon-right {\n position: relative;\n display: inline-block;\n}\n\n.p-input-icon-left > i,\n.p-input-icon-right > i,\n.p-input-icon-left > svg,\n.p-input-icon-right > svg,\n.p-input-icon-left > .p-input-prefix,\n.p-input-icon-right > .p-input-suffix {\n position: absolute;\n top: 50%;\n margin-top: -0.5rem;\n}\n\n.p-fluid .p-input-icon-left,\n.p-fluid .p-input-icon-right {\n display: block;\n width: 100%;\n}\n";
var iconStyles = "\n.p-icon {\n display: inline-block;\n}\n\n.p-icon-spin {\n -webkit-animation: p-icon-spin 2s infinite linear;\n animation: p-icon-spin 2s infinite linear;\n}\n\nsvg.p-icon {\n pointer-events: auto;\n}\n\nsvg.p-icon g,\n.p-disabled svg.p-icon {\n pointer-events: none;\n}\n\n@-webkit-keyframes p-icon-spin {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n 100% {\n -webkit-transform: rotate(359deg);\n transform: rotate(359deg);\n }\n}\n\n@keyframes p-icon-spin {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n 100% {\n -webkit-transform: rotate(359deg);\n transform: rotate(359deg);\n }\n}\n";
var commonStyle = "\n@layer primereact {\n .p-component, .p-component * {\n box-sizing: border-box;\n }\n\n .p-hidden {\n display: none;\n }\n\n .p-hidden-space {\n visibility: hidden;\n }\n\n .p-reset {\n margin: 0;\n padding: 0;\n border: 0;\n outline: 0;\n text-decoration: none;\n font-size: 100%;\n list-style: none;\n }\n\n .p-disabled, .p-disabled * {\n cursor: default;\n pointer-events: none;\n user-select: none;\n }\n\n .p-component-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n\n .p-unselectable-text {\n user-select: none;\n }\n\n .p-scrollbar-measure {\n width: 100px;\n height: 100px;\n overflow: scroll;\n position: absolute;\n top: -9999px;\n }\n\n @-webkit-keyframes p-fadein {\n 0% { opacity: 0; }\n 100% { opacity: 1; }\n }\n @keyframes p-fadein {\n 0% { opacity: 0; }\n 100% { opacity: 1; }\n }\n\n .p-link {\n text-align: left;\n background-color: transparent;\n margin: 0;\n padding: 0;\n border: none;\n cursor: pointer;\n user-select: none;\n }\n\n .p-link:disabled {\n cursor: default;\n }\n\n /* Non react overlay animations */\n .p-connected-overlay {\n opacity: 0;\n transform: scaleY(0.8);\n transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);\n }\n\n .p-connected-overlay-visible {\n opacity: 1;\n transform: scaleY(1);\n }\n\n .p-connected-overlay-hidden {\n opacity: 0;\n transform: scaleY(1);\n transition: opacity .1s linear;\n }\n\n /* React based overlay animations */\n .p-connected-overlay-enter {\n opacity: 0;\n transform: scaleY(0.8);\n }\n\n .p-connected-overlay-enter-active {\n opacity: 1;\n transform: scaleY(1);\n transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);\n }\n\n .p-connected-overlay-enter-done {\n transform: none;\n }\n\n .p-connected-overlay-exit {\n opacity: 1;\n }\n\n .p-connected-overlay-exit-active {\n opacity: 0;\n transition: opacity .1s linear;\n }\n\n /* Toggleable Content */\n .p-toggleable-content-enter {\n max-height: 0;\n }\n\n .p-toggleable-content-enter-active {\n overflow: hidden;\n max-height: 1000px;\n transition: max-height 1s ease-in-out;\n }\n\n .p-toggleable-content-enter-done {\n transform: none;\n }\n\n .p-toggleable-content-exit {\n max-height: 1000px;\n }\n\n .p-toggleable-content-exit-active {\n overflow: hidden;\n max-height: 0;\n transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);\n }\n\n /* @todo Refactor */\n .p-menu .p-menuitem-link {\n cursor: pointer;\n display: flex;\n align-items: center;\n text-decoration: none;\n overflow: hidden;\n position: relative;\n }\n\n ".concat(buttonStyles, "\n ").concat(inputTextStyles, "\n ").concat(iconStyles, "\n}\n");
var ComponentBase = {
cProps: undefined,
cParams: undefined,
cName: undefined,
defaultProps: {
pt: undefined,
ptOptions: undefined,
unstyled: false
},
context: {},
globalCSS: undefined,
classes: {},
styles: '',
extend: function extend() {
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var css = props.css;
var defaultProps = _objectSpread$1Y(_objectSpread$1Y({}, props.defaultProps), ComponentBase.defaultProps);
var inlineStyles = {};
var getProps = function getProps(props) {
var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
ComponentBase.context = context;
ComponentBase.cProps = props;
return ObjectUtils.getMergedProps(props, defaultProps);
};
var getOtherProps = function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, defaultProps);
};
var getPTValue = function getPTValue() {
var _ComponentBase$contex;
var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
var params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var searchInDefaultPT = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
// obj either is the passthrough options or has a .pt property.
if (obj.hasOwnProperty('pt') && obj.pt !== undefined) {
obj = obj.pt;
}
var originalkey = key;
var isNestedParam = /./g.test(originalkey) && !!params[originalkey.split('.')[0]];
var fkey = isNestedParam ? ObjectUtils.toFlatCase(originalkey.split('.')[1]) : ObjectUtils.toFlatCase(originalkey);
var hostName = params.hostName && ObjectUtils.toFlatCase(params.hostName);
var componentName = hostName || params.props && params.props.__TYPE && ObjectUtils.toFlatCase(params.props.__TYPE) || '';
var isTransition = fkey === 'transition';
var datasetPrefix = 'data-pc-';
var _getHostInstance = function getHostInstance(params) {
return params !== null && params !== void 0 && params.props ? params.hostName ? params.props.__TYPE === params.hostName ? params.props : _getHostInstance(params.parent) : params.parent : undefined;
};
var getPropValue = function getPropValue(name) {
var _params$props, _getHostInstance2;
return ((_params$props = params.props) === null || _params$props === void 0 ? void 0 : _params$props[name]) || ((_getHostInstance2 = _getHostInstance(params)) === null || _getHostInstance2 === void 0 ? void 0 : _getHostInstance2[name]);
};
ComponentBase.cParams = params;
ComponentBase.cName = componentName;
var _ref = getPropValue('ptOptions') || ComponentBase.context.ptOptions || {},
_ref$mergeSections = _ref.mergeSections,
mergeSections = _ref$mergeSections === void 0 ? true : _ref$mergeSections,
_ref$mergeProps = _ref.mergeProps,
useMergeProps = _ref$mergeProps === void 0 ? false : _ref$mergeProps;
var getPTClassValue = function getPTClassValue() {
var value = _getOptionValue.apply(void 0, arguments);
if (Array.isArray(value)) {
return {
className: classNames.apply(void 0, _toConsumableArray(value))
};
}
if (ObjectUtils.isString(value)) {
return {
className: value
};
}
if (value !== null && value !== void 0 && value.hasOwnProperty('className') && Array.isArray(value.className)) {
return {
className: classNames.apply(void 0, _toConsumableArray(value.className))
};
}
return value;
};
var globalPT = searchInDefaultPT ? isNestedParam ? _useGlobalPT(getPTClassValue, originalkey, params) : _useDefaultPT(getPTClassValue, originalkey, params) : undefined;
var self = isNestedParam ? undefined : _usePT(_getPT(obj, componentName), getPTClassValue, originalkey, params);
var datasetProps = !isTransition && _objectSpread$1Y(_objectSpread$1Y({}, fkey === 'root' && _defineProperty({}, "".concat(datasetPrefix, "name"), params.props && params.props.__parentMetadata ? ObjectUtils.toFlatCase(params.props.__TYPE) : componentName)), {}, _defineProperty({}, "".concat(datasetPrefix, "section"), fkey));
return mergeSections || !mergeSections && self ? useMergeProps ? mergeProps([globalPT, self, Object.keys(datasetProps).length ? datasetProps : {}], {
classNameMergeFunction: (_ComponentBase$contex = ComponentBase.context.ptOptions) === null || _ComponentBase$contex === void 0 ? void 0 : _ComponentBase$contex.classNameMergeFunction
}) : _objectSpread$1Y(_objectSpread$1Y(_objectSpread$1Y({}, globalPT), self), Object.keys(datasetProps).length ? datasetProps : {}) : _objectSpread$1Y(_objectSpread$1Y({}, self), Object.keys(datasetProps).length ? datasetProps : {});
};
var setMetaData = function setMetaData() {
var metadata = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var props = metadata.props,
state = metadata.state;
var ptm = function ptm() {
var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
return getPTValue((props || {}).pt, key, _objectSpread$1Y(_objectSpread$1Y({}, metadata), params));
};
var ptmo = function ptmo() {
var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
var params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
return getPTValue(obj, key, params, false);
};
var isUnstyled = function isUnstyled() {
return ComponentBase.context.unstyled || PrimeReact.unstyled || props.unstyled;
};
var cx = function cx() {
var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
return !isUnstyled() ? _getOptionValue(css && css.classes, key, _objectSpread$1Y({
props: props,
state: state
}, params)) : undefined;
};
var sx = function sx() {
var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var when = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
if (when) {
var _ComponentBase$contex2;
var self = _getOptionValue(css && css.inlineStyles, key, _objectSpread$1Y({
props: props,
state: state
}, params));
var base = _getOptionValue(inlineStyles, key, _objectSpread$1Y({
props: props,
state: state
}, params));
return mergeProps([base, self], {
classNameMergeFunction: (_ComponentBase$contex2 = ComponentBase.context.ptOptions) === null || _ComponentBase$contex2 === void 0 ? void 0 : _ComponentBase$contex2.classNameMergeFunction
});
}
return undefined;
};
return {
ptm: ptm,
ptmo: ptmo,
sx: sx,
cx: cx,
isUnstyled: isUnstyled
};
};
return _objectSpread$1Y(_objectSpread$1Y({
getProps: getProps,
getOtherProps: getOtherProps,
setMetaData: setMetaData
}, props), {}, {
defaultProps: defaultProps
});
}
};
var _getOptionValue = function getOptionValue(obj) {
var key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
var params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var fKeys = String(ObjectUtils.toFlatCase(key)).split('.');
var fKey = fKeys.shift();
var matchedPTOption = ObjectUtils.isNotEmpty(obj) ? Object.keys(obj).find(function (k) {
return ObjectUtils.toFlatCase(k) === fKey;
}) : '';
return fKey ? ObjectUtils.isObject(obj) ? _getOptionValue(ObjectUtils.getItemValue(obj[matchedPTOption], params), fKeys.join('.'), params) : undefined : ObjectUtils.getItemValue(obj, params);
};
var _getPT = function _getPT(pt) {
var key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
var callback = arguments.length > 2 ? arguments[2] : undefined;
var _usept = pt === null || pt === void 0 ? void 0 : pt._usept;
var getValue = function getValue(value) {
var _ref3;
var checkSameKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var _value = callback ? callback(value) : value;
var _key = ObjectUtils.toFlatCase(key);
return (_ref3 = checkSameKey ? _key !== ComponentBase.cName ? _value === null || _value === void 0 ? void 0 : _value[_key] : undefined : _value === null || _value === void 0 ? void 0 : _value[_key]) !== null && _ref3 !== void 0 ? _ref3 : _value;
};
return ObjectUtils.isNotEmpty(_usept) ? {
_usept: _usept,
originalValue: getValue(pt.originalValue),
value: getValue(pt.value)
} : getValue(pt, true);
};
var _usePT = function _usePT(pt, callback, key, params) {
var fn = function fn(value) {
return callback(value, key, params);
};
if (pt !== null && pt !== void 0 && pt.hasOwnProperty('_usept')) {
var _ref4 = pt._usept || ComponentBase.context.ptOptions || {},
_ref4$mergeSections = _ref4.mergeSections,
mergeSections = _ref4$mergeSections === void 0 ? true : _ref4$mergeSections,
_ref4$mergeProps = _ref4.mergeProps,
useMergeProps = _ref4$mergeProps === void 0 ? false : _ref4$mergeProps,
classNameMergeFunction = _ref4.classNameMergeFunction;
var originalValue = fn(pt.originalValue);
var value = fn(pt.value);
if (originalValue === undefined && value === undefined) {
return undefined;
} else if (ObjectUtils.isString(value)) {
return value;
} else if (ObjectUtils.isString(originalValue)) {
return originalValue;
}
return mergeSections || !mergeSections && value ? useMergeProps ? mergeProps([originalValue, value], {
classNameMergeFunction: classNameMergeFunction
}) : _objectSpread$1Y(_objectSpread$1Y({}, originalValue), value) : value;
}
return fn(pt);
};
var getGlobalPT = function getGlobalPT() {
return _getPT(ComponentBase.context.pt || PrimeReact.pt, undefined, function (value) {
return ObjectUtils.getItemValue(value, ComponentBase.cParams);
});
};
var getDefaultPT = function getDefaultPT() {
return _getPT(ComponentBase.context.pt || PrimeReact.pt, undefined, function (value) {
return _getOptionValue(value, ComponentBase.cName, ComponentBase.cParams) || ObjectUtils.getItemValue(value, ComponentBase.cParams);
});
};
var _useGlobalPT = function _useGlobalPT(callback, key, params) {
return _usePT(getGlobalPT(), callback, key, params);
};
var _useDefaultPT = function _useDefaultPT(callback, key, params) {
return _usePT(getDefaultPT(), callback, key, params);
};
var useHandleStyle = function useHandleStyle(styles) {
var _isUnstyled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
var config = arguments.length > 2 ? arguments[2] : undefined;
var name = config.name,
_config$styled = config.styled,
styled = _config$styled === void 0 ? false : _config$styled,
_config$hostName = config.hostName,
hostName = _config$hostName === void 0 ? '' : _config$hostName;
var globalCSS = _useGlobalPT(_getOptionValue, 'global.css', ComponentBase.cParams);
var componentName = ObjectUtils.toFlatCase(name);
var _useStyle = useStyle(baseStyle, {
name: 'base',
manual: true
}),
loadBaseStyle = _useStyle.load;
var _useStyle2 = useStyle(commonStyle, {
name: 'common',
manual: true
}),
loadCommonStyle = _useStyle2.load;
var _useStyle3 = useStyle(globalCSS, {
name: 'global',
manual: true
}),
loadGlobalStyle = _useStyle3.load;
var _useStyle4 = useStyle(styles, {
name: name,
manual: true
}),
loadComponentStyle = _useStyle4.load;
var hook = function hook(hookName) {
if (!hostName) {
var selfHook = _usePT(_getPT((ComponentBase.cProps || {}).pt, componentName), _getOptionValue, "hooks.".concat(hookName));
var defaultHook = _useDefaultPT(_getOptionValue, "hooks.".concat(hookName));
selfHook === null || selfHook === void 0 || selfHook();
defaultHook === null || defaultHook === void 0 || defaultHook();
}
};
hook('useMountEffect');
useMountEffect(function () {
// Load base and global styles first as they are always needed
loadBaseStyle();
loadGlobalStyle();
// Only load additional styles if component is styled
if (!_isUnstyled()) {
// Load common styles shared across components
loadCommonStyle();
// Load component-specific styles if not explicitly styled
if (!styled) {
loadComponentStyle();
}
}
});
useUpdateEffect(function () {
hook('useUpdateEffect');
});
useUnmountEffect(function () {
hook('useUnmountEffect');
});
};
var CSSTransitionBase = {
defaultProps: {
__TYPE: 'CSSTransition',
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, CSSTransitionBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, CSSTransitionBase.defaultProps);
}
};
function ownKeys$1X(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$1X(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1X(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1X(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var CSSTransition = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = CSSTransitionBase.getProps(inProps);
var context = React.useContext(PrimeReactContext);
var disabled = props.disabled || props.options && props.options.disabled || context && !context.cssTransition || !PrimeReact.cssTransition;
var onEnter = function onEnter(node, isAppearing) {
props.onEnter && props.onEnter(node, isAppearing); // component
props.options && props.options.onEnter && props.options.onEnter(node, isAppearing); // user option
};
var onEntering = function onEntering(node, isAppearing) {
props.onEntering && props.onEntering(node, isAppearing); // component
props.options && props.options.onEntering && props.options.onEntering(node, isAppearing); // user option
};
var onEntered = function onEntered(node, isAppearing) {
props.onEntered && props.onEntered(node, isAppearing); // component
props.options && props.options.onEntered && props.options.onEntered(node, isAppearing); // user option
};
var onExit = function onExit(node) {
props.onExit && props.onExit(node); // component
props.options && props.options.onExit && props.options.onExit(node); // user option
};
var onExiting = function onExiting(node) {
props.onExiting && props.onExiting(node); // component
props.options && props.options.onExiting && props.options.onExiting(node); // user option
};
var onExited = function onExited(node) {
props.onExited && props.onExited(node); // component
props.options && props.options.onExited && props.options.onExited(node); // user option
};
useUpdateEffect(function () {
if (disabled) {
// no animation
var node = ObjectUtils.getRefElement(props.nodeRef);
if (props["in"]) {
onEnter(node, true);
onEntering(node, true);
onEntered(node, true);
} else {
onExit(node);
onExiting(node);
onExited(node);
}
}
}, [props["in"]]);
if (disabled) {
return props["in"] ? props.children : null;
}
var immutableProps = {
nodeRef: props.nodeRef,
"in": props["in"],
appear: props.appear,
onEnter: onEnter,
onEntering: onEntering,
onEntered: onEntered,
onExit: onExit,
onExiting: onExiting,
onExited: onExited
};
var mutableProps = {
classNames: props.classNames,
timeout: props.timeout,
unmountOnExit: props.unmountOnExit
};
var mergedProps = _objectSpread$1X(_objectSpread$1X(_objectSpread$1X({}, mutableProps), props.options || {}), immutableProps);
return /*#__PURE__*/React.createElement(CSSTransition$1, mergedProps, props.children);
});
CSSTransition.displayName = 'CSSTransition';
var IconBase = {
defaultProps: {
__TYPE: 'IconBase',
className: null,
label: null,
spin: false
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, IconBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, IconBase.defaultProps);
},
getPTI: function getPTI(props) {
var isLabelEmpty = ObjectUtils.isEmpty(props.label);
var otherProps = IconBase.getOtherProps(props);
var ptiProps = {
className: classNames('p-icon', {
'p-icon-spin': props.spin
}, props.className),
role: !isLabelEmpty ? 'img' : undefined,
'aria-label': !isLabelEmpty ? props.label : undefined,
'aria-hidden': props.label ? isLabelEmpty : undefined
};
return ObjectUtils.getMergedProps(otherProps, ptiProps);
}
};
var ChevronDownIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
d: "M7.01744 10.398C6.91269 10.3985 6.8089 10.378 6.71215 10.3379C6.61541 10.2977 6.52766 10.2386 6.45405 10.1641L1.13907 4.84913C1.03306 4.69404 0.985221 4.5065 1.00399 4.31958C1.02276 4.13266 1.10693 3.95838 1.24166 3.82747C1.37639 3.69655 1.55301 3.61742 1.74039 3.60402C1.92777 3.59062 2.11386 3.64382 2.26584 3.75424L7.01744 8.47394L11.769 3.75424C11.9189 3.65709 12.097 3.61306 12.2748 3.62921C12.4527 3.64535 12.6199 3.72073 12.7498 3.84328C12.8797 3.96582 12.9647 4.12842 12.9912 4.30502C13.0177 4.48162 12.9841 4.662 12.8958 4.81724L7.58083 10.1322C7.50996 10.2125 7.42344 10.2775 7.32656 10.3232C7.22968 10.3689 7.12449 10.3944 7.01744 10.398Z",
fill: "currentColor"
}));
}));
ChevronDownIcon.displayName = 'ChevronDownIcon';
var ChevronRightIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
d: "M4.38708 13C4.28408 13.0005 4.18203 12.9804 4.08691 12.9409C3.99178 12.9014 3.9055 12.8433 3.83313 12.7701C3.68634 12.6231 3.60388 12.4238 3.60388 12.2161C3.60388 12.0084 3.68634 11.8091 3.83313 11.6622L8.50507 6.99022L3.83313 2.31827C3.69467 2.16968 3.61928 1.97313 3.62287 1.77005C3.62645 1.56698 3.70872 1.37322 3.85234 1.22959C3.99596 1.08597 4.18972 1.00371 4.3928 1.00012C4.59588 0.996539 4.79242 1.07192 4.94102 1.21039L10.1669 6.43628C10.3137 6.58325 10.3962 6.78249 10.3962 6.99022C10.3962 7.19795 10.3137 7.39718 10.1669 7.54416L4.94102 12.7701C4.86865 12.8433 4.78237 12.9014 4.68724 12.9409C4.59212 12.9804 4.49007 13.0005 4.38708 13Z",
fill: "currentColor"
}));
}));
ChevronRightIcon.displayName = 'ChevronRightIcon';
var classes$1i = {
root: 'p-accordion p-component',
accordiontab: {
root: function root(_ref) {
var selected = _ref.selected;
return classNames('p-accordion-tab', {
'p-accordion-tab-active': selected
});
},
content: 'p-accordion-content',
header: function header(_ref2) {
var selected = _ref2.selected,
getTabProp = _ref2.getTabProp,
tab = _ref2.tab;
return classNames('p-accordion-header', {
'p-highlight': selected,
'p-disabled': getTabProp(tab, 'disabled')
});
},
headeraction: 'p-accordion-header-link',
headericon: 'p-accordion-toggle-icon',
headertitle: 'p-accordion-header-text',
toggleablecontent: 'p-toggleable-content',
transition: 'p-toggleable-content'
}
};
var styles$15 = "\n@layer primereact {\n .p-accordion-header-link {\n cursor: pointer;\n display: flex;\n align-items: center;\n user-select: none;\n position: relative;\n text-decoration: none;\n }\n \n .p-accordion-header-link:focus {\n z-index: 1;\n }\n \n .p-accordion-header-text {\n line-height: 1;\n width: 100%;\n }\n}\n";
var AccordionBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Accordion',
id: null,
activeIndex: null,
className: null,
style: null,
multiple: false,
expandIcon: null,
collapseIcon: null,
transitionOptions: null,
onTabOpen: null,
onTabClose: null,
onTabChange: null,
children: undefined
},
css: {
classes: classes$1i,
styles: styles$15
}
});
var AccordionTabBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'AccordionTab',
className: null,
contentClassName: null,
contentStyle: null,
disabled: false,
header: null,
headerClassName: null,
headerStyle: null,
headerTemplate: null,
style: null,
tabIndex: 0,
children: undefined
},
getCProp: function getCProp(tab, name) {
return ObjectUtils.getComponentProp(tab, name, AccordionTabBase.defaultProps);
},
getCProps: function getCProps(tab) {
return ObjectUtils.getComponentProps(tab, AccordionTabBase.defaultProps);
},
getCOtherProps: function getCOtherProps(tab) {
return ObjectUtils.getComponentDiffProps(tab, AccordionTabBase.defaultProps);
}
});
function ownKeys$1W(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$1W(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1W(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1W(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var AccordionTab = function AccordionTab() {};
var Accordion = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = AccordionBase.getProps(inProps, context);
var _React$useState = React.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var _React$useState3 = React.useState(props.activeIndex),
_React$useState4 = _slicedToArray(_React$useState3, 2),
activeIndexState = _React$useState4[0],
setActiveIndexState = _React$useState4[1];
var elementRef = React.useRef(null);
var activeIndex = props.onTabChange ? props.activeIndex : activeIndexState;
var count = React.Children.count(props.children);
var metaData = {
props: props,
state: {
id: idState,
activeIndex: activeIndexState
}
};
var _AccordionBase$setMet = AccordionBase.setMetaData(_objectSpread$1W({}, metaData)),
ptm = _AccordionBase$setMet.ptm,
ptmo = _AccordionBase$setMet.ptmo,
cx = _AccordionBase$setMet.cx,
isUnstyled = _AccordionBase$setMet.isUnstyled;
useHandleStyle(AccordionBase.css.styles, isUnstyled, {
name: 'accordion'
});
var getTabProp = function getTabProp(tab, name) {
return AccordionTabBase.getCProp(tab, name);
};
var getTabPT = function getTabPT(tab, key, index) {
var tabMetaData = {
// props: atProps, /* @todo */
parent: metaData,
context: {
index: index,
count: count,
first: index === 0,
last: index === count - 1,
selected: isSelected(index),
disabled: getTabProp(tab, 'disabled')
}
};
return mergeProps(ptm("tab.".concat(key), {
tab: tabMetaData
}), ptm("accordiontab.".concat(key), {
accordiontab: tabMetaData
}), ptm("accordiontab.".concat(key), tabMetaData), ptmo(getTabProp(tab, 'pt'), key, tabMetaData));
};
var onTabHeaderClick = function onTabHeaderClick(event, tab, index) {
changeActiveIndex(event, tab, index);
};
var changeActiveIndex = function changeActiveIndex(event, tab, index) {
if (!getTabProp(tab, 'disabled')) {
var selected = isSelected(index);
var newActiveIndex = null;
if (props.multiple) {
var indexes = activeIndex || [];
newActiveIndex = selected ? indexes.filter(function (i) {
return i !== index;
}) : [].concat(_toConsumableArray(indexes), [index]);
} else {
newActiveIndex = selected ? null : index;
}
var callback = selected ? props.onTabClose : props.onTabOpen;
callback && callback({
originalEvent: event,
index: index
});
if (props.onTabChange) {
props.onTabChange({
originalEvent: event,
index: newActiveIndex
});
} else {
setActiveIndexState(newActiveIndex);
}
}
event.preventDefault();
};
var onTabHeaderKeyDown = function onTabHeaderKeyDown(event, tab, index) {
switch (event.code) {
case 'ArrowDown':
onTabArrowDownKey(event);
break;
case 'ArrowUp':
onTabArrowUpKey(event);
break;
case 'Home':
onTabHomeKey(event);
break;
case 'End':
onTabEndKey(event);
break;
case 'Enter':
case 'NumpadEnter':
case 'Space':
onTabEnterKey(event, tab, index);
break;
}
};
var onTabArrowDownKey = function onTabArrowDownKey(event) {
var nextHeaderAction = _findNextHeaderAction(event.target.parentElement.parentElement);
nextHeaderAction ? changeFocusedTab(nextHeaderAction) : onTabHomeKey(event);
event.preventDefault();
};
var onTabArrowUpKey = function onTabArrowUpKey(event) {
var prevHeaderAction = _findPrevHeaderAction(event.target.parentElement.parentElement);
prevHeaderAction ? changeFocusedTab(prevHeaderAction) : onTabEndKey(event);
event.preventDefault();
};
var onTabHomeKey = function onTabHomeKey(event) {
var firstHeaderAction = findFirstHeaderAction();
changeFocusedTab(firstHeaderAction);
event.preventDefault();
};
var onTabEndKey = function onTabEndKey(event) {
var lastHeaderAction = findLastHeaderAction();
changeFocusedTab(lastHeaderAction);
event.preventDefault();
};
var onTabEnterKey = function onTabEnterKey(event, tab, index) {
changeActiveIndex(event, tab, index);
event.preventDefault();
};
var _findNextHeaderAction = function findNextHeaderAction(tabElement) {
var selfCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var nextTabElement = selfCheck ? tabElement : tabElement.nextElementSibling;
var headerElement = DomHandler.findSingle(nextTabElement, '[data-pc-section="header"]');
return headerElement ? DomHandler.getAttribute(headerElement, 'data-p-disabled') ? _findNextHeaderAction(headerElement.parentElement) : DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]') : null;
};
var _findPrevHeaderAction = function findPrevHeaderAction(tabElement) {
var selfCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var prevTabElement = selfCheck ? tabElement : tabElement.previousElementSibling;
var headerElement = DomHandler.findSingle(prevTabElement, '[data-pc-section="header"]');
return headerElement ? DomHandler.getAttribute(headerElement, 'data-p-disabled') ? _findPrevHeaderAction(headerElement.parentElement) : DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]') : null;
};
var findFirstHeaderAction = function findFirstHeaderAction() {
return _findNextHeaderAction(elementRef.current.firstElementChild, true);
};
var findLastHeaderAction = function findLastHeaderAction() {
return _findPrevHeaderAction(elementRef.current.lastElementChild, true);
};
var changeFocusedTab = function changeFocusedTab(element) {
if (element) {
DomHandler.focus(element);
}
};
var isSelected = function isSelected(index) {
return props.multiple && Array.isArray(activeIndex) ? activeIndex && activeIndex.some(function (i) {
return i === index;
}) : activeIndex === index;
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
useMountEffect(function () {
if (!idState) {
setIdState(UniqueComponentId());
}
});
if (!idState) {
return null;
}
var createTabHeader = function createTabHeader(tab, selected, index) {
var style = _objectSpread$1W(_objectSpread$1W({}, getTabProp(tab, 'style') || {}), getTabProp(tab, 'headerStyle') || {});
var headerId = idState + '_header_' + index;
var ariaControls = idState + '_content_' + index;
var tabIndex = getTabProp(tab, 'disabled') ? -1 : getTabProp(tab, 'tabIndex');
var headerTitleProps = mergeProps({
className: cx('accordiontab.headertitle')
}, getTabPT(tab, 'headertitle', index));
var tabCProps = AccordionTabBase.getCProps(tab);
var header = getTabProp(tab, 'headerTemplate') ? ObjectUtils.getJSXElement(getTabProp(tab, 'headerTemplate'), tabCProps) : /*#__PURE__*/React.createElement("span", headerTitleProps, ObjectUtils.getJSXElement(getTabProp(tab, 'header'), tabCProps));
var headerIconProps = mergeProps({
'aria-hidden': 'true',
className: cx('accordiontab.headericon')
}, getTabPT(tab, 'headericon', index));
var icon = selected ? props.collapseIcon || /*#__PURE__*/React.createElement(ChevronDownIcon, headerIconProps) : props.expandIcon || /*#__PURE__*/React.createElement(ChevronRightIcon, headerIconProps);
var toggleIcon = IconUtils.getJSXIcon(icon, _objectSpread$1W({}, headerIconProps), {
props: props,
selected: selected
});
var headerProps = mergeProps({
className: classNames(getTabProp(tab, 'headerClassName'), getTabProp(tab, 'className'), cx('accordiontab.header', {
selected: selected,
getTabProp: getTabProp,
tab: tab
})),
style: style,
'data-p-highlight': selected,
'data-p-disabled': getTabProp(tab, 'disabled')
}, getTabPT(tab, 'header', index));
var headerActionProps = mergeProps({
id: headerId,
href: '#' + ariaControls,
className: cx('accordiontab.headeraction'),
role: 'button',
tabIndex: tabIndex,
onClick: function onClick(e) {
return onTabHeaderClick(e, tab, index);
},
onKeyDown: function onKeyDown(e) {
return onTabHeaderKeyDown(e, tab, index);
},
'aria-disabled': getTabProp(tab, 'disabled'),
'aria-controls': ariaControls,
'aria-expanded': selected
}, getTabPT(tab, 'headeraction', index));
return /*#__PURE__*/React.createElement("div", headerProps, /*#__PURE__*/React.createElement("a", headerActionProps, toggleIcon, header));
};
var createTabContent = function createTabContent(tab, selected, index) {
var style = _objectSpread$1W(_objectSpread$1W({}, getTabProp(tab, 'style') || {}), getTabProp(tab, 'contentStyle') || {});
var contentId = idState + '_content_' + index;
var ariaLabelledby = idState + '_header_' + index;
var contentRef = /*#__PURE__*/React.createRef();
var toggleableContentProps = mergeProps({
id: contentId,
ref: contentRef,
className: classNames(getTabProp(tab, 'contentClassName'), getTabProp(tab, 'className'), cx('accordiontab.toggleablecontent')),
style: style,
role: 'region',
'aria-labelledby': ariaLabelledby
}, getTabPT(tab, 'toggleablecontent', index));
var contentProps = mergeProps({
className: cx('accordiontab.content')
}, getTabPT(tab, 'content', index));
var transitionProps = mergeProps({
classNames: cx('accordiontab.transition'),
timeout: {
enter: 1000,
exit: 450
},
"in": selected,
unmountOnExit: true,
options: props.transitionOptions
}, getTabPT(tab, 'transition', index));
return /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: contentRef
}, transitionProps), /*#__PURE__*/React.createElement("div", toggleableContentProps, /*#__PURE__*/React.createElement("div", contentProps, getTabProp(tab, 'children'))));
};
var createTab = function createTab(tab, index) {
if (ObjectUtils.isValidChild(tab, 'AccordionTab')) {
var key = idState + '_' + index;
var selected = isSelected(index);
var tabHeader = createTabHeader(tab, selected, index);
var tabContent = createTabContent(tab, selected, index);
var _rootProps = mergeProps({
className: cx('accordiontab.root', {
selected: selected
})
}, AccordionTabBase.getCOtherProps(tab), getTabPT(tab, 'root', index));
return /*#__PURE__*/React.createElement("div", _extends({}, _rootProps, {
key: key
}), tabHeader, tabContent);
}
return null;
};
var createTabs = function createTabs() {
return React.Children.map(props.children, createTab);
};
var tabs = createTabs();
var rootProps = mergeProps({
className: classNames(props.className, cx('root')),
style: props.style
}, AccordionBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("div", _extends({
id: idState,
ref: elementRef
}, rootProps), tabs);
});
AccordionTab.displayName = 'AccordionTab';
Accordion.displayName = 'Accordion';
var classes$1h = {
root: function root(_ref) {
var props = _ref.props;
return classNames('p-badge p-component', _defineProperty({
'p-badge-no-gutter': ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
'p-badge-dot': ObjectUtils.isEmpty(props.value),
'p-badge-lg': props.size === 'large',
'p-badge-xl': props.size === 'xlarge'
}, "p-badge-".concat(props.severity), props.severity !== null));
}
};
var styles$14 = "\n@layer primereact {\n .p-badge {\n display: inline-block;\n border-radius: 10px;\n text-align: center;\n padding: 0 .5rem;\n }\n \n .p-overlay-badge {\n position: relative;\n }\n \n .p-overlay-badge .p-badge {\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%,-50%);\n transform-origin: 100% 0;\n margin: 0;\n }\n \n .p-badge-dot {\n width: .5rem;\n min-width: .5rem;\n height: .5rem;\n border-radius: 50%;\n padding: 0;\n }\n \n .p-badge-no-gutter {\n padding: 0;\n border-radius: 50%;\n }\n}\n";
var BadgeBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Badge',
__parentMetadata: null,
value: null,
severity: null,
size: null,
style: null,
className: null,
children: undefined
},
css: {
classes: classes$1h,
styles: styles$14
}
});
function ownKeys$1V(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$1V(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1V(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1V(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Badge = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = BadgeBase.getProps(inProps, context);
var _BadgeBase$setMetaDat = BadgeBase.setMetaData(_objectSpread$1V({
props: props
}, props.__parentMetadata)),
ptm = _BadgeBase$setMetaDat.ptm,
cx = _BadgeBase$setMetaDat.cx,
isUnstyled = _BadgeBase$setMetaDat.isUnstyled;
useHandleStyle(BadgeBase.css.styles, isUnstyled, {
name: 'badge'
});
var elementRef = React.useRef(null);
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var rootProps = mergeProps({
ref: elementRef,
style: props.style,
className: classNames(props.className, cx('root'))
}, BadgeBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("span", rootProps, props.value);
}));
Badge.displayName = 'Badge';
var SpinnerIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
d: "M6.99701 14C5.85441 13.999 4.72939 13.7186 3.72012 13.1832C2.71084 12.6478 1.84795 11.8737 1.20673 10.9284C0.565504 9.98305 0.165424 8.89526 0.041387 7.75989C-0.0826496 6.62453 0.073125 5.47607 0.495122 4.4147C0.917119 3.35333 1.59252 2.4113 2.46241 1.67077C3.33229 0.930247 4.37024 0.413729 5.4857 0.166275C6.60117 -0.0811796 7.76026 -0.0520535 8.86188 0.251112C9.9635 0.554278 10.9742 1.12227 11.8057 1.90555C11.915 2.01493 11.9764 2.16319 11.9764 2.31778C11.9764 2.47236 11.915 2.62062 11.8057 2.73C11.7521 2.78503 11.688 2.82877 11.6171 2.85864C11.5463 2.8885 11.4702 2.90389 11.3933 2.90389C11.3165 2.90389 11.2404 2.8885 11.1695 2.85864C11.0987 2.82877 11.0346 2.78503 10.9809 2.73C9.9998 1.81273 8.73246 1.26138 7.39226 1.16876C6.05206 1.07615 4.72086 1.44794 3.62279 2.22152C2.52471 2.99511 1.72683 4.12325 1.36345 5.41602C1.00008 6.70879 1.09342 8.08723 1.62775 9.31926C2.16209 10.5513 3.10478 11.5617 4.29713 12.1803C5.48947 12.7989 6.85865 12.988 8.17414 12.7157C9.48963 12.4435 10.6711 11.7264 11.5196 10.6854C12.3681 9.64432 12.8319 8.34282 12.8328 7C12.8328 6.84529 12.8943 6.69692 13.0038 6.58752C13.1132 6.47812 13.2616 6.41667 13.4164 6.41667C13.5712 6.41667 13.7196 6.47812 13.8291 6.58752C13.9385 6.69692 14 6.84529 14 7C14 8.85651 13.2622 10.637 11.9489 11.9497C10.6356 13.2625 8.85432 14 6.99701 14Z",
fill: "currentColor"
}));
}));
SpinnerIcon.displayName = 'SpinnerIcon';
var styles$13 = "\n@layer primereact {\n .p-ripple {\n overflow: hidden;\n position: relative;\n }\n \n .p-ink {\n display: block;\n position: absolute;\n background: rgba(255, 255, 255, 0.5);\n border-radius: 100%;\n transform: scale(0);\n }\n \n .p-ink-active {\n animation: ripple 0.4s linear;\n }\n \n .p-ripple-disabled .p-ink {\n display: none;\n }\n}\n\n@keyframes ripple {\n 100% {\n opacity: 0;\n transform: scale(2.5);\n }\n}\n\n";
var classes$1g = {
root: 'p-ink'
};
var RippleBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Ripple',
children: undefined
},
css: {
styles: styles$13,
classes: classes$1g
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, RippleBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, RippleBase.defaultProps);
}
});
function ownKeys$1U(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$1U(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1U(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1U(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Ripple = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
isMounted = _React$useState2[0],
setMounted = _React$useState2[1];
var inkRef = React.useRef(null);
var targetRef = React.useRef(null);
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = RippleBase.getProps(inProps, context);
var isRippleActive = context && context.ripple || PrimeReact.ripple;
var metaData = {
props: props
};
useStyle(RippleBase.css.styles, {
name: 'ripple',
manual: !isRippleActive
});
var _RippleBase$setMetaDa = RippleBase.setMetaData(_objectSpread$1U({}, metaData)),
ptm = _RippleBase$setMetaDa.ptm,
cx = _RippleBase$setMetaDa.cx;
var getTarget = function getTarget() {
return inkRef.current && inkRef.current.parentElement;
};
var bindEvents = function bindEvents() {
if (targetRef.current) {
targetRef.current.addEventListener('pointerdown', onPointerDown);
}
};
var unbindEvents = function unbindEvents() {
if (targetRef.current) {
targetRef.current.removeEventListener('pointerdown', onPointerDown);
}
};
var onPointerDown = function onPointerDown(event) {
var offset = DomHandler.getOffset(targetRef.current);
var offsetX = event.pageX - offset.left + document.body.scrollTop - DomHandler.getWidth(inkRef.current) / 2;
var offsetY = event.pageY - offset.top + document.body.scrollLeft - DomHandler.getHeight(inkRef.current) / 2;
activateRipple(offsetX, offsetY);
};
var activateRipple = function activateRipple(offsetX, offsetY) {
if (!inkRef.current || getComputedStyle(inkRef.current, null).display === 'none') {
return;
}
DomHandler.removeClass(inkRef.current, 'p-ink-active');
setDimensions();
inkRef.current.style.top = offsetY + 'px';
inkRef.current.style.left = offsetX + 'px';
DomHandler.addClass(inkRef.current, 'p-ink-active');
};
var onAnimationEnd = function onAnimationEnd(event) {
DomHandler.removeClass(event.currentTarget, 'p-ink-active');
};
var setDimensions = function setDimensions() {
if (inkRef.current && !DomHandler.getHeight(inkRef.current) && !DomHandler.getWidth(inkRef.current)) {
var d = Math.max(DomHandler.getOuterWidth(targetRef.current), DomHandler.getOuterHeight(targetRef.current));
inkRef.current.style.height = d + 'px';
inkRef.current.style.width = d + 'px';
}
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getInk: function getInk() {
return inkRef.current;
},
getTarget: function getTarget() {
return targetRef.current;
}
};
});
useMountEffect(function () {
// for App Router in Next.js ^14
setMounted(true);
});
useUpdateEffect(function () {
if (isMounted && inkRef.current) {
targetRef.current = getTarget();
setDimensions();
bindEvents();
}
}, [isMounted]);
useUpdateEffect(function () {
if (inkRef.current && !targetRef.current) {
targetRef.current = getTarget();
setDimensions();
bindEvents();
}
});
useUnmountEffect(function () {
if (inkRef.current) {
targetRef.current = null;
unbindEvents();
}
});
if (!isRippleActive) {
return null;
}
var rootProps = mergeProps({
'aria-hidden': true,
className: classNames(cx('root'))
}, RippleBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("span", _extends({
role: "presentation",
ref: inkRef
}, rootProps, {
onAnimationEnd: onAnimationEnd
}));
}));
Ripple.displayName = 'Ripple';
var PortalBase = {
defaultProps: {
__TYPE: 'Portal',
element: null,
appendTo: null,
visible: false,
onMounted: null,
onUnmounted: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, PortalBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, PortalBase.defaultProps);
}
};
var Portal = /*#__PURE__*/React.memo(function (inProps) {
var props = PortalBase.getProps(inProps);
var context = React.useContext(PrimeReactContext);
var _React$useState = React.useState(props.visible && DomHandler.isClient()),
_React$useState2 = _slicedToArray(_React$useState, 2),
mountedState = _React$useState2[0],
setMountedState = _React$useState2[1];
useMountEffect(function () {
if (DomHandler.isClient() && !mountedState) {
setMountedState(true);
props.onMounted && props.onMounted();
}
});
useUpdateEffect(function () {
props.onMounted && props.onMounted();
}, [mountedState]);
useUnmountEffect(function () {
props.onUnmounted && props.onUnmounted();
});
var element = props.element || props.children;
if (element && mountedState) {
var appendTo = props.appendTo || context && context.appendTo || PrimeReact.appendTo;
if (ObjectUtils.isFunction(appendTo)) {
appendTo = appendTo();
}
if (!appendTo) {
appendTo = document.body;
}
return appendTo === 'self' ? element : /*#__PURE__*/ReactDOM.createPortal(element, appendTo);
}
return null;
});
Portal.displayName = 'Portal';
var classes$1f = {
root: function root(_ref) {
var positionState = _ref.positionState,
classNameState = _ref.classNameState;
return classNames('p-tooltip p-component', _defineProperty({}, "p-tooltip-".concat(positionState), true), classNameState);
},
arrow: 'p-tooltip-arrow',
text: 'p-tooltip-text'
};
var inlineStyles$m = {
arrow: function arrow(_ref2) {
var context = _ref2.context;
return {
top: context.bottom ? '0' : context.right || context.left || !context.right && !context.left && !context.top && !context.bottom ? '50%' : null,
bottom: context.top ? '0' : null,
left: context.right || !context.right && !context.left && !context.top && !context.bottom ? '0' : context.top || context.bottom ? '50%' : null,
right: context.left ? '0' : null
};
}
};
var styles$12 = "\n@layer primereact {\n .p-tooltip {\n position: absolute;\n padding: .25em .5rem;\n /* #3687: Tooltip prevent scrollbar flickering */\n top: -9999px;\n left: -9999px;\n }\n \n .p-tooltip.p-tooltip-right,\n .p-tooltip.p-tooltip-left {\n padding: 0 .25rem;\n }\n \n .p-tooltip.p-tooltip-top,\n .p-tooltip.p-tooltip-bottom {\n padding:.25em 0;\n }\n \n .p-tooltip .p-tooltip-text {\n white-space: pre-line;\n word-break: break-word;\n }\n \n .p-tooltip-arrow {\n position: absolute;\n width: 0;\n height: 0;\n border-color: transparent;\n border-style: solid;\n }\n \n .p-tooltip-right .p-tooltip-arrow {\n top: 50%;\n left: 0;\n margin-top: -.25rem;\n border-width: .25em .25em .25em 0;\n }\n \n .p-tooltip-left .p-tooltip-arrow {\n top: 50%;\n right: 0;\n margin-top: -.25rem;\n border-width: .25em 0 .25em .25rem;\n }\n \n .p-tooltip.p-tooltip-top {\n padding: .25em 0;\n }\n \n .p-tooltip-top .p-tooltip-arrow {\n bottom: 0;\n left: 50%;\n margin-left: -.25rem;\n border-width: .25em .25em 0;\n }\n \n .p-tooltip-bottom .p-tooltip-arrow {\n top: 0;\n left: 50%;\n margin-left: -.25rem;\n border-width: 0 .25em .25rem;\n }\n\n .p-tooltip-target-wrapper {\n display: inline-flex;\n }\n}\n";
var TooltipBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Tooltip',
appendTo: null,
at: null,
autoHide: true,
autoZIndex: true,
baseZIndex: 0,
className: null,
closeOnEscape: false,
content: null,
disabled: false,
event: null,
hideDelay: 0,
hideEvent: 'mouseleave',
id: null,
mouseTrack: false,
mouseTrackLeft: 5,
mouseTrackTop: 5,
my: null,
onBeforeHide: null,
onBeforeShow: null,
onHide: null,
onShow: null,
position: 'right',
showDelay: 0,
showEvent: 'mouseenter',
showOnDisabled: false,
style: null,
target: null,
updateDelay: 0,
children: undefined
},
css: {
classes: classes$1f,
styles: styles$12,
inlineStyles: inlineStyles$m
}
});
function ownKeys$1T(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$1T(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1T(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1T(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Tooltip = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = TooltipBase.getProps(inProps, context);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
visibleState = _React$useState2[0],
setVisibleState = _React$useState2[1];
var _React$useState3 = React.useState(props.position || 'right'),
_React$useState4 = _slicedToArray(_React$useState3, 2),
positionState = _React$useState4[0],
setPositionState = _React$useState4[1];
var _React$useState5 = React.useState(''),
_React$useState6 = _slicedToArray(_React$useState5, 2),
classNameState = _React$useState6[0],
setClassNameState = _React$useState6[1];
var _React$useState7 = React.useState(false),
_React$useState8 = _slicedToArray(_React$useState7, 2),
multipleFocusEvents = _React$useState8[0],
setMultipleFocusEvents = _React$useState8[1];
var isCloseOnEscape = visibleState && props.closeOnEscape;
var overlayDisplayOrder = useDisplayOrder('tooltip', isCloseOnEscape);
var metaData = {
props: props,
state: {
visible: visibleState,
position: positionState,
className: classNameState
},
context: {
right: positionState === 'right',
left: positionState === 'left',
top: positionState === 'top',
bottom: positionState === 'bottom'
}
};
var _TooltipBase$setMetaD = TooltipBase.setMetaData(metaData),
ptm = _TooltipBase$setMetaD.ptm,
cx = _TooltipBase$setMetaD.cx,
sx = _TooltipBase$setMetaD.sx,
isUnstyled = _TooltipBase$setMetaD.isUnstyled;
useHandleStyle(TooltipBase.css.styles, isUnstyled, {
name: 'tooltip'
});
useGlobalOnEscapeKey({
callback: function callback() {
hide();
},
when: isCloseOnEscape,
priority: [ESC_KEY_HANDLING_PRIORITIES.TOOLTIP, overlayDisplayOrder]
});
var elementRef = React.useRef(null);
var textRef = React.useRef(null);
var currentTargetRef = React.useRef(null);
var containerSize = React.useRef(null);
var allowHide = React.useRef(true);
var timeouts = React.useRef({});
var currentMouseEvent = React.useRef(null);
var _useResizeListener = useResizeListener({
listener: function listener(event) {
!DomHandler.isTouchDevice() && hide(event);
}
}),
_useResizeListener2 = _slicedToArray(_useResizeListener, 2),
bindWindowResizeListener = _useResizeListener2[0],
unbindWindowResizeListener = _useResizeListener2[1];
var _useOverlayScrollList = useOverlayScrollListener({
target: currentTargetRef.current,
listener: function listener(event) {
hide(event);
},
when: visibleState
}),
_useOverlayScrollList2 = _slicedToArray(_useOverlayScrollList, 2),
bindOverlayScrollListener = _useOverlayScrollList2[0],
unbindOverlayScrollListener = _useOverlayScrollList2[1];
var isTargetContentEmpty = function isTargetContentEmpty(target) {
return !(props.content || getTargetOption(target, 'tooltip'));
};
var isContentEmpty = function isContentEmpty(target) {
return !(props.content || getTargetOption(target, 'tooltip') || props.children);
};
var isMouseTrack = function isMouseTrack(target) {
return getTargetOption(target, 'mousetrack') || props.mouseTrack;
};
var isDisabled = function isDisabled(target) {
return getTargetOption(target, 'disabled') === 'true' || hasTargetOption(target, 'disabled') || props.disabled;
};
var isShowOnDisabled = function isShowOnDisabled(target) {
return getTargetOption(target, 'showondisabled') || props.showOnDisabled;
};
var isAutoHide = function isAutoHide() {
return getTargetOption(currentTargetRef.current, 'autohide') || props.autoHide;
};
var getTargetOption = function getTargetOption(target, option) {
return hasTargetOption(target, "data-pr-".concat(option)) ? target.getAttribute("data-pr-".concat(option)) : null;
};
var hasTargetOption = function hasTargetOption(target, option) {
return target && target.hasAttribute(option);
};
var getEvents = function getEvents(target) {
var showEvents = [getTargetOption(target, 'showevent') || props.showEvent];
var hideEvents = [getTargetOption(target, 'hideevent') || props.hideEvent];
if (isMouseTrack(target)) {
showEvents = ['mousemove'];
hideEvents = ['mouseleave'];
} else {
var event = getTargetOption(target, 'event') || props.event;
if (event === 'focus') {
showEvents = ['focus'];
hideEvents = ['blur'];
}
if (event === 'both') {
showEvents = ['focus', 'mouseenter'];
hideEvents = multipleFocusEvents ? ['blur'] : ['mouseleave', 'blur'];
}
}
return {
showEvents: showEvents,
hideEvents: hideEvents
};
};
var getPosition = function getPosition(target) {
return getTargetOption(target, 'position') || positionState;
};
var getMouseTrackPosition = function getMouseTrackPosition(target) {
var top = getTargetOption(target, 'mousetracktop') || props.mouseTrackTop;
var left = getTargetOption(target, 'mousetrackleft') || props.mouseTrackLeft;
return {
top: top,
left: left
};
};
var updateText = function updateText(target, callback) {
if (textRef.current) {
var content = getTargetOption(target, 'tooltip') || props.content;
if (content) {
textRef.current.innerHTML = ''; // remove children
textRef.current.appendChild(document.createTextNode(content));
callback();
} else if (props.children) {
callback();
}
}
};
var updateTooltipState = function updateTooltipState(position) {
updateText(currentTargetRef.current, function () {
var _currentMouseEvent$cu = currentMouseEvent.current,
x = _currentMouseEvent$cu.pageX,
y = _currentMouseEvent$cu.pageY;
if (props.autoZIndex && !ZIndexUtils.get(elementRef.current)) {
ZIndexUtils.set('tooltip', elementRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, props.baseZIndex || context && context.zIndex.tooltip || PrimeReact.zIndex.tooltip);
}
elementRef.current.style.left = '';
elementRef.current.style.top = '';
// GitHub #2695 disable pointer events when autohiding
if (isAutoHide()) {
elementRef.current.style.pointerEvents = 'none';
}
var mouseTrackCheck = isMouseTrack(currentTargetRef.current) || position === 'mouse';
if (mouseTrackCheck && !containerSize.current || mouseTrackCheck) {
containerSize.current = {
width: DomHandler.getOuterWidth(elementRef.current),
height: DomHandler.getOuterHeight(elementRef.current)
};
}
align(currentTargetRef.current, {
x: x,
y: y
}, position);
});
};
var show = function show(e) {
if (e.type && e.type === 'focus') setMultipleFocusEvents(true);
currentTargetRef.current = e.currentTarget;
var disabled = isDisabled(currentTargetRef.current);
var empty = isContentEmpty(isShowOnDisabled(currentTargetRef.current) && disabled ? currentTargetRef.current.firstChild : currentTargetRef.current);
if (empty || disabled) {
return;
}
currentMouseEvent.current = e;
if (visibleState) {
applyDelay('updateDelay', updateTooltipState);
} else {
// #2653 give the callback a chance to return false and not continue with display
var success = sendCallback(props.onBeforeShow, {
originalEvent: e,
target: currentTargetRef.current
});
if (success) {
applyDelay('showDelay', function () {
setVisibleState(true);
sendCallback(props.onShow, {
originalEvent: e,
target: currentTargetRef.current
});
});
}
}
};
var hide = function hide(e) {
if (e && e.type === 'blur') setMultipleFocusEvents(false);
clearTimeouts();
if (visibleState) {
var success = sendCallback(props.onBeforeHide, {
originalEvent: e,
target: currentTargetRef.current
});
if (success) {
applyDelay('hideDelay', function () {
if (!isAutoHide() && allowHide.current === false) {
return;
}
ZIndexUtils.clear(elementRef.current);
DomHandler.removeClass(elementRef.current, 'p-tooltip-active');
setVisibleState(false);
sendCallback(props.onHide, {
originalEvent: e,
target: currentTargetRef.current
});
});
}
} else if (!props.onBeforeHide && !getDelay('hideDelay')) {
// handles the case when visibleState change from mouseenter was queued and mouseleave handler was called earlier than queued re-render
setVisibleState(false);
}
};
var align = function align(target, coordinate, position) {
var left = 0;
var top = 0;
var currentPosition = position || positionState;
if ((isMouseTrack(target) || currentPosition == 'mouse') && coordinate) {
var _containerSize = {
width: DomHandler.getOuterWidth(elementRef.current),
height: DomHandler.getOuterHeight(elementRef.current)
};
left = coordinate.x;
top = coordinate.y;
var _getMouseTrackPositio = getMouseTrackPosition(target),
mouseTrackTop = _getMouseTrackPositio.top,
mouseTrackLeft = _getMouseTrackPositio.left;
switch (currentPosition) {
case 'left':
left = left - (_containerSize.width + mouseTrackLeft);
top = top - (_containerSize.height / 2 - mouseTrackTop);
break;
case 'right':
case 'mouse':
left = left + mouseTrackLeft;
top = top - (_containerSize.height / 2 - mouseTrackTop);
break;
case 'top':
left = left - (_containerSize.width / 2 - mouseTrackLeft);
top = top - (_containerSize.height + mouseTrackTop);
break;
case 'bottom':
left = left - (_containerSize.width / 2 - mouseTrackLeft);
top = top + mouseTrackTop;
break;
}
if (left <= 0 || containerSize.current.width > _containerSize.width) {
elementRef.current.style.left = '0px';
elementRef.current.style.right = window.innerWidth - _containerSize.width - left + 'px';
} else {
elementRef.current.style.right = '';
elementRef.current.style.left = left + 'px';
}
elementRef.current.style.top = top + 'px';
DomHandler.addClass(elementRef.current, 'p-tooltip-active');
} else {
var pos = DomHandler.findCollisionPosition(currentPosition);
var my = getTargetOption(target, 'my') || props.my || pos.my;
var at = getTargetOption(target, 'at') || props.at || pos.at;
elementRef.current.style.padding = '0px';
DomHandler.flipfitCollision(elementRef.current, target, my, at, function (calculatedPosition) {
var _calculatedPosition$a = calculatedPosition.at,
atX = _calculatedPosition$a.x,
atY = _calculatedPosition$a.y;
var myX = calculatedPosition.my.x;
var newPosition = props.at ? atX !== 'center' && atX !== myX ? atX : atY : calculatedPosition.at["".concat(pos.axis)];
elementRef.current.style.padding = '';
setPositionState(newPosition);
updateContainerPosition(newPosition);
DomHandler.addClass(elementRef.current, 'p-tooltip-active');
});
}
};
var updateContainerPosition = function updateContainerPosition(position) {
if (elementRef.current) {
var style = getComputedStyle(elementRef.current);
if (position === 'left') {
elementRef.current.style.left = parseFloat(style.left) - parseFloat(style.paddingLeft) * 2 + 'px';
} else if (position === 'top') {
elementRef.current.style.top = parseFloat(style.top) - parseFloat(style.paddingTop) * 2 + 'px';
}
}
};
var _onMouseEnter = function onMouseEnter() {
if (!isAutoHide()) {
allowHide.current = false;
}
};
var _onMouseLeave = function onMouseLeave(e) {
if (!isAutoHide()) {
allowHide.current = true;
hide(e);
}
};
var bindTargetEvent = function bindTargetEvent(target) {
if (target) {
var _getEvents = getEvents(target),
showEvents = _getEvents.showEvents,
hideEvents = _getEvents.hideEvents;
var currentTarget = getTarget(target);
showEvents.forEach(function (event) {
return currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.addEventListener(event, show);
});
hideEvents.forEach(function (event) {
return currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.addEventListener(event, hide);
});
}
};
var unbindTargetEvent = function unbindTargetEvent(target) {
if (target) {
var _getEvents2 = getEvents(target),
showEvents = _getEvents2.showEvents,
hideEvents = _getEvents2.hideEvents;
var currentTarget = getTarget(target);
showEvents.forEach(function (event) {
return currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.removeEventListener(event, show);
});
hideEvents.forEach(function (event) {
return currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.removeEventListener(event, hide);
});
}
};
var getDelay = function getDelay(delayProp) {
return getTargetOption(currentTargetRef.current, delayProp.toLowerCase()) || props[delayProp];
};
var applyDelay = function applyDelay(delayProp, callback) {
clearTimeouts();
var delay = getDelay(delayProp);
delay ? timeouts.current["".concat(delayProp)] = setTimeout(function () {
return callback();
}, delay) : callback();
};
var sendCallback = function sendCallback(callback) {
if (callback) {
for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
params[_key - 1] = arguments[_key];
}
var result = callback.apply(void 0, params);
if (result === undefined) {
result = true;
}
return result;
}
return true;
};
var clearTimeouts = function clearTimeouts() {
Object.values(timeouts.current).forEach(function (t) {
return clearTimeout(t);
});
};
var getTarget = function getTarget(target) {
if (target) {
if (isShowOnDisabled(target)) {
if (!target.hasWrapper) {
var wrapper = document.createElement('div');
var isInputElement = target.nodeName === 'INPUT';
if (isInputElement) {
DomHandler.addMultipleClasses(wrapper, 'p-tooltip-target-wrapper p-inputwrapper');
} else {
DomHandler.addClass(wrapper, 'p-tooltip-target-wrapper');
}
target.parentNode.insertBefore(wrapper, target);
wrapper.appendChild(target);
target.hasWrapper = true;
return wrapper;
}
return target.parentElement;
} else if (target.hasWrapper) {
var _target$parentElement;
(_target$parentElement = target.parentElement).replaceWith.apply(_target$parentElement, _toConsumableArray(target.parentElement.childNodes));
delete target.hasWrapper;
}
return target;
}
return null;
};
var updateTargetEvents = function updateTargetEvents(target) {
unloadTargetEvents(target);
loadTargetEvents(target);
};
var loadTargetEvents = function loadTargetEvents(target) {
setTargetEventOperations(target || props.target, bindTargetEvent);
};
var unloadTargetEvents = function unloadTargetEvents(target) {
setTargetEventOperations(target || props.target, unbindTargetEvent);
};
var setTargetEventOperations = function setTargetEventOperations(target, operation) {
target = ObjectUtils.getRefElement(target);
if (target) {
if (DomHandler.isElement(target)) {
operation(target);
} else {
var setEvent = function setEvent(target) {
var element = DomHandler.find(document, target);
element.forEach(function (el) {
operation(el);
});
};
if (target instanceof Array) {
target.forEach(function (t) {
setEvent(t);
});
} else {
setEvent(target);
}
}
}
};
useMountEffect(function () {
if (visibleState && currentTargetRef.current && isDisabled(currentTargetRef.current)) {
hide();
}
});
useUpdateEffect(function () {
loadTargetEvents();
return function () {
unloadTargetEvents();
};
}, [show, hide, props.target]);
useUpdateEffect(function () {
if (visibleState) {
var position = getPosition(currentTargetRef.current);
var classname = getTargetOption(currentTargetRef.current, 'classname');
setPositionState(position);
setClassNameState(classname);
updateTooltipState(position);
bindWindowResizeListener();
bindOverlayScrollListener();
} else {
setPositionState(props.position || 'right');
setClassNameState('');
currentTargetRef.current = null;
containerSize.current = null;
allowHide.current = true;
}
return function () {
unbindWindowResizeListener();
unbindOverlayScrollListener();
};
}, [visibleState]);
useUpdateEffect(function () {
var position = getPosition(currentTargetRef.current);
if (visibleState && position !== 'mouse') {
applyDelay('updateDelay', function () {
updateText(currentTargetRef.current, function () {
align(currentTargetRef.current);
});
});
}
}, [props.content]);
useUnmountEffect(function () {
hide();
ZIndexUtils.clear(elementRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
updateTargetEvents: updateTargetEvents,
loadTargetEvents: loadTargetEvents,
unloadTargetEvents: unloadTargetEvents,
show: show,
hide: hide,
getElement: function getElement() {
return elementRef.current;
},
getTarget: function getTarget() {
return currentTargetRef.current;
}
};
});
var createElement = function createElement() {
var empty = isTargetContentEmpty(currentTargetRef.current);
var rootProps = mergeProps({
id: props.id,
className: classNames(props.className, cx('root', {
positionState: positionState,
classNameState: classNameState
})),
style: props.style,
role: 'tooltip',
'aria-hidden': visibleState,
onMouseEnter: function onMouseEnter(e) {
return _onMouseEnter();
},
onMouseLeave: function onMouseLeave(e) {
return _onMouseLeave(e);
}
}, TooltipBase.getOtherProps(props), ptm('root'));
var arrowProps = mergeProps({
className: cx('arrow'),
style: sx('arrow', _objectSpread$1T({}, metaData))
}, ptm('arrow'));
var textProps = mergeProps({
className: cx('text')
}, ptm('text'));
return /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef
}, rootProps), /*#__PURE__*/React.createElement("div", arrowProps), /*#__PURE__*/React.createElement("div", _extends({
ref: textRef
}, textProps), empty && props.children));
};
if (visibleState) {
var element = createElement();
return /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo,
visible: true
});
}
return null;
}));
Tooltip.displayName = 'Tooltip';
var classes$1e = {
icon: function icon(_ref) {
var props = _ref.props;
return classNames('p-button-icon p-c', _defineProperty({}, "p-button-icon-".concat(props.iconPos), props.label));
},
loadingIcon: function loadingIcon(_ref2) {
var props = _ref2.props,
className = _ref2.className;
return classNames(className, {
'p-button-loading-icon': props.loading
});
},
label: 'p-button-label p-c',
root: function root(_ref3) {
var props = _ref3.props,
size = _ref3.size,
disabled = _ref3.disabled;
return classNames('p-button p-component', _defineProperty(_defineProperty(_defineProperty(_defineProperty({
'p-button-icon-only': (props.icon || props.loading) && !props.label && !props.children,
'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
'p-disabled': disabled,
'p-button-loading': props.loading,
'p-button-outlined': props.outlined,
'p-button-raised': props.raised,
'p-button-link': props.link,
'p-button-text': props.text,
'p-button-rounded': props.rounded,
'p-button-loading-label-only': props.loading && !props.icon && props.label
}, "p-button-loading-".concat(props.iconPos), props.loading && props.label), "p-button-".concat(size), size), "p-button-".concat(props.severity), props.severity), 'p-button-plain', props.plain));
}
};
var ButtonBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Button',
__parentMetadata: null,
badge: null,
badgeClassName: null,
className: null,
children: undefined,
disabled: false,
icon: null,
iconPos: 'left',
label: null,
link: false,
loading: false,
loadingIcon: null,
outlined: false,
plain: false,
raised: false,
rounded: false,
severity: null,
size: null,
text: false,
tooltip: null,
tooltipOptions: null,
visible: true
},
css: {
classes: classes$1e
}
});
function ownKeys$1S(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$1S(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1S(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1S(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Button = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = ButtonBase.getProps(inProps, context);
var disabled = props.disabled || props.loading;
var metaData = _objectSpread$1S(_objectSpread$1S({
props: props
}, props.__parentMetadata), {}, {
context: {
disabled: disabled
}
});
var _ButtonBase$setMetaDa = ButtonBase.setMetaData(metaData),
ptm = _ButtonBase$setMetaDa.ptm,
cx = _ButtonBase$setMetaDa.cx,
isUnstyled = _ButtonBase$setMetaDa.isUnstyled;
useHandleStyle(ButtonBase.css.styles, isUnstyled, {
name: 'button',
styled: true
});
var elementRef = React.useRef(ref);
React.useEffect(function () {
ObjectUtils.combinedRefs(elementRef, ref);
}, [elementRef, ref]);
if (props.visible === false) {
return null;
}
var createIcon = function createIcon() {
var className = classNames('p-button-icon p-c', _defineProperty({}, "p-button-icon-".concat(props.iconPos), props.label));
var iconsProps = mergeProps({
className: cx('icon')
}, ptm('icon'));
className = classNames(className, {
'p-button-loading-icon': props.loading
});
var loadingIconProps = mergeProps({
className: cx('loadingIcon', {
className: className
})
}, ptm('loadingIcon'));
var icon = props.loading ? props.loadingIcon || /*#__PURE__*/React.createElement(SpinnerIcon, _extends({}, loadingIconProps, {
spin: true
})) : props.icon;
return IconUtils.getJSXIcon(icon, _objectSpread$1S({}, iconsProps), {
props: props
});
};
var createLabel = function createLabel() {
var labelProps = mergeProps({
className: cx('label')
}, ptm('label'));
if (props.label) {
return /*#__PURE__*/React.createElement("span", labelProps, props.label);
}
return !props.children && !props.label && /*#__PURE__*/React.createElement("span", _extends({}, labelProps, {
dangerouslySetInnerHTML: {
__html: ' '
}
}));
};
var createBadge = function createBadge() {
if (props.badge) {
var badgeProps = mergeProps({
className: classNames(props.badgeClassName),
value: props.badge,
unstyled: props.unstyled,
__parentMetadata: {
parent: metaData
}
}, ptm('badge'));
return /*#__PURE__*/React.createElement(Badge, badgeProps, props.badge);
}
return null;
};
var showTooltip = !disabled || props.tooltipOptions && props.tooltipOptions.showOnDisabled;
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip) && showTooltip;
var sizeMapping = {
large: 'lg',
small: 'sm'
};
var size = sizeMapping[props.size];
var icon = createIcon();
var label = createLabel();
var badge = createBadge();
var defaultAriaLabel = props.label ? props.label + (props.badge ? ' ' + props.badge : '') : props['aria-label'];
var rootProps = mergeProps({
ref: elementRef,
'aria-label': defaultAriaLabel,
'data-pc-autofocus': props.autoFocus,
className: classNames(props.className, cx('root', {
size: size,
disabled: disabled
})),
disabled: disabled
}, ButtonBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", rootProps, icon, label, props.children, badge, /*#__PURE__*/React.createElement(Ripple, null)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip,
pt: ptm('tooltip')
}, props.tooltipOptions)));
}));
Button.displayName = 'Button';
var TimesCircleIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M7 14C5.61553 14 4.26215 13.5895 3.11101 12.8203C1.95987 12.0511 1.06266 10.9579 0.532846 9.67879C0.00303296 8.3997 -0.13559 6.99224 0.134506 5.63437C0.404603 4.2765 1.07129 3.02922 2.05026 2.05026C3.02922 1.07129 4.2765 0.404603 5.63437 0.134506C6.99224 -0.13559 8.3997 0.00303296 9.67879 0.532846C10.9579 1.06266 12.0511 1.95987 12.8203 3.11101C13.5895 4.26215 14 5.61553 14 7C14 8.85652 13.2625 10.637 11.9497 11.9497C10.637 13.2625 8.85652 14 7 14ZM7 1.16667C5.84628 1.16667 4.71846 1.50879 3.75918 2.14976C2.79989 2.79074 2.05222 3.70178 1.61071 4.76768C1.16919 5.83358 1.05367 7.00647 1.27876 8.13803C1.50384 9.26958 2.05941 10.309 2.87521 11.1248C3.69102 11.9406 4.73042 12.4962 5.86198 12.7212C6.99353 12.9463 8.16642 12.8308 9.23232 12.3893C10.2982 11.9478 11.2093 11.2001 11.8502 10.2408C12.4912 9.28154 12.8333 8.15373 12.8333 7C12.8333 5.45291 12.2188 3.96918 11.1248 2.87521C10.0308 1.78125 8.5471 1.16667 7 1.16667ZM4.66662 9.91668C4.58998 9.91704 4.51404 9.90209 4.44325 9.87271C4.37246 9.84333 4.30826 9.8001 4.2544 9.74557C4.14516 9.6362 4.0838 9.48793 4.0838 9.33335C4.0838 9.17876 4.14516 9.0305 4.2544 8.92113L6.17553 7L4.25443 5.07891C4.15139 4.96832 4.09529 4.82207 4.09796 4.67094C4.10063 4.51982 4.16185 4.37563 4.26872 4.26876C4.3756 4.16188 4.51979 4.10066 4.67091 4.09799C4.82204 4.09532 4.96829 4.15142 5.07887 4.25446L6.99997 6.17556L8.92106 4.25446C9.03164 4.15142 9.1779 4.09532 9.32903 4.09799C9.48015 4.10066 9.62434 4.16188 9.73121 4.26876C9.83809 4.37563 9.89931 4.51982 9.90198 4.67094C9.90464 4.82207 9.84855 4.96832 9.74551 5.07891L7.82441 7L9.74554 8.92113C9.85478 9.0305 9.91614 9.17876 9.91614 9.33335C9.91614 9.48793 9.85478 9.6362 9.74554 9.74557C9.69168 9.8001 9.62748 9.84333 9.55669 9.87271C9.4859 9.90209 9.40996 9.91704 9.33332 9.91668C9.25668 9.91704 9.18073 9.90209 9.10995 9.87271C9.03916 9.84333 8.97495 9.8001 8.9211 9.74557L6.99997 7.82444L5.07884 9.74557C5.02499 9.8001 4.96078 9.84333 4.88999 9.87271C4.81921 9.90209 4.74326 9.91704 4.66662 9.91668Z",
fill: "currentColor"
}));
}));
TimesCircleIcon.displayName = 'TimesCircleIcon';
var KeyFilter = {
/* eslint-disable */
DEFAULT_MASKS: {
pint: /[\d]/,
"int": /[\d\-]/,
pnum: /[\d\.]/,
money: /[\d\.\s,]/,
num: /[\d\-\.]/,
hex: /[0-9a-f]/i,
email: /[a-z0-9_\.\-@]/i,
alpha: /[a-z_]/i,
alphanum: /[a-z0-9_]/i
},
/* eslint-enable */getRegex: function getRegex(keyfilter) {
return KeyFilter.DEFAULT_MASKS[keyfilter] ? KeyFilter.DEFAULT_MASKS[keyfilter] : keyfilter;
},
onBeforeInput: function onBeforeInput(e, keyfilter, validateOnly) {
// android devices must use beforeinput https://stackoverflow.com/questions/36753548/keycode-on-android-is-always-229
if (validateOnly || !DomHandler.isAndroid()) {
return;
}
this.validateKey(e, e.data, keyfilter);
},
onKeyPress: function onKeyPress(e, keyfilter, validateOnly) {
// non android devices use keydown
if (validateOnly || DomHandler.isAndroid()) {
return;
}
if (e.ctrlKey || e.altKey || e.metaKey) {
return;
}
this.validateKey(e, e.key, keyfilter);
},
onPaste: function onPaste(e, keyfilter, validateOnly) {
if (validateOnly) {
return;
}
var regex = this.getRegex(keyfilter);
var clipboard = e.clipboardData.getData('text');
// loop over each letter pasted and if any fail prevent the paste
_toConsumableArray(clipboard).forEach(function (c) {
if (!regex.test(c)) {
e.preventDefault();
return false;
}
});
},
validateKey: function validateKey(e, key, keyfilter) {
if (key === null || key === undefined) {
return;
}
// some AZERTY keys come in with 2 chars like ´ç if Dead key is pressed first
var isPrintableKey = key.length <= 2;
if (!isPrintableKey) {
return;
}
var regex = this.getRegex(keyfilter);
if (!regex.test(key)) {
e.preventDefault();
}
},
validate: function validate(e, keyfilter) {
var value = e.target.value;
var validatePattern = true;
var regex = this.getRegex(keyfilter);
if (value && !regex.test(value)) {
validatePattern = false;
}
return validatePattern;
}
};
var classes$1d = {
root: function root(_ref) {
var props = _ref.props,
isFilled = _ref.isFilled,
context = _ref.context;
return classNames('p-inputtext p-component', {
'p-disabled': props.disabled,
'p-filled': isFilled,
'p-invalid': props.invalid,
'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
});
}
};
var InputTextBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'InputText',
__parentMetadata: null,
children: undefined,
className: null,
invalid: false,
variant: null,
keyfilter: null,
onBeforeInput: null,
onInput: null,
onKeyDown: null,
onPaste: null,
tooltip: null,
tooltipOptions: null,
validateOnly: false,
iconPosition: null
},
css: {
classes: classes$1d
}
});
function ownKeys$1R(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$1R(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1R(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1R(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var InputText = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = InputTextBase.getProps(inProps, context);
var _InputTextBase$setMet = InputTextBase.setMetaData(_objectSpread$1R(_objectSpread$1R({
props: props
}, props.__parentMetadata), {}, {
context: {
disabled: props.disabled,
iconPosition: props.iconPosition
}
})),
ptm = _InputTextBase$setMet.ptm,
cx = _InputTextBase$setMet.cx,
isUnstyled = _InputTextBase$setMet.isUnstyled;
useHandleStyle(InputTextBase.css.styles, isUnstyled, {
name: 'inputtext',
styled: true
});
var elementRef = React.useRef(ref);
var onKeyDown = function onKeyDown(event) {
props.onKeyDown && props.onKeyDown(event);
if (props.keyfilter) {
KeyFilter.onKeyPress(event, props.keyfilter, props.validateOnly);
}
};
var onBeforeInput = function onBeforeInput(event) {
props.onBeforeInput && props.onBeforeInput(event);
if (props.keyfilter) {
KeyFilter.onBeforeInput(event, props.keyfilter, props.validateOnly);
}
};
var onInput = function onInput(event) {
var target = event.target;
var validatePattern = true;
if (props.keyfilter && props.validateOnly) {
validatePattern = KeyFilter.validate(event, props.keyfilter);
}
props.onInput && props.onInput(event, validatePattern);
// for uncontrolled changes
ObjectUtils.isNotEmpty(target.value) ? DomHandler.addClass(target, 'p-filled') : DomHandler.removeClass(target, 'p-filled');
};
var onPaste = function onPaste(event) {
props.onPaste && props.onPaste(event);
if (props.keyfilter) {
KeyFilter.onPaste(event, props.keyfilter, props.validateOnly);
}
};
React.useEffect(function () {
ObjectUtils.combinedRefs(elementRef, ref);
}, [elementRef, ref]);
var isFilled = React.useMemo(function () {
return ObjectUtils.isNotEmpty(props.value) || ObjectUtils.isNotEmpty(props.defaultValue);
}, [props.value, props.defaultValue]);
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
React.useEffect(function () {
var _elementRef$current;
if (isFilled || (_elementRef$current = elementRef.current) !== null && _elementRef$current !== void 0 && _elementRef$current.value) {
DomHandler.addClass(elementRef.current, 'p-filled');
} else {
DomHandler.removeClass(elementRef.current, 'p-filled');
}
}, [props.disabled, isFilled]);
var rootProps = mergeProps({
className: classNames(props.className, cx('root', {
context: context,
isFilled: isFilled
})),
onBeforeInput: onBeforeInput,
onInput: onInput,
onKeyDown: onKeyDown,
onPaste: onPaste
}, InputTextBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({
ref: elementRef
}, rootProps)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip,
pt: ptm('tooltip')
}, props.tooltipOptions)));
}));
InputText.displayName = 'InputText';
var OverlayService = EventBus();
var classes$1c = {
root: function root(_ref) {
var props = _ref.props,
focusedState = _ref.focusedState;
return classNames('p-autocomplete p-component p-inputwrapper', {
'p-autocomplete-dd': props.dropdown,
'p-autocomplete-multiple': props.multiple,
'p-inputwrapper-filled': props.value,
'p-invalid': props.invalid,
'p-inputwrapper-focus': focusedState
});
},
container: function container(_ref2) {
var props = _ref2.props,
context = _ref2.context;
return classNames('p-autocomplete-multiple-container p-component p-inputtext', {
'p-disabled': props.disabled,
'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
});
},
loadingIcon: 'p-autocomplete-loader',
dropdownButton: 'p-autocomplete-dropdown',
removeTokenIcon: 'p-autocomplete-token-icon',
token: 'p-autocomplete-token p-highlight',
tokenLabel: 'p-autocomplete-token-label',
inputToken: 'p-autocomplete-input-token',
input: function input(_ref3) {
var props = _ref3.props,
context = _ref3.context;
return classNames('p-autocomplete-input', {
'p-autocomplete-dd-input': props.dropdown,
'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
});
},
panel: function panel(_ref4) {
var context = _ref4.context;
return classNames('p-autocomplete-panel p-component', {
'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
});
},
listWrapper: 'p-autocomplete-items-wrapper',
list: function list(_ref5) {
var virtualScrollerOptions = _ref5.virtualScrollerOptions,
options = _ref5.options;
return virtualScrollerOptions ? classNames('p-autocomplete-items', options.className) : 'p-autocomplete-items';
},
emptyMessage: 'p-autocomplete-item',
item: function item(_ref6) {
var suggestion = _ref6.suggestion,
optionGroupLabel = _ref6.optionGroupLabel,
selected = _ref6.selected;
return optionGroupLabel ? classNames('p-autocomplete-item', {
'p-disabled': suggestion.disabled
}, {
selected: selected
}) : classNames('p-autocomplete-item', {
'p-disabled': suggestion.disabled
}, {
'p-highlight': selected
});
},
itemGroup: 'p-autocomplete-item-group',
footer: 'p-autocomplete-footer',
transition: 'p-connected-overlay'
};
var styles$11 = "\n@layer primereact {\n .p-autocomplete {\n display: inline-flex;\n position: relative;\n }\n \n .p-autocomplete-loader {\n position: absolute;\n top: 50%;\n margin-top: -.5rem;\n }\n \n .p-autocomplete-dd .p-autocomplete-input {\n flex: 1 1 auto;\n width: 1%;\n }\n \n .p-autocomplete-dd .p-autocomplete-input,\n .p-autocomplete-dd .p-autocomplete-multiple-container {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n \n .p-autocomplete-dd .p-autocomplete-dropdown {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0px;\n }\n \n .p-autocomplete .p-autocomplete-panel {\n min-width: 100%;\n }\n \n .p-autocomplete-panel {\n position: absolute;\n top: 0;\n left: 0;\n }\n \n .p-autocomplete-items {\n margin: 0;\n padding: 0;\n list-style-type: none;\n }\n \n .p-autocomplete-item {\n cursor: pointer;\n white-space: nowrap;\n position: relative;\n overflow: hidden;\n }\n \n .p-autocomplete-multiple-container {\n margin: 0;\n padding: 0;\n list-style-type: none;\n cursor: text;\n overflow: hidden;\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n }\n \n .p-autocomplete-token {\n cursor: default;\n display: inline-flex;\n align-items: center;\n flex: 0 0 auto;\n }\n \n .p-autocomplete-token-icon {\n cursor: pointer;\n }\n \n .p-autocomplete-input-token {\n flex: 1 1 auto;\n display: inline-flex;\n }\n \n .p-autocomplete-input-token input {\n border: 0 none;\n outline: 0 none;\n background-color: transparent;\n margin: 0;\n padding: 0;\n box-shadow: none;\n border-radius: 0;\n width: 100%;\n }\n \n .p-fluid .p-autocomplete {\n display: flex;\n }\n \n .p-fluid .p-autocomplete-dd .p-autocomplete-input {\n width: 1%;\n }\n \n .p-autocomplete-items-wrapper {\n overflow: auto;\n } \n}\n";
var AutoCompleteBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'AutoComplete',
id: null,
appendTo: null,
autoFocus: false,
autoHighlight: false,
className: null,
completeMethod: null,
delay: 300,
disabled: false,
dropdown: false,
dropdownAriaLabel: null,
dropdownAutoFocus: true,
dropdownIcon: null,
dropdownMode: 'blank',
emptyMessage: null,
field: null,
forceSelection: false,
inputClassName: null,
inputId: null,
inputRef: null,
inputStyle: null,
variant: null,
invalid: false,
itemTemplate: null,
loadingIcon: null,
maxLength: null,
minLength: 1,
multiple: false,
name: null,
onBlur: null,
onChange: null,
onClear: null,
onClick: null,
onContextMenu: null,
onDblClick: null,
onDropdownClick: null,
onFocus: null,
onHide: null,
onKeyPress: null,
onKeyUp: null,
onMouseDown: null,
onSelect: null,
onShow: null,
onUnselect: null,
optionGroupChildren: null,
optionGroupLabel: null,
optionGroupTemplate: null,
panelClassName: null,
panelFooterTemplate: null,
panelStyle: null,
placeholder: null,
readOnly: false,
removeTokenIcon: null,
scrollHeight: '200px',
selectedItemTemplate: null,
selectionLimit: null,
showEmptyMessage: false,
size: null,
style: null,
suggestions: null,
tabIndex: null,
tooltip: null,
tooltipOptions: null,
transitionOptions: null,
type: 'text',
value: null,
virtualScrollerOptions: null,
children: undefined
},
css: {
classes: classes$1c,
styles: styles$11
}
});
var styles$10 = "\n.p-virtualscroller {\n position: relative;\n overflow: auto;\n contain: strict;\n transform: translateZ(0);\n will-change: scroll-position;\n outline: 0 none;\n}\n\n.p-virtualscroller-content {\n position: absolute;\n top: 0;\n left: 0;\n /*contain: content;*/\n min-height: 100%;\n min-width: 100%;\n will-change: transform;\n}\n\n.p-virtualscroller-spacer {\n position: absolute;\n top: 0;\n left: 0;\n height: 1px;\n width: 1px;\n transform-origin: 0 0;\n pointer-events: none;\n}\n\n.p-virtualscroller-loader {\n position: sticky;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n.p-virtualscroller-loader.p-component-overlay {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.p-virtualscroller-loading-icon {\n font-size: 2rem;\n}\n\n.p-virtualscroller-horizontal > .p-virtualscroller-content {\n display: flex;\n}\n\n/* Inline */\n.p-virtualscroller-inline .p-virtualscroller-content {\n position: static;\n}\n";
var VirtualScrollerBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'VirtualScroller',
__parentMetadata: null,
id: null,
style: null,
className: null,
tabIndex: 0,
items: null,
itemSize: 0,
scrollHeight: null,
scrollWidth: null,
orientation: 'vertical',
step: 0,
numToleratedItems: null,
delay: 0,
resizeDelay: 10,
appendOnly: false,
inline: false,
lazy: false,
disabled: false,
loaderDisabled: false,
loadingIcon: null,
columns: null,
loading: undefined,
autoSize: false,
showSpacer: true,
showLoader: false,
loadingTemplate: null,
loaderIconTemplate: null,
itemTemplate: null,
contentTemplate: null,
onScroll: null,
onScrollIndexChange: null,
onLazyLoad: null,
children: undefined
},
css: {
styles: styles$10
}
});
function ownKeys$1Q(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$1Q(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1Q(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1Q(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var VirtualScroller = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = VirtualScrollerBase.getProps(inProps, context);
var prevProps = usePrevious(inProps) || {};
var vertical = props.orientation === 'vertical';
var horizontal = props.orientation === 'horizontal';
var both = props.orientation === 'both';
var _React$useState = React.useState(both ? {
rows: 0,
cols: 0
} : 0),
_React$useState2 = _slicedToArray(_React$useState, 2),
firstState = _React$useState2[0],
setFirstState = _React$useState2[1];
var _React$useState3 = React.useState(both ? {
rows: 0,
cols: 0
} : 0),
_React$useState4 = _slicedToArray(_React$useState3, 2),
lastState = _React$useState4[0],
setLastState = _React$useState4[1];
var _React$useState5 = React.useState(0),
_React$useState6 = _slicedToArray(_React$useState5, 2),
pageState = _React$useState6[0],
setPageState = _React$useState6[1];
var _React$useState7 = React.useState(both ? {
rows: 0,
cols: 0
} : 0),
_React$useState8 = _slicedToArray(_React$useState7, 2),
numItemsInViewportState = _React$useState8[0],
setNumItemsInViewportState = _React$useState8[1];
var _React$useState9 = React.useState(props.numToleratedItems),
_React$useState10 = _slicedToArray(_React$useState9, 2),
numToleratedItemsState = _React$useState10[0],
setNumToleratedItemsState = _React$useState10[1];
var _React$useState11 = React.useState(props.loading || false),
_React$useState12 = _slicedToArray(_React$useState11, 2),
loadingState = _React$useState12[0],
setLoadingState = _React$useState12[1];
var _React$useState13 = React.useState([]),
_React$useState14 = _slicedToArray(_React$useState13, 2),
loaderArrState = _React$useState14[0],
setLoaderArrState = _React$useState14[1];
var _VirtualScrollerBase$ = VirtualScrollerBase.setMetaData({
props: props,
state: {
first: firstState,
last: lastState,
page: pageState,
numItemsInViewport: numItemsInViewportState,
numToleratedItems: numToleratedItemsState,
loading: loadingState,
loaderArr: loaderArrState
}
}),
ptm = _VirtualScrollerBase$.ptm;
useStyle(VirtualScrollerBase.css.styles, {
name: 'virtualscroller'
});
var elementRef = React.useRef(null);
var _contentRef = React.useRef(null);
var _spacerRef = React.useRef(null);
var _stickyRef = React.useRef(null);
var lastScrollPos = React.useRef(both ? {
top: 0,
left: 0
} : 0);
var scrollTimeout = React.useRef(null);
var resizeTimeout = React.useRef(null);
var contentStyle = React.useRef({});
var spacerStyle = React.useRef({});
var defaultWidth = React.useRef(null);
var defaultHeight = React.useRef(null);
var defaultContentWidth = React.useRef(null);
var defaultContentHeight = React.useRef(null);
var isItemRangeChanged = React.useRef(false);
var lazyLoadState = React.useRef(null);
var viewInitialized = React.useRef(false);
var _useResizeListener = useResizeListener({
listener: function listener(event) {
return onResize();
},
when: !props.disabled
}),
_useResizeListener2 = _slicedToArray(_useResizeListener, 1),
bindWindowResizeListener = _useResizeListener2[0];
var _useEventListener = useEventListener({
target: 'window',
type: 'orientationchange',
listener: function listener(event) {
return onResize();
},
when: !props.disabled
}),
_useEventListener2 = _slicedToArray(_useEventListener, 1),
bindOrientationChangeListener = _useEventListener2[0];
var getElementRef = function getElementRef() {
return elementRef;
};
var getPageByFirst = function getPageByFirst(first) {
return Math.floor((first + numToleratedItemsState * 4) / (props.step || 1));
};
var setContentElement = function setContentElement(element) {
_contentRef.current = element || _contentRef.current || DomHandler.findSingle(elementRef.current, '.p-virtualscroller-content');
};
var isPageChanged = function isPageChanged(first) {
return props.step ? pageState !== getPageByFirst(first) : true;
};
var scrollTo = function scrollTo(options) {
lastScrollPos.current = both ? {
top: 0,
left: 0
} : 0;
elementRef.current && elementRef.current.scrollTo(options);
};
var scrollToIndex = function scrollToIndex(index) {
var behavior = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto';
var _calculateNumItems = calculateNumItems(),
numToleratedItems = _calculateNumItems.numToleratedItems;
var contentPos = getContentPosition();
var calculateFirst = function calculateFirst() {
var _index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var _numT = arguments.length > 1 ? arguments[1] : undefined;
return _index <= _numT ? 0 : _index;
};
var calculateCoord = function calculateCoord(_first, _size, _cpos) {
return _first * _size + _cpos;
};
var scrollToItem = function scrollToItem() {
var left = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var top = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
return scrollTo({
left: left,
top: top,
behavior: behavior
});
};
var newFirst = both ? {
rows: 0,
cols: 0
} : 0;
var isRangeChanged = false;
if (both) {
newFirst = {
rows: calculateFirst(index[0], numToleratedItems[0]),
cols: calculateFirst(index[1], numToleratedItems[1])
};
scrollToItem(calculateCoord(newFirst.cols, props.itemSize[1], contentPos.left), calculateCoord(newFirst.rows, props.itemSize[0], contentPos.top));
isRangeChanged = firstState.rows !== newFirst.rows || firstState.cols !== newFirst.cols;
} else {
newFirst = calculateFirst(index, numToleratedItems);
horizontal ? scrollToItem(calculateCoord(newFirst, props.itemSize, contentPos.left), 0) : scrollToItem(0, calculateCoord(newFirst, props.itemSize, contentPos.top));
isRangeChanged = firstState !== newFirst;
}
isItemRangeChanged.current = isRangeChanged;
setFirstState(newFirst);
};
var scrollInView = function scrollInView(index, to) {
var behavior = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'auto';
if (to) {
var _getRenderedRange = getRenderedRange(),
first = _getRenderedRange.first,
viewport = _getRenderedRange.viewport;
var scrollToItem = function scrollToItem() {
var left = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var top = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
return scrollTo({
left: left,
top: top,
behavior: behavior
});
};
var isToStart = to === 'to-start';
var isToEnd = to === 'to-end';
if (isToStart) {
if (both) {
if (viewport.first.rows - first.rows > index[0]) {
scrollToItem(viewport.first.cols * props.itemSize[1], (viewport.first.rows - 1) * props.itemSize[0]);
} else if (viewport.first.cols - first.cols > index[1]) {
scrollToItem((viewport.first.cols - 1) * props.itemSize[1], viewport.first.rows * props.itemSize[0]);
}
} else if (viewport.first - first > index) {
var pos = (viewport.first - 1) * props.itemSize;
horizontal ? scrollToItem(pos, 0) : scrollToItem(0, pos);
}
} else if (isToEnd) {
if (both) {
if (viewport.last.rows - first.rows <= index[0] + 1) {
scrollToItem(viewport.first.cols * props.itemSize[1], (viewport.first.rows + 1) * props.itemSize[0]);
} else if (viewport.last.cols - first.cols <= index[1] + 1) {
scrollToItem((viewport.first.cols + 1) * props.itemSize[1], viewport.first.rows * props.itemSize[0]);
}
} else if (viewport.last - first <= index + 1) {
var _pos2 = (viewport.first + 1) * props.itemSize;
horizontal ? scrollToItem(_pos2, 0) : scrollToItem(0, _pos2);
}
}
} else {
scrollToIndex(index, behavior);
}
};
var getRows = function getRows() {
return loadingState ? props.loaderDisabled ? loaderArrState : [] : loadedItems();
};
var getColumns = function getColumns() {
if (props.columns && both || horizontal) {
return loadingState && props.loaderDisabled ? both ? loaderArrState[0] : loaderArrState : props.columns.slice(both ? firstState.cols : firstState, both ? lastState.cols : lastState);
}
return props.columns;
};
var getRenderedRange = function getRenderedRange() {
var calculateFirstInViewport = function calculateFirstInViewport(_pos, _size) {
return Math.floor(_pos / (_size || _pos));
};
var firstInViewport = firstState;
var lastInViewport = 0;
if (elementRef.current) {
var _elementRef$current = elementRef.current,
scrollTop = _elementRef$current.scrollTop,
scrollLeft = _elementRef$current.scrollLeft;
if (both) {
firstInViewport = {
rows: calculateFirstInViewport(scrollTop, props.itemSize[0]),
cols: calculateFirstInViewport(scrollLeft, props.itemSize[1])
};
lastInViewport = {
rows: firstInViewport.rows + numItemsInViewportState.rows,
cols: firstInViewport.cols + numItemsInViewportState.cols
};
} else {
var scrollPos = horizontal ? scrollLeft : scrollTop;
firstInViewport = calculateFirstInViewport(scrollPos, props.itemSize);
lastInViewport = firstInViewport + numItemsInViewportState;
}
}
return {
first: firstState,
last: lastState,
viewport: {
first: firstInViewport,
last: lastInViewport
}
};
};
var calculateNumItems = function calculateNumItems() {
var contentPos = getContentPosition();
var contentWidth = elementRef.current ? elementRef.current.offsetWidth - contentPos.left : 0;
var contentHeight = elementRef.current ? elementRef.current.offsetHeight - contentPos.top : 0;
var calculateNumItemsInViewport = function calculateNumItemsInViewport(_contentSize, _itemSize) {
return Math.ceil(_contentSize / (_itemSize || _contentSize));
};
var calculateNumToleratedItems = function calculateNumToleratedItems(_numItems) {
return Math.ceil(_numItems / 2);
};
var numItemsInViewport = both ? {
rows: calculateNumItemsInViewport(contentHeight, props.itemSize[0]),
cols: calculateNumItemsInViewport(contentWidth, props.itemSize[1])
} : calculateNumItemsInViewport(horizontal ? contentWidth : contentHeight, props.itemSize);
var numToleratedItems = numToleratedItemsState || (both ? [calculateNumToleratedItems(numItemsInViewport.rows), calculateNumToleratedItems(numItemsInViewport.cols)] : calculateNumToleratedItems(numItemsInViewport));
return {
numItemsInViewport: numItemsInViewport,
numToleratedItems: numToleratedItems
};
};
var calculateOptions = function calculateOptions() {
var _calculateNumItems2 = calculateNumItems(),
numItemsInViewport = _calculateNumItems2.numItemsInViewport,
numToleratedItems = _calculateNumItems2.numToleratedItems;
var calculateLast = function calculateLast(_first, _num, _numT) {
var _isCols = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
return getLast(_first + _num + (_first < _numT ? 2 : 3) * _numT, _isCols);
};
var last = both ? {
rows: calculateLast(firstState.rows, numItemsInViewport.rows, numToleratedItems[0]),
cols: calculateLast(firstState.cols, numItemsInViewport.cols, numToleratedItems[1], true)
} : calculateLast(firstState, numItemsInViewport, numToleratedItems);
setNumItemsInViewportState(numItemsInViewport);
setNumToleratedItemsState(numToleratedItems);
setLastState(last);
if (props.showLoader) {
setLoaderArrState(both ? Array.from({
length: numItemsInViewport.rows
}).map(function () {
return Array.from({
length: numItemsInViewport.cols
});
}) : Array.from({
length: numItemsInViewport
}));
}
if (props.lazy) {
Promise.resolve().then(function () {
lazyLoadState.current = {
first: props.step ? both ? {
rows: 0,
cols: firstState.cols
} : 0 : firstState,
last: Math.min(props.step ? props.step : last, (props.items || []).length)
};
props.onLazyLoad && props.onLazyLoad(lazyLoadState.current);
});
}
};
var calculateAutoSize = function calculateAutoSize(loading) {
if (props.autoSize && !loading) {
Promise.resolve().then(function () {
if (_contentRef.current) {
_contentRef.current.style.minHeight = _contentRef.current.style.minWidth = 'auto';
_contentRef.current.style.position = 'relative';
elementRef.current.style.contain = 'none';
/*const [contentWidth, contentHeight] = [DomHandler.getWidth(contentRef.current), DomHandler.getHeight(contentRef.current)];
contentWidth !== defaultContentWidth.current && (elementRef.current.style.width = '');
contentHeight !== defaultContentHeight.current && (elementRef.current.style.height = '');*/
var _ref = [DomHandler.getWidth(elementRef.current), DomHandler.getHeight(elementRef.current)],
width = _ref[0],
height = _ref[1];
(both || horizontal) && (elementRef.current.style.width = (width < defaultWidth.current ? width : props.scrollWidth || defaultWidth.current) + 'px');
(both || vertical) && (elementRef.current.style.height = (height < defaultHeight.current ? height : props.scrollHeight || defaultHeight.current) + 'px');
_contentRef.current.style.minHeight = _contentRef.current.style.minWidth = '';
_contentRef.current.style.position = '';
elementRef.current.style.contain = '';
}
});
}
};
var getLast = function getLast() {
var _ref2;
var last = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var isCols = arguments.length > 1 ? arguments[1] : undefined;
return props.items ? Math.min(isCols ? ((_ref2 = props.columns || props.items[0]) === null || _ref2 === void 0 ? void 0 : _ref2.length) || 0 : (props.items || []).length, last) : 0;
};
var getContentPosition = function getContentPosition() {
if (_contentRef.current) {
var style = getComputedStyle(_contentRef.current);
var left = parseFloat(style.paddingLeft) + Math.max(parseFloat(style.left) || 0, 0);
var right = parseFloat(style.paddingRight) + Math.max(parseFloat(style.right) || 0, 0);
var top = parseFloat(style.paddingTop) + Math.max(parseFloat(style.top) || 0, 0);
var bottom = parseFloat(style.paddingBottom) + Math.max(parseFloat(style.bottom) || 0, 0);
return {
left: left,
right: right,
top: top,
bottom: bottom,
x: left + right,
y: top + bottom
};
}
return {
left: 0,
right: 0,
top: 0,
bottom: 0,
x: 0,
y: 0
};
};
var setSize = function setSize() {
if (elementRef.current) {
var parentElement = elementRef.current.parentElement;
var width = props.scrollWidth || "".concat(elementRef.current.offsetWidth || parentElement.offsetWidth, "px");
var height = props.scrollHeight || "".concat(elementRef.current.offsetHeight || parentElement.offsetHeight, "px");
var setProp = function setProp(_name, _value) {
return elementRef.current.style[_name] = _value;
};
if (both || horizontal) {
setProp('height', height);
setProp('width', width);
} else {
setProp('height', height);
}
}
};
var setSpacerSize = function setSpacerSize() {
var items = props.items;
if (items) {
var contentPos = getContentPosition();
var setProp = function setProp(_name, _value, _size) {
var _cpos = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
return spacerStyle.current = _objectSpread$1Q(_objectSpread$1Q({}, spacerStyle.current), _defineProperty({}, "".concat(_name), (_value || []).length * _size + _cpos + 'px'));
};
if (both) {
setProp('height', items, props.itemSize[0], contentPos.y);
setProp('width', props.columns || items[1], props.itemSize[1], contentPos.x);
} else {
horizontal ? setProp('width', props.columns || items, props.itemSize, contentPos.x) : setProp('height', items, props.itemSize, contentPos.y);
}
}
};
var setContentPosition = function setContentPosition(pos) {
if (_contentRef.current && !props.appendOnly) {
var first = pos ? pos.first : firstState;
var calculateTranslateVal = function calculateTranslateVal(_first, _size) {
return _first * _size;
};
var setTransform = function setTransform() {
var _x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var _y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
_stickyRef.current && (_stickyRef.current.style.top = "-".concat(_y, "px"));
contentStyle.current = _objectSpread$1Q(_objectSpread$1Q({}, contentStyle.current), {
transform: "translate3d(".concat(_x, "px, ").concat(_y, "px, 0)")
});
};
if (both) {
setTransform(calculateTranslateVal(first.cols, props.itemSize[1]), calculateTranslateVal(first.rows, props.itemSize[0]));
} else {
var translateVal = calculateTranslateVal(first, props.itemSize);
horizontal ? setTransform(translateVal, 0) : setTransform(0, translateVal);
}
}
};
var onScrollPositionChange = function onScrollPositionChange(event) {
var target = event.target;
var contentPos = getContentPosition();
var calculateScrollPos = function calculateScrollPos(_pos, _cpos) {
return _pos ? _pos > _cpos ? _pos - _cpos : _pos : 0;
};
var calculateCurrentIndex = function calculateCurrentIndex(_pos, _size) {
return Math.floor(_pos / (_size || _pos));
};
var calculateTriggerIndex = function calculateTriggerIndex(_currentIndex, _first, _last, _num, _numT, _isScrollDownOrRight) {
return _currentIndex <= _numT ? _numT : _isScrollDownOrRight ? _last - _num - _numT : _first + _numT - 1;
};
var calculateFirst = function calculateFirst(_currentIndex, _triggerIndex, _first, _last, _num, _numT, _isScrollDownOrRight) {
if (_currentIndex <= _numT) {
return 0;
}
return Math.max(0, _isScrollDownOrRight ? _currentIndex < _triggerIndex ? _first : _currentIndex - _numT : _currentIndex > _triggerIndex ? _first : _currentIndex - 2 * _numT);
};
var calculateLast = function calculateLast(_currentIndex, _first, _last, _num, _numT, _isCols) {
var lastValue = _first + _num + 2 * _numT;
if (_currentIndex >= _numT) {
lastValue = lastValue + (_numT + 1);
}
return getLast(lastValue, _isCols);
};
var scrollTop = calculateScrollPos(target.scrollTop, contentPos.top);
var scrollLeft = calculateScrollPos(target.scrollLeft, contentPos.left);
var newFirst = both ? {
rows: 0,
cols: 0
} : 0;
var newLast = lastState;
var isRangeChanged = false;
var newScrollPos = lastScrollPos.current;
if (both) {
var isScrollDown = lastScrollPos.current.top <= scrollTop;
var isScrollRight = lastScrollPos.current.left <= scrollLeft;
if (!props.appendOnly || props.appendOnly && (isScrollDown || isScrollRight)) {
var currentIndex = {
rows: calculateCurrentIndex(scrollTop, props.itemSize[0]),
cols: calculateCurrentIndex(scrollLeft, props.itemSize[1])
};
var triggerIndex = {
rows: calculateTriggerIndex(currentIndex.rows, firstState.rows, lastState.rows, numItemsInViewportState.rows, numToleratedItemsState[0], isScrollDown),
cols: calculateTriggerIndex(currentIndex.cols, firstState.cols, lastState.cols, numItemsInViewportState.cols, numToleratedItemsState[1], isScrollRight)
};
newFirst = {
rows: calculateFirst(currentIndex.rows, triggerIndex.rows, firstState.rows, lastState.rows, numItemsInViewportState.rows, numToleratedItemsState[0], isScrollDown),
cols: calculateFirst(currentIndex.cols, triggerIndex.cols, firstState.cols, lastState.cols, numItemsInViewportState.cols, numToleratedItemsState[1], isScrollRight)
};
newLast = {
rows: calculateLast(currentIndex.rows, newFirst.rows, lastState.rows, numItemsInViewportState.rows, numToleratedItemsState[0]),
cols: calculateLast(currentIndex.cols, newFirst.cols, lastState.cols, numItemsInViewportState.cols, numToleratedItemsState[1], true)
};
isRangeChanged = newFirst.rows !== firstState.rows || newLast.rows !== lastState.rows || newFirst.cols !== firstState.cols || newLast.cols !== lastState.cols || isItemRangeChanged.current;
newScrollPos = {
top: scrollTop,
left: scrollLeft
};
}
} else {
var scrollPos = horizontal ? scrollLeft : scrollTop;
var isScrollDownOrRight = lastScrollPos.current <= scrollPos;
if (!props.appendOnly || props.appendOnly && isScrollDownOrRight) {
var _currentIndex2 = calculateCurrentIndex(scrollPos, props.itemSize);
var _triggerIndex2 = calculateTriggerIndex(_currentIndex2, firstState, lastState, numItemsInViewportState, numToleratedItemsState, isScrollDownOrRight);
newFirst = calculateFirst(_currentIndex2, _triggerIndex2, firstState, lastState, numItemsInViewportState, numToleratedItemsState, isScrollDownOrRight);
newLast = calculateLast(_currentIndex2, newFirst, lastState, numItemsInViewportState, numToleratedItemsState);
isRangeChanged = newFirst !== firstState || newLast !== lastState || isItemRangeChanged.current;
newScrollPos = scrollPos;
}
}
return {
first: newFirst,
last: newLast,
isRangeChanged: isRangeChanged,
scrollPos: newScrollPos
};
};
var onScrollChange = function onScrollChange(event) {
var _onScrollPositionChan = onScrollPositionChange(event),
first = _onScrollPositionChan.first,
last = _onScrollPositionChan.last,
isRangeChanged = _onScrollPositionChan.isRangeChanged,
scrollPos = _onScrollPositionChan.scrollPos;
if (isRangeChanged) {
var newState = {
first: first,
last: last
};
setContentPosition(newState);
setFirstState(first);
setLastState(last);
lastScrollPos.current = scrollPos;
props.onScrollIndexChange && props.onScrollIndexChange(newState);
if (props.lazy && isPageChanged(first)) {
var newLazyLoadState = {
first: props.step ? Math.min(getPageByFirst(first) * props.step, (props.items || []).length - props.step) : first,
last: Math.min(props.step ? (getPageByFirst(first) + 1) * props.step : last, (props.items || []).length)
};
var isLazyStateChanged = !lazyLoadState.current || lazyLoadState.current.first !== newLazyLoadState.first || lazyLoadState.current.last !== newLazyLoadState.last;
isLazyStateChanged && props.onLazyLoad && props.onLazyLoad(newLazyLoadState);
lazyLoadState.current = newLazyLoadState;
}
}
};
var _onScroll = function onScroll(event) {
props.onScroll && props.onScroll(event);
if (props.delay) {
if (scrollTimeout.current) {
clearTimeout(scrollTimeout.current);
}
if (isPageChanged(firstState)) {
if (!loadingState && props.showLoader) {
var _onScrollPositionChan2 = onScrollPositionChange(event),
isRangeChanged = _onScrollPositionChan2.isRangeChanged;
var changed = isRangeChanged || (props.step ? isPageChanged(firstState) : false);
changed && setLoadingState(true);
}
scrollTimeout.current = setTimeout(function () {
onScrollChange(event);
if (loadingState && props.showLoader && (!props.lazy || props.loading === undefined)) {
setLoadingState(false);
setPageState(getPageByFirst(firstState));
}
}, props.delay);
}
} else {
onScrollChange(event);
}
};
var onResize = function onResize() {
if (resizeTimeout.current) {
clearTimeout(resizeTimeout.current);
}
resizeTimeout.current = setTimeout(function () {
if (elementRef.current) {
var _ref3 = [DomHandler.getWidth(elementRef.current), DomHandler.getHeight(elementRef.current)],
width = _ref3[0],
height = _ref3[1];
var isDiffWidth = width !== defaultWidth.current,
isDiffHeight = height !== defaultHeight.current;
var reinit = both ? isDiffWidth || isDiffHeight : horizontal ? isDiffWidth : vertical ? isDiffHeight : false;
if (reinit) {
setNumToleratedItemsState(props.numToleratedItems);
defaultWidth.current = width;
defaultHeight.current = height;
defaultContentWidth.current = DomHandler.getWidth(_contentRef.current);
defaultContentHeight.current = DomHandler.getHeight(_contentRef.current);
}
}
}, props.resizeDelay);
};
var getOptions = function getOptions(renderedIndex) {
var count = (props.items || []).length;
var index = both ? firstState.rows + renderedIndex : firstState + renderedIndex;
return {
index: index,
count: count,
first: index === 0,
last: index === count - 1,
even: index % 2 === 0,
odd: index % 2 !== 0,
props: props
};
};
var loaderOptions = function loaderOptions(index, extOptions) {
var count = loaderArrState.length || 0;
return _objectSpread$1Q({
index: index,
count: count,
first: index === 0,
last: index === count - 1,
even: index % 2 === 0,
odd: index % 2 !== 0,
props: props
}, extOptions);
};
var loadedItems = function loadedItems() {
var items = props.items;
if (items && !loadingState) {
if (both) {
return items.slice(props.appendOnly ? 0 : firstState.rows, lastState.rows).map(function (item) {
return props.columns ? item : item.slice(props.appendOnly ? 0 : firstState.cols, lastState.cols);
});
} else if (horizontal && props.columns) {
return items;
}
return items.slice(props.appendOnly ? 0 : firstState, lastState);
}
return [];
};
var viewInit = function viewInit() {
if (elementRef.current && isVisible()) {
setContentElement(_contentRef.current);
init();
bindWindowResizeListener();
bindOrientationChangeListener();
defaultWidth.current = DomHandler.getWidth(elementRef.current);
defaultHeight.current = DomHandler.getHeight(elementRef.current);
defaultContentWidth.current = DomHandler.getWidth(_contentRef.current);
defaultContentHeight.current = DomHandler.getHeight(_contentRef.current);
}
};
var init = function init() {
if (!props.disabled && isVisible()) {
setSize();
calculateOptions();
setSpacerSize();
}
};
var isVisible = function isVisible() {
if (DomHandler.isVisible(elementRef.current)) {
var rect = elementRef.current.getBoundingClientRect();
return rect.width > 0 && rect.height > 0;
}
return false;
};
React.useEffect(function () {
if (!viewInitialized.current && isVisible()) {
viewInit();
viewInitialized.current = true;
}
});
useUpdateEffect(function () {
init();
}, [props.itemSize, props.scrollHeight, props.scrollWidth]);
useUpdateEffect(function () {
if (props.numToleratedItems !== numToleratedItemsState) {
setNumToleratedItemsState(props.numToleratedItems);
}
}, [props.numToleratedItems]);
useUpdateEffect(function () {
if (props.numToleratedItems === numToleratedItemsState) {
init(); // reinit after resizing
}
}, [numToleratedItemsState]);
useUpdateEffect(function () {
// Check if the previous/current rows array exists
var prevRowsExist = prevProps.items !== undefined && prevProps.items !== null;
var currentRowsExist = props.items !== undefined && props.items !== null;
// Get the length of the previous/current rows array, or 0 if it doesn't exist
var prevRowsLength = prevRowsExist ? prevProps.items.length : 0;
var currentRowsLength = currentRowsExist ? props.items.length : 0;
// Check if the length of the rows arrays has changed
var valuesChanged = prevRowsLength !== currentRowsLength;
// If both is true, we also need to check the lengths of the first element (assuming it's a matrix)
if (both && !valuesChanged) {
// Get the length of the columns or 0
var prevColumnsLength = prevRowsExist && prevProps.items.length > 0 ? prevProps.items[0].length : 0;
var currentColumnsLength = currentRowsExist && props.items.length > 0 ? props.items[0].length : 0;
// Check if the length of the columns has changed
valuesChanged = prevColumnsLength !== currentColumnsLength;
}
// If the previous items array doesn't exist or if any values have changed, call the init function
if (!prevRowsExist || valuesChanged) {
init();
}
var loading = loadingState;
if (props.lazy && prevProps.loading !== props.loading && props.loading !== loadingState) {
setLoadingState(props.loading);
loading = props.loading;
}
calculateAutoSize(loading);
});
useUpdateEffect(function () {
lastScrollPos.current = both ? {
top: 0,
left: 0
} : 0;
}, [props.orientation]);
React.useImperativeHandle(ref, function () {
return {
props: props,
getElementRef: getElementRef,
scrollTo: scrollTo,
scrollToIndex: scrollToIndex,
scrollInView: scrollInView,
getRenderedRange: getRenderedRange
};
});
var createLoaderItem = function createLoaderItem(index) {
var extOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var options = loaderOptions(index, extOptions);
var content = ObjectUtils.getJSXElement(props.loadingTemplate, options);
return /*#__PURE__*/React.createElement(React.Fragment, {
key: index
}, content);
};
var createLoader = function createLoader() {
var iconClassName = 'p-virtualscroller-loading-icon';
var loadingIconProps = mergeProps({
className: iconClassName
}, ptm('loadingIcon'));
var icon = props.loadingIcon || /*#__PURE__*/React.createElement(SpinnerIcon, _extends({}, loadingIconProps, {
spin: true
}));
var loadingIcon = IconUtils.getJSXIcon(icon, _objectSpread$1Q({}, loadingIconProps), {
props: props
});
if (!props.loaderDisabled && props.showLoader && loadingState) {
var _className = classNames('p-virtualscroller-loader', {
'p-component-overlay': !props.loadingTemplate
});
var _content = loadingIcon;
if (props.loadingTemplate) {
_content = loaderArrState.map(function (_, index) {
return createLoaderItem(index, both && {
numCols: numItemsInViewportState.cols
});
});
} else if (props.loaderIconTemplate) {
var defaultContentOptions = {
iconClassName: iconClassName,
element: _content,
props: props
};
_content = ObjectUtils.getJSXElement(props.loaderIconTemplate, defaultContentOptions);
}
var loaderProps = mergeProps({
className: _className
}, ptm('loader'));
return /*#__PURE__*/React.createElement("div", loaderProps, _content);
}
return null;
};
var createSpacer = function createSpacer() {
if (props.showSpacer) {
var spacerProps = mergeProps({
ref: _spacerRef,
style: spacerStyle.current,
className: 'p-virtualscroller-spacer'
}, ptm('spacer'));
return /*#__PURE__*/React.createElement("div", spacerProps);
}
return null;
};
var createItem = function createItem(item, index) {
var options = getOptions(index);
var content = ObjectUtils.getJSXElement(props.itemTemplate, item, options);
return /*#__PURE__*/React.createElement(React.Fragment, {
key: options.index
}, content);
};
var createItems = function createItems() {
var items = loadedItems();
return items.map(createItem);
};
var createContent = function createContent() {
var items = createItems();
var className = classNames('p-virtualscroller-content', {
'p-virtualscroller-loading': loadingState
});
var contentProps = mergeProps({
ref: _contentRef,
style: contentStyle.current,
className: className
}, ptm('content'));
var content = /*#__PURE__*/React.createElement("div", contentProps, items);
if (props.contentTemplate) {
var defaultOptions = {
style: contentStyle.current,
className: className,
spacerStyle: spacerStyle.current,
contentRef: function contentRef(el) {
return _contentRef.current = ObjectUtils.getRefElement(el);
},
spacerRef: function spacerRef(el) {
return _spacerRef.current = ObjectUtils.getRefElement(el);
},
stickyRef: function stickyRef(el) {
return _stickyRef.current = ObjectUtils.getRefElement(el);
},
items: loadedItems(),
getItemOptions: function getItemOptions(index) {
return getOptions(index);
},
children: items,
element: content,
props: props,
loading: loadingState,
getLoaderOptions: function getLoaderOptions(index, ext) {
return loaderOptions(index, ext);
},
loadingTemplate: props.loadingTemplate,
itemSize: props.itemSize,
rows: getRows(),
columns: getColumns(),
vertical: vertical,
horizontal: horizontal,
both: both
};
return ObjectUtils.getJSXElement(props.contentTemplate, defaultOptions);
}
return content;
};
if (props.disabled) {
var _content2 = ObjectUtils.getJSXElement(props.contentTemplate, {
items: props.items,
rows: props.items,
columns: props.columns
});
return /*#__PURE__*/React.createElement(React.Fragment, null, props.children, _content2);
}
var className = classNames('p-virtualscroller', {
'p-virtualscroller-inline': props.inline,
'p-virtualscroller-both p-both-scroll': both,
'p-virtualscroller-horizontal p-horizontal-scroll': horizontal
}, props.className);
var loader = createLoader();
var content = createContent();
var spacer = createSpacer();
var rootProps = mergeProps({
ref: elementRef,
className: className,
tabIndex: props.tabIndex,
style: props.style,
onScroll: function onScroll(e) {
return _onScroll(e);
}
}, VirtualScrollerBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("div", rootProps, content, spacer, loader);
}));
VirtualScroller.displayName = 'VirtualScroller';
function ownKeys$1P(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$1P(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1P(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1P(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var AutoCompletePanel = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (props, ref) {
var mergeProps = useMergeProps();
var ptm = props.ptm,
cx = props.cx;
var context = React.useContext(PrimeReactContext);
var _ptm = function _ptm(key, options) {
return ptm(key, _objectSpread$1P({
hostName: props.hostName
}, options));
};
var getPTOptions = function getPTOptions(item, key) {
return _ptm(key, {
context: {
selected: props.selectedItem.current === item,
disabled: item.disabled
}
});
};
var getOptionGroupRenderKey = function getOptionGroupRenderKey(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
};
var getOptionRenderKey = function getOptionRenderKey(option) {
return ObjectUtils.resolveFieldData(option, props.field);
};
var createFooter = function createFooter() {
if (props.panelFooterTemplate) {
var content = ObjectUtils.getJSXElement(props.panelFooterTemplate, props, props.onOverlayHide);
var footerProps = mergeProps({
className: cx('footer')
}, _ptm('footer'));
return /*#__PURE__*/React.createElement("div", footerProps, content);
}
return null;
};
var findKeyIndex = function findKeyIndex(array, key, value) {
return array.findIndex(function (obj) {
return obj[key] === value;
});
};
var latestKey = React.useRef({
key: null,
index: 0,
keyIndex: 0
});
var createLabelItem = function createLabelItem(item, key, index, labelItemProps) {
var content = props.optionGroupTemplate ? ObjectUtils.getJSXElement(props.optionGroupTemplate, item, index) : props.getOptionGroupLabel(item) || item;
var itemGroupProps = mergeProps(_objectSpread$1P({
index: index,
className: cx('itemGroup'),
'data-p-highlight': false
}, labelItemProps), _ptm('itemGroup'));
return /*#__PURE__*/React.createElement("li", _extends({}, itemGroupProps, {
key: key ? key : null
}), content);
};
var isOptionSelected = function isOptionSelected(item) {
if (props.selectedItem && props.selectedItem.current && Array.isArray(props.selectedItem.current)) {
return props.selectedItem.current.some(function (selectedItem) {
return ObjectUtils.deepEquals(selectedItem, item);
});
} else {
return ObjectUtils.deepEquals(props.selectedItem.current, item);
}
};
var createListItem = function createListItem(item, key, index, listItemProps) {
var selected = isOptionSelected(item);
var content = props.itemTemplate ? ObjectUtils.getJSXElement(props.itemTemplate, item, index) : props.field ? ObjectUtils.resolveFieldData(item, props.field) : item;
var itemProps = mergeProps(_objectSpread$1P({
index: index,
role: 'option',
className: cx('item', {
optionGroupLabel: props.optionGroupLabel,
suggestion: item,
selected: selected
}),
onClick: function onClick(e) {
return props.onItemClick(e, item);
},
'aria-selected': selected
}, listItemProps), getPTOptions(item, 'item'));
return /*#__PURE__*/React.createElement("li", _extends({
key: key
}, itemProps), content, /*#__PURE__*/React.createElement(Ripple, null));
};
var createGroupChildren = function createGroupChildren(optionGroup, i) {
var groupChildren = props.getOptionGroupChildren(optionGroup);
return groupChildren.map(function (item, j) {
var key = i + '_' + j;
var itemProps = mergeProps({
'data-group': i,
'data-index': j,
'data-p-disabled': item.disabled
});
return createListItem(item, key, j, itemProps);
});
};
var createItem = function createItem(suggestion, index) {
var scrollerOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var style = {
height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined
};
if (props.optionGroupLabel) {
if (props.virtualScrollerOptions) {
var keyIndex = findKeyIndex(props.suggestions, props.optionGroupLabel, suggestion);
if (keyIndex !== -1) {
latestKey.current = {
key: suggestion,
index: index,
keyIndex: keyIndex
};
var _key = index + '_' + getOptionGroupRenderKey(suggestion);
return createLabelItem(suggestion, _key, index, {
style: style
});
}
var _key2 = index + '_' + latestKey.current.keyIndex;
var _itemProps = mergeProps({
style: style,
'data-group': latestKey.current.keyIndex,
'data-index': index - latestKey.current.index - 1,
'data-p-disabled': suggestion.disabled
});
return createListItem(suggestion, _key2, index, _itemProps);
}
var childrenContent = createGroupChildren(suggestion, index);
var _key3 = index + '_' + getOptionGroupRenderKey(suggestion);
return /*#__PURE__*/React.createElement(React.Fragment, {
key: _key3
}, createLabelItem(suggestion, undefined, index, {
style: style
}), childrenContent);
}
var key = "".concat(index, "_").concat(ObjectUtils.isObject(suggestion) ? getOptionRenderKey(suggestion) : suggestion);
var itemProps = mergeProps({
style: style,
'data-p-disabled': suggestion.disabled
}, getPTOptions(suggestion, 'item'));
return createListItem(suggestion, key, index, itemProps);
};
var createItems = function createItems() {
return props.suggestions ? props.suggestions.map(createItem) : null;
};
var flattenGroupedItems = function flattenGroupedItems(items) {
try {
return items === null || items === void 0 ? void 0 : items.map(function (item) {
return [item === null || item === void 0 ? void 0 : item[props === null || props === void 0 ? void 0 : props.optionGroupLabel]].concat(_toConsumableArray(item === null || item === void 0 ? void 0 : item[props === null || props === void 0 ? void 0 : props.optionGroupChildren]));
}).flat();
} catch (e) {}
};
var createContent = function createContent() {
if (props.showEmptyMessage && ObjectUtils.isEmpty(props.suggestions)) {
var emptyMessage = props.emptyMessage || localeOption('emptyMessage');
var emptyMessageProps = mergeProps({
className: cx('emptyMessage')
}, _ptm('emptyMessage'));
var _listProps = mergeProps({
className: cx('list')
}, _ptm('list'));
return /*#__PURE__*/React.createElement("ul", _listProps, /*#__PURE__*/React.createElement("li", emptyMessageProps, emptyMessage));
}
if (props.virtualScrollerOptions) {
var _items = props.suggestions ? props.optionGroupLabel ? flattenGroupedItems(props === null || props === void 0 ? void 0 : props.suggestions) : props.suggestions : null;
var virtualScrollerProps = _objectSpread$1P(_objectSpread$1P({}, props.virtualScrollerOptions), {
style: _objectSpread$1P(_objectSpread$1P({}, props.virtualScrollerOptions.style), {
height: props.scrollHeight
}),
autoSize: true,
items: _items,
itemTemplate: function itemTemplate(item, options) {
return item && createItem(item, options.index, options);
},
contentTemplate: function contentTemplate(options) {
var listProps = mergeProps({
id: props.listId,
ref: options.contentRef,
style: options.style,
className: cx('list', {
virtualScrollerProps: virtualScrollerProps,
options: options
}),
role: 'listbox'
}, _ptm('list'));
return /*#__PURE__*/React.createElement("ul", listProps, options.children);
}
});
return /*#__PURE__*/React.createElement(VirtualScroller, _extends({
ref: props.virtualScrollerRef
}, virtualScrollerProps, {
pt: _ptm('virtualScroller'),
__parentMetadata: {
parent: props.metaData
}
}));
}
var items = createItems();
var listProps = mergeProps({
id: props.listId,
className: cx('list'),
role: 'listbox'
}, _ptm('list'));
var listWrapperProps = mergeProps({
className: cx('listWrapper'),
style: {
maxHeight: props.scrollHeight || 'auto'
}
}, _ptm('listWrapper'));
return /*#__PURE__*/React.createElement("div", listWrapperProps, /*#__PURE__*/React.createElement("ul", listProps, items));
};
var createElement = function createElement() {
var style = _objectSpread$1P({}, props.panelStyle || {});
var content = createContent();
var footer = createFooter();
var panelProps = mergeProps({
className: classNames(props.panelClassName, cx('panel', {
context: context
})),
style: style,
onClick: function onClick(e) {
return props.onClick(e);
},
'data-pr-is-overlay': true
}, _ptm('panel'));
var transitionProps = mergeProps({
classNames: cx('transition'),
"in": props["in"],
timeout: {
enter: 120,
exit: 100
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: props.onEnter,
onEntering: props.onEntering,
onEntered: props.onEntered,
onExit: props.onExit,
onExited: props.onExited
}, _ptm('transition'));
return /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: ref
}, transitionProps), /*#__PURE__*/React.createElement("div", _extends({
ref: ref
}, panelProps), content, footer));
};
var element = createElement();
return /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo
});
}));
AutoCompletePanel.displayName = 'AutoCompletePanel';
function ownKeys$1O(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$1O(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1O(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1O(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var AutoComplete = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = AutoCompleteBase.getProps(inProps, context);
var _React$useState = React.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
searchingState = _React$useState4[0],
setSearchingState = _React$useState4[1];
var _React$useState5 = React.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
focusedState = _React$useState6[0],
setFocusedState = _React$useState6[1];
var _React$useState7 = React.useState(false),
_React$useState8 = _slicedToArray(_React$useState7, 2),
overlayVisibleState = _React$useState8[0],
setOverlayVisibleState = _React$useState8[1];
var metaData = {
props: props,
state: {
id: idState,
searching: searchingState,
focused: focusedState,
overlayVisible: overlayVisibleState
}
};
var _AutoCompleteBase$set = AutoCompleteBase.setMetaData(metaData),
ptm = _AutoCompleteBase$set.ptm,
cx = _AutoCompleteBase$set.cx,
sx = _AutoCompleteBase$set.sx,
isUnstyled = _AutoCompleteBase$set.isUnstyled;
useHandleStyle(AutoCompleteBase.css.styles, isUnstyled, {
name: 'autocomplete'
});
var elementRef = React.useRef(null);
var overlayRef = React.useRef(null);
var inputRef = React.useRef(props.inputRef);
var multiContainerRef = React.useRef(null);
var virtualScrollerRef = React.useRef(null);
var timeout = React.useRef(null);
var selectedItem = React.useRef(null);
var _useOverlayListener = useOverlayListener({
target: elementRef,
overlay: overlayRef,
listener: function listener(event, _ref) {
var type = _ref.type,
valid = _ref.valid;
if (valid) {
if (type === 'outside') {
if (!isInputClicked(event)) {
hide();
}
} else if (context.hideOverlaysOnDocumentScrolling) {
hide();
} else if (!DomHandler.isDocument(event.target)) {
alignOverlay();
}
}
},
when: overlayVisibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var isInputClicked = function isInputClicked(event) {
return props.multiple ? event.target === multiContainerRef.current || multiContainerRef.current.contains(event.target) : event.target === inputRef.current;
};
var onInputChange = function onInputChange(event) {
//Cancel the search request if user types within the timeout
if (timeout.current) {
clearTimeout(timeout.current);
}
var query = event.target.value;
if (!props.multiple) {
updateModel(event, query);
}
if (ObjectUtils.isEmpty(query)) {
hide();
props.onClear && props.onClear(event);
} else if (query.length >= props.minLength) {
timeout.current = setTimeout(function () {
search(event, query, 'input');
}, props.delay);
} else {
hide();
}
};
var search = function search(event, query, source) {
//allow empty string but not undefined or null
if (query === undefined || query === null) {
return;
}
//do not search blank values on input change
if (source === 'input' && query.trim().length === 0) {
return;
}
if (props.completeMethod) {
setSearchingState(true);
props.completeMethod({
originalEvent: event,
query: query
});
}
};
var selectItem = function selectItem(event, option, preventInputFocus) {
if (props.multiple) {
inputRef.current.value = '';
// allows empty value/selectionlimit and within sectionlimit
if (!isSelected(option) && isAllowMoreValues()) {
var newValue = props.value ? [].concat(_toConsumableArray(props.value), [option]) : [option];
updateModel(event, newValue);
}
} else {
updateInputField(option);
updateModel(event, option);
}
if (props.onSelect) {
props.onSelect({
originalEvent: event,
value: option
});
}
if (!preventInputFocus) {
DomHandler.focus(inputRef.current);
hide();
}
};
var updateModel = function updateModel(event, value) {
if (props.onChange) {
props.onChange({
originalEvent: event,
value: value,
stopPropagation: function stopPropagation() {
event.stopPropagation();
},
preventDefault: function preventDefault() {
event.preventDefault();
},
target: {
name: props.name,
id: idState,
value: value
}
});
}
selectedItem.current = ObjectUtils.isNotEmpty(value) ? value : null;
};
var formatValue = function formatValue(value) {
if (ObjectUtils.isEmpty(value)) return '';
if (typeof value === 'string') return value;
if (props.selectedItemTemplate) {
var valueFromTemplate = ObjectUtils.getJSXElement(props.selectedItemTemplate, value);
return props.multiple || typeof valueFromTemplate === 'string' ? valueFromTemplate : value;
}
if (props.field) {
var _ObjectUtils$resolveF;
return (_ObjectUtils$resolveF = ObjectUtils.resolveFieldData(value, props.field)) !== null && _ObjectUtils$resolveF !== void 0 ? _ObjectUtils$resolveF : value;
}
return value;
};
var updateInputField = function updateInputField(value) {
inputRef.current.value = formatValue(value);
};
var show = function show() {
setOverlayVisibleState(true);
};
var hide = function hide() {
setOverlayVisibleState(false);
setSearchingState(false);
};
var onOverlayEnter = function onOverlayEnter() {
ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, context && context.zIndex.overlay || PrimeReact.zIndex.overlay);
DomHandler.addStyles(overlayRef.current, {
position: 'absolute',
top: '0',
left: '0'
});
alignOverlay();
};
var onOverlayEntering = function onOverlayEntering() {
if (props.autoHighlight && props.suggestions && props.suggestions.length) {
autoHighlightFirstOption();
}
};
var autoHighlightFirstOption = function autoHighlightFirstOption() {
var _getScrollableElement;
var element = (_getScrollableElement = getScrollableElement()) === null || _getScrollableElement === void 0 || (_getScrollableElement = _getScrollableElement.firstChild) === null || _getScrollableElement === void 0 ? void 0 : _getScrollableElement.firstChild;
if (element) {
!isUnstyled() && DomHandler.addClass(element, 'p-highlight');
element.setAttribute('data-p-highlight', true);
}
};
var onOverlayEntered = function onOverlayEntered() {
bindOverlayListener();
props.onShow && props.onShow();
};
var onOverlayExit = function onOverlayExit() {
unbindOverlayListener();
};
var onOverlayExited = function onOverlayExited() {
ZIndexUtils.clear(overlayRef.current);
props.onHide && props.onHide();
};
var alignOverlay = function alignOverlay() {
var target = props.multiple ? multiContainerRef.current : inputRef.current;
DomHandler.alignOverlay(overlayRef.current, target, props.appendTo || context && context.appendTo || PrimeReact.appendTo);
};
var onPanelClick = function onPanelClick(event) {
OverlayService.emit('overlay-click', {
originalEvent: event,
target: elementRef.current
});
};
var onDropdownClick = function onDropdownClick(event) {
if (props.dropdownAutoFocus) {
DomHandler.focus(inputRef.current, props.dropdownAutoFocus);
}
if (props.dropdownMode === 'blank') {
search(event, '', 'dropdown');
} else if (props.dropdownMode === 'current') {
search(event, inputRef.current.value, 'dropdown');
}
if (props.onDropdownClick) {
props.onDropdownClick({
originalEvent: event,
query: inputRef.current.value
});
}
};
var removeItem = function removeItem(event, index) {
if (props.disabled || props.readOnly) {
return;
}
var removedValue = props.value[index];
var newValue = props.value.filter(function (_, i) {
return index !== i;
});
updateModel(event, newValue);
if (props.onUnselect) {
props.onUnselect({
originalEvent: event,
value: removedValue
});
}
};
var onInputKeyDown = function onInputKeyDown(event) {
if (overlayVisibleState) {
var highlightItem = DomHandler.findSingle(overlayRef.current, 'li[data-p-highlight="true"]');
switch (event.which) {
//down
case 40:
if (highlightItem) {
var nextElement = _findNextItem(highlightItem);
if (nextElement) {
!isUnstyled() && DomHandler.addClass(nextElement, 'p-highlight');
nextElement.setAttribute('data-p-highlight', true);
!isUnstyled() && DomHandler.removeClass(highlightItem, 'p-highlight');
highlightItem.setAttribute('data-p-highlight', false);
DomHandler.scrollInView(getScrollableElement(), nextElement);
}
} else {
highlightItem = DomHandler.findSingle(overlayRef.current, 'li');
if (DomHandler.getAttribute(highlightItem, 'data-pc-section') === 'itemgroup') {
highlightItem = _findNextItem(highlightItem);
}
if (highlightItem) {
!isUnstyled() && DomHandler.addClass(highlightItem, 'p-highlight');
highlightItem.setAttribute('data-p-highlight', true);
}
}
event.preventDefault();
break;
//up
case 38:
if (highlightItem) {
var previousElement = _findPrevItem(highlightItem);
if (previousElement) {
!isUnstyled() && DomHandler.addClass(previousElement, 'p-highlight');
previousElement.setAttribute('data-p-highlight', true);
!isUnstyled() && DomHandler.removeClass(highlightItem, 'p-highlight');
highlightItem.setAttribute('data-p-highlight', false);
DomHandler.scrollInView(getScrollableElement(), previousElement);
}
}
event.preventDefault();
break;
//enter
case 13:
if (highlightItem) {
selectHighlightItem(event, highlightItem);
hide();
event.preventDefault();
}
break;
//escape
case 27:
hide();
event.preventDefault();
break;
//tab
case 9:
if (highlightItem) {
selectHighlightItem(event, highlightItem);
}
hide();
break;
}
}
if (props.multiple) {
switch (event.which) {
//backspace
case 8:
if (props.value && props.value.length && !inputRef.current.value) {
var removedValue = props.value[props.value.length - 1];
var newValue = props.value.slice(0, -1);
updateModel(event, newValue);
if (props.onUnselect) {
props.onUnselect({
originalEvent: event,
value: removedValue
});
}
}
break;
}
}
};
var selectHighlightItem = function selectHighlightItem(event, item) {
if (props.optionGroupLabel) {
var optionGroup = props.suggestions[item.dataset.group];
selectItem(event, getOptionGroupChildren(optionGroup)[item.dataset.index]);
} else {
selectItem(event, props.suggestions[item.getAttribute('index')]);
}
};
var _findNextItem = function findNextItem(item) {
var nextItem = item.nextElementSibling;
return nextItem ? DomHandler.getAttribute(nextItem, 'data-pc-section') === 'itemgroup' ? _findNextItem(nextItem) : nextItem : null;
};
var _findPrevItem = function findPrevItem(item) {
var prevItem = item.previousElementSibling;
return prevItem ? DomHandler.getAttribute(prevItem, 'data-pc-section') === 'itemgroup' ? _findPrevItem(prevItem) : prevItem : null;
};
var onInputFocus = function onInputFocus(event) {
setFocusedState(true);
props.onFocus && props.onFocus(event);
};
var forceItemSelection = function forceItemSelection(event) {
if (props.multiple) {
inputRef.current.value = '';
return;
}
var inputValue = ObjectUtils.trim(event.target.value).toLowerCase();
var allItems = (props.suggestions || []).flatMap(function (group) {
return group.items ? group.items : [group];
});
var item = allItems.find(function (it) {
var value = props.field ? ObjectUtils.resolveFieldData(it, props.field) : it;
var trimmedValue = value ? ObjectUtils.trim(value).toLowerCase() : '';
return trimmedValue && inputValue === trimmedValue;
});
if (item) {
selectItem(event, item, true);
} else {
inputRef.current.value = '';
updateModel(event, null);
props.onClear && props.onClear(event);
}
};
var onInputBlur = function onInputBlur(event) {
setFocusedState(false);
if (props.forceSelection) {
forceItemSelection(event);
}
props.onBlur && props.onBlur(event);
};
var onMultiContainerClick = function onMultiContainerClick(event) {
DomHandler.focus(inputRef.current);
props.onClick && props.onClick(event);
};
var onMultiInputFocus = function onMultiInputFocus(event) {
onInputFocus(event);
!isUnstyled() && DomHandler.addClass(multiContainerRef.current, 'p-focus');
multiContainerRef.current.setAttribute('data-p-focus', true);
};
var onMultiInputBlur = function onMultiInputBlur(event) {
onInputBlur(event);
!isUnstyled() && DomHandler.removeClass(multiContainerRef.current, 'p-focus');
multiContainerRef.current.setAttribute('data-p-focus', false);
};
var isSelected = function isSelected(val) {
return props.value ? props.value.some(function (v) {
return ObjectUtils.equals(v, val);
}) : false;
};
var getScrollableElement = function getScrollableElement() {
var _overlayRef$current;
return overlayRef === null || overlayRef === void 0 || (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.firstChild;
};
var getOptionGroupLabel = function getOptionGroupLabel(optionGroup) {
return props.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel) : optionGroup;
};
var getOptionGroupChildren = function getOptionGroupChildren(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupChildren);
};
var isAllowMoreValues = function isAllowMoreValues() {
return !props.value || !props.selectionLimit || props.value.length < props.selectionLimit;
};
React.useEffect(function () {
ObjectUtils.combinedRefs(inputRef, props.inputRef);
}, [inputRef, props.inputRef]);
React.useEffect(function () {
if (ObjectUtils.isNotEmpty(props.value)) {
selectedItem.current = props.value;
}
}, [props.value]);
useMountEffect(function () {
if (!idState) {
setIdState(UniqueComponentId());
}
if (props.autoFocus) {
DomHandler.focus(inputRef.current, props.autoFocus);
}
alignOverlay();
});
useUpdateEffect(function () {
if (searchingState && props.autoHighlight && props.suggestions && props.suggestions.length) {
autoHighlightFirstOption();
}
}, [searchingState]);
useUpdateEffect(function () {
if (searchingState) {
ObjectUtils.isNotEmpty(props.suggestions) || props.showEmptyMessage ? show() : hide();
setSearchingState(false);
}
}, [props.suggestions]);
useUpdateEffect(function () {
if (inputRef.current && !props.multiple) {
updateInputField(props.value);
}
if (overlayVisibleState) {
alignOverlay();
}
});
useUnmountEffect(function () {
if (timeout.current) {
clearTimeout(timeout.current);
}
ZIndexUtils.clear(overlayRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
search: search,
show: show,
hide: hide,
focus: function focus() {
return DomHandler.focus(inputRef.current);
},
getElement: function getElement() {
return elementRef.current;
},
getOverlay: function getOverlay() {
return overlayRef.current;
},
getInput: function getInput() {
return inputRef.current;
},
getVirtualScroller: function getVirtualScroller() {
return virtualScrollerRef.current;
}
};
});
var createSimpleAutoComplete = function createSimpleAutoComplete() {
var value = formatValue(props.value);
var ariaControls = overlayVisibleState ? idState + '_list' : null;
return /*#__PURE__*/React.createElement(InputText, _extends({
ref: inputRef,
id: props.inputId,
type: props.type,
name: props.name,
defaultValue: value,
role: "combobox",
"aria-autocomplete": "list",
"aria-controls": ariaControls,
"aria-haspopup": "listbox",
"aria-expanded": overlayVisibleState,
className: classNames(props.inputClassName, cx('input', {
context: context
})),
style: props.inputStyle,
autoComplete: "off",
readOnly: props.readOnly,
required: props.required,
disabled: props.disabled,
placeholder: props.placeholder,
size: props.size,
maxLength: props.maxLength,
tabIndex: props.tabIndex,
onBlur: onInputBlur,
onFocus: onInputFocus,
onChange: onInputChange,
onMouseDown: props.onMouseDown,
onKeyUp: props.onKeyUp,
onKeyDown: onInputKeyDown,
onKeyPress: props.onKeyPress,
onContextMenu: props.onContextMenu,
onClick: props.onClick,
onDoubleClick: props.onDblClick,
pt: ptm('input'),
unstyled: props.unstyled
}, ariaProps, {
__parentMetadata: {
parent: metaData
}
}));
};
var onRemoveTokenIconKeyDown = function onRemoveTokenIconKeyDown(event, val) {
switch (event.code) {
case 'Space':
case 'NumpadEnter':
case 'Enter':
removeItem(event, val);
event.preventDefault();
event.stopPropagation();
break;
}
};
var createChips = function createChips() {
if (ObjectUtils.isNotEmpty(props.value)) {
return props.value.map(function (val, index) {
var key = index + 'multi-item';
var removeTokenIconProps = mergeProps({
className: cx('removeTokenIcon'),
onClick: function onClick(e) {
return removeItem(e, index);
},
tabIndex: props.tabIndex || '0',
'aria-label': localeOption('clear'),
onKeyDown: function onKeyDown(e) {
return onRemoveTokenIconKeyDown(e, index);
}
}, ptm('removeTokenIcon'));
var icon = props.removeTokenIcon || /*#__PURE__*/React.createElement(TimesCircleIcon, removeTokenIconProps);
var removeTokenIcon = !props.disabled && IconUtils.getJSXIcon(icon, _objectSpread$1O({}, removeTokenIconProps), {
props: props
});
var tokenProps = mergeProps({
className: cx('token')
}, ptm('token'));
var tokenLabelProps = mergeProps({
className: cx('tokenLabel')
}, ptm('tokenLabel'));
return /*#__PURE__*/React.createElement("li", _extends({
key: key
}, tokenProps), /*#__PURE__*/React.createElement("span", tokenLabelProps, formatValue(val)), removeTokenIcon);
});
}
selectedItem.current = null;
return null;
};
var createMultiInput = function createMultiInput(allowMoreValues) {
var ariaControls = overlayVisibleState ? idState + '_list' : null;
var inputTokenProps = mergeProps({
className: cx('inputToken')
}, ptm('inputToken'));
var inputProps = mergeProps(_objectSpread$1O({
id: props.inputId,
ref: inputRef,
'aria-autocomplete': 'list',
'aria-controls': ariaControls,
'aria-expanded': overlayVisibleState,
'aria-haspopup': 'listbox',
autoComplete: 'off',
className: props.inputClassName,
disabled: props.disabled,
maxLength: props.maxLength,
name: props.name,
onBlur: onMultiInputBlur,
onChange: allowMoreValues ? onInputChange : undefined,
onFocus: onMultiInputFocus,
onKeyDown: allowMoreValues ? onInputKeyDown : undefined,
onKeyPress: props.onKeyPress,
onKeyUp: props.onKeyUp,
placeholder: allowMoreValues ? props.placeholder : undefined,
readOnly: props.readOnly || !allowMoreValues,
required: props.required,
role: 'combobox',
style: props.inputStyle,
tabIndex: props.tabIndex,
type: props.type
}, ariaProps), ptm('input'));
return /*#__PURE__*/React.createElement("li", inputTokenProps, /*#__PURE__*/React.createElement("input", inputProps));
};
var createMultipleAutoComplete = function createMultipleAutoComplete() {
var allowMoreValues = isAllowMoreValues();
var tokens = createChips();
var input = createMultiInput(allowMoreValues);
var containerProps = mergeProps({
ref: multiContainerRef,
className: cx('container', {
context: context
}),
onClick: allowMoreValues ? onMultiContainerClick : undefined,
onContextMenu: props.onContextMenu,
onMouseDown: props.onMouseDown,
onDoubleClick: props.onDblClick,
'data-p-focus': focusedState,
'data-p-disabled': props.disabled
}, ptm('container'));
return /*#__PURE__*/React.createElement("ul", containerProps, tokens, input);
};
var createDropdown = function createDropdown() {
if (props.dropdown) {
var ariaLabel = props.dropdownAriaLabel || props.placeholder || localeOption('choose');
return /*#__PURE__*/React.createElement(Button, {
type: "button",
icon: props.dropdownIcon || /*#__PURE__*/React.createElement(ChevronDownIcon, null),
className: cx('dropdownButton'),
disabled: props.disabled,
onClick: onDropdownClick,
"aria-label": ariaLabel,
pt: ptm('dropdownButton'),
__parentMetadata: {
parent: metaData
}
});
}
return null;
};
var createLoader = function createLoader() {
if (searchingState) {
var loadingIconProps = mergeProps({
className: cx('loadingIcon')
}, ptm('loadingIcon'));
var icon = props.loadingIcon || /*#__PURE__*/React.createElement(SpinnerIcon, _extends({}, loadingIconProps, {
spin: true
}));
var loaderIcon = IconUtils.getJSXIcon(icon, _objectSpread$1O({}, loadingIconProps), {
props: props
});
return loaderIcon;
}
return null;
};
var createInput = function createInput() {
return props.multiple ? createMultipleAutoComplete() : createSimpleAutoComplete();
};
var listId = idState + '_list';
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = AutoCompleteBase.getOtherProps(props);
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var loader = createLoader();
var input = createInput();
var dropdown = createDropdown();
var rootProps = mergeProps({
id: idState,
ref: elementRef,
style: props.style,
className: classNames(props.className, cx('root', {
focusedState: focusedState
}))
}, otherProps, ptm('root'));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", rootProps, input, loader, dropdown, /*#__PURE__*/React.createElement(AutoCompletePanel, _extends({
hostName: "AutoComplete",
ref: overlayRef,
virtualScrollerRef: virtualScrollerRef
}, props, {
listId: listId,
onItemClick: selectItem,
selectedItem: selectedItem,
onOverlayHide: hide,
onClick: onPanelClick,
getOptionGroupLabel: getOptionGroupLabel,
getOptionGroupChildren: getOptionGroupChildren,
"in": overlayVisibleState,
onEnter: onOverlayEnter,
onEntering: onOverlayEntering,
onEntered: onOverlayEntered,
onExit: onOverlayExit,
onExited: onOverlayExited,
ptm: ptm,
cx: cx,
sx: sx
}))), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip,
pt: ptm('tooltip')
}, props.tooltipOptions)));
}));
AutoComplete.displayName = 'AutoComplete';
var classes$1b = {
root: function root(_ref) {
var props = _ref.props,
state = _ref.state;
return classNames('p-avatar p-component', {
'p-avatar-image': ObjectUtils.isNotEmpty(props.image) && !state.imageFailed,
'p-avatar-circle': props.shape === 'circle',
'p-avatar-lg': props.size === 'large',
'p-avatar-xl': props.size === 'xlarge',
'p-avatar-clickable': !!props.onClick
});
},
label: 'p-avatar-text',
icon: 'p-avatar-icon'
};
var styles$$ = "\n@layer primereact {\n .p-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n font-size: 1rem;\n }\n \n .p-avatar.p-avatar-image {\n background-color: transparent;\n }\n \n .p-avatar.p-avatar-circle {\n border-radius: 50%;\n }\n \n .p-avatar.p-avatar-circle img {\n border-radius: 50%;\n }\n \n .p-avatar .p-avatar-icon {\n font-size: 1rem;\n }\n \n .p-avatar img {\n width: 100%;\n height: 100%;\n }\n \n .p-avatar-clickable {\n cursor: pointer;\n }\n}\n";
var AvatarBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Avatar',
className: null,
icon: null,
image: null,
imageAlt: 'avatar',
imageFallback: 'default',
label: null,
onImageError: null,
shape: 'square',
size: 'normal',
style: null,
template: null,
children: undefined
},
css: {
classes: classes$1b,
styles: styles$$
}
});
function ownKeys$1N(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$1N(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1N(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1N(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Avatar = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = AvatarBase.getProps(inProps, context);
var elementRef = React.useRef(null);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
imageFailed = _React$useState2[0],
setImageFailed = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
nested = _React$useState4[0],
setNested = _React$useState4[1];
var _AvatarBase$setMetaDa = AvatarBase.setMetaData({
props: props,
state: {
imageFailed: imageFailed,
nested: nested
}
}),
ptm = _AvatarBase$setMetaDa.ptm,
cx = _AvatarBase$setMetaDa.cx,
isUnstyled = _AvatarBase$setMetaDa.isUnstyled;
useHandleStyle(AvatarBase.css.styles, isUnstyled, {
name: 'avatar'
});
var createContent = function createContent() {
if (ObjectUtils.isNotEmpty(props.image) && !imageFailed) {
var imageProps = mergeProps({
src: props.image,
onError: onImageError
}, ptm('image'));
return /*#__PURE__*/React.createElement("img", _extends({
alt: props.imageAlt
}, imageProps));
} else if (props.label) {
var labelProps = mergeProps({
className: cx('label')
}, ptm('label'));
return /*#__PURE__*/React.createElement("span", labelProps, props.label);
} else if (props.icon) {
var iconProps = mergeProps({
className: cx('icon')
}, ptm('icon'));
return IconUtils.getJSXIcon(props.icon, _objectSpread$1N({}, iconProps), {
props: props
});
}
return null;
};
var onImageError = function onImageError(event) {
if (props.imageFallback === 'default') {
if (!props.onImageError) {
// fallback to label or icon
setImageFailed(true);
event.target.src = null;
}
} else {
// try fallback as an image
event.target.src = props.imageFallback;
}
props.onImageError && props.onImageError(event);
};
React.useEffect(function () {
var nested = DomHandler.isAttributeEquals(elementRef.current.parentElement, 'data-pc-name', 'avatargroup');
setNested(nested);
}, []);
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var rootProps = mergeProps({
ref: elementRef,
style: props.style,
className: classNames(props.className, cx('root', {
imageFailed: imageFailed
}))
}, AvatarBase.getOtherProps(props), ptm('root'));
var content = props.template ? ObjectUtils.getJSXElement(props.template, props) : createContent();
return /*#__PURE__*/React.createElement("div", rootProps, content, props.children);
});
Avatar.displayName = 'Avatar';
var classes$1a = {
root: 'p-avatar-group p-component'
};
var styles$_ = "\n@layer primereact {\n .p-avatar-group .p-avatar + .p-avatar {\n margin-left: -1rem;\n }\n \n .p-avatar-group {\n display: flex;\n align-items: center;\n }\n}\n";
var AvatarGroupBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'AvatarGroup',
style: null,
className: null,
children: undefined
},
css: {
classes: classes$1a,
styles: styles$_
}
});
var AvatarGroup = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = AvatarGroupBase.getProps(inProps, context);
var _AvatarGroupBase$setM = AvatarGroupBase.setMetaData({
props: props
}),
ptm = _AvatarGroupBase$setM.ptm,
cx = _AvatarGroupBase$setM.cx,
isUnstyled = _AvatarGroupBase$setM.isUnstyled;
useHandleStyle(AvatarGroupBase.css.styles, isUnstyled, {
name: 'avatargroup'
});
var elementRef = React.useRef(null);
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var rootProps = mergeProps({
ref: elementRef,
style: props.style,
className: classNames(props.className, cx('root'))
}, AvatarGroupBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("div", rootProps, props.children);
});
AvatarGroup.displayName = 'AvatarGroup';
var classes$19 = {
root: 'p-blockui-container',
mask: function mask(_ref) {
var props = _ref.props;
return classNames('p-blockui p-component-overlay p-component-overlay-enter', {
'p-blockui-document': props.fullScreen
});
}
};
var styles$Z = "\n@layer primereact {\n .p-blockui-container {\n position: relative;\n }\n \n .p-blockui {\n opacity: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .p-blockui.p-component-overlay {\n position: absolute;\n }\n \n .p-blockui-document.p-component-overlay {\n position: fixed;\n }\n}\n";
var BlockUIBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'BlockUI',
autoZIndex: true,
baseZIndex: 0,
blocked: false,
className: null,
containerClassName: null,
containerStyle: null,
fullScreen: false,
id: null,
onBlocked: null,
onUnblocked: null,
style: null,
template: null,
children: undefined
},
css: {
classes: classes$19,
styles: styles$Z
}
});
function ownKeys$1M(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$1M(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1M(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1M(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var BlockUI = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = BlockUIBase.getProps(inProps, context);
var _React$useState = React.useState(props.blocked),
_React$useState2 = _slicedToArray(_React$useState, 2),
visibleState = _React$useState2[0],
setVisibleState = _React$useState2[1];
var elementRef = React.useRef(null);
var maskRef = React.useRef(null);
var activeElementRef = React.useRef(null);
var _BlockUIBase$setMetaD = BlockUIBase.setMetaData({
props: props
}),
ptm = _BlockUIBase$setMetaD.ptm,
cx = _BlockUIBase$setMetaD.cx,
isUnstyled = _BlockUIBase$setMetaD.isUnstyled;
useHandleStyle(BlockUIBase.css.styles, isUnstyled, {
name: 'blockui'
});
var block = function block() {
setVisibleState(true);
activeElementRef.current = document.activeElement;
};
var unblock = function unblock() {
!isUnstyled() && DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
if (DomHandler.hasCSSAnimation(maskRef.current) > 0) {
maskRef.current.addEventListener('animationend', function () {
removeMask();
});
} else {
removeMask();
}
};
var removeMask = function removeMask() {
ZIndexUtils.clear(maskRef.current);
setVisibleState(false);
if (props.fullScreen) {
DomHandler.unblockBodyScroll();
activeElementRef.current && activeElementRef.current.focus();
}
props.onUnblocked && props.onUnblocked();
};
var onPortalMounted = function onPortalMounted() {
if (props.fullScreen) {
DomHandler.blockBodyScroll();
activeElementRef.current && activeElementRef.current.blur();
}
if (props.autoZIndex) {
var key = props.fullScreen ? 'modal' : 'overlay';
ZIndexUtils.set(key, maskRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, props.baseZIndex || context && context.zIndex[key] || PrimeReact.zIndex[key]);
}
props.onBlocked && props.onBlocked();
};
useMountEffect(function () {
visibleState && block();
});
useUpdateEffect(function () {
props.blocked ? block() : unblock();
}, [props.blocked]);
useUnmountEffect(function () {
props.fullScreen && DomHandler.unblockBodyScroll();
ZIndexUtils.clear(maskRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
block: block,
unblock: unblock,
getElement: function getElement() {
return elementRef.current;
}
};
});
var createMask = function createMask() {
if (visibleState) {
var appendTo = props.fullScreen ? document.body : 'self';
var maskProps = mergeProps({
className: classNames(props.className, cx('mask')),
style: _objectSpread$1M(_objectSpread$1M({}, props.style), {}, {
position: props.fullScreen ? 'fixed' : 'absolute',
top: '0',
left: '0',
width: '100%',
height: '100%'
})
}, ptm('mask'));
var content = props.template ? ObjectUtils.getJSXElement(props.template, props) : null;
var _mask = /*#__PURE__*/React.createElement("div", _extends({
ref: maskRef
}, maskProps), content);
return /*#__PURE__*/React.createElement(Portal, {
element: _mask,
appendTo: appendTo,
onMounted: onPortalMounted
});
}
return null;
};
var mask = createMask();
var rootProps = mergeProps({
id: props.id,
ref: elementRef,
style: props.containerStyle,
className: classNames(props.containerClassName, cx('root')),
'aria-busy': props.blocked
}, BlockUIBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("div", rootProps, props.children, mask);
});
BlockUI.displayName = 'BlockUI';
var classes$18 = {
icon: 'p-menuitem-icon',
action: 'p-menuitem-link',
label: 'p-menuitem-text',
home: function home(_ref) {
var _className = _ref._className,
disabled = _ref.disabled;
return classNames('p-breadcrumb-home p-menuitem', {
'p-disabled': disabled
}, _className);
},
separatorIcon: 'p-breadcrumb-chevron',
separator: 'p-menuitem-separator',
menuitem: function menuitem(_ref2) {
var item = _ref2.item;
return classNames('p-menuitem', item.className, {
'p-disabled': item.disabled
});
},
menu: 'p-breadcrumb-list',
root: 'p-breadcrumb p-component'
};
var styles$Y = "\n@layer primereact {\n .p-breadcrumb {\n overflow-x: auto;\n display: flex;\n }\n\n .p-breadcrumb ol {\n margin: 0;\n padding: 0;\n list-style-type: none;\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n }\n\n .p-breadcrumb .p-menuitem-text {\n line-height: 1;\n }\n\n .p-breadcrumb .p-menuitem-link {\n text-decoration: none;\n display: flex;\n align-items: center;\n }\n\n .p-breadcrumb .p-menuitem-separator {\n display: flex;\n align-items: center;\n }\n\n .p-breadcrumb::-webkit-scrollbar {\n display: none;\n }\n}\n";
var BreadCrumbBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'BreadCrumb',
id: null,
model: null,
home: null,
separatorIcon: null,
style: null,
className: null,
children: undefined
},
css: {
classes: classes$18,
styles: styles$Y
}
});
function ownKeys$1L(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$1L(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1L(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1L(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var BreadCrumb = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = BreadCrumbBase.getProps(inProps, context);
var _React$useState = React.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var elementRef = React.useRef(null);
var _BreadCrumbBase$setMe = BreadCrumbBase.setMetaData({
props: props,
state: {
id: idState
}
}),
ptm = _BreadCrumbBase$setMe.ptm,
cx = _BreadCrumbBase$setMe.cx,
isUnstyled = _BreadCrumbBase$setMe.isUnstyled;
useHandleStyle(BreadCrumbBase.css.styles, isUnstyled, {
name: 'breadcrumb'
});
var itemClick = function itemClick(event, item) {
if (item.disabled) {
event.preventDefault();
return;
}
if (item.command) {
item.command({
originalEvent: event,
item: item
});
}
if (!item.url) {
event.preventDefault();
event.stopPropagation();
}
};
var isCurrent = function isCurrent(url) {
var lastPath = typeof window !== 'undefined' ? window.location.pathname : '';
return url === lastPath ? 'page' : undefined;
};
var createHome = function createHome() {
var home = props.home;
if (home) {
if (home.visible === false) {
return null;
}
var _icon = home.icon,
target = home.target,
url = home.url,
disabled = home.disabled,
style = home.style,
_className = home.className,
template = home.template,
_label = home.label;
var iconProps = mergeProps({
className: cx('icon')
}, ptm('icon'));
var icon = IconUtils.getJSXIcon(_icon, _objectSpread$1L({}, iconProps), {
props: props
});
var actionProps = mergeProps({
href: url || '#',
className: cx('action'),
'aria-disabled': disabled,
'aria-current': isCurrent(url),
target: target,
onClick: function onClick(event) {
return itemClick(event, home);
}
}, ptm('action'));
var labelProps = mergeProps({
className: cx('label')
}, ptm('label'));
var label = _label && /*#__PURE__*/React.createElement("span", labelProps, _label);
var content = /*#__PURE__*/React.createElement("a", actionProps, icon, label);
if (template) {
var defaultContentOptions = {
onClick: function onClick(event) {
return itemClick(event, home);
},
className: 'p-menuitem-link',
labelClassName: 'p-menuitem-text',
element: content,
props: props
};
content = ObjectUtils.getJSXElement(template, home, defaultContentOptions);
}
var key = idState + '_home';
var menuitemProps = mergeProps({
id: key,
className: cx('home', {
_className: _className,
disabled: disabled
}),
style: style
}, ptm('home'));
return /*#__PURE__*/React.createElement("li", _extends({}, menuitemProps, {
key: key
}), content);
}
return null;
};
var createSeparator = function createSeparator(index) {
var key = idState + '_sep_' + index;
var separatorIconProps = mergeProps({
className: cx('separatorIcon'),
'aria-hidden': 'true'
}, ptm('separatorIcon'));
var icon = props.separatorIcon || /*#__PURE__*/React.createElement(ChevronRightIcon, separatorIconProps);
var separatorIcon = IconUtils.getJSXIcon(icon, _objectSpread$1L({}, separatorIconProps), {
props: props
});
var separatorProps = mergeProps({
id: key,
className: cx('separator'),
role: 'separator'
}, ptm('separator'));
return /*#__PURE__*/React.createElement("li", _extends({}, separatorProps, {
key: key
}), separatorIcon);
};
var createMenuitem = function createMenuitem(item, index) {
if (item.visible === false) {
return null;
}
var labelProps = mergeProps({
className: cx('label')
}, ptm('label'));
var label = item.label && /*#__PURE__*/React.createElement("span", labelProps, item.label);
var actionProps = mergeProps({
href: item.url || '#',
className: cx('action'),
target: item.target,
'aria-current': isCurrent(item.url),
onClick: function onClick(event) {
return itemClick(event, item);
},
'aria-disabled': item.disabled,
tabIndex: item.disabled ? -1 : undefined
}, ptm('action'));
var content = /*#__PURE__*/React.createElement("a", actionProps, label);
if (item.template) {
var defaultContentOptions = {
onClick: function onClick(event) {
return itemClick(event, item);
},
className: 'p-menuitem-link',
labelClassName: 'p-menuitem-text',
element: content,
props: props
};
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
}
var key = item.id || idState + '_' + index;
var menuitemProps = mergeProps({
id: key,
className: cx('menuitem', {
item: item
}),
style: item.style
}, ptm('menuitem'));
return /*#__PURE__*/React.createElement("li", _extends({}, menuitemProps, {
key: key
}), content);
};
var createMenuitems = function createMenuitems() {
if (props.model) {
var _items = props.model.map(function (item, index) {
if (item.visible === false) {
return null;
}
var menuitem = createMenuitem(item, index);
var separator = index === props.model.length - 1 ? null : createSeparator(index);
var key = idState + '_' + index;
return /*#__PURE__*/React.createElement(React.Fragment, {
key: key
}, menuitem, separator);
});
return _items;
}
return null;
};
useMountEffect(function () {
if (!idState) {
setIdState(UniqueComponentId());
}
});
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var home = createHome();
var items = createMenuitems();
var separator = createSeparator('home');
var menuProps = mergeProps({
className: cx('menu')
}, ptm('menu'));
var rootProps = mergeProps({
id: props.id,
ref: elementRef,
className: classNames(props.className, cx('root')),
style: props.style
}, BreadCrumbBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("nav", rootProps, /*#__PURE__*/React.createElement("ol", menuProps, home, home && !!(items !== null && items !== void 0 && items.length) && separator, items));
}));
BreadCrumb.displayName = 'BreadCrumb';
var CalendarIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
d: "M10.7838 1.51351H9.83783V0.567568C9.83783 0.417039 9.77804 0.272676 9.6716 0.166237C9.56516 0.0597971 9.42079 0 9.27027 0C9.11974 0 8.97538 0.0597971 8.86894 0.166237C8.7625 0.272676 8.7027 0.417039 8.7027 0.567568V1.51351H5.29729V0.567568C5.29729 0.417039 5.2375 0.272676 5.13106 0.166237C5.02462 0.0597971 4.88025 0 4.72973 0C4.5792 0 4.43484 0.0597971 4.3284 0.166237C4.22196 0.272676 4.16216 0.417039 4.16216 0.567568V1.51351H3.21621C2.66428 1.51351 2.13494 1.73277 1.74467 2.12305C1.35439 2.51333 1.13513 3.04266 1.13513 3.59459V11.9189C1.13513 12.4709 1.35439 13.0002 1.74467 13.3905C2.13494 13.7807 2.66428 14 3.21621 14H10.7838C11.3357 14 11.865 13.7807 12.2553 13.3905C12.6456 13.0002 12.8649 12.4709 12.8649 11.9189V3.59459C12.8649 3.04266 12.6456 2.51333 12.2553 2.12305C11.865 1.73277 11.3357 1.51351 10.7838 1.51351ZM3.21621 2.64865H4.16216V3.59459C4.16216 3.74512 4.22196 3.88949 4.3284 3.99593C4.43484 4.10237 4.5792 4.16216 4.72973 4.16216C4.88025 4.16216 5.02462 4.10237 5.13106 3.99593C5.2375 3.88949 5.29729 3.74512 5.29729 3.59459V2.64865H8.7027V3.59459C8.7027 3.74512 8.7625 3.88949 8.86894 3.99593C8.97538 4.10237 9.11974 4.16216 9.27027 4.16216C9.42079 4.16216 9.56516 4.10237 9.6716 3.99593C9.77804 3.88949 9.83783 3.74512 9.83783 3.59459V2.64865H10.7838C11.0347 2.64865 11.2753 2.74831 11.4527 2.92571C11.6301 3.10311 11.7297 3.34371 11.7297 3.59459V5.67568H2.27027V3.59459C2.27027 3.34371 2.36993 3.10311 2.54733 2.92571C2.72473 2.74831 2.96533 2.64865 3.21621 2.64865ZM10.7838 12.8649H3.21621C2.96533 12.8649 2.72473 12.7652 2.54733 12.5878C2.36993 12.4104 2.27027 12.1698 2.27027 11.9189V6.81081H11.7297V11.9189C11.7297 12.1698 11.6301 12.4104 11.4527 12.5878C11.2753 12.7652 11.0347 12.8649 10.7838 12.8649Z",
fill: "currentColor"
}));
}));
CalendarIcon.displayName = 'CalendarIcon';
var ChevronLeftIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
d: "M9.61296 13C9.50997 13.0005 9.40792 12.9804 9.3128 12.9409C9.21767 12.9014 9.13139 12.8433 9.05902 12.7701L3.83313 7.54416C3.68634 7.39718 3.60388 7.19795 3.60388 6.99022C3.60388 6.78249 3.68634 6.58325 3.83313 6.43628L9.05902 1.21039C9.20762 1.07192 9.40416 0.996539 9.60724 1.00012C9.81032 1.00371 10.0041 1.08597 10.1477 1.22959C10.2913 1.37322 10.3736 1.56698 10.3772 1.77005C10.3808 1.97313 10.3054 2.16968 10.1669 2.31827L5.49496 6.99022L10.1669 11.6622C10.3137 11.8091 10.3962 12.0084 10.3962 12.2161C10.3962 12.4238 10.3137 12.6231 10.1669 12.7701C10.0945 12.8433 10.0083 12.9014 9.91313 12.9409C9.81801 12.9804 9.71596 13.0005 9.61296 13Z",
fill: "currentColor"
}));
}));
ChevronLeftIcon.displayName = 'ChevronLeftIcon';
var ChevronUpIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
d: "M12.2097 10.4113C12.1057 10.4118 12.0027 10.3915 11.9067 10.3516C11.8107 10.3118 11.7237 10.2532 11.6506 10.1792L6.93602 5.46461L2.22139 10.1476C2.07272 10.244 1.89599 10.2877 1.71953 10.2717C1.54307 10.2556 1.3771 10.1808 1.24822 10.0593C1.11933 9.93766 1.035 9.77633 1.00874 9.6011C0.982477 9.42587 1.0158 9.2469 1.10338 9.09287L6.37701 3.81923C6.52533 3.6711 6.72639 3.58789 6.93602 3.58789C7.14565 3.58789 7.3467 3.6711 7.49502 3.81923L12.7687 9.09287C12.9168 9.24119 13 9.44225 13 9.65187C13 9.8615 12.9168 10.0626 12.7687 10.2109C12.616 10.3487 12.4151 10.4207 12.2097 10.4113Z",
fill: "currentColor"
}));
}));
ChevronUpIcon.displayName = 'ChevronUpIcon';
var styles$X = "\n@layer primereact {\n .p-calendar {\n position: relative;\n display: inline-flex;\n max-width: 100%;\n }\n\n .p-calendar .p-inputtext {\n flex: 1 1 auto;\n width: 1%;\n }\n\n .p-calendar-w-btn-right .p-inputtext {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n .p-calendar-w-btn-right .p-datepicker-trigger {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n .p-calendar-w-btn-left .p-inputtext {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n .p-calendar-w-btn-left .p-datepicker-trigger {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n /* Fluid */\n .p-fluid .p-calendar {\n display: flex;\n }\n\n .p-fluid .p-calendar .p-inputtext {\n width: 1%;\n }\n\n /* Datepicker */\n .p-calendar .p-datepicker {\n min-width: 100%;\n }\n\n .p-datepicker {\n width: auto;\n position: absolute;\n top: 0;\n left: 0;\n }\n\n .p-datepicker-inline {\n display: inline-block;\n position: static;\n overflow-x: auto;\n }\n\n /* Header */\n .p-datepicker-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .p-datepicker-header .p-datepicker-title {\n margin: 0 auto;\n }\n\n .p-datepicker-prev,\n .p-datepicker-next {\n cursor: pointer;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n position: relative;\n }\n\n /* Multiple Month DatePicker */\n .p-datepicker-multiple-month .p-datepicker-group-container {\n display: flex;\n }\n\n .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {\n flex: 1 1 auto;\n }\n\n /* Multiple Month DatePicker */\n .p-datepicker-multiple-month .p-datepicker-group-container {\n display: flex;\n }\n\n /* DatePicker Table */\n .p-datepicker table {\n width: 100%;\n border-collapse: collapse;\n }\n\n .p-datepicker td > span {\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n margin: 0 auto;\n overflow: hidden;\n position: relative;\n }\n\n /* Month Picker */\n .p-monthpicker-month {\n width: 33.3%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n overflow: hidden;\n position: relative;\n }\n\n /* Button Bar */\n .p-datepicker-buttonbar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n /* Time Picker */\n .p-timepicker {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .p-timepicker button {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n overflow: hidden;\n position: relative;\n }\n\n .p-timepicker > div {\n display: flex;\n align-items: center;\n flex-direction: column;\n }\n\n /* Touch UI */\n .p-datepicker-touch-ui,\n .p-calendar .p-datepicker-touch-ui {\n position: fixed;\n top: 50%;\n left: 50%;\n min-width: 80vw;\n transform: translate(-50%, -50%);\n }\n\n /* Year Picker */\n .p-yearpicker-year {\n width: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n overflow: hidden;\n position: relative;\n }\n}\n";
var classes$17 = {
root: function root(_ref) {
var props = _ref.props,
focusedState = _ref.focusedState,
isFilled = _ref.isFilled,
panelVisible = _ref.panelVisible;
return classNames('p-calendar p-component p-inputwrapper', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "p-calendar-w-btn p-calendar-w-btn-".concat(props.iconPos), props.showIcon), 'p-calendar-disabled', props.disabled), 'p-invalid', props.invalid), 'p-calendar-timeonly', props.timeOnly), 'p-inputwrapper-filled', props.value || isFilled), 'p-inputwrapper-focus', focusedState), 'p-focus', focusedState || panelVisible));
},
input: function input(_ref2) {
var props = _ref2.props,
context = _ref2.context;
return classNames('p-inputtext p-component', {
'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
});
},
dropdownButton: 'p-datepicker-trigger',
buttonbar: 'p-datepicker-buttonbar',
todayButton: 'p-button-text',
clearButton: 'p-button-text',
footer: 'p-datepicker-footer',
yearPicker: 'p-yearpicker',
year: function year(_ref3) {
var isYearSelected = _ref3.isYearSelected,
y = _ref3.y,
isMonthYearDisabled = _ref3.isMonthYearDisabled;
return classNames('p-yearpicker-year', {
'p-highlight': isYearSelected(y),
'p-disabled': isMonthYearDisabled(-1, y)
});
},
monthPicker: 'p-monthpicker',
month: function month(_ref4) {
var isMonthSelected = _ref4.isMonthSelected,
isMonthYearDisabled = _ref4.isMonthYearDisabled,
i = _ref4.i,
currentYear = _ref4.currentYear;
return classNames('p-monthpicker-month', {
'p-highlight': isMonthSelected(i),
'p-disabled': isMonthYearDisabled(i, currentYear)
});
},
hourPicker: 'p-hour-picker',
secondPicker: 'p-second-picker',
minutePicker: 'p-minute-picker',
millisecondPicker: 'p-millisecond-picker',
ampmPicker: 'p-ampm-picker',
separatorContainer: 'p-separator',
dayLabel: function dayLabel(_ref5) {
var className = _ref5.className;
return className;
},
day: function day(_ref6) {
var date = _ref6.date;
return classNames({
'p-datepicker-other-month': date.otherMonth,
'p-datepicker-today': date.today
});
},
panel: function panel(_ref7) {
var panelClassName = _ref7.panelClassName;
return panelClassName;
},
previousIcon: 'p-datepicker-prev-icon',
previousButton: 'p-datepicker-prev',
nextIcon: 'p-datepicker-next-icon',
nextButton: 'p-datepicker-next',
incrementButton: 'p-link',
decrementButton: 'p-link',
title: 'p-datepicker-title',
timePicker: 'p-timepicker',
monthTitle: 'p-datepicker-month p-link',
yearTitle: 'p-datepicker-year p-link',
decadeTitle: 'p-datepicker-decade',
header: 'p-datepicker-header',
groupContainer: 'p-datepicker-group-container',
group: 'p-datepicker-group',
select: function select(_ref8) {
var props = _ref8.props;
return props.monthNavigator && props.view !== 'month' ? 'p-datepicker-month' : props.yearNavigator ? 'p-datepicker-year' : undefined;
},
weekHeader: 'p-datepicker-weekheader p-disabled',
weekNumber: 'p-datepicker-weeknumber',
weekLabelContainer: 'p-disabled',
container: 'p-datepicker-calendar-container',
table: 'p-datepicker-calendar',
transition: 'p-connected-overlay'
};
var CalendarBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Calendar',
appendTo: null,
ariaLabelledBy: null,
ariaLabel: null,
autoZIndex: true,
autoFocus: false,
baseZIndex: 0,
className: null,
clearButtonClassName: 'p-button-secondary',
dateFormat: null,
dateTemplate: null,
decadeTemplate: null,
decrementIcon: null,
disabled: false,
disabledDates: null,
disabledDays: null,
enabledDates: null,
footerTemplate: null,
formatDateTime: null,
headerTemplate: null,
hideOnDateTimeSelect: false,
hideOnRangeSelection: false,
hourFormat: '24',
icon: null,
iconPos: 'right',
id: null,
incrementIcon: null,
inline: false,
inputClassName: null,
inputId: null,
inputMode: 'none',
inputRef: null,
inputStyle: null,
variant: null,
invalid: false,
keepInvalid: false,
locale: null,
mask: null,
maskSlotChar: '_',
maxDate: null,
maxDateCount: null,
minDate: null,
monthNavigator: false,
monthNavigatorTemplate: null,
name: null,
nextIcon: null,
numberOfMonths: 1,
onBlur: null,
onChange: null,
onClearButtonClick: null,
onFocus: null,
onHide: null,
onInput: null,
onMonthChange: null,
onSelect: null,
onShow: null,
onTodayButtonClick: null,
onViewDateChange: null,
onVisibleChange: null,
panelClassName: null,
panelStyle: null,
parseDateTime: null,
placeholder: null,
prevIcon: null,
readOnlyInput: false,
required: false,
selectOtherMonths: false,
selectionMode: 'single',
shortYearCutoff: '+10',
showButtonBar: false,
showIcon: false,
showMillisec: false,
showMinMaxRange: false,
showOnFocus: true,
showOtherMonths: true,
showSeconds: false,
showTime: false,
showWeek: false,
stepHour: 1,
stepMillisec: 1,
stepMinute: 1,
stepSecond: 1,
style: null,
tabIndex: null,
timeOnly: false,
todayButtonClassName: 'p-button-secondary',
tooltip: null,
tooltipOptions: null,
touchUI: false,
transitionOptions: null,
value: null,
view: 'date',
viewDate: null,
visible: false,
yearNavigator: false,
yearNavigatorTemplate: null,
yearRange: null,
children: undefined
},
css: {
classes: classes$17,
styles: styles$X
}
});
var CalendarPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
var cx = props.cx;
var mergeProps = useMergeProps();
var createElement = function createElement() {
var panelProps = mergeProps({
className: cx('panel', {
panelClassName: props.className
}),
style: props.style,
role: props.inline ? null : 'dialog',
id: props.id,
'aria-label': localeOption('chooseDate', props.locale),
'aria-modal': props.inline ? null : 'true',
onClick: props.onClick,
onMouseUp: props.onMouseUp,
'data-pr-is-overlay': true
}, props.ptm('panel', {
hostName: props.hostName
}));
var transitionProps = mergeProps({
classNames: cx('transition'),
"in": props["in"],
timeout: {
enter: 120,
exit: 100
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: props.onEnter,
onEntered: props.onEntered,
onExit: props.onExit,
onExited: props.onExited
}, props.ptm('transition', {
hostName: props.hostName
}));
return /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: ref
}, transitionProps), /*#__PURE__*/React.createElement("div", _extends({
ref: ref
}, panelProps), props.children));
};
var element = createElement();
return props.inline ? element : /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo
});
});
CalendarPanel.displayName = 'CalendarPanel';
function ownKeys$1K(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$1K(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1K(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1K(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _createForOfIteratorHelper$e(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$e(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray$e(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$e(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$e(r, a) : void 0; } }
function _arrayLikeToArray$e(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; }
var Calendar = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = CalendarBase.getProps(inProps, context);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
overlayVisibleState = _React$useState4[0],
setOverlayVisibleState = _React$useState4[1];
var _React$useState5 = React.useState(null),
_React$useState6 = _slicedToArray(_React$useState5, 2),
viewDateState = _React$useState6[0],
setViewDateState = _React$useState6[1];
var _React$useState7 = React.useState(props.id),
_React$useState8 = _slicedToArray(_React$useState7, 2),
idState = _React$useState8[0],
setIdState = _React$useState8[1];
var isCloseOnEscape = overlayVisibleState && props.closeOnEscape;
var overlayDisplayOrder = useDisplayOrder('overlay-panel', isCloseOnEscape);
var metaData = {
props: props,
state: {
focused: focusedState,
overlayVisible: overlayVisibleState,
viewDate: viewDateState
}
};
var _CalendarBase$setMeta = CalendarBase.setMetaData(metaData),
ptm = _CalendarBase$setMeta.ptm,
cx = _CalendarBase$setMeta.cx,
isUnstyled = _CalendarBase$setMeta.isUnstyled;
useGlobalOnEscapeKey({
callback: function callback() {
hide(null, reFocusInputField);
},
when: overlayVisibleState && overlayDisplayOrder,
priority: [ESC_KEY_HANDLING_PRIORITIES.OVERLAY_PANEL, overlayDisplayOrder]
});
useHandleStyle(CalendarBase.css.styles, isUnstyled, {
name: 'calendar'
});
var elementRef = React.useRef(null);
var overlayRef = React.useRef(null);
var inputRef = React.useRef(props.inputRef);
var navigation = React.useRef(null);
var ignoreFocusFunctionality = React.useRef(false);
var timePickerTimer = React.useRef(null);
var viewStateChanged = React.useRef(false);
var touchUIMask = React.useRef(null);
var overlayEventListener = React.useRef(null);
var touchUIMaskClickListener = React.useRef(null);
var isOverlayClicked = React.useRef(false);
var previousButton = React.useRef(false);
var nextButton = React.useRef(false);
var viewChangedWithKeyDown = React.useRef(false);
var onChangeRef = React.useRef(null);
var isClearClicked = React.useRef(false);
var _React$useState9 = React.useState('date'),
_React$useState10 = _slicedToArray(_React$useState9, 2),
currentView = _React$useState10[0],
setCurrentView = _React$useState10[1];
var _React$useState11 = React.useState(null),
_React$useState12 = _slicedToArray(_React$useState11, 2),
currentMonth = _React$useState12[0],
setCurrentMonth = _React$useState12[1];
var _React$useState13 = React.useState(null),
_React$useState14 = _slicedToArray(_React$useState13, 2),
currentYear = _React$useState14[0],
setCurrentYear = _React$useState14[1];
var _React$useState15 = React.useState([]),
_React$useState16 = _slicedToArray(_React$useState15, 2),
yearOptions = _React$useState16[0],
setYearOptions = _React$useState16[1];
var previousValue = usePrevious(props.value);
var visible = props.inline || (props.onVisibleChange ? props.visible : overlayVisibleState);
var attributeSelector = UniqueComponentId();
var panelId = idState + '_panel';
var _useOverlayListener = useOverlayListener({
target: elementRef,
overlay: overlayRef,
listener: function listener(event, _ref) {
var type = _ref.type,
valid = _ref.valid;
if (valid) {
if (type === 'outside') {
if (!isOverlayClicked.current && !isNavIconClicked(event.target)) {
hide('outside');
}
} else if (context.hideOverlaysOnDocumentScrolling) {
hide();
} else if (!DomHandler.isDocument(event.target)) {
alignOverlay();
}
}
isOverlayClicked.current = false;
},
when: !(props.touchUI || props.inline) && visible,
type: 'mousedown'
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var getDateFormat = function getDateFormat() {
return props.dateFormat || localeOption('dateFormat', props.locale);
};
var onInputFocus = function onInputFocus(event) {
if (ignoreFocusFunctionality.current) {
setFocusedState(true);
ignoreFocusFunctionality.current = false;
} else {
if (props.showOnFocus && !visible) {
show();
}
setFocusedState(true);
props.onFocus && props.onFocus(event);
}
};
var onInputBlur = function onInputBlur(event) {
updateInputfield(props.value);
props.onBlur && props.onBlur(event);
setFocusedState(false);
};
var onInputKeyDown = function onInputKeyDown(event) {
switch (event.code) {
case 'ArrowDown':
{
if (!overlayVisibleState) {
show();
} else {
focusToFirstCell();
event.preventDefault();
}
break;
}
case 'Escape':
{
hide();
props.touchUI && disableModality();
break;
}
case 'Tab':
{
if (overlayRef && overlayRef.current) {
DomHandler.getFocusableElements(overlayRef.current).forEach(function (el) {
return el.tabIndex = '-1';
});
hide();
props.touchUI && disableModality();
}
break;
}
}
};
var onUserInput = function onUserInput(event) {
updateValueOnInput(event, event.target.value);
props.onInput && props.onInput(event);
};
var updateValueOnInput = function updateValueOnInput(event, rawValue, invalidCallback) {
try {
var value = parseValueFromString(props.timeOnly ? rawValue.replace('_', '') : rawValue);
if (isValidSelection(value)) {
validateDate(value);
updateModel(event, value);
var date = value.length ? value[0] : value;
updateViewDate(event, date);
}
} catch (err) {
//invalid date
if (invalidCallback) {
invalidCallback();
} else {
var _value = props.keepInvalid ? rawValue : null;
updateModel(event, _value);
}
}
};
var onViewDateSelect = function onViewDateSelect(_ref2) {
var event = _ref2.event,
date = _ref2.date;
if (date && props.onSelect) {
var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
onDateSelect(event, {
day: day,
month: month,
year: year,
selectable: isSelectable(day, month, year)
}, null, true);
}
};
var reFocusInputField = function reFocusInputField() {
if (!props.inline && inputRef.current) {
ignoreFocusFunctionality.current = true;
DomHandler.focus(inputRef.current);
}
};
var isValidSelection = function isValidSelection(value) {
var isValid = true;
if (isSingleSelection()) {
if (!(isSelectable(value.getDate(), value.getMonth(), value.getFullYear(), false) && isSelectableTime(value))) {
isValid = false;
}
} else if (value.every(function (v) {
return isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false) && isSelectableTime(v);
})) {
if (isRangeSelection()) {
isValid = value.length > 1 && value[1] >= value[0];
}
}
return isValid;
};
var onButtonClick = function onButtonClick() {
visible ? hide() : show();
};
var onPrevButtonClick = function onPrevButtonClick(event) {
navigation.current = {
backward: true,
button: true
};
navBackward(event);
};
var onNextButtonClick = function onNextButtonClick(event) {
navigation.current = {
backward: false,
button: true
};
navForward(event);
};
var onContainerButtonKeydown = function onContainerButtonKeydown(event) {
switch (event.code) {
case 'Tab':
!props.inline && trapFocus(event);
break;
case 'Escape':
hide(null, reFocusInputField);
event.preventDefault();
break;
}
};
var onPickerKeyDown = function onPickerKeyDown(event, type, direction) {
if (event.key === 'Enter' || event.key === 'Space') {
onTimePickerElementMouseDown(event, type, direction);
event.preventDefault();
return;
}
onContainerButtonKeydown(event);
};
var onPickerKeyUp = function onPickerKeyUp(event) {
if (event.key === 'Enter' || event.key === 'Space') {
onTimePickerElementMouseUp();
event.preventDefault();
return;
}
};
var trapFocus = function trapFocus(event) {
event === null || event === void 0 || event.preventDefault();
var focusableElements = DomHandler.getFocusableElements(overlayRef.current);
if (focusableElements && focusableElements.length > 0) {
if (!document.activeElement) {
focusableElements[0].focus();
} else {
var focusedIndex = focusableElements.indexOf(document.activeElement);
if (event !== null && event !== void 0 && event.shiftKey) {
if (focusedIndex === -1 || focusedIndex === 0) {
focusableElements[focusableElements.length - 1].focus();
} else {
focusableElements[focusedIndex - 1].focus();
}
} else if (focusedIndex === -1 || focusedIndex === focusableElements.length - 1) {
focusableElements[0].focus();
} else {
focusableElements[focusedIndex + 1].focus();
}
}
}
};
var updateFocus = function updateFocus() {
if (navigation.current) {
if (navigation.current.button) {
initFocusableCell();
if (navigation.current.backward) {
previousButton.current.focus();
} else {
nextButton.current.focus();
}
} else {
var cell;
if (navigation.current.backward) {
var cells = DomHandler.find(overlayRef.current, 'table td span:not([data-p-disabled="true"])');
cell = cells[cells.length - 1];
} else {
cell = DomHandler.findSingle(overlayRef.current, 'table td span:not([data-p-disabled="true"])');
}
if (cell) {
cell.tabIndex = '0';
cell.focus();
}
}
navigation.current = null;
} else {
initFocusableCell();
}
};
var initFocusableCell = function initFocusableCell() {
var cell;
if (currentView === 'month') {
var cells = DomHandler.find(overlayRef.current, '[data-pc-section="monthpicker"] [data-pc-section="month"]');
var selectedCell = DomHandler.findSingle(overlayRef.current, '[data-pc-section="monthpicker"] [data-pc-section="month"][data-p-highlight="true"]');
cells.forEach(function (cell) {
return cell.tabIndex = -1;
});
cell = selectedCell || cells[0];
} else {
cell = DomHandler.findSingle(overlayRef.current, 'span[data-p-highlight="true"]');
if (!cell) {
var todayCell = DomHandler.findSingle(overlayRef.current, 'td.p-datepicker-today span:not(.p-disabled)');
cell = todayCell || DomHandler.findSingle(overlayRef.current, 'table td span:not([data-p-disabled="true"])');
}
}
if (cell) {
cell.tabIndex = '0';
}
};
var focusToFirstCell = function focusToFirstCell() {
if (currentView) {
var cell;
if (currentView === 'date') {
cell = DomHandler.findSingle(overlayRef.current, 'span[data-p-highlight="true"]');
if (!cell) {
var todayCell = DomHandler.findSingle(overlayRef.current, 'td.p-datepicker-today span:not(.p-disabled)');
cell = todayCell || DomHandler.findSingle(overlayRef.current, 'table td span:not([data-p-disabled="true"])');
}
} else if (currentView === 'month' || currentView === 'year') {
cell = DomHandler.findSingle(overlayRef.current, 'span[data-p-highlight="true"]');
if (!cell) {
cell = DomHandler.findSingle(overlayRef.current, "[data-pc-section=\"".concat(currentView, "picker\"] [data-pc-section=\"").concat(currentView, "\"]:not([data-p-disabled=\"true\"])"));
}
}
if (cell) {
cell.tabIndex = '0';
cell && cell.focus();
}
}
};
var navBackward = function navBackward(event) {
if (props.disabled) {
event.preventDefault();
return;
}
var newViewDate = cloneDate(getViewDate());
newViewDate.setDate(1);
if (currentView === 'date') {
if (newViewDate.getMonth() === 0) {
var newYear = decrementYear();
newViewDate.setMonth(11);
newViewDate.setFullYear(newYear);
props.onMonthChange && props.onMonthChange({
month: 12,
year: newYear
});
setCurrentMonth(11);
} else {
newViewDate.setMonth(newViewDate.getMonth() - 1);
props.onMonthChange && props.onMonthChange({
month: currentMonth,
year: currentYear
});
setCurrentMonth(function (prevState) {
return prevState - 1;
});
}
} else if (currentView === 'month') {
var _newYear = newViewDate.getFullYear() - 1;
if (props.yearNavigator) {
var minYear = parseInt(props.yearRange.split(':')[0], 10);
if (_newYear < minYear) {
_newYear = minYear;
}
}
newViewDate.setFullYear(_newYear);
}
if (currentView === 'month') {
newViewDate.setFullYear(decrementYear());
} else if (currentView === 'year') {
newViewDate.setFullYear(decrementDecade());
}
updateViewDate(event, newViewDate);
event.preventDefault();
};
var navForward = function navForward(event) {
if (props.disabled) {
event.preventDefault();
return;
}
var newViewDate = cloneDate(getViewDate());
newViewDate.setDate(1);
if (currentView === 'date') {
if (newViewDate.getMonth() === 11) {
var newYear = incrementYear();
newViewDate.setMonth(0);
newViewDate.setFullYear(newYear);
props.onMonthChange && props.onMonthChange({
month: 1,
year: newYear
});
setCurrentMonth(0);
} else {
newViewDate.setMonth(newViewDate.getMonth() + 1);
props.onMonthChange && props.onMonthChange({
month: currentMonth + 2,
year: currentYear
});
setCurrentMonth(function (prevState) {
return prevState + 1;
});
}
} else if (currentView === 'month') {
var _newYear2 = newViewDate.getFullYear() + 1;
if (props.yearNavigator) {
var maxYear = parseInt(props.yearRange.split(':')[1], 10);
if (_newYear2 > maxYear) {
_newYear2 = maxYear;
}
}
newViewDate.setFullYear(_newYear2);
}
if (currentView === 'month') {
newViewDate.setFullYear(incrementYear());
} else if (currentView === 'year') {
newViewDate.setFullYear(incrementDecade());
}
updateViewDate(event, newViewDate);
event.preventDefault();
};
var populateYearOptions = function populateYearOptions(start, end) {
var _yearOptions = [];
for (var i = start; i <= end; i++) {
yearOptions.push(i);
}
setYearOptions(_yearOptions);
};
var decrementYear = function decrementYear() {
var year = getViewYear();
var _currentYear = year - 1;
setCurrentYear(_currentYear);
if (props.yearNavigator && _currentYear < yearOptions[0]) {
var difference = yearOptions[yearOptions.length - 1] - yearOptions[0];
populateYearOptions(yearOptions[0] - difference, yearOptions[yearOptions.length - 1] - difference);
}
return _currentYear;
};
var incrementYear = function incrementYear() {
var year = getViewYear();
var _currentYear = year + 1;
setCurrentYear(_currentYear);
if (props.yearNavigator && _currentYear.current > yearOptions[yearOptions.length - 1]) {
var difference = yearOptions[yearOptions.length - 1] - yearOptions[0];
populateYearOptions(yearOptions[0] + difference, yearOptions[yearOptions.length - 1] + difference);
}
return _currentYear;
};
var onMonthDropdownChange = function onMonthDropdownChange(event, value) {
var currentViewDate = getViewDate();
var newViewDate = cloneDate(currentViewDate);
newViewDate.setDate(1);
newViewDate.setMonth(parseInt(value, 10));
updateViewDate(event, newViewDate);
};
var onYearDropdownChange = function onYearDropdownChange(event, value) {
var currentViewDate = getViewDate();
var newViewDate = cloneDate(currentViewDate);
newViewDate.setFullYear(parseInt(value, 10));
updateViewDate(event, newViewDate);
};
var onTodayButtonClick = function onTodayButtonClick(event) {
var today = new Date();
var dateMeta = {
day: today.getDate(),
month: today.getMonth(),
year: today.getFullYear(),
today: true,
selectable: true
};
var timeMeta = {
hours: today.getHours(),
minutes: today.getMinutes(),
seconds: props.showSeconds ? today.getSeconds() : 0,
milliseconds: props.showMillisec ? today.getMilliseconds() : 0
};
updateViewDate(event, today);
onDateSelect(event, dateMeta, timeMeta);
props.onTodayButtonClick && props.onTodayButtonClick(event);
};
var onClearButtonClick = function onClearButtonClick(event) {
isClearClicked.current = true;
updateModel(event, null);
updateInputfield(null);
setCurrentYear(new Date().getFullYear()); // #7581
hide();
props.onClearButtonClick && props.onClearButtonClick(event);
};
var onPanelClick = function onPanelClick(event) {
if (!props.inline) {
OverlayService.emit('overlay-click', {
originalEvent: event,
target: elementRef.current
});
}
};
var onPanelMouseUp = function onPanelMouseUp(event) {
onPanelClick(event);
};
var onTimePickerElementMouseDown = function onTimePickerElementMouseDown(event, type, direction) {
if (!props.disabled) {
_repeat(event, null, type, direction);
event.preventDefault();
}
};
var onTimePickerElementMouseUp = function onTimePickerElementMouseUp() {
if (!props.disabled) {
clearTimePickerTimer();
}
};
var onTimePickerElementMouseLeave = function onTimePickerElementMouseLeave() {
if (!props.disabled) {
clearTimePickerTimer();
}
};
var _repeat = function repeat(event, interval, type, direction) {
clearTimePickerTimer();
timePickerTimer.current = setTimeout(function () {
_repeat(event, 100, type, direction);
}, interval || 500);
switch (type) {
case 0:
if (direction === 1) {
incrementHour(event);
} else {
decrementHour(event);
}
break;
case 1:
if (direction === 1) {
incrementMinute(event);
} else {
decrementMinute(event);
}
break;
case 2:
if (direction === 1) {
incrementSecond(event);
} else {
decrementSecond(event);
}
break;
case 3:
if (direction === 1) {
incrementMilliSecond(event);
} else {
decrementMilliSecond(event);
}
break;
}
};
var clearTimePickerTimer = function clearTimePickerTimer() {
if (timePickerTimer.current) {
clearTimeout(timePickerTimer.current);
}
};
var roundMinutesToStep = function roundMinutesToStep(minutes) {
if (props.stepMinute) {
return Math.round(minutes / props.stepMinute) * props.stepMinute;
}
return minutes;
};
var incrementHour = function incrementHour(event) {
var currentTime = getCurrentDateTime();
var currentHour = currentTime.getHours();
var newHour = currentHour + props.stepHour;
newHour = newHour >= 24 ? newHour - 24 : newHour;
if (validateHour(newHour, currentTime)) {
if (props.maxDate && props.maxDate.toDateString() === currentTime.toDateString() && props.maxDate.getHours() === newHour) {
if (props.maxDate.getMinutes() < currentTime.getMinutes()) {
if (props.maxDate.getSeconds() < currentTime.getSeconds()) {
if (props.maxDate.getMilliseconds() < currentTime.getMilliseconds()) {
updateTime(event, newHour, props.maxDate.getMinutes(), props.maxDate.getSeconds(), props.maxDate.getMilliseconds());
} else {
updateTime(event, newHour, props.maxDate.getMinutes(), props.maxDate.getSeconds(), currentTime.getMilliseconds());
}
} else {
updateTime(event, newHour, props.maxDate.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
}
} else if (props.maxDate.getMinutes() === currentTime.getMinutes()) {
if (props.maxDate.getSeconds() < currentTime.getSeconds()) {
if (props.maxDate.getMilliseconds() < currentTime.getMilliseconds()) {
updateTime(event, newHour, props.maxDate.getMinutes(), props.maxDate.getSeconds(), props.maxDate.getMilliseconds());
} else {
updateTime(event, newHour, props.maxDate.getMinutes(), props.maxDate.getSeconds(), currentTime.getMilliseconds());
}
} else {
updateTime(event, newHour, props.maxDate.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
}
} else {
updateTime(event, newHour, roundMinutesToStep(currentTime.getMinutes()), currentTime.getSeconds(), currentTime.getMilliseconds());
}
} else {
updateTime(event, newHour, roundMinutesToStep(currentTime.getMinutes()), currentTime.getSeconds(), currentTime.getMilliseconds());
}
}
event.preventDefault();
};
var decrementHour = function decrementHour(event) {
var currentTime = getCurrentDateTime();
var currentHour = currentTime.getHours();
var newHour = currentHour - props.stepHour;
newHour = newHour < 0 ? newHour + 24 : newHour;
if (validateHour(newHour, currentTime)) {
if (props.minDate && props.minDate.toDateString() === currentTime.toDateString() && props.minDate.getHours() === newHour) {
if (props.minDate.getMinutes() > currentTime.getMinutes()) {
if (props.minDate.getSeconds() > currentTime.getSeconds()) {
if (props.minDate.getMilliseconds() > currentTime.getMilliseconds()) {
updateTime(event, newHour, props.minDate.getMinutes(), props.minDate.getSeconds(), props.minDate.getMilliseconds());
} else {
updateTime(event, newHour, props.minDate.getMinutes(), props.minDate.getSeconds(), currentTime.getMilliseconds());
}
} else {
updateTime(event, newHour, props.minDate.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
}
} else if (props.minDate.getMinutes() === currentTime.getMinutes()) {
if (props.minDate.getSeconds() > currentTime.getSeconds()) {
if (props.minDate.getMilliseconds() > currentTime.getMilliseconds()) {
updateTime(event, newHour, props.minDate.getMinutes(), props.minDate.getSeconds(), props.minDate.getMilliseconds());
} else {
updateTime(event, newHour, props.minDate.getMinutes(), props.minDate.getSeconds(), currentTime.getMilliseconds());
}
} else {
updateTime(event, newHour, props.minDate.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
}
} else {
updateTime(event, newHour, roundMinutesToStep(currentTime.getMinutes()), currentTime.getSeconds(), currentTime.getMilliseconds());
}
} else {
updateTime(event, newHour, roundMinutesToStep(currentTime.getMinutes()), currentTime.getSeconds(), currentTime.getMilliseconds());
}
}
event.preventDefault();
};
var doStepMinute = function doStepMinute(currentMinute, step) {
if (props.stepMinute <= 1) {
return step ? currentMinute + step : currentMinute;
}
if (!step) {
step = props.stepMinute;
if (currentMinute % step === 0) {
return currentMinute;
}
}
return Math.floor((currentMinute + step) / step) * step;
};
var incrementMinute = function incrementMinute(event) {
var currentTime = getCurrentDateTime();
var currentMinute = currentTime.getMinutes();
var newMinute = doStepMinute(currentMinute, props.stepMinute);
newMinute = newMinute > 59 ? newMinute - 60 : newMinute;
if (validateMinute(newMinute, currentTime)) {
if (props.maxDate && props.maxDate.toDateString() === currentTime.toDateString() && props.maxDate.getMinutes() === newMinute) {
if (props.maxDate.getSeconds() < currentTime.getSeconds()) {
if (props.maxDate.getMilliseconds() < currentTime.getMilliseconds()) {
updateTime(event, currentTime.getHours(), newMinute, props.maxDate.getSeconds(), props.maxDate.getMilliseconds());
} else {
updateTime(event, currentTime.getHours(), newMinute, props.maxDate.getSeconds(), currentTime.getMilliseconds());
}
} else {
updateTime(event, currentTime.getHours(), newMinute, currentTime.getSeconds(), currentTime.getMilliseconds());
}
} else {
updateTime(event, currentTime.getHours(), newMinute, currentTime.getSeconds(), currentTime.getMilliseconds());
}
}
event.preventDefault();
};
var decrementMinute = function decrementMinute(event) {
var currentTime = getCurrentDateTime();
var currentMinute = currentTime.getMinutes();
var newMinute = doStepMinute(currentMinute, -props.stepMinute);
newMinute = newMinute < 0 ? newMinute + 60 : newMinute;
if (validateMinute(newMinute, currentTime)) {
if (props.minDate && props.minDate.toDateString() === currentTime.toDateString() && props.minDate.getMinutes() === newMinute) {
if (props.minDate.getSeconds() > currentTime.getSeconds()) {
if (props.minDate.getMilliseconds() > currentTime.getMilliseconds()) {
updateTime(event, currentTime.getHours(), newMinute, props.minDate.getSeconds(), props.minDate.getMilliseconds());
} else {
updateTime(event, currentTime.getHours(), newMinute, props.minDate.getSeconds(), currentTime.getMilliseconds());
}
} else {
updateTime(event, currentTime.getHours(), newMinute, currentTime.getSeconds(), currentTime.getMilliseconds());
}
} else {
updateTime(event, currentTime.getHours(), newMinute, currentTime.getSeconds(), currentTime.getMilliseconds());
}
}
event.preventDefault();
};
var incrementSecond = function incrementSecond(event) {
var currentTime = getCurrentDateTime();
var currentSecond = currentTime.getSeconds();
var newSecond = currentSecond + props.stepSecond;
newSecond = newSecond > 59 ? newSecond - 60 : newSecond;
if (validateSecond(newSecond, currentTime)) {
if (props.maxDate && props.maxDate.toDateString() === currentTime.toDateString() && props.maxDate.getSeconds() === newSecond) {
if (props.maxDate.getMilliseconds() < currentTime.getMilliseconds()) {
updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, props.maxDate.getMilliseconds());
} else {
updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, currentTime.getMilliseconds());
}
} else {
updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, currentTime.getMilliseconds());
}
}
event.preventDefault();
};
var decrementSecond = function decrementSecond(event) {
var currentTime = getCurrentDateTime();
var currentSecond = currentTime.getSeconds();
var newSecond = currentSecond - props.stepSecond;
newSecond = newSecond < 0 ? newSecond + 60 : newSecond;
if (validateSecond(newSecond, currentTime)) {
if (props.minDate && props.minDate.toDateString() === currentTime.toDateString() && props.minDate.getSeconds() === newSecond) {
if (props.minDate.getMilliseconds() > currentTime.getMilliseconds()) {
updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, props.minDate.getMilliseconds());
} else {
updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, currentTime.getMilliseconds());
}
} else {
updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, currentTime.getMilliseconds());
}
}
event.preventDefault();
};
var incrementMilliSecond = function incrementMilliSecond(event) {
var currentTime = getCurrentDateTime();
var currentMillisecond = currentTime.getMilliseconds();
var newMillisecond = currentMillisecond + props.stepMillisec;
newMillisecond = newMillisecond > 999 ? newMillisecond - 1000 : newMillisecond;
if (validateMillisecond(newMillisecond, currentTime)) {
updateTime(event, currentTime.getHours(), currentTime.getMinutes(), currentTime.getSeconds(), newMillisecond);
}
event.preventDefault();
};
var decrementMilliSecond = function decrementMilliSecond(event) {
var currentTime = getCurrentDateTime();
var currentMillisecond = currentTime.getMilliseconds();
var newMillisecond = currentMillisecond - props.stepMillisec;
newMillisecond = newMillisecond < 0 ? newMillisecond + 999 : newMillisecond;
if (validateMillisecond(newMillisecond, currentTime)) {
updateTime(event, currentTime.getHours(), currentTime.getMinutes(), currentTime.getSeconds(), newMillisecond);
}
event.preventDefault();
};
var toggleAmPm = function toggleAmPm(event) {
var currentTime = getCurrentDateTime();
var currentHour = currentTime.getHours();
var newHour = currentHour >= 12 ? currentHour - 12 : currentHour + 12;
if (validateHour(convertTo24Hour(newHour, currentHour > 11), currentTime)) {
updateTime(event, newHour, currentTime.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
}
event.preventDefault();
};
var getViewDate = function getViewDate(date) {
var propValue = props.value;
var viewDate = date || (props.onViewDateChange ? props.viewDate : viewDateState);
if (Array.isArray(propValue)) {
propValue = propValue[0];
}
return viewDate && isValidDate(viewDate) ? viewDate : propValue && isValidDate(propValue) ? propValue : new Date();
};
var getCurrentDateTime = function getCurrentDateTime() {
if (isSingleSelection()) {
return props.value && props.value instanceof Date ? cloneDate(props.value) : getViewDate();
} else if (isMultipleSelection()) {
if (props.value && props.value.length) {
return cloneDate(props.value[props.value.length - 1]);
}
} else if (isRangeSelection()) {
if (props.value && props.value.length) {
var startDate = cloneDate(props.value[0]);
var endDate = cloneDate(props.value[1]);
return endDate || startDate;
}
}
return new Date();
};
var cloneDate = function cloneDate(date) {
return isValidDate(date) ? new Date(date.valueOf()) : date;
};
var isValidDate = function isValidDate(date) {
return date instanceof Date && !isNaN(date);
};
var convertTo24Hour = function convertTo24Hour(hour, pm) {
if (props.hourFormat === '12') {
return hour === 12 ? pm ? 12 : 0 : pm ? hour + 12 : hour;
}
return hour;
};
var validateHour = function validateHour(hour, value) {
var valid = true;
var valueDateString = value ? value.toDateString() : null;
if (props.minDate && valueDateString && props.minDate.toDateString() === valueDateString) {
if (props.minDate.getHours() > hour) {
valid = false;
}
}
if (props.maxDate && valueDateString && props.maxDate.toDateString() === valueDateString) {
if (props.maxDate.getHours() < hour) {
valid = false;
}
}
return valid;
};
var validateMinute = function validateMinute(minute, value) {
var valid = true;
var valueDateString = value ? value.toDateString() : null;
if (props.minDate && valueDateString && props.minDate.toDateString() === valueDateString) {
if (value.getHours() === props.minDate.getHours()) {
if (props.minDate.getMinutes() > minute) {
valid = false;
}
}
}
if (props.maxDate && valueDateString && props.maxDate.toDateString() === valueDateString) {
if (value.getHours() === props.maxDate.getHours()) {
if (props.maxDate.getMinutes() < minute) {
valid = false;
}
}
}
return valid;
};
var validateSecond = function validateSecond(second, value) {
var valid = true;
var valueDateString = value ? value.toDateString() : null;
if (props.minDate && valueDateString && props.minDate.toDateString() === valueDateString) {
if (value.getHours() === props.minDate.getHours() && value.getMinutes() === props.minDate.getMinutes()) {
if (props.minDate.getSeconds() > second) {
valid = false;
}
}
}
if (props.maxDate && valueDateString && props.maxDate.toDateString() === valueDateString) {
if (value.getHours() === props.maxDate.getHours() && value.getMinutes() === props.maxDate.getMinutes()) {
if (props.maxDate.getSeconds() < second) {
valid = false;
}
}
}
return valid;
};
var validateMillisecond = function validateMillisecond(millisecond, value) {
var valid = true;
var valueDateString = value ? value.toDateString() : null;
if (props.minDate && valueDateString && props.minDate.toDateString() === valueDateString) {
if (value.getHours() === props.minDate.getHours() && value.getSeconds() === props.minDate.getSeconds() && value.getMinutes() === props.minDate.getMinutes()) {
if (props.minDate.getMilliseconds() > millisecond) {
valid = false;
}
}
}
if (props.maxDate && valueDateString && props.maxDate.toDateString() === valueDateString) {
if (value.getHours() === props.maxDate.getHours() && value.getSeconds() === props.maxDate.getSeconds() && value.getMinutes() === props.maxDate.getMinutes()) {
if (props.maxDate.getMilliseconds() < millisecond) {
valid = false;
}
}
}
return valid;
};
var validateDate = function validateDate(value) {
if (props.yearNavigator) {
var _ref3 = props.yearRange ? props.yearRange.split(':').map(function (year) {
return parseInt(year, 10);
}) : [null, null],
_ref4 = _slicedToArray(_ref3, 2),
minRangeYear = _ref4[0],
maxRangeYear = _ref4[1];
var viewYear = value.getFullYear();
var minYear = null;
var maxYear = null;
if (minRangeYear !== null) {
minYear = props.minDate ? Math.max(props.minDate.getFullYear(), minRangeYear) : minRangeYear;
} else {
var _props$minDate;
minYear = ((_props$minDate = props.minDate) === null || _props$minDate === void 0 ? void 0 : _props$minDate.getFullYear()) || minRangeYear;
}
if (maxRangeYear !== null) {
maxYear = props.maxDate ? Math.min(props.maxDate.getFullYear(), maxRangeYear) : maxRangeYear;
} else {
var _props$maxDate;
maxYear = ((_props$maxDate = props.maxDate) === null || _props$maxDate === void 0 ? void 0 : _props$maxDate.getFullYear()) || maxRangeYear;
}
if (minYear && minYear > viewYear) viewYear = minYear;
if (maxYear && maxYear < viewYear) viewYear = maxYear;
value.setFullYear(viewYear);
}
if (renderMonthsNavigator(0)) {
var viewMonth = value.getMonth();
var viewMonthWithMinMax = parseInt(isInMinYear(value) && Math.max(props.minDate.getMonth(), viewMonth).toString() || isInMaxYear(value) && Math.min(props.maxDate.getMonth(), viewMonth).toString() || viewMonth);
value.setMonth(viewMonthWithMinMax);
}
};
var updateTime = function updateTime(event, hour, minute, second, millisecond) {
var newDateTime = getCurrentDateTime();
newDateTime.setHours(hour);
newDateTime.setMinutes(minute);
newDateTime.setSeconds(second);
newDateTime.setMilliseconds(millisecond);
if (isMultipleSelection()) {
if (props.value && props.value.length) {
var value = _toConsumableArray(props.value);
value[value.length - 1] = newDateTime;
newDateTime = value;
} else {
newDateTime = [newDateTime];
}
} else if (isRangeSelection()) {
if (props.value && props.value.length) {
var startDate = props.value[0];
var endDate = props.value[1];
newDateTime = endDate ? [startDate, newDateTime] : [newDateTime, null];
} else {
newDateTime = [newDateTime, null];
}
}
updateModel(event, newDateTime);
if (props.onSelect) {
props.onSelect({
originalEvent: event,
value: newDateTime
});
}
updateInputfield(newDateTime);
};
var updateViewDate = function updateViewDate(event, value) {
validateDate(value);
if (props.onViewDateChange && event) {
props.onViewDateChange({
originalEvent: event,
value: value
});
} else {
viewStateChanged.current = true;
setViewDateState(value);
}
if (!value) onClearButtonClick(event);
};
var setNavigationState = function setNavigationState(newViewDate) {
if (!newViewDate || !props.showMinMaxRange || props.view !== 'date' || !overlayRef.current) {
return;
}
var navPrev = DomHandler.findSingle(overlayRef.current, '[data-pc-section="previousbutton"]');
var navNext = DomHandler.findSingle(overlayRef.current, '[data-pc-section="nextbutton"]');
if (props.disabled) {
!isUnstyled() && DomHandler.addClass(navPrev, 'p-disabled');
navPrev.setAttribute('data-p-disabled', true);
!isUnstyled() && DomHandler.addClass(navNext, 'p-disabled');
navNext.setAttribute('data-p-disabled', true);
return;
}
// previous (check first day of month at 00:00:00)
if (props.minDate) {
var firstDayOfMonth = cloneDate(newViewDate);
if (firstDayOfMonth.getMonth() === 0) {
firstDayOfMonth.setMonth(11, 1);
firstDayOfMonth.setFullYear(firstDayOfMonth.getFullYear() - 1);
} else {
firstDayOfMonth.setMonth(firstDayOfMonth.getMonth(), 1);
}
firstDayOfMonth.setHours(0);
firstDayOfMonth.setMinutes(0);
firstDayOfMonth.setSeconds(0);
if (props.minDate > firstDayOfMonth) {
DomHandler.addClass(navPrev, 'p-disabled');
} else {
DomHandler.removeClass(navPrev, 'p-disabled');
}
}
// next (check last day of month at 11:59:59)
if (props.maxDate) {
var lastDayOfMonth = cloneDate(newViewDate);
if (lastDayOfMonth.getMonth() === 11) {
lastDayOfMonth.setMonth(0, 1);
lastDayOfMonth.setFullYear(lastDayOfMonth.getFullYear() + 1);
} else {
lastDayOfMonth.setMonth(lastDayOfMonth.getMonth() + 1, 1);
}
lastDayOfMonth.setHours(0);
lastDayOfMonth.setMinutes(0);
lastDayOfMonth.setSeconds(0);
lastDayOfMonth.setSeconds(-1);
if (props.maxDate < lastDayOfMonth) {
DomHandler.addClass(navNext, 'p-disabled');
} else {
DomHandler.removeClass(navNext, 'p-disabled');
}
}
};
var onDateCellKeydown = function onDateCellKeydown(event, date, groupIndex) {
var cellContent = event.currentTarget;
var cell = cellContent.parentElement;
var cellIndex = DomHandler.index(cell);
switch (event.code) {
case 'ArrowDown':
{
cellContent.tabIndex = '-1';
var nextRow = cell.parentElement.nextElementSibling;
if (nextRow) {
var tableRowIndex = DomHandler.index(cell.parentElement);
var tableRows = Array.from(cell.parentElement.parentElement.children);
var nextTableRows = tableRows.slice(tableRowIndex + 1);
var hasNextFocusableDate = nextTableRows.find(function (el) {
var focusCell = el.children[cellIndex].children[0];
return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
});
if (hasNextFocusableDate) {
var focusCell = hasNextFocusableDate.children[cellIndex].children[0];
focusCell.tabIndex = '0';
focusCell.focus();
} else {
navigation.current = {
backward: false
};
navForward(event);
}
} else {
navigation.current = {
backward: false
};
navForward(event);
}
event.preventDefault();
break;
}
case 'ArrowUp':
{
cellContent.tabIndex = '-1';
if (event.altKey) {
hide(null, reFocusInputField);
} else {
var prevRow = cell.parentElement.previousElementSibling;
if (prevRow) {
var _tableRowIndex = DomHandler.index(cell.parentElement);
var _tableRows = Array.from(cell.parentElement.parentElement.children);
var prevTableRows = _tableRows.slice(0, _tableRowIndex).reverse();
var _hasNextFocusableDate = prevTableRows.find(function (el) {
var focusCell = el.children[cellIndex].children[0];
return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
});
if (_hasNextFocusableDate) {
var _focusCell = _hasNextFocusableDate.children[cellIndex].children[0];
_focusCell.tabIndex = '0';
_focusCell.focus();
} else {
navigation.current = {
backward: true
};
navBackward(event);
}
} else {
navigation.current = {
backward: true
};
navBackward(event);
}
}
event.preventDefault();
break;
}
case 'ArrowLeft':
{
cellContent.tabIndex = '-1';
var prevCell = cell.previousElementSibling;
if (prevCell) {
var cells = Array.from(cell.parentElement.children);
var prevCells = cells.slice(0, cellIndex).reverse();
var _hasNextFocusableDate2 = prevCells.find(function (el) {
var focusCell = el.children[0];
return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
});
if (_hasNextFocusableDate2) {
var _focusCell2 = _hasNextFocusableDate2.children[0];
_focusCell2.tabIndex = '0';
_focusCell2.focus();
} else {
navigateToMonth(true, groupIndex, event);
}
} else {
navigateToMonth(true, groupIndex, event);
}
event.preventDefault();
break;
}
case 'ArrowRight':
{
cellContent.tabIndex = '-1';
var nextCell = cell.nextElementSibling;
if (nextCell) {
var _cells = Array.from(cell.parentElement.children);
var nextCells = _cells.slice(cellIndex + 1);
var _hasNextFocusableDate3 = nextCells.find(function (el) {
var focusCell = el.children[0];
return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
});
if (_hasNextFocusableDate3) {
var _focusCell3 = _hasNextFocusableDate3.children[0];
_focusCell3.tabIndex = '0';
_focusCell3.focus();
} else {
navigateToMonth(false, groupIndex, event);
}
} else {
navigateToMonth(false, groupIndex, event);
}
event.preventDefault();
break;
}
case 'Enter':
case 'NumpadEnter':
case 'Space':
{
onDateSelect(event, date);
event.preventDefault();
break;
}
case 'Escape':
{
hide(null, reFocusInputField);
event.preventDefault();
break;
}
case 'Tab':
{
if (!props.inline) {
trapFocus(event);
}
break;
}
case 'Home':
{
cellContent.tabIndex = '-1';
var currentRow = cell.parentElement;
var _focusCell4 = currentRow.children[0].children[0];
if (DomHandler.getAttribute(_focusCell4, 'data-p-disabled')) {
navigateToMonth(groupIndex, true, event);
} else {
_focusCell4.tabIndex = '0';
_focusCell4.focus();
}
event.preventDefault();
break;
}
case 'End':
{
cellContent.tabIndex = '-1';
var _currentRow = cell.parentElement;
var _focusCell5 = _currentRow.children[_currentRow.children.length - 1].children[0];
if (DomHandler.getAttribute(_focusCell5, 'data-p-disabled')) {
navigateToMonth(groupIndex, false, event);
} else {
_focusCell5.tabIndex = '0';
_focusCell5.focus();
}
event.preventDefault();
break;
}
case 'PageUp':
{
cellContent.tabIndex = '-1';
if (event.shiftKey) {
navigation.current = {
backward: true
};
navBackward(event);
} else {
navigateToMonth(groupIndex, true, event);
}
event.preventDefault();
break;
}
case 'PageDown':
{
cellContent.tabIndex = '-1';
if (event.shiftKey) {
navigation.current = {
backward: false
};
navForward(event);
} else {
navigateToMonth(groupIndex, false, event);
}
event.preventDefault();
break;
}
}
};
var navigateToMonth = function navigateToMonth(prev, groupIndex, event) {
if (prev) {
if (props.numberOfMonths === 1 || groupIndex === 0) {
navigation.current = {
backward: true
};
navBackward(event);
} else {
var prevMonthContainer = overlayRef.current.children[0].children[groupIndex - 1];
var cells = DomHandler.find(prevMonthContainer, 'table td span:not([data-p-disabled="true"])');
var focusCell = cells[cells.length - 1];
focusCell.tabIndex = '0';
focusCell.focus();
}
} else if (props.numberOfMonths === 1 || groupIndex === props.numberOfMonths - 1) {
navigation.current = {
backward: false
};
navForward(event);
} else {
var nextMonthContainer = overlayRef.current.children[0].children[groupIndex + 1];
var _focusCell6 = DomHandler.findSingle(nextMonthContainer, 'table td span:not([data-p-disabled="true"])');
_focusCell6.tabIndex = '0';
_focusCell6.focus();
}
};
var onMonthCellKeydown = function onMonthCellKeydown(event, index) {
var cell = event.currentTarget;
switch (event.code) {
//arrows
case 'ArrowUp':
case 'ArrowDown':
{
cell.tabIndex = '-1';
var cells = cell.parentElement.children;
var cellIndex = DomHandler.index(cell);
var nextCell = cells[event.which === 40 ? cellIndex + 3 : cellIndex - 3];
if (nextCell) {
nextCell.tabIndex = '0';
nextCell.focus();
}
event.preventDefault();
break;
}
case 'ArrowLeft':
{
cell.tabIndex = '-1';
var prevCell = cell.previousElementSibling;
if (prevCell) {
prevCell.tabIndex = '0';
prevCell.focus();
} else {
navigation.current = {
backward: true
};
navBackward(event);
}
event.preventDefault();
break;
}
case 'ArrowRight':
{
cell.tabIndex = '-1';
var _nextCell = cell.nextElementSibling;
if (_nextCell) {
_nextCell.tabIndex = '0';
_nextCell.focus();
} else {
navigation.current = {
backward: false
};
navForward(event);
}
event.preventDefault();
break;
}
case 'PageUp':
{
if (event.shiftKey) {
return;
}
navigation.current = {
backward: true
};
navBackward(event);
break;
}
case 'PageDown':
{
if (event.shiftKey) {
return;
}
navigation.current = {
backward: false
};
navForward(event);
break;
}
case 'Enter':
case 'NumpadEnter':
case 'Space':
{
if (props.view !== 'month') {
viewChangedWithKeyDown.current = true;
}
onMonthSelect(event, index);
event.preventDefault();
break;
}
case 'Escape':
{
hide(null, reFocusInputField);
event.preventDefault();
break;
}
case 'Tab':
{
trapFocus(event);
break;
}
}
};
var onYearCellKeydown = function onYearCellKeydown(event, index) {
var cell = event.currentTarget;
switch (event.code) {
//arrows
case 'ArrowUp':
case 'ArrowDown':
{
cell.tabIndex = '-1';
var cells = cell.parentElement.children;
var cellIndex = DomHandler.index(cell);
var nextCell = cells[event.code === 'ArrowDown' ? cellIndex + 2 : cellIndex - 2];
if (nextCell) {
nextCell.tabIndex = '0';
nextCell.focus();
}
event.preventDefault();
break;
}
case 'ArrowLeft':
{
cell.tabIndex = '-1';
var prevCell = cell.previousElementSibling;
if (prevCell) {
prevCell.tabIndex = '0';
prevCell.focus();
} else {
navigation.current = {
backward: true
};
navBackward(event);
}
event.preventDefault();
break;
}
case 'ArrowRight':
{
cell.tabIndex = '-1';
var _nextCell2 = cell.nextElementSibling;
if (_nextCell2) {
_nextCell2.tabIndex = '0';
_nextCell2.focus();
} else {
navigation.current = {
backward: false
};
navForward(event);
}
event.preventDefault();
break;
}
case 'PageUp':
{
if (event.shiftKey) {
return;
}
navigation.current = {
backward: true
};
navBackward(event);
break;
}
case 'PageDown':
{
if (event.shiftKey) {
return;
}
navigation.current = {
backward: false
};
navForward(event);
break;
}
case 'Enter':
case 'NumpadEnter':
case 'Space':
{
if (props.view !== 'year') {
viewChangedWithKeyDown.current = true;
}
onYearSelect(event, index);
event.preventDefault();
break;
}
case 'Escape':
{
hide(null, reFocusInputField);
event.preventDefault();
break;
}
case 'Tab':
{
trapFocus(event);
break;
}
}
};
var onDateSelect = function onDateSelect(event, dateMeta, timeMeta, isUpdateViewDate) {
if (!event) {
return;
}
if (props.disabled || !dateMeta.selectable) {
event.preventDefault();
return;
}
DomHandler.find(overlayRef.current, 'table td span:not([data-p-disabled="true"])').forEach(function (cell) {
return cell.tabIndex = -1;
});
event.currentTarget.focus();
if (isMultipleSelection()) {
if (isSelected(dateMeta)) {
var value = props.value.filter(function (date) {
return !isDateEquals(date, dateMeta);
});
updateModel(event, value);
updateInputfield(value);
} else if (!props.maxDateCount || !props.value || props.maxDateCount > props.value.length) {
selectDate(event, dateMeta, timeMeta);
}
} else {
selectDate(event, dateMeta, timeMeta);
}
if (!props.inline && isSingleSelection() && (!props.showTime || props.hideOnDateTimeSelect) && !isUpdateViewDate) {
setTimeout(function () {
hide('dateselect');
reFocusInputField();
}, 100);
if (touchUIMask.current) {
disableModality();
}
}
event.preventDefault();
};
var selectTime = function selectTime(date, timeMeta) {
if (props.showTime) {
var hours;
var minutes;
var seconds;
var milliseconds;
if (timeMeta) {
hours = timeMeta.hours;
minutes = timeMeta.minutes;
seconds = timeMeta.seconds;
milliseconds = timeMeta.milliseconds;
} else {
var time = getCurrentDateTime();
var _ref5 = [time.getHours(), time.getMinutes(), props.showSeconds ? time.getSeconds() : 0, props.showMillisec ? time.getMilliseconds() : 0];
hours = _ref5[0];
minutes = _ref5[1];
seconds = _ref5[2];
milliseconds = _ref5[3];
}
date.setHours(hours);
date.setMinutes(doStepMinute(minutes));
date.setSeconds(seconds);
date.setMilliseconds(milliseconds);
}
};
var selectDate = function selectDate(event, dateMeta, timeMeta) {
var date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
selectTime(date, timeMeta);
if (props.minDate && props.minDate > date) {
date = props.minDate;
}
if (props.maxDate && props.maxDate < date) {
date = props.maxDate;
}
var selectedValues = date;
if (isSingleSelection()) {
updateModel(event, date);
} else if (isMultipleSelection()) {
selectedValues = props.value ? [].concat(_toConsumableArray(props.value), [date]) : [date];
updateModel(event, selectedValues);
} else if (isRangeSelection()) {
if (props.value && props.value.length) {
var startDate = props.value[0];
var endDate = props.value[1];
if (!endDate) {
if (date.getTime() >= startDate.getTime()) {
endDate = date;
} else {
endDate = startDate;
startDate = date;
}
} else {
startDate = date;
endDate = null;
}
selectedValues = [startDate, endDate];
updateModel(event, selectedValues);
if (props.hideOnRangeSelection && endDate !== null) {
setTimeout(function () {
setOverlayVisibleState(false);
}, 150);
}
} else {
selectedValues = [date, null];
updateModel(event, selectedValues);
}
}
if (props.onSelect) {
props.onSelect({
originalEvent: event,
value: date
});
}
updateInputfield(selectedValues);
};
var decrementDecade = function decrementDecade() {
var _currentYear = currentYear - 10;
setCurrentYear(_currentYear);
return _currentYear;
};
var incrementDecade = function incrementDecade() {
var _currentYear = currentYear + 10;
setCurrentYear(_currentYear);
return _currentYear;
};
var switchToMonthView = function switchToMonthView(event) {
if (event && event.code && (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space')) {
viewChangedWithKeyDown.current = true;
}
setCurrentView('month');
event.preventDefault();
};
var switchToYearView = function switchToYearView(event) {
if (event && event.code && (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space')) {
viewChangedWithKeyDown.current = true;
}
setCurrentView('year');
event.preventDefault();
};
var onMonthSelect = function onMonthSelect(event, month) {
if (props.view === 'month') {
var year = getViewYear();
onDateSelect(event, {
year: year,
month: month,
day: 1,
selectable: true
});
event.preventDefault();
} else {
setCurrentMonth(month);
createMonthsMeta(month, currentYear);
var currentDate = cloneDate(getCurrentDateTime());
currentDate.setDate(1); // #2948 always set to 1st of month
currentDate.setMonth(month);
currentDate.setYear(currentYear);
setViewDateState(currentDate);
setCurrentView('date');
props.onMonthChange && props.onMonthChange({
month: month + 1,
year: currentYear
});
updateViewDate(event, currentDate);
onViewDateSelect({
event: event,
date: currentDate
});
}
};
var getViewYear = function getViewYear() {
return props.yearNavigator ? getViewDate().getFullYear() : currentYear;
};
var onYearSelect = function onYearSelect(event, year) {
if (props.view === 'year') {
onDateSelect(event, {
year: year,
month: 0,
day: 1,
selectable: true
});
} else {
setCurrentYear(year);
setCurrentView('month');
props.onMonthChange && props.onMonthChange({
month: currentMonth + 1,
year: year
});
}
};
var updateModel = function updateModel(event, value) {
if (props.onChange) {
var newValue = cloneDate(value);
viewStateChanged.current = true;
onChangeRef.current({
originalEvent: event,
value: newValue,
stopPropagation: function stopPropagation() {
event === null || event === void 0 || event.stopPropagation();
},
preventDefault: function preventDefault() {
event === null || event === void 0 || event.preventDefault();
},
target: {
name: props.name,
id: props.id,
value: newValue
}
});
}
};
var show = function show(type) {
if (props.onVisibleChange) {
props.onVisibleChange({
visible: true,
type: type
});
} else {
setOverlayVisibleState(true);
overlayEventListener.current = function (e) {
if (!isOutsideClicked(e) && visible) {
isOverlayClicked.current = true;
}
};
OverlayService.on('overlay-click', overlayEventListener.current);
}
};
var hide = function hide(type, callback) {
var _hideCallback = function _hideCallback() {
viewStateChanged.current = false;
ignoreFocusFunctionality.current = false;
isOverlayClicked.current = false;
callback && callback();
OverlayService.off('overlay-click', overlayEventListener.current);
overlayEventListener.current = null;
};
props.touchUI && disableModality();
if (props.onVisibleChange) {
props.onVisibleChange({
visible: type !== 'dateselect',
// false only if selecting a value to close panel
type: type,
callback: _hideCallback
});
} else {
setOverlayVisibleState(false);
_hideCallback();
}
};
var onOverlayEnter = function onOverlayEnter() {
var styles = props.touchUI ? {
position: 'fixed',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)'
} : !props.inline ? {
position: 'absolute',
top: '0',
left: '0'
} : undefined;
DomHandler.addStyles(overlayRef.current, styles);
if (props.autoZIndex) {
var key = props.touchUI ? 'modal' : 'overlay';
ZIndexUtils.set(key, overlayRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, props.baseZIndex || context && context.zIndex[key] || PrimeReact.zIndex[key]);
}
if (!props.touchUI && overlayRef && overlayRef.current && inputRef && inputRef.current && !appendDisabled()) {
var inputWidth = DomHandler.getOuterWidth(inputRef.current);
// #5435 must have reasonable width if input is too small
if (inputWidth < 220) {
inputWidth = 220;
}
if (props.view === 'date') {
overlayRef.current.style.width = DomHandler.getOuterWidth(overlayRef.current) + 'px';
} else {
overlayRef.current.style.width = inputWidth + 'px';
}
// #5830 Tailwind does not need a min width it breaks the styling
if (!isUnstyled()) {
overlayRef.current.style.minWidth = inputWidth + 'px';
}
}
alignOverlay();
};
var onOverlayEntered = function onOverlayEntered() {
bindOverlayListener();
props.onShow && props.onShow();
setFocusedState(false);
};
var onOverlayExit = function onOverlayExit() {
unbindOverlayListener();
};
var onOverlayExited = function onOverlayExited() {
ZIndexUtils.clear(overlayRef.current);
props.onHide && props.onHide();
};
var appendDisabled = function appendDisabled() {
var appendTo = props.appendTo || context && context.appendTo || PrimeReact.appendTo;
return appendTo === 'self' || props.inline;
};
var alignOverlay = function alignOverlay() {
if (props.touchUI) {
enableModality();
} else if (overlayRef && overlayRef.current && inputRef && inputRef.current) {
DomHandler.alignOverlay(overlayRef.current, inputRef.current, props.appendTo || context && context.appendTo || PrimeReact.appendTo);
if (appendDisabled()) {
DomHandler.relativePosition(overlayRef.current, inputRef.current);
} else {
DomHandler.absolutePosition(overlayRef.current, inputRef.current);
}
}
// #6093 Forcibly remove minWidth when in unstyled mode
if (isUnstyled()) {
overlayRef.current.style.minWidth = '';
}
};
var enableModality = function enableModality() {
if (!touchUIMask.current) {
touchUIMask.current = document.createElement('div');
touchUIMask.current.style.zIndex = String(ZIndexUtils.get(overlayRef.current) - 1);
!isUnstyled() && DomHandler.addMultipleClasses(touchUIMask.current, 'p-component-overlay p-datepicker-mask p-datepicker-mask-scrollblocker p-component-overlay-enter');
touchUIMaskClickListener.current = function () {
disableModality();
hide();
};
touchUIMask.current.addEventListener('click', touchUIMaskClickListener.current);
document.body.appendChild(touchUIMask.current);
DomHandler.blockBodyScroll();
}
};
var disableModality = function disableModality() {
if (touchUIMask.current) {
if (isUnstyled) {
destroyMask();
} else {
!isUnstyled() && DomHandler.addClass(touchUIMask.current, 'p-component-overlay-leave');
if (DomHandler.hasCSSAnimation(touchUIMask.current) > 0) {
touchUIMask.current.addEventListener('animationend', function () {
destroyMask();
});
} else {
destroyMask();
}
}
}
};
var destroyMask = function destroyMask() {
if (touchUIMask.current) {
touchUIMask.current.removeEventListener('click', touchUIMaskClickListener.current);
touchUIMaskClickListener.current = null;
document.body.removeChild(touchUIMask.current);
touchUIMask.current = null;
}
var bodyChildren = document.body.children;
var hasBlockerMasks;
for (var i = 0; i < bodyChildren.length; i++) {
var bodyChild = bodyChildren[i];
if (DomHandler.hasClass(bodyChild, 'p-datepicker-mask-scrollblocker')) {
hasBlockerMasks = true;
break;
}
}
if (!hasBlockerMasks) {
DomHandler.unblockBodyScroll();
}
};
var isOutsideClicked = function isOutsideClicked(event) {
return elementRef.current && !(elementRef.current.isSameNode(event.target) || isNavIconClicked(event.target) || elementRef.current.contains(event.target) || overlayRef.current && overlayRef.current.contains(event.target));
};
var isNavIconClicked = function isNavIconClicked(target) {
return previousButton.current && (previousButton.current.isSameNode(target) || previousButton.current.contains(target)) || nextButton.current && (nextButton.current.isSameNode(target) || nextButton.current.contains(target));
};
var getFirstDayOfMonthIndex = function getFirstDayOfMonthIndex(month, year) {
var day = new Date();
day.setDate(1);
day.setMonth(month);
day.setFullYear(year);
var dayIndex = day.getDay() + getSundayIndex();
return dayIndex >= 7 ? dayIndex - 7 : dayIndex;
};
var getDaysCountInMonth = function getDaysCountInMonth(month, year) {
return 32 - daylightSavingAdjust(new Date(year, month, 32)).getDate();
};
var getDaysCountInPrevMonth = function getDaysCountInPrevMonth(month, year) {
var prev = getPreviousMonthAndYear(month, year);
return getDaysCountInMonth(prev.month, prev.year);
};
var daylightSavingAdjust = function daylightSavingAdjust(date) {
if (!date) {
return null;
}
date.setHours(date.getHours() > 12 ? date.getHours() + 2 : 0);
return date;
};
var getPreviousMonthAndYear = function getPreviousMonthAndYear(month, year) {
var m;
var y;
if (month === 0) {
m = 11;
y = year - 1;
} else {
m = month - 1;
y = year;
}
return {
month: m,
year: y
};
};
var getNextMonthAndYear = function getNextMonthAndYear(month, year) {
var m;
var y;
if (month === 11) {
m = 0;
y = year + 1;
} else {
m = month + 1;
y = year;
}
return {
month: m,
year: y
};
};
var getSundayIndex = function getSundayIndex() {
var firstDayOfWeek = localeOption('firstDayOfWeek', props.locale);
return firstDayOfWeek > 0 ? 7 - firstDayOfWeek : 0;
};
var createWeekDaysMeta = function createWeekDaysMeta() {
var weekDays = [];
var _localeOptions = localeOptions(props.locale),
dayIndex = _localeOptions.firstDayOfWeek,
dayNamesMin = _localeOptions.dayNamesMin;
for (var i = 0; i < 7; i++) {
weekDays.push(dayNamesMin[dayIndex]);
dayIndex = dayIndex === 6 ? 0 : ++dayIndex;
}
return weekDays;
};
var createMonthsMeta = function createMonthsMeta(month, year) {
var months = [];
for (var i = 0; i < props.numberOfMonths; i++) {
var m = month + i;
var y = year;
if (m > 11) {
m = m % 11 - 1;
y = year + 1;
}
months.push(createMonthMeta(m, y));
}
return months;
};
var createMonthMeta = function createMonthMeta(month, year) {
var dates = [];
var firstDay = getFirstDayOfMonthIndex(month, year);
var daysLength = getDaysCountInMonth(month, year);
var prevMonthDaysLength = getDaysCountInPrevMonth(month, year);
var dayNo = 1;
var today = new Date();
var weekNumbers = [];
var monthRows = Math.ceil((daysLength + firstDay) / 7);
for (var i = 0; i < monthRows; i++) {
var week = [];
if (i === 0) {
for (var j = prevMonthDaysLength - firstDay + 1; j <= prevMonthDaysLength; j++) {
var prev = getPreviousMonthAndYear(month, year);
week.push({
day: j,
month: prev.month,
year: prev.year,
otherMonth: true,
today: isToday(today, j, prev.month, prev.year),
selectable: isSelectable(j, prev.month, prev.year, true)
});
}
var remainingDaysLength = 7 - week.length;
for (var _j = 0; _j < remainingDaysLength; _j++) {
week.push({
day: dayNo,
month: month,
year: year,
today: isToday(today, dayNo, month, year),
selectable: isSelectable(dayNo, month, year, false)
});
dayNo++;
}
} else {
for (var _j2 = 0; _j2 < 7; _j2++) {
if (dayNo > daysLength) {
var next = getNextMonthAndYear(month, year);
week.push({
day: dayNo - daysLength,
month: next.month,
year: next.year,
otherMonth: true,
today: isToday(today, dayNo - daysLength, next.month, next.year),
selectable: isSelectable(dayNo - daysLength, next.month, next.year, true)
});
} else {
week.push({
day: dayNo,
month: month,
year: year,
today: isToday(today, dayNo, month, year),
selectable: isSelectable(dayNo, month, year, false)
});
}
dayNo++;
}
}
if (props.showWeek) {
weekNumbers.push(getWeekNumber(new Date(week[0].year, week[0].month, week[0].day)));
}
dates.push(week);
}
return {
month: month,
year: year,
dates: dates,
weekNumbers: weekNumbers
};
};
var getWeekNumber = function getWeekNumber(date) {
var checkDate = cloneDate(date);
checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
var time = checkDate.getTime();
checkDate.setMonth(0);
checkDate.setDate(1);
return Math.floor(Math.round((time - checkDate.getTime()) / 86400000) / 7) + 1;
};
var isSelectable = function isSelectable(day, month, year, otherMonth) {
var validMin = true;
var validMax = true;
var validDate = true;
var validDay = true;
var validMonth = true;
if (props.minDate) {
if (props.minDate.getFullYear() > year) {
validMin = false;
} else if (props.minDate.getFullYear() === year) {
if (month > -1 && props.minDate.getMonth() > month) {
validMin = false;
} else if (month > -1 && props.minDate.getMonth() === month) {
if (day > 0 && props.minDate.getDate() > day) {
validMin = false;
}
}
}
}
if (props.maxDate) {
if (props.maxDate.getFullYear() < year) {
validMax = false;
} else if (props.maxDate.getFullYear() === year) {
if (month > -1 && props.maxDate.getMonth() < month) {
validMax = false;
} else if (month > -1 && props.maxDate.getMonth() === month) {
if (day > 0 && props.maxDate.getDate() < day) {
validMax = false;
}
}
}
}
if (props.disabledDates || props.enabledDates || props.disabledDays) {
validDay = !isDayDisabled(day, month, year);
}
if (props.selectOtherMonths === false && otherMonth) {
validMonth = false;
}
return validMin && validMax && validDate && validDay && validMonth;
};
var isSelectableTime = function isSelectableTime(value) {
var validMin = true;
var validMax = true;
if (props.minDate && props.minDate.toDateString() === value.toDateString()) {
if (props.minDate.getHours() > value.getHours()) {
validMin = false;
} else if (props.minDate.getHours() === value.getHours()) {
if (props.minDate.getMinutes() > value.getMinutes()) {
validMin = false;
} else if (props.minDate.getMinutes() === value.getMinutes()) {
if (props.minDate.getSeconds() > value.getSeconds()) {
validMin = false;
} else if (props.minDate.getSeconds() === value.getSeconds()) {
if (props.minDate.getMilliseconds() > value.getMilliseconds()) {
validMin = false;
}
}
}
}
}
if (props.maxDate && props.maxDate.toDateString() === value.toDateString()) {
if (props.maxDate.getHours() < value.getHours()) {
validMax = false;
} else if (props.maxDate.getHours() === value.getHours()) {
if (props.maxDate.getMinutes() < value.getMinutes()) {
validMax = false;
} else if (props.maxDate.getMinutes() === value.getMinutes()) {
if (props.maxDate.getSeconds() < value.getSeconds()) {
validMax = false;
} else if (props.maxDate.getSeconds() === value.getSeconds()) {
if (props.maxDate.getMilliseconds() < value.getMilliseconds()) {
validMax = false;
}
}
}
}
}
return validMin && validMax;
};
var isSelected = function isSelected(dateMeta) {
if (props.value) {
if (isSingleSelection()) {
return isDateEquals(props.value, dateMeta);
} else if (isMultipleSelection()) {
var selected = false;
var _iterator = _createForOfIteratorHelper$e(props.value),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var date = _step.value;
selected = isDateEquals(date, dateMeta);
if (selected) {
break;
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return selected;
} else if (isRangeSelection()) {
if (props.value[1]) {
return isDateEquals(props.value[0], dateMeta) || isDateEquals(props.value[1], dateMeta) || isDateBetween(props.value[0], props.value[1], dateMeta);
}
return isDateEquals(props.value[0], dateMeta);
}
} else {
return false;
}
};
var isComparable = function isComparable() {
return props.value != null && typeof props.value !== 'string';
};
var isMonthSelected = function isMonthSelected(month) {
if (!isComparable()) return false;
if (isMultipleSelection()) {
return props.value.some(function (v) {
return v.getMonth() === month && v.getFullYear() === currentYear;
});
} else if (isRangeSelection()) {
var _props$value = _slicedToArray(props.value, 2),
start = _props$value[0],
end = _props$value[1];
var startYear = start ? start.getFullYear() : null;
var endYear = end ? end.getFullYear() : null;
var startMonth = start ? start.getMonth() : null;
var endMonth = end ? end.getMonth() : null;
if (!end) {
return startYear === currentYear && startMonth === month;
} else {
var currentDate = new Date(currentYear, month, 1);
var startDate = new Date(startYear, startMonth, 1);
var endDate = new Date(endYear, endMonth, 1);
return currentDate >= startDate && currentDate <= endDate;
}
} else {
return props.value.getMonth() === month && props.value.getFullYear() === currentYear;
}
};
var isYearSelected = function isYearSelected(year) {
if (!isComparable()) return false;
if (isMultipleSelection()) {
return props.value.some(function (v) {
return v.getFullYear() === year;
});
} else if (isRangeSelection()) {
var start = props.value[0] ? props.value[0].getFullYear() : null;
var end = props.value[1] ? props.value[1].getFullYear() : null;
return start === year || end === year || start < year && end > year;
} else {
return props.value.getFullYear() === year;
}
};
var switchViewButtonDisabled = function switchViewButtonDisabled() {
return props.numberOfMonths > 1 || props.disabled;
};
var isDateEquals = function isDateEquals(value, dateMeta) {
if (value && value instanceof Date) {
return value.getDate() === dateMeta.day && value.getMonth() === dateMeta.month && value.getFullYear() === dateMeta.year;
}
return false;
};
var isDateBetween = function isDateBetween(start, end, dateMeta) {
var between = false;
if (start && end) {
var date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
return start.getTime() <= date.getTime() && end.getTime() >= date.getTime();
}
return between;
};
var isSingleSelection = function isSingleSelection() {
return props.selectionMode === 'single';
};
var isRangeSelection = function isRangeSelection() {
return props.selectionMode === 'range';
};
var isMultipleSelection = function isMultipleSelection() {
return props.selectionMode === 'multiple';
};
var isToday = function isToday(today, day, month, year) {
return today.getDate() === day && today.getMonth() === month && today.getFullYear() === year;
};
var isDayDisabled = function isDayDisabled(day, month, year) {
var isDisabled = false;
// first check for disabled dates
if (props.disabledDates) {
if (props.disabledDates.some(function (d) {
return d.getFullYear() === year && d.getMonth() === month && d.getDate() === day;
})) {
isDisabled = true;
}
}
// next if not disabled then check for disabled days
if (!isDisabled && props.disabledDays && currentView === 'date') {
var weekday = new Date(year, month, day);
var weekdayNumber = weekday.getDay();
if (props.disabledDays.indexOf(weekdayNumber) !== -1) {
isDisabled = true;
}
}
// last check for enabled dates to force dates enabled
if (props.enabledDates) {
var isEnabled = props.enabledDates.some(function (d) {
return d.getFullYear() === year && d.getMonth() === month && d.getDate() === day;
});
if (isEnabled) {
isDisabled = false;
} else if (!props.disabledDays && !props.disabledDates) {
// disable other dates when only enabledDates are present
isDisabled = true;
}
}
return isDisabled;
};
var isMonthYearDisabled = function isMonthYearDisabled(month, year) {
var daysCountInAllMonth = month === -1 ? new Array(12).fill(0).map(function (_, i) {
return getDaysCountInMonth(i, year);
}) : [getDaysCountInMonth(month, year)];
for (var i = 0; i < daysCountInAllMonth.length; i++) {
var monthDays = daysCountInAllMonth[i];
var _month = month === -1 ? i : month;
for (var day = 1; day <= monthDays; day++) {
var isDateSelectable = isSelectable(day, _month, year);
if (isDateSelectable) {
return false;
}
}
}
return true;
};
var updateInputfield = function updateInputfield(value) {
if (!inputRef.current) {
return;
}
var formattedValue = '';
if (value) {
try {
if (isSingleSelection()) {
formattedValue = isValidDate(value) ? formatDateTime(value) : props.keepInvalid ? value : '';
} else if (isMultipleSelection()) {
for (var i = 0; i < value.length; i++) {
var selectedValue = value[i];
var dateAsString = isValidDate(selectedValue) ? formatDateTime(selectedValue) : '';
formattedValue = formattedValue + dateAsString;
if (i !== value.length - 1) {
formattedValue = formattedValue + ', ';
}
}
} else if (isRangeSelection()) {
if (value && value.length) {
var startDate = value[0];
var endDate = value[1];
formattedValue = isValidDate(startDate) ? formatDateTime(startDate) : '';
if (endDate) {
formattedValue = formattedValue + (isValidDate(endDate) ? ' - ' + formatDateTime(endDate) : '');
}
}
}
} catch (err) {
formattedValue = value;
}
}
inputRef.current.value = formattedValue;
};
var formatDateTime = function formatDateTime(date) {
if (props.formatDateTime) {
return props.formatDateTime(date);
}
var formattedValue = null;
if (date) {
if (props.timeOnly) {
formattedValue = formatTime(date);
} else {
formattedValue = formatDate(date, getDateFormat());
if (props.showTime) {
formattedValue = formattedValue + (' ' + formatTime(date));
}
}
}
return formattedValue;
};
var formatDate = function formatDate(date, format) {
if (!date) {
return '';
}
var iFormat;
var lookAhead = function lookAhead(match) {
var matches = iFormat + 1 < format.length && format.charAt(iFormat + 1) === match;
if (matches) {
iFormat++;
}
return matches;
};
var formatNumber = function formatNumber(match, value, len) {
var num = '' + value;
if (lookAhead(match)) {
while (num.length < len) {
num = '0' + num;
}
}
return num;
};
var formatName = function formatName(match, value, shortNames, longNames) {
return lookAhead(match) ? longNames[value] : shortNames[value];
};
var output = '';
var literal = false;
var _localeOptions2 = localeOptions(props.locale),
dayNamesShort = _localeOptions2.dayNamesShort,
dayNames = _localeOptions2.dayNames,
monthNamesShort = _localeOptions2.monthNamesShort,
monthNames = _localeOptions2.monthNames;
if (date) {
for (iFormat = 0; iFormat < format.length; iFormat++) {
if (literal) {
if (format.charAt(iFormat) === "'" && !lookAhead("'")) {
literal = false;
} else {
output = output + format.charAt(iFormat);
}
} else {
switch (format.charAt(iFormat)) {
case 'd':
output = output + formatNumber('d', date.getDate(), 2);
break;
case 'D':
output = output + formatName('D', date.getDay(), dayNamesShort, dayNames);
break;
case 'o':
output = output + formatNumber('o', Math.round((new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() - new Date(date.getFullYear(), 0, 0).getTime()) / 86400000), 3);
break;
case 'm':
output = output + formatNumber('m', date.getMonth() + 1, 2);
break;
case 'M':
output = output + formatName('M', date.getMonth(), monthNamesShort, monthNames);
break;
case 'y':
output = output + (lookAhead('y') ? date.getFullYear() : (date.getFullYear() % 100 < 10 ? '0' : '') + date.getFullYear() % 100);
break;
case '@':
output = output + date.getTime();
break;
case '!':
output = output + (date.getTime() * 10000 + ticksTo1970);
break;
case "'":
if (lookAhead("'")) {
output = output + "'";
} else {
literal = true;
}
break;
default:
output = output + format.charAt(iFormat);
}
}
}
}
return output;
};
var formatTime = function formatTime(date) {
if (!date) {
return '';
}
var output = '';
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var milliseconds = date.getMilliseconds();
if (props.hourFormat === '12' && hours > 11 && hours !== 12) {
hours = hours - 12;
}
if (props.hourFormat === '12') {
output = output + (hours === 0 ? 12 : hours < 10 ? '0' + hours : hours);
} else {
output = output + (hours < 10 ? '0' + hours : hours);
}
output = output + ':';
output = output + (minutes < 10 ? '0' + minutes : minutes);
if (props.showSeconds) {
output = output + ':';
output = output + (seconds < 10 ? '0' + seconds : seconds);
}
if (props.showMillisec) {
output = output + '.';
output = output + (milliseconds < 100 ? (milliseconds < 10 ? '00' : '0') + milliseconds : milliseconds);
}
if (props.hourFormat === '12') {
output = output + (date.getHours() > 11 ? ' PM' : ' AM');
}
return output;
};
var parseValueFromString = function parseValueFromString(text) {
if (!text || text.trim().length === 0) {
return null;
}
var value;
if (isSingleSelection()) {
value = parseDateTime(text);
} else if (isMultipleSelection()) {
var tokens = text.split(',');
value = [];
var _iterator2 = _createForOfIteratorHelper$e(tokens),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var token = _step2.value;
value.push(parseDateTime(token.trim()));
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
} else if (isRangeSelection()) {
var _tokens = text.split(' - ');
value = [];
for (var i = 0; i < _tokens.length; i++) {
value[i] = parseDateTime(_tokens[i].trim());
}
}
return value;
};
var parseDateTime = function parseDateTime(text) {
if (props.parseDateTime) {
return props.parseDateTime(text);
}
var date;
if (props.timeOnly) {
date = new Date();
var match = text.match(/(\d{1,2}:\d{2}(?::\d{2})?(?:\.\d{1,3})?)\s?(AM|PM)?/i);
if (match) {
populateTime(date, match[1], match[2]);
} else {
return null;
}
} else if (props.showTime) {
var time12 = /(\d{1,2}:\d{2}(?::\d{2})?(?:\.\d{1,3})?)\s?(AM|PM)/i;
var time24 = /(\d{1,2}:\d{2}(?::\d{2})?(?:\.\d{1,3})?)$/;
var _match, datePart, timePart, ampm;
if (props.hourFormat === '12' && (_match = text.match(time12))) {
timePart = _match[1];
ampm = _match[2];
datePart = text.replace(time12, '').trim();
} else if (props.hourFormat === '24' && (_match = text.match(time24))) {
timePart = _match[1];
datePart = text.replace(time24, '').trim();
}
if (datePart && timePart) {
date = parseDate(datePart, getDateFormat());
populateTime(date, timePart, ampm);
} else {
date = parseDate(text, getDateFormat());
}
} else {
date = parseDate(text, getDateFormat());
}
return date;
};
var populateTime = function populateTime(value, timeString, ampm) {
if (props.hourFormat === '12' && ampm !== 'PM' && ampm !== 'AM') {
throw new Error('Invalid Time');
}
var time = parseTime(timeString, ampm);
value.setHours(time.hour);
value.setMinutes(time.minute);
value.setSeconds(time.second);
value.setMilliseconds(time.millisecond);
};
var parseTime = function parseTime(value, ampm) {
value = props.showMillisec ? value.replace('.', ':') : value;
var tokens = value.split(':');
var validTokenLength = props.showSeconds ? 3 : 2;
validTokenLength = props.showMillisec ? validTokenLength + 1 : validTokenLength;
if (tokens.length !== validTokenLength || tokens[0].length !== 2 || tokens[1].length !== 2 || props.showSeconds && tokens[2].length !== 2 || props.showMillisec && tokens[3].length !== 3) {
throw new Error('Invalid time');
}
var h = parseInt(tokens[0], 10);
var m = parseInt(tokens[1], 10);
var s = props.showSeconds ? parseInt(tokens[2], 10) : null;
var ms = props.showMillisec ? parseInt(tokens[3], 10) : null;
if (isNaN(h) || isNaN(m) || h > 23 || m > 59 || props.hourFormat === '12' && h > 12 || props.showSeconds && (isNaN(s) || s > 59) || props.showMillisec && (isNaN(s) || s > 1000)) {
throw new Error('Invalid time');
} else {
if (props.hourFormat === '12') {
if (h !== 12 && ampm === 'PM') {
h = h + 12;
}
if (h === 12 && ampm === 'AM') {
h = h - 12;
}
}
return {
hour: h,
minute: m,
second: s,
millisecond: ms
};
}
};
// Ported from jquery-ui datepicker parseDate
var parseDate = function parseDate(value, format) {
if (format == null || value == null) {
throw new Error('Invalid arguments');
}
value = _typeof(value) === 'object' ? value.toString() : value + '';
if (value === '') {
return null;
}
var iFormat;
var dim;
var extra;
var iValue = 0;
var shortYearCutoff = typeof props.shortYearCutoff !== 'string' ? props.shortYearCutoff : new Date().getFullYear() % 100 + parseInt(props.shortYearCutoff, 10);
var year = -1;
var month = -1;
var day = -1;
var doy = -1;
var literal = false;
var date;
var lookAhead = function lookAhead(match) {
var matches = iFormat + 1 < format.length && format.charAt(iFormat + 1) === match;
if (matches) {
iFormat++;
}
return matches;
};
var getNumber = function getNumber(match) {
var isDoubled = lookAhead(match);
var size = match === '@' ? 14 : match === '!' ? 20 : match === 'y' && isDoubled ? 4 : match === 'o' ? 3 : 2;
var minSize = match === 'y' ? size : 1;
var digits = new RegExp('^\\d{' + minSize + ',' + size + '}');
var num = value.substring(iValue).match(digits);
if (!num) {
throw new Error('Missing number at position ' + iValue);
}
iValue = iValue + num[0].length;
return parseInt(num[0], 10);
};
var getName = function getName(match, shortNames, longNames) {
var index = -1;
var arr = lookAhead(match) ? longNames : shortNames;
var names = [];
for (var i = 0; i < arr.length; i++) {
names.push([i, arr[i]]);
}
names.sort(function (a, b) {
return -(a[1].length - b[1].length);
});
for (var _i = 0; _i < names.length; _i++) {
var name = names[_i][1];
if (value.substr(iValue, name.length).toLowerCase() === name.toLowerCase()) {
index = names[_i][0];
iValue = iValue + name.length;
break;
}
}
if (index !== -1) {
return index + 1;
}
throw new Error('Unknown name at position ' + iValue);
};
var checkLiteral = function checkLiteral() {
if (value.charAt(iValue) !== format.charAt(iFormat)) {
throw new Error('Unexpected literal at position ' + iValue);
}
iValue++;
};
if (props.view === 'month') {
day = 1;
}
if (props.view === 'year') {
day = 1;
month = 1;
}
var _localeOptions3 = localeOptions(props.locale),
dayNamesShort = _localeOptions3.dayNamesShort,
dayNames = _localeOptions3.dayNames,
monthNamesShort = _localeOptions3.monthNamesShort,
monthNames = _localeOptions3.monthNames;
for (iFormat = 0; iFormat < format.length; iFormat++) {
if (literal) {
if (format.charAt(iFormat) === "'" && !lookAhead("'")) {
literal = false;
} else {
checkLiteral();
}
} else {
switch (format.charAt(iFormat)) {
case 'd':
day = getNumber('d');
break;
case 'D':
getName('D', dayNamesShort, dayNames);
break;
case 'o':
doy = getNumber('o');
break;
case 'm':
month = getNumber('m');
break;
case 'M':
month = getName('M', monthNamesShort, monthNames);
break;
case 'y':
year = getNumber('y');
break;
case '@':
date = new Date(getNumber('@'));
year = date.getFullYear();
month = date.getMonth() + 1;
day = date.getDate();
break;
case '!':
date = new Date((getNumber('!') - ticksTo1970) / 10000);
year = date.getFullYear();
month = date.getMonth() + 1;
day = date.getDate();
break;
case "'":
if (lookAhead("'")) {
checkLiteral();
} else {
literal = true;
}
break;
default:
checkLiteral();
}
}
}
if (iValue < value.length) {
extra = value.substr(iValue);
if (!/^\s+/.test(extra)) {
throw new Error('Extra/unparsed characters found in date: ' + extra);
}
}
if (year === -1) {
year = new Date().getFullYear();
} else if (year < 100) {
year = year + (new Date().getFullYear() - new Date().getFullYear() % 100 + (year <= shortYearCutoff ? 0 : -100));
}
if (doy > -1) {
month = 1;
day = doy;
do {
dim = getDaysCountInMonth(year, month - 1);
if (day <= dim) {
break;
}
month++;
day = day - dim;
} while (true);
}
date = daylightSavingAdjust(new Date(year, month - 1, day));
if (date.getFullYear() !== year || date.getMonth() + 1 !== month || date.getDate() !== day) {
throw new Error('Invalid date'); // E.g. 31/02/00
}
return date;
};
var isInMinYear = function isInMinYear(viewDate) {
return props.minDate && props.minDate.getFullYear() === viewDate.getFullYear();
};
var isInMaxYear = function isInMaxYear(viewDate) {
return props.maxDate && props.maxDate.getFullYear() === viewDate.getFullYear();
};
React.useEffect(function () {
ObjectUtils.combinedRefs(inputRef, props.inputRef);
}, [inputRef, props.inputRef]);
useMountEffect(function () {
var viewDate = getViewDate(props.viewDate);
validateDate(viewDate);
setViewDateState(viewDate);
setCurrentMonth(viewDate.getMonth());
setCurrentYear(viewDate.getFullYear());
setCurrentView(props.view);
if (!idState) {
var uniqueId = UniqueComponentId();
!idState && setIdState(uniqueId);
}
if (props.inline) {
overlayRef && overlayRef.current.setAttribute(attributeSelector, '');
if (!props.disabled) {
initFocusableCell();
if (props.numberOfMonths === 1) {
overlayRef.current.style.width = DomHandler.getOuterWidth(overlayRef.current) + 'px';
}
}
}
if (props.value) {
updateInputfield(props.value);
setValue(props.value);
}
if (props.autoFocus) {
// delay showing until rendered so `alignPanel()` method aligns the popup in the right location
setTimeout(function () {
return DomHandler.focus(inputRef.current, props.autoFocus);
}, 200);
}
});
React.useEffect(function () {
// see https://github.com/primefaces/primereact/issues/4030
onChangeRef.current = props.onChange;
}, [props.onChange]);
React.useEffect(function () {
var unbindMaskEvents = null;
if (props.mask) {
unbindMaskEvents = mask(inputRef.current, {
mask: props.mask,
slotChar: props.maskSlotChar,
readOnly: props.readOnlyInput || props.disabled,
onChange: function onChange(e) {
updateValueOnInput(e.originalEvent, e.value, function () {
return false;
});
},
onBlur: function onBlur(e) {
updateValueOnInput(e, e.target.value);
}
}).unbindEvents;
}
return function () {
props.mask && unbindMaskEvents && unbindMaskEvents();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.disabled, props.mask, props.readOnlyInput]);
useUpdateEffect(function () {
if (viewChangedWithKeyDown.current) {
setCurrentView(props.view);
}
viewChangedWithKeyDown.current = false;
}, [props.view]);
useUpdateEffect(function () {
if (visible && !props.inline) {
focusToFirstCell();
}
}, [visible, currentView, props.inline]);
useUpdateEffect(function () {
if (!props.onViewDateChange && !viewStateChanged.current) {
setValue(props.value);
}
if (props.viewDate) {
var date = getViewDate(props.viewDate);
updateViewDate(null, date);
onViewDateSelect({
event: null,
date: date
});
}
}, [props.onViewDateChange, props.value, props.viewDate]);
useUpdateEffect(function () {
if (overlayVisibleState || props.visible) {
// Github #5529
setTimeout(function () {
alignOverlay();
});
}
}, [currentView, overlayVisibleState, props.visible]);
useUpdateEffect(function () {
var newDate = props.value;
if (previousValue !== newDate) {
var isInputFocused = document.activeElement === inputRef.current;
// Do not update value in input if user types something in it:
if (!isInputFocused) {
updateInputfield(newDate);
}
// #3516 view date not updated when value set programatically
if (!newDate) return;
var viewDate = newDate;
if (isMultipleSelection()) {
if (newDate.length) {
viewDate = newDate[newDate.length - 1];
}
} else if (isRangeSelection()) {
if (newDate.length) {
var startDate = newDate[0];
var endDate = newDate[1];
viewDate = endDate || startDate;
}
}
if (viewDate instanceof Date) {
validateDate(viewDate);
setViewDateState(viewDate);
setCurrentMonth(viewDate.getMonth());
setCurrentYear(viewDate.getFullYear());
}
}
}, [props.value, visible]);
useUpdateEffect(function () {
updateInputfield(props.value);
}, [props.dateFormat, props.hourFormat, props.timeOnly, props.showSeconds, props.showMillisec, props.showTime, props.locale]);
useUpdateEffect(function () {
if (overlayRef.current) {
setNavigationState(viewDateState);
updateFocus();
}
});
useUnmountEffect(function () {
if (touchUIMask.current) {
disableModality();
touchUIMask.current = null;
}
ZIndexUtils.clear(overlayRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
show: show,
hide: hide,
getCurrentDateTime: getCurrentDateTime,
getViewDate: getViewDate,
updateViewDate: updateViewDate,
focus: function focus() {
return DomHandler.focus(inputRef.current);
},
getElement: function getElement() {
return elementRef.current;
},
getOverlay: function getOverlay() {
return overlayRef.current;
},
getInput: function getInput() {
return inputRef.current;
}
};
});
var setValue = function setValue(propValue) {
if (Array.isArray(propValue)) {
propValue = propValue[0];
}
var prevPropValue = previousValue;
if (Array.isArray(prevPropValue)) {
prevPropValue = prevPropValue[0];
}
var viewDate = props.viewDate && isValidDate(props.viewDate) ? props.viewDate : propValue && isValidDate(propValue) ? propValue : new Date();
if (isClearClicked.current && props.showTime) {
viewDate.setHours(0, 0, 0);
isClearClicked.current = false;
}
if (!prevPropValue && propValue || propValue && propValue instanceof Date && prevPropValue instanceof Date && propValue.getTime() !== prevPropValue.getTime()) {
validateDate(viewDate);
}
setViewDateState(viewDate);
viewStateChanged.current = true;
};
var createBackwardNavigator = function createBackwardNavigator(isVisible) {
var navigatorProps = isVisible ? {
onClick: onPrevButtonClick,
onKeyDown: function onKeyDown(e) {
return onContainerButtonKeydown(e);
}
} : {
style: {
visibility: 'hidden'
}
};
var previousIconProps = mergeProps({
className: cx('previousIcon')
}, ptm('previousIcon'));
var icon = props.prevIcon || /*#__PURE__*/React.createElement(ChevronLeftIcon, previousIconProps);
var backwardNavigatorIcon = IconUtils.getJSXIcon(icon, _objectSpread$1K({}, previousIconProps), {
props: props
});
var _localeOptions4 = localeOptions(props.locale),
prevDecade = _localeOptions4.prevDecade,
prevYear = _localeOptions4.prevYear,
prevMonth = _localeOptions4.prevMonth;
var previousButtonLabel = currentView === 'year' ? prevDecade : currentView === 'month' ? prevYear : prevMonth;
var previousButtonProps = mergeProps(_objectSpread$1K({
type: 'button',
className: cx('previousButton'),
'aria-label': previousButtonLabel
}, navigatorProps), ptm('previousButton'));
return /*#__PURE__*/React.createElement("button", _extends({
ref: previousButton
}, previousButtonProps), backwardNavigatorIcon, /*#__PURE__*/React.createElement(Ripple, null));
};
var createForwardNavigator = function createForwardNavigator(isVisible) {
var navigatorProps = isVisible ? {
onClick: onNextButtonClick,
onKeyDown: function onKeyDown(e) {
return onContainerButtonKeydown(e);
}
} : {
style: {
visibility: 'hidden'
}
};
var nextIconProps = mergeProps({
className: cx('nextIcon')
}, ptm('nextIcon'));
var icon = props.nextIcon || /*#__PURE__*/React.createElement(ChevronRightIcon, nextIconProps);
var forwardNavigatorIcon = IconUtils.getJSXIcon(icon, _objectSpread$1K({}, nextIconProps), {
props: props
});
var _localeOptions5 = localeOptions(props.locale),
nextDecade = _localeOptions5.nextDecade,
nextYear = _localeOptions5.nextYear,
nextMonth = _localeOptions5.nextMonth;
var nextButtonLabel = currentView === 'year' ? nextDecade : currentView === 'month' ? nextYear : nextMonth;
var nextButtonProps = mergeProps(_objectSpread$1K({
type: 'button',
className: cx('nextButton'),
'aria-label': nextButtonLabel
}, navigatorProps), ptm('nextButton'));
return /*#__PURE__*/React.createElement("button", _extends({
ref: nextButton
}, nextButtonProps), forwardNavigatorIcon, /*#__PURE__*/React.createElement(Ripple, null));
};
var renderMonthsNavigator = function renderMonthsNavigator(index) {
return props.monthNavigator && props.view !== 'month' && (props.numberOfMonths === 1 || index === 0);
};
var createTitleMonthElement = function createTitleMonthElement(month, monthIndex) {
var monthNames = localeOption('monthNames', props.locale);
if (renderMonthsNavigator(monthIndex)) {
var viewDate = getViewDate();
var viewMonth = viewDate.getMonth();
var displayedMonthOptions = monthNames.map(function (month, index) {
return (!isInMinYear(viewDate) || index >= props.minDate.getMonth()) && (!isInMaxYear(viewDate) || index <= props.maxDate.getMonth()) ? {
label: month,
value: index,
index: index
} : null;
}).filter(function (option) {
return !!option;
});
var displayedMonthNames = displayedMonthOptions.map(function (option) {
return option.label;
});
var selectProps = mergeProps({
className: cx('select'),
onChange: function onChange(e) {
return onMonthDropdownChange(e, e.target.value);
},
value: viewMonth
}, ptm('select'));
var _content = /*#__PURE__*/React.createElement("select", selectProps, displayedMonthOptions.map(function (option) {
var optionProps = mergeProps({
value: option.value
}, ptm('option'));
return /*#__PURE__*/React.createElement("option", _extends({}, optionProps, {
key: option.label
}), option.label);
}));
if (props.monthNavigatorTemplate) {
var defaultContentOptions = {
onChange: onMonthDropdownChange,
className: 'p-datepicker-month',
value: viewMonth,
names: displayedMonthNames,
options: displayedMonthOptions,
element: _content,
props: props
};
return ObjectUtils.getJSXElement(props.monthNavigatorTemplate, defaultContentOptions);
}
return _content;
}
var monthTitleProps = mergeProps({
className: cx('monthTitle'),
onKeyDown: onContainerButtonKeydown,
'aria-label': localeOption('chooseMonth', props.locale),
onClick: switchToMonthView,
disabled: switchViewButtonDisabled()
}, ptm('monthTitle'));
return currentView === 'date' && /*#__PURE__*/React.createElement("button", monthTitleProps, monthNames[month]);
};
var createTitleYearElement = function createTitleYearElement(metaYear) {
var viewDate = getViewDate();
var viewYear = viewDate.getFullYear();
var displayYear = props.numberOfMonths > 1 || props.yearNavigator ? metaYear : currentYear;
if (props.yearNavigator) {
var _yearOptions2 = [];
if (props.yearRange) {
var years = props.yearRange.split(':');
var yearStart = parseInt(years[0], 10);
var yearEnd = parseInt(years[1], 10);
for (var i = yearStart; i <= yearEnd; i++) {
_yearOptions2.push(i);
}
} else {
var base = viewYear - viewYear % 10;
for (var _i2 = 0; _i2 < 10; _i2++) {
_yearOptions2.push(base + _i2);
}
}
var displayedYearNames = _yearOptions2.filter(function (year) {
return !(props.minDate && props.minDate.getFullYear() > year) && !(props.maxDate && props.maxDate.getFullYear() < year);
});
var selectProps = mergeProps({
className: cx('select'),
onChange: function onChange(e) {
return onYearDropdownChange(e, e.target.value);
},
value: displayYear
}, ptm('select'));
var _content2 = /*#__PURE__*/React.createElement("select", selectProps, displayedYearNames.map(function (year) {
var optionProps = mergeProps({
value: year
}, ptm('option'));
return /*#__PURE__*/React.createElement("option", _extends({}, optionProps, {
key: year
}), year);
}));
if (props.yearNavigatorTemplate) {
var options = displayedYearNames.map(function (name, i) {
return {
label: name,
value: name,
index: i
};
});
var defaultContentOptions = {
onChange: onYearDropdownChange,
className: 'p-datepicker-year',
value: viewYear,
names: displayedYearNames,
options: options,
element: _content2,
props: props
};
return ObjectUtils.getJSXElement(props.yearNavigatorTemplate, defaultContentOptions);
}
return _content2;
}
var yearTitleProps = mergeProps({
className: cx('yearTitle'),
'aria-label': localeOption('chooseYear', props.locale),
onClick: function onClick(e) {
return switchToYearView(e);
},
disabled: switchViewButtonDisabled()
}, ptm('yearTitle'));
return currentView !== 'year' && /*#__PURE__*/React.createElement("button", yearTitleProps, displayYear);
};
var createTitleDecadeElement = function createTitleDecadeElement() {
var years = yearPickerValues();
var decadeTitleProps = mergeProps({
className: cx('decadeTitle')
}, ptm('decadeTitle'));
if (currentView === 'year') {
var decadeTitleTextProps = mergeProps(ptm('decadeTitleText'));
return /*#__PURE__*/React.createElement("span", decadeTitleProps, props.decadeTemplate ? props.decadeTemplate(years) : /*#__PURE__*/React.createElement("span", decadeTitleTextProps, "".concat(yearPickerValues()[0], " - ").concat(yearPickerValues()[yearPickerValues().length - 1])));
}
return null;
};
var createTitle = function createTitle(monthMetaData, index) {
var month = createTitleMonthElement(monthMetaData.month, index);
var year = createTitleYearElement(monthMetaData.year);
var decade = createTitleDecadeElement();
var titleProps = mergeProps({
className: cx('title')
}, ptm('title'));
var showMonthAfterYear = localeOption('showMonthAfterYear', props.locale);
return /*#__PURE__*/React.createElement("div", titleProps, showMonthAfterYear ? year : month, showMonthAfterYear ? month : year, decade);
};
var createDayNames = function createDayNames(weekDays) {
var weekDayProps = mergeProps(ptm('weekDay'));
var tableHeaderCellProps = mergeProps({
scope: 'col'
}, ptm('tableHeaderCell'));
var dayNames = weekDays.map(function (weekDay, index) {
return /*#__PURE__*/React.createElement("th", _extends({}, tableHeaderCellProps, {
key: "".concat(weekDay, "-").concat(index)
}), /*#__PURE__*/React.createElement("span", weekDayProps, weekDay));
});
if (props.showWeek) {
var weekHeaderProps = mergeProps({
scope: 'col',
className: cx('weekHeader'),
'data-p-disabled': props.showWeek
}, ptm('weekHeader', {
context: {
disabled: props.showWeek
}
}));
var weekLabel = mergeProps(ptm('weekLabel'));
var weekHeader = /*#__PURE__*/React.createElement("th", _extends({}, weekHeaderProps, {
key: "wn"
}), /*#__PURE__*/React.createElement("span", weekLabel, localeOption('weekHeader', props.locale)));
return [weekHeader].concat(_toConsumableArray(dayNames));
}
return dayNames;
};
var createDateCellContent = function createDateCellContent(date, className, groupIndex) {
var content = props.dateTemplate ? props.dateTemplate(date) : date.day;
var selected = isSelected(date);
var dayLabelProps = mergeProps({
className: cx('dayLabel', {
className: className
}),
'aria-selected': selected,
'aria-disabled': !date.selectable,
onMouseDown: function onMouseDown(e) {
return e.preventDefault();
},
onClick: function onClick(e) {
return onDateSelect(e, date);
},
onKeyDown: function onKeyDown(e) {
return onDateCellKeydown(e, date, groupIndex);
},
'data-p-highlight': selected,
'data-p-disabled': !date.selectable
}, ptm('dayLabel', {
context: {
selected: selected,
disabled: !date.selectable
}
}));
return /*#__PURE__*/React.createElement("span", dayLabelProps, content, selected && /*#__PURE__*/React.createElement("div", {
"aria-live": "polite",
className: "p-hidden-accessible",
"data-p-hidden-accessible": true,
pt: ptm('hiddenSelectedDay')
}));
};
var createWeek = function createWeek(weekDates, weekNumber, groupIndex) {
var week = weekDates.map(function (date) {
var selected = isSelected(date);
var dateClassName = classNames({
'p-highlight': selected,
'p-disabled': !date.selectable
});
var content = date.otherMonth && !props.showOtherMonths ? null : createDateCellContent(date, dateClassName, groupIndex);
var formattedValue = formatDate(new Date(date.year, date.month, date.day), getDateFormat());
var dayProps = mergeProps({
className: cx('day', {
date: date
}),
'aria-label': formattedValue,
'data-p-today': date.today,
'data-p-other-month': date.otherMonth,
'data-p-day': date.day,
'data-p-month': date.month,
'data-p-year': date.year
}, ptm('day', {
context: {
date: date,
today: date.today,
otherMonth: date.otherMonth
}
}));
return /*#__PURE__*/React.createElement("td", _extends({}, dayProps, {
key: date.day
}), content);
});
if (props.showWeek) {
var weekNumberProps = mergeProps({
className: cx('weekNumber')
}, ptm('weekNumber'));
var weekLabelContainerProps = mergeProps({
className: cx('weekLabelContainer'),
'data-p-disabled': props.showWeek
}, ptm('weekLabelContainer', {
context: {
disabled: props.showWeek
}
}));
var weekNumberCell = /*#__PURE__*/React.createElement("td", _extends({}, weekNumberProps, {
key: 'wn' + weekNumber
}), /*#__PURE__*/React.createElement("span", weekLabelContainerProps, weekNumber));
return [weekNumberCell].concat(_toConsumableArray(week));
}
return week;
};
var createDates = function createDates(monthMetaData, groupIndex) {
var tableBodyRowProps = mergeProps(ptm('tableBodyRowProps'));
return monthMetaData.dates.map(function (weekDates, index) {
return /*#__PURE__*/React.createElement("tr", _extends({}, tableBodyRowProps, {
key: index
}), createWeek(weekDates, monthMetaData.weekNumbers[index], groupIndex));
});
};
var createDateViewGrid = function createDateViewGrid(monthMetaData, weekDays, groupIndex) {
var dayNames = createDayNames(weekDays);
var dates = createDates(monthMetaData, groupIndex);
var containerProps = mergeProps({
className: cx('container')
}, ptm('container'));
var tableProps = mergeProps({
role: 'grid',
className: cx('table')
}, ptm('table'));
var tableHeaderProps = mergeProps(ptm('tableHeader'));
var tableHeaderRowProps = mergeProps(ptm('tableHeaderRow'));
var tableBodyProps = mergeProps(ptm('tableBody'));
return currentView === 'date' && /*#__PURE__*/React.createElement("div", _extends({}, containerProps, {
key: UniqueComponentId('calendar_container_')
}), /*#__PURE__*/React.createElement("table", tableProps, /*#__PURE__*/React.createElement("thead", tableHeaderProps, /*#__PURE__*/React.createElement("tr", tableHeaderRowProps, dayNames)), /*#__PURE__*/React.createElement("tbody", tableBodyProps, dates)));
};
var createMonth = function createMonth(monthMetaData, index) {
var weekDays = createWeekDaysMeta();
var backwardNavigator = createBackwardNavigator(index === 0);
var forwardNavigator = createForwardNavigator(props.numberOfMonths === 1 || index === props.numberOfMonths - 1);
var title = createTitle(monthMetaData, index);
var dateViewGrid = createDateViewGrid(monthMetaData, weekDays, index);
var header = props.headerTemplate ? props.headerTemplate() : null;
var monthKey = monthMetaData.month + '-' + monthMetaData.year;
var groupProps = mergeProps({
className: cx('group')
}, ptm('group'));
var headerProps = mergeProps({
className: cx('header')
}, ptm('header'));
return /*#__PURE__*/React.createElement("div", _extends({}, groupProps, {
key: monthKey
}), /*#__PURE__*/React.createElement("div", _extends({}, headerProps, {
key: index
}), header, backwardNavigator, title, forwardNavigator), dateViewGrid);
};
var createMonths = function createMonths(monthsMetaData) {
var groups = monthsMetaData.map(createMonth);
var groupContainerProps = mergeProps({
className: cx('groupContainer')
}, ptm('groupContainer'));
return /*#__PURE__*/React.createElement("div", groupContainerProps, groups);
};
var createDateView = function createDateView() {
var viewDate = getViewDate();
var monthsMetaData = createMonthsMeta(viewDate.getMonth(), viewDate.getFullYear());
var months = createMonths(monthsMetaData);
return months;
};
var monthPickerValues = function monthPickerValues() {
var monthPickerValues = [];
var monthNamesShort = localeOption('monthNamesShort', props.locale);
for (var i = 0; i <= 11; i++) {
monthPickerValues.push(monthNamesShort[i]);
}
return monthPickerValues;
};
var yearPickerValues = function yearPickerValues() {
var yearPickerValues = [];
var base = currentYear - currentYear % 10;
for (var i = 0; i < 10; i++) {
yearPickerValues.push(base + i);
}
return yearPickerValues;
};
var createMonthYearView = function createMonthYearView() {
var backwardNavigator = createBackwardNavigator(true);
var forwardNavigator = createForwardNavigator(true);
var yearElement = createTitleYearElement(getViewDate().getFullYear());
var decade = createTitleDecadeElement();
var groupContainerProps = mergeProps({
className: cx('groupContainer')
}, ptm('groupContainer'));
var groupProps = mergeProps({
className: cx('group')
}, ptm('group'));
var headerProps = mergeProps({
className: cx('header')
}, ptm('header'));
var titleProps = mergeProps({
className: cx('title')
}, ptm('title'));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", groupContainerProps, /*#__PURE__*/React.createElement("div", groupProps, /*#__PURE__*/React.createElement("div", headerProps, backwardNavigator, /*#__PURE__*/React.createElement("div", titleProps, yearElement, decade), forwardNavigator))));
};
var createDatePicker = function createDatePicker() {
if (!props.timeOnly) {
if (props.view === 'date') {
return createDateView();
}
return createMonthYearView();
}
return null;
};
var incrementIconProps = mergeProps(ptm('incrementIcon'));
var decrementIconProps = mergeProps(ptm('decrementIcon'));
var incrementIcon = IconUtils.getJSXIcon(props.incrementIcon || /*#__PURE__*/React.createElement(ChevronUpIcon, incrementIconProps), _objectSpread$1K({}, incrementIconProps), {
props: props
});
var decrementIcon = IconUtils.getJSXIcon(props.decrementIcon || /*#__PURE__*/React.createElement(ChevronDownIcon, decrementIconProps), _objectSpread$1K({}, decrementIconProps), {
props: props
});
var createHourPicker = function createHourPicker() {
var currentTime = getCurrentDateTime();
var minute = doStepMinute(currentTime.getMinutes());
var hour = currentTime.getHours();
// #3770 account for step minutes rolling to next hour
hour = minute > 59 ? hour + 1 : hour;
if (props.hourFormat === '12') {
if (hour === 0) {
hour = 12;
} else if (hour > 11 && hour !== 12) {
hour = hour - 12;
}
}
var hourProps = mergeProps(ptm('hour'));
var _localeOptions6 = localeOptions(props.locale),
nextHour = _localeOptions6.nextHour,
prevHour = _localeOptions6.prevHour;
var hourDisplay = hour < 10 ? '0' + hour : hour;
var hourPickerProps = mergeProps({
className: cx('hourPicker')
}, ptm('hourPicker'));
var incrementButtonProps = mergeProps({
type: 'button',
className: cx('incrementButton'),
'aria-label': nextHour,
onMouseDown: function onMouseDown(e) {
return onTimePickerElementMouseDown(e, 0, 1);
},
onMouseUp: onTimePickerElementMouseUp,
onMouseLeave: onTimePickerElementMouseLeave,
onKeyDown: function onKeyDown(e) {
return onPickerKeyDown(e, 0, 1);
},
onKeyUp: onPickerKeyUp
}, ptm('incrementButton'));
var decrementButtonProps = mergeProps({
type: 'button',
className: cx('decrementButton'),
'aria-label': prevHour,
onMouseDown: function onMouseDown(e) {
return onTimePickerElementMouseDown(e, 0, -1);
},
onMouseUp: onTimePickerElementMouseUp,
onMouseLeave: onTimePickerElementMouseLeave,
onKeyDown: function onKeyDown(e) {
return onPickerKeyDown(e, 0, -1);
},
onKeyUp: onPickerKeyUp
}, ptm('decrementButton'));
return /*#__PURE__*/React.createElement("div", hourPickerProps, /*#__PURE__*/React.createElement("button", incrementButtonProps, incrementIcon, /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("span", hourProps, hourDisplay), /*#__PURE__*/React.createElement("button", decrementButtonProps, decrementIcon, /*#__PURE__*/React.createElement(Ripple, null)));
};
var createMinutePicker = function createMinutePicker() {
var currentTime = getCurrentDateTime();
var minute = doStepMinute(currentTime.getMinutes());
minute = minute > 59 ? minute - 60 : minute;
var minuteProps = mergeProps(ptm('minute'));
var _localeOptions7 = localeOptions(props.locale),
nextMinute = _localeOptions7.nextMinute,
prevMinute = _localeOptions7.prevMinute;
var minuteDisplay = minute < 10 ? '0' + minute : minute;
var minutePickerProps = mergeProps({
className: cx('minutePicker')
}, ptm('minutePicker'));
var incrementButtonProps = mergeProps({
type: 'button',
className: cx('incrementButton'),
'aria-label': nextMinute,
onMouseDown: function onMouseDown(e) {
return onTimePickerElementMouseDown(e, 1, 1);
},
onMouseUp: onTimePickerElementMouseUp,
onMouseLeave: onTimePickerElementMouseLeave,
onKeyDown: function onKeyDown(e) {
return onPickerKeyDown(e, 1, 1);
},
onKeyUp: onPickerKeyUp
}, ptm('incrementButton'));
var decrementButtonProps = mergeProps({
type: 'button',
className: cx('decrementButton'),
'aria-label': prevMinute,
onMouseDown: function onMouseDown(e) {
return onTimePickerElementMouseDown(e, 1, -1);
},
onMouseUp: onTimePickerElementMouseUp,
onMouseLeave: onTimePickerElementMouseLeave,
onKeyDown: function onKeyDown(e) {
return onPickerKeyDown(e, 1, -1);
},
onKeyUp: onPickerKeyUp
}, ptm('decrementButton'));
return /*#__PURE__*/React.createElement("div", minutePickerProps, /*#__PURE__*/React.createElement("button", incrementButtonProps, incrementIcon, /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("span", minuteProps, minuteDisplay), /*#__PURE__*/React.createElement("button", decrementButtonProps, decrementIcon, /*#__PURE__*/React.createElement(Ripple, null)));
};
var createSecondPicker = function createSecondPicker() {
if (props.showSeconds) {
var currentTime = getCurrentDateTime();
var _localeOptions8 = localeOptions(props.locale),
nextSecond = _localeOptions8.nextSecond,
prevSecond = _localeOptions8.prevSecond;
var secondProps = mergeProps(ptm('second'));
var second = currentTime.getSeconds();
var secondDisplay = second < 10 ? '0' + second : second;
var secondPickerProps = mergeProps({
className: cx('secondPicker')
}, ptm('secondPicker'));
var incrementButtonProps = mergeProps({
type: 'button',
className: cx('incrementButton'),
'aria-label': nextSecond,
onMouseDown: function onMouseDown(e) {
return onTimePickerElementMouseDown(e, 2, 1);
},
onMouseUp: onTimePickerElementMouseUp,
onMouseLeave: onTimePickerElementMouseLeave,
onKeyDown: function onKeyDown(e) {
return onPickerKeyDown(e, 2, 1);
},
onKeyUp: onPickerKeyUp
}, ptm('incrementButton'));
var decrementButtonProps = mergeProps({
type: 'button',
className: cx('decrementButton'),
'aria-label': prevSecond,
onMouseDown: function onMouseDown(e) {
return onTimePickerElementMouseDown(e, 2, -1);
},
onMouseUp: onTimePickerElementMouseUp,
onMouseLeave: onTimePickerElementMouseLeave,
onKeyDown: function onKeyDown(e) {
return onPickerKeyDown(e, 2, -1);
},
onKeyUp: onPickerKeyUp
}, ptm('decrementButton'));
return /*#__PURE__*/React.createElement("div", secondPickerProps, /*#__PURE__*/React.createElement("button", incrementButtonProps, incrementIcon, /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("span", secondProps, secondDisplay), /*#__PURE__*/React.createElement("button", decrementButtonProps, decrementIcon, /*#__PURE__*/React.createElement(Ripple, null)));
}
return null;
};
var createMiliSecondPicker = function createMiliSecondPicker() {
if (props.showMillisec) {
var currentTime = getCurrentDateTime();
var _localeOptions9 = localeOptions(props.locale),
nextMilliSecond = _localeOptions9.nextMilliSecond,
prevMilliSecond = _localeOptions9.prevMilliSecond;
var millisecondProps = mergeProps(ptm('millisecond'));
var millisecond = currentTime.getMilliseconds();
var millisecondDisplay = millisecond < 100 ? (millisecond < 10 ? '00' : '0') + millisecond : millisecond;
var millisecondPickerProps = mergeProps({
className: cx('millisecondPicker')
}, ptm('millisecondPicker'));
var incrementButtonProps = mergeProps({
type: 'button',
className: cx('incrementButton'),
'aria-label': nextMilliSecond,
onMouseDown: function onMouseDown(e) {
return onTimePickerElementMouseDown(e, 3, 1);
},
onMouseUp: onTimePickerElementMouseUp,
onMouseLeave: onTimePickerElementMouseLeave,
onKeyDown: function onKeyDown(e) {
return onPickerKeyDown(e, 3, 1);
},
onKeyUp: onPickerKeyUp
}, ptm('incrementButton'));
var decrementButtonProps = mergeProps({
type: 'button',
className: cx('decrementButton'),
'aria-label': prevMilliSecond,
onMouseDown: function onMouseDown(e) {
return onTimePickerElementMouseDown(e, 3, -1);
},
onMouseUp: onTimePickerElementMouseUp,
onMouseLeave: onTimePickerElementMouseLeave,
onKeyDown: function onKeyDown(e) {
return onPickerKeyDown(e, 3, -1);
},
onKeyUp: onPickerKeyUp
}, ptm('decrementButton'));
return /*#__PURE__*/React.createElement("div", millisecondPickerProps, /*#__PURE__*/React.createElement("button", incrementButtonProps, incrementIcon, /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("span", millisecondProps, millisecondDisplay), /*#__PURE__*/React.createElement("button", decrementButtonProps, decrementIcon, /*#__PURE__*/React.createElement(Ripple, null)));
}
return null;
};
var createAmPmPicker = function createAmPmPicker() {
if (props.hourFormat === '12') {
var currentTime = getCurrentDateTime();
var _localeOptions10 = localeOptions(props.locale),
am = _localeOptions10.am,
pm = _localeOptions10.pm;
var hour = currentTime.getHours();
var display = hour > 11 ? 'PM' : 'AM';
var ampmProps = mergeProps(ptm('ampm'));
var ampmPickerProps = mergeProps({
className: cx('ampmPicker')
}, ptm('ampmPicker'));
var incrementButtonProps = mergeProps({
type: 'button',
className: cx('incrementButton'),
'aria-label': am,
onClick: function onClick(e) {
return toggleAmPm(e);
}
}, ptm('incrementButton'));
var decrementButtonProps = mergeProps({
type: 'button',
className: cx('decrementButton'),
'aria-label': pm,
onClick: function onClick(e) {
return toggleAmPm(e);
}
}, ptm('decrementButton'));
return /*#__PURE__*/React.createElement("div", ampmPickerProps, /*#__PURE__*/React.createElement("button", incrementButtonProps, incrementIcon, /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("span", ampmProps, display), /*#__PURE__*/React.createElement("button", decrementButtonProps, decrementIcon, /*#__PURE__*/React.createElement(Ripple, null)));
}
return null;
};
var createSeparator = function createSeparator(separator) {
var separatorContainerProps = mergeProps({
className: cx('separatorContainer')
}, ptm('separatorContainer'));
var separatorProps = mergeProps(ptm('separator'));
return /*#__PURE__*/React.createElement("div", separatorContainerProps, /*#__PURE__*/React.createElement("span", separatorProps, separator));
};
var createTimePicker = function createTimePicker() {
if ((props.showTime || props.timeOnly) && currentView === 'date') {
var timePickerProps = mergeProps({
className: cx('timePicker')
}, ptm('timePicker'));
return /*#__PURE__*/React.createElement("div", timePickerProps, createHourPicker(), createSeparator(':'), createMinutePicker(), props.showSeconds && createSeparator(':'), createSecondPicker(), props.showMillisec && createSeparator('.'), createMiliSecondPicker(), props.hourFormat === '12' && createSeparator(':'), createAmPmPicker());
}
return null;
};
var createInputElement = function createInputElement() {
if (!props.inline) {
return /*#__PURE__*/React.createElement(InputText, {
ref: inputRef,
id: props.inputId,
name: props.name,
type: "text",
role: "combobox",
className: classNames(props.inputClassName, cx('input', {
context: context
})),
style: props.inputStyle,
readOnly: props.readOnlyInput,
disabled: props.disabled,
required: props.required,
autoComplete: "off",
placeholder: props.placeholder,
tabIndex: props.tabIndex,
onInput: onUserInput,
onFocus: onInputFocus,
onBlur: onInputBlur,
onKeyDown: onInputKeyDown,
"aria-expanded": overlayVisibleState,
"aria-autocomplete": "none",
"aria-haspopup": "dialog",
"aria-controls": panelId,
"aria-labelledby": props.ariaLabelledBy,
"aria-label": props.ariaLabel,
inputMode: props.inputMode,
tooltip: props.tooltip,
tooltipOptions: props.tooltipOptions,
pt: ptm('input'),
unstyled: props.unstyled,
__parentMetadata: {
parent: metaData
}
});
}
return null;
};
var createButton = function createButton() {
if (props.showIcon) {
return /*#__PURE__*/React.createElement(Button, {
type: "button",
icon: props.icon || /*#__PURE__*/React.createElement(CalendarIcon, null),
onClick: onButtonClick,
tabIndex: "-1",
disabled: props.disabled,
"aria-haspopup": "dialog",
"aria-label": localeOption('chooseDate', props.locale),
"aria-expanded": overlayVisibleState,
"aria-controls": panelId,
className: cx('dropdownButton'),
pt: ptm('dropdownButton'),
__parentMetadata: {
parent: metaData
}
});
}
return null;
};
var createContent = function createContent() {
var input = createInputElement();
var button = createButton();
if (props.iconPos === 'left') {
return /*#__PURE__*/React.createElement(React.Fragment, null, button, input);
}
return /*#__PURE__*/React.createElement(React.Fragment, null, input, button);
};
var isPastMaxDateWithBuffer = function isPastMaxDateWithBuffer() {
var bufferInSeconds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
var now = new Date();
var maxDate = props.maxDate;
return maxDate < now && Math.abs((now.getTime() - maxDate.getTime()) / 1000) > bufferInSeconds;
};
var createButtonBar = function createButtonBar() {
if (props.showButtonBar) {
var _localeOptions11 = localeOptions(props.locale),
today = _localeOptions11.today,
clear = _localeOptions11.clear,
now = _localeOptions11.now;
var nowDate = new Date();
var isHidden = props.minDate && props.minDate > nowDate || props.maxDate && isPastMaxDateWithBuffer();
var buttonbarProps = mergeProps({
className: cx('buttonbar')
}, ptm('buttonbar'));
return /*#__PURE__*/React.createElement("div", buttonbarProps, /*#__PURE__*/React.createElement(Button, {
type: "button",
label: props.showTime ? now : today,
onClick: onTodayButtonClick,
onKeyDown: function onKeyDown(e) {
return onContainerButtonKeydown(e);
},
className: classNames(props.todayButtonClassName, cx('todayButton')),
pt: ptm('todayButton'),
style: isHidden ? {
visibility: 'hidden'
} : undefined
}), /*#__PURE__*/React.createElement(Button, {
type: "button",
label: clear,
onClick: onClearButtonClick,
onKeyDown: function onKeyDown(e) {
return onContainerButtonKeydown(e);
},
className: classNames(props.clearButtonClassName, cx('clearButton')),
pt: ptm('clearButton')
}));
}
return null;
};
var createFooter = function createFooter() {
if (props.footerTemplate) {
var _content3 = props.footerTemplate();
var footerProps = mergeProps({
className: cx('footer')
}, ptm('footer'));
return /*#__PURE__*/React.createElement("div", footerProps, _content3);
}
return null;
};
var createMonthPicker = function createMonthPicker() {
if (currentView === 'month') {
var monthPickerProps = mergeProps({
className: cx('monthPicker')
}, ptm('monthPicker'));
return /*#__PURE__*/React.createElement("div", monthPickerProps, monthPickerValues().map(function (m, i) {
var selected = isMonthSelected(i);
var monthProps = mergeProps({
className: cx('month', {
isMonthSelected: isMonthSelected,
isMonthYearDisabled: isMonthYearDisabled,
i: i,
currentYear: currentYear
}),
onClick: function onClick(event) {
return onMonthSelect(event, i);
},
onKeyDown: function onKeyDown(event) {
return onMonthCellKeydown(event, i);
},
'data-p-disabled': isMonthYearDisabled(i, currentYear),
'data-p-highlight': selected
}, ptm('month', {
context: {
month: m,
monthIndex: i,
selected: selected,
disabled: isMonthYearDisabled(i, currentYear)
}
}));
return /*#__PURE__*/React.createElement("span", _extends({}, monthProps, {
key: "month".concat(i + 1)
}), m, selected && /*#__PURE__*/React.createElement("div", {
"aria-live": "polite",
className: "p-hidden-accessible",
"data-p-hidden-accessible": true,
pt: ptm('hiddenMonth')
}, m));
}));
}
return null;
};
var createYearPicker = function createYearPicker() {
if (currentView === 'year') {
var yearPickerProps = mergeProps({
className: cx('yearPicker')
}, ptm('yearPicker'));
return /*#__PURE__*/React.createElement("div", yearPickerProps, yearPickerValues().map(function (y, i) {
var selected = isYearSelected(y);
var yearProps = mergeProps({
className: cx('year', {
isYearSelected: isYearSelected,
isMonthYearDisabled: isMonthYearDisabled,
y: y
}),
onClick: function onClick(event) {
return onYearSelect(event, y);
},
onKeyDown: function onKeyDown(event) {
return onYearCellKeydown(event, y);
},
'data-p-highlight': isYearSelected(y),
'data-p-disabled': isMonthYearDisabled(-1, y)
}, ptm('year', {
context: {
year: y,
yearIndex: i,
selected: selected,
disabled: isMonthYearDisabled(-1, y)
}
}));
return /*#__PURE__*/React.createElement("span", _extends({}, yearProps, {
key: "year".concat(i + 1)
}), y, selected && /*#__PURE__*/React.createElement("div", {
"aria-live": "polite",
className: "p-hidden-accessible",
"data-p-hidden-accessible": true,
pt: ptm('hiddenYear')
}, y));
}));
}
return null;
};
var panelClassName = classNames('p-datepicker p-component', props.panelClassName, {
'p-datepicker-inline': props.inline,
'p-disabled': props.disabled,
'p-datepicker-timeonly': props.timeOnly,
'p-datepicker-multiple-month': props.numberOfMonths > 1,
'p-datepicker-monthpicker': currentView === 'month',
'p-datepicker-touch-ui': props.touchUI,
'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
});
var content = createContent();
var datePicker = createDatePicker();
var timePicker = createTimePicker();
var buttonBar = createButtonBar();
var footer = createFooter();
var monthPicker = createMonthPicker();
var yearPicker = createYearPicker();
var isFilled = DomHandler.hasClass(inputRef.current, 'p-filled') && inputRef.current.value !== '';
var rootProps = mergeProps({
id: props.id,
className: classNames(props.className, cx('root', {
focusedState: focusedState,
isFilled: isFilled,
panelVisible: visible
})),
style: props.style
}, CalendarBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("span", _extends({
ref: elementRef
}, rootProps), content, /*#__PURE__*/React.createElement(CalendarPanel, {
hostName: "Calendar",
id: panelId,
locale: props.locale,
ref: overlayRef,
className: panelClassName,
style: props.panelStyle,
appendTo: props.appendTo,
inline: props.inline,
onClick: onPanelClick,
onMouseUp: onPanelMouseUp,
"in": visible,
onEnter: onOverlayEnter,
onEntered: onOverlayEntered,
onExit: onOverlayExit,
onExited: onOverlayExited,
transitionOptions: props.transitionOptions,
ptm: ptm,
cx: cx
}, datePicker, timePicker, monthPicker, yearPicker, buttonBar, footer));
}));
Calendar.displayName = 'Calendar';
var classes$16 = {
root: 'p-card p-component',
header: 'p-card-header',
title: 'p-card-title',
subTitle: 'p-card-subtitle',
content: 'p-card-content',
footer: 'p-card-footer',
body: 'p-card-body'
};
var styles$W = "\n@layer primereact {\n .p-card-header img {\n width: 100%;\n }\n}\n";
var CardBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Card',
id: null,
header: null,
footer: null,
title: null,
subTitle: null,
style: null,
className: null,
children: undefined
},
css: {
classes: classes$16,
styles: styles$W
}
});
var Card = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = CardBase.getProps(inProps, context);
var elementRef = React.useRef(ref);
var _CardBase$setMetaData = CardBase.setMetaData({
props: props
}),
ptm = _CardBase$setMetaData.ptm,
cx = _CardBase$setMetaData.cx,
isUnstyled = _CardBase$setMetaData.isUnstyled;
useHandleStyle(CardBase.css.styles, isUnstyled, {
name: 'card'
});
var createHeader = function createHeader() {
var headerProps = mergeProps({
className: cx('header')
}, ptm('header'));
if (props.header) {
return /*#__PURE__*/React.createElement("div", headerProps, ObjectUtils.getJSXElement(props.header, props));
}
return null;
};
var createBody = function createBody() {
var titleProps = mergeProps({
className: cx('title')
}, ptm('title'));
var title = props.title && /*#__PURE__*/React.createElement("div", titleProps, ObjectUtils.getJSXElement(props.title, props));
var subTitleProps = mergeProps({
className: cx('subTitle')
}, ptm('subTitle'));
var subTitle = props.subTitle && /*#__PURE__*/React.createElement("div", subTitleProps, ObjectUtils.getJSXElement(props.subTitle, props));
var contentProps = mergeProps({
className: cx('content')
}, ptm('content'));
var children = props.children && /*#__PURE__*/React.createElement("div", contentProps, props.children);
var footerProps = mergeProps({
className: cx('footer')
}, ptm('footer'));
var footer = props.footer && /*#__PURE__*/React.createElement("div", footerProps, ObjectUtils.getJSXElement(props.footer, props));
var bodyProps = mergeProps({
className: cx('body')
}, ptm('body'));
return /*#__PURE__*/React.createElement("div", bodyProps, title, subTitle, children, footer);
};
React.useEffect(function () {
ObjectUtils.combinedRefs(elementRef, ref);
}, [elementRef, ref]);
var rootProps = mergeProps({
id: props.id,
ref: elementRef,
style: props.style,
className: classNames(props.className, cx('root'))
}, CardBase.getOtherProps(props), ptm('root'));
var header = createHeader();
var body = createBody();
return /*#__PURE__*/React.createElement("div", rootProps, header, body);
});
Card.displayName = 'Card';
var styles$V = "\n@layer primereact {\n .p-carousel {\n display: flex;\n flex-direction: column;\n }\n \n .p-carousel-content {\n display: flex;\n flex-direction: column;\n overflow: auto;\n }\n \n .p-carousel-prev,\n .p-carousel-next {\n align-self: center;\n flex-grow: 0;\n flex-shrink: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n position: relative;\n }\n \n .p-carousel-container {\n display: flex;\n flex-direction: row;\n }\n \n .p-carousel-items-content {\n overflow: hidden;\n width: 100%;\n }\n \n .p-carousel-items-container {\n display: flex;\n flex-direction: row;\n }\n \n .p-carousel-indicators {\n display: flex;\n flex-direction: row;\n justify-content: center;\n flex-wrap: wrap;\n }\n \n .p-carousel-indicator > button {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n /* Vertical */\n .p-carousel-vertical .p-carousel-container {\n flex-direction: column;\n }\n \n .p-carousel-vertical .p-carousel-items-container {\n flex-direction: column;\n height: 100%;\n }\n \n /* Keyboard Support */\n .p-items-hidden .p-carousel-item {\n visibility: hidden;\n }\n \n .p-items-hidden .p-carousel-item.p-carousel-item-active {\n visibility: visible;\n }\n}\n";
var classes$15 = {
root: function root(_ref) {
var isVertical = _ref.isVertical;
return classNames('p-carousel p-component', {
'p-carousel-vertical': isVertical,
'p-carousel-horizontal': !isVertical
});
},
container: 'p-carousel-container',
content: 'p-carousel-content',
indicators: 'p-carousel-indicators p-reset',
header: 'p-carousel-header',
footer: 'p-carousel-footer',
itemsContainer: 'p-carousel-items-container',
itemsContent: 'p-carousel-items-content',
previousButton: function previousButton(_ref2) {
var isDisabled = _ref2.isDisabled;
return classNames('p-carousel-prev p-link', {
'p-disabled': isDisabled
});
},
previousButtonIcon: 'p-carousel-prev-icon',
nextButton: function nextButton(_ref3) {
var isDisabled = _ref3.isDisabled;
return classNames('p-carousel-next p-link', {
'p-disabled': isDisabled
});
},
nextButtonIcon: 'p-carousel-next-icon',
indicator: function indicator(_ref4) {
var isActive = _ref4.isActive;
return classNames('p-carousel-indicator', {
'p-highlight': isActive
});
},
indicatorButton: 'p-link',
itemCloned: function itemCloned(_ref5) {
var props = _ref5.itemProps;
return classNames(props.className, 'p-carousel-item', {
'p-carousel-item-active': props.active,
'p-carousel-item-start': props.start,
'p-carousel-item-end': props.end
});
},
item: function item(_ref6) {
var props = _ref6.itemProps;
return classNames(props.className, 'p-carousel-item', {
'p-carousel-item-active': props.active,
'p-carousel-item-start': props.start,
'p-carousel-item-end': props.end
});
}
};
var inlineStyles$l = {
itemsContent: function itemsContent(_ref7) {
var height = _ref7.height;
return {
height: height
};
}
};
var CarouselBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Carousel',
id: null,
value: null,
page: 0,
header: null,
footer: null,
style: null,
className: null,
itemTemplate: null,
circular: false,
showIndicators: true,
showNavigators: true,
autoplayInterval: 0,
numVisible: 1,
numScroll: 1,
prevIcon: null,
nextIcon: null,
responsiveOptions: null,
orientation: 'horizontal',
verticalViewPortHeight: '300px',
contentClassName: null,
containerClassName: null,
indicatorsContentClassName: null,
onPageChange: null,
children: undefined
},
css: {
classes: classes$15,
styles: styles$V,
inlineStyles: inlineStyles$l
}
});
function ownKeys$1J(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$1J(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1J(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1J(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var CarouselItem = /*#__PURE__*/React.memo(function (props) {
var mergeProps = useMergeProps();
var ptm = props.ptm,
cx = props.cx;
var key = props.className && props.className === 'p-carousel-item-cloned' ? 'itemCloned' : 'item';
var content = props.template(props.item);
var itemClonedProps = mergeProps({
className: cx(key, {
itemProps: props
}),
role: props.role,
'aria-roledescription': props.ariaRoledescription,
'aria-label': props.ariaLabel,
'aria-hidden': props.ariaHidden,
'data-p-carousel-item-active': props.active,
'data-p-carousel-item-start': props.start,
'data-p-carousel-item-end': props.end
}, ptm(key));
return /*#__PURE__*/React.createElement("div", itemClonedProps, content);
});
var Carousel = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = CarouselBase.getProps(inProps, context);
var _React$useState = React.useState(props.numVisible),
_React$useState2 = _slicedToArray(_React$useState, 2),
numVisibleState = _React$useState2[0],
setNumVisibleState = _React$useState2[1];
var _React$useState3 = React.useState(props.numScroll),
_React$useState4 = _slicedToArray(_React$useState3, 2),
numScrollState = _React$useState4[0],
setNumScrollState = _React$useState4[1];
var _React$useState5 = React.useState(props.page * props.numScroll * -1),
_React$useState6 = _slicedToArray(_React$useState5, 2),
totalShiftedItemsState = _React$useState6[0],
setTotalShiftedItemsState = _React$useState6[1];
var _React$useState7 = React.useState(props.page),
_React$useState8 = _slicedToArray(_React$useState7, 2),
pageState = _React$useState8[0],
setPageState = _React$useState8[1];
var _CarouselBase$setMeta = CarouselBase.setMetaData({
props: props,
state: {
numVisible: numVisibleState,
numScroll: numScrollState,
totalShiftedItems: totalShiftedItemsState,
page: pageState
}
}),
ptm = _CarouselBase$setMeta.ptm,
cx = _CarouselBase$setMeta.cx,
sx = _CarouselBase$setMeta.sx,
isUnstyled = _CarouselBase$setMeta.isUnstyled;
useHandleStyle(CarouselBase.css.styles, isUnstyled, {
name: 'carousel'
});
var elementRef = React.useRef(null);
var itemsContainerRef = React.useRef(null);
var remainingItems = React.useRef(0);
var allowAutoplay = React.useRef(!!props.autoplayInterval);
var attributeSelector = React.useRef('');
var swipeThreshold = React.useRef(20);
var startPos = React.useRef(null);
var interval = React.useRef(null);
var carouselStyle = React.useRef(null);
var indicatorContent = React.useRef(null);
var isRemainingItemsAdded = React.useRef(false);
var responsiveOptions = React.useRef(null);
var prevNumScroll = usePrevious(numScrollState);
var prevNumVisible = usePrevious(numVisibleState);
var prevValue = usePrevious(props.value);
var prevPage = usePrevious(props.page);
var isVertical = props.orientation === 'vertical';
var circular = props.circular || !!props.autoplayInterval;
var isCircular = circular && props.value && props.value.length >= numVisibleState;
var totalIndicators = props.value ? Math.max(Math.ceil((props.value.length - numVisibleState) / numScrollState) + 1, 0) : 0;
var isAutoplay = totalIndicators && props.autoplayInterval && allowAutoplay.current;
var isControlled = props.onPageChange && !isAutoplay;
var currentPage = isControlled ? props.page : pageState;
var _useResizeListener = useResizeListener({
listener: function listener() {
calculatePosition();
},
when: props.responsiveOptions
}),
_useResizeListener2 = _slicedToArray(_useResizeListener, 1),
bindWindowResizeListener = _useResizeListener2[0];
var step = function step(dir, page) {
var totalShiftedItems = totalShiftedItemsState;
if (page != null) {
totalShiftedItems = numScrollState * page * -1;
if (isCircular) {
totalShiftedItems = totalShiftedItems - numVisibleState;
}
isRemainingItemsAdded.current = false;
} else {
totalShiftedItems = totalShiftedItems + numScrollState * dir;
if (isRemainingItemsAdded.current) {
totalShiftedItems = totalShiftedItems + (remainingItems.current - numScrollState * dir);
isRemainingItemsAdded.current = false;
}
var originalShiftedItems = isCircular ? totalShiftedItems + numVisibleState : totalShiftedItems;
page = Math.abs(Math.floor(originalShiftedItems / numScrollState));
}
if (isCircular && pageState === totalIndicators - 1 && dir === -1) {
totalShiftedItems = -1 * (props.value.length + numVisibleState);
page = 0;
} else if (isCircular && pageState === 0 && dir === 1) {
totalShiftedItems = 0;
page = totalIndicators - 1;
} else if (page === totalIndicators - 1 && remainingItems.current > 0) {
totalShiftedItems = totalShiftedItems + (remainingItems.current * -1 - numScrollState * dir);
isRemainingItemsAdded.current = true;
}
if (itemsContainerRef.current) {
!isUnstyled() && DomHandler.removeClass(itemsContainerRef.current, 'p-items-hidden');
changePosition(totalShiftedItems);
itemsContainerRef.current.style.transition = 'transform 500ms ease 0s';
}
changePage(page);
setTotalShiftedItemsState(totalShiftedItems);
};
var calculatePosition = function calculatePosition() {
if (itemsContainerRef.current && responsiveOptions.current) {
var windowWidth = window.innerWidth;
var matchedResponsiveData = {
numVisible: props.numVisible,
numScroll: props.numScroll
};
for (var i = 0; i < responsiveOptions.current.length; i++) {
var res = responsiveOptions.current[i];
if (parseInt(res.breakpoint, 10) >= windowWidth) {
matchedResponsiveData = res;
}
}
if (numScrollState !== matchedResponsiveData.numScroll) {
var page = Math.floor(currentPage * numScrollState / matchedResponsiveData.numScroll);
var totalShiftedItems = matchedResponsiveData.numScroll * page * -1;
if (isCircular) {
totalShiftedItems = totalShiftedItems - matchedResponsiveData.numVisible;
}
setTotalShiftedItemsState(totalShiftedItems);
setNumScrollState(matchedResponsiveData.numScroll);
changePage(page);
}
if (numVisibleState !== matchedResponsiveData.numVisible) {
setNumVisibleState(matchedResponsiveData.numVisible);
}
}
};
var navBackward = function navBackward(e, page) {
if (circular || currentPage !== 0) {
step(1, page);
}
allowAutoplay.current = false;
if (e.cancelable) {
e.preventDefault();
}
};
var navForward = function navForward(e, page) {
if (circular || currentPage < totalIndicators - 1) {
step(-1, page);
}
allowAutoplay.current = false;
if (e.cancelable) {
e.preventDefault();
}
};
var onIndicatorClick = function onIndicatorClick(e, page) {
if (page > currentPage) {
navForward(e, page);
} else if (page < currentPage) {
navBackward(e, page);
}
};
var onTransitionEnd = function onTransitionEnd(e) {
if (itemsContainerRef.current && e.propertyName === 'transform') {
DomHandler.addClass(itemsContainerRef.current, 'p-items-hidden');
itemsContainerRef.current.style.transition = '';
if ((pageState === 0 || pageState === totalIndicators - 1) && isCircular) {
changePosition(totalShiftedItemsState);
}
}
};
var _onTouchStart = function onTouchStart(e) {
var touchobj = e.changedTouches[0];
startPos.current = {
x: touchobj.pageX,
y: touchobj.pageY
};
};
var _onTouchMove = function onTouchMove(e) {
if (e.cancelable) {
e.preventDefault();
}
};
var _onTouchEnd = function onTouchEnd(e) {
var touchobj = e.changedTouches[0];
if (isVertical) {
changePageOnTouch(e, touchobj.pageY - startPos.current.y);
} else {
changePageOnTouch(e, touchobj.pageX - startPos.current.x);
}
};
var changePageOnTouch = function changePageOnTouch(e, diff) {
if (Math.abs(diff) > swipeThreshold.current) {
if (diff < 0) {
// left
navForward(e);
} else {
// right
navBackward(e);
}
}
};
var onIndicatorKeydown = function onIndicatorKeydown(event) {
switch (event.code) {
case 'ArrowRight':
onRightKey();
break;
case 'ArrowLeft':
onLeftKey();
break;
case 'Home':
onHomeKey();
event.preventDefault();
break;
case 'End':
onEndKey();
event.preventDefault();
break;
case 'ArrowUp':
case 'ArrowDown':
event.preventDefault();
break;
case 'Tab':
onTabKey();
break;
}
};
var onRightKey = function onRightKey() {
var indicators = _toConsumableArray(DomHandler.find(indicatorContent.current, '[data-pc-section="indicator"]'));
var activeIndex = findFocusedIndicatorIndex();
changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1);
};
var onLeftKey = function onLeftKey() {
var activeIndex = findFocusedIndicatorIndex();
changedFocusedIndicator(activeIndex, activeIndex - 1 <= 0 ? 0 : activeIndex - 1);
};
var onHomeKey = function onHomeKey() {
var activeIndex = findFocusedIndicatorIndex();
changedFocusedIndicator(activeIndex, 0);
};
var onEndKey = function onEndKey() {
var indicators = _toConsumableArray(DomHandler.find(indicatorContent.current, '[data-pc-section="indicator"]r'));
var activeIndex = findFocusedIndicatorIndex();
changedFocusedIndicator(activeIndex, indicators.length - 1);
};
var onTabKey = function onTabKey() {
var indicators = _toConsumableArray(DomHandler.find(indicatorContent.current, '[data-pc-section="indicator"]'));
var highlightedIndex = indicators.findIndex(function (ind) {
return DomHandler.getAttribute(ind, 'data-p-highlight') === true;
});
var activeIndicator = DomHandler.findSingle(indicatorContent.current, '[data-pc-section="indicator"] > button[tabindex="0"]');
var activeIndex = indicators.findIndex(function (ind) {
return ind === activeIndicator.parentElement;
});
indicators[activeIndex].children[0].tabIndex = '-1';
indicators[highlightedIndex].children[0].tabIndex = '0';
};
var findFocusedIndicatorIndex = function findFocusedIndicatorIndex() {
var indicators = _toConsumableArray(DomHandler.find(indicatorContent.current, '[data-pc-section="indicator"]'));
var activeIndicator = DomHandler.findSingle(indicatorContent.current, '[data-pc-section="indicator"] > button[tabindex="0"]');
return indicators.findIndex(function (ind) {
return ind === activeIndicator.parentElement;
});
};
var changedFocusedIndicator = function changedFocusedIndicator(prevInd, nextInd) {
var indicators = _toConsumableArray(DomHandler.find(indicatorContent.current, '[data-pc-section="indicator"]'));
indicators[prevInd].children[0].tabIndex = '-1';
indicators[nextInd].children[0].tabIndex = '0';
indicators[nextInd].children[0].focus();
};
var startAutoplay = function startAutoplay() {
if (props.autoplayInterval > 0) {
interval.current = setInterval(function () {
if (pageState === totalIndicators - 1) {
step(-1, 0);
} else {
step(-1, pageState + 1);
}
}, props.autoplayInterval);
}
};
var stopAutoplay = function stopAutoplay() {
if (interval.current) {
clearInterval(interval.current);
}
};
var createStyle = function createStyle() {
if (!carouselStyle.current) {
carouselStyle.current = DomHandler.createInlineStyle(context && context.nonce || PrimeReact.nonce, context && context.styleContainer);
}
var innerHTML = "\n .p-carousel[".concat(attributeSelector.current, "] .p-carousel-item {\n flex: 1 0 ").concat(100 / numVisibleState, "%\n }\n ");
if (props.responsiveOptions) {
var comparator = ObjectUtils.localeComparator(context && context.locale || PrimeReact.locale);
responsiveOptions.current = _toConsumableArray(props.responsiveOptions);
responsiveOptions.current.sort(function (data1, data2) {
var value1 = data1.breakpoint;
var value2 = data2.breakpoint;
return ObjectUtils.sort(value1, value2, -1, comparator, context && context.nullSortOrder || PrimeReact.nullSortOrder);
});
for (var i = 0; i < responsiveOptions.current.length; i++) {
var res = responsiveOptions.current[i];
innerHTML = innerHTML + "\n @media screen and (max-width: ".concat(res.breakpoint, ") {\n .p-carousel[").concat(attributeSelector.current, "] .p-carousel-item {\n flex: 1 0 ").concat(100 / res.numVisible, "%\n }\n }\n ");
}
calculatePosition();
}
carouselStyle.current.innerHTML = innerHTML;
};
var destroyStyle = function destroyStyle() {
carouselStyle.current = DomHandler.removeInlineStyle(carouselStyle.current);
};
var changePosition = function changePosition(totalShiftedItems) {
if (itemsContainerRef.current) {
itemsContainerRef.current.style.transform = isVertical ? "translate3d(0, ".concat(totalShiftedItems * (100 / numVisibleState), "%, 0)") : "translate3d(".concat(totalShiftedItems * (100 / numVisibleState), "%, 0, 0)");
}
};
var changePage = function changePage(page) {
!isControlled && setPageState(page);
props.onPageChange && props.onPageChange({
page: page
});
};
React.useImperativeHandle(ref, function () {
return {
props: props,
startAutoplay: startAutoplay,
stopAutoplay: stopAutoplay,
getElement: function getElement() {
return elementRef.current;
}
};
});
useMountEffect(function () {
if (elementRef.current) {
attributeSelector.current = UniqueComponentId();
elementRef.current.setAttribute(attributeSelector.current, '');
}
if (!carouselStyle.current) {
calculatePosition();
// Workaround: force correct initial position for circular
if (isCircular) {
var initialPosition = -1 * numVisibleState;
setTotalShiftedItemsState(initialPosition);
changePosition(initialPosition);
} else {
changePosition(totalShiftedItemsState);
}
bindWindowResizeListener();
}
});
useUpdateEffect(function () {
var stateChanged = false;
var totalShiftedItems = totalShiftedItemsState;
createStyle();
if (props.autoplayInterval) {
stopAutoplay();
}
if (prevNumScroll !== numScrollState || prevNumVisible !== numVisibleState || props.value && prevValue && prevValue.length !== props.value.length) {
remainingItems.current = (props.value.length - numVisibleState) % numScrollState;
var page = currentPage;
if (totalIndicators !== 0 && page >= totalIndicators) {
page = totalIndicators - 1;
changePage(page);
stateChanged = true;
}
totalShiftedItems = page * numScrollState * -1;
if (isCircular) {
totalShiftedItems = totalShiftedItems - numVisibleState;
}
if (page === totalIndicators - 1 && remainingItems.current > 0) {
totalShiftedItems = totalShiftedItems + (-1 * remainingItems.current + numScrollState);
isRemainingItemsAdded.current = true;
} else {
isRemainingItemsAdded.current = false;
}
if (totalShiftedItems !== totalShiftedItemsState) {
setTotalShiftedItemsState(totalShiftedItems);
stateChanged = true;
}
changePosition(totalShiftedItems);
}
if (isCircular) {
if (pageState === 0) {
totalShiftedItems = -1 * numVisibleState;
} else if (totalShiftedItems === 0) {
totalShiftedItems = -1 * props.value.length;
if (remainingItems.current > 0) {
isRemainingItemsAdded.current = true;
}
}
if (totalShiftedItems !== totalShiftedItemsState) {
setTotalShiftedItemsState(totalShiftedItems);
stateChanged = true;
}
}
if (prevPage !== props.page) {
if (props.page > prevPage && props.page <= totalIndicators - 1) {
step(-1, props.page);
} else if (props.page < prevPage) {
step(1, props.page);
}
}
if (!stateChanged && isAutoplay) {
startAutoplay();
}
return function () {
if (props.autoplayInterval) {
stopAutoplay();
}
destroyStyle();
};
});
var ariaSlideNumber = function ariaSlideNumber(value) {
return ariaLabel('slideNumber', {
slideNumber: value
});
};
var createItems = function createItems() {
if (props.value && props.value.length) {
var clonedItemsForStarting = null;
var clonedItemsForFinishing = null;
if (isCircular) {
var clonedElements = null;
clonedElements = props.value.slice(-1 * numVisibleState);
clonedItemsForStarting = clonedElements.map(function (item, index) {
var isActive = totalShiftedItemsState * -1 === props.value.length + numVisibleState;
var start = index === 0;
var end = index === clonedElements.length - 1;
var key = index + '_scloned';
return /*#__PURE__*/React.createElement(CarouselItem, {
key: key,
className: "p-carousel-item-cloned",
template: props.itemTemplate,
item: item,
active: isActive,
start: start,
end: end,
ptm: ptm,
cx: cx
});
});
clonedElements = props.value.slice(0, numVisibleState);
clonedItemsForFinishing = clonedElements.map(function (item, index) {
var isActive = totalShiftedItemsState === 0;
var start = index === 0;
var end = index === clonedElements.length - 1;
var key = index + '_fcloned';
return /*#__PURE__*/React.createElement(CarouselItem, {
key: key,
className: "p-carousel-item-cloned",
template: props.itemTemplate,
item: item,
active: isActive,
start: start,
end: end,
ptm: ptm,
cx: cx
});
});
}
var items = props.value.map(function (item, index) {
var firstIndex = isCircular ? -1 * (totalShiftedItemsState + numVisibleState) : totalShiftedItemsState * -1;
var lastIndex = firstIndex + numVisibleState - 1;
var isActive = firstIndex <= index && lastIndex >= index;
var start = firstIndex === index;
var end = lastIndex === index;
var ariaHidden = firstIndex > index || lastIndex < index ? true : undefined;
var ariaLabel = ariaSlideNumber(index);
var ariaRoledescription = localeOption('aria') ? localeOption('aria').slide : undefined;
return /*#__PURE__*/React.createElement(CarouselItem, {
key: index,
template: props.itemTemplate,
item: item,
active: isActive,
start: start,
ariaHidden: ariaHidden,
ariaLabel: ariaLabel,
ariaRoledescription: ariaRoledescription,
role: "group",
end: end,
ptm: ptm,
cx: cx
});
});
return /*#__PURE__*/React.createElement(React.Fragment, null, clonedItemsForStarting, items, clonedItemsForFinishing);
}
};
var createHeader = function createHeader() {
if (props.header) {
var headerProps = mergeProps({
className: cx('header')
}, ptm('header'));
return /*#__PURE__*/React.createElement("div", headerProps, props.header);
}
return null;
};
var createFooter = function createFooter() {
if (props.footer) {
var footerProps = mergeProps({
className: cx('footer')
}, ptm('footer'));
return /*#__PURE__*/React.createElement("div", footerProps, props.footer);
}
return null;
};
var createContent = function createContent() {
var items = createItems();
var height = isVertical ? props.verticalViewPortHeight : 'auto';
var backwardNavigator = createBackwardNavigator();
var forwardNavigator = createForwardNavigator();
var itemsContentProps = mergeProps({
className: cx('itemsContent'),
style: sx('itemsContent', {
height: height
}),
onTouchStart: function onTouchStart(e) {
return _onTouchStart(e);
},
onTouchMove: function onTouchMove(e) {
return _onTouchMove(e);
},
onTouchEnd: function onTouchEnd(e) {
return _onTouchEnd(e);
}
}, ptm('itemsContent'));
var containerProps = mergeProps({
className: classNames(props.containerClassName, cx('container')),
'aria-live': allowAutoplay.current ? 'polite' : 'off'
}, ptm('container'));
var itemsContainerProps = mergeProps({
className: cx('itemsContainer'),
onTransitionEnd: onTransitionEnd
}, ptm('itemsContainer'));
return /*#__PURE__*/React.createElement("div", containerProps, backwardNavigator, /*#__PURE__*/React.createElement("div", itemsContentProps, /*#__PURE__*/React.createElement("div", _extends({
ref: itemsContainerRef
}, itemsContainerProps), items)), forwardNavigator);
};
var createBackwardNavigator = function createBackwardNavigator() {
if (props.showNavigators) {
var isDisabled = (!circular || props.value && props.value.length < numVisibleState) && currentPage === 0;
var previousButtonIconProps = mergeProps({
className: cx('previousButtonIcon')
}, ptm('previousButtonIcon'));
var icon = isVertical ? props.prevIcon || /*#__PURE__*/React.createElement(ChevronUpIcon, previousButtonIconProps) : props.prevIcon || /*#__PURE__*/React.createElement(ChevronLeftIcon, previousButtonIconProps);
var backwardNavigatorIcon = IconUtils.getJSXIcon(icon, _objectSpread$1J({}, previousButtonIconProps), {
props: props
});
var previousButtonProps = mergeProps({
type: 'button',
className: cx('previousButton', {
isDisabled: isDisabled
}),
onClick: function onClick(e) {
return navBackward(e);
},
disabled: isDisabled,
'aria-label': localeOption('aria') ? localeOption('aria').prevPageLabel : undefined,
'data-pc-group-section': 'navigator'
}, ptm('previousButton'));
return /*#__PURE__*/React.createElement("button", previousButtonProps, backwardNavigatorIcon, /*#__PURE__*/React.createElement(Ripple, null));
}
return null;
};
var createForwardNavigator = function createForwardNavigator() {
if (props.showNavigators) {
var isDisabled = (!circular || props.value && props.value.length < numVisibleState) && (currentPage === totalIndicators - 1 || totalIndicators === 0);
var nextButtonIconProps = mergeProps({
className: cx('nextButtonIcon')
}, ptm('nextButtonIcon'));
var icon = isVertical ? props.nextIcon || /*#__PURE__*/React.createElement(ChevronDownIcon, nextButtonIconProps) : props.nextIcon || /*#__PURE__*/React.createElement(ChevronRightIcon, nextButtonIconProps);
var forwardNavigatorIcon = IconUtils.getJSXIcon(icon, _objectSpread$1J({}, nextButtonIconProps), {
props: props
});
var nextButtonProps = mergeProps({
type: 'button',
className: cx('nextButton', {
isDisabled: isDisabled
}),
onClick: function onClick(e) {
return navForward(e);
},
disabled: isDisabled,
'aria-label': localeOption('aria') ? localeOption('aria').nextPageLabel : undefined,
'data-pc-group-section': 'navigator'
}, ptm('nextButton'));
return /*#__PURE__*/React.createElement("button", nextButtonProps, forwardNavigatorIcon, /*#__PURE__*/React.createElement(Ripple, null));
}
return null;
};
var ariaPageLabel = function ariaPageLabel(value) {
return ariaLabel('pageLabel', {
page: value
});
};
var createIndicator = function createIndicator(index) {
var isActive = currentPage === index;
var getPTOptions = function getPTOptions(key) {
return ptm(key, {
context: {
active: isActive
}
});
};
var key = 'carousel-indicator-' + index;
var indicatorProps = mergeProps({
className: cx('indicator', {
isActive: isActive
}),
'data-p-highlight': isActive
}, getPTOptions('indicator'));
var indicatorButtonProps = mergeProps({
type: 'button',
className: cx('indicatorButton'),
tabIndex: currentPage === index ? '0' : '-1',
onClick: function onClick(e) {
return onIndicatorClick(e, index);
},
'aria-label': ariaPageLabel(index + 1),
'aria-current': currentPage === index ? 'page' : undefined
}, getPTOptions('indicatorButton'));
return /*#__PURE__*/React.createElement("li", _extends({}, indicatorProps, {
key: key
}), /*#__PURE__*/React.createElement("button", indicatorButtonProps, /*#__PURE__*/React.createElement(Ripple, null)));
};
var createIndicators = function createIndicators() {
if (props.showIndicators) {
var _indicators = [];
for (var i = 0; i < totalIndicators; i++) {
_indicators.push(createIndicator(i));
}
var indicatorsProps = mergeProps({
ref: indicatorContent,
className: classNames(props.indicatorsContentClassName, cx('indicators')),
onKeyDown: onIndicatorKeydown
}, ptm('indicators'));
return /*#__PURE__*/React.createElement("ul", indicatorsProps, _indicators);
}
return null;
};
var content = createContent();
var indicators = createIndicators();
var header = createHeader();
var footer = createFooter();
var rootProps = mergeProps({
id: props.id,
ref: elementRef,
className: classNames(props.className, cx('root', {
isVertical: isVertical
})),
style: props.style,
role: 'region'
}, CarouselBase.getOtherProps(props), ptm('root'));
var contentProps = mergeProps({
className: classNames(props.contentClassName, cx('content'))
}, ptm('content'));
return /*#__PURE__*/React.createElement("div", rootProps, header, /*#__PURE__*/React.createElement("div", contentProps, content, indicators), footer);
}));
CarouselItem.displayName = 'CarouselItem';
Carousel.displayName = 'Carousel';
var TimesIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
d: "M8.01186 7.00933L12.27 2.75116C12.341 2.68501 12.398 2.60524 12.4375 2.51661C12.4769 2.42798 12.4982 2.3323 12.4999 2.23529C12.5016 2.13827 12.4838 2.0419 12.4474 1.95194C12.4111 1.86197 12.357 1.78024 12.2884 1.71163C12.2198 1.64302 12.138 1.58893 12.0481 1.55259C11.9581 1.51625 11.8617 1.4984 11.7647 1.50011C11.6677 1.50182 11.572 1.52306 11.4834 1.56255C11.3948 1.60204 11.315 1.65898 11.2488 1.72997L6.99067 5.98814L2.7325 1.72997C2.59553 1.60234 2.41437 1.53286 2.22718 1.53616C2.03999 1.53946 1.8614 1.61529 1.72901 1.74767C1.59663 1.88006 1.5208 2.05865 1.5175 2.24584C1.5142 2.43303 1.58368 2.61419 1.71131 2.75116L5.96948 7.00933L1.71131 11.2675C1.576 11.403 1.5 11.5866 1.5 11.7781C1.5 11.9696 1.576 12.1532 1.71131 12.2887C1.84679 12.424 2.03043 12.5 2.2219 12.5C2.41338 12.5 2.59702 12.424 2.7325 12.2887L6.99067 8.03052L11.2488 12.2887C11.3843 12.424 11.568 12.5 11.7594 12.5C11.9509 12.5 12.1346 12.424 12.27 12.2887C12.4053 12.1532 12.4813 11.9696 12.4813 11.7781C12.4813 11.5866 12.4053 11.403 12.27 11.2675L8.01186 7.00933Z",
fill: "currentColor"
}));
}));
TimesIcon.displayName = 'TimesIcon';
var classes$14 = {
root: function root(_ref) {
var props = _ref.props,
focusedState = _ref.focusedState,
overlayVisibleState = _ref.overlayVisibleState,
context = _ref.context;
return classNames('p-cascadeselect p-component p-inputwrapper', {
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled',
'p-focus': focusedState,
'p-inputwrapper-filled': props.value,
'p-inputwrapper-focus': focusedState || overlayVisibleState
});
},
label: function label(_ref2) {
var props = _ref2.props,
_label = _ref2.label;
return classNames('p-cascadeselect-label ', {
'p-placeholder': _label === props.placeholder,
'p-cascadeselect-label-empty': !props.value && _label === 'p-emptylabel'
});
},
list: 'p-cascadeselect-panel p-cascadeselect-items',
sublistWrapper: 'p-cascadeselect-sublist-wrapper',
sublist: 'p-cascadeselect-panel p-cascadeselect-items p-cascadeselect-sublist',
item: function item(_ref3) {
_ref3.option;
var isGroup = _ref3.isGroup,
isSelected = _ref3.isSelected;
return classNames('p-cascadeselect-item', {
'p-cascadeselect-item-group': isGroup,
'p-cascadeselect-item-active p-highlight': isSelected
});
},
dropdownIcon: 'p-cascadeselect-trigger-icon',
clearIcon: 'p-cascadeselect-clear-icon p-clickable',
loadingIcon: 'p-cascadeselect-trigger-icon',
dropdownButton: 'p-cascadeselect-trigger',
loadingButton: 'p-cascadeselect-trigger',
wrapper: 'p-cascadeselect-items-wrapper',
panel: 'p-cascadeselect-panel p-component',
content: 'p-cascadeselect-item-content',
optionGroupIcon: 'p-cascadeselect-group-icon',
text: 'p-cascadeselect-item-text',
transition: 'p-connected-overlay'
};
var styles$U = "\n@layer primereact {\n .p-cascadeselect {\n display: inline-flex;\n cursor: pointer;\n position: relative;\n user-select: none;\n }\n\n .p-cascadeselect-trigger {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n .p-cascadeselect-label {\n display: block;\n white-space: nowrap;\n overflow: hidden;\n flex: 1 1 auto;\n width: 1%;\n text-overflow: ellipsis;\n cursor: pointer;\n }\n\n .p-cascadeselect-label-empty {\n overflow: hidden;\n visibility: hidden;\n }\n\n .p-cascadeselect .p-cascadeselect-panel {\n min-width: 100%;\n }\n\n .p-cascadeselect-item {\n cursor: pointer;\n font-weight: normal;\n white-space: nowrap;\n }\n\n .p-cascadeselect-item-content {\n display: flex;\n align-items: center;\n overflow: hidden;\n position: relative;\n }\n\n .p-cascadeselect-group-icon {\n margin-left: auto;\n }\n\n .p-cascadeselect-items {\n margin: 0;\n padding: 0;\n list-style-type: none;\n min-width: 100%;\n }\n\n .p-fluid .p-cascadeselect {\n display: flex;\n }\n\n .p-fluid .p-cascadeselect .p-cascadeselect-label {\n width: 1%;\n }\n\n .p-cascadeselect-sublist-wrapper {\n position: absolute;\n min-width: 100%;\n z-index: 1;\n display: none;\n }\n\n .p-cascadeselect-item-active {\n overflow: visible;\n }\n\n .p-cascadeselect-item-active > .p-cascadeselect-sublist-wrapper {\n display: block;\n left: 100%;\n top: 0;\n }\n .p-cascadeselect-clear-icon {\n position: absolute;\n top: 50%;\n margin-top: -.5rem;\n right: 3rem;\n }\n}\n";
var CascadeSelectBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'CascadeSelect',
appendTo: null,
ariaLabelledBy: null,
autoFocus: false,
breakpoint: undefined,
showClear: false,
className: null,
dataKey: null,
disabled: false,
loadingIcon: null,
dropdownIcon: null,
loading: false,
id: null,
inputId: null,
inputRef: null,
invalid: false,
variant: null,
itemTemplate: null,
name: null,
onBeforeHide: null,
onBeforeShow: null,
onChange: null,
onGroupChange: null,
onHide: null,
onShow: null,
optionGroupChildren: null,
optionGroupIcon: null,
optionGroupLabel: null,
optionLabel: null,
optionValue: null,
options: null,
panelClassName: null,
panelStyle: null,
placeholder: null,
scrollHeight: '400px',
style: null,
tabIndex: null,
transitionOptions: null,
value: null,
children: undefined
},
css: {
classes: classes$14,
styles: styles$U
}
});
var AngleRightIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
d: "M5.25 11.1728C5.14929 11.1694 5.05033 11.1455 4.9592 11.1025C4.86806 11.0595 4.78666 10.9984 4.72 10.9228C4.57955 10.7822 4.50066 10.5916 4.50066 10.3928C4.50066 10.1941 4.57955 10.0035 4.72 9.86283L7.72 6.86283L4.72 3.86283C4.66067 3.71882 4.64765 3.55991 4.68275 3.40816C4.71785 3.25642 4.79932 3.11936 4.91585 3.01602C5.03238 2.91268 5.17819 2.84819 5.33305 2.83149C5.4879 2.81479 5.64411 2.84671 5.78 2.92283L9.28 6.42283C9.42045 6.56346 9.49934 6.75408 9.49934 6.95283C9.49934 7.15158 9.42045 7.34221 9.28 7.48283L5.78 10.9228C5.71333 10.9984 5.63193 11.0595 5.5408 11.1025C5.44966 11.1455 5.35071 11.1694 5.25 11.1728Z",
fill: "currentColor"
}));
}));
AngleRightIcon.displayName = 'AngleRightIcon';
function ownKeys$1I(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$1I(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1I(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1I(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var CascadeSelectSub = /*#__PURE__*/React.memo(function (props) {
var mergeProps = useMergeProps();
var _React$useState = React.useState(null),
_React$useState2 = _slicedToArray(_React$useState, 2),
activeOptionState = _React$useState2[0],
setActiveOptionState = _React$useState2[1];
var elementRef = React.useRef(null);
var context = React.useContext(PrimeReactContext);
var ptm = props.ptm,
cx = props.cx;
var getPTOptions = function getPTOptions(key, options) {
return ptm(key, {
hostName: props.hostName,
state: _objectSpread$1I({}, options)
});
};
var position = function position() {
var parentItem = elementRef.current.parentElement.parentElement;
var containerOffset = DomHandler.getOffset(parentItem);
var viewport = DomHandler.getViewport();
var sublistWidth = elementRef.current.offsetParent ? elementRef.current.offsetWidth : DomHandler.getHiddenElementOuterWidth(element);
var itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
elementRef.current.parentElement.style.left = '-100%';
}
};
var onOptionSelect = function onOptionSelect(event) {
props.onOptionSelect && props.onOptionSelect(event);
};
var _onKeyDown = function onKeyDown(event, option) {
var listItem = event.currentTarget.parentElement;
switch (event.key) {
case 'Down':
case 'ArrowDown':
var nextItem = _findNextItem(listItem);
if (nextItem) {
nextItem.children[0].focus();
}
break;
case 'Up':
case 'ArrowUp':
var prevItem = _findPrevItem(listItem);
if (prevItem) {
prevItem.children[0].focus();
}
break;
case 'Right':
case 'ArrowRight':
if (isOptionGroup(option)) {
if (activeOptionState === option) {
listItem.children[1].children[0].children[0].focus();
} else {
setActiveOptionState(option);
}
}
break;
case 'Left':
case 'ArrowLeft':
setActiveOptionState(null);
var parentList = event.currentTarget.parentElement.parentElement.previousElementSibling;
if (parentList) {
parentList.focus();
}
break;
case 'Enter':
onOptionClick(event, option);
break;
case 'Tab':
case 'Escape':
if (props.onPanelHide) {
props.onPanelHide();
event.preventDefault();
}
break;
}
event.preventDefault();
};
var _findNextItem = function findNextItem(item) {
var nextItem = item.nextElementSibling;
return nextItem ? DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-cascadeselect-item') ? _findNextItem(nextItem) : nextItem : null;
};
var _findPrevItem = function findPrevItem(item) {
var prevItem = item.previousElementSibling;
return prevItem ? DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-cascadeselect-item') ? _findPrevItem(prevItem) : prevItem : null;
};
var onOptionClick = function onOptionClick(event, option) {
if (isOptionGroup(option)) {
setActiveOptionState(function (prevActiveOption) {
return prevActiveOption === option ? null : option;
});
if (props.onOptionGroupSelect) {
props.onOptionGroupSelect({
originalEvent: event,
value: option
});
}
} else if (props.onOptionSelect) {
props.onOptionSelect({
originalEvent: event,
value: getOptionValue(option)
});
}
};
var onOptionGroupSelect = function onOptionGroupSelect(event) {
props.onOptionGroupSelect && props.onOptionGroupSelect(event);
};
var getOptionLabel = function getOptionLabel(option) {
return props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option;
};
var getOptionValue = function getOptionValue(option) {
return props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option;
};
var getOptionGroupLabel = function getOptionGroupLabel(optionGroup) {
return props.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel) : null;
};
var getOptionGroupChildren = function getOptionGroupChildren(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupChildren[props.level]);
};
var isOptionGroup = function isOptionGroup(option) {
return Object.prototype.hasOwnProperty.call(option, props.optionGroupChildren[props.level]);
};
var getOptionLabelToRender = function getOptionLabelToRender(option) {
return isOptionGroup(option) ? getOptionGroupLabel(option) : getOptionLabel(option);
};
useMountEffect(function () {
if (props.selectionPath && props.options && !props.dirty) {
var activeOption = props.options.find(function (o) {
return props.selectionPath.includes(o);
});
activeOption && setActiveOptionState(activeOption);
}
if (!props.root) {
position();
}
});
useUpdateEffect(function () {
if (!props.parentActive) {
setActiveOptionState(null);
}
}, [props.parentActive]);
var createSubmenu = function createSubmenu(option) {
if (isOptionGroup(option) && activeOptionState === option) {
var options = getOptionGroupChildren(option);
var parentActive = activeOptionState === option;
var level = props.level + 1;
return /*#__PURE__*/React.createElement(CascadeSelectSub, {
hostName: props.hostName,
options: options,
className: cx('sublist'),
selectionPath: props.selectionPath,
optionLabel: props.optionLabel,
optionValue: props.optionValue,
level: level,
onOptionSelect: onOptionSelect,
onOptionGroupSelect: onOptionGroupSelect,
parentActive: parentActive,
optionGroupLabel: props.optionGroupLabel,
optionGroupChildren: props.optionGroupChildren,
dirty: props.dirty,
template: props.template,
onPanelHide: props.onPanelHide,
ptm: ptm,
cx: cx
});
}
return null;
};
var createOption = function createOption(option, index) {
var submenu = createSubmenu(option);
var textProps = mergeProps({
className: cx('text')
}, getPTOptions('text'));
var content = props.template ? ObjectUtils.getJSXElement(props.template, getOptionValue(option)) : /*#__PURE__*/React.createElement("span", textProps, getOptionLabelToRender(option));
var optionGroupIconProps = mergeProps({
className: cx('optionGroupIcon')
}, getPTOptions('optionGroupIcon'));
var icon = props.optionGroupIcon || /*#__PURE__*/React.createElement(AngleRightIcon, optionGroupIconProps);
var optionGroup = isOptionGroup(option) && IconUtils.getJSXIcon(icon, _objectSpread$1I({}, optionGroupIconProps), {
props: props
});
var key = getOptionLabelToRender(option) + '_' + index;
var contentProps = mergeProps({
className: cx('content'),
onClick: function onClick(event) {
return onOptionClick(event, option);
},
tabIndex: 0,
onKeyDown: function onKeyDown(event) {
return _onKeyDown(event, option);
}
}, getPTOptions('content'));
var isSelected = activeOptionState === option;
var isGroup = isOptionGroup(option);
var itemProps = mergeProps({
className: classNames(option.className, cx('item', {
option: option,
isGroup: isGroup,
isSelected: isSelected
})),
style: option.style,
role: 'none',
'data-p-item-group': isGroup,
'data-p-highlight': isSelected
}, getPTOptions('item', {
selected: isSelected,
group: isGroup
}));
return /*#__PURE__*/React.createElement("li", _extends({
key: key
}, itemProps), /*#__PURE__*/React.createElement("div", contentProps, content, optionGroup, /*#__PURE__*/React.createElement(Ripple, null)), submenu);
};
var createMenu = function createMenu() {
return props.options ? props.options.map(createOption) : null;
};
var createList = function createList() {
var listProps = mergeProps({
ref: elementRef,
className: cx(props.level === 0 ? 'list' : 'sublist', {
context: context
}),
role: 'listbox',
'aria-orientation': 'horizontal'
}, props.level === 0 ? getPTOptions('list') : getPTOptions('sublist'));
var submenu = createMenu();
return /*#__PURE__*/React.createElement("ul", listProps, submenu);
};
var createElement = function createElement() {
var list = createList();
var listWrapperProps = mergeProps({
className: cx('sublistWrapper')
}, getPTOptions('sublistWrapper'));
return props.level === 0 ? list : /*#__PURE__*/React.createElement("div", listWrapperProps, list);
};
var element = createElement();
return element;
});
function _createForOfIteratorHelper$d(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$d(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray$d(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$d(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$d(r, a) : void 0; } }
function _arrayLikeToArray$d(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 ownKeys$1H(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$1H(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1H(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1H(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var CascadeSelect = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = CascadeSelectBase.getProps(inProps, context);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
overlayVisibleState = _React$useState4[0],
setOverlayVisibleState = _React$useState4[1];
var _React$useState5 = React.useState(null),
_React$useState6 = _slicedToArray(_React$useState5, 2),
attributeSelectorState = _React$useState6[0],
setAttributeSelectorState = _React$useState6[1];
var _CascadeSelectBase$se = CascadeSelectBase.setMetaData({
props: props,
state: {
focused: focusedState,
overlayVisible: overlayVisibleState,
attributeSelector: attributeSelectorState
},
context: _objectSpread$1H({}, context)
}),
ptm = _CascadeSelectBase$se.ptm,
cx = _CascadeSelectBase$se.cx,
isUnstyled = _CascadeSelectBase$se.isUnstyled;
useHandleStyle(CascadeSelectBase.css.styles, isUnstyled, {
name: 'cascadeselect'
});
var elementRef = React.useRef(null);
var overlayRef = React.useRef(null);
var inputRef = React.useRef(null);
var labelRef = React.useRef(null);
var styleElementRef = React.useRef(null);
var dirty = React.useRef(false);
var selectionPath = React.useRef(null);
var selfChange = React.useRef(null);
var _useOverlayListener = useOverlayListener({
target: elementRef,
overlay: overlayRef,
listener: function listener(event, _ref) {
var valid = _ref.valid,
type = _ref.type;
if (valid) {
if (context.hideOverlaysOnDocumentScrolling || type === 'outside') {
hide();
} else if (!DomHandler.isDocument(event.target)) {
alignOverlay();
}
}
},
when: overlayVisibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var cascadeSelectOverlayDisplayOrder = useDisplayOrder('cascade-select', overlayVisibleState);
useGlobalOnEscapeKey({
callback: function callback() {
hide();
},
when: overlayVisibleState && cascadeSelectOverlayDisplayOrder,
priority: [ESC_KEY_HANDLING_PRIORITIES.CASCADE_SELECT, cascadeSelectOverlayDisplayOrder]
});
var onOptionSelect = function onOptionSelect(event) {
if (props.onChange) {
selfChange.current = true;
props.onChange({
originalEvent: event,
value: event.value
});
}
updateSelectionPath();
hide();
DomHandler.focus(inputRef.current);
};
var onOptionGroupSelect = function onOptionGroupSelect(event) {
dirty.current = true;
props.onGroupChange && props.onGroupChange(event);
};
var getOptionLabel = function getOptionLabel(option) {
var label = props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option;
return label || option;
};
var getOptionValue = function getOptionValue(option) {
return props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option;
};
var getOptionGroupChildren = function getOptionGroupChildren(optionGroup, level) {
return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupChildren[level]);
};
var isOptionGroup = function isOptionGroup(option, level) {
return Object.prototype.hasOwnProperty.call(option, props.optionGroupChildren[level]);
};
var updateSelectionPath = function updateSelectionPath() {
var path;
if (props.value != null && props.options) {
var _iterator = _createForOfIteratorHelper$d(props.options),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var option = _step.value;
path = _findModelOptionInGroup(option, 0);
if (path) {
break;
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
}
selectionPath.current = path;
};
var _findModelOptionInGroup = function findModelOptionInGroup(option, level) {
if (isOptionGroup(option, level)) {
var selectedOption;
var _iterator2 = _createForOfIteratorHelper$d(getOptionGroupChildren(option, level)),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var childOption = _step2.value;
selectedOption = _findModelOptionInGroup(childOption, level + 1);
if (selectedOption) {
selectedOption.unshift(option);
return selectedOption;
}
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
} else if (ObjectUtils.equals(props.value, getOptionValue(option), props.dataKey)) {
return [option];
}
return null;
};
var _onClick = function onClick(event) {
if (props.disabled || props.loading) {
return;
}
if (!overlayRef.current || !overlayRef.current.contains(event.target)) {
DomHandler.focus(inputRef.current);
overlayVisibleState ? hide() : show();
}
};
var onInputFocus = function onInputFocus() {
setFocusedState(true);
};
var onInputBlur = function onInputBlur() {
setFocusedState(false);
};
var onInputKeyDown = function onInputKeyDown(event) {
switch (event.which) {
//down
case 40:
if (overlayVisibleState) {
DomHandler.findSingle(overlayRef.current, '[data-pc-section="item"]').children[0].focus();
} else if (event.altKey && props.options && props.options.length) {
show();
}
event.preventDefault();
break;
//space
case 32:
overlayVisibleState ? hide() : show();
event.preventDefault();
break;
//tab
case 9:
hide();
break;
}
};
var onPanelClick = function onPanelClick(event) {
OverlayService.emit('overlay-click', {
originalEvent: event,
target: elementRef.current
});
};
var show = function show() {
props.onBeforeShow && props.onBeforeShow();
setOverlayVisibleState(true);
};
var hide = function hide() {
props.onBeforeHide && props.onBeforeHide();
setOverlayVisibleState(false);
DomHandler.focus(inputRef.current);
};
var onOverlayEnter = function onOverlayEnter() {
ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, context && context.zIndex.overlay || PrimeReact.zIndex.overlay);
DomHandler.addStyles(overlayRef.current, {
position: 'absolute',
top: '0',
left: '0'
});
alignOverlay();
if (attributeSelectorState && props.breakpoint) {
overlayRef.current.setAttribute(attributeSelectorState + '_panel', '');
createStyle();
}
};
var onOverlayEntered = function onOverlayEntered() {
bindOverlayListener();
props.onShow && props.onShow();
};
var onOverlayExit = function onOverlayExit() {
unbindOverlayListener();
dirty.current = false;
};
var onOverlayExited = function onOverlayExited() {
ZIndexUtils.clear(overlayRef.current);
props.onHide && props.onHide();
destroyStyle();
};
var alignOverlay = function alignOverlay() {
DomHandler.alignOverlay(overlayRef.current, labelRef.current.parentElement, props.appendTo || context && context.appendTo || PrimeReact.appendTo);
};
var createStyle = function createStyle() {
if (!styleElementRef.current) {
styleElementRef.current = DomHandler.createInlineStyle(context && context.nonce || PrimeReact.nonce, context && context.styleContainer);
var selector = "".concat(attributeSelectorState, "_panel");
var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n .p-cascadeselect-panel[").concat(selector, "] .p-cascadeselect-items-wrapper > ul {\n max-height: ").concat(props.scrollHeight, ";\n overflow: ").concat(props.scrollHeight ? 'auto' : '', ";\n }\n\n .p-cascadeselect-panel[").concat(selector, "] .p-cascadeselect-sublist-wrapper {\n position:relative;\n left:0 !important;\n }\n\n .p-cascadeselect-panel[").concat(selector, "] .p-cascadeselect-sublist {\n overflow: hidden !important;\n }\n\n .p-cascadeselect-panel[").concat(selector, "] .p-cascadeselect-item-active .p-cascadeselect-sublist {\n left: 0;\n box-shadow: none;\n border-radius: 0;\n padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */\n }\n\n .p-cascadeselect-panel[").concat(selector, "] .p-cascadeselect-group-icon:before {\n content: \"\\e930\";\n }\n}\n");
styleElementRef.current.innerHTML = innerHTML;
}
};
var destroyStyle = function destroyStyle() {
styleElementRef.current = DomHandler.removeInlineStyle(styleElementRef.current);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
},
getOverlay: function getOverlay() {
return overlayRef.current;
},
getInput: function getInput() {
return inputRef.current;
},
getLabel: function getLabel() {
return labelRef.current;
},
focus: function focus() {
return DomHandler.focus(inputRef.current);
}
};
});
useMountEffect(function () {
if (props.breakpoint) {
!attributeSelectorState && setAttributeSelectorState(UniqueComponentId());
}
if (props.autoFocus) {
DomHandler.focus(inputRef.current, props.autoFocus);
}
alignOverlay();
});
React.useEffect(function () {
ObjectUtils.combinedRefs(inputRef, props.inputRef);
}, [inputRef, props.inputRef]);
useUpdateEffect(function () {
updateSelectionPath();
}, [props.value]);
useUnmountEffect(function () {
ZIndexUtils.clear(overlayRef.current);
});
var createKeyboardHelper = function createKeyboardHelper() {
var value = props.value ? getOptionLabel(props.value) : undefined;
var hiddenSelectedMessageProps = mergeProps({
className: 'p-hidden-accessible'
}, ptm('hiddenSelectedMessage'));
var inputProps = mergeProps(_objectSpread$1H({
ref: inputRef,
type: 'text',
id: props.inputId,
name: props.name,
defaultValue: value,
readOnly: true,
disabled: props.disabled,
onFocus: onInputFocus,
onBlur: onInputBlur,
onKeyDown: function onKeyDown(e) {
return onInputKeyDown(e);
},
tabIndex: props.tabIndex,
'aria-haspopup': 'listbox'
}, ariaProps), ptm('input'));
return /*#__PURE__*/React.createElement("div", hiddenSelectedMessageProps, /*#__PURE__*/React.createElement("input", inputProps));
};
var clear = function clear(event) {
if (props.onChange) {
selfChange.current = true;
props.onChange({
originalEvent: event,
value: undefined,
stopPropagation: function stopPropagation() {
event === null || event === void 0 || event.stopPropagation();
},
preventDefault: function preventDefault() {
event === null || event === void 0 || event.preventDefault();
},
target: {
name: props.name,
id: props.id,
value: undefined
}
});
}
};
var onClearIconKeyDown = function onClearIconKeyDown(event) {
if (event.key === 'Enter' || event.code === 'Space') {
clear(event);
event.preventDefault();
}
};
var createClearIcon = function createClearIcon() {
if (props.value != null && props.showClear && !props.disabled) {
var clearIconProps = mergeProps({
className: cx('clearIcon'),
onPointerUp: clear,
tabIndex: props.tabIndex || '0',
onKeyDown: onClearIconKeyDown,
'aria-label': localeOption('clear')
}, ptm('clearIcon'));
var icon = props.clearIcon || /*#__PURE__*/React.createElement(TimesIcon, clearIconProps);
return IconUtils.getJSXIcon(icon, _objectSpread$1H({}, clearIconProps), {
props: props
});
}
return null;
};
var createLabel = function createLabel() {
var label = props.value ? getOptionLabel(props.value) : props.placeholder || 'p-emptylabel';
var labelProps = mergeProps({
ref: labelRef,
className: cx('label', {
label: label
})
}, ptm('label', {
context: _objectSpread$1H({
label: label
}, context)
}));
return /*#__PURE__*/React.createElement("span", labelProps, label);
};
var createLoadingIcon = function createLoadingIcon() {
var loadingIconProps = mergeProps({
className: cx('loadingIcon')
}, ptm('loadingIcon'));
var icon = props.loadingIcon || /*#__PURE__*/React.createElement(SpinnerIcon, {
spin: true
});
var loadingIcon = IconUtils.getJSXIcon(icon, _objectSpread$1H({}, loadingIconProps), {
props: props
});
var loadingButtonProps = mergeProps({
className: cx('loadingButton'),
role: 'button',
'aria-haspopup': 'listbox',
'aria-expanded': overlayVisibleState
}, ptm('dropdownButton'));
return /*#__PURE__*/React.createElement("div", loadingButtonProps, loadingIcon);
};
var createDropdownIcon = function createDropdownIcon() {
var dropdownIconProps = mergeProps({
className: cx('dropdownIcon')
}, ptm('dropdownIcon'));
var icon = props.dropdownIcon || /*#__PURE__*/React.createElement(ChevronDownIcon, dropdownIconProps);
var dropdownIcon = IconUtils.getJSXIcon(icon, _objectSpread$1H({}, dropdownIconProps), {
props: props
});
var dropdownButtonProps = mergeProps({
className: cx('dropdownButton'),
role: 'button',
'aria-haspopup': 'listbox',
'aria-expanded': overlayVisibleState
}, ptm('dropdownButton'));
return /*#__PURE__*/React.createElement("div", dropdownButtonProps, dropdownIcon);
};
var wrapperProps = mergeProps({
className: cx('wrapper')
}, ptm('wrapper'));
var panelProps = mergeProps({
ref: overlayRef,
className: classNames(props.panelClassName, cx('panel')),
style: props.panelStyle,
onClick: function onClick(e) {
return onPanelClick(e);
}
}, ptm('panel'));
var createOverlay = function createOverlay() {
var transitionProps = mergeProps({
classNames: cx('transition'),
"in": overlayVisibleState,
timeout: {
enter: 120,
exit: 100
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: onOverlayEnter,
onEntered: onOverlayEntered,
onExit: onOverlayExit,
onExited: onOverlayExited
}, ptm('transition'));
var overlay = /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: overlayRef
}, transitionProps), /*#__PURE__*/React.createElement("div", panelProps, /*#__PURE__*/React.createElement("div", wrapperProps, /*#__PURE__*/React.createElement(CascadeSelectSub, {
hostName: "CascadeSelect",
options: props.options,
selectionPath: selectionPath.current,
optionGroupIcon: props.optionGroupIcon,
optionLabel: props.optionLabel,
optionValue: props.optionValue,
parentActive: props.value != null,
level: 0,
optionGroupLabel: props.optionGroupLabel,
optionGroupChildren: props.optionGroupChildren,
onOptionSelect: onOptionSelect,
onOptionGroupSelect: onOptionGroupSelect,
root: true,
template: props.itemTemplate,
onPanelHide: hide,
ptm: ptm,
cx: cx
}))));
return /*#__PURE__*/React.createElement(Portal, {
element: overlay,
appendTo: props.appendTo
});
};
var createElement = function createElement() {
var keyboardHelper = createKeyboardHelper();
var labelElement = createLabel();
var clearIcon = createClearIcon();
var dropdownIcon = props.loading ? createLoadingIcon() : createDropdownIcon();
var overlay = createOverlay();
var rootProps = mergeProps({
id: props.id,
ref: elementRef,
className: classNames(props.className, cx('root', {
focusedState: focusedState,
overlayVisibleState: overlayVisibleState,
context: context
})),
style: props.style,
onClick: function onClick(e) {
return _onClick(e);
}
}, otherProps, ptm('root'));
return /*#__PURE__*/React.createElement("div", rootProps, keyboardHelper, labelElement, clearIcon, dropdownIcon, overlay);
};
var otherProps = CascadeSelectBase.getOtherProps(props);
ObjectUtils.reduceKeys(otherProps, DomHandler.DATA_PROPS);
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var element = createElement();
return element;
}));
CascadeSelect.displayName = 'CascadeSelect';
var ChartBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Chart',
id: null,
type: null,
data: null,
options: null,
plugins: null,
width: null,
height: null,
style: null,
className: null,
children: undefined
},
css: {
classes: {
root: 'p-chart'
},
inlineStyles: {
root: function root(_ref) {
var props = _ref.props;
return Object.assign({
width: props.width,
height: props.height
}, props.style);
}
},
styles: "\n @layer primereact {\n .p-chart {\n position: relative\n }\n }\n "
}
});
// GitHub #3059 wrapper if loaded by script tag
var ChartJS = function () {
try {
return Chart;
} catch (_unused) {
return null;
}
}();
var PrimeReactChart = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = ChartBase.getProps(inProps, context);
var _ChartBase$setMetaDat = ChartBase.setMetaData({
props: props
}),
ptm = _ChartBase$setMetaDat.ptm,
cx = _ChartBase$setMetaDat.cx,
sx = _ChartBase$setMetaDat.sx,
isUnstyled = _ChartBase$setMetaDat.isUnstyled;
useHandleStyle(ChartBase.css.styles, isUnstyled, {
name: 'chart'
});
var elementRef = React.useRef(null);
var chartRef = React.useRef(null);
var canvasRef = React.useRef(null);
var initChart = function initChart() {
destroyChart();
var configuration = {
type: props.type,
data: props.data,
options: props.options,
plugins: props.plugins
};
if (ChartJS) {
// GitHub #3059 loaded by script only
chartRef.current = new ChartJS(canvasRef.current, configuration);
} else {
import('chart.js/auto').then(function (module) {
destroyChart();
// In case that the Chart component has been unmounted during asynchronous loading of ChartJS,
// the canvasRef will not be available anymore, and no Chart should be created.
if (!canvasRef.current) {
return;
}
if (module) {
if (module["default"]) {
// WebPack
chartRef.current = new module["default"](canvasRef.current, configuration);
} else {
// ParcelJS
chartRef.current = new module(canvasRef.current, configuration);
}
}
});
}
};
var destroyChart = function destroyChart() {
if (chartRef.current) {
chartRef.current.destroy();
chartRef.current = null;
}
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getCanvas: function getCanvas() {
return canvasRef.current;
},
getChart: function getChart() {
return chartRef.current;
},
getBase64Image: function getBase64Image() {
return chartRef.current.toBase64Image();
},
getElement: function getElement() {
return elementRef.current;
},
generateLegend: function generateLegend() {
return chartRef.current && chartRef.current.generateLegend();
},
refresh: function refresh() {
return chartRef.current && chartRef.current.update();
}
};
});
React.useEffect(function () {
initChart();
});
useUnmountEffect(function () {
destroyChart();
});
var title = props.options && props.options.plugins && props.options.plugins.title && props.options.plugins.title.text;
var ariaLabel = props.ariaLabel || title;
var rootProps = mergeProps({
id: props.id,
ref: elementRef,
style: sx('root'),
className: classNames(props.className, cx('root'))
}, ChartBase.getOtherProps(props), ptm('root'));
var canvasProps = mergeProps({
ref: canvasRef,
width: props.width,
height: props.height,
role: 'img',
'aria-label': ariaLabel
}, ptm('canvas'));
return /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement("canvas", canvasProps));
}), function (prevProps, nextProps) {
return prevProps.data === nextProps.data && prevProps.options === nextProps.options && prevProps.type === nextProps.type;
});
PrimeReactChart.displayName = 'Chart';
var CheckIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
d: "M4.86199 11.5948C4.78717 11.5923 4.71366 11.5745 4.64596 11.5426C4.57826 11.5107 4.51779 11.4652 4.46827 11.4091L0.753985 7.69483C0.683167 7.64891 0.623706 7.58751 0.580092 7.51525C0.536478 7.44299 0.509851 7.36177 0.502221 7.27771C0.49459 7.19366 0.506156 7.10897 0.536046 7.03004C0.565935 6.95111 0.613367 6.88 0.674759 6.82208C0.736151 6.76416 0.8099 6.72095 0.890436 6.69571C0.970973 6.67046 1.05619 6.66385 1.13966 6.67635C1.22313 6.68886 1.30266 6.72017 1.37226 6.76792C1.44186 6.81567 1.4997 6.8786 1.54141 6.95197L4.86199 10.2503L12.6397 2.49483C12.7444 2.42694 12.8689 2.39617 12.9932 2.40745C13.1174 2.41873 13.2343 2.47141 13.3251 2.55705C13.4159 2.64268 13.4753 2.75632 13.4938 2.87973C13.5123 3.00315 13.4888 3.1292 13.4271 3.23768L5.2557 11.4091C5.20618 11.4652 5.14571 11.5107 5.07801 11.5426C5.01031 11.5745 4.9368 11.5923 4.86199 11.5948Z",
fill: "currentColor"
}));
}));
CheckIcon.displayName = 'CheckIcon';
var classes$13 = {
box: 'p-checkbox-box',
input: 'p-checkbox-input',
icon: 'p-checkbox-icon',
root: function root(_ref) {
var props = _ref.props,
checked = _ref.checked,
context = _ref.context;
return classNames('p-checkbox p-component', {
'p-highlight': checked,
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
});
}
};
var CheckboxBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Checkbox',
autoFocus: false,
checked: false,
className: null,
disabled: false,
falseValue: false,
icon: null,
id: null,
inputId: null,
inputRef: null,
invalid: false,
variant: null,
name: null,
onChange: null,
onContextMenu: null,
onMouseDown: null,
readOnly: false,
required: false,
style: null,
tabIndex: null,
tooltip: null,
tooltipOptions: null,
trueValue: true,
value: null,
children: undefined
},
css: {
classes: classes$13
}
});
function ownKeys$1G(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$1G(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1G(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1G(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Checkbox = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = CheckboxBase.getProps(inProps, context);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var _CheckboxBase$setMeta = CheckboxBase.setMetaData({
props: props,
state: {
focused: focusedState
},
context: {
checked: props.checked === props.trueValue,
disabled: props.disabled
}
}),
ptm = _CheckboxBase$setMeta.ptm,
cx = _CheckboxBase$setMeta.cx,
isUnstyled = _CheckboxBase$setMeta.isUnstyled;
useHandleStyle(CheckboxBase.css.styles, isUnstyled, {
name: 'checkbox'
});
var elementRef = React.useRef(null);
var inputRef = React.useRef(props.inputRef);
var isChecked = function isChecked() {
return props.checked === props.trueValue;
};
var _onChange = function onChange(event) {
if (props.disabled || props.readOnly) {
return;
}
if (props.onChange) {
var _props$onChange;
var _checked = isChecked();
var value = _checked ? props.falseValue : props.trueValue;
var eventData = {
originalEvent: event,
value: props.value,
checked: value,
stopPropagation: function stopPropagation() {
event === null || event === void 0 || event.stopPropagation();
},
preventDefault: function preventDefault() {
event === null || event === void 0 || event.preventDefault();
},
target: {
type: 'checkbox',
name: props.name,
id: props.id,
value: props.value,
checked: value
}
};
props === null || props === void 0 || (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, eventData);
// do not continue if the user defined click wants to prevent
if (event.defaultPrevented) {
return;
}
DomHandler.focus(inputRef.current);
}
};
var _onFocus = function onFocus(event) {
var _props$onFocus;
setFocusedState(true);
props === null || props === void 0 || (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, event);
};
var _onBlur = function onBlur(event) {
var _props$onBlur;
setFocusedState(false);
props === null || props === void 0 || (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, event);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
focus: function focus() {
return DomHandler.focus(inputRef.current);
},
getElement: function getElement() {
return elementRef.current;
},
getInput: function getInput() {
return inputRef.current;
}
};
});
React.useEffect(function () {
ObjectUtils.combinedRefs(inputRef, props.inputRef);
}, [inputRef, props.inputRef]);
useUpdateEffect(function () {
inputRef.current.checked = isChecked();
}, [props.checked, props.trueValue]);
useMountEffect(function () {
if (props.autoFocus) {
DomHandler.focus(inputRef.current, props.autoFocus);
}
});
var checked = isChecked();
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = CheckboxBase.getOtherProps(props);
var rootProps = mergeProps({
id: props.id,
className: classNames(props.className, cx('root', {
checked: checked,
context: context
})),
style: props.style,
'data-p-highlight': checked,
'data-p-disabled': props.disabled,
onContextMenu: props.onContextMenu,
onMouseDown: props.onMouseDown
}, otherProps, ptm('root'));
var createInputElement = function createInputElement() {
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var inputProps = mergeProps(_objectSpread$1G({
id: props.inputId,
type: 'checkbox',
className: cx('input'),
name: props.name,
tabIndex: props.tabIndex,
onFocus: function onFocus(e) {
return _onFocus(e);
},
onBlur: function onBlur(e) {
return _onBlur(e);
},
onChange: function onChange(e) {
return _onChange(e);
},
disabled: props.disabled,
readOnly: props.readOnly,
required: props.required,
'aria-invalid': props.invalid,
checked: checked
}, ariaProps), ptm('input'));
return /*#__PURE__*/React.createElement("input", _extends({
ref: inputRef
}, inputProps));
};
var createBoxElement = function createBoxElement() {
var iconProps = mergeProps({
className: cx('icon')
}, ptm('icon'));
var boxProps = mergeProps({
className: cx('box', {
checked: checked
}),
'data-p-highlight': checked,
'data-p-disabled': props.disabled
}, ptm('box'));
var icon = checked ? props.icon || /*#__PURE__*/React.createElement(CheckIcon, iconProps) : null;
var checkboxIcon = IconUtils.getJSXIcon(icon, _objectSpread$1G({}, iconProps), {
props: props,
checked: checked
});
return /*#__PURE__*/React.createElement("div", boxProps, checkboxIcon);
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef
}, rootProps), createInputElement(), createBoxElement()), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip,
pt: ptm('tooltip')
}, props.tooltipOptions)));
}));
Checkbox.displayName = 'Checkbox';
var classes$12 = {
root: function root(_ref) {
var props = _ref.props;
return classNames('p-chip p-component', {
'p-chip-image': props.image != null
});
},
removeIcon: 'p-chip-remove-icon',
icon: 'p-chip-icon',
label: 'p-chip-text'
};
var styles$T = "\n@layer primereact {\n .p-chip {\n display: inline-flex;\n align-items: center;\n }\n \n .p-chip-text {\n line-height: 1.5;\n }\n \n .p-chip-icon.pi {\n line-height: 1.5;\n }\n \n .p-chip .p-chip-remove-icon {\n line-height: 1.5;\n cursor: pointer;\n }\n \n .p-chip img {\n border-radius: 50%;\n }\n}\n";
var ChipBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Chip',
label: null,
icon: null,
image: null,
removable: false,
removeIcon: null,
className: null,
style: null,
template: null,
imageAlt: 'chip',
onImageError: null,
onRemove: null,
children: undefined
},
css: {
classes: classes$12,
styles: styles$T
}
});
function ownKeys$1F(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$1F(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1F(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1F(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Chip = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = ChipBase.getProps(inProps, context);
var elementRef = React.useRef(null);
var _React$useState = React.useState(true),
_React$useState2 = _slicedToArray(_React$useState, 2),
visibleState = _React$useState2[0],
setVisibleState = _React$useState2[1];
var _React$useState3 = React.useState(props.id),
_React$useState4 = _slicedToArray(_React$useState3, 2),
idState = _React$useState4[0],
setIdState = _React$useState4[1];
var _ChipBase$setMetaData = ChipBase.setMetaData({
props: props
}),
ptm = _ChipBase$setMetaData.ptm,
cx = _ChipBase$setMetaData.cx,
isUnstyled = _ChipBase$setMetaData.isUnstyled;
useHandleStyle(ChipBase.css.styles, isUnstyled, {
name: 'chip'
});
var onKeyDown = function onKeyDown(event) {
if (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Backspace') {
close(event);
}
};
var close = function close(event) {
var result = true;
if (props.onRemove) {
event.stopPropagation();
result = props.onRemove({
originalEvent: event,
value: props.label || props.image || props.icon
});
}
if (result !== false) {
setVisibleState(false);
}
};
var createContent = function createContent() {
var content = [];
var removeIconProps = mergeProps({
role: 'button',
tabIndex: 0,
className: cx('removeIcon'),
onClick: close,
onKeyDown: onKeyDown
}, ptm('removeIcon'));
var icon = props.removeIcon || /*#__PURE__*/React.createElement(TimesCircleIcon, _extends({}, removeIconProps, {
key: "".concat(idState, "-removeIcon")
}));
if (props.image) {
var imageProps = mergeProps({
src: props.image,
onError: props.onImageError
}, ptm('image'));
content.push(/*#__PURE__*/React.createElement("img", _extends({
alt: props.imageAlt
}, imageProps, {
key: "".concat(idState, "-image")
})));
} else if (props.icon) {
var chipIconProps = mergeProps({
className: cx('icon')
}, ptm('icon'));
content.push(IconUtils.getJSXIcon(props.icon, _objectSpread$1F({}, chipIconProps), {
props: props
}));
}
if (props.label) {
var labelProps = mergeProps({
className: cx('label')
}, ptm('label'));
content.push(/*#__PURE__*/React.createElement("span", _extends({}, labelProps, {
key: UniqueComponentId('label')
}), props.label));
}
if (props.removable) {
content.push(IconUtils.getJSXIcon(icon, _objectSpread$1F({}, removeIconProps), {
props: props
}));
}
return content;
};
var createElement = function createElement() {
var content = props.template ? ObjectUtils.getJSXElement(props.template, props) : createContent();
var rootProps = mergeProps({
ref: elementRef,
style: props.style,
className: classNames(props.className, cx('root')),
'aria-label': props.label
}, ChipBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("div", _extends({}, rootProps, {
key: UniqueComponentId('chip')
}), content);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getVisible: function getVisible() {
return visibleState;
},
setVisible: function setVisible(visible) {
return setVisibleState(visible);
},
getElement: function getElement() {
return elementRef.current;
}
};
});
useMountEffect(function () {
if (!idState) {
setIdState(UniqueComponentId());
}
});
if (!idState) {
return null;
}
return visibleState && createElement();
}));
Chip.displayName = 'Chip';
var styles$S = "\n@layer primereact {\n .p-chips {\n display: inline-flex;\n }\n \n .p-chips-multiple-container {\n margin: 0;\n padding: 0;\n list-style-type: none;\n cursor: text;\n overflow: hidden;\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n }\n \n .p-chips-token {\n cursor: default;\n display: inline-flex;\n align-items: center;\n flex: 0 0 auto;\n }\n \n .p-chips-input-token {\n flex: 1 1 auto;\n display: inline-flex;\n }\n \n .p-chips-token-icon {\n cursor: pointer;\n }\n \n .p-chips-input-token input {\n border: 0 none;\n outline: 0 none;\n background-color: transparent;\n margin: 0;\n padding: 0;\n box-shadow: none;\n border-radius: 0;\n width: 100%;\n }\n \n .p-fluid .p-chips {\n display: flex;\n }\n \n .p-chips-icon-left,\n .p-chips-icon-right {\n position: relative;\n display: inline-block;\n }\n \n .p-chips-icon-left > i,\n .p-chips-icon-right > i,\n .p-chips-icon-left > svg,\n .p-chips-icon-right > svg,\n .p-chips-icon-left > .p-chips-prefix,\n .p-chips-icon-right > .p-chips-suffix {\n position: absolute;\n top: 50%;\n margin-top: -0.5rem;\n }\n \n .p-fluid .p-chips-icon-left,\n .p-fluid .p-chips-icon-right {\n display: block;\n width: 100%;\n }\n}\n";
var classes$11 = {
removeTokenIcon: 'p-chips-token-icon',
label: 'p-chips-token-label',
token: function token(_ref) {
var focusedIndex = _ref.focusedIndex,
index = _ref.index;
return classNames('p-chips-token', {
'p-focus': focusedIndex === index
});
},
inputToken: 'p-chips-input-token',
container: function container(_ref2) {
var props = _ref2.props,
context = _ref2.context;
return classNames('p-inputtext p-chips-multiple-container', {
'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
});
},
root: function root(_ref3) {
var isFilled = _ref3.isFilled,
focusedState = _ref3.focusedState,
disabled = _ref3.disabled,
invalid = _ref3.invalid;
return classNames('p-chips p-component p-inputwrapper', {
'p-inputwrapper-filled': isFilled,
'p-inputwrapper-focus': focusedState,
'p-disabled': disabled,
'p-invalid': invalid,
'p-focus': focusedState
});
}
};
var ChipsBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Chips',
addOnBlur: null,
allowDuplicate: true,
ariaLabelledBy: null,
autoFocus: false,
className: null,
disabled: null,
id: null,
inputId: null,
inputRef: null,
invalid: false,
variant: null,
itemTemplate: null,
keyfilter: null,
max: null,
name: null,
onAdd: null,
onBlur: null,
onChange: null,
onFocus: null,
onKeyDown: null,
onRemove: null,
placeholder: null,
readOnly: false,
removable: true,
removeIcon: null,
separator: null,
style: null,
tooltip: null,
tooltipOptions: null,
value: null,
children: undefined
},
css: {
classes: classes$11,
styles: styles$S
}
});
function ownKeys$1E(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$1E(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1E(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1E(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Chips = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = ChipsBase.getProps(inProps, context);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var _React$useState3 = React.useState(null),
_React$useState4 = _slicedToArray(_React$useState3, 2),
focusedIndex = _React$useState4[0],
setFocusedIndex = _React$useState4[1];
var _ChipsBase$setMetaDat = ChipsBase.setMetaData({
props: props,
state: {
focused: focusedState
}
}),
ptm = _ChipsBase$setMetaDat.ptm,
cx = _ChipsBase$setMetaDat.cx,
isUnstyled = _ChipsBase$setMetaDat.isUnstyled;
useHandleStyle(ChipsBase.css.styles, isUnstyled, {
name: 'chips'
});
var elementRef = React.useRef(null);
var listRef = React.useRef(null);
var inputRef = React.useRef(props.inputRef);
var removeItem = function removeItem(event, index) {
if (props.disabled || props.readOnly) {
return;
}
var values = _toConsumableArray(props.value);
var removedItem = values.splice(index, 1)[0];
if (!isRemovable(removedItem, index)) {
return;
}
if (props.onRemove) {
props.onRemove({
originalEvent: event,
value: removedItem
});
}
if (props.onChange) {
props.onChange({
originalEvent: event,
value: values,
stopPropagation: function stopPropagation() {
event === null || event === void 0 || event.stopPropagation();
},
preventDefault: function preventDefault() {
event === null || event === void 0 || event.preventDefault();
},
target: {
name: props.name,
id: props.id,
value: values
}
});
}
};
var addItem = function addItem(event, item, preventDefault) {
if (item && item.trim().length) {
var values = props.value ? _toConsumableArray(props.value) : [];
if (props.allowDuplicate || values.indexOf(item) === -1) {
var allowAddition = true;
if (props.onAdd) {
allowAddition = props.onAdd({
originalEvent: event,
value: item
});
}
if (allowAddition !== false) {
values.push(item);
}
}
updateInput(event, values, preventDefault);
}
};
var onWrapperClick = function onWrapperClick() {
DomHandler.focus(inputRef.current);
};
var onContainerKeyDown = function onContainerKeyDown(event) {
switch (event.code) {
case 'ArrowLeft':
onArrowLeftKeyOn();
break;
case 'ArrowRight':
onArrowRightKeyOn();
break;
case 'Backspace':
onBackspaceKeyOn(event);
break;
}
};
var onArrowLeftKeyOn = function onArrowLeftKeyOn() {
var focusIndex = focusedIndex;
if (inputRef.current.value.length === 0 && props.value && props.value.length > 0) {
focusIndex = focusIndex === null ? props.value.length - 1 : focusIndex - 1;
if (focusIndex < 0) {
focusIndex = 0;
}
}
setFocusedIndex(focusIndex);
};
var onArrowRightKeyOn = function onArrowRightKeyOn() {
var focusIndex = focusedIndex;
if (inputRef.current.value.length === 0 && props.value && props.value.length > 0) {
if (focusIndex === props.value.length - 1) {
focusIndex = null;
inputRef.current.focus();
} else {
focusIndex++;
}
}
setFocusedIndex(focusIndex);
};
var onBackspaceKeyOn = function onBackspaceKeyOn(event) {
if (focusedIndex !== null) {
removeItem(event, focusedIndex);
}
};
var _onKeyDown = function onKeyDown(event) {
var inputValue = event.target.value;
var values = props.value || [];
props.onKeyDown && props.onKeyDown(event);
if (event.defaultPrevented) {
return;
}
switch (event.key) {
case 'Backspace':
if (inputValue.length === 0 && values.length > 0) {
removeItem(event, values.length - 1);
}
break;
case 'Enter':
if (inputValue && inputValue.trim().length && (!props.max || props.max > values.length)) {
addItem(event, inputValue, true);
}
break;
case 'ArrowLeft':
if (inputValue.length === 0 && values && values.length > 0) {
DomHandler.focus(listRef.current);
}
break;
case 'ArrowRight':
event.stopPropagation();
break;
default:
if (props.keyfilter) {
KeyFilter.onKeyPress(event, props.keyfilter);
}
if (isMaxedOut()) {
event.preventDefault();
}
break;
}
};
var updateInput = function updateInput(event, items, preventDefault) {
if (props.onChange) {
props.onChange({
originalEvent: event,
value: items,
stopPropagation: function stopPropagation() {
event === null || event === void 0 || event.stopPropagation();
},
preventDefault: function preventDefault() {
event === null || event === void 0 || event.preventDefault();
},
target: {
name: props.name,
id: props.id,
value: items
}
});
}
inputRef.current.value = '';
preventDefault && event.preventDefault();
};
var _onChange = function onChange(event) {
var _event$target$value;
var value = (_event$target$value = event.target.value) === null || _event$target$value === void 0 ? void 0 : _event$target$value.trim();
if (value === props.separator) {
inputRef.current.value = '';
return;
}
if (props.separator && value.endsWith(props.separator)) {
var trimmedValue = value.slice(0, -1);
addItem(event, trimmedValue);
}
};
var _onPaste = function onPaste(event) {
if (props.separator) {
var separator = props.separator.replace('\\n', '\n').replace('\\r', '\r').replace('\\t', '\t');
var pastedData = (event.clipboardData || window.clipboardData).getData('Text');
if (props.keyfilter) {
KeyFilter.onPaste(event, props.keyfilter);
}
if (pastedData) {
var values = props.value || [];
var pastedValues = pastedData.split(separator);
pastedValues = pastedValues.filter(function (val) {
return (props.allowDuplicate || values.indexOf(val) === -1) && val.trim().length;
});
values = [].concat(_toConsumableArray(values), _toConsumableArray(pastedValues));
updateInput(event, values, true);
}
}
};
var onContainerFocus = function onContainerFocus() {
setFocusedState(true);
};
var onContainerBlur = function onContainerBlur() {
setFocusedIndex(-1);
setFocusedState(false);
};
var _onFocus = function onFocus(event) {
setFocusedState(true);
setFocusedIndex(null);
props.onFocus && props.onFocus(event);
};
var _onBlur = function onBlur(event) {
if (props.addOnBlur) {
var inputValue = event.target.value;
var values = props.value || [];
if (inputValue && inputValue.trim().length && (!props.max || props.max > values.length)) {
addItem(event, inputValue, true);
}
}
setFocusedState(false);
props.onBlur && props.onBlur(event);
};
var isMaxedOut = function isMaxedOut() {
return props.max && props.value && props.max === props.value.length;
};
var currentValue = inputRef.current && inputRef.current.value;
var isFilled = React.useMemo(function () {
return ObjectUtils.isNotEmpty(props.value) || ObjectUtils.isNotEmpty(currentValue);
}, [props.value, currentValue]);
var isRemovable = function isRemovable(value, index) {
return ObjectUtils.getPropValue(props.removable, {
value: value,
index: index,
props: props
});
};
React.useImperativeHandle(ref, function () {
return {
props: props,
focus: function focus() {
return DomHandler.focus(inputRef.current);
},
getElement: function getElement() {
return elementRef.current;
},
getInput: function getInput() {
return inputRef.current;
}
};
});
React.useEffect(function () {
ObjectUtils.combinedRefs(inputRef, props.inputRef);
}, [inputRef, props.inputRef]);
useMountEffect(function () {
if (props.autoFocus) {
DomHandler.focus(inputRef.current, props.autoFocus);
}
});
var focusedOptionId = function focusedOptionId() {
return focusedIndex !== null ? "".concat(props.inputId, "_chips_item_").concat(focusedIndex) : null;
};
var createRemoveIcon = function createRemoveIcon(value, index) {
if (!props.disabled && !props.readOnly && isRemovable(value, index)) {
var iconProps = mergeProps({
className: cx('removeTokenIcon'),
onClick: function onClick(event) {
return removeItem(event, index);
},
'aria-hidden': 'true'
}, ptm('removeTokenIcon'));
var icon = props.removeIcon || /*#__PURE__*/React.createElement(TimesCircleIcon, _extends({}, iconProps, {
key: "".concat(index, "_icon")
}));
var removeIcon = IconUtils.getJSXIcon(icon, _objectSpread$1E({}, iconProps), {
props: props
});
return removeIcon;
}
return null;
};
var createItem = function createItem(value, index) {
var content = props.itemTemplate ? props.itemTemplate(value) : value;
var labelProps = mergeProps({
className: cx('label')
}, ptm('label'));
var label = /*#__PURE__*/React.createElement("span", _extends({}, labelProps, {
key: "".concat(index, "_").concat(value, "_span")
}), content);
var icon = createRemoveIcon(value, index);
var tokenProps = mergeProps({
id: props.inputId + '_chips_item_' + index,
role: 'option',
'aria-label': value,
className: cx('token', {
focusedIndex: focusedIndex,
index: index
}),
'aria-selected': true,
'aria-setsize': props.value.length,
'aria-posinset': index + 1,
'data-p-highlight': true,
'data-p-focused': focusedIndex === index
}, ptm('token'));
return /*#__PURE__*/React.createElement("li", _extends({}, tokenProps, {
key: "".concat(index, "_").concat(value)
}), label, icon);
};
var createInput = function createInput() {
var inputTokenProps = mergeProps({
className: cx('inputToken')
}, ptm('inputToken'));
var inputProps = mergeProps(_objectSpread$1E({
id: props.inputId,
ref: inputRef,
placeholder: props.placeholder,
type: 'text',
enterKeyHint: 'enter',
name: props.name,
disabled: props.disabled || isMaxedOut(),
onKeyDown: function onKeyDown(e) {
return _onKeyDown(e);
},
onChange: function onChange(e) {
return _onChange(e);
},
onPaste: function onPaste(e) {
return _onPaste(e);
},
onFocus: function onFocus(e) {
return _onFocus(e);
},
onBlur: function onBlur(e) {
return _onBlur(e);
},
readOnly: props.readOnly
}, ariaProps), ptm('input'));
return /*#__PURE__*/React.createElement("li", _extends({}, inputTokenProps, {
key: props.inputId + '_chips_input'
}), /*#__PURE__*/React.createElement("input", inputProps));
};
var createItems = function createItems() {
return props.value ? props.value.map(createItem) : null;
};
var createList = function createList() {
var items = createItems();
var input = createInput();
var containerProps = mergeProps({
ref: listRef,
className: cx('container', {
context: context
}),
onClick: function onClick(e) {
return onWrapperClick();
},
onKeyDown: function onKeyDown(e) {
return onContainerKeyDown(e);
},
tabIndex: -1,
role: 'listbox',
'aria-orientation': 'horizontal',
'aria-labelledby': props.ariaLabelledby,
'aria-label': props.ariaLabel,
'aria-activedescendant': focusedState ? focusedOptionId() : undefined,
'data-p-disabled': props.disabled,
'data-p-focus': focusedState,
onFocus: onContainerFocus,
onBlur: onContainerBlur
}, ptm('container'));
return /*#__PURE__*/React.createElement("ul", containerProps, items, input);
};
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = ChipsBase.getOtherProps(props);
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var list = createList();
var rootProps = mergeProps({
id: props.id,
ref: elementRef,
className: classNames(props.className, cx('root', {
isFilled: isFilled,
focusedState: focusedState,
disabled: props.disabled,
invalid: props.invalid
})),
style: props.style
}, ptm('root'));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({}, rootProps, {
key: "chips"
}), list), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: inputRef,
content: props.tooltip,
pt: ptm('tooltip')
}, props.tooltipOptions)));
}));
Chips.displayName = 'Chips';
var classes$10 = {
root: function root(_ref) {
var props = _ref.props;
return classNames('p-colorpicker p-component', {
'p-colorpicker-overlay': !props.inline
});
},
input: function input(_ref2) {
var props = _ref2.props;
return classNames('p-colorpicker-preview p-inputtext', props.inputClassName, {
'p-disabled': props.disabled
});
},
panel: function panel(_ref3) {
var panelProps = _ref3.panelProps,
context = _ref3.context;
return classNames('p-colorpicker-panel', panelProps.panelClassName, {
'p-colorpicker-overlay-panel': !panelProps.inline,
'p-disabled': panelProps.disabled,
'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
});
},
content: 'p-colorpicker-content',
hueHandle: 'p-colorpicker-hue-handle',
hue: 'p-colorpicker-hue',
colorHandle: 'p-colorpicker-color-handle',
color: 'p-colorpicker-color',
selector: 'p-colorpicker-color-selector',
transition: 'p-connected-overlay'
};
var styles$R = "\n@layer primereact {\n .p-colorpicker {\n display: inline-block;\n }\n \n .p-colorpicker-dragging {\n cursor: pointer;\n }\n \n .p-colorpicker-overlay {\n position: relative;\n }\n \n .p-colorpicker-panel {\n position: relative;\n width: 193px;\n height: 166px;\n }\n \n .p-colorpicker-overlay-panel {\n position: absolute;\n top: 0;\n left: 0;\n }\n \n .p-colorpicker-preview {\n cursor: pointer;\n }\n \n .p-colorpicker-panel .p-colorpicker-content {\n position: relative;\n }\n \n .p-colorpicker-panel .p-colorpicker-color-selector {\n width: 150px;\n height: 150px;\n top: 8px;\n left: 8px;\n position: absolute;\n }\n \n .p-colorpicker-panel .p-colorpicker-color {\n width: 150px;\n height: 150px;\n }\n \n .p-colorpicker-panel .p-colorpicker-color-handle {\n position: absolute;\n top: 0px;\n left: 150px;\n border-radius: 100%;\n width: 10px;\n height: 10px;\n border-width: 1px;\n border-style: solid;\n margin: -5px 0 0 -5px;\n cursor: pointer;\n opacity: 0.85;\n }\n \n .p-colorpicker-panel .p-colorpicker-hue {\n width: 17px;\n height: 150px;\n top: 8px;\n left: 167px;\n position: absolute;\n opacity: 0.85;\n }\n \n .p-colorpicker-panel .p-colorpicker-hue-handle {\n position: absolute;\n top: 150px;\n left: 0px;\n width: 21px;\n margin-left: -2px;\n margin-top: -5px;\n height: 10px;\n border-width: 2px;\n border-style: solid;\n opacity: 0.85;\n cursor: pointer;\n }\n \n .p-colorpicker-panel .p-colorpicker-color {\n background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)\n }\n .p-colorpicker-panel .p-colorpicker-hue {\n background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)\n }\n}\n";
var ColorPickerBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'ColorPicker',
appendTo: null,
autoFocus: false,
children: undefined,
className: null,
defaultColor: 'ff0000',
disabled: false,
format: 'hex',
id: null,
inline: false,
inputClassName: null,
inputId: null,
inputRef: null,
inputStyle: null,
onChange: null,
onHide: null,
onShow: null,
panelClassName: null,
panelStyle: null,
style: null,
tabIndex: null,
tooltip: null,
tooltipOptions: null,
transitionOptions: null,
value: null
},
css: {
classes: classes$10,
styles: styles$R
}
});
var ColorPickerPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var ptm = props.ptm,
cx = props.cx;
var createElement = function createElement() {
var panelProps = mergeProps({
className: cx('panel', {
panelProps: props,
context: context
}),
style: props.panelStyle,
onClick: props.onClick,
'data-pr-is-overlay': true
}, ptm('panel', {
hostName: props.hostName
}));
var transitionProps = mergeProps({
classNames: cx('transition'),
"in": props["in"],
timeout: {
enter: 120,
exit: 100
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: props.onEnter,
onEntered: props.onEntered,
onExit: props.onExit,
onExited: props.onExited
}, ptm('transition', {
hostName: props.hostName
}));
return /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: ref
}, transitionProps), /*#__PURE__*/React.createElement("div", _extends({
ref: ref
}, panelProps), props.children));
};
var element = createElement();
return props.inline ? element : /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo
});
});
ColorPickerPanel.displayName = 'ColorPickerPanel';
function ownKeys$1D(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$1D(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1D(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1D(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var ColorPicker = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = ColorPickerBase.getProps(inProps, context);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
overlayVisibleState = _React$useState2[0],
setOverlayVisibleState = _React$useState2[1];
var _ColorPickerBase$setM = ColorPickerBase.setMetaData({
props: props,
state: {
overlayVisible: overlayVisibleState
}
}),
ptm = _ColorPickerBase$setM.ptm,
cx = _ColorPickerBase$setM.cx,
isUnstyled = _ColorPickerBase$setM.isUnstyled;
var isCloseOnEscape = overlayVisibleState && props.closeOnEscape;
var overlayDisplayOrder = useDisplayOrder('overlay-panel', isCloseOnEscape);
useHandleStyle(ColorPickerBase.css.styles, isUnstyled, {
name: 'colorpicker'
});
useGlobalOnEscapeKey({
callback: function callback() {
hide();
},
when: overlayVisibleState && overlayDisplayOrder,
priority: [ESC_KEY_HANDLING_PRIORITIES.OVERLAY_PANEL, overlayDisplayOrder]
});
var elementRef = React.useRef(null);
var overlayRef = React.useRef(null);
var inputRef = React.useRef(props.inputRef);
var colorSelectorRef = React.useRef(null);
var colorHandleRef = React.useRef(null);
var hueHandleRef = React.useRef(null);
var hueViewRef = React.useRef(null);
var hueDragging = React.useRef(false);
var hsbValue = React.useRef(null);
var colorDragging = React.useRef(false);
var _useOverlayListener = useOverlayListener({
target: elementRef,
overlay: overlayRef,
listener: function listener(event, _ref) {
var valid = _ref.valid,
type = _ref.type;
if (valid) {
if (context.hideOverlaysOnDocumentScrolling || type === 'outside') {
hide();
} else if (!DomHandler.isDocument(event.target)) {
alignOverlay();
}
}
},
when: overlayVisibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var _useEventListener = useEventListener({
type: 'mousemove',
listener: function listener(event) {
colorDragging.current && pickColor(event);
hueDragging.current && pickHue(event);
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentMouseMoveListener = _useEventListener2[0],
unbindDocumentMouseMoveListener = _useEventListener2[1];
var _useEventListener3 = useEventListener({
type: 'mouseup',
listener: function listener() {
colorDragging.current = hueDragging.current = false;
DomHandler.removeClass(elementRef.current, 'p-colorpicker-dragging');
unbindDocumentMouseMoveListener();
unbindDocumentMouseUpListener();
}
}),
_useEventListener4 = _slicedToArray(_useEventListener3, 2),
bindDocumentMouseUpListener = _useEventListener4[0],
unbindDocumentMouseUpListener = _useEventListener4[1];
var onPanelClick = function onPanelClick(event) {
if (!props.inline) {
OverlayService.emit('overlay-click', {
originalEvent: event,
target: elementRef.current
});
}
};
var onHueMousedown = function onHueMousedown(event) {
if (props.disabled) {
return;
}
bindDragListeners();
onHueDragStart(event);
};
var onHueDragStart = function onHueDragStart(event) {
if (props.disabled) {
return;
}
hueDragging.current = true;
pickHue(event);
!isUnstyled && DomHandler.addClass(elementRef.current, 'p-colorpicker-dragging');
event.preventDefault();
};
var getPositionY = function getPositionY(event) {
if (event.pageY !== undefined) return event.pageY;else if (event.changedTouches !== undefined) return event.changedTouches[0].pageY;else return 0;
};
var pickHue = function pickHue(event) {
var top = hueViewRef.current.getBoundingClientRect().top + (window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0);
var yPos = getPositionY(event);
var hue = Math.floor(360 * (150 - Math.max(0, Math.min(150, yPos - top))) / 150);
hsbValue.current = validateHSB({
h: hue,
s: hsbValue.current.s,
b: hsbValue.current.b
});
updateColorSelector();
updateHue();
updateModel();
};
var onColorMousedown = function onColorMousedown(event) {
if (props.disabled) {
return;
}
bindDragListeners();
onColorDragStart(event);
};
var onColorDragStart = function onColorDragStart(event) {
if (props.disabled) {
return;
}
colorDragging.current = true;
pickColor(event);
!isUnstyled && DomHandler.addClass(elementRef.current, 'p-colorpicker-dragging');
event.preventDefault();
};
var onDrag = function onDrag(event) {
if (colorDragging.current) {
pickColor(event);
event.preventDefault();
}
if (hueDragging.current) {
pickHue(event);
event.preventDefault();
}
};
var onDragEnd = function onDragEnd() {
colorDragging.current = false;
hueDragging.current = false;
!isUnstyled && DomHandler.removeClass(elementRef.current, 'p-colorpicker-dragging');
unbindDragListeners();
};
var bindDragListeners = function bindDragListeners() {
bindDocumentMouseMoveListener();
bindDocumentMouseUpListener();
};
var unbindDragListeners = function unbindDragListeners() {
unbindDocumentMouseMoveListener();
unbindDocumentMouseUpListener();
};
var pickColor = function pickColor(event) {
var rect = colorSelectorRef.current.getBoundingClientRect();
var top = rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
var left = rect.left + document.body.scrollLeft;
var saturation = Math.floor(100 * Math.max(0, Math.min(150, (event.pageX || event.changedTouches[0].pageX) - left)) / 150);
var brightness = Math.floor(100 * (150 - Math.max(0, Math.min(150, (event.pageY || event.changedTouches[0].pageY) - top))) / 150);
hsbValue.current = validateHSB({
h: hsbValue.current.h,
s: saturation,
b: brightness
});
updateColorHandle();
updateInput();
updateModel();
};
var updateModel = function updateModel() {
switch (props.format) {
case 'hex':
onChange(HSBtoHEX(hsbValue.current));
break;
case 'rgb':
onChange(HSBtoRGB(hsbValue.current));
break;
case 'hsb':
onChange(hsbValue.current);
break;
}
};
var toHSB = function toHSB(value) {
var hsb;
if (value) {
switch (props.format) {
case 'hex':
hsb = HEXtoHSB(value);
break;
case 'rgb':
hsb = RGBtoHSB(value);
break;
case 'hsb':
hsb = value;
break;
}
} else {
hsb = HEXtoHSB(props.defaultColor);
}
return hsb;
};
var updateHSBValue = function updateHSBValue(value) {
hsbValue.current = toHSB(value);
};
var onChange = function onChange(value) {
if (props.onChange) {
props.onChange({
value: value,
stopPropagation: function stopPropagation() {},
preventDefault: function preventDefault() {},
target: {
name: props.name,
id: props.id,
value: value
}
});
}
};
var updateColorSelector = function updateColorSelector() {
if (colorSelectorRef.current) {
var newHsbValue = validateHSB({
h: hsbValue.current.h,
s: 100,
b: 100
});
colorSelectorRef.current.style.backgroundColor = '#' + HSBtoHEX(newHsbValue);
}
};
var updateColorHandle = function updateColorHandle() {
if (colorHandleRef.current) {
colorHandleRef.current.style.left = Math.floor(150 * hsbValue.current.s / 100) + 'px';
colorHandleRef.current.style.top = Math.floor(150 * (100 - hsbValue.current.b) / 100) + 'px';
}
};
var updateHue = function updateHue() {
if (hueHandleRef.current) {
hueHandleRef.current.style.top = Math.floor(150 - 150 * hsbValue.current.h / 360) + 'px';
}
};
var updateInput = function updateInput() {
if (inputRef.current) {
inputRef.current.style.backgroundColor = '#' + HSBtoHEX(hsbValue.current);
}
};
var show = function show() {
setOverlayVisibleState(true);
};
var hide = function hide() {
setOverlayVisibleState(false);
};
var onOverlayEnter = function onOverlayEnter() {
var styles = !props.inline ? {
position: 'absolute',
top: '0',
left: '0'
} : undefined;
ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, context && context.zIndex.overlay || PrimeReact.zIndex.overlay);
DomHandler.addStyles(overlayRef.current, styles);
alignOverlay();
};
var onOverlayEntered = function onOverlayEntered() {
bindOverlayListener();
props.onShow && props.onShow();
};
var onOverlayExit = function onOverlayExit() {
unbindOverlayListener();
};
var onOverlayExited = function onOverlayExited() {
ZIndexUtils.clear(overlayRef.current);
props.onHide && props.onHide();
};
var onInputClick = function onInputClick() {
togglePanel();
};
var togglePanel = function togglePanel() {
overlayVisibleState ? hide() : show();
};
var onInputKeydown = function onInputKeydown(event) {
switch (event.which) {
//space
case 32:
togglePanel();
event.preventDefault();
break;
//escape and tab
case 27:
case 9:
hide();
break;
}
};
var validateHSB = function validateHSB(hsb) {
return {
h: Math.min(360, Math.max(0, hsb.h)),
s: Math.min(100, Math.max(0, hsb.s)),
b: Math.min(100, Math.max(0, hsb.b))
};
};
var HEXtoRGB = function HEXtoRGB(hex) {
var hexValue = parseInt(hex.indexOf('#') > -1 ? hex.substring(1) : hex, 16);
return {
r: hexValue >> 16,
g: (hexValue & 0x00ff00) >> 8,
b: hexValue & 0x0000ff
};
};
var HEXtoHSB = function HEXtoHSB(hex) {
return RGBtoHSB(HEXtoRGB(hex));
};
var RGBtoHSB = function RGBtoHSB(rgb) {
var hsb = {
h: 0,
s: 0,
b: 0
};
var min = Math.min(rgb.r, rgb.g, rgb.b);
var max = Math.max(rgb.r, rgb.g, rgb.b);
var delta = max - min;
hsb.b = max;
hsb.s = max !== 0 ? 255 * delta / max : 0;
if (hsb.s !== 0) {
if (rgb.r === max) {
hsb.h = (rgb.g - rgb.b) / delta;
} else if (rgb.g === max) {
hsb.h = 2 + (rgb.b - rgb.r) / delta;
} else {
hsb.h = 4 + (rgb.r - rgb.g) / delta;
}
} else {
hsb.h = -1;
}
hsb.h = hsb.h * 60;
if (hsb.h < 0) {
hsb.h = hsb.h + 360;
}
hsb.s = hsb.s * (100 / 255);
hsb.b = hsb.b * (100 / 255);
return hsb;
};
var HSBtoRGB = function HSBtoRGB(hsb) {
var rgb = {
r: null,
g: null,
b: null
};
var h = Math.round(hsb.h);
var s = Math.round(hsb.s * 255 / 100);
var v = Math.round(hsb.b * 255 / 100);
if (s === 0) {
rgb = {
r: v,
g: v,
b: v
};
} else {
var t1 = v;
var t2 = (255 - s) * v / 255;
var t3 = (t1 - t2) * (h % 60) / 60;
if (h === 360) {
h = 0;
}
if (h < 60) {
rgb.r = t1;
rgb.b = t2;
rgb.g = t2 + t3;
} else if (h < 120) {
rgb.g = t1;
rgb.b = t2;
rgb.r = t1 - t3;
} else if (h < 180) {
rgb.g = t1;
rgb.r = t2;
rgb.b = t2 + t3;
} else if (h < 240) {
rgb.b = t1;
rgb.r = t2;
rgb.g = t1 - t3;
} else if (h < 300) {
rgb.b = t1;
rgb.g = t2;
rgb.r = t2 + t3;
} else if (h < 360) {
rgb.r = t1;
rgb.g = t2;
rgb.b = t1 - t3;
} else {
rgb.r = 0;
rgb.g = 0;
rgb.b = 0;
}
}
return {
r: Math.round(rgb.r),
g: Math.round(rgb.g),
b: Math.round(rgb.b)
};
};
var RGBtoHEX = function RGBtoHEX(rgb) {
var hex = [rgb.r.toString(16), rgb.g.toString(16), rgb.b.toString(16)];
for (var key in hex) {
if (hex[key].length === 1) {
hex[key] = '0' + hex[key];
}
}
return hex.join('');
};
var HSBtoHEX = function HSBtoHEX(hsb) {
return RGBtoHEX(HSBtoRGB(hsb));
};
var updateUI = function updateUI() {
updateHue();
updateColorHandle();
updateInput();
updateColorSelector();
};
var alignOverlay = function alignOverlay() {
if (inputRef.current) {
DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || context && context.appendTo || PrimeReact.appendTo);
}
};
React.useImperativeHandle(ref, function () {
return {
props: props,
show: show,
hide: hide,
focus: function focus() {
return DomHandler.focus(inputRef.current);
},
getElement: function getElement() {
return elementRef.current;
},
getOverlay: function getOverlay() {
return overlayRef.current;
},
getInput: function getInput() {
return inputRef.current;
}
};
});
React.useEffect(function () {
ObjectUtils.combinedRefs(inputRef, props.inputRef);
}, [inputRef, props.inputRef]);
useMountEffect(function () {
updateHSBValue(props.value);
updateUI();
if (props.autoFocus) {
DomHandler.focus(inputRef.current, props.autoFocus);
}
alignOverlay();
});
useUpdateEffect(function () {
if (!colorDragging.current && !hueDragging.current) {
updateHSBValue(props.value);
}
}, [props.value]);
useUpdateEffect(function () {
updateUI();
});
useUnmountEffect(function () {
ZIndexUtils.clear(overlayRef.current);
});
var createColorSelector = function createColorSelector() {
var selectorProps = mergeProps({
ref: colorSelectorRef,
className: cx('selector'),
onMouseDown: function onMouseDown(e) {
return onColorMousedown(e);
},
onTouchStart: function onTouchStart(e) {
return onColorDragStart(e);
},
onTouchMove: function onTouchMove(e) {
return onDrag(e);
},
onTouchEnd: onDragEnd
}, ptm('selector'));
var colorProps = mergeProps({
className: cx('color')
}, ptm('color'));
var colorHandlerProps = mergeProps({
ref: colorHandleRef,
className: cx('colorHandle')
}, ptm('colorHandle'));
return /*#__PURE__*/React.createElement("div", selectorProps, /*#__PURE__*/React.createElement("div", colorProps, /*#__PURE__*/React.createElement("div", colorHandlerProps)));
};
var createHue = function createHue() {
var hueProps = mergeProps({
className: cx('hue'),
onMouseDown: function onMouseDown(e) {
return onHueMousedown(e);
},
onTouchStart: function onTouchStart(e) {
return onHueDragStart(e);
},
onTouchMove: function onTouchMove(e) {
return onDrag(e);
},
onTouchEnd: onDragEnd
}, ptm('hue'));
var hueHandlerProps = mergeProps({
className: cx('hueHandle')
}, ptm('hueHandle'));
return /*#__PURE__*/React.createElement("div", _extends({
ref: hueViewRef
}, hueProps), /*#__PURE__*/React.createElement("div", _extends({
ref: hueHandleRef
}, hueHandlerProps)));
};
var createContent = function createContent() {
var colorSelector = createColorSelector();
var hue = createHue();
var contentProps = mergeProps({
className: cx('content')
}, ptm('content'));
return /*#__PURE__*/React.createElement("div", contentProps, colorSelector, hue);
};
var createInput = function createInput() {
if (!props.inline) {
var inputProps = ColorPickerBase.getOtherProps(props);
var _inputProps = mergeProps(_objectSpread$1D({
ref: inputRef,
type: 'text',
readOnly: true,
className: cx('input'),
style: props.inputStyle,
id: props.inputId,
tabIndex: props.tabIndex,
disabled: props.disabled,
onClick: onInputClick,
onKeyDown: onInputKeydown
}, inputProps), ptm('input'));
return /*#__PURE__*/React.createElement("input", _inputProps);
}
return null;
};
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var content = createContent();
var input = createInput();
var rootProps = mergeProps({
id: props.id,
ref: elementRef,
style: props.style,
className: classNames(props.className, cx('root'))
}, ColorPickerBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, input, /*#__PURE__*/React.createElement(ColorPickerPanel, {
hostName: "ColorPicker",
ref: overlayRef,
appendTo: props.appendTo,
inline: props.inline,
disabled: props.disabled,
panelStyle: props.panelStyle,
panelClassName: props.panelClassName,
onClick: onPanelClick,
"in": props.inline || overlayVisibleState,
onEnter: onOverlayEnter,
onEntered: onOverlayEntered,
onExit: onOverlayExit,
onExited: onOverlayExited,
transitionOptions: props.transitionOptions,
ptm: ptm,
cx: cx
}, content)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip,
pt: ptm('tooltip')
}, props.tooltipOptions)));
}));
ColorPicker.displayName = 'ColorPicker';
var Column = function Column() {};
//@todo Pass Parent MetaData
Column.displayName = 'Column';
var ColumnGroup = function ColumnGroup() {};
ColumnGroup.displayName = 'ColumnGroup';
var styles$Q = '';
var FocusTrapBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'FocusTrap',
children: undefined
},
css: {
styles: styles$Q
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, FocusTrapBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, FocusTrapBase.defaultProps);
}
});
function ownKeys$1C(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$1C(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1C(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1C(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var FocusTrap = /*#__PURE__*/React__default.memo(/*#__PURE__*/React__default.forwardRef(function (inProps, ref) {
var targetRef = React__default.useRef(null);
var firstFocusableElementRef = React__default.useRef(null);
var lastFocusableElementRef = React__default.useRef(null);
var context = React__default.useContext(PrimeReactContext);
var props = FocusTrapBase.getProps(inProps, context);
var metaData = {
props: props
};
useStyle(FocusTrapBase.css.styles, {
name: 'focustrap'
});
var _FocusTrapBase$setMet = FocusTrapBase.setMetaData(_objectSpread$1C({}, metaData));
_FocusTrapBase$setMet.ptm;
React__default.useImperativeHandle(ref, function () {
return {
props: props,
getInk: function getInk() {
return firstFocusableElementRef.current;
},
getTarget: function getTarget() {
return targetRef.current;
}
};
});
useMountEffect(function () {
if (!props.disabled) {
targetRef.current = getTarget();
setAutoFocus(targetRef.current);
}
});
var getTarget = function getTarget() {
return firstFocusableElementRef.current && firstFocusableElementRef.current.parentElement;
};
/**
* This method sets the auto focus on the first focusable element within the target element.
* It first tries to find a focusable element using the autoFocusSelector. If no such element is found,
* it then tries to find a focusable element using the firstFocusableSelector.
* If the autoFocus prop is set to true and a focusable element is found, it sets the focus on that element.
*
* @param {HTMLElement} target - The target element within which to find a focusable element.
*/
var setAutoFocus = function setAutoFocus(target) {
var _ref = props || {},
_ref$autoFocusSelecto = _ref.autoFocusSelector,
autoFocusSelector = _ref$autoFocusSelecto === void 0 ? '' : _ref$autoFocusSelecto,
_ref$firstFocusableSe = _ref.firstFocusableSelector,
firstFocusableSelector = _ref$firstFocusableSe === void 0 ? '' : _ref$firstFocusableSe,
_ref$autoFocus = _ref.autoFocus,
autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus;
var defaultAutoFocusSelector = "".concat(getComputedSelector(autoFocusSelector));
var computedAutoFocusSelector = "[autofocus]".concat(defaultAutoFocusSelector, ", [data-pc-autofocus='true']").concat(defaultAutoFocusSelector);
var focusableElement = DomHandler.getFirstFocusableElement(target, computedAutoFocusSelector);
autoFocus && !focusableElement && (focusableElement = DomHandler.getFirstFocusableElement(target, getComputedSelector(firstFocusableSelector)));
DomHandler.focus(focusableElement);
};
var getComputedSelector = function getComputedSelector(selector) {
return ":not(.p-hidden-focusable):not([data-p-hidden-focusable=\"true\"])".concat(selector !== null && selector !== void 0 ? selector : '');
};
var onFirstHiddenElementFocus = function onFirstHiddenElementFocus(event) {
var _targetRef$current;
var currentTarget = event.currentTarget,
relatedTarget = event.relatedTarget;
var focusableElement = relatedTarget === currentTarget.$_pfocustrap_lasthiddenfocusableelement || !((_targetRef$current = targetRef.current) !== null && _targetRef$current !== void 0 && _targetRef$current.contains(relatedTarget)) ? DomHandler.getFirstFocusableElement(currentTarget.parentElement, getComputedSelector(currentTarget.$_pfocustrap_focusableselector)) : currentTarget.$_pfocustrap_lasthiddenfocusableelement;
DomHandler.focus(focusableElement);
};
var onLastHiddenElementFocus = function onLastHiddenElementFocus(event) {
var _targetRef$current2;
var currentTarget = event.currentTarget,
relatedTarget = event.relatedTarget;
var focusableElement = relatedTarget === currentTarget.$_pfocustrap_firsthiddenfocusableelement || !((_targetRef$current2 = targetRef.current) !== null && _targetRef$current2 !== void 0 && _targetRef$current2.contains(relatedTarget)) ? DomHandler.getLastFocusableElement(currentTarget.parentElement, getComputedSelector(currentTarget.$_pfocustrap_focusableselector)) : currentTarget.$_pfocustrap_firsthiddenfocusableelement;
DomHandler.focus(focusableElement);
};
var createHiddenFocusableElements = function createHiddenFocusableElements() {
var _ref2 = props || {},
_ref2$tabIndex = _ref2.tabIndex,
tabIndex = _ref2$tabIndex === void 0 ? 0 : _ref2$tabIndex;
var createFocusableElement = function createFocusableElement(inRef, onFocus, section) {
return /*#__PURE__*/React__default.createElement("span", {
ref: inRef,
className: 'p-hidden-accessible p-hidden-focusable',
tabIndex: tabIndex,
role: 'presentation',
"aria-hidden": true,
"data-p-hidden-accessible": true,
"data-p-hidden-focusable": true,
onFocus: onFocus,
"data-pc-section": section
});
};
var firstFocusableElement = createFocusableElement(firstFocusableElementRef, onFirstHiddenElementFocus, 'firstfocusableelement');
var lastFocusableElement = createFocusableElement(lastFocusableElementRef, onLastHiddenElementFocus, 'lastfocusableelement');
if (firstFocusableElementRef.current && lastFocusableElementRef.current) {
firstFocusableElementRef.current.$_pfocustrap_lasthiddenfocusableelement = lastFocusableElementRef.current;
lastFocusableElementRef.current.$_pfocustrap_firsthiddenfocusableelement = firstFocusableElementRef.current;
}
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, firstFocusableElement, props.children, lastFocusableElement);
};
return createHiddenFocusableElements();
}));
var FocusTrap$1 = FocusTrap;
var WindowMaximizeIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M7 14H11.8C12.3835 14 12.9431 13.7682 13.3556 13.3556C13.7682 12.9431 14 12.3835 14 11.8V2.2C14 1.61652 13.7682 1.05694 13.3556 0.644365C12.9431 0.231785 12.3835 0 11.8 0H2.2C1.61652 0 1.05694 0.231785 0.644365 0.644365C0.231785 1.05694 0 1.61652 0 2.2V7C0 7.15913 0.063214 7.31174 0.175736 7.42426C0.288258 7.53679 0.44087 7.6 0.6 7.6C0.75913 7.6 0.911742 7.53679 1.02426 7.42426C1.13679 7.31174 1.2 7.15913 1.2 7V2.2C1.2 1.93478 1.30536 1.68043 1.49289 1.49289C1.68043 1.30536 1.93478 1.2 2.2 1.2H11.8C12.0652 1.2 12.3196 1.30536 12.5071 1.49289C12.6946 1.68043 12.8 1.93478 12.8 2.2V11.8C12.8 12.0652 12.6946 12.3196 12.5071 12.5071C12.3196 12.6946 12.0652 12.8 11.8 12.8H7C6.84087 12.8 6.68826 12.8632 6.57574 12.9757C6.46321 13.0883 6.4 13.2409 6.4 13.4C6.4 13.5591 6.46321 13.7117 6.57574 13.8243C6.68826 13.9368 6.84087 14 7 14ZM9.77805 7.42192C9.89013 7.534 10.0415 7.59788 10.2 7.59995C10.3585 7.59788 10.5099 7.534 10.622 7.42192C10.7341 7.30985 10.798 7.15844 10.8 6.99995V3.94242C10.8066 3.90505 10.8096 3.86689 10.8089 3.82843C10.8079 3.77159 10.7988 3.7157 10.7824 3.6623C10.756 3.55552 10.701 3.45698 10.622 3.37798C10.5099 3.2659 10.3585 3.20202 10.2 3.19995H7.00002C6.84089 3.19995 6.68828 3.26317 6.57576 3.37569C6.46324 3.48821 6.40002 3.64082 6.40002 3.79995C6.40002 3.95908 6.46324 4.11169 6.57576 4.22422C6.68828 4.33674 6.84089 4.39995 7.00002 4.39995H8.80006L6.19997 7.00005C6.10158 7.11005 6.04718 7.25246 6.04718 7.40005C6.04718 7.54763 6.10158 7.69004 6.19997 7.80005C6.30202 7.91645 6.44561 7.98824 6.59997 8.00005C6.75432 7.98824 6.89791 7.91645 6.99997 7.80005L9.60002 5.26841V6.99995C9.6021 7.15844 9.66598 7.30985 9.77805 7.42192ZM1.4 14H3.8C4.17066 13.9979 4.52553 13.8498 4.78763 13.5877C5.04973 13.3256 5.1979 12.9707 5.2 12.6V10.2C5.1979 9.82939 5.04973 9.47452 4.78763 9.21242C4.52553 8.95032 4.17066 8.80215 3.8 8.80005H1.4C1.02934 8.80215 0.674468 8.95032 0.412371 9.21242C0.150274 9.47452 0.00210008 9.82939 0 10.2V12.6C0.00210008 12.9707 0.150274 13.3256 0.412371 13.5877C0.674468 13.8498 1.02934 13.9979 1.4 14ZM1.25858 10.0586C1.29609 10.0211 1.34696 10 1.4 10H3.8C3.85304 10 3.90391 10.0211 3.94142 10.0586C3.97893 10.0961 4 10.147 4 10.2V12.6C4 12.6531 3.97893 12.704 3.94142 12.7415C3.90391 12.779 3.85304 12.8 3.8 12.8H1.4C1.34696 12.8 1.29609 12.779 1.25858 12.7415C1.22107 12.704 1.2 12.6531 1.2 12.6V10.2C1.2 10.147 1.22107 10.0961 1.25858 10.0586Z",
fill: "currentColor"
}));
}));
WindowMaximizeIcon.displayName = 'WindowMaximizeIcon';
var WindowMinimizeIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M11.8 0H2.2C1.61652 0 1.05694 0.231785 0.644365 0.644365C0.231785 1.05694 0 1.61652 0 2.2V7C0 7.15913 0.063214 7.31174 0.175736 7.42426C0.288258 7.53679 0.44087 7.6 0.6 7.6C0.75913 7.6 0.911742 7.53679 1.02426 7.42426C1.13679 7.31174 1.2 7.15913 1.2 7V2.2C1.2 1.93478 1.30536 1.68043 1.49289 1.49289C1.68043 1.30536 1.93478 1.2 2.2 1.2H11.8C12.0652 1.2 12.3196 1.30536 12.5071 1.49289C12.6946 1.68043 12.8 1.93478 12.8 2.2V11.8C12.8 12.0652 12.6946 12.3196 12.5071 12.5071C12.3196 12.6946 12.0652 12.8 11.8 12.8H7C6.84087 12.8 6.68826 12.8632 6.57574 12.9757C6.46321 13.0883 6.4 13.2409 6.4 13.4C6.4 13.5591 6.46321 13.7117 6.57574 13.8243C6.68826 13.9368 6.84087 14 7 14H11.8C12.3835 14 12.9431 13.7682 13.3556 13.3556C13.7682 12.9431 14 12.3835 14 11.8V2.2C14 1.61652 13.7682 1.05694 13.3556 0.644365C12.9431 0.231785 12.3835 0 11.8 0ZM6.368 7.952C6.44137 7.98326 6.52025 7.99958 6.6 8H9.8C9.95913 8 10.1117 7.93678 10.2243 7.82426C10.3368 7.71174 10.4 7.55913 10.4 7.4C10.4 7.24087 10.3368 7.08826 10.2243 6.97574C10.1117 6.86321 9.95913 6.8 9.8 6.8H8.048L10.624 4.224C10.73 4.11026 10.7877 3.95982 10.7849 3.80438C10.7822 3.64894 10.7192 3.50063 10.6093 3.3907C10.4994 3.28077 10.3511 3.2178 10.1956 3.21506C10.0402 3.21232 9.88974 3.27002 9.776 3.376L7.2 5.952V4.2C7.2 4.04087 7.13679 3.88826 7.02426 3.77574C6.91174 3.66321 6.75913 3.6 6.6 3.6C6.44087 3.6 6.28826 3.66321 6.17574 3.77574C6.06321 3.88826 6 4.04087 6 4.2V7.4C6.00042 7.47975 6.01674 7.55862 6.048 7.632C6.07656 7.70442 6.11971 7.7702 6.17475 7.82524C6.2298 7.88029 6.29558 7.92344 6.368 7.952ZM1.4 8.80005H3.8C4.17066 8.80215 4.52553 8.95032 4.78763 9.21242C5.04973 9.47452 5.1979 9.82939 5.2 10.2V12.6C5.1979 12.9707 5.04973 13.3256 4.78763 13.5877C4.52553 13.8498 4.17066 13.9979 3.8 14H1.4C1.02934 13.9979 0.674468 13.8498 0.412371 13.5877C0.150274 13.3256 0.00210008 12.9707 0 12.6V10.2C0.00210008 9.82939 0.150274 9.47452 0.412371 9.21242C0.674468 8.95032 1.02934 8.80215 1.4 8.80005ZM3.94142 12.7415C3.97893 12.704 4 12.6531 4 12.6V10.2C4 10.147 3.97893 10.0961 3.94142 10.0586C3.90391 10.0211 3.85304 10 3.8 10H1.4C1.34696 10 1.29609 10.0211 1.25858 10.0586C1.22107 10.0961 1.2 10.147 1.2 10.2V12.6C1.2 12.6531 1.22107 12.704 1.25858 12.7415C1.29609 12.779 1.34696 12.8 1.4 12.8H3.8C3.85304 12.8 3.90391 12.779 3.94142 12.7415Z",
fill: "currentColor"
}));
}));
WindowMinimizeIcon.displayName = 'WindowMinimizeIcon';
function ownKeys$1B(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$1B(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1B(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1B(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var classes$$ = {
closeButtonIcon: 'p-dialog-header-close-icon',
closeButton: 'p-dialog-header-icon p-dialog-header-close p-link',
maximizableIcon: 'p-dialog-header-maximize-icon',
maximizableButton: 'p-dialog-header-icon p-dialog-header-maximize p-link',
header: function header(_ref) {
var props = _ref.props;
return classNames('p-dialog-header', props.headerClassName);
},
headerTitle: 'p-dialog-title',
headerIcons: 'p-dialog-header-icons',
content: function content(_ref2) {
var props = _ref2.props;
return classNames('p-dialog-content', props.contentClassName);
},
footer: function footer(_ref3) {
var props = _ref3.props;
return classNames('p-dialog-footer', props.footerClassName);
},
mask: function mask(_ref4) {
var props = _ref4.props,
maskVisibleState = _ref4.maskVisibleState;
var positions = ['center', 'left', 'right', 'top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right'];
var pos = positions.find(function (item) {
return item === props.position || item.replace('-', '') === props.position;
});
return classNames('p-dialog-mask', pos ? "p-dialog-".concat(pos) : '', {
'p-component-overlay p-component-overlay-enter': props.modal,
'p-dialog-visible': maskVisibleState,
'p-dialog-draggable': props.draggable,
'p-dialog-resizable': props.resizable
}, props.maskClassName);
},
root: function root(_ref5) {
var props = _ref5.props,
maximized = _ref5.maximized,
context = _ref5.context;
return classNames('p-dialog p-component', {
'p-dialog-rtl': props.rtl,
'p-dialog-maximized': maximized,
'p-dialog-default': !maximized,
'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
});
},
transition: 'p-dialog'
};
var styles$P = "\n@layer primereact {\n .p-dialog-mask {\n background-color: transparent;\n transition-property: background-color;\n }\n\n .p-dialog-visible {\n display: flex;\n }\n\n .p-dialog-mask.p-component-overlay {\n pointer-events: auto;\n }\n\n .p-dialog {\n display: flex;\n flex-direction: column;\n pointer-events: auto;\n max-height: 90%;\n transform: scale(1);\n position: relative;\n }\n\n .p-dialog-content {\n overflow-y: auto;\n flex-grow: 1;\n }\n\n .p-dialog-header {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n .p-dialog-footer {\n flex-shrink: 0;\n }\n\n .p-dialog .p-dialog-header-icons {\n display: flex;\n align-items: center;\n align-self: flex-start;\n flex-shrink: 0;\n }\n\n .p-dialog .p-dialog-header-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n }\n\n .p-dialog .p-dialog-title {\n flex-grow: 1;\n }\n\n /* Fluid */\n .p-fluid .p-dialog-footer .p-button {\n width: auto;\n }\n\n /* Animation */\n /* Center */\n .p-dialog-enter {\n opacity: 0;\n transform: scale(0.7);\n }\n\n .p-dialog-enter-active {\n opacity: 1;\n transform: scale(1);\n transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n }\n\n .p-dialog-enter-done {\n transform: none;\n }\n\n .p-dialog-exit-active {\n opacity: 0;\n transform: scale(0.7);\n transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n /* Top, Bottom, Left, Right, Top* and Bottom* */\n .p-dialog-top .p-dialog,\n .p-dialog-bottom .p-dialog,\n .p-dialog-left .p-dialog,\n .p-dialog-right .p-dialog,\n .p-dialog-top-left .p-dialog,\n .p-dialog-top-right .p-dialog,\n .p-dialog-bottom-left .p-dialog,\n .p-dialog-bottom-right .p-dialog {\n margin: 0.75em;\n }\n\n .p-dialog-top .p-dialog-enter,\n .p-dialog-top .p-dialog-exit-active {\n transform: translate3d(0px, -100%, 0px);\n }\n\n .p-dialog-bottom .p-dialog-enter,\n .p-dialog-bottom .p-dialog-exit-active {\n transform: translate3d(0px, 100%, 0px);\n }\n\n .p-dialog-left .p-dialog-enter,\n .p-dialog-left .p-dialog-exit-active,\n .p-dialog-top-left .p-dialog-enter,\n .p-dialog-top-left .p-dialog-exit-active,\n .p-dialog-bottom-left .p-dialog-enter,\n .p-dialog-bottom-left .p-dialog-exit-active {\n transform: translate3d(-100%, 0px, 0px);\n }\n\n .p-dialog-right .p-dialog-enter,\n .p-dialog-right .p-dialog-exit-active,\n .p-dialog-top-right .p-dialog-enter,\n .p-dialog-top-right .p-dialog-exit-active,\n .p-dialog-bottom-right .p-dialog-enter,\n .p-dialog-bottom-right .p-dialog-exit-active {\n transform: translate3d(100%, 0px, 0px);\n }\n\n .p-dialog-top .p-dialog-enter-active,\n .p-dialog-bottom .p-dialog-enter-active,\n .p-dialog-left .p-dialog-enter-active,\n .p-dialog-top-left .p-dialog-enter-active,\n .p-dialog-bottom-left .p-dialog-enter-active,\n .p-dialog-right .p-dialog-enter-active,\n .p-dialog-top-right .p-dialog-enter-active,\n .p-dialog-bottom-right .p-dialog-enter-active {\n transform: translate3d(0px, 0px, 0px);\n transition: all 0.3s ease-out;\n }\n\n .p-dialog-top .p-dialog-exit-active,\n .p-dialog-bottom .p-dialog-exit-active,\n .p-dialog-left .p-dialog-exit-active,\n .p-dialog-top-left .p-dialog-exit-active,\n .p-dialog-bottom-left .p-dialog-exit-active,\n .p-dialog-right .p-dialog-exit-active,\n .p-dialog-top-right .p-dialog-exit-active,\n .p-dialog-bottom-right .p-dialog-exit-active {\n transition: all 0.3s ease-out;\n }\n\n /* Maximize */\n .p-dialog-maximized {\n transition: none;\n transform: none;\n margin: 0;\n width: 100vw !important;\n height: 100vh !important;\n max-height: 100%;\n top: 0px !important;\n left: 0px !important;\n }\n\n .p-dialog-maximized .p-dialog-content {\n flex-grow: 1;\n }\n\n .p-confirm-dialog .p-dialog-content {\n display: flex;\n align-items: center;\n }\n\n /* Resizable */\n .p-dialog .p-resizable-handle {\n position: absolute;\n font-size: 0.1px;\n display: block;\n cursor: se-resize;\n width: 12px;\n height: 12px;\n right: 1px;\n bottom: 1px;\n }\n\n .p-dialog-draggable .p-dialog-header {\n cursor: move;\n }\n}\n";
var inlineStyles$k = {
mask: function mask(_ref6) {
var props = _ref6.props;
return _objectSpread$1B({
position: 'fixed',
height: '100%',
width: '100%',
left: 0,
top: 0,
display: 'flex',
justifyContent: props.position === 'left' || props.position === 'top-left' || props.position === 'bottom-left' ? 'flex-start' : props.position === 'right' || props.position === 'top-right' || props.position === 'bottom-right' ? 'flex-end' : 'center',
alignItems: props.position === 'top' || props.position === 'top-left' || props.position === 'top-right' ? 'flex-start' : props.position === 'bottom' || props.position === 'bottom-left' || props.position === 'bottom-right' ? 'flex-end' : 'center',
pointerEvents: !props.modal && 'none'
}, props.maskStyle);
}
};
var DialogBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Dialog',
__parentMetadata: null,
appendTo: null,
ariaCloseIconLabel: null,
baseZIndex: 0,
blockScroll: false,
breakpoints: null,
className: null,
closable: true,
closeIcon: null,
closeOnEscape: true,
content: null,
contentClassName: null,
contentStyle: null,
dismissableMask: false,
draggable: true,
focusOnShow: true,
footer: null,
footerClassName: null,
header: null,
headerClassName: null,
headerStyle: null,
icons: null,
id: null,
keepInViewport: true,
maskClassName: null,
maskStyle: null,
maximizable: false,
maximizeIcon: null,
maximized: false,
minX: 0,
minY: 0,
minimizeIcon: null,
modal: true,
onClick: null,
onDrag: null,
onDragEnd: null,
onDragStart: null,
onHide: null,
onMaskClick: null,
onMaximize: null,
onResize: null,
onResizeEnd: null,
onResizeStart: null,
onShow: null,
position: 'center',
resizable: true,
rtl: false,
showHeader: true,
showCloseIcon: true,
style: null,
transitionOptions: null,
visible: false,
children: undefined
},
css: {
classes: classes$$,
styles: styles$P,
inlineStyles: inlineStyles$k
}
});
function ownKeys$1A(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$1A(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1A(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1A(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Dialog = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = DialogBase.getProps(inProps, context);
var uniqueId = props.id ? props.id : UniqueComponentId();
var _React$useState = React.useState(uniqueId),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0];
_React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
maskVisibleState = _React$useState4[0],
setMaskVisibleState = _React$useState4[1];
var _React$useState5 = React.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
visibleState = _React$useState6[0],
setVisibleState = _React$useState6[1];
var _React$useState7 = React.useState(props.maximized),
_React$useState8 = _slicedToArray(_React$useState7, 2),
maximizedState = _React$useState8[0],
setMaximizedState = _React$useState8[1];
var dialogRef = React.useRef(null);
var maskRef = React.useRef(null);
var pointerRef = React.useRef(null);
var contentRef = React.useRef(null);
var headerRef = React.useRef(null);
var footerRef = React.useRef(null);
var closeRef = React.useRef(null);
var dragging = React.useRef(false);
var resizing = React.useRef(false);
var lastPageX = React.useRef(null);
var lastPageY = React.useRef(null);
var styleElement = React.useRef(null);
var attributeSelector = React.useRef(uniqueId);
var focusElementOnHide = React.useRef(null);
var maximized = props.onMaximize ? props.maximized : maximizedState;
var shouldBlockScroll = visibleState && (props.blockScroll || props.maximizable && maximized);
var isCloseOnEscape = props.closable && props.closeOnEscape && visibleState;
var displayOrder = useDisplayOrder('dialog', isCloseOnEscape);
var _DialogBase$setMetaDa = DialogBase.setMetaData(_objectSpread$1A(_objectSpread$1A({
props: props
}, props.__parentMetadata), {}, {
state: {
id: idState,
maximized: maximized,
containerVisible: maskVisibleState
}
})),
ptm = _DialogBase$setMetaDa.ptm,
cx = _DialogBase$setMetaDa.cx,
sx = _DialogBase$setMetaDa.sx,
isUnstyled = _DialogBase$setMetaDa.isUnstyled;
useHandleStyle(DialogBase.css.styles, isUnstyled, {
name: 'dialog'
});
useGlobalOnEscapeKey({
callback: function callback(event) {
onClose(event);
},
when: isCloseOnEscape && displayOrder,
priority: [ESC_KEY_HANDLING_PRIORITIES.DIALOG, displayOrder]
});
var _useEventListener = useEventListener({
type: 'mousemove',
target: function target() {
return window.document;
},
listener: function listener(event) {
return onResize(event);
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentResizeListener = _useEventListener2[0],
unbindDocumentResizeListener = _useEventListener2[1];
var _useEventListener3 = useEventListener({
type: 'mouseup',
target: function target() {
return window.document;
},
listener: function listener(event) {
return onResizeEnd(event);
}
}),
_useEventListener4 = _slicedToArray(_useEventListener3, 2),
bindDocumentResizeEndListener = _useEventListener4[0],
unbindDocumentResizEndListener = _useEventListener4[1];
var _useEventListener5 = useEventListener({
type: 'mousemove',
target: function target() {
return window.document;
},
listener: function listener(event) {
return onDrag(event);
}
}),
_useEventListener6 = _slicedToArray(_useEventListener5, 2),
bindDocumentDragListener = _useEventListener6[0],
unbindDocumentDragListener = _useEventListener6[1];
var _useEventListener7 = useEventListener({
type: 'mouseup',
target: function target() {
return window.document;
},
listener: function listener(event) {
return onDragEnd(event);
}
}),
_useEventListener8 = _slicedToArray(_useEventListener7, 2),
bindDocumentDragEndListener = _useEventListener8[0],
unbindDocumentDragEndListener = _useEventListener8[1];
var onClose = function onClose(event) {
props.onHide(event);
event.preventDefault();
};
var focus = function focus() {
var activeElement = document.activeElement;
var isActiveElementInDialog = activeElement && dialogRef.current && dialogRef.current.contains(activeElement);
if (!isActiveElementInDialog && props.closable && props.showCloseIcon && props.showHeader && closeRef.current) {
closeRef.current.focus();
}
};
var onDialogPointerDown = function onDialogPointerDown(event) {
pointerRef.current = event.target;
props.onPointerDown && props.onPointerDown(event);
};
var onMaskPointerUp = function onMaskPointerUp(event) {
if (props.dismissableMask && props.modal && maskRef.current === event.target && !pointerRef.current) {
onClose(event);
}
props.onMaskClick && props.onMaskClick(event);
pointerRef.current = null;
};
var toggleMaximize = function toggleMaximize(event) {
if (props.onMaximize) {
props.onMaximize({
originalEvent: event,
maximized: !maximized
});
} else {
setMaximizedState(function (prevMaximized) {
return !prevMaximized;
});
}
event.preventDefault();
};
var onDragStart = function onDragStart(event) {
if (DomHandler.hasClass(event.target, 'p-dialog-header-icon') || DomHandler.hasClass(event.target.parentElement, 'p-dialog-header-icon')) {
return;
}
if (props.draggable) {
dragging.current = true;
lastPageX.current = event.pageX;
lastPageY.current = event.pageY;
DomHandler.addClass(document.body, 'p-unselectable-text');
props.onDragStart && props.onDragStart(event);
}
};
var onDrag = function onDrag(event) {
if (dragging.current) {
var width = DomHandler.getOuterWidth(dialogRef.current);
var height = DomHandler.getOuterHeight(dialogRef.current);
var deltaX = event.pageX - lastPageX.current;
var deltaY = event.pageY - lastPageY.current;
var offset = dialogRef.current.getBoundingClientRect();
var leftPos = offset.left + deltaX;
var topPos = offset.top + deltaY;
var viewport = DomHandler.getViewport();
var computedStyle = getComputedStyle(dialogRef.current);
var leftMargin = parseFloat(computedStyle.marginLeft);
var topMargin = parseFloat(computedStyle.marginTop);
dialogRef.current.style.position = 'fixed';
if (props.keepInViewport) {
if (leftPos >= props.minX && leftPos + width < viewport.width) {
lastPageX.current = event.pageX;
dialogRef.current.style.left = leftPos - leftMargin + 'px';
}
if (topPos >= props.minY && (deltaY < 0 || topPos + height < viewport.height)) {
lastPageY.current = event.pageY;
dialogRef.current.style.top = topPos - topMargin + 'px';
}
} else {
lastPageX.current = event.pageX;
dialogRef.current.style.left = leftPos - leftMargin + 'px';
lastPageY.current = event.pageY;
dialogRef.current.style.top = topPos - topMargin + 'px';
}
props.onDrag && props.onDrag(event);
}
};
var onDragEnd = function onDragEnd(event) {
if (dragging.current) {
dragging.current = false;
DomHandler.removeClass(document.body, 'p-unselectable-text');
props.onDragEnd && props.onDragEnd(event);
}
};
var onResizeStart = function onResizeStart(event) {
if (props.resizable) {
resizing.current = true;
lastPageX.current = event.pageX;
lastPageY.current = event.pageY;
DomHandler.addClass(document.body, 'p-unselectable-text');
props.onResizeStart && props.onResizeStart(event);
}
};
var convertToPx = function convertToPx(value, property, viewport) {
!viewport && (viewport = DomHandler.getViewport());
var val = parseInt(value);
if (/^(\d+|(\.\d+))(\.\d+)?%$/.test(value)) {
return val * (viewport[property] / 100);
}
return val;
};
var onResize = function onResize(event) {
if (resizing.current) {
var deltaX = event.pageX - lastPageX.current;
var deltaY = event.pageY - lastPageY.current;
var width = DomHandler.getOuterWidth(dialogRef.current);
var height = DomHandler.getOuterHeight(dialogRef.current);
var offset = dialogRef.current.getBoundingClientRect();
var viewport = DomHandler.getViewport();
var hasBeenDragged = !parseInt(dialogRef.current.style.top) || !parseInt(dialogRef.current.style.left);
var minWidth = convertToPx(dialogRef.current.style.minWidth, 'width', viewport);
var minHeight = convertToPx(dialogRef.current.style.minHeight, 'height', viewport);
var newWidth = width + deltaX;
var newHeight = height + deltaY;
if (hasBeenDragged) {
newWidth = newWidth + deltaX;
newHeight = newHeight + deltaY;
}
if ((!minWidth || newWidth > minWidth) && (deltaX < 0 || offset.left + newWidth < viewport.width)) {
dialogRef.current.style.width = newWidth + 'px';
}
if ((!minHeight || newHeight > minHeight) && (deltaY < 0 || offset.top + newHeight < viewport.height)) {
dialogRef.current.style.height = newHeight + 'px';
}
lastPageX.current = event.pageX;
lastPageY.current = event.pageY;
props.onResize && props.onResize(event);
}
};
var onResizeEnd = function onResizeEnd(event) {
if (resizing.current) {
resizing.current = false;
DomHandler.removeClass(document.body, 'p-unselectable-text');
props.onResizeEnd && props.onResizeEnd(event);
}
};
var resetPosition = function resetPosition() {
dialogRef.current.style.position = '';
dialogRef.current.style.left = '';
dialogRef.current.style.top = '';
dialogRef.current.style.margin = '';
};
var onEnter = function onEnter() {
dialogRef.current.setAttribute(attributeSelector.current, '');
};
var onEntered = function onEntered() {
props.onShow && props.onShow();
if (props.focusOnShow) {
focus();
}
enableDocumentSettings();
};
var onExiting = function onExiting() {
if (props.modal) {
!isUnstyled() && DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
}
};
var onExited = function onExited() {
dragging.current = false;
ZIndexUtils.clear(maskRef.current);
setMaskVisibleState(false);
disableDocumentSettings();
// return focus to element before dialog was open
DomHandler.focus(focusElementOnHide.current);
focusElementOnHide.current = null;
};
var enableDocumentSettings = function enableDocumentSettings() {
bindGlobalListeners();
};
var disableDocumentSettings = function disableDocumentSettings() {
unbindGlobalListeners();
};
var updateScrollBlocker = function updateScrollBlocker() {
// Scroll should be unblocked if there is at least one dialog that blocks scrolling:
var isThereAnyDialogThatBlocksScrolling = document.primeDialogParams && document.primeDialogParams.some(function (i) {
return i.hasBlockScroll;
});
if (isThereAnyDialogThatBlocksScrolling) {
DomHandler.blockBodyScroll();
} else {
DomHandler.unblockBodyScroll();
}
};
var updateGlobalDialogsRegistry = function updateGlobalDialogsRegistry(isMounted) {
// Update current dialog info in global registry if it is mounted and visible:
if (isMounted && visibleState) {
var newParam = {
id: idState,
hasBlockScroll: shouldBlockScroll
};
// Create registry if not yet created:
if (!document.primeDialogParams) {
document.primeDialogParams = [];
}
var currentDialogIndexInRegistry = document.primeDialogParams.findIndex(function (dialogInRegistry) {
return dialogInRegistry.id === idState;
});
if (currentDialogIndexInRegistry === -1) {
document.primeDialogParams = [].concat(_toConsumableArray(document.primeDialogParams), [newParam]);
} else {
document.primeDialogParams = document.primeDialogParams.toSpliced(currentDialogIndexInRegistry, 1, newParam);
}
}
// Or remove it from global registry if unmounted or invisible:
else {
document.primeDialogParams = document.primeDialogParams && document.primeDialogParams.filter(function (param) {
return param.id !== idState;
});
}
// Always update scroll blocker after dialog registry - this way we ensure that
// p-overflow-hidden class is properly added/removed:
updateScrollBlocker();
};
var bindGlobalListeners = function bindGlobalListeners() {
if (props.draggable) {
bindDocumentDragListener();
bindDocumentDragEndListener();
}
if (props.resizable) {
bindDocumentResizeListener();
bindDocumentResizeEndListener();
}
};
var unbindGlobalListeners = function unbindGlobalListeners() {
unbindDocumentDragListener();
unbindDocumentDragEndListener();
unbindDocumentResizeListener();
unbindDocumentResizEndListener();
};
var createStyle = function createStyle() {
styleElement.current = DomHandler.createInlineStyle(context && context.nonce || PrimeReact.nonce, context && context.styleContainer);
var innerHTML = '';
for (var breakpoint in props.breakpoints) {
innerHTML = innerHTML + "\n @media screen and (max-width: ".concat(breakpoint, ") {\n [data-pc-name=\"dialog\"][").concat(attributeSelector.current, "] {\n width: ").concat(props.breakpoints[breakpoint], " !important;\n }\n }\n ");
}
styleElement.current.innerHTML = innerHTML;
};
var destroyStyle = function destroyStyle() {
styleElement.current = DomHandler.removeInlineStyle(styleElement.current);
};
useMountEffect(function () {
updateGlobalDialogsRegistry(true);
if (props.visible) {
setMaskVisibleState(true);
}
});
React.useEffect(function () {
if (props.breakpoints) {
createStyle();
}
return function () {
destroyStyle();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.breakpoints]);
useUpdateEffect(function () {
if (props.visible && !maskVisibleState) {
setMaskVisibleState(true);
}
if (props.visible !== visibleState && maskVisibleState) {
setVisibleState(props.visible);
}
if (props.visible) {
// Remember the focused element before we opened the dialog
// so we can return focus to it once we close the dialog.
focusElementOnHide.current = document.activeElement;
}
}, [props.visible, maskVisibleState]);
useUpdateEffect(function () {
if (maskVisibleState) {
ZIndexUtils.set('modal', maskRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, props.baseZIndex || context && context.zIndex.modal || PrimeReact.zIndex.modal);
setVisibleState(true);
}
}, [maskVisibleState]);
useUpdateEffect(function () {
updateGlobalDialogsRegistry(true);
}, [shouldBlockScroll, visibleState]);
useUnmountEffect(function () {
disableDocumentSettings();
updateGlobalDialogsRegistry(false);
DomHandler.removeInlineStyle(styleElement.current);
ZIndexUtils.clear(maskRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
resetPosition: resetPosition,
getElement: function getElement() {
return dialogRef.current;
},
getMask: function getMask() {
return maskRef.current;
},
getContent: function getContent() {
return contentRef.current;
},
getHeader: function getHeader() {
return headerRef.current;
},
getFooter: function getFooter() {
return footerRef.current;
},
getCloseButton: function getCloseButton() {
return closeRef.current;
}
};
});
var createCloseIcon = function createCloseIcon() {
if (props.closable && props.showCloseIcon) {
var labelAria = props.ariaCloseIconLabel || ariaLabel('close');
var closeButtonIconProps = mergeProps({
className: cx('closeButtonIcon'),
'aria-hidden': true
}, ptm('closeButtonIcon'));
var icon = props.closeIcon || /*#__PURE__*/React.createElement(TimesIcon, closeButtonIconProps);
var headerCloseIcon = IconUtils.getJSXIcon(icon, _objectSpread$1A({}, closeButtonIconProps), {
props: props
});
var closeButtonProps = mergeProps({
ref: closeRef,
type: 'button',
className: cx('closeButton'),
'aria-label': labelAria,
onClick: onClose,
onKeyDown: function onKeyDown(ev) {
if (ev.key !== 'Escape') {
ev.stopPropagation();
}
}
}, ptm('closeButton'));
return /*#__PURE__*/React.createElement("button", closeButtonProps, headerCloseIcon, /*#__PURE__*/React.createElement(Ripple, null));
}
return null;
};
var createMaximizeIcon = function createMaximizeIcon() {
var icon;
var maximizableIconProps = mergeProps({
className: cx('maximizableIcon')
}, ptm('maximizableIcon'));
if (!maximized) {
icon = props.maximizeIcon || /*#__PURE__*/React.createElement(WindowMaximizeIcon, maximizableIconProps);
} else {
icon = props.minimizeIcon || /*#__PURE__*/React.createElement(WindowMinimizeIcon, maximizableIconProps);
}
var toggleIcon = IconUtils.getJSXIcon(icon, maximizableIconProps, {
props: props
});
if (props.maximizable) {
var maximizableButtonProps = mergeProps({
type: 'button',
className: cx('maximizableButton'),
onClick: toggleMaximize
}, ptm('maximizableButton'));
return /*#__PURE__*/React.createElement("button", maximizableButtonProps, toggleIcon, /*#__PURE__*/React.createElement(Ripple, null));
}
return null;
};
var createHeader = function createHeader() {
if (props.showHeader) {
var closeIcon = createCloseIcon();
var maximizeIcon = createMaximizeIcon();
var icons = ObjectUtils.getJSXElement(props.icons, props);
var header = ObjectUtils.getJSXElement(props.header, props);
var headerId = idState + '_header';
var headerProps = mergeProps({
ref: headerRef,
style: props.headerStyle,
className: cx('header'),
onMouseDown: onDragStart
}, ptm('header'));
var headerTitleProps = mergeProps({
id: headerId,
className: cx('headerTitle')
}, ptm('headerTitle'));
var headerIconsProps = mergeProps({
className: cx('headerIcons')
}, ptm('headerIcons'));
return /*#__PURE__*/React.createElement("div", headerProps, /*#__PURE__*/React.createElement("div", headerTitleProps, header), /*#__PURE__*/React.createElement("div", headerIconsProps, icons, maximizeIcon, closeIcon));
}
return null;
};
var createContent = function createContent() {
var contentId = idState + '_content';
var contentProps = mergeProps({
id: contentId,
ref: contentRef,
style: props.contentStyle,
className: cx('content')
}, ptm('content'));
return /*#__PURE__*/React.createElement("div", contentProps, props.children);
};
var createFooter = function createFooter() {
var footer = ObjectUtils.getJSXElement(props.footer, props);
var footerProps = mergeProps({
ref: footerRef,
className: cx('footer')
}, ptm('footer'));
return footer && /*#__PURE__*/React.createElement("div", footerProps, footer);
};
var createResizer = function createResizer() {
if (props.resizable) {
return /*#__PURE__*/React.createElement("span", {
className: "p-resizable-handle",
style: {
zIndex: 90
},
onMouseDown: onResizeStart
});
}
return null;
};
var createTemplateElement = function createTemplateElement() {
var _props$children;
var messageProps = {
header: props.header,
content: props.message,
message: props === null || props === void 0 || (_props$children = props.children) === null || _props$children === void 0 || (_props$children = _props$children[1]) === null || _props$children === void 0 || (_props$children = _props$children.props) === null || _props$children === void 0 ? void 0 : _props$children.children
};
var templateElementProps = {
headerRef: headerRef,
contentRef: contentRef,
footerRef: footerRef,
closeRef: closeRef,
hide: onClose,
message: messageProps
};
return ObjectUtils.getJSXElement(inProps.content, templateElementProps);
};
var createElement = function createElement() {
var header = createHeader();
var content = createContent();
var footer = createFooter();
var resizer = createResizer();
return /*#__PURE__*/React.createElement(React.Fragment, null, header, content, footer, resizer);
};
var createDialog = function createDialog() {
var headerId = idState + '_header';
var contentId = idState + '_content';
var transitionTimeout = {
enter: props.position === 'center' ? 150 : 300,
exit: props.position === 'center' ? 150 : 300
};
var maskProps = mergeProps({
ref: maskRef,
style: sx('mask'),
className: cx('mask'),
onPointerUp: onMaskPointerUp
}, ptm('mask'));
var rootProps = mergeProps({
ref: dialogRef,
id: idState,
className: classNames(props.className, cx('root', {
props: props,
maximized: maximized,
context: context
})),
style: props.style,
onClick: props.onClick,
role: 'dialog',
'aria-labelledby': headerId,
'aria-describedby': contentId,
'aria-modal': props.modal,
onPointerDown: onDialogPointerDown
}, DialogBase.getOtherProps(props), ptm('root'));
var transitionProps = mergeProps({
classNames: cx('transition'),
timeout: transitionTimeout,
"in": visibleState,
options: props.transitionOptions,
unmountOnExit: true,
onEnter: onEnter,
onEntered: onEntered,
onExiting: onExiting,
onExited: onExited
}, ptm('transition'));
var contentElement = null;
if (inProps !== null && inProps !== void 0 && inProps.content) {
contentElement = createTemplateElement();
} else {
contentElement = createElement();
}
var rootElement = /*#__PURE__*/React.createElement("div", maskProps, /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: dialogRef
}, transitionProps), /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement(FocusTrap$1, {
autoFocus: props.focusOnShow
}, contentElement))));
return /*#__PURE__*/React.createElement(Portal, {
element: rootElement,
appendTo: props.appendTo,
visible: true
});
};
return maskVisibleState && createDialog();
});
Dialog.displayName = 'Dialog';
var classes$_ = {
root: 'p-confirm-dialog',
message: 'p-confirm-dialog-message',
icon: 'p-confirm-dialog-icon',
acceptButton: 'p-confirm-dialog-accept',
rejectButton: function rejectButton(_ref) {
var getPropValue = _ref.getPropValue;
return classNames('p-confirm-dialog-reject', {
'p-button-text': !getPropValue('rejectClassName')
});
}
};
var ConfirmDialogBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'ConfirmDialog',
accept: null,
acceptClassName: null,
acceptIcon: null,
acceptLabel: null,
appendTo: null,
breakpoints: null,
children: undefined,
className: null,
content: null,
defaultFocus: 'accept',
footer: null,
icon: null,
message: null,
onHide: null,
reject: null,
rejectClassName: null,
rejectIcon: null,
rejectLabel: null,
tagKey: undefined,
visible: undefined
},
css: {
classes: classes$_
}
});
function ownKeys$1z(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$1z(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1z(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1z(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var confirmDialog = function confirmDialog() {
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
props = _objectSpread$1z(_objectSpread$1z({}, props), {
visible: props.visible === undefined ? true : props.visible
});
props.visible && OverlayService.emit('confirm-dialog', props);
var show = function show() {
var updatedProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
OverlayService.emit('confirm-dialog', _objectSpread$1z(_objectSpread$1z(_objectSpread$1z({}, props), updatedProps), {
visible: true
}));
};
var hide = function hide() {
OverlayService.emit('confirm-dialog', {
visible: false
});
};
return {
show: show,
hide: hide
};
};
var ConfirmDialog = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = ConfirmDialogBase.getProps(inProps, context);
var _React$useState = React.useState(props.visible),
_React$useState2 = _slicedToArray(_React$useState, 2),
visibleState = _React$useState2[0],
setVisibleState = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
reshowState = _React$useState4[0],
setReshowState = _React$useState4[1];
var confirmProps = React.useRef(null);
var isCallbackExecuting = React.useRef(false);
var focusElementOnHide = React.useRef(null);
var getCurrentProps = function getCurrentProps() {
var group = props.group;
if (confirmProps.current) {
group = confirmProps.current.group;
}
return Object.assign({}, props, confirmProps.current, {
group: group
});
};
var getPropValue = function getPropValue(key) {
return getCurrentProps()[key];
};
var callbackFromProp = function callbackFromProp(key) {
for (var _len = arguments.length, param = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
param[_key - 1] = arguments[_key];
}
return ObjectUtils.getPropValue(getPropValue(key), param);
};
var acceptLabel = getPropValue('acceptLabel') || localeOption('accept');
var rejectLabel = getPropValue('rejectLabel') || localeOption('reject');
var metaData = {
props: props,
state: {
visible: visibleState
}
};
var _ConfirmDialogBase$se = ConfirmDialogBase.setMetaData(metaData),
ptm = _ConfirmDialogBase$se.ptm,
cx = _ConfirmDialogBase$se.cx,
isUnstyled = _ConfirmDialogBase$se.isUnstyled;
useHandleStyle(ConfirmDialogBase.css.styles, isUnstyled, {
name: 'confirmdialog'
});
var accept = function accept() {
if (!isCallbackExecuting.current) {
isCallbackExecuting.current = true;
callbackFromProp('accept');
hide('accept');
}
};
var reject = function reject() {
if (!isCallbackExecuting.current) {
isCallbackExecuting.current = true;
callbackFromProp('reject');
hide('reject');
}
};
var show = function show() {
var currentProps = getCurrentProps();
if (currentProps.group === props.group) {
setVisibleState(true);
isCallbackExecuting.current = false;
// Remember the focused element before we opened the dialog
// so we can return focus to it once we close the dialog.
focusElementOnHide.current = document.activeElement;
}
};
var hide = function hide() {
var result = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'cancel';
if (visibleState) {
if (typeof result !== 'string') {
result = 'cancel';
}
setVisibleState(false);
callbackFromProp('onHide', result);
DomHandler.focus(focusElementOnHide.current);
focusElementOnHide.current = null;
}
};
var confirm = function confirm(updatedProps) {
if (updatedProps.tagKey === props.tagKey) {
var isVisibleChanged = visibleState !== updatedProps.visible;
var targetChanged = getPropValue('target') !== updatedProps.target;
if (targetChanged && !props.target) {
hide();
confirmProps.current = updatedProps;
setReshowState(true);
} else if (isVisibleChanged) {
confirmProps.current = updatedProps;
updatedProps.visible ? show() : hide();
}
}
};
React.useEffect(function () {
props.visible ? show() : hide();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.visible]);
React.useEffect(function () {
if (!props.target && !props.message) {
OverlayService.on('confirm-dialog', confirm);
}
return function () {
OverlayService.off('confirm-dialog', confirm);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.target]);
useUpdateEffect(function () {
reshowState && show();
}, [reshowState]);
useUnmountEffect(function () {
OverlayService.off('confirm-dialog', confirm);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
confirm: confirm
};
});
var createFooter = function createFooter() {
var defaultFocus = getPropValue('defaultFocus');
var acceptClassName = classNames('p-confirm-dialog-accept', getPropValue('acceptClassName'));
var rejectClassName = classNames('p-confirm-dialog-reject', {
'p-button-text': !getPropValue('rejectClassName')
}, getPropValue('rejectClassName'));
var rejectButtonProps = mergeProps({
label: rejectLabel,
autoFocus: defaultFocus === 'reject',
icon: getPropValue('rejectIcon'),
className: classNames(getPropValue('rejectClassName'), cx('rejectButton', {
getPropValue: getPropValue
})),
onClick: reject,
pt: ptm('rejectButton'),
unstyled: props.unstyled,
__parentMetadata: {
parent: metaData
}
}, ptm('rejectButton'));
var acceptButtonProps = mergeProps({
label: acceptLabel,
autoFocus: defaultFocus === undefined || defaultFocus === 'accept',
icon: getPropValue('acceptIcon'),
className: classNames(getPropValue('acceptClassName'), cx('acceptButton')),
onClick: accept,
pt: ptm('acceptButton'),
unstyled: props.unstyled,
__parentMetadata: {
parent: metaData
}
}, ptm('acceptButton'));
var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, rejectButtonProps), /*#__PURE__*/React.createElement(Button, acceptButtonProps));
if (getPropValue('footer')) {
var defaultContentOptions = {
accept: accept,
reject: reject,
acceptClassName: acceptClassName,
rejectClassName: rejectClassName,
acceptLabel: acceptLabel,
rejectLabel: rejectLabel,
element: content,
props: getCurrentProps()
};
return ObjectUtils.getJSXElement(getPropValue('footer'), defaultContentOptions);
}
return content;
};
var createElement = function createElement() {
var currentProps = getCurrentProps();
var message = ObjectUtils.getJSXElement(getPropValue('message'), currentProps);
var iconProps = mergeProps({
className: cx('icon')
}, ptm('icon'));
var icon = IconUtils.getJSXIcon(getPropValue('icon'), _objectSpread$1z({}, iconProps), {
props: currentProps
});
var footer = createFooter();
var messageProps = mergeProps({
className: cx('message')
}, ptm('message'));
var rootProps = mergeProps({
visible: visibleState,
className: classNames(getPropValue('className'), cx('root')),
footer: footer,
onHide: hide,
breakpoints: getPropValue('breakpoints'),
pt: currentProps.pt,
unstyled: props.unstyled,
appendTo: getPropValue('appendTo'),
__parentMetadata: {
parent: metaData
}
}, ConfirmDialogBase.getOtherProps(currentProps));
return /*#__PURE__*/React.createElement(Dialog, _extends({}, rootProps, {
content: inProps === null || inProps === void 0 ? void 0 : inProps.content
}), icon, /*#__PURE__*/React.createElement("span", messageProps, message));
};
var element = createElement();
return /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: getPropValue('appendTo')
});
}));
ConfirmDialog.displayName = 'ConfirmDialog';
var styles$O = "\n@layer primereact {\n .p-confirm-popup {\n margin-top: 10px; \n }\n\n .p-confirm-popup-flipped {\n margin-top: -10px;\n }\n \n .p-confirm-popup:after, .p-confirm-popup:before {\n bottom: 100%;\n left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n content: \" \";\n height: 0;\n width: 0;\n position: absolute;\n pointer-events: none;\n }\n \n .p-confirm-popup:after {\n border-width: 8px;\n margin-left: -8px;\n }\n \n .p-confirm-popup:before {\n border-width: 10px;\n margin-left: -10px;\n }\n \n .p-confirm-popup-flipped:after, .p-confirm-popup-flipped:before {\n bottom: auto;\n top: 100%;\n }\n \n .p-confirm-popup.p-confirm-popup-flipped:after {\n border-bottom-color: transparent;\n }\n \n .p-confirm-popup.p-confirm-popup-flipped:before {\n border-bottom-color: transparent\n }\n \n .p-confirm-popup .p-confirm-popup-content {\n display: flex;\n align-items: center;\n }\n}\n";
var classes$Z = {
root: function root(_ref) {
var context = _ref.context,
getPropValue = _ref.getPropValue;
return classNames('p-confirm-popup p-component', getPropValue('className'), {
'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
});
},
acceptButton: function acceptButton(_ref2) {
var getPropValue = _ref2.getPropValue;
return classNames('p-confirm-popup-accept p-button-sm', getPropValue('acceptClassName'));
},
rejectButton: function rejectButton(_ref3) {
var getPropValue = _ref3.getPropValue;
return classNames('p-confirm-popup-reject p-button-sm', {
'p-button-text': !getPropValue('rejectClassName')
}, getPropValue('rejectClassName'));
},
content: 'p-confirm-popup-content',
icon: 'p-confirm-popup-icon',
message: 'p-confirm-popup-message',
footer: 'p-confirm-popup-footer',
transition: 'p-connected-overlay'
};
var ConfirmPopupBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'ConfirmPopup',
accept: null,
acceptClassName: null,
acceptIcon: null,
acceptLabel: null,
appendTo: null,
children: undefined,
className: null,
closeOnEscape: true,
content: null,
defaultFocus: 'accept',
dismissable: true,
footer: null,
icon: null,
message: null,
onHide: null,
onShow: null,
reject: null,
rejectClassName: null,
rejectIcon: null,
rejectLabel: null,
style: null,
tagKey: undefined,
target: null,
transitionOptions: null,
visible: false
},
css: {
classes: classes$Z,
styles: styles$O
}
});
function ownKeys$1y(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$1y(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1y(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1y(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var confirmPopup = function confirmPopup() {
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
props = _objectSpread$1y(_objectSpread$1y({}, props), {
visible: props.visible === undefined ? true : props.visible
});
props.visible && OverlayService.emit('confirm-popup', props);
var show = function show() {
var updatedProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
OverlayService.emit('confirm-popup', _objectSpread$1y(_objectSpread$1y(_objectSpread$1y({}, props), updatedProps), {
visible: true
}));
};
var hide = function hide() {
OverlayService.emit('confirm-popup', {
visible: false
});
};
return {
show: show,
hide: hide
};
};
var ConfirmPopup = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = ConfirmPopupBase.getProps(inProps, context);
var _React$useState = React.useState(props.visible),
_React$useState2 = _slicedToArray(_React$useState, 2),
visibleState = _React$useState2[0],
setVisibleState = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
reshowState = _React$useState4[0],
setReshowState = _React$useState4[1];
var metaData = {
props: props,
state: {
visible: visibleState,
reshow: reshowState
}
};
var _ConfirmPopupBase$set = ConfirmPopupBase.setMetaData(metaData),
ptm = _ConfirmPopupBase$set.ptm,
cx = _ConfirmPopupBase$set.cx,
isUnstyled = _ConfirmPopupBase$set.isUnstyled;
useHandleStyle(ConfirmPopupBase.css.styles, isUnstyled, {
name: 'confirmpopup'
});
var overlayRef = React.useRef(null);
var acceptBtnRef = React.useRef(null);
var rejectBtnRef = React.useRef(null);
var isPanelClicked = React.useRef(false);
var overlayEventListener = React.useRef(null);
var confirmProps = React.useRef(null);
var focusElementOnHide = React.useRef(null);
var isCallbackExecuting = React.useRef(false);
var getCurrentProps = function getCurrentProps() {
return confirmProps.current || props;
};
var getPropValue = function getPropValue(key) {
return (confirmProps.current || props)[key];
};
var callbackFromProp = function callbackFromProp(key) {
for (var _len = arguments.length, param = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
param[_key - 1] = arguments[_key];
}
return ObjectUtils.getPropValue(getPropValue(key), param);
};
var acceptLabel = getPropValue('acceptLabel') || localeOption('accept');
var rejectLabel = getPropValue('rejectLabel') || localeOption('reject');
var isCloseOnEscape = props.dismissable && props.closeOnEscape && visibleState;
var displayOrder = useDisplayOrder('dialog', isCloseOnEscape);
useGlobalOnEscapeKey({
callback: function callback() {
hide('hide');
},
when: isCloseOnEscape && displayOrder,
priority: [ESC_KEY_HANDLING_PRIORITIES.DIALOG, displayOrder]
});
var _useOverlayListener = useOverlayListener({
target: getPropValue('target'),
overlay: overlayRef,
listener: function listener(event, _ref) {
var type = _ref.type,
valid = _ref.valid;
if (valid) {
if (type === 'outside') {
if (props.dismissable && !isPanelClicked.current) {
hide('hide');
}
isPanelClicked.current = false;
} else if (context.hideOverlaysOnDocumentScrolling) {
hide('hide');
} else if (!DomHandler.isDocument(event.target)) {
align();
}
}
},
when: visibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var onPanelClick = function onPanelClick(event) {
isPanelClicked.current = true;
OverlayService.emit('overlay-click', {
originalEvent: event,
target: getPropValue('target')
});
};
var accept = function accept() {
if (!isCallbackExecuting.current) {
isCallbackExecuting.current = true;
callbackFromProp('accept');
hide('accept');
}
};
var reject = function reject() {
if (!isCallbackExecuting.current) {
isCallbackExecuting.current = true;
callbackFromProp('reject');
hide('reject');
}
};
var show = function show() {
var currentProps = getCurrentProps();
setReshowState(false);
if (currentProps.group === props.group) {
setVisibleState(true);
isCallbackExecuting.current = false;
overlayEventListener.current = function (e) {
!isOutsideClicked(e.target) && (isPanelClicked.current = true);
};
OverlayService.on('overlay-click', overlayEventListener.current);
// Remember the focused element before we opened the dialog
// so we can return focus to it once we close the dialog.
focusElementOnHide.current = document.activeElement;
}
};
var hide = function hide(result) {
setVisibleState(false);
OverlayService.off('overlay-click', overlayEventListener.current);
overlayEventListener.current = null;
if (result) {
callbackFromProp('onHide', result);
}
DomHandler.focus(focusElementOnHide.current);
focusElementOnHide.current = null;
};
var onEnter = function onEnter() {
ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, context && context.zIndex.overlay || PrimeReact.zIndex.overlay);
DomHandler.addStyles(overlayRef.current, {
position: 'absolute',
top: '0',
left: '0'
});
align();
};
var onEntered = function onEntered() {
bindOverlayListener();
var defaultFocus = getPropValue('defaultFocus');
if (defaultFocus === undefined || defaultFocus === 'accept') {
acceptBtnRef.current && acceptBtnRef.current.focus();
}
if (defaultFocus === 'reject') {
rejectBtnRef.current && rejectBtnRef.current.focus();
}
callbackFromProp('onShow');
};
var onExit = function onExit() {
unbindOverlayListener();
};
var onExited = function onExited() {
ZIndexUtils.clear(overlayRef.current);
isPanelClicked.current = false;
};
var align = function align() {
if (getPropValue('target')) {
DomHandler.absolutePosition(overlayRef.current, getPropValue('target'));
var containerOffset = DomHandler.getOffset(overlayRef.current);
var targetOffset = DomHandler.getOffset(getPropValue('target'));
var arrowLeft = 0;
if (containerOffset.left < targetOffset.left) {
arrowLeft = targetOffset.left - containerOffset.left;
}
overlayRef.current.style.setProperty('--overlayArrowLeft', "".concat(arrowLeft, "px"));
if (containerOffset.top < targetOffset.top) {
!isUnstyled() && DomHandler.addClass(overlayRef.current, 'p-confirm-popup-flipped');
}
}
};
var isOutsideClicked = function isOutsideClicked(target) {
return overlayRef && overlayRef.current && !(overlayRef.current.isSameNode(target) || overlayRef.current.contains(target));
};
var confirm = function confirm(updatedProps) {
if (updatedProps.tagKey === props.tagKey) {
var isVisibleChanged = visibleState !== updatedProps.visible;
var targetChanged = getPropValue('target') !== updatedProps.target;
if (targetChanged && !props.target) {
hide();
confirmProps.current = updatedProps;
setReshowState(true);
} else if (isVisibleChanged) {
confirmProps.current = updatedProps;
updatedProps.visible ? show() : hide();
}
}
};
React.useEffect(function () {
props.visible ? show() : hide();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.visible]);
React.useEffect(function () {
if (!props.target && !props.message) {
OverlayService.on('confirm-popup', confirm);
}
return function () {
OverlayService.off('confirm-popup', confirm);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.target]);
useUpdateEffect(function () {
reshowState && show();
}, [reshowState]);
useUnmountEffect(function () {
if (overlayEventListener.current) {
OverlayService.off('overlay-click', overlayEventListener.current);
overlayEventListener.current = null;
}
OverlayService.off('confirm-popup', confirm);
ZIndexUtils.clear(overlayRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
confirm: confirm
};
});
var createContent = function createContent() {
var currentProps = getCurrentProps();
var message = ObjectUtils.getJSXElement(getPropValue('message'), currentProps);
var iconProps = mergeProps({
className: cx('icon')
}, ptm('icon'));
var icon = IconUtils.getJSXIcon(getPropValue('icon'), _objectSpread$1y({}, iconProps), {
props: currentProps
});
var messageProps = mergeProps({
className: cx('message')
}, ptm('message'));
var contentProps = mergeProps({
className: cx('content')
}, ptm('content'));
return /*#__PURE__*/React.createElement("div", contentProps, icon, /*#__PURE__*/React.createElement("span", messageProps, message));
};
var createFooter = function createFooter() {
var acceptClassName = classNames('p-confirm-popup-accept p-button-sm', getPropValue('acceptClassName'));
var rejectClassName = classNames('p-confirm-popup-reject p-button-sm', {
'p-button-text': !getPropValue('rejectClassName')
}, getPropValue('rejectClassName'));
var footerProps = mergeProps({
className: cx('footer')
}, ptm('footer'));
var rejectButtonProps = mergeProps({
ref: rejectBtnRef,
label: rejectLabel,
icon: getPropValue('rejectIcon'),
className: cx('rejectButton', {
getPropValue: getPropValue
}),
onClick: reject,
pt: ptm('rejectButton'),
unstyled: props.unstyled,
__parentMetadata: {
parent: metaData
}
});
var acceptButtonProps = mergeProps({
ref: acceptBtnRef,
label: acceptLabel,
icon: getPropValue('acceptIcon'),
className: cx('acceptButton', {
getPropValue: getPropValue
}),
onClick: accept,
pt: ptm('acceptButton'),
unstyled: props.unstyled,
__parentMetadata: {
parent: metaData
}
});
var content = /*#__PURE__*/React.createElement("div", footerProps, /*#__PURE__*/React.createElement(Button, rejectButtonProps), /*#__PURE__*/React.createElement(Button, acceptButtonProps));
if (getPropValue('footer')) {
var defaultContentOptions = {
accept: accept,
reject: reject,
className: 'p-confirm-popup-footer',
acceptClassName: acceptClassName,
rejectClassName: rejectClassName,
acceptLabel: acceptLabel,
rejectLabel: rejectLabel,
element: content,
props: getCurrentProps()
};
return ObjectUtils.getJSXElement(getPropValue('footer'), defaultContentOptions);
}
return content;
};
var rootProps = mergeProps({
ref: overlayRef,
id: getPropValue('id'),
className: classNames(props.className, cx('root', {
context: context,
getPropValue: getPropValue
})),
style: getPropValue('style'),
onClick: onPanelClick
}, ConfirmPopupBase.getOtherProps(props), ptm('root'));
var transitionProps = mergeProps({
classNames: cx('transition'),
"in": visibleState,
timeout: {
enter: 120,
exit: 100
},
options: getPropValue('transitionOptions'),
unmountOnExit: true,
onEnter: onEnter,
onEntered: onEntered,
onExit: onExit,
onExited: onExited
}, ptm('transition'));
var createTemplateElement = function createTemplateElement() {
var currentProps = getCurrentProps();
var message = ObjectUtils.getJSXElement(getPropValue('message'), currentProps);
var templateElementProps = {
message: message,
acceptBtnRef: acceptBtnRef,
rejectBtnRef: rejectBtnRef,
hide: hide
};
return /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: overlayRef
}, transitionProps), /*#__PURE__*/React.createElement("div", rootProps, ObjectUtils.getJSXElement(inProps.content, templateElementProps)));
};
var createElement = function createElement() {
var content = createContent();
var footer = createFooter();
return /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: overlayRef
}, transitionProps), /*#__PURE__*/React.createElement("div", rootProps, content, footer));
};
var element = inProps !== null && inProps !== void 0 && inProps.content ? createTemplateElement() : createElement();
return /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: getPropValue('appendTo'),
visible: getPropValue('visible')
});
}));
ConfirmPopup.displayName = 'ConfirmPopup';
var styles$N = "\n@layer primereact {\n .p-contextmenu ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n .p-contextmenu .p-submenu-list {\n position: absolute;\n min-width: 100%;\n z-index: 1;\n }\n\n .p-contextmenu .p-menuitem-link {\n cursor: pointer;\n display: flex;\n align-items: center;\n text-decoration: none;\n overflow: hidden;\n position: relative;\n }\n\n .p-contextmenu .p-menuitem-text {\n line-height: 1;\n }\n\n .p-contextmenu .p-menuitem {\n position: relative;\n }\n\n .p-contextmenu .p-menuitem-link .p-submenu-icon {\n margin-left: auto;\n }\n\n .p-contextmenu-enter {\n opacity: 0;\n }\n\n .p-contextmenu-enter-active {\n opacity: 1;\n transition: opacity 250ms;\n }\n}\n";
var classes$Y = {
root: function root(_ref) {
var context = _ref.context;
return classNames('p-contextmenu p-component', {
'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
});
},
menu: function menu(_ref2) {
var props = _ref2.menuProps;
return classNames({
' p-contextmenu-root-list': props.root,
'p-submenu-list': !props.root
});
},
menuitem: function menuitem(_ref3) {
var item = _ref3.item,
active = _ref3.active,
focused = _ref3.focused,
disabled = _ref3.disabled;
return classNames('p-menuitem', {
'p-menuitem-active p-highlight': active,
'p-focus': focused,
'p-disabled': disabled
}, item.className);
},
action: function action(_ref4) {
var item = _ref4.item;
return classNames('p-menuitem-link', {
'p-disabled': item.disabled
});
},
content: 'p-menuitem-content',
icon: 'p-menuitem-icon',
submenuIcon: 'p-submenu-icon',
label: 'p-menuitem-text',
separator: 'p-menuitem-separator',
transition: 'p-contextmenu',
submenuTransition: 'p-contextmenusub'
};
var ContextMenuBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'ContextMenu',
id: null,
ariaLabel: null,
ariaLabelledby: null,
model: null,
style: null,
className: null,
global: false,
autoZIndex: true,
baseZIndex: 0,
tabIndex: 0,
breakpoint: undefined,
scrollHeight: '400px',
appendTo: null,
transitionOptions: null,
onFocus: null,
onBlur: null,
onShow: null,
onHide: null,
submenuIcon: null,
children: undefined
},
css: {
classes: classes$Y,
styles: styles$N
}
});
function ownKeys$1x(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$1x(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1x(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1x(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var ContextMenuSub = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (props, ref) {
var mergeProps = useMergeProps();
var submenuRef = React.useRef(null);
var active = props.root || !props.resetMenu;
var ptm = props.ptm,
cx = props.cx;
var getPTOptions = function getPTOptions(processedItem, key, index) {
return ptm(key, {
hostName: props.hostName,
context: {
active: isItemActive(processedItem),
focused: isItemFocused(processedItem),
disabled: isItemDisabled(processedItem),
index: index
}
});
};
var onItemMouseEnter = function onItemMouseEnter(event, item) {
if (item.disabled || props.isMobileMode) {
event.preventDefault();
return;
}
props.onItemMouseEnter({
originalEvent: event,
processedItem: item
});
};
var onItemClick = function onItemClick(event, processedItem) {
var item = processedItem.item;
if (item.disabled) {
event.preventDefault();
return;
}
if (item.command) {
item.command({
originalEvent: event,
item: item
});
}
props.onItemClick({
originalEvent: event,
processedItem: processedItem,
isFocus: true
});
if (!item.items) {
props.onLeafClick(event);
}
if (!item.url) {
event.preventDefault();
event.stopPropagation();
}
};
var position = function position() {
if (!props.isMobileMode) {
var parentItem = submenuRef.current.parentElement;
var containerOffset = DomHandler.getOffset(parentItem);
var viewport = DomHandler.getViewport();
var sublistWidth = submenuRef.current.offsetParent ? submenuRef.current.offsetWidth : DomHandler.getHiddenElementOuterWidth(submenuRef.current);
var itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
var top = parseInt(containerOffset.top, 10) + submenuRef.current.offsetHeight - DomHandler.getWindowScrollTop();
if (top > viewport.height) {
submenuRef.current.style.top = viewport.height - top + 'px';
} else {
submenuRef.current.style.top = '0px';
}
if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
submenuRef.current.style.left = -1 * sublistWidth + 'px';
} else {
submenuRef.current.style.left = itemOuterWidth + 'px';
}
}
};
var onEnter = function onEnter() {
position();
};
useUpdateEffect(function () {
active && position();
});
var getItemId = function getItemId(processedItem) {
return "".concat(props.menuId, "_").concat(processedItem.key);
};
var getItemProp = function getItemProp(processedItem, name, params) {
return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name], params) : undefined;
};
var isItemActive = function isItemActive(processedItem) {
return props.activeItemPath && props.activeItemPath.some(function (path) {
return path.key === processedItem.key;
});
};
var isItemVisible = function isItemVisible(processedItem) {
return getItemProp(processedItem, 'visible') !== false;
};
var isItemDisabled = function isItemDisabled(processedItem) {
return getItemProp(processedItem, 'disabled');
};
var isItemFocused = function isItemFocused(processedItem) {
return props.focusedItemId === getItemId(processedItem);
};
var isItemGroup = function isItemGroup(processedItem) {
return ObjectUtils.isNotEmpty(processedItem.items);
};
var getAriaSetSize = function getAriaSetSize() {
return props.model.filter(function (processedItem) {
return isItemVisible(processedItem) && !getItemProp(processedItem, 'separator');
}).length;
};
var getAriaPosInset = function getAriaPosInset(index) {
return index - props.model.slice(0, index).filter(function (processedItem) {
return isItemVisible(processedItem) && getItemProp(processedItem, 'separator');
}).length + 1;
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return submenuRef.current;
}
};
});
var createSeparator = function createSeparator(index) {
var key = props.id + '_separator_' + index;
var separatorProps = mergeProps({
id: key,
className: cx('separator'),
role: 'separator'
}, ptm('separator', {
hostName: props.hostName
}));
return /*#__PURE__*/React.createElement("li", _extends({}, separatorProps, {
key: key
}));
};
var createSubmenu = function createSubmenu(item, index) {
if (isItemGroup(item)) {
return /*#__PURE__*/React.createElement(ContextMenuSub, {
id: props.id + '_' + index,
role: "menu",
menuId: props.menuId,
focusedItemId: props.focusedItemId,
activeItemPath: props.activeItemPath,
level: props.level + 1,
hostName: props.hostName,
ariaLabelledby: getItemId(item),
menuProps: props.menuProps,
model: item.items,
resetMenu: !isItemActive(item),
onLeafClick: props.onLeafClick,
onItemClick: props.onItemClick,
onItemMouseEnter: props.onItemMouseEnter,
isMobileMode: props.isMobileMode,
submenuIcon: props.submenuIcon,
ptm: ptm,
cx: cx
});
}
return null;
};
var createMenuItem = function createMenuItem(processedItem, index) {
if (!isItemVisible(processedItem)) {
return null;
}
var item = processedItem.item;
var active = isItemActive(processedItem);
var disabled = isItemDisabled(processedItem);
var focused = isItemFocused(processedItem);
var isGroup = isItemGroup(processedItem);
var key = getItemId(processedItem);
var iconProps = mergeProps({
className: cx('icon')
}, getPTOptions(processedItem, 'icon', index));
var icon = IconUtils.getJSXIcon(item.icon, _objectSpread$1x({}, iconProps), {
props: props.menuProps
});
var submenuIconProps = mergeProps({
className: cx('submenuIcon')
}, getPTOptions(processedItem, 'submenuIcon', index));
var labelProps = mergeProps({
className: cx('label')
}, getPTOptions(processedItem, 'label', index));
var items = getItemProp(processedItem, 'items');
var submenuIcon = items && IconUtils.getJSXIcon(props.submenuIcon || /*#__PURE__*/React.createElement(AngleRightIcon, submenuIconProps), _objectSpread$1x({}, submenuIconProps), {
props: props.menuProps
});
var label = item.label && /*#__PURE__*/React.createElement("span", labelProps, item.label);
var submenu = createSubmenu(processedItem, index);
var actionProps = mergeProps({
href: item.url || '#',
tabIndex: -1,
className: cx('action', {
item: item
}),
target: item.target
}, getPTOptions(processedItem, 'action', index));
var content = /*#__PURE__*/React.createElement("a", actionProps, icon, label, submenuIcon, /*#__PURE__*/React.createElement(Ripple, null));
if (item.template) {
var defaultContentOptions = {
className: 'p-menuitem-link',
labelClassName: 'p-menuitem-text',
iconClassName: 'p-menuitem-icon',
submenuIconClassName: cx('submenuIcon'),
element: content,
props: props,
active: active
};
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
}
var contentProps = mergeProps({
onClick: function onClick(event) {
return onItemClick(event, processedItem);
},
onMouseEnter: function onMouseEnter(event) {
return onItemMouseEnter(event, processedItem);
},
className: cx('content')
}, getPTOptions(processedItem, 'content', index));
var menuitemProps = mergeProps({
id: key,
role: 'menuitem',
'aria-label': item.label,
'aria-disabled': disabled,
'aria-expanded': isGroup ? active : undefined,
'aria-haspopup': isGroup && !item.url ? 'menu' : undefined,
'aria-level': props.level + 1,
'aria-setsize': getAriaSetSize(),
'aria-posinset': getAriaPosInset(index),
'data-p-highlight': active,
'data-p-focused': focused,
'data-p-disabled': disabled,
className: cx('menuitem', {
item: item,
active: active,
focused: focused,
disabled: isItemDisabled(item)
}),
style: item.style
}, getPTOptions(processedItem, 'menuitem', index));
return /*#__PURE__*/React.createElement("li", _extends({}, menuitemProps, {
key: key
}), /*#__PURE__*/React.createElement("div", contentProps, content), submenu);
};
var createItem = function createItem(processedItem, index) {
if (processedItem.visible === false) {
return null;
}
return processedItem.separator ? createSeparator(index) : createMenuItem(processedItem, index);
};
var createMenu = function createMenu() {
return props.model ? props.model.map(createItem) : null;
};
var submenu = createMenu();
var menuProps = mergeProps({
className: cx('menu', {
menuProps: props
}),
onFocus: props.onFocus,
onBlur: props.onBlur,
onKeyDown: props.onKeyDown,
'aria-label': props.ariaLabel,
'aria-labelledby': props.ariaLabelledby,
'aria-orientation': 'vertical',
'aria-activedescendant': props.ariaActivedescendant,
tabIndex: props.tabIndex,
role: props.role
}, ptm('menu', {
hostName: props.hostName
}));
var transitionProps = mergeProps({
classNames: cx('submenuTransition'),
"in": active,
timeout: {
enter: 0,
exit: 0
},
unmountOnExit: true,
onEnter: onEnter
}, ptm('menu.transition', {
hostName: props.hostName
}));
return /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: submenuRef
}, transitionProps), /*#__PURE__*/React.createElement("ul", _extends({
ref: submenuRef
}, menuProps), submenu));
}));
ContextMenuSub.displayName = 'ContextMenuSub';
function ownKeys$1w(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$1w(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1w(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1w(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var ContextMenu = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = ContextMenuBase.getProps(inProps, context);
var _React$useState = React.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
visibleState = _React$useState4[0],
setVisibleState = _React$useState4[1];
var _React$useState5 = React.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
reshowState = _React$useState6[0],
setReshowState = _React$useState6[1];
var _React$useState7 = React.useState(false),
_React$useState8 = _slicedToArray(_React$useState7, 2),
resetMenuState = _React$useState8[0],
setResetMenuState = _React$useState8[1];
var _React$useState9 = React.useState(null),
_React$useState10 = _slicedToArray(_React$useState9, 2),
attributeSelectorState = _React$useState10[0],
setAttributeSelectorState = _React$useState10[1];
var _React$useState11 = React.useState(false),
_React$useState12 = _slicedToArray(_React$useState11, 2),
focused = _React$useState12[0],
setFocused = _React$useState12[1];
var _React$useState13 = React.useState(false),
_React$useState14 = _slicedToArray(_React$useState13, 2),
focusTrigger = _React$useState14[0],
setFocusTrigger = _React$useState14[1];
var _React$useState15 = React.useState({
index: -1,
level: 0,
parentKey: ''
}),
_React$useState16 = _slicedToArray(_React$useState15, 2),
focusedItemInfo = _React$useState16[0],
setFocusedItemInfo = _React$useState16[1];
var _React$useState17 = React.useState(''),
_React$useState18 = _slicedToArray(_React$useState17, 2),
activeItemPath = _React$useState18[0],
setActiveItemPath = _React$useState18[1];
var _React$useState19 = React.useState([]),
_React$useState20 = _slicedToArray(_React$useState19, 2),
processedItems = _React$useState20[0],
setProcessedItems = _React$useState20[1];
var _React$useState21 = React.useState([]),
_React$useState22 = _slicedToArray(_React$useState21, 2),
visibleItems = _React$useState22[0],
setVisibleItems = _React$useState22[1];
var _React$useState23 = React.useState(null),
_React$useState24 = _slicedToArray(_React$useState23, 2),
focusedItemId = _React$useState24[0],
setFocusedItemId = _React$useState24[1];
var _ContextMenuBase$setM = ContextMenuBase.setMetaData({
props: props,
state: {
id: idState,
visible: visibleState,
reshow: reshowState,
resetMenu: resetMenuState,
attributeSelector: attributeSelectorState
}
}),
ptm = _ContextMenuBase$setM.ptm,
cx = _ContextMenuBase$setM.cx,
isUnstyled = _ContextMenuBase$setM.isUnstyled;
useHandleStyle(ContextMenuBase.css.styles, isUnstyled, {
name: 'contextmenu'
});
var menuRef = React.useRef(null);
var listRef = React.useRef(null);
var currentEvent = React.useRef(null);
var searchValue = React.useRef('');
var searchTimeout = React.useRef(null);
var styleElementRef = React.useRef(null);
var isMobileMode = useMatchMedia("screen and (max-width: ".concat(props.breakpoint, ")"), !!props.breakpoint);
var _useEventListener = useEventListener({
type: 'click',
listener: function listener(event) {
if (isOutsideClicked(event) && event.button !== 2) {
hide(event);
setResetMenuState(true);
}
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentClickListener = _useEventListener2[0],
unbindDocumentClickListener = _useEventListener2[1];
var _useEventListener3 = useEventListener({
type: 'contextmenu',
when: props.global,
listener: function listener(event) {
show(event);
}
}),
_useEventListener4 = _slicedToArray(_useEventListener3, 1),
bindDocumentContextMenuListener = _useEventListener4[0];
var _useResizeListener = useResizeListener({
listener: function listener(event) {
if (visibleState && !DomHandler.isTouchDevice()) {
hide(event);
}
}
}),
_useResizeListener2 = _slicedToArray(_useResizeListener, 2),
bindDocumentResizeListener = _useResizeListener2[0],
unbindDocumentResizeListener = _useResizeListener2[1];
var createStyle = function createStyle() {
if (!styleElementRef.current) {
styleElementRef.current = DomHandler.createInlineStyle(context && context.nonce || PrimeReact.nonce, context && context.styleContainer);
var selector = "".concat(attributeSelectorState);
var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n .p-contextmenu[").concat(selector, "] > ul {\n max-height: ").concat(props.scrollHeight, ";\n overflow: ").concat(props.scrollHeight ? 'auto' : '', ";\n }\n\n .p-contextmenu[").concat(selector, "] .p-submenu-list {\n position: relative;\n }\n\n .p-contextmenu[").concat(selector, "] .p-menuitem-active > .p-submenu-list {\n left: 0;\n box-shadow: none;\n border-radius: 0;\n padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */\n }\n\n .p-contextmenu[").concat(selector, "] .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {\n transform: rotate(-180deg);\n }\n\n .p-contextmenu[").concat(selector, "] .p-submenu-icon:before {\n content: \"\\e930\";\n }\n}\n");
styleElementRef.current.innerHTML = innerHTML;
}
};
var destroyStyle = function destroyStyle() {
styleElementRef.current = DomHandler.removeInlineStyle(styleElementRef.current);
};
var onMenuClick = function onMenuClick() {
setResetMenuState(false);
};
var onMenuMouseEnter = function onMenuMouseEnter() {
setResetMenuState(false);
};
var show = function show(event) {
setActiveItemPath([]);
setFocusedItemInfo({
index: -1,
level: 0,
parentKey: ''
});
event.stopPropagation();
event.preventDefault();
currentEvent.current = event;
if (visibleState) {
setReshowState(true);
} else {
setVisibleState(true);
props.onShow && props.onShow(currentEvent.current);
}
Promise.resolve().then(function () {
listRef.current && DomHandler.focus(listRef.current.getElement());
});
};
var hide = function hide(event) {
currentEvent.current = event;
setVisibleState(false);
setReshowState(false);
setActiveItemPath([]);
setFocusedItemInfo({
index: -1,
level: 0,
parentKey: ''
});
props.onHide && props.onHide(currentEvent.current);
};
var onEnter = function onEnter() {
DomHandler.addStyles(menuRef.current, {
position: 'absolute'
});
if (props.autoZIndex) {
ZIndexUtils.set('menu', menuRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, props.baseZIndex || context && context.zIndex.menu || PrimeReact.zIndex.menu);
}
position(currentEvent.current);
if (attributeSelectorState && props.breakpoint) {
menuRef.current.setAttribute(attributeSelectorState, '');
createStyle();
}
};
var onEntered = function onEntered() {
bindDocumentListeners();
};
var onExit = function onExit() {
unbindDocumentListeners();
ZIndexUtils.clear(menuRef.current);
};
var onExited = function onExited() {
ZIndexUtils.clear(menuRef.current);
destroyStyle();
};
var position = function position(event) {
if (event) {
var left = event.pageX + 1;
var top = event.pageY + 1;
var width = menuRef.current.offsetParent ? menuRef.current.offsetWidth : DomHandler.getHiddenElementOuterWidth(menuRef.current);
var height = menuRef.current.offsetParent ? menuRef.current.offsetHeight : DomHandler.getHiddenElementOuterHeight(menuRef.current);
var viewport = DomHandler.getViewport();
//flip
if (left + width - document.body.scrollLeft > viewport.width) {
left = left - width;
}
//flip
if (top + height - document.body.scrollTop > viewport.height) {
top = top - height;
}
//fit
if (left < document.body.scrollLeft) {
left = document.body.scrollLeft;
}
//fit
if (top < document.body.scrollTop) {
top = document.body.scrollTop;
}
menuRef.current.style.left = left + 'px';
menuRef.current.style.top = top + 'px';
}
};
var createProcessedItems = React.useCallback(function (items, level) {
var parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var parentKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
var processedItems = [];
items && items.forEach(function (item, index) {
var key = (parentKey !== '' ? parentKey + '_' : '') + index;
var newItem = {
item: item,
index: index,
level: level,
separator: item.separator,
key: key,
parent: parent,
parentKey: parentKey
};
newItem.items = createProcessedItems(item.items, level + 1, newItem, key);
processedItems.push(newItem);
});
return processedItems;
}, []);
var onLeafClick = function onLeafClick(event) {
setResetMenuState(true);
hide(event);
event.stopPropagation();
};
var isOutsideClicked = function isOutsideClicked(event) {
return menuRef && menuRef.current && !(menuRef.current.isSameNode(event.target) || menuRef.current.contains(event.target));
};
var bindDocumentListeners = function bindDocumentListeners() {
bindDocumentResizeListener();
bindDocumentClickListener();
};
var unbindDocumentListeners = function unbindDocumentListeners() {
unbindDocumentResizeListener();
unbindDocumentClickListener();
};
useMountEffect(function () {
var uniqueId = UniqueComponentId();
!idState && setIdState(uniqueId);
if (props.global) {
bindDocumentContextMenuListener();
}
if (props.breakpoint) {
!attributeSelectorState && setAttributeSelectorState(uniqueId);
}
});
useUpdateEffect(function () {
props.global && bindDocumentContextMenuListener();
}, [props.global]);
useUpdateEffect(function () {
if (attributeSelectorState && menuRef.current) {
menuRef.current.setAttribute(attributeSelectorState, '');
createStyle();
}
return function () {
destroyStyle();
};
}, [attributeSelectorState, props.breakpoint]);
useUpdateEffect(function () {
if (visibleState) {
setVisibleState(false);
setReshowState(false);
setResetMenuState(true);
} else if (!reshowState && !visibleState && resetMenuState) {
show(currentEvent.current);
}
}, [reshowState]);
React.useEffect(function () {
var itemsToProcess = props.model || [];
var processed = createProcessedItems(itemsToProcess, 0, null, '');
setProcessedItems(processed);
}, [props.model, createProcessedItems]);
useUpdateEffect(function () {
var _focusedItemId = focusedItemInfo.index !== -1 ? "".concat(idState).concat(ObjectUtils.isNotEmpty(focusedItemInfo.parentKey) ? '_' + focusedItemInfo.parentKey : '', "_").concat(focusedItemInfo.index) : null;
setFocusedItemId(_focusedItemId);
}, [focusedItemInfo]);
useUpdateEffect(function () {
var processedItem = activeItemPath && activeItemPath.find(function (p) {
return p.key === focusedItemInfo.parentKey;
});
var _visibleItems = processedItem ? processedItem.items : processedItems;
setVisibleItems(_visibleItems);
}, [activeItemPath, focusedItemInfo]);
useUpdateEffect(function () {
if (focusTrigger) {
var itemIndex = focusedItemInfo.index !== -1 ? findNextItemIndex(focusedItemInfo.index) : findFirstFocusedItemIndex();
changeFocusedItemIndex(itemIndex);
setActiveItemPath(activeItemPath.filter(function (p) {
return p.parentKey !== focusedItemInfo.parentKey;
}));
setFocusTrigger(false);
}
}, [focusTrigger]);
useUnmountEffect(function () {
ZIndexUtils.clear(menuRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
show: show,
hide: hide,
getElement: function getElement() {
return menuRef.current;
}
};
});
var onFocus = function onFocus(event) {
setFocused(true);
setFocusedItemInfo(focusedItemInfo.index !== -1 ? focusedItemInfo : {
index: -1,
level: 0,
parentKey: ''
});
props.onFocus && props.onFocus(event);
};
var onBlur = function onBlur(event) {
setFocused(false);
setFocusedItemInfo({
index: -1,
level: 0,
parentKey: ''
});
searchValue.current = '';
searchValue.current = '';
props.onBlur && props.onBlur(event);
};
var onKeyDown = function onKeyDown(event) {
var metaKey = event.metaKey || event.ctrlKey;
switch (event.code) {
case 'ArrowDown':
onArrowDownKey(event);
break;
case 'ArrowUp':
onArrowUpKey(event);
break;
case 'ArrowLeft':
onArrowLeftKey(event);
break;
case 'ArrowRight':
onArrowRightKey(event);
break;
case 'Home':
onHomeKey(event);
break;
case 'End':
onEndKey(event);
break;
case 'Space':
onSpaceKey(event);
break;
case 'Enter':
case 'NumpadEnter':
onEnterKey(event);
break;
case 'Escape':
onEscapeKey(event);
break;
case 'Tab':
onTabKey(event);
break;
case 'PageDown':
case 'PageUp':
case 'Backspace':
case 'ShiftLeft':
case 'ShiftRight':
// NOOP
break;
default:
if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
searchItems(event, event.key);
}
break;
}
};
var onItemChange = function onItemChange(event) {
var processedItem = event.processedItem,
isFocus = event.isFocus,
_event$updateState = event.updateState,
updateState = _event$updateState === void 0 ? true : _event$updateState;
if (ObjectUtils.isEmpty(processedItem)) {
return;
}
var index = processedItem.index,
key = processedItem.key,
level = processedItem.level,
parentKey = processedItem.parentKey,
items = processedItem.items;
var grouped = ObjectUtils.isNotEmpty(items);
var _activeItemPath = activeItemPath.filter(function (p) {
return p.parentKey !== parentKey && p.parentKey !== key;
});
if (grouped && updateState) {
_activeItemPath.push(processedItem);
setVisibleState(true);
}
setFocusedItemInfo({
index: index,
level: level,
parentKey: parentKey
});
setActiveItemPath(_activeItemPath);
isFocus && DomHandler.focus(listRef.current.getElement());
};
var onItemClick = function onItemClick(event) {
var processedItem = event.processedItem;
var grouped = isProccessedItemGroup(processedItem);
var selected = isSelected(processedItem);
if (selected) {
var index = processedItem.index,
key = processedItem.key,
level = processedItem.level,
parentKey = processedItem.parentKey;
setActiveItemPath(activeItemPath.filter(function (p) {
return key !== p.key && key.startsWith(p.key);
}));
setFocusedItemInfo({
index: index,
level: level,
parentKey: parentKey
});
DomHandler.focus(listRef.current.getElement());
} else {
grouped ? onItemChange(event) : hide();
}
};
var onItemMouseEnter = function onItemMouseEnter(event) {
onItemChange(event);
};
var onArrowDownKey = function onArrowDownKey(event) {
var itemIndex = focusedItemInfo.index !== -1 ? findNextItemIndex(focusedItemInfo.index) : findFirstFocusedItemIndex();
changeFocusedItemIndex(itemIndex);
event.preventDefault();
};
var onArrowUpKey = function onArrowUpKey(event) {
if (event.altKey) {
if (focusedItemInfo.index !== -1) {
var processedItem = visibleItems[focusedItemInfo.index];
var grouped = isProccessedItemGroup(processedItem);
!grouped && onItemChange({
originalEvent: event,
processedItem: processedItem
});
}
event.preventDefault();
} else {
var itemIndex = focusedItemInfo.index !== -1 ? findPrevItemIndex(focusedItemInfo.index) : findLastFocusedItemIndex();
changeFocusedItemIndex(itemIndex);
event.preventDefault();
}
};
var onArrowLeftKey = function onArrowLeftKey(event) {
var processedItem = visibleItems[focusedItemInfo.index];
var parentItem = activeItemPath.find(function (p) {
return p.key === processedItem.parentKey;
});
var root = ObjectUtils.isEmpty(processedItem.parent);
if (!root) {
setFocusedItemInfo({
index: -1,
parentKey: parentItem ? parentItem.parentKey : ''
});
searchValue.current = '';
setTimeout(function () {
return setFocusTrigger(true);
}, 0);
}
event.preventDefault();
};
var onArrowRightKey = function onArrowRightKey(event) {
var processedItem = visibleItems[focusedItemInfo.index];
var grouped = isProccessedItemGroup(processedItem);
if (grouped) {
onItemChange({
originalEvent: event,
processedItem: processedItem
});
setFocusedItemInfo({
index: -1,
parentKey: processedItem.key
});
searchValue.current = '';
setTimeout(function () {
return setFocusTrigger(true);
}, 0);
}
event.preventDefault();
};
var onHomeKey = function onHomeKey(event) {
changeFocusedItemIndex(findFirstItemIndex());
event.preventDefault();
};
var onEndKey = function onEndKey(event) {
changeFocusedItemIndex(findLastItemIndex());
event.preventDefault();
};
var onEnterKey = function onEnterKey(event) {
if (focusedItemInfo.index !== -1) {
var _element = DomHandler.findSingle(listRef.current.getElement(), "li[id=\"".concat("".concat(focusedItemId), "\"]"));
var anchorElement = _element && DomHandler.findSingle(_element, 'a[data-pc-section="action"]');
anchorElement ? anchorElement.click() : _element && _element.click();
var processedItem = visibleItems[focusedItemInfo.index];
var grouped = isProccessedItemGroup(processedItem);
!grouped && setFocusedItemInfo(_objectSpread$1w(_objectSpread$1w({}, focusedItemInfo), {}, {
index: findFirstFocusedItemIndex()
}));
}
event.preventDefault();
};
var onSpaceKey = function onSpaceKey(event) {
onEnterKey(event);
};
var onEscapeKey = function onEscapeKey(event) {
hide();
setFocusedItemInfo({
focusedItemInfo: focusedItemInfo,
index: findFirstFocusedItemIndex()
});
event.preventDefault();
};
var onTabKey = function onTabKey(event) {
if (focusedItemInfo.index !== -1) {
var processedItem = visibleItems[focusedItemInfo.index];
var grouped = isProccessedItemGroup(processedItem);
!grouped && onItemChange({
originalEvent: event,
processedItem: processedItem
});
}
hide();
};
var searchItems = function searchItems(event, _char) {
searchValue.current = searchValue.current || '' + _char;
var itemIndex = -1;
var matched = false;
if (focusedItemInfo.index !== -1) {
itemIndex = visibleItems.slice(focusedItemInfo.index).findIndex(function (processedItem) {
return isItemMatched(processedItem);
});
itemIndex = itemIndex === -1 ? visibleItems.slice(0, focusedItemInfo.index).findIndex(function (processedItem) {
return isItemMatched(processedItem);
}) : itemIndex + focusedItemInfo.index;
} else {
itemIndex = visibleItems.findIndex(function (processedItem) {
return isItemMatched(processedItem);
});
}
if (itemIndex !== -1) {
matched = true;
}
if (itemIndex === -1 && focusedItemInfo.index === -1) {
itemIndex = findFirstFocusedItemIndex();
}
if (itemIndex !== -1) {
changeFocusedItemIndex(itemIndex);
}
if (searchTimeout.current) {
clearTimeout(searchTimeout.current);
}
searchTimeout.current = setTimeout(function () {
searchValue.current = '';
searchTimeout.current = null;
}, 500);
return matched;
};
var changeFocusedItemIndex = function changeFocusedItemIndex(index) {
if (focusedItemInfo.index !== index) {
setFocusedItemInfo(_objectSpread$1w(_objectSpread$1w({}, focusedItemInfo), {}, {
index: index
}));
scrollInView();
}
};
var scrollInView = function scrollInView() {
var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
var _id = index !== -1 ? "".concat(idState, "_").concat(index) : focusedItemId;
var element = DomHandler.findSingle(listRef.current.getElement(), "li[id=\"".concat(_id, "\"]"));
if (element) {
element.scrollIntoView && element.scrollIntoView({
block: 'nearest',
inline: 'start'
});
}
};
var getItemProp = function getItemProp(item, name) {
return item ? ObjectUtils.getItemValue(item[name]) : undefined;
};
var getItemLabel = function getItemLabel(item) {
return getItemProp(item, 'label');
};
var getProccessedItemLabel = function getProccessedItemLabel(processedItem) {
return processedItem ? getItemLabel(processedItem.item) : undefined;
};
var isProccessedItemGroup = function isProccessedItemGroup(processedItem) {
return processedItem && ObjectUtils.isNotEmpty(processedItem.items);
};
var isItemDisabled = function isItemDisabled(item) {
return getItemProp(item, 'disabled');
};
var isItemSeparator = function isItemSeparator(item) {
return getItemProp(item, 'separator');
};
var isValidItem = function isValidItem(processedItem) {
return !!processedItem && !isItemDisabled(processedItem.item) && !isItemSeparator(processedItem.item);
};
var isItemMatched = function isItemMatched(processedItem) {
return isValidItem(processedItem) && getProccessedItemLabel(processedItem).toLocaleLowerCase().startsWith(searchValue.current.toLocaleLowerCase());
};
var findNextItemIndex = function findNextItemIndex(index) {
var matchedItemIndex = index < visibleItems.length - 1 ? visibleItems.slice(index + 1).findIndex(function (processedItem) {
return isValidItem(processedItem);
}) : -1;
return matchedItemIndex > -1 ? matchedItemIndex + index + 1 : index;
};
var findPrevItemIndex = function findPrevItemIndex(index) {
var matchedItemIndex = index > 0 ? ObjectUtils.findLastIndex(visibleItems.slice(0, index), function (processedItem) {
return isValidItem(processedItem);
}) : -1;
return matchedItemIndex > -1 ? matchedItemIndex : index;
};
var isSelected = function isSelected(processedItem) {
return activeItemPath && activeItemPath.some(function (p) {
return p.key === processedItem.key;
});
};
var isValidSelectedItem = function isValidSelectedItem(processedItem) {
return isValidItem(processedItem) && isSelected(processedItem);
};
var findFirstItemIndex = function findFirstItemIndex() {
return visibleItems.findIndex(function (processedItem) {
return isValidItem(processedItem);
});
};
var findLastItemIndex = function findLastItemIndex() {
return ObjectUtils.findLastIndex(visibleItems, function (processedItem) {
return isValidItem(processedItem);
});
};
var findFirstFocusedItemIndex = function findFirstFocusedItemIndex() {
var selectedIndex = findSelectedItemIndex();
return selectedIndex < 0 ? findFirstItemIndex() : selectedIndex;
};
var findLastFocusedItemIndex = function findLastFocusedItemIndex() {
var selectedIndex = findSelectedItemIndex();
return selectedIndex < 0 ? findLastItemIndex() : selectedIndex;
};
var findSelectedItemIndex = function findSelectedItemIndex() {
return visibleItems.findIndex(function (processedItem) {
return isValidSelectedItem(processedItem);
});
};
var createContextMenu = function createContextMenu() {
var rootProps = mergeProps({
id: props.id,
className: classNames(props.className, cx('root', {
context: context
})),
style: props.style,
onClick: function onClick(e) {
return onMenuClick();
},
onMouseEnter: function onMouseEnter(e) {
return onMenuMouseEnter();
}
}, ContextMenuBase.getOtherProps(props), ptm('root'));
var transitionProps = mergeProps({
classNames: cx('transition'),
"in": visibleState,
timeout: {
enter: 250,
exit: 0
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: onEnter,
onEntered: onEntered,
onExit: onExit,
onExited: onExited
}, ptm('transition'));
return /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: menuRef
}, transitionProps), /*#__PURE__*/React.createElement("div", _extends({
ref: menuRef
}, rootProps), /*#__PURE__*/React.createElement(ContextMenuSub, {
ref: listRef,
ariaLabel: props.ariaLabel,
ariaLabelledby: props.ariaLabelledby,
activeItemPath: activeItemPath,
hostName: "ContextMenu",
id: idState + '_list',
role: "menubar",
tabIndex: props.tabIndex || 0,
ariaActivedescendant: focused ? focusedItemId : undefined,
menuId: idState,
focusedItemId: focused ? focusedItemId : undefined,
menuProps: props,
model: processedItems,
level: 0,
root: true,
onItemClick: onItemClick,
onItemMouseEnter: onItemMouseEnter,
onFocus: onFocus,
onBlur: onBlur,
onKeyDown: onKeyDown,
resetMenu: resetMenuState,
onLeafClick: onLeafClick,
isMobileMode: isMobileMode,
submenuIcon: props.submenuIcon,
ptm: ptm,
cx: cx
})));
};
var element = createContextMenu();
return /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo
});
}));
ContextMenu.displayName = 'ContextMenu';
var classes$X = {
header: 'p-datascroller-header',
footer: 'p-datascroller-footer',
content: 'p-datascroller-content',
list: 'p-datascroller-list',
root: function root(_ref) {
var props = _ref.props;
return classNames('p-datascroller p-component', {
'p-datascroller-inline': props.inline
});
}
};
var styles$M = "\n@layer primereact {\n .p-datascroller .p-datascroller-header {\n text-align: center;\n padding: .5em .75em;\n border-bottom: 0 none;\n }\n \n .p-datascroller .p-datascroller-footer {\n text-align: center;\n padding: .25em .625em;\n border-top: 0px none;\n }\n \n .p-datascroller .p-datascroller-content {\n padding: .25em .625em;\n }\n \n .p-datascroller-inline .p-datascroller-content {\n overflow: auto;\n }\n \n .p-datascroller .p-datascroller-list {\n list-style-type: none; \n margin: 0;\n padding: 0;\n }\n}\n";
var inlineStyles$j = {
content: function content(_ref2) {
var props = _ref2.props;
return {
maxHeight: props.scrollHeight
};
}
};
var DataScrollerBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'DataScroller',
id: null,
value: null,
rows: 0,
inline: false,
scrollHeight: null,
loader: false,
buffer: 0.9,
style: null,
className: null,
onLazyLoad: null,
emptyMessage: null,
itemTemplate: null,
header: null,
footer: null,
lazy: false,
children: undefined
},
css: {
classes: classes$X,
styles: styles$M,
inlineStyles: inlineStyles$j
}
});
var DataScroller = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = DataScrollerBase.getProps(inProps, context);
var _React$useState = React.useState([]),
_React$useState2 = _slicedToArray(_React$useState, 2),
dataToRenderState = _React$useState2[0],
setDataToRenderState = _React$useState2[1];
var _DataScrollerBase$set = DataScrollerBase.setMetaData({
props: props
}),
ptm = _DataScrollerBase$set.ptm,
cx = _DataScrollerBase$set.cx,
sx = _DataScrollerBase$set.sx,
isUnstyled = _DataScrollerBase$set.isUnstyled;
useHandleStyle(DataScrollerBase.css.styles, isUnstyled, {
name: 'datascroller'
});
var elementRef = React.useRef(null);
var contentRef = React.useRef(null);
var value = React.useRef(props.value);
var dataToRender = React.useRef([]);
var first = React.useRef(0);
var scrollFunction = React.useRef(null);
var handleDataChange = function handleDataChange() {
if (props.lazy) {
dataToRender.current = value.current;
setDataToRenderState(_toConsumableArray(dataToRender.current));
} else {
load();
}
};
var load = function load() {
if (props.lazy) {
if (props.onLazyLoad) {
props.onLazyLoad(createLazyLoadMetadata());
}
first.current = first.current + props.rows;
} else if (value.current) {
for (var i = first.current; i < first.current + props.rows; i++) {
if (i >= value.current.length) {
break;
}
dataToRender.current.push(value.current[i]);
}
if (value.current.length !== 0) {
first.current = first.current + props.rows;
}
setDataToRenderState(_toConsumableArray(dataToRender.current));
}
};
var reset = function reset() {
first.current = 0;
dataToRender.current = [];
setDataToRenderState(_toConsumableArray(dataToRender.current));
load();
};
var createLazyLoadMetadata = function createLazyLoadMetadata() {
return {
first: first.current,
rows: props.rows
};
};
var bindScrollListener = function bindScrollListener() {
if (props.inline) {
scrollFunction.current = function () {
var scrollTop = contentRef.current.scrollTop;
var scrollHeight = contentRef.current.scrollHeight;
var viewportHeight = contentRef.current.clientHeight;
if (scrollTop >= scrollHeight * props.buffer - viewportHeight) {
load();
}
};
contentRef.current.addEventListener('scroll', scrollFunction.current);
} else {
scrollFunction.current = function () {
var docBody = document.body;
var docElement = document.documentElement;
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
var winHeight = docElement.clientHeight;
var docHeight = Math.max(docBody.scrollHeight, docBody.offsetHeight, winHeight, docElement.scrollHeight, docElement.offsetHeight);
if (scrollTop >= docHeight * props.buffer - winHeight) {
load();
}
};
window.addEventListener('scroll', scrollFunction.current);
}
};
var unbindScrollListener = function unbindScrollListener() {
if (scrollFunction.current) {
if (props.inline && contentRef.current) {
contentRef.current.removeEventListener('scroll', scrollFunction.current);
} else if (!props.loader) {
window.removeEventListener('scroll', scrollFunction.current);
}
}
scrollFunction.current = null;
};
useMountEffect(function () {
load();
if (!props.loader) {
bindScrollListener();
}
});
useUpdateEffect(function () {
if (props.value) {
value.current = props.value;
if (!props.lazy) {
first.current = 0;
}
dataToRender.current = [];
handleDataChange();
}
}, [props.value]);
useUpdateEffect(function () {
if (props.loader) {
unbindScrollListener();
} else {
bindScrollListener();
}
}, [props.loader]);
useUnmountEffect(function () {
if (scrollFunction.current) {
unbindScrollListener();
}
});
React.useImperativeHandle(ref, function () {
return {
props: props,
load: load,
reset: reset,
getElement: function getElement() {
return elementRef.current;
},
getContent: function getContent() {
return contentRef.current;
}
};
});
var createHeader = function createHeader() {
var headerProps = mergeProps({
className: cx('header')
}, ptm('header'));
if (props.header) {
return /*#__PURE__*/React.createElement("div", headerProps, props.header);
}
return null;
};
var createFooter = function createFooter() {
var footerProps = mergeProps({
className: cx('footer')
}, ptm('footer'));
if (props.footer) {
return /*#__PURE__*/React.createElement("div", footerProps, props.footer);
}
return null;
};
var createItem = function createItem(_value, index) {
var itemProps = ptm('item');
var content = props.itemTemplate ? props.itemTemplate(_value) : _value;
return /*#__PURE__*/React.createElement("li", _extends({}, itemProps, {
key: index + '_datascrollitem'
}), content);
};
var createEmptyMessage = function createEmptyMessage() {
var emptyMessageProps = mergeProps(ptm('emptyMessage'));
var content = ObjectUtils.getJSXElement(props.emptyMessage, props) || localeOption('emptyMessage');
return /*#__PURE__*/React.createElement("li", emptyMessageProps, content);
};
var createContent = function createContent() {
var contentProps = mergeProps({
ref: contentRef,
className: cx('content'),
style: sx('content')
}, ptm('content'));
var listProps = mergeProps({
className: cx('list')
}, ptm('list'));
var content = ObjectUtils.isNotEmpty(dataToRenderState) ? dataToRenderState.map(createItem) : createEmptyMessage();
return /*#__PURE__*/React.createElement("div", contentProps, /*#__PURE__*/React.createElement("ul", listProps, content));
};
var header = createHeader();
var footer = createFooter();
var content = createContent();
var rootProps = mergeProps({
id: props.id,
ref: elementRef,
className: classNames(props.className, cx('root'))
}, DataScrollerBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("div", rootProps, header, content, footer);
}));
DataScroller.displayName = 'DataScroller';
var getStorage = function getStorage(stateStorageProp) {
switch (stateStorageProp) {
case 'local':
return window.localStorage;
case 'session':
return window.sessionStorage;
case 'custom':
return null;
default:
throw new Error(stateStorageProp + ' is not a valid value for the state storage, supported values are "local", "session" and "custom".');
}
};
var ColumnBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Column',
align: null,
alignFrozen: 'left',
alignHeader: null,
body: null,
bodyClassName: null,
bodyStyle: null,
cellEditValidateOnClose: false,
cellEditValidator: null,
cellEditValidatorEvent: 'click',
className: null,
colSpan: null,
columnKey: null,
dataType: 'text',
editor: null,
excludeGlobalFilter: false,
expander: false,
exportField: null,
exportable: true,
field: null,
filter: false,
filterApply: null,
filterClear: null,
filterElement: null,
filterField: null,
filterFooter: null,
filterFunction: null,
filterHeader: null,
filterHeaderClassName: null,
filterHeaderStyle: null,
filterMatchMode: null,
filterMatchModeOptions: null,
filterMaxLength: null,
filterMenuClassName: null,
filterMenuStyle: null,
filterPlaceholder: null,
filterType: 'text',
footer: null,
footerClassName: null,
footerStyle: null,
frozen: false,
header: null,
headerClassName: null,
headerStyle: null,
headerTooltip: null,
headerTooltipOptions: null,
hidden: false,
maxConstraints: 2,
onBeforeCellEditHide: null,
onBeforeCellEditShow: null,
onCellEditCancel: null,
onCellEditComplete: null,
onCellEditInit: null,
onFilterApplyClick: null,
onFilterClear: null,
onFilterConstraintAdd: null,
onFilterConstraintRemove: null,
onFilterMatchModeChange: null,
onFilterOperatorChange: null,
reorderable: true,
resizeable: true,
rowEditor: false,
rowReorder: false,
rowReorderIcon: null,
rowSpan: null,
selectionMode: null,
showAddButton: true,
showApplyButton: true,
showClearButton: true,
showFilterMatchModes: true,
showFilterMenu: true,
showFilterMenuOptions: true,
showFilterOperator: true,
sortField: null,
sortFunction: null,
sortable: false,
sortableDisabled: false,
style: null,
children: undefined
},
getCProp: function getCProp(column, name) {
return ObjectUtils.getComponentProp(column, name, ColumnBase.defaultProps);
},
getCProps: function getCProps(column) {
return ObjectUtils.getComponentProps(column, ColumnBase.defaultProps);
},
getCOtherProps: function getCOtherProps(column) {
return ObjectUtils.getComponentDiffProps(column, ColumnBase.defaultProps);
}
});
var ArrowDownIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M6.99994 14C6.91097 14.0004 6.82281 13.983 6.74064 13.9489C6.65843 13.9148 6.58387 13.8646 6.52133 13.8013L1.10198 8.38193C0.982318 8.25351 0.917175 8.08367 0.920272 7.90817C0.923368 7.73267 0.994462 7.56523 1.11858 7.44111C1.24269 7.317 1.41014 7.2459 1.58563 7.2428C1.76113 7.23971 1.93098 7.30485 2.0594 7.42451L6.32263 11.6877V0.677419C6.32263 0.497756 6.394 0.325452 6.52104 0.198411C6.64808 0.0713706 6.82039 0 7.00005 0C7.17971 0 7.35202 0.0713706 7.47906 0.198411C7.6061 0.325452 7.67747 0.497756 7.67747 0.677419V11.6877L11.9407 7.42451C12.0691 7.30485 12.2389 7.23971 12.4144 7.2428C12.5899 7.2459 12.7574 7.317 12.8815 7.44111C13.0056 7.56523 13.0767 7.73267 13.0798 7.90817C13.0829 8.08367 13.0178 8.25351 12.8981 8.38193L7.47875 13.8013C7.41621 13.8646 7.34164 13.9148 7.25944 13.9489C7.17727 13.983 7.08912 14.0004 7.00015 14C7.00012 14 7.00009 14 7.00005 14C7.00001 14 6.99998 14 6.99994 14Z",
fill: "currentColor"
}));
}));
ArrowDownIcon.displayName = 'ArrowDownIcon';
var ArrowUpIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M6.51551 13.799C6.64205 13.9255 6.813 13.9977 6.99193 14C7.17087 13.9977 7.34182 13.9255 7.46835 13.799C7.59489 13.6725 7.66701 13.5015 7.66935 13.3226V2.31233L11.9326 6.57554C11.9951 6.63887 12.0697 6.68907 12.1519 6.72319C12.2341 6.75731 12.3223 6.77467 12.4113 6.77425C12.5003 6.77467 12.5885 6.75731 12.6707 6.72319C12.7529 6.68907 12.8274 6.63887 12.89 6.57554C13.0168 6.44853 13.0881 6.27635 13.0881 6.09683C13.0881 5.91732 13.0168 5.74514 12.89 5.61812L7.48846 0.216594C7.48274 0.210436 7.4769 0.204374 7.47094 0.198411C7.3439 0.0713707 7.1716 0 6.99193 0C6.81227 0 6.63997 0.0713707 6.51293 0.198411C6.50704 0.204296 6.50128 0.210278 6.49563 0.216354L1.09386 5.61812C0.974201 5.74654 0.909057 5.91639 0.912154 6.09189C0.91525 6.26738 0.986345 6.43483 1.11046 6.55894C1.23457 6.68306 1.40202 6.75415 1.57752 6.75725C1.75302 6.76035 1.92286 6.6952 2.05128 6.57554L6.31451 2.31231V13.3226C6.31685 13.5015 6.38898 13.6725 6.51551 13.799Z",
fill: "currentColor"
}));
}));
ArrowUpIcon.displayName = 'ArrowUpIcon';
var classes$W = {
root: 'p-paginator p-component',
left: 'p-paginator-left-content',
end: 'p-paginator-right-content',
firstPageIcon: 'p-paginator-icon',
firstPageButton: function firstPageButton(_ref) {
var disabled = _ref.disabled;
return classNames('p-paginator-first p-paginator-element p-link', {
'p-disabled': disabled
});
},
prevPageIcon: 'p-paginator-icon',
prevPageButton: function prevPageButton(_ref2) {
var disabled = _ref2.disabled;
return classNames('p-paginator-prev p-paginator-element p-link', {
'p-disabled': disabled
});
},
nextPageIcon: 'p-paginator-icon',
nextPageButton: function nextPageButton(_ref3) {
var disabled = _ref3.disabled;
return classNames('p-paginator-next p-paginator-element p-link', {
'p-disabled': disabled
});
},
lastPageIcon: 'p-paginator-icon',
lastPageButton: function lastPageButton(_ref4) {
var disabled = _ref4.disabled;
return classNames('p-paginator-last p-paginator-element p-link', {
'p-disabled': disabled
});
},
pageButton: function pageButton(_ref5) {
var pageLink = _ref5.pageLink,
startPageInView = _ref5.startPageInView,
endPageInView = _ref5.endPageInView,
page = _ref5.page;
return classNames('p-paginator-page p-paginator-element p-link', {
'p-paginator-page-start': pageLink === startPageInView,
'p-paginator-page-end': pageLink === endPageInView,
'p-highlight': pageLink - 1 === page
});
},
pages: 'p-paginator-pages'
};
var styles$L = "\n@layer primereact {\n .p-paginator {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n }\n \n .p-paginator-left-content {\n margin-right: auto;\n }\n \n .p-paginator-right-content {\n margin-left: auto;\n }\n \n .p-paginator-page,\n .p-paginator-next,\n .p-paginator-last,\n .p-paginator-first,\n .p-paginator-prev,\n .p-paginator-current {\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n line-height: 1;\n user-select: none;\n overflow: hidden;\n position: relative;\n }\n \n .p-paginator-element:focus {\n z-index: 1;\n position: relative;\n }\n}\n";
var PaginatorBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Paginator',
__parentMetadata: null,
totalRecords: 0,
rows: 0,
first: 0,
pageLinkSize: 5,
rowsPerPageOptions: null,
alwaysShow: true,
style: null,
className: null,
template: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
onPageChange: null,
leftContent: null,
rightContent: null,
dropdownAppendTo: null,
currentPageReportTemplate: '({currentPage} of {totalPages})',
children: undefined
},
css: {
classes: classes$W,
styles: styles$L
}
});
var CurrentPageReportBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'CurrentPageReport',
pageCount: null,
page: null,
first: null,
rows: null,
totalRecords: null,
reportTemplate: '({currentPage} of {totalPages})',
template: null,
children: undefined
}
});
var FirstPageLinkBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'FirstPageLink',
disabled: false,
onClick: null,
template: null,
firstPageLinkIcon: null,
children: undefined
}
});
var JumpToPageInputBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'JumpToPageInput',
page: null,
rows: null,
pageCount: null,
disabled: false,
template: null,
onChange: null,
children: undefined,
metaData: null,
ptm: null
}
});
var LastPageLinkBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'LastPageLink',
disabled: false,
onClick: null,
template: null,
lastPageLinkIcon: null,
children: undefined
}
});
var NextPageLinkBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'NextPageLink',
disabled: false,
onClick: null,
template: null,
nextPageLinkIcon: null,
children: undefined
}
});
var PageLinksBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'PageLinks',
value: null,
page: null,
rows: null,
pageCount: null,
links: null,
template: null,
children: undefined
}
});
var PrevPageLinkBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'PrevPageLink',
disabled: false,
onClick: null,
template: null,
prevPageLinkIcon: null,
children: undefined
}
});
var RowsPerPageDropdownBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'RowsPerPageDropdown',
options: null,
value: null,
page: null,
pageCount: null,
totalRecords: 0,
appendTo: null,
onChange: null,
template: null,
disabled: false,
children: undefined
}
});
function ownKeys$1v(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$1v(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1v(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1v(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var CurrentPageReport = /*#__PURE__*/React.memo(function (inProps) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = CurrentPageReportBase.getProps(inProps, context);
var report = {
currentPage: props.page + 1,
totalPages: props.totalPages,
first: Math.min(props.first + 1, props.totalRecords),
last: Math.min(props.first + props.rows, props.totalRecords),
rows: props.rows,
totalRecords: props.totalRecords
};
var text = props.reportTemplate.replace('{currentPage}', report.currentPage).replace('{totalPages}', report.totalPages).replace('{first}', report.first).replace('{last}', report.last).replace('{rows}', report.rows).replace('{totalRecords}', report.totalRecords);
var currentProps = mergeProps({
'aria-live': 'polite',
className: 'p-paginator-current'
}, props.ptm('current', {
hostName: props.hostName
}));
var element = /*#__PURE__*/React.createElement("span", currentProps, text);
if (props.template) {
var defaultOptions = _objectSpread$1v(_objectSpread$1v({}, report), {
ariaLive: 'polite',
className: 'p-paginator-current',
element: element,
props: props
});
return ObjectUtils.getJSXElement(props.template, defaultOptions);
}
return element;
});
CurrentPageReport.displayName = 'CurrentPageReport';
var AngleDoubleLeftIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M5.71602 11.164C5.80782 11.2021 5.9063 11.2215 6.00569 11.221C6.20216 11.2301 6.39427 11.1612 6.54025 11.0294C6.68191 10.8875 6.76148 10.6953 6.76148 10.4948C6.76148 10.2943 6.68191 10.1021 6.54025 9.96024L3.51441 6.9344L6.54025 3.90855C6.624 3.76126 6.65587 3.59011 6.63076 3.42254C6.60564 3.25498 6.525 3.10069 6.40175 2.98442C6.2785 2.86815 6.11978 2.79662 5.95104 2.7813C5.78229 2.76598 5.61329 2.80776 5.47112 2.89994L1.97123 6.39983C1.82957 6.54167 1.75 6.73393 1.75 6.9344C1.75 7.13486 1.82957 7.32712 1.97123 7.46896L5.47112 10.9991C5.54096 11.0698 5.62422 11.1259 5.71602 11.164ZM11.0488 10.9689C11.1775 11.1156 11.3585 11.2061 11.5531 11.221C11.7477 11.2061 11.9288 11.1156 12.0574 10.9689C12.1815 10.8302 12.25 10.6506 12.25 10.4645C12.25 10.2785 12.1815 10.0989 12.0574 9.96024L9.03158 6.93439L12.0574 3.90855C12.1248 3.76739 12.1468 3.60881 12.1204 3.45463C12.0939 3.30045 12.0203 3.15826 11.9097 3.04765C11.7991 2.93703 11.6569 2.86343 11.5027 2.83698C11.3486 2.81053 11.19 2.83252 11.0488 2.89994L7.51865 6.36957C7.37699 6.51141 7.29742 6.70367 7.29742 6.90414C7.29742 7.1046 7.37699 7.29686 7.51865 7.4387L11.0488 10.9689Z",
fill: "currentColor"
}));
}));
AngleDoubleLeftIcon.displayName = 'AngleDoubleLeftIcon';
function ownKeys$1u(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$1u(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1u(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1u(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var FirstPageLink = /*#__PURE__*/React.memo(function (inProps) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = FirstPageLinkBase.getProps(inProps, context);
var ptm = props.ptm,
cx = props.cx;
var getPTOptions = function getPTOptions(key) {
return ptm(key, {
hostName: props.hostName,
context: {
disabled: props.disabled
}
});
};
var className = classNames('p-paginator-first p-paginator-element p-link', {
'p-disabled': props.disabled
});
var iconClassName = 'p-paginator-icon';
var firstPageIconProps = mergeProps({
className: cx('firstPageIcon')
}, getPTOptions('firstPageIcon'));
var icon = props.firstPageLinkIcon || /*#__PURE__*/React.createElement(AngleDoubleLeftIcon, firstPageIconProps);
var firstPageLinkIcon = IconUtils.getJSXIcon(icon, _objectSpread$1u({}, firstPageIconProps), {
props: props
});
var firstPageButtonProps = mergeProps({
type: 'button',
className: cx('firstPageButton', {
disabled: props.disabled
}),
onClick: props.onClick,
disabled: props.disabled,
'aria-label': ariaLabel('firstPageLabel')
}, getPTOptions('firstPageButton'));
var element = /*#__PURE__*/React.createElement("button", firstPageButtonProps, firstPageLinkIcon, /*#__PURE__*/React.createElement(Ripple, null));
if (props.template) {
var defaultOptions = {
onClick: props.onClick,
className: className,
iconClassName: iconClassName,
disabled: props.disabled,
element: element,
props: props
};
return ObjectUtils.getJSXElement(props.template, defaultOptions);
}
return element;
});
FirstPageLink.displayName = 'FirstPageLink';
var AngleDownIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
d: "M3.58659 4.5007C3.68513 4.50023 3.78277 4.51945 3.87379 4.55723C3.9648 4.59501 4.04735 4.65058 4.11659 4.7207L7.11659 7.7207L10.1166 4.7207C10.2619 4.65055 10.4259 4.62911 10.5843 4.65956C10.7427 4.69002 10.8871 4.77074 10.996 4.88976C11.1049 5.00877 11.1726 5.15973 11.1889 5.32022C11.2052 5.48072 11.1693 5.6422 11.0866 5.7807L7.58659 9.2807C7.44597 9.42115 7.25534 9.50004 7.05659 9.50004C6.85784 9.50004 6.66722 9.42115 6.52659 9.2807L3.02659 5.7807C2.88614 5.64007 2.80725 5.44945 2.80725 5.2507C2.80725 5.05195 2.88614 4.86132 3.02659 4.7207C3.09932 4.64685 3.18675 4.58911 3.28322 4.55121C3.37969 4.51331 3.48305 4.4961 3.58659 4.5007Z",
fill: "currentColor"
}));
}));
AngleDownIcon.displayName = 'AngleDownIcon';
var AngleUpIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
d: "M10.4134 9.49931C10.3148 9.49977 10.2172 9.48055 10.1262 9.44278C10.0352 9.405 9.95263 9.34942 9.88338 9.27931L6.88338 6.27931L3.88338 9.27931C3.73811 9.34946 3.57409 9.3709 3.41567 9.34044C3.25724 9.30999 3.11286 9.22926 3.00395 9.11025C2.89504 8.99124 2.82741 8.84028 2.8111 8.67978C2.79478 8.51928 2.83065 8.35781 2.91338 8.21931L6.41338 4.71931C6.55401 4.57886 6.74463 4.49997 6.94338 4.49997C7.14213 4.49997 7.33276 4.57886 7.47338 4.71931L10.9734 8.21931C11.1138 8.35994 11.1927 8.55056 11.1927 8.74931C11.1927 8.94806 11.1138 9.13868 10.9734 9.27931C10.9007 9.35315 10.8132 9.41089 10.7168 9.44879C10.6203 9.48669 10.5169 9.5039 10.4134 9.49931Z",
fill: "currentColor"
}));
}));
AngleUpIcon.displayName = 'AngleUpIcon';
var classes$V = {
root: function root(_ref) {
var props = _ref.props,
focusedState = _ref.focusedState,
stacked = _ref.stacked,
horizontal = _ref.horizontal,
vertical = _ref.vertical;
return classNames('p-inputnumber p-component p-inputwrapper', {
'p-inputwrapper-filled': props.value != null && props.value.toString().length > 0,
'p-inputwrapper-focus': focusedState,
'p-inputnumber-buttons-stacked': stacked,
'p-inputnumber-buttons-horizontal': horizontal,
'p-inputnumber-buttons-vertical': vertical,
'p-invalid': props.invalid
});
},
input: function input(_ref2) {
var props = _ref2.props,
context = _ref2.context;
return classNames('p-inputnumber-input', {
'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
});
},
buttonGroup: 'p-inputnumber-button-group',
incrementButton: function incrementButton(_ref3) {
var props = _ref3.props;
return classNames('p-inputnumber-button p-inputnumber-button-up p-button p-button-icon-only p-component', {
'p-disabled': props.disabled
});
},
incrementIcon: 'p-button-icon',
decrementButton: function decrementButton(_ref4) {
var props = _ref4.props;
return classNames('p-inputnumber-button p-inputnumber-button-down p-button p-button-icon-only p-component', {
'p-disabled': props.disabled
});
},
decrementIcon: 'p-button-icon'
};
var styles$K = "\n@layer primereact {\n .p-inputnumber {\n display: inline-flex;\n }\n \n .p-inputnumber-button {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n }\n \n .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label,\n .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label {\n display: none;\n }\n \n .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n padding: 0;\n }\n \n .p-inputnumber-buttons-stacked .p-inputnumber-input {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n \n .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0;\n }\n \n .p-inputnumber-buttons-stacked .p-inputnumber-button-group {\n display: flex;\n flex-direction: column;\n }\n \n .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button {\n flex: 1 1 auto;\n }\n \n .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up {\n order: 3;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n \n .p-inputnumber-buttons-horizontal .p-inputnumber-input {\n order: 2;\n border-radius: 0;\n }\n \n .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down {\n order: 1;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n \n .p-inputnumber-buttons-vertical {\n flex-direction: column;\n }\n \n .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up {\n order: 1;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n width: 100%;\n }\n \n .p-inputnumber-buttons-vertical .p-inputnumber-input {\n order: 2;\n border-radius: 0;\n text-align: center;\n }\n \n .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down {\n order: 3;\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n width: 100%;\n }\n \n .p-inputnumber-input {\n flex: 1 1 auto;\n }\n \n .p-fluid .p-inputnumber {\n width: 100%;\n }\n \n .p-fluid .p-inputnumber .p-inputnumber-input {\n width: 1%;\n }\n \n .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input {\n width: 100%;\n }\n}\n";
var InputNumberBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'InputNumber',
__parentMetadata: null,
allowEmpty: true,
ariaLabelledBy: null,
autoFocus: false,
buttonLayout: 'stacked',
className: null,
currency: undefined,
currencyDisplay: undefined,
decrementButtonClassName: null,
decrementButtonIcon: null,
disabled: false,
format: true,
id: null,
incrementButtonClassName: null,
incrementButtonIcon: null,
inputClassName: null,
inputId: null,
inputMode: null,
inputRef: null,
inputStyle: null,
invalid: false,
variant: null,
locale: undefined,
localeMatcher: undefined,
max: null,
maxFractionDigits: undefined,
maxLength: null,
min: null,
minFractionDigits: undefined,
mode: 'decimal',
name: null,
onBlur: null,
onChange: null,
onFocus: null,
onKeyDown: null,
onKeyUp: null,
onValueChange: null,
pattern: null,
placeholder: null,
prefix: null,
readOnly: false,
required: false,
roundingMode: undefined,
showButtons: false,
size: null,
step: 1,
style: null,
suffix: null,
tabIndex: null,
tooltip: null,
tooltipOptions: null,
type: 'text',
useGrouping: true,
value: null,
children: undefined
},
css: {
classes: classes$V,
styles: styles$K
}
});
function ownKeys$1t(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$1t(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1t(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1t(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var InputNumber = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = InputNumberBase.getProps(inProps, context);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var metaData = _objectSpread$1t(_objectSpread$1t({
props: props
}, props.__parentMetadata), {}, {
state: {
focused: focusedState
}
});
var _InputNumberBase$setM = InputNumberBase.setMetaData(metaData),
ptm = _InputNumberBase$setM.ptm,
cx = _InputNumberBase$setM.cx,
isUnstyled = _InputNumberBase$setM.isUnstyled;
useHandleStyle(InputNumberBase.css.styles, isUnstyled, {
name: 'inputnumber'
});
var elementRef = React.useRef(null);
var inputRef = React.useRef(null);
var timer = React.useRef(null);
var lastValue = React.useRef(null);
var numberFormat = React.useRef(null);
var groupChar = React.useRef(null);
var prefixChar = React.useRef(null);
var suffixChar = React.useRef(null);
var isSpecialChar = React.useRef(null);
var _numeral = React.useRef(null);
var _group = React.useRef(null);
var _minusSign = React.useRef(null);
var _currency = React.useRef(null);
var _decimal = React.useRef(null);
var _decimalSeparator = React.useRef(null);
var _suffix = React.useRef(null);
var _prefix = React.useRef(null);
var _index = React.useRef(null);
var isFocusedByClick = React.useRef(false);
var _locale = props.locale || context && context.locale || PrimeReact.locale;
var stacked = props.showButtons && props.buttonLayout === 'stacked';
var horizontal = props.showButtons && props.buttonLayout === 'horizontal';
var vertical = props.showButtons && props.buttonLayout === 'vertical';
var inputMode = props.inputMode || (props.mode === 'decimal' && !props.minFractionDigits && !props.maxFractionDigits ? 'numeric' : 'decimal');
var getOptions = function getOptions() {
var _props$minFractionDig, _props$maxFractionDig;
return {
localeMatcher: props.localeMatcher,
style: props.mode,
currency: props.currency,
currencyDisplay: props.currencyDisplay,
useGrouping: props.useGrouping,
minimumFractionDigits: (_props$minFractionDig = props.minFractionDigits) !== null && _props$minFractionDig !== void 0 ? _props$minFractionDig : undefined,
maximumFractionDigits: (_props$maxFractionDig = props.maxFractionDigits) !== null && _props$maxFractionDig !== void 0 ? _props$maxFractionDig : undefined,
roundingMode: props.roundingMode
};
};
var constructParser = function constructParser() {
numberFormat.current = new Intl.NumberFormat(_locale, getOptions());
var numerals = _toConsumableArray(new Intl.NumberFormat(_locale, {
useGrouping: false
}).format(9876543210)).reverse();
var index = new Map(numerals.map(function (d, i) {
return [d, i];
}));
_numeral.current = new RegExp("[".concat(numerals.join(''), "]"), 'g');
_group.current = getGroupingExpression(); // regular expression /[,]/g, /[.]/g
_minusSign.current = getMinusSignExpression(); // regular expression /[-]/g
_currency.current = getCurrencyExpression(); // regular expression for currency (e.g. /[$]/g, /[€]/g, /[]/g and more)
_decimal.current = getDecimalExpression(); // regular expression /[,]/g, /[.]/g, /[]/g
_decimalSeparator.current = getDecimalSeparator(); // current decimal separator '.', ','
_suffix.current = getSuffixExpression(); // regular expression for suffix (e.g. /℃/g)
_prefix.current = getPrefixExpression(); // regular expression for prefix (e.g. /\ days/g)
_index.current = function (d) {
return index.get(d);
};
};
var escapeRegExp = function escapeRegExp(text) {
return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
};
/**
* get decimal separator in current locale
*/
var getDecimalSeparator = function getDecimalSeparator() {
return new Intl.NumberFormat(_locale, {
useGrouping: false
}).format(1.1).trim().replace(_numeral.current, '');
};
var getDecimalExpression = function getDecimalExpression() {
var formatter = new Intl.NumberFormat(_locale, _objectSpread$1t(_objectSpread$1t({}, getOptions()), {}, {
useGrouping: false
}));
return new RegExp("[".concat(formatter.format(1.1).replace(_currency.current, '').trim().replace(_numeral.current, ''), "]"), 'g');
};
var getGroupingExpression = function getGroupingExpression() {
var formatter = new Intl.NumberFormat(_locale, {
useGrouping: true
});
groupChar.current = formatter.format(1000000).trim().replace(_numeral.current, '').charAt(0);
return new RegExp("[".concat(groupChar.current, "]"), 'g');
};
var getMinusSignExpression = function getMinusSignExpression() {
var formatter = new Intl.NumberFormat(_locale, {
useGrouping: false
});
return new RegExp("[".concat(formatter.format(-1).trim().replace(_numeral.current, ''), "]"), 'g');
};
var getCurrencyExpression = function getCurrencyExpression() {
if (props.currency) {
var formatter = new Intl.NumberFormat(_locale, {
style: 'currency',
currency: props.currency,
currencyDisplay: props.currencyDisplay,
minimumFractionDigits: 0,
maximumFractionDigits: 0,
roundingMode: props.roundingMode
});
return new RegExp("[".concat(formatter.format(1).replace(/\s/g, '').replace(_numeral.current, '').replace(_group.current, ''), "]"), 'g');
}
return new RegExp('[]', 'g');
};
var getPrefixExpression = function getPrefixExpression() {
if (props.prefix) {
prefixChar.current = props.prefix;
} else {
var formatter = new Intl.NumberFormat(_locale, {
style: props.mode,
currency: props.currency,
currencyDisplay: props.currencyDisplay
});
prefixChar.current = formatter.format(1).split('1')[0];
}
return new RegExp("".concat(escapeRegExp(prefixChar.current || '')), 'g');
};
var getSuffixExpression = function getSuffixExpression() {
if (props.suffix) {
suffixChar.current = props.suffix;
} else {
var formatter = new Intl.NumberFormat(_locale, {
style: props.mode,
currency: props.currency,
currencyDisplay: props.currencyDisplay,
minimumFractionDigits: 0,
maximumFractionDigits: 0,
roundingMode: props.roundingMode
});
suffixChar.current = formatter.format(1).split('1')[1];
}
return new RegExp("".concat(escapeRegExp(suffixChar.current || '')), 'g');
};
var formatValue = function formatValue(value) {
if (value != null) {
if (value === '-') {
// Minus sign
return value;
}
if (props.format) {
var formatter = new Intl.NumberFormat(_locale, getOptions());
var _formattedValue = formatter.format(value);
if (props.prefix) {
_formattedValue = props.prefix + _formattedValue;
}
if (props.suffix) {
_formattedValue = _formattedValue + props.suffix;
}
return _formattedValue;
}
return value.toString();
}
return '';
};
var parseValue = function parseValue(text) {
var filteredText = text.replace(_suffix.current, '').replace(_prefix.current, '').trim().replace(/\s/g, '').replace(_currency.current, '').replace(_group.current, '').replace(_minusSign.current, '-').replace(_decimal.current, '.').replace(_numeral.current, _index.current);
if (filteredText) {
if (filteredText === '-') {
// Minus sign
return filteredText;
}
var parsedValue = +filteredText;
return isNaN(parsedValue) ? null : parsedValue;
}
return null;
};
var addWithPrecision = function addWithPrecision(base, increment) {
var precision = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 10;
return Math.round((base + increment) * precision) / precision;
};
var _repeat = function repeat(event, interval, dir) {
var i = interval || 500;
clearTimer();
timer.current = setTimeout(function () {
_repeat(event, 40, dir);
}, i);
spin(event, dir);
};
var spin = function spin(event, dir) {
if (inputRef.current) {
var step = props.step * dir;
var currentValue = parseValue(inputRef.current.value) || 0;
var newValue = validateValue(addWithPrecision(currentValue, step));
if (props.maxLength && props.maxLength < formatValue(newValue).length) {
return;
}
// #3913 onChange should be called before onValueChange
handleOnChange(event, currentValue, newValue);
// touch devices trigger the keyboard to display because of setSelectionRange
!DomHandler.isTouchDevice() && updateInput(newValue, null, 'spin');
updateModel(event, newValue);
}
};
var onUpButtonMouseDown = function onUpButtonMouseDown(event) {
if (!props.disabled && !props.readOnly) {
if (!DomHandler.isTouchDevice()) {
DomHandler.focus(inputRef.current, props.autoFocus);
}
_repeat(event, null, 1);
event.preventDefault();
}
};
var onUpButtonMouseUp = function onUpButtonMouseUp() {
if (!props.disabled && !props.readOnly) {
clearTimer();
}
};
var onUpButtonMouseLeave = function onUpButtonMouseLeave() {
if (!props.disabled && !props.readOnly) {
clearTimer();
}
};
var onUpButtonKeyUp = function onUpButtonKeyUp() {
if (!props.disabled && !props.readOnly) {
clearTimer();
}
};
var onUpButtonKeyDown = function onUpButtonKeyDown(event) {
if (!props.disabled && !props.readOnly && (event.keyCode === 32 || event.keyCode === 13)) {
_repeat(event, null, 1);
}
};
var onDownButtonMouseDown = function onDownButtonMouseDown(event) {
if (!props.disabled && !props.readOnly) {
if (!DomHandler.isTouchDevice()) {
DomHandler.focus(inputRef.current, props.autoFocus);
}
_repeat(event, null, -1);
event.preventDefault();
}
};
var onDownButtonMouseUp = function onDownButtonMouseUp() {
if (!props.disabled && !props.readOnly) {
clearTimer();
}
};
var onDownButtonMouseLeave = function onDownButtonMouseLeave() {
if (!props.disabled && !props.readOnly) {
clearTimer();
}
};
var onDownButtonKeyUp = function onDownButtonKeyUp() {
if (!props.disabled && !props.readOnly) {
clearTimer();
}
};
var onDownButtonKeyDown = function onDownButtonKeyDown(event) {
if (!props.disabled && !props.readOnly && (event.keyCode === 32 || event.keyCode === 13)) {
_repeat(event, null, -1);
}
};
var onInput = function onInput(event) {
if (props.disabled || props.readOnly) {
return;
}
if (isSpecialChar.current) {
event.target.value = lastValue.current;
isSpecialChar.current = false;
}
if (DomHandler.isAndroid()) {
return;
}
// #6324 Chrome is allowing accent-dead characters through...
var inputType = event.nativeEvent.inputType;
var data = event.nativeEvent.data;
if (inputType === 'insertText' && /\D/.test(data)) {
event.target.value = lastValue.current;
}
};
var onInputAndroidKey = function onInputAndroidKey(event) {
if (!DomHandler.isAndroid() || props.disabled || props.readOnly) {
return;
}
if (props.onKeyUp) {
props.onKeyUp(event);
// do not continue if the user defined event wants to prevent
if (event.defaultPrevented) {
return;
}
}
var code = event.which || event.keyCode;
if (code !== 13) {
// to submit a form
event.preventDefault();
}
var _char = String.fromCharCode(code);
var _isDecimalSign = isDecimalSign(_char);
var _isMinusSign = isMinusSign(_char);
if (48 <= code && code <= 57 || _isMinusSign || _isDecimalSign) {
insert(event, _char, {
isDecimalSign: _isDecimalSign,
isMinusSign: _isMinusSign
});
} else {
updateValue(event, event.target.value, null, 'delete-single');
}
};
var onInputKeyDown = function onInputKeyDown(event) {
if (props.disabled || props.readOnly) {
return;
}
if (event.altKey || event.ctrlKey || event.metaKey) {
// #7039 Treat cut as normal character
if (event.key.toLowerCase() === 'x' && (event.ctrlKey || event.metaKey)) {
isSpecialChar.current = false;
} else {
isSpecialChar.current = true;
}
return;
}
if (props.onKeyDown) {
props.onKeyDown(event);
// Do not continue if the user-defined event wants to prevent
if (event.defaultPrevented) {
return;
}
}
lastValue.current = event.target.value;
// Android is handled specially in onInputAndroidKey
if (DomHandler.isAndroid()) {
return;
}
var selectionStart = event.target.selectionStart;
var selectionEnd = event.target.selectionEnd;
var inputValue = event.target.value;
var newValueStr = null;
switch (event.code) {
//up
case 'ArrowUp':
spin(event, 1);
event.preventDefault();
break;
//down
case 'ArrowDown':
spin(event, -1);
event.preventDefault();
break;
//left
case 'ArrowLeft':
if (!isNumeralChar(inputValue.charAt(selectionStart - 1))) {
event.preventDefault();
}
break;
//right
case 'ArrowRight':
if (!isNumeralChar(inputValue.charAt(selectionStart))) {
event.preventDefault();
}
break;
//enter and tab
case 'Tab':
case 'Enter':
case 'NumpadEnter':
newValueStr = validateValue(parseValue(inputValue));
inputRef.current.value = formatValue(newValueStr);
inputRef.current.setAttribute('aria-valuenow', newValueStr);
updateModel(event, newValueStr);
break;
//backspace
case 'Backspace':
event.preventDefault();
if (selectionStart === selectionEnd) {
var deleteChar = inputValue.charAt(selectionStart - 1);
if (isNumeralChar(deleteChar)) {
var _getDecimalCharIndexe = getDecimalCharIndexes(inputValue),
decimalCharIndex = _getDecimalCharIndexe.decimalCharIndex,
decimalCharIndexWithoutPrefix = _getDecimalCharIndexe.decimalCharIndexWithoutPrefix;
var decimalLength = getDecimalLength(inputValue);
if (_group.current.test(deleteChar)) {
_group.current.lastIndex = 0;
newValueStr = inputValue.slice(0, selectionStart - 2) + inputValue.slice(selectionStart - 1);
} else if (_decimal.current.test(deleteChar)) {
_decimal.current.lastIndex = 0;
if (decimalLength) {
inputRef.current.setSelectionRange(selectionStart - 1, selectionStart - 1);
} else {
newValueStr = inputValue.slice(0, selectionStart - 1) + inputValue.slice(selectionStart);
}
} else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
var insertedText = isDecimalMode() && (props.minFractionDigits || 0) < decimalLength ? '' : '0';
newValueStr = inputValue.slice(0, selectionStart - 1) + insertedText + inputValue.slice(selectionStart);
} else if (decimalCharIndexWithoutPrefix === 1) {
newValueStr = inputValue.slice(0, selectionStart - 1) + '0' + inputValue.slice(selectionStart);
newValueStr = parseValue(newValueStr) > 0 ? newValueStr : '';
} else {
newValueStr = inputValue.slice(0, selectionStart - 1) + inputValue.slice(selectionStart);
}
} else if (_currency.current.test(deleteChar)) {
var _getCharIndexes = getCharIndexes(inputValue),
minusCharIndex = _getCharIndexes.minusCharIndex,
currencyCharIndex = _getCharIndexes.currencyCharIndex;
if (minusCharIndex === currencyCharIndex - 1) {
newValueStr = inputValue.slice(0, minusCharIndex) + inputValue.slice(selectionStart);
}
}
updateValue(event, newValueStr, null, 'delete-single');
} else {
newValueStr = deleteRange(inputValue, selectionStart, selectionEnd);
updateValue(event, newValueStr, null, 'delete-range');
}
break;
// del
case 'Delete':
event.preventDefault();
if (selectionStart === selectionEnd) {
var _deleteChar = inputValue.charAt(selectionStart);
var _getDecimalCharIndexe2 = getDecimalCharIndexes(inputValue),
_decimalCharIndex = _getDecimalCharIndexe2.decimalCharIndex,
_decimalCharIndexWithoutPrefix = _getDecimalCharIndexe2.decimalCharIndexWithoutPrefix;
if (isNumeralChar(_deleteChar)) {
var _decimalLength = getDecimalLength(inputValue);
if (_group.current.test(_deleteChar)) {
_group.current.lastIndex = 0;
newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 2);
} else if (_decimal.current.test(_deleteChar)) {
_decimal.current.lastIndex = 0;
if (_decimalLength) {
inputRef.current.setSelectionRange(selectionStart + 1, selectionStart + 1);
} else {
newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 1);
}
} else if (_decimalCharIndex > 0 && selectionStart > _decimalCharIndex) {
var _insertedText = isDecimalMode() && (props.minFractionDigits || 0) < _decimalLength ? '' : '0';
newValueStr = inputValue.slice(0, selectionStart) + _insertedText + inputValue.slice(selectionStart + 1);
} else if (_decimalCharIndexWithoutPrefix === 1) {
newValueStr = inputValue.slice(0, selectionStart) + '0' + inputValue.slice(selectionStart + 1);
newValueStr = parseValue(newValueStr) > 0 ? newValueStr : '';
} else {
newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 1);
}
}
updateValue(event, newValueStr, null, 'delete-back-single');
} else {
newValueStr = deleteRange(inputValue, selectionStart, selectionEnd);
updateValue(event, newValueStr, null, 'delete-range');
}
break;
case 'End':
event.preventDefault();
if (!ObjectUtils.isEmpty(props.max)) {
updateModel(event, props.max);
}
break;
case 'Home':
event.preventDefault();
if (!ObjectUtils.isEmpty(props.min)) {
updateModel(event, props.min);
}
break;
default:
event.preventDefault();
var _char2 = event.key;
if (_char2) {
// get decimal separator in current locale
if (_char2 === '.') {
_char2 = _decimalSeparator.current;
}
var _isDecimalSign = isDecimalSign(_char2);
var _isMinusSign = isMinusSign(_char2);
if (Number(_char2) >= 0 && Number(_char2) <= 9 || _isMinusSign || _isDecimalSign) {
insert(event, _char2, {
isDecimalSign: _isDecimalSign,
isMinusSign: _isMinusSign
});
}
}
break;
}
};
var onPaste = function onPaste(event) {
event.preventDefault();
if (props.disabled || props.readOnly) {
return;
}
var data = (event.clipboardData || window.clipboardData).getData('Text');
if (data) {
var filteredData = parseValue(data);
if (filteredData != null) {
if (isFloat(filteredData)) {
var _formattedValue2 = formatValue(filteredData);
inputRef.current.value = _formattedValue2;
updateModel(event, filteredData);
} else {
insert(event, filteredData.toString());
}
}
}
};
var allowMinusSign = function allowMinusSign() {
return ObjectUtils.isEmpty(props.min) || props.min < 0;
};
var isMinusSign = function isMinusSign(_char3) {
if (_minusSign.current.test(_char3) || _char3 === '-') {
_minusSign.current.lastIndex = 0;
return true;
}
return false;
};
var replaceDecimalSeparator = function replaceDecimalSeparator(val) {
if (isFloat(val)) {
return val.toString().replace(/\.(?=[^.]*$)/, _decimalSeparator.current);
}
return val;
};
var isDecimalSign = function isDecimalSign(_char4) {
if (_decimal.current.test(_char4) || isFloat(_char4)) {
_decimal.current.lastIndex = 0;
return true;
}
return false;
};
var isDecimalMode = function isDecimalMode() {
return props.mode === 'decimal';
};
var isFloat = function isFloat(val) {
var formatter = new Intl.NumberFormat(_locale, getOptions());
var parseVal = parseValue(formatter.format(val));
if (parseVal === null) {
return false;
}
return parseVal % 1 !== 0;
};
var getDecimalCharIndexes = function getDecimalCharIndexes(val) {
var decimalCharIndex = val.search(_decimal.current);
_decimal.current.lastIndex = 0;
var filteredVal = val.replace(_prefix.current, '').trim().replace(/\s/g, '').replace(_currency.current, '');
var decimalCharIndexWithoutPrefix = filteredVal.search(_decimal.current);
_decimal.current.lastIndex = 0;
return {
decimalCharIndex: decimalCharIndex,
decimalCharIndexWithoutPrefix: decimalCharIndexWithoutPrefix
};
};
var getCharIndexes = function getCharIndexes(val) {
var decimalCharIndex = val.search(_decimal.current);
_decimal.current.lastIndex = 0;
var minusCharIndex = val.search(_minusSign.current);
_minusSign.current.lastIndex = 0;
var suffixCharIndex = val.search(_suffix.current);
_suffix.current.lastIndex = 0;
var currencyCharIndex = val.search(_currency.current);
if (currencyCharIndex === 0 && prefixChar.current && prefixChar.current.length > 1) {
currencyCharIndex = prefixChar.current.trim().length;
}
_currency.current.lastIndex = 0;
return {
decimalCharIndex: decimalCharIndex,
minusCharIndex: minusCharIndex,
suffixCharIndex: suffixCharIndex,
currencyCharIndex: currencyCharIndex
};
};
var insert = function insert(event, text) {
var sign = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
isDecimalSign: false,
isMinusSign: false
};
var minusCharIndexOnText = text.search(_minusSign.current);
_minusSign.current.lastIndex = 0;
if (!allowMinusSign() && minusCharIndexOnText !== -1) {
return;
}
var selectionStart = inputRef.current.selectionStart;
var selectionEnd = inputRef.current.selectionEnd;
var inputValue = inputRef.current.value.trim();
var _getCharIndexes2 = getCharIndexes(inputValue),
decimalCharIndex = _getCharIndexes2.decimalCharIndex,
minusCharIndex = _getCharIndexes2.minusCharIndex,
suffixCharIndex = _getCharIndexes2.suffixCharIndex,
currencyCharIndex = _getCharIndexes2.currencyCharIndex;
var maxFractionDigits = numberFormat.current.resolvedOptions().maximumFractionDigits;
var hasBoundOrAffix = props.min || props.max || props.suffix || props.prefix; //only exception
var newValueStr;
if (sign.isMinusSign) {
var isNewMinusSign = minusCharIndex === -1;
// #6522 - Selected negative value can't be overwritten with a minus ('-') symbol
if (selectionStart === 0 || selectionStart === currencyCharIndex + 1) {
newValueStr = inputValue;
if (isNewMinusSign || selectionEnd !== 0) {
newValueStr = insertText(inputValue, text, 0, selectionEnd);
}
updateValue(event, newValueStr, text, 'insert');
}
} else if (sign.isDecimalSign) {
if (decimalCharIndex > 0 && selectionStart === decimalCharIndex) {
updateValue(event, inputValue, text, 'insert');
} else if (decimalCharIndex > selectionStart && decimalCharIndex < selectionEnd) {
newValueStr = insertText(inputValue, text, selectionStart, selectionEnd);
updateValue(event, newValueStr, text, 'insert');
} else if (decimalCharIndex === -1 && (maxFractionDigits || props.maxFractionDigits)) {
var allowedDecimal = inputMode !== 'numeric' || inputMode === 'numeric' && hasBoundOrAffix;
if (allowedDecimal) {
newValueStr = insertText(inputValue, text, selectionStart, selectionEnd);
updateValue(event, newValueStr, text, 'insert');
}
}
} else {
var operation = selectionStart !== selectionEnd ? 'range-insert' : 'insert';
if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
if (selectionStart + text.length - (decimalCharIndex + 1) <= maxFractionDigits) {
var charIndex = currencyCharIndex >= selectionStart ? currencyCharIndex - 1 : suffixCharIndex >= selectionStart ? suffixCharIndex : inputValue.length;
newValueStr = inputValue.slice(0, selectionStart) + text + inputValue.slice(selectionStart + text.length, charIndex) + inputValue.slice(charIndex);
updateValue(event, newValueStr, text, operation);
}
} else {
newValueStr = insertText(inputValue, text, selectionStart, selectionEnd);
updateValue(event, newValueStr, text, operation);
}
}
};
var replaceSuffix = function replaceSuffix(value) {
return value ? value.replace(_suffix.current, '').trim().replace(/\s/g, '').replace(_currency.current, '') : value;
};
var insertText = function insertText(value, text, start, end) {
var textSplit = isDecimalSign(text) ? text : text.split(_decimal.current);
if (textSplit.length === 2) {
var decimalCharIndex = value.slice(start, end).search(_decimal.current);
_decimal.current.lastIndex = 0;
return decimalCharIndex > 0 ? value.slice(0, start) + formatValue(text) + replaceSuffix(value).slice(end) : value || formatValue(text);
} else if (isDecimalSign(text) && value.length === 0) {
return formatValue('0.');
} else if (end - start === value.length) {
return formatValue(text);
} else if (start === 0) {
var suffix = ObjectUtils.isLetter(value[end]) ? end - 1 : end;
return text + value.slice(suffix);
} else if (end === value.length) {
return value.slice(0, start) + text;
}
var selectionValue = value.slice(start, end);
// Fix: if the suffix starts with a space, the input will be cleared after pasting
var space = /\s$/.test(selectionValue) ? ' ' : '';
return value.slice(0, start) + text + space + value.slice(end);
};
var deleteRange = function deleteRange(value, start, end) {
var newValueStr;
if (end - start === value.length) {
newValueStr = '';
} else if (start === 0) {
newValueStr = value.slice(end);
} else if (end === value.length) {
newValueStr = value.slice(0, start);
} else {
newValueStr = value.slice(0, start) + value.slice(end);
}
return newValueStr;
};
var initCursor = function initCursor() {
var selectionStart = inputRef.current.selectionStart;
var inputValue = inputRef.current.value;
var valueLength = inputValue.length;
var index = null;
// remove prefix
var prefixLength = (prefixChar.current || '').length;
inputValue = inputValue.replace(_prefix.current, '');
selectionStart = selectionStart - prefixLength;
var _char5 = inputValue.charAt(selectionStart);
if (isNumeralChar(_char5)) {
return selectionStart + prefixLength;
}
//left
var i = selectionStart - 1;
while (i >= 0) {
_char5 = inputValue.charAt(i);
if (isNumeralChar(_char5)) {
index = i + prefixLength;
break;
} else {
i--;
}
}
if (index !== null) {
inputRef.current.setSelectionRange(index + 1, index + 1);
} else {
i = selectionStart;
while (i < valueLength) {
_char5 = inputValue.charAt(i);
if (isNumeralChar(_char5)) {
index = i + prefixLength;
break;
} else {
i++;
}
}
if (index !== null) {
inputRef.current.setSelectionRange(index, index);
}
}
return index || 0;
};
var onInputPointerDown = function onInputPointerDown() {
isFocusedByClick.current = true;
};
var onInputClick = function onInputClick() {
initCursor();
};
var isNumeralChar = function isNumeralChar(_char6) {
if (_char6.length === 1 && (_numeral.current.test(_char6) || _decimal.current.test(_char6) || _group.current.test(_char6) || _minusSign.current.test(_char6))) {
resetRegex();
return true;
}
return false;
};
var resetRegex = function resetRegex() {
_numeral.current.lastIndex = 0;
_decimal.current.lastIndex = 0;
_group.current.lastIndex = 0;
_minusSign.current.lastIndex = 0;
};
var updateValue = function updateValue(event, valueStr, insertedValueStr, operation) {
var currentValue = inputRef.current.value;
var newValue = null;
if (valueStr != null) {
newValue = evaluateEmpty(parseValue(valueStr));
updateInput(newValue, insertedValueStr, operation, valueStr);
handleOnChange(event, currentValue, newValue);
}
};
var evaluateEmpty = function evaluateEmpty(newValue) {
return !newValue && !props.allowEmpty ? props.min || 0 : newValue;
};
var handleOnChange = function handleOnChange(event, currentValue, newValue) {
if (props.onChange && isValueChanged(currentValue, newValue)) {
props.onChange({
originalEvent: event,
value: newValue
});
}
};
var isValueChanged = function isValueChanged(currentValue, newValue) {
if (newValue === null && currentValue !== null) {
return true;
}
if (newValue != null) {
var parsedCurrentValue = typeof currentValue === 'string' ? parseValue(currentValue) : currentValue;
return newValue !== parsedCurrentValue;
}
return false;
};
var validateValue = function validateValue(value) {
if (value === '-') {
return null;
}
return validateValueByLimit(value);
};
var validateValueByLimit = function validateValueByLimit(value) {
if (ObjectUtils.isEmpty(value)) {
return null;
}
if (props.min !== null && value < props.min) {
return props.min;
}
if (props.max !== null && value > props.max) {
return props.max;
}
return value;
};
var updateInput = function updateInput(value, insertedValueStr, operation, valueStr) {
insertedValueStr = insertedValueStr || '';
var inputEl = inputRef.current;
var inputValue = inputEl.value;
var newValue = formatValue(value);
var currentLength = inputValue.length;
if (newValue !== valueStr) {
newValue = concatValues(newValue, valueStr);
}
if (currentLength === 0) {
inputEl.value = newValue;
inputEl.setSelectionRange(0, 0);
var index = initCursor();
var selectionEnd = index + insertedValueStr.length + (isDecimalSign(insertedValueStr) ? 1 : 0);
inputEl.setSelectionRange(selectionEnd, selectionEnd);
} else {
var selectionStart = inputEl.selectionStart;
var _selectionEnd = inputEl.selectionEnd;
if (props.maxLength && props.maxLength < newValue.length) {
return;
}
inputEl.value = newValue;
var newLength = newValue.length;
if (operation === 'range-insert') {
var startValue = parseValue((inputValue || '').slice(0, selectionStart));
var startValueStr = startValue !== null ? startValue.toString() : '';
var startExpr = startValueStr.split('').join("(".concat(groupChar.current, ")?"));
var sRegex = new RegExp(startExpr, 'g');
sRegex.test(newValue);
var tExpr = insertedValueStr.split('').join("(".concat(groupChar.current, ")?"));
var tRegex = new RegExp(tExpr, 'g');
tRegex.test(newValue.slice(sRegex.lastIndex));
_selectionEnd = sRegex.lastIndex + tRegex.lastIndex;
inputEl.setSelectionRange(_selectionEnd, _selectionEnd);
} else if (newLength === currentLength) {
if (operation === 'insert' || operation === 'delete-back-single') {
var newSelectionEnd = _selectionEnd;
if (insertedValueStr === '0') {
newSelectionEnd = _selectionEnd + 1;
} else {
newSelectionEnd = newSelectionEnd + Number(isDecimalSign(value) || isDecimalSign(insertedValueStr));
}
inputEl.setSelectionRange(newSelectionEnd, newSelectionEnd);
} else if (operation === 'delete-single') {
inputEl.setSelectionRange(_selectionEnd - 1, _selectionEnd - 1);
} else if (operation === 'delete-range' || operation === 'spin') {
inputEl.setSelectionRange(_selectionEnd, _selectionEnd);
}
} else if (operation === 'delete-back-single') {
var prevChar = inputValue.charAt(_selectionEnd - 1);
var nextChar = inputValue.charAt(_selectionEnd);
var diff = currentLength - newLength;
var isGroupChar = _group.current.test(nextChar);
if (isGroupChar && diff === 1) {
_selectionEnd = _selectionEnd + 1;
} else if (!isGroupChar && isNumeralChar(prevChar)) {
_selectionEnd = _selectionEnd + (-1 * diff + 1);
}
_group.current.lastIndex = 0;
inputEl.setSelectionRange(_selectionEnd, _selectionEnd);
} else if (inputValue === '-' && operation === 'insert') {
inputEl.setSelectionRange(0, 0);
var _index2 = initCursor();
var _selectionEnd2 = _index2 + insertedValueStr.length + 1;
inputEl.setSelectionRange(_selectionEnd2, _selectionEnd2);
} else {
_selectionEnd = _selectionEnd + (newLength - currentLength);
inputEl.setSelectionRange(_selectionEnd, _selectionEnd);
}
}
inputEl.setAttribute('aria-valuenow', value);
};
var updateInputValue = function updateInputValue(newValue) {
newValue = evaluateEmpty(newValue);
var inputEl = inputRef.current;
var value = inputEl.value;
var _formattedValue = formattedValue(newValue);
if (value !== _formattedValue) {
inputEl.value = _formattedValue;
inputEl.setAttribute('aria-valuenow', newValue);
}
};
var formattedValue = function formattedValue(val) {
return formatValue(evaluateEmpty(val));
};
var concatValues = function concatValues(val1, val2) {
if (val1 && val2) {
var decimalCharIndex = val2.search(_decimal.current);
_decimal.current.lastIndex = 0;
var newVal1 = replaceDecimalSeparator(val1).split(_decimal.current)[0].replace(_suffix.current, '').trim();
return decimalCharIndex !== -1 ? newVal1 + val2.slice(decimalCharIndex) : val1;
}
return val1;
};
var getDecimalLength = function getDecimalLength(value) {
if (value) {
var valueSplit = value.split(_decimal.current);
if (valueSplit.length === 2) {
return replaceSuffix(valueSplit[1]).length;
}
}
return 0;
};
var updateModel = function updateModel(event, value) {
if (props.onValueChange) {
props.onValueChange({
originalEvent: event,
value: value,
stopPropagation: function stopPropagation() {
event === null || event === void 0 || event.stopPropagation();
},
preventDefault: function preventDefault() {
event === null || event === void 0 || event.preventDefault();
},
target: {
name: props.name,
id: props.id,
value: value
}
});
}
};
var onInputFocus = function onInputFocus(event) {
setFocusedState(true);
props.onFocus && props.onFocus(event);
if ((props.suffix || props.currency || props.prefix) && inputRef.current && !isFocusedByClick.current) {
// GitHub #1866,#5537
var inputValue = inputRef.current.value;
var prefixLength = (prefixChar.current || '').length;
var suffixLength = (suffixChar.current || '').length;
var end = inputValue.length === 0 ? 0 : inputValue.length - suffixLength;
inputRef.current.setSelectionRange(prefixLength, end);
}
};
var onInputBlur = function onInputBlur(event) {
setFocusedState(false);
isFocusedByClick.current = false;
if (inputRef.current) {
var currentValue = inputRef.current.value;
if (isValueChanged(currentValue, props.value)) {
var newValue = validateValue(parseValue(currentValue));
updateInputValue(newValue);
updateModel(event, newValue);
}
}
props.onBlur && props.onBlur(event);
};
var clearTimer = function clearTimer() {
if (timer.current) {
clearInterval(timer.current);
}
};
var changeValue = function changeValue() {
var val = validateValueByLimit(props.value);
updateInputValue(props.format ? val : replaceDecimalSeparator(val));
var newValue = validateValue(props.value);
if (props.value !== null && props.value !== newValue) {
updateModel(null, newValue);
}
};
var getFormatter = function getFormatter() {
return numberFormat.current;
};
React.useImperativeHandle(ref, function () {
return {
props: props,
focus: function focus() {
return DomHandler.focus(inputRef.current);
},
getFormatter: getFormatter,
getElement: function getElement() {
return elementRef.current;
},
getInput: function getInput() {
return inputRef.current;
}
};
});
React.useEffect(function () {
ObjectUtils.combinedRefs(inputRef, props.inputRef);
}, [inputRef, props.inputRef]);
useUnmountEffect(function () {
clearTimer();
});
useMountEffect(function () {
constructParser();
var newValue = validateValue(props.value);
if (props.value !== null && props.value !== newValue) {
updateModel(null, newValue);
}
});
useUpdateEffect(function () {
constructParser();
changeValue();
}, [_locale, props.locale, props.localeMatcher, props.mode, props.currency, props.currencyDisplay, props.useGrouping, props.minFractionDigits, props.maxFractionDigits, props.suffix, props.prefix]);
useUpdateEffect(function () {
changeValue();
}, [props.value]);
useUpdateEffect(function () {
// #5245 prevent infinite loop
if (props.disabled) {
clearTimer();
}
}, [props.disabled]);
var createInputElement = function createInputElement() {
var className = classNames(props.inputClassName, cx('input', {
context: context
}));
var valueToRender = formattedValue(props.value);
return /*#__PURE__*/React.createElement(InputText, _extends({
ref: inputRef,
id: props.inputId,
style: props.inputStyle,
role: "spinbutton",
className: className,
defaultValue: valueToRender,
type: props.type,
size: props.size,
tabIndex: props.tabIndex,
inputMode: inputMode,
maxLength: props.maxLength,
disabled: props.disabled,
required: props.required,
pattern: props.pattern,
placeholder: props.placeholder,
readOnly: props.readOnly,
name: props.name,
autoFocus: props.autoFocus,
onKeyDown: onInputKeyDown,
onKeyPress: onInputAndroidKey,
onInput: onInput,
onClick: onInputClick,
onPointerDown: onInputPointerDown,
onBlur: onInputBlur,
onFocus: onInputFocus,
onPaste: onPaste,
min: props.min,
max: props.max,
"aria-valuemin": props.min,
"aria-valuemax": props.max,
"aria-valuenow": props.value
}, ariaProps, dataProps, {
pt: ptm('input'),
unstyled: props.unstyled,
__parentMetadata: {
parent: metaData
}
}));
};
var createUpButton = function createUpButton() {
var incrementIconProps = mergeProps({
className: cx('incrementIcon')
}, ptm('incrementIcon'));
var icon = props.incrementButtonIcon || /*#__PURE__*/React.createElement(AngleUpIcon, incrementIconProps);
var upButton = IconUtils.getJSXIcon(icon, _objectSpread$1t({}, incrementIconProps), {
props: props
});
var incrementButtonProps = mergeProps({
type: 'button',
className: classNames(props.incrementButtonClassName, cx('incrementButton')),
onPointerLeave: onUpButtonMouseLeave,
onPointerDown: function onPointerDown(e) {
return onUpButtonMouseDown(e);
},
onPointerUp: onUpButtonMouseUp,
onKeyDown: function onKeyDown(e) {
return onUpButtonKeyDown(e);
},
onKeyUp: onUpButtonKeyUp,
disabled: props.disabled,
tabIndex: -1,
'aria-hidden': true
}, ptm('incrementButton'));
return /*#__PURE__*/React.createElement("button", incrementButtonProps, upButton, /*#__PURE__*/React.createElement(Ripple, null));
};
var createDownButton = function createDownButton() {
var decrementIconProps = mergeProps({
className: cx('decrementIcon')
}, ptm('decrementIcon'));
var icon = props.decrementButtonIcon || /*#__PURE__*/React.createElement(AngleDownIcon, decrementIconProps);
var downButton = IconUtils.getJSXIcon(icon, _objectSpread$1t({}, decrementIconProps), {
props: props
});
var decrementButtonProps = mergeProps({
type: 'button',
className: classNames(props.decrementButtonClassName, cx('decrementButton')),
onPointerLeave: onDownButtonMouseLeave,
onPointerDown: function onPointerDown(e) {
return onDownButtonMouseDown(e);
},
onPointerUp: onDownButtonMouseUp,
onKeyDown: function onKeyDown(e) {
return onDownButtonKeyDown(e);
},
onKeyUp: onDownButtonKeyUp,
disabled: props.disabled,
tabIndex: -1,
'aria-hidden': true
}, ptm('decrementButton'));
return /*#__PURE__*/React.createElement("button", decrementButtonProps, downButton, /*#__PURE__*/React.createElement(Ripple, null));
};
var createButtonGroup = function createButtonGroup() {
var upButton = props.showButtons && createUpButton();
var downButton = props.showButtons && createDownButton();
var buttonGroupProps = mergeProps({
className: cx('buttonGroup')
}, ptm('buttonGroup'));
if (stacked) {
return /*#__PURE__*/React.createElement("span", buttonGroupProps, upButton, downButton);
}
return /*#__PURE__*/React.createElement(React.Fragment, null, upButton, downButton);
};
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = InputNumberBase.getOtherProps(props);
var dataProps = ObjectUtils.reduceKeys(otherProps, DomHandler.DATA_PROPS);
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var inputElement = createInputElement();
var buttonGroup = createButtonGroup();
var rootProps = mergeProps({
id: props.id,
className: classNames(props.className, cx('root', {
focusedState: focusedState,
stacked: stacked,
horizontal: horizontal,
vertical: vertical
})),
style: props.style
}, otherProps, ptm('root'));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", _extends({
ref: elementRef
}, rootProps), inputElement, buttonGroup), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip,
pt: ptm('tooltip')
}, props.tooltipOptions)));
}));
InputNumber.displayName = 'InputNumber';
var JumpToPageInput = /*#__PURE__*/React.memo(function (inProps) {
useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = JumpToPageInputBase.getProps(inProps, context);
var ariaLabelValue = ariaLabel('jumpToPageInputLabel');
var onChange = function onChange(event) {
if (props.onChange) {
props.onChange(props.rows * (event.value - 1), props.rows);
}
};
var value = props.totalPages > 0 ? props.page + 1 : 0;
var element = /*#__PURE__*/React.createElement(InputNumber, {
value: value,
onChange: onChange,
className: "p-paginator-page-input",
disabled: props.disabled,
pt: props.ptm('JTPInput'),
unstyled: props.unstyled,
__parentMetadata: {
parent: props.metaData
},
"aria-label": ariaLabelValue
});
if (props.template) {
var defaultOptions = {
value: value,
onChange: onChange,
disabled: props.disabled,
className: 'p-paginator-page-input',
'aria-label': ariaLabelValue,
element: element,
props: props
};
return ObjectUtils.getJSXElement(props.template, defaultOptions);
}
return element;
});
JumpToPageInput.displayName = 'JumpToPageInput';
var AngleDoubleRightIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M7.68757 11.1451C7.7791 11.1831 7.8773 11.2024 7.9764 11.2019C8.07769 11.1985 8.17721 11.1745 8.26886 11.1312C8.36052 11.088 8.44238 11.0265 8.50943 10.9505L12.0294 7.49085C12.1707 7.34942 12.25 7.15771 12.25 6.95782C12.25 6.75794 12.1707 6.56622 12.0294 6.42479L8.50943 2.90479C8.37014 2.82159 8.20774 2.78551 8.04633 2.80192C7.88491 2.81833 7.73309 2.88635 7.6134 2.99588C7.4937 3.10541 7.41252 3.25061 7.38189 3.40994C7.35126 3.56927 7.37282 3.73423 7.44337 3.88033L10.4605 6.89748L7.44337 9.91463C7.30212 10.0561 7.22278 10.2478 7.22278 10.4477C7.22278 10.6475 7.30212 10.8393 7.44337 10.9807C7.51301 11.0512 7.59603 11.1071 7.68757 11.1451ZM1.94207 10.9505C2.07037 11.0968 2.25089 11.1871 2.44493 11.2019C2.63898 11.1871 2.81949 11.0968 2.94779 10.9505L6.46779 7.49085C6.60905 7.34942 6.68839 7.15771 6.68839 6.95782C6.68839 6.75793 6.60905 6.56622 6.46779 6.42479L2.94779 2.90479C2.80704 2.83757 2.6489 2.81563 2.49517 2.84201C2.34143 2.86839 2.19965 2.94178 2.08936 3.05207C1.97906 3.16237 1.90567 3.30415 1.8793 3.45788C1.85292 3.61162 1.87485 3.76975 1.94207 3.9105L4.95922 6.92765L1.94207 9.9448C1.81838 10.0831 1.75 10.2621 1.75 10.4477C1.75 10.6332 1.81838 10.8122 1.94207 10.9505Z",
fill: "currentColor"
}));
}));
AngleDoubleRightIcon.displayName = 'AngleDoubleRightIcon';
function ownKeys$1s(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$1s(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1s(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1s(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var LastPageLink = /*#__PURE__*/React.memo(function (inProps) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = LastPageLinkBase.getProps(inProps, context);
var ptm = props.ptm,
cx = props.cx;
var getPTOptions = function getPTOptions(key) {
return ptm(key, {
hostName: props.hostName,
context: {
disabled: props.disabled
}
});
};
var className = classNames('p-paginator-last p-paginator-element p-link', {
'p-disabled': props.disabled
});
var iconClassName = 'p-paginator-icon';
var lastPageIconProps = mergeProps({
className: cx('lastPageIcon')
}, getPTOptions('lastPageIcon'));
var icon = props.lastPageLinkIcon || /*#__PURE__*/React.createElement(AngleDoubleRightIcon, lastPageIconProps);
var lastPageLinkIcon = IconUtils.getJSXIcon(icon, _objectSpread$1s({}, lastPageIconProps), {
props: props
});
var lastPageButtonProps = mergeProps({
type: 'button',
className: cx('lastPageButton', {
disabled: props.disabled
}),
onClick: props.onClick,
disabled: props.disabled,
'aria-label': ariaLabel('lastPageLabel')
}, getPTOptions('lastPageButton'));
var element = /*#__PURE__*/React.createElement("button", lastPageButtonProps, lastPageLinkIcon, /*#__PURE__*/React.createElement(Ripple, null));
if (props.template) {
var defaultOptions = {
onClick: props.onClick,
className: className,
iconClassName: iconClassName,
disabled: props.disabled,
element: element,
props: props
};
return ObjectUtils.getJSXElement(props.template, defaultOptions);
}
return element;
});
LastPageLink.displayName = 'LastPageLink';
function ownKeys$1r(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$1r(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1r(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1r(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var NextPageLink = /*#__PURE__*/React.memo(function (inProps) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = NextPageLinkBase.getProps(inProps, context);
var ptm = props.ptm,
cx = props.cx;
var getPTOptions = function getPTOptions(key) {
return ptm(key, {
hostName: props.hostName,
context: {
disabled: props.disabled
}
});
};
var className = classNames('p-paginator-next p-paginator-element p-link', {
'p-disabled': props.disabled
});
var iconClassName = 'p-paginator-icon';
var nextPageIconProps = mergeProps({
className: cx('nextPageIcon')
}, getPTOptions('nextPageIcon'));
var icon = props.nextPageLinkIcon || /*#__PURE__*/React.createElement(AngleRightIcon, nextPageIconProps);
var nextPageLinkIcon = IconUtils.getJSXIcon(icon, _objectSpread$1r({}, nextPageIconProps), {
props: props
});
var nextPageButtonProps = mergeProps({
type: 'button',
className: cx('nextPageButton', {
disabled: props.disabled
}),
onClick: props.onClick,
disabled: props.disabled,
'aria-label': ariaLabel('nextPageLabel')
}, getPTOptions('nextPageButton'));
var element = /*#__PURE__*/React.createElement("button", nextPageButtonProps, nextPageLinkIcon, /*#__PURE__*/React.createElement(Ripple, null));
if (props.template) {
var defaultOptions = {
onClick: props.onClick,
className: className,
iconClassName: iconClassName,
disabled: props.disabled,
element: element,
nextPageLinkIcon: nextPageLinkIcon,
props: props
};
return ObjectUtils.getJSXElement(props.template, defaultOptions);
}
return element;
});
NextPageLink.displayName = 'NextPageLink';
var PageLinks = /*#__PURE__*/React.memo(function (inProps) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = PageLinksBase.getProps(inProps, context);
var ptm = props.ptm,
cx = props.cx;
var getPTOptions = function getPTOptions(pageLink, key) {
return ptm(key, {
hostName: props.hostName,
context: {
active: pageLink - 1 === props.page
}
});
};
var onPageLinkClick = function onPageLinkClick(event, pageLink) {
if (props.onClick) {
props.onClick({
originalEvent: event,
value: pageLink
});
}
event.preventDefault();
};
var elements;
if (props.value) {
var startPageInView = props.value[0];
var endPageInView = props.value[props.value.length - 1];
elements = props.value.map(function (pageLink) {
var className = classNames('p-paginator-page p-paginator-element p-link', {
'p-paginator-page-start': pageLink === startPageInView,
'p-paginator-page-end': pageLink === endPageInView,
'p-highlight': pageLink - 1 === props.page
});
var pageButtonProps = mergeProps({
type: 'button',
onClick: function onClick(e) {
return onPageLinkClick(e, pageLink);
},
className: cx('pageButton', {
pageLink: pageLink,
startPageInView: startPageInView,
endPageInView: endPageInView,
page: props.page
}),
disabled: props.disabled,
'aria-label': ariaLabel('pageLabel', {
page: pageLink
}),
'aria-current': pageLink - 1 === props.page ? 'true' : undefined
}, getPTOptions(pageLink, 'pageButton'));
var element = /*#__PURE__*/React.createElement("button", pageButtonProps, pageLink, /*#__PURE__*/React.createElement(Ripple, null));
if (props.template) {
var defaultOptions = {
onClick: function onClick(e) {
return onPageLinkClick(e, pageLink);
},
className: className,
view: {
startPage: startPageInView - 1,
endPage: endPageInView - 1
},
page: pageLink - 1,
currentPage: props.page,
totalPages: props.totalPages,
ariaLabel: ariaLabel('pageLabel', {
page: pageLink
}),
ariaCurrent: pageLink - 1 === props.page ? 'true' : undefined,
element: element,
props: props
};
element = ObjectUtils.getJSXElement(props.template, defaultOptions);
}
return /*#__PURE__*/React.createElement(React.Fragment, {
key: pageLink
}, element);
});
}
var pagesProps = mergeProps({
className: cx('pages')
}, ptm('pages', {
hostName: props.hostName
}));
return /*#__PURE__*/React.createElement("span", pagesProps, elements);
});
PageLinks.displayName = 'PageLinks';
var AngleLeftIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
d: "M8.75 11.185C8.65146 11.1854 8.55381 11.1662 8.4628 11.1284C8.37179 11.0906 8.28924 11.0351 8.22 10.965L4.72 7.46496C4.57955 7.32433 4.50066 7.13371 4.50066 6.93496C4.50066 6.73621 4.57955 6.54558 4.72 6.40496L8.22 2.93496C8.36095 2.84357 8.52851 2.80215 8.69582 2.81733C8.86312 2.83252 9.02048 2.90344 9.14268 3.01872C9.26487 3.134 9.34483 3.28696 9.36973 3.4531C9.39463 3.61924 9.36303 3.78892 9.28 3.93496L6.28 6.93496L9.28 9.93496C9.42045 10.0756 9.49934 10.2662 9.49934 10.465C9.49934 10.6637 9.42045 10.8543 9.28 10.995C9.13526 11.1257 8.9448 11.1939 8.75 11.185Z",
fill: "currentColor"
}));
}));
AngleLeftIcon.displayName = 'AngleLeftIcon';
function ownKeys$1q(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$1q(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1q(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1q(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var PrevPageLink = /*#__PURE__*/React.memo(function (inProps) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = PrevPageLinkBase.getProps(inProps, context);
var ptm = props.ptm,
cx = props.cx;
var getPTOptions = function getPTOptions(key) {
return ptm(key, {
hostName: props.hostName,
context: {
disabled: props.disabled
}
});
};
var className = classNames('p-paginator-prev p-paginator-element p-link', {
'p-disabled': props.disabled
});
var iconClassName = 'p-paginator-icon';
var prevPageIconProps = mergeProps({
className: cx('prevPageIcon')
}, getPTOptions('prevPageIcon'));
var icon = props.prevPageLinkIcon || /*#__PURE__*/React.createElement(AngleLeftIcon, prevPageIconProps);
var prevPageLinkIcon = IconUtils.getJSXIcon(icon, _objectSpread$1q({}, prevPageIconProps), {
props: props
});
var prevPageButtonProps = mergeProps({
type: 'button',
className: cx('prevPageButton', {
disabled: props.disabled
}),
onClick: props.onClick,
disabled: props.disabled,
'aria-label': ariaLabel('prevPageLabel')
}, getPTOptions('prevPageButton'));
var element = /*#__PURE__*/React.createElement("button", prevPageButtonProps, prevPageLinkIcon, /*#__PURE__*/React.createElement(Ripple, null));
if (props.template) {
var defaultOptions = {
onClick: props.onClick,
className: className,
iconClassName: iconClassName,
disabled: props.disabled,
element: element,
props: props
};
return ObjectUtils.getJSXElement(props.template, defaultOptions);
}
return element;
});
PrevPageLink.displayName = 'PrevPageLink';
function ownKeys$1p(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$1p(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1p(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1p(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var classes$U = {
root: function root(_ref) {
var props = _ref.props,
focusedState = _ref.focusedState,
overlayVisibleState = _ref.overlayVisibleState,
context = _ref.context;
return classNames('p-dropdown p-component p-inputwrapper', {
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'p-focus': focusedState,
'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled',
'p-dropdown-clearable': props.showClear && !props.disabled,
'p-inputwrapper-filled': ObjectUtils.isNotEmpty(props.value),
'p-inputwrapper-focus': focusedState || overlayVisibleState
});
},
input: function input(_ref2) {
var props = _ref2.props,
label = _ref2.label;
return props.editable ? 'p-dropdown-label p-inputtext' : classNames('p-dropdown-label p-inputtext', {
'p-placeholder': label === null && props.placeholder,
'p-dropdown-label-empty': label === null && !props.placeholder
});
},
trigger: 'p-dropdown-trigger',
emptyMessage: 'p-dropdown-empty-message',
itemGroup: function itemGroup(_ref3) {
var optionGroupLabel = _ref3.optionGroupLabel;
return classNames('p-dropdown-item-group', {
'p-dropdown-item-empty': !optionGroupLabel || optionGroupLabel.length === 0
});
},
itemGroupLabel: 'p-dropdown-item-group-label',
dropdownIcon: 'p-dropdown-trigger-icon p-clickable',
loadingIcon: 'p-dropdown-trigger-icon p-clickable',
clearIcon: 'p-dropdown-clear-icon p-clickable',
filterIcon: 'p-dropdown-filter-icon',
filterClearIcon: 'p-dropdown-filter-clear-icon',
filterContainer: function filterContainer(_ref4) {
var clearIcon = _ref4.clearIcon;
return classNames('p-dropdown-filter-container', {
'p-dropdown-clearable-filter': !!clearIcon
});
},
filterInput: function filterInput(_ref5) {
var props = _ref5.props,
context = _ref5.context;
return classNames('p-dropdown-filter p-inputtext p-component', {
'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
});
},
list: function list(_ref6) {
var virtualScrollerOptions = _ref6.virtualScrollerOptions;
return virtualScrollerOptions ? 'p-dropdown-items' : 'p-dropdown-items';
},
panel: function panel(_ref7) {
var context = _ref7.context;
return classNames('p-dropdown-panel p-component', {
'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
});
},
item: function item(_ref8) {
var selected = _ref8.selected,
disabled = _ref8.disabled,
label = _ref8.label,
index = _ref8.index,
focusedOptionIndex = _ref8.focusedOptionIndex,
highlightOnSelect = _ref8.highlightOnSelect;
return classNames('p-dropdown-item', {
'p-highlight': selected && highlightOnSelect,
'p-disabled': disabled,
'p-focus': index === focusedOptionIndex,
'p-dropdown-item-empty': !label || label.length === 0
});
},
itemLabel: 'p-dropdown-item-label',
checkIcon: 'p-dropdown-check-icon',
blankIcon: 'p-dropdown-blank-icon',
wrapper: 'p-dropdown-items-wrapper',
header: 'p-dropdown-header',
footer: 'p-dropdown-footer',
transition: 'p-connected-overlay'
};
var styles$J = "\n@layer primereact {\n .p-dropdown {\n display: inline-flex;\n cursor: pointer;\n position: relative;\n user-select: none;\n }\n \n .p-dropdown-trigger {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n \n .p-dropdown-label {\n display: block;\n white-space: nowrap;\n overflow: hidden;\n flex: 1 1 auto;\n width: 1%;\n text-overflow: ellipsis;\n cursor: pointer;\n }\n \n .p-dropdown-label-empty {\n overflow: hidden;\n visibility: hidden;\n }\n \n input.p-dropdown-label {\n cursor: default;\n }\n \n .p-dropdown .p-dropdown-panel {\n min-width: 100%;\n }\n \n .p-dropdown-panel {\n position: absolute;\n top: 0;\n left: 0;\n }\n \n .p-dropdown-items-wrapper {\n overflow: auto;\n }\n \n .p-dropdown-item {\n cursor: pointer;\n font-weight: normal;\n white-space: nowrap;\n position: relative;\n overflow: hidden;\n }\n \n .p-dropdown-items {\n margin: 0;\n padding: 0;\n list-style-type: none;\n }\n \n .p-dropdown-filter {\n width: 100%;\n }\n \n .p-dropdown-filter-container {\n position: relative;\n }\n \n .p-dropdown-clear-icon,\n .p-dropdown-filter-icon,\n .p-dropdown-filter-clear-icon {\n position: absolute;\n top: 50%;\n margin-top: -.5rem;\n right: 2rem;\n }\n \n .p-fluid .p-dropdown {\n display: flex;\n }\n \n .p-fluid .p-dropdown .p-dropdown-label {\n width: 1%;\n }\n}\n";
var inlineStyles$i = {
wrapper: function wrapper(_ref9) {
var props = _ref9.props;
return {
maxHeight: props.scrollHeight || 'auto'
};
},
panel: function panel(_ref10) {
var props = _ref10.props;
return _objectSpread$1p({}, props.panelStyle);
}
};
var DropdownBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Dropdown',
__parentMetadata: null,
appendTo: null,
ariaLabel: null,
ariaLabelledBy: null,
autoFocus: false,
autoOptionFocus: false,
checkmark: false,
children: undefined,
className: null,
clearIcon: null,
collapseIcon: null,
dataKey: null,
disabled: false,
dropdownIcon: null,
editable: false,
emptyFilterMessage: null,
emptyMessage: null,
filter: false,
filterBy: null,
filterClearIcon: null,
filterDelay: 300,
filterIcon: null,
filterInputAutoFocus: false,
filterLocale: undefined,
filterMatchMode: 'contains',
filterPlaceholder: null,
filterTemplate: null,
focusInputRef: null,
focusOnHover: true,
highlightOnSelect: true,
id: null,
inputId: null,
inputRef: null,
invalid: false,
itemTemplate: null,
loading: false,
loadingIcon: null,
maxLength: null,
name: null,
onBlur: null,
onChange: null,
onClick: null,
onContextMenu: null,
onFilter: null,
onFocus: null,
onHide: null,
onMouseDown: null,
onShow: null,
optionDisabled: null,
optionGroupChildren: 'items',
optionGroupLabel: null,
optionGroupTemplate: null,
optionLabel: null,
options: null,
optionValue: null,
panelClassName: null,
panelFooterTemplate: null,
panelStyle: null,
placeholder: null,
required: false,
resetFilterOnHide: false,
scrollHeight: '200px',
selectOnFocus: false,
showClear: false,
showFilterClear: false,
showOnFocus: false,
style: null,
tabIndex: null,
tooltip: null,
tooltipOptions: null,
transitionOptions: null,
useOptionAsValue: false,
value: null,
valueTemplate: null,
variant: null,
virtualScrollerOptions: null
},
css: {
classes: classes$U,
styles: styles$J,
inlineStyles: inlineStyles$i
}
});
var SearchIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M2.67602 11.0265C3.6661 11.688 4.83011 12.0411 6.02086 12.0411C6.81149 12.0411 7.59438 11.8854 8.32483 11.5828C8.87005 11.357 9.37808 11.0526 9.83317 10.6803L12.9769 13.8241C13.0323 13.8801 13.0983 13.9245 13.171 13.9548C13.2438 13.985 13.3219 14.0003 13.4007 14C13.4795 14.0003 13.5575 13.985 13.6303 13.9548C13.7031 13.9245 13.7691 13.8801 13.8244 13.8241C13.9367 13.7116 13.9998 13.5592 13.9998 13.4003C13.9998 13.2414 13.9367 13.089 13.8244 12.9765L10.6807 9.8328C11.053 9.37773 11.3573 8.86972 11.5831 8.32452C11.8857 7.59408 12.0414 6.81119 12.0414 6.02056C12.0414 4.8298 11.6883 3.66579 11.0268 2.67572C10.3652 1.68564 9.42494 0.913972 8.32483 0.45829C7.22472 0.00260857 6.01418 -0.116618 4.84631 0.115686C3.67844 0.34799 2.60568 0.921393 1.76369 1.76338C0.921698 2.60537 0.348296 3.67813 0.115991 4.84601C-0.116313 6.01388 0.00291375 7.22441 0.458595 8.32452C0.914277 9.42464 1.68595 10.3649 2.67602 11.0265ZM3.35565 2.0158C4.14456 1.48867 5.07206 1.20731 6.02086 1.20731C7.29317 1.20731 8.51338 1.71274 9.41304 2.6124C10.3127 3.51206 10.8181 4.73226 10.8181 6.00457C10.8181 6.95337 10.5368 7.88088 10.0096 8.66978C9.48251 9.45868 8.73328 10.0736 7.85669 10.4367C6.98011 10.7997 6.01554 10.8947 5.08496 10.7096C4.15439 10.5245 3.2996 10.0676 2.62869 9.39674C1.95778 8.72583 1.50089 7.87104 1.31579 6.94046C1.13068 6.00989 1.22568 5.04532 1.58878 4.16874C1.95187 3.29215 2.56675 2.54292 3.35565 2.0158Z",
fill: "currentColor"
}));
}));
SearchIcon.displayName = 'SearchIcon';
var BlankIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("rect", {
width: "1",
height: "1",
fill: "currentColor",
fillOpacity: "0"
}));
}));
BlankIcon.displayName = 'BlankIcon';
var DropdownItem = /*#__PURE__*/React.memo(function (props) {
var mergeProps = useMergeProps();
var ptm = props.ptm,
cx = props.cx,
selected = props.selected,
disabled = props.disabled,
option = props.option,
label = props.label,
index = props.index,
focusedOptionIndex = props.focusedOptionIndex,
ariaSetSize = props.ariaSetSize,
checkmark = props.checkmark,
highlightOnSelect = props.highlightOnSelect,
onInputKeyDown = props.onInputKeyDown;
var getPTOptions = function getPTOptions(key) {
return ptm(key, {
context: {
selected: selected,
disabled: disabled,
focused: index === focusedOptionIndex
}
});
};
var _onClick = function onClick(event, i) {
if (props.onClick) {
props.onClick({
originalEvent: event,
option: option
});
}
};
var content = props.template ? ObjectUtils.getJSXElement(props.template, props.option) : props.label;
var itemProps = mergeProps({
id: "dropdownItem_".concat(index),
role: 'option',
className: classNames(option.className, cx('item', {
selected: selected,
disabled: disabled,
label: label,
index: index,
focusedOptionIndex: focusedOptionIndex,
highlightOnSelect: highlightOnSelect
})),
style: props.style,
tabIndex: 0,
onClick: function onClick(e) {
return _onClick(e);
},
onKeyDown: function onKeyDown(e) {
return onInputKeyDown(e);
},
onMouseMove: function onMouseMove(e) {
return props === null || props === void 0 ? void 0 : props.onMouseMove(e, index);
},
'aria-setsize': ariaSetSize,
'aria-posinset': index + 1,
'aria-label': label,
'aria-selected': selected,
'data-p-highlight': selected,
'data-p-focused': focusedOptionIndex === index,
'data-p-disabled': disabled
}, getPTOptions('item'));
var itemGroupLabelProps = mergeProps({
className: cx('itemLabel')
}, getPTOptions('itemLabel'));
var iconRenderer = function iconRenderer() {
if (selected) {
var checkIconProps = mergeProps({
className: cx('checkIcon')
}, getPTOptions('checkIcon'));
return /*#__PURE__*/React.createElement(CheckIcon, checkIconProps);
}
var blankIconProps = mergeProps({
className: cx('blankIcon')
}, getPTOptions('blankIcon'));
return /*#__PURE__*/React.createElement(BlankIcon, blankIconProps);
};
return /*#__PURE__*/React.createElement("li", _extends({
key: props.label
}, itemProps), checkmark && iconRenderer(), /*#__PURE__*/React.createElement("span", itemGroupLabelProps, content), /*#__PURE__*/React.createElement(Ripple, null));
});
DropdownItem.displayName = 'DropdownItem';
function ownKeys$1o(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$1o(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1o(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1o(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var DropdownPanel = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (props, ref) {
var mergeProps = useMergeProps();
var ptm = props.ptm,
cx = props.cx,
sx = props.sx;
var context = React.useContext(PrimeReactContext);
var filterInputRef = React.useRef(null);
var isEmptyFilter = !(props.visibleOptions && props.visibleOptions.length) && props.hasFilter;
var ariaSetSize = props.visibleOptions ? props.visibleOptions.length : 0;
var filterOptions = {
filter: function filter(e) {
return onFilterInputChange(e);
},
reset: function reset() {
return props.resetFilter();
}
};
var getPTOptions = function getPTOptions(key, options) {
return ptm(key, _objectSpread$1o({
hostName: props.hostName
}, options));
};
var onEnter = function onEnter() {
props.onEnter(function () {
if (props.virtualScrollerRef.current) {
var selectedIndex = props.getSelectedOptionIndex();
if (selectedIndex !== -1) {
setTimeout(function () {
return props.virtualScrollerRef.current.scrollToIndex(selectedIndex);
}, 0);
}
}
});
};
var onEntered = function onEntered() {
props.onEntered(function () {
if (props.filter && props.filterInputAutoFocus) {
DomHandler.focus(filterInputRef.current, false);
}
});
};
var onFilterInputChange = function onFilterInputChange(event) {
props.onFilterInputChange && props.onFilterInputChange(event);
};
var createFooter = function createFooter() {
if (props.panelFooterTemplate) {
var content = ObjectUtils.getJSXElement(props.panelFooterTemplate, props, props.onOverlayHide);
var footerProps = mergeProps({
className: cx('footer')
}, getPTOptions('footer'));
return /*#__PURE__*/React.createElement("div", footerProps, content);
}
return null;
};
var changeFocusedItemOnHover = function changeFocusedItemOnHover(event, index) {
if (props.focusOnHover) {
var _props$changeFocusedO;
props === null || props === void 0 || (_props$changeFocusedO = props.changeFocusedOptionIndex) === null || _props$changeFocusedO === void 0 || _props$changeFocusedO.call(props, event, index);
}
};
var createEmptyMessage = function createEmptyMessage(emptyMessage, isFilter) {
var message = ObjectUtils.getJSXElement(emptyMessage, props) || localeOption(isFilter ? 'emptyFilterMessage' : 'emptyMessage');
var emptyMessageProps = mergeProps({
className: cx('emptyMessage')
}, getPTOptions('emptyMessage'));
return /*#__PURE__*/React.createElement("li", emptyMessageProps, message);
};
var createItem = function createItem(option, index) {
var scrollerOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var style = {
height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined
};
style = _objectSpread$1o(_objectSpread$1o({}, style), option.style);
if (option.group && props.optionGroupLabel) {
var optionGroupLabel = props.optionGroupLabel;
var groupContent = props.optionGroupTemplate ? ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : props.getOptionGroupLabel(option);
var key = index + '_' + props.getOptionGroupRenderKey(option);
var itemGroupProps = mergeProps({
className: cx('itemGroup', {
optionGroupLabel: optionGroupLabel
}),
style: style,
'data-p-highlight': props.selected
}, getPTOptions('itemGroup'));
var itemGroupLabelProps = mergeProps({
className: cx('itemGroupLabel')
}, getPTOptions('itemGroupLabel'));
return /*#__PURE__*/React.createElement("li", _extends({
key: key
}, itemGroupProps), /*#__PURE__*/React.createElement("span", itemGroupLabelProps, groupContent));
}
var optionKey = props.getOptionRenderKey(option) + '_' + index;
var optionLabel = props.getOptionLabel(option);
var disabled = props.isOptionDisabled(option);
return /*#__PURE__*/React.createElement(DropdownItem, {
key: optionKey,
label: optionLabel,
index: index,
focusedOptionIndex: props.focusedOptionIndex,
option: option,
ariaSetSize: ariaSetSize,
onInputKeyDown: props.onInputKeyDown,
style: style,
template: props.itemTemplate,
selected: props.isSelected(option),
highlightOnSelect: props.highlightOnSelect,
disabled: disabled,
onClick: props.onOptionClick,
onMouseMove: changeFocusedItemOnHover,
ptm: ptm,
cx: cx,
checkmark: props.checkmark
});
};
var createItems = function createItems() {
if (ObjectUtils.isNotEmpty(props.visibleOptions)) {
return props.visibleOptions.map(createItem);
} else if (props.hasFilter) {
return createEmptyMessage(props.emptyFilterMessage, true);
}
return createEmptyMessage(props.emptyMessage);
};
var createFilterClearIcon = function createFilterClearIcon() {
if (props.showFilterClear && props.filterValue) {
var ariaLabelFilterClear = localeOption('clear');
var clearIconProps = mergeProps({
className: cx('filterClearIcon'),
'aria-label': ariaLabelFilterClear,
onClick: function onClick() {
return props.onFilterClearIconClick(function () {
return DomHandler.focus(filterInputRef.current);
});
}
}, getPTOptions('filterClearIcon'));
var icon = props.filterClearIcon || /*#__PURE__*/React.createElement(TimesIcon, clearIconProps);
var filterClearIcon = IconUtils.getJSXIcon(icon, _objectSpread$1o({}, clearIconProps), {
props: props
});
return filterClearIcon;
}
return null;
};
var createFilter = function createFilter() {
if (props.filter) {
var clearIcon = createFilterClearIcon();
var filterIconProps = mergeProps({
className: cx('filterIcon')
}, getPTOptions('filterIcon'));
var icon = props.filterIcon || /*#__PURE__*/React.createElement(SearchIcon, filterIconProps);
var filterIcon = IconUtils.getJSXIcon(icon, _objectSpread$1o({}, filterIconProps), {
props: props
});
var filterContainerProps = mergeProps({
className: cx('filterContainer', {
clearIcon: clearIcon
})
}, getPTOptions('filterContainer'));
var filterInputProps = mergeProps({
ref: filterInputRef,
type: 'text',
autoComplete: 'off',
className: cx('filterInput', {
context: context
}),
placeholder: props.filterPlaceholder,
onKeyDown: props.onFilterInputKeyDown,
onChange: function onChange(e) {
return onFilterInputChange(e);
},
value: props.filterValue
}, getPTOptions('filterInput'));
var content = /*#__PURE__*/React.createElement("div", filterContainerProps, /*#__PURE__*/React.createElement("input", filterInputProps), clearIcon, filterIcon);
if (props.filterTemplate) {
var defaultContentOptions = {
className: classNames('p-dropdown-filter-container', {
'p-dropdown-clearable-filter': !!clearIcon
}),
element: content,
filterOptions: filterOptions,
filterInputKeyDown: props.onFilterInputKeyDown,
filterInputChange: onFilterInputChange,
filterIconClassName: 'p-dropdown-filter-icon',
clearIcon: clearIcon,
props: props
};
content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
}
var headerProps = mergeProps({
className: cx('header')
}, getPTOptions('header'));
return /*#__PURE__*/React.createElement("div", headerProps, content);
}
return null;
};
var createContent = function createContent() {
if (props.virtualScrollerOptions) {
var virtualScrollerProps = _objectSpread$1o(_objectSpread$1o({}, props.virtualScrollerOptions), {
style: _objectSpread$1o(_objectSpread$1o({}, props.virtualScrollerOptions.style), {
height: props.scrollHeight
}),
className: classNames('p-dropdown-items-wrapper', props.virtualScrollerOptions.className),
items: props.visibleOptions,
autoSize: true,
onLazyLoad: function onLazyLoad(event) {
return props.virtualScrollerOptions.onLazyLoad(_objectSpread$1o(_objectSpread$1o({}, event), {
filter: props.filterValue
}));
},
itemTemplate: function itemTemplate(item, options) {
return item && createItem(item, options.index, options);
},
contentTemplate: function contentTemplate(options) {
var children = options.children || [];
var emptyMessage = props.hasFilter ? props.emptyFilterMessage : props.emptyMessage;
var content = isEmptyFilter || (children === null || children === void 0 ? void 0 : children.length) === 0 ? createEmptyMessage(emptyMessage) : children;
var listProps = mergeProps({
ref: options.contentRef,
style: options.style,
className: classNames(options.className, cx('list', {
virtualScrollerProps: props.virtualScrollerOptions
})),
role: 'listbox',
'aria-label': ariaLabel('listLabel')
}, getPTOptions('list'));
return /*#__PURE__*/React.createElement("ul", listProps, content);
}
});
return /*#__PURE__*/React.createElement(VirtualScroller, _extends({
ref: props.virtualScrollerRef
}, virtualScrollerProps, {
pt: ptm('virtualScroller')
}));
}
var items = createItems();
var wrapperProps = mergeProps({
className: cx('wrapper'),
style: sx('wrapper')
}, getPTOptions('wrapper'));
var listProps = mergeProps({
className: cx('list'),
role: 'listbox',
'aria-label': ariaLabel('listLabel')
}, getPTOptions('list'));
return /*#__PURE__*/React.createElement("div", wrapperProps, /*#__PURE__*/React.createElement("ul", listProps, items));
};
var createElement = function createElement() {
var filter = createFilter();
var content = createContent();
var footer = createFooter();
var panelProps = mergeProps({
className: classNames(props.panelClassName, cx('panel', {
context: context
})),
style: sx('panel'),
onClick: props.onClick,
'data-pr-is-overlay': true
}, getPTOptions('panel'));
var transitionProps = mergeProps({
classNames: cx('transition'),
"in": props["in"],
timeout: {
enter: 120,
exit: 100
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: onEnter,
onEntered: onEntered,
onExit: props.onExit,
onExited: props.onExited
}, getPTOptions('transition'));
return /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: ref
}, transitionProps), /*#__PURE__*/React.createElement("div", _extends({
ref: ref
}, panelProps), props.firstFocusableElement, filter, content, footer, props.lastFocusableElement));
};
var element = createElement();
return /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo
});
}));
DropdownPanel.displayName = 'DropdownPanel';
function _createForOfIteratorHelper$c(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$c(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray$c(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$c(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$c(r, a) : void 0; } }
function _arrayLikeToArray$c(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 ownKeys$1n(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$1n(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1n(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1n(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Dropdown = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = DropdownBase.getProps(inProps, context);
var _useDebounce = useDebounce('', props.filterDelay || 0),
_useDebounce2 = _slicedToArray(_useDebounce, 3),
filterValue = _useDebounce2[0],
filterState = _useDebounce2[1],
setFilterState = _useDebounce2[2];
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var _React$useState3 = React.useState(-1),
_React$useState4 = _slicedToArray(_React$useState3, 2),
focusedOptionIndex = _React$useState4[0],
setFocusedOptionIndex = _React$useState4[1];
var _React$useState5 = React.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
overlayVisibleState = _React$useState6[0],
setOverlayVisibleState = _React$useState6[1];
var clickedRef = React.useRef(false);
var elementRef = React.useRef(null);
var overlayRef = React.useRef(null);
var firstHiddenFocusableElementOnOverlay = React.useRef(null);
var lastHiddenFocusableElementOnOverlay = React.useRef(null);
var inputRef = React.useRef(props.inputRef);
var focusInputRef = React.useRef(props.focusInputRef);
var virtualScrollerRef = React.useRef(null);
var searchTimeout = React.useRef(null);
var searchValue = React.useRef(null);
var isLazy = props.virtualScrollerOptions && props.virtualScrollerOptions.lazy;
var hasFilter = ObjectUtils.isNotEmpty(filterState);
var appendTo = props.appendTo || context && context.appendTo || PrimeReact.appendTo;
var _DropdownBase$setMeta = DropdownBase.setMetaData(_objectSpread$1n(_objectSpread$1n({
props: props
}, props.__parentMetadata), {}, {
state: {
filter: filterState,
focused: focusedState,
overlayVisible: overlayVisibleState
}
})),
ptm = _DropdownBase$setMeta.ptm,
cx = _DropdownBase$setMeta.cx,
sx = _DropdownBase$setMeta.sx,
isUnstyled = _DropdownBase$setMeta.isUnstyled;
useHandleStyle(DropdownBase.css.styles, isUnstyled, {
name: 'dropdown'
});
var _useOverlayListener = useOverlayListener({
target: elementRef,
overlay: overlayRef,
listener: function listener(event, _ref) {
var type = _ref.type,
valid = _ref.valid;
if (valid) {
if (type === 'outside') {
if (!isClearClicked(event)) {
hide();
}
} else if (context.hideOverlaysOnDocumentScrolling) {
hide();
} else if (!DomHandler.isDocument(event.target)) {
alignOverlay();
}
}
},
when: overlayVisibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var flatOptions = function flatOptions(options) {
return (options || []).reduce(function (result, option, index) {
result.push(_objectSpread$1n(_objectSpread$1n({}, option), {}, {
group: true,
index: index
}));
var optionGroupChildren = getOptionGroupChildren(option);
optionGroupChildren && optionGroupChildren.forEach(function (o) {
return result.push(o);
});
return result;
}, []);
};
var getVisibleOptions = function getVisibleOptions() {
var options = props.optionGroupLabel ? flatOptions(props.options) : props.options;
if (hasFilter && !isLazy) {
var _filterValue = filterState.trim().toLocaleLowerCase(props.filterLocale);
var searchFields = props.filterBy ? props.filterBy.split(',') : [props.optionLabel || 'label'];
if (props.optionGroupLabel) {
var filteredGroups = [];
var _iterator = _createForOfIteratorHelper$c(props.options),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var optgroup = _step.value;
var filteredSubOptions = FilterService.filter(getOptionGroupChildren(optgroup), searchFields, _filterValue, props.filterMatchMode, props.filterLocale);
if (filteredSubOptions && filteredSubOptions.length) {
filteredGroups.push(_objectSpread$1n(_objectSpread$1n({}, optgroup), _defineProperty({}, "".concat(props.optionGroupChildren), filteredSubOptions)));
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return flatOptions(filteredGroups);
}
return FilterService.filter(options, searchFields, _filterValue, props.filterMatchMode, props.filterLocale);
}
return options;
};
var onFirstHiddenFocus = function onFirstHiddenFocus(event) {
var focusableEl = event.relatedTarget === focusInputRef.current ? DomHandler.getFirstFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : focusInputRef.current;
DomHandler.focus(focusableEl);
};
var onLastHiddenFocus = function onLastHiddenFocus(event) {
var focusableEl = event.relatedTarget === focusInputRef.current ? DomHandler.getLastFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : focusInputRef.current;
DomHandler.focus(focusableEl);
};
var isClearClicked = function isClearClicked(event) {
return DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'clearicon') || DomHandler.isAttributeEquals(event.target.parentElement || event.target, 'data-pc-section', 'filterclearicon');
};
var _onClick = function onClick(event) {
if (props.disabled || props.loading) {
return;
}
props.onClick && props.onClick(event);
// do not continue if the user defined click wants to prevent it
if (event.defaultPrevented) {
return;
}
if (isClearClicked(event) || event.target.tagName === 'INPUT') {
return;
} else if (!overlayRef.current || !(overlayRef.current && overlayRef.current.contains(event.target))) {
DomHandler.focus(focusInputRef.current);
overlayVisibleState ? hide() : show();
}
event.preventDefault();
clickedRef.current = true;
};
var onInputFocus = function onInputFocus(event) {
if (props.showOnFocus && !overlayVisibleState) {
show();
}
setFocusedState(true);
props.onFocus && props.onFocus(event);
};
var onInputBlur = function onInputBlur(event) {
setFocusedState(false);
if (props.onBlur) {
setTimeout(function () {
var currentValue = inputRef.current ? inputRef.current.value : undefined;
props.onBlur({
originalEvent: event.originalEvent,
value: currentValue,
stopPropagation: function stopPropagation() {
event.originalEvent.stopPropagation();
},
preventDefault: function preventDefault() {
event.originalEvent.preventDefault();
},
target: {
name: props.name,
id: props.id,
value: currentValue
}
});
}, 200);
}
};
var onOptionSelect = function onOptionSelect(event, option) {
var isHide = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
selectItem({
originalEvent: event,
option: option
});
if (isHide) {
hide();
DomHandler.focus(focusInputRef.current);
}
};
var onPanelClick = function onPanelClick(event) {
OverlayService.emit('overlay-click', {
originalEvent: event,
target: elementRef.current
});
};
var onInputKeyDown = function onInputKeyDown(event) {
if (props.disabled) {
event.preventDefault();
return;
}
var code = DomHandler.isAndroid() ? event.key : event.code;
switch (code) {
case 'ArrowDown':
onArrowDownKey(event);
break;
case 'ArrowUp':
onArrowUpKey(event);
break;
case 'ArrowLeft':
case 'ArrowRight':
onArrowLeftKey(event, props.editable);
break;
case 'Home':
onHomeKey(event);
break;
case 'End':
onEndKey(event);
break;
case 'PageDown':
onPageDownKey(event);
break;
case 'PageUp':
onPageUpKey(event);
break;
case 'Space':
onSpaceKey(event, props.editable);
break;
case 'NumpadEnter':
case 'Enter':
onEnterKey(event);
break;
case 'Escape':
onEscapeKey(event);
break;
case 'Tab':
onTabKey(event);
break;
case 'Backspace':
onBackspaceKey(event, props.editable);
break;
case 'ShiftLeft':
case 'ShiftRight':
//NOOP
break;
default:
var metaKey = event.metaKey || event.ctrlKey || event.altKey;
// Only handle printable characters when no meta keys are pressed
if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
!overlayVisibleState && !props.editable && show();
!props.editable && searchOptions(event, event.key);
}
break;
}
clickedRef.current = false;
};
var onFilterInputKeyDown = function onFilterInputKeyDown(event) {
switch (event.code) {
case 'ArrowDown':
onArrowDownKey(event);
break;
case 'ArrowUp':
onArrowUpKey(event);
break;
case 'ArrowLeft':
case 'ArrowRight':
onArrowLeftKey(event, true);
break;
case 'Enter':
case 'NumpadEnter':
onEnterKey(event);
event.preventDefault();
break;
case 'Escape':
onEscapeKey(event);
break;
}
};
var hasFocusableElements = function hasFocusableElements() {
return DomHandler.getFocusableElements(overlayRef.current, ':not([data-p-hidden-focusable="true"])').length > 0;
};
var isOptionMatched = function isOptionMatched(option) {
var _getOptionLabel;
return isValidOption(option) && ((_getOptionLabel = getOptionLabel(option)) === null || _getOptionLabel === void 0 ? void 0 : _getOptionLabel.toLocaleLowerCase(props.filterLocale).startsWith(searchValue.current.toLocaleLowerCase(props.filterLocale)));
};
var isValidOption = function isValidOption(option) {
return ObjectUtils.isNotEmpty(option) && !(isOptionDisabled(option) || isOptionGroup(option));
};
var hasSelectedOption = function hasSelectedOption() {
return ObjectUtils.isNotEmpty(props.value);
};
var isValidSelectedOption = function isValidSelectedOption(option) {
return isValidOption(option) && isSelected(option);
};
var findSelectedOptionIndex = function findSelectedOptionIndex() {
return hasSelectedOption ? visibleOptions.findIndex(function (option) {
return isValidSelectedOption(option);
}) : -1;
};
var findFirstFocusedOptionIndex = function findFirstFocusedOptionIndex() {
var selectedIndex = findSelectedOptionIndex();
return selectedIndex < 0 ? findFirstOptionIndex() : selectedIndex;
};
var searchOptions = function searchOptions(event, _char) {
searchValue.current = (searchValue.current || '') + _char;
var optionIndex = -1;
var matched = false;
if (ObjectUtils.isNotEmpty(searchValue.current)) {
if (focusedOptionIndex !== -1) {
optionIndex = visibleOptions.slice(focusedOptionIndex).findIndex(function (option) {
return isOptionMatched(option);
});
optionIndex = optionIndex === -1 ? visibleOptions.slice(0, focusedOptionIndex).findIndex(function (option) {
return isOptionMatched(option);
}) : optionIndex + focusedOptionIndex;
} else {
optionIndex = visibleOptions.findIndex(function (option) {
return isOptionMatched(option);
});
}
if (optionIndex !== -1) {
matched = true;
}
if (optionIndex === -1 && focusedOptionIndex === -1) {
optionIndex = findFirstFocusedOptionIndex();
}
if (optionIndex !== -1) {
changeFocusedOptionIndex(event, optionIndex);
}
}
if (searchTimeout.current) {
clearTimeout(searchTimeout.current);
}
searchTimeout.current = setTimeout(function () {
searchValue.current = '';
searchTimeout.current = null;
}, 500);
return matched;
};
var findLastFocusedOptionIndex = function findLastFocusedOptionIndex() {
var selectedIndex = findSelectedOptionIndex();
return selectedIndex < 0 ? findLastOptionIndex() : selectedIndex;
};
var findFirstOptionIndex = function findFirstOptionIndex() {
return visibleOptions.findIndex(function (option) {
return isValidOption(option);
});
};
var findLastOptionIndex = function findLastOptionIndex() {
return ObjectUtils.findLastIndex(visibleOptions, function (option) {
return isValidOption(option);
});
};
var findNextOptionIndex = function findNextOptionIndex(index) {
var matchedOptionIndex = index < visibleOptions.length - 1 ? visibleOptions.slice(index + 1).findIndex(function (option) {
return isValidOption(option);
}) : -1;
return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
};
var findPrevOptionIndex = function findPrevOptionIndex(index) {
var matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(visibleOptions.slice(0, index), function (option) {
return isValidOption(option);
}) : -1;
return matchedOptionIndex > -1 ? matchedOptionIndex : index;
};
var changeFocusedOptionIndex = function changeFocusedOptionIndex(event, index) {
if (focusedOptionIndex !== index) {
setFocusedOptionIndex(index);
focusOnItem(index);
if (props.selectOnFocus) {
onOptionSelect(event, visibleOptions[index], false);
}
}
};
var focusOnItem = function focusOnItem(index) {
var focusedItem = DomHandler.findSingle(overlayRef.current, "li[id=\"dropdownItem_".concat(index, "\"]"));
focusedItem && focusedItem.focus();
};
var onArrowDownKey = function onArrowDownKey(event) {
if (!overlayVisibleState) {
show();
props.editable && changeFocusedOptionIndex(event, findSelectedOptionIndex());
} else {
var optionIndex = focusedOptionIndex !== -1 ? findNextOptionIndex(focusedOptionIndex) : clickedRef.current ? findFirstOptionIndex() : findFirstFocusedOptionIndex();
changeFocusedOptionIndex(event, optionIndex);
}
event.preventDefault();
};
var onArrowUpKey = function onArrowUpKey(event) {
var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
if (event.altKey && !pressedInInputText) {
if (focusedOptionIndex !== -1) {
onOptionSelect(event, visibleOptions[focusedOptionIndex]);
}
state.overlayVisible && hide();
event.preventDefault();
} else {
var optionIndex = focusedOptionIndex !== -1 ? findPrevOptionIndex(focusedOptionIndex) : clickedRef.current ? findLastOptionIndex() : findLastFocusedOptionIndex();
changeFocusedOptionIndex(event, optionIndex);
!overlayVisibleState && show();
event.preventDefault();
}
};
var onArrowLeftKey = function onArrowLeftKey(event) {
var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
pressedInInputText && setFocusedOptionIndex(-1);
};
var onHomeKey = function onHomeKey(event) {
var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
if (pressedInInputText) {
event.currentTarget.setSelectionRange(0, 0);
setFocusedOptionIndex(-1);
} else {
changeFocusedOptionIndex(event, findFirstOptionIndex());
!overlayVisibleState && show();
}
event.preventDefault();
};
var onEndKey = function onEndKey(event) {
var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
if (pressedInInputText) {
var target = event.currentTarget;
var len = target.value.length;
target.setSelectionRange(len, len);
setFocusedOptionIndex(-1);
} else {
changeFocusedOptionIndex(event, findLastOptionIndex());
!overlayVisibleState && show();
}
event.preventDefault();
};
var onPageUpKey = function onPageUpKey(event) {
event.preventDefault();
};
var onPageDownKey = function onPageDownKey(event) {
event.preventDefault();
};
var onSpaceKey = function onSpaceKey(event) {
var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
!pressedInInputText && onEnterKey(event);
};
var onEnterKey = function onEnterKey(event) {
event.preventDefault();
if (!overlayVisibleState) {
setFocusedOptionIndex(-1);
onArrowDownKey(event);
} else {
if (focusedOptionIndex === -1) {
return;
}
var focusedOption = visibleOptions[focusedOptionIndex];
var optionValue = getOptionValue(focusedOption);
if (optionValue == null || optionValue == undefined) {
hide();
resetFilter();
updateEditableLabel(selectedOption);
return;
}
onOptionSelect(event, focusedOption);
}
};
var onEscapeKey = function onEscapeKey(event) {
overlayVisibleState && hide();
event.preventDefault();
};
var onTabKey = function onTabKey(event) {
var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
if (!pressedInInputText) {
if (overlayVisibleState && !hasFocusableElements()) {
DomHandler.focus(firstHiddenFocusableElementOnOverlay.current);
event.preventDefault();
} else {
if (focusedOptionIndex !== -1) {
onOptionSelect(event, visibleOptions[focusedOptionIndex]);
}
overlayVisibleState && hide();
}
}
};
var onBackspaceKey = function onBackspaceKey(event) {
var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
if (event && pressedInInputText) {
!overlayVisibleState && show();
}
};
var findInArray = function findInArray(visibleOptions, searchText) {
if (!searchText || !(visibleOptions !== null && visibleOptions !== void 0 && visibleOptions.length)) return -1;
var normalizedSearch = searchText.toLocaleLowerCase();
var exactMatch = visibleOptions.findIndex(function (item) {
return getOptionLabel(item).toLocaleLowerCase() === normalizedSearch;
});
if (exactMatch !== -1) return exactMatch;
return visibleOptions.findIndex(function (item) {
return getOptionLabel(item).toLocaleLowerCase().startsWith(normalizedSearch);
});
};
var onEditableInputChange = function onEditableInputChange(event) {
!overlayVisibleState && show();
var searchIndex = null;
if (event.target.value && visibleOptions) {
searchIndex = findInArray(visibleOptions, event.target.value);
}
setFocusedOptionIndex(searchIndex);
if (props.onChange) {
props.onChange({
originalEvent: event.originalEvent,
value: event.target.value,
stopPropagation: function stopPropagation() {
event.originalEvent.stopPropagation();
},
preventDefault: function preventDefault() {
event.originalEvent.preventDefault();
},
target: {
name: props.name,
id: props.id,
value: event.target.value
}
});
}
};
var onEditableInputFocus = function onEditableInputFocus(event) {
setFocusedState(true);
hide();
props.onFocus && props.onFocus(event);
};
var onOptionClick = function onOptionClick(event) {
var option = event.option;
if (!option.disabled) {
selectItem(event);
DomHandler.focus(focusInputRef.current);
}
hide();
};
var onFilterInputChange = function onFilterInputChange(event) {
var filter = event.target.value;
setFilterState(filter);
if (props.onFilter) {
props.onFilter({
originalEvent: event,
filter: filter
});
}
};
var onFilterClearIconClick = function onFilterClearIconClick(callback) {
resetFilter(callback);
};
var resetFilter = function resetFilter(callback) {
setFilterState('');
props.onFilter && props.onFilter({
filter: ''
});
callback && callback();
};
var clear = function clear(event) {
if (props.onChange) {
props.onChange({
originalEvent: event,
value: undefined,
stopPropagation: function stopPropagation() {
event === null || event === void 0 || event.stopPropagation();
},
preventDefault: function preventDefault() {
event === null || event === void 0 || event.preventDefault();
},
target: {
name: props.name,
id: props.id,
value: undefined
}
});
}
if (props.filter) {
resetFilter();
}
updateEditableLabel();
setFocusedOptionIndex(-1);
};
var selectItem = function selectItem(event) {
if (selectedOption !== event.option) {
updateEditableLabel(event.option);
setFocusedOptionIndex(-1);
var optionValue = getOptionValue(event.option);
var selectedOptionIndex = findOptionIndexInList(event.option, visibleOptions);
if (props.onChange) {
props.onChange({
originalEvent: event.originalEvent,
value: optionValue,
stopPropagation: function stopPropagation() {
event.originalEvent.stopPropagation();
},
preventDefault: function preventDefault() {
event.originalEvent.preventDefault();
},
target: {
name: props.name,
id: props.id,
value: optionValue
}
});
}
changeFocusedOptionIndex(event.originalEvent, selectedOptionIndex);
}
};
var getSelectedOptionIndex = function getSelectedOptionIndex(options) {
options = options || visibleOptions;
if (options) {
if (props.optionGroupLabel) {
for (var i = 0; i < options.length; i++) {
var selectedOptionIndex = findOptionIndexInList(props.value, getOptionGroupChildren(options[i]));
if (selectedOptionIndex !== -1) {
return {
group: i,
option: selectedOptionIndex
};
}
}
} else {
return findOptionIndexInList(props.value, options);
}
}
return -1;
};
var equalityKey = function equalityKey() {
return props.optionValue ? null : props.dataKey;
};
var findOptionIndexInList = function findOptionIndexInList(value, list) {
var key = equalityKey();
return list.findIndex(function (item) {
return ObjectUtils.equals(value, getOptionValue(item), key);
});
};
var isSelected = function isSelected(option) {
return ObjectUtils.equals(props.value, getOptionValue(option), equalityKey());
};
var show = function show() {
setFocusedOptionIndex(focusedOptionIndex !== -1 ? focusedOptionIndex : props.autoOptionFocus ? findFirstFocusedOptionIndex() : props.editable ? -1 : findSelectedOptionIndex());
setOverlayVisibleState(true);
};
var hide = function hide() {
setOverlayVisibleState(false);
clickedRef.current = false;
};
var onFocus = function onFocus() {
if (props.editable && !overlayVisibleState && clickedRef.current === false) {
DomHandler.focus(inputRef.current);
}
};
var onOverlayEnter = function onOverlayEnter(callback) {
ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, context && context.zIndex.overlay || PrimeReact.zIndex.overlay);
DomHandler.addStyles(overlayRef.current, {
position: 'absolute',
top: '0',
left: '0'
});
alignOverlay();
callback && callback();
};
var onOverlayEntered = function onOverlayEntered(callback) {
callback && callback();
bindOverlayListener();
props.onShow && props.onShow();
};
var onOverlayExit = function onOverlayExit() {
unbindOverlayListener();
};
var onOverlayExited = function onOverlayExited() {
if (props.filter && props.resetFilterOnHide) {
resetFilter();
}
ZIndexUtils.clear(overlayRef.current);
props.onHide && props.onHide();
};
var alignOverlay = function alignOverlay() {
DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || context && context.appendTo || PrimeReact.appendTo);
};
var scrollInView = function scrollInView() {
var focusedItem = DomHandler.findSingle(overlayRef.current, 'li[data-p-focused="true"]');
if (focusedItem && focusedItem.scrollIntoView) {
focusedItem.scrollIntoView({
block: 'nearest',
inline: 'nearest'
});
} else {
var highlightItem = DomHandler.findSingle(overlayRef.current, 'li[data-p-highlight="true"]');
if (highlightItem && highlightItem.scrollIntoView) {
highlightItem.scrollIntoView({
block: 'nearest',
inline: 'nearest'
});
}
}
};
var updateEditableLabel = function updateEditableLabel(option) {
if (inputRef.current) {
inputRef.current.value = option ? getOptionLabel(option) : props.value || '';
// #1413 NVDA screenreader
if (focusInputRef.current) {
focusInputRef.current.value = inputRef.current.value;
}
}
};
var getOptionLabel = function getOptionLabel(option) {
if (ObjectUtils.isScalar(option)) {
return "".concat(option);
}
var optionLabel = props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option['label'];
return "".concat(optionLabel);
};
var getOptionValue = function getOptionValue(option) {
if (props.useOptionAsValue) {
return option;
}
var optionValue = props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option ? option['value'] : ObjectUtils.resolveFieldData(option, 'value');
return props.optionValue || ObjectUtils.isNotEmpty(optionValue) ? optionValue : option;
};
var getOptionRenderKey = function getOptionRenderKey(option) {
return props.dataKey ? ObjectUtils.resolveFieldData(option, props.dataKey) : getOptionLabel(option);
};
var isOptionGroup = function isOptionGroup(option) {
return props.optionGroupLabel && option.group;
};
var isOptionDisabled = function isOptionDisabled(option) {
if (props.optionDisabled) {
return ObjectUtils.isFunction(props.optionDisabled) ? props.optionDisabled(option) : ObjectUtils.resolveFieldData(option, props.optionDisabled);
}
return option && option.disabled !== undefined ? option.disabled : false;
};
var getOptionGroupRenderKey = function getOptionGroupRenderKey(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
};
var getOptionGroupLabel = function getOptionGroupLabel(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
};
var getOptionGroupChildren = function getOptionGroupChildren(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupChildren);
};
var updateInputField = function updateInputField() {
if (props.editable && inputRef.current) {
var label = selectedOption ? getOptionLabel(selectedOption) : null;
var value = label || props.value || '';
inputRef.current.value = value;
// #1413 NVDA screenreader
if (focusInputRef.current) {
focusInputRef.current.value = value;
}
}
};
var getSelectedOption = function getSelectedOption() {
var index = getSelectedOptionIndex(props.options);
return index !== -1 ? props.optionGroupLabel ? getOptionGroupChildren(props.options[index.group])[index.option] : props.options[index] : null;
};
React.useImperativeHandle(ref, function () {
return {
props: props,
show: show,
hide: hide,
clear: clear,
focus: function focus() {
return DomHandler.focus(focusInputRef.current);
},
getElement: function getElement() {
return elementRef.current;
},
getOverlay: function getOverlay() {
return overlayRef.current;
},
getInput: function getInput() {
return inputRef.current;
},
getFocusInput: function getFocusInput() {
return focusInputRef.current;
},
getVirtualScroller: function getVirtualScroller() {
return virtualScrollerRef.current;
}
};
});
React.useEffect(function () {
ObjectUtils.combinedRefs(inputRef, props.inputRef);
ObjectUtils.combinedRefs(focusInputRef, props.focusInputRef);
}, [inputRef, props.inputRef, focusInputRef, props.focusInputRef]);
useMountEffect(function () {
if (props.autoFocus) {
DomHandler.focus(focusInputRef.current, props.autoFocus);
}
alignOverlay();
});
useUpdateEffect(function () {
if (overlayVisibleState && (props.value || focusedOptionIndex >= 0)) {
scrollInView();
}
}, [overlayVisibleState, props.value, focusedOptionIndex]);
useUpdateEffect(function () {
if (overlayVisibleState && filterState && props.filter) {
alignOverlay();
}
}, [overlayVisibleState, filterState, props.filter]);
useUpdateEffect(function () {
virtualScrollerRef.current && virtualScrollerRef.current.scrollInView(0);
}, [filterState]);
useUpdateEffect(function () {
updateInputField();
if (inputRef.current) {
inputRef.current.selectedIndex = 1;
}
});
useUnmountEffect(function () {
ZIndexUtils.clear(overlayRef.current);
});
var createHiddenSelect = function createHiddenSelect() {
var option = {
value: '',
label: props.placeholder
};
if (selectedOption) {
var optionValue = getOptionValue(selectedOption);
option = {
value: _typeof(optionValue) === 'object' ? props.options.findIndex(function (o) {
return o === optionValue;
}) : optionValue,
label: getOptionLabel(selectedOption)
};
}
var hiddenSelectedMessageProps = mergeProps({
className: 'p-hidden-accessible p-dropdown-hidden-select'
}, ptm('hiddenSelectedMessage'));
var selectProps = mergeProps({
ref: inputRef,
required: props.required,
defaultValue: option.value,
name: props.name,
tabIndex: -1
}, ptm('select'));
var optionProps = mergeProps({
value: option.value
}, ptm('option'));
return /*#__PURE__*/React.createElement("div", hiddenSelectedMessageProps, /*#__PURE__*/React.createElement("select", selectProps, /*#__PURE__*/React.createElement("option", optionProps, option.label)));
};
var createKeyboardHelper = function createKeyboardHelper() {
var value = ObjectUtils.isNotEmpty(selectedOption) ? getOptionLabel(selectedOption) : null;
if (props.editable) {
value = value || props.value || '';
}
var hiddenSelectedMessageProps = mergeProps({
className: 'p-hidden-accessible'
}, ptm('hiddenSelectedMessage'));
var inputProps = mergeProps(_objectSpread$1n({
ref: focusInputRef,
id: props.inputId,
defaultValue: value,
type: 'text',
readOnly: true,
'aria-haspopup': 'listbox',
onFocus: onInputFocus,
onBlur: onInputBlur,
onKeyDown: onInputKeyDown,
disabled: props.disabled,
tabIndex: !props.disabled ? props.tabIndex || 0 : -1
}, ariaProps), ptm('input'));
return /*#__PURE__*/React.createElement("div", hiddenSelectedMessageProps, /*#__PURE__*/React.createElement("input", inputProps));
};
var createLabel = function createLabel() {
var label = ObjectUtils.isNotEmpty(selectedOption) ? getOptionLabel(selectedOption) : null;
if (props.editable) {
var value = label || props.value || '';
var _inputProps = mergeProps(_objectSpread$1n({
ref: inputRef,
type: 'text',
defaultValue: value,
className: cx('input', {
label: label
}),
disabled: props.disabled,
placeholder: props.placeholder,
maxLength: props.maxLength,
onInput: onEditableInputChange,
onFocus: onEditableInputFocus,
onKeyDown: onInputKeyDown,
onBlur: onInputBlur,
tabIndex: !props.disabled ? props.tabIndex || 0 : -1,
'aria-haspopup': 'listbox'
}, ariaProps), ptm('input'));
return /*#__PURE__*/React.createElement("input", _inputProps);
}
var content = props.valueTemplate ? ObjectUtils.getJSXElement(props.valueTemplate, selectedOption, props) : label || props.placeholder || props.emptyMessage || /*#__PURE__*/React.createElement(React.Fragment, null, "\xA0");
var inputProps = mergeProps({
ref: inputRef,
className: cx('input', {
label: label
}),
tabIndex: '-1'
}, ptm('input'));
return /*#__PURE__*/React.createElement("span", inputProps, content);
};
var onClearIconKeyDown = function onClearIconKeyDown(event) {
if (event.key === 'Enter' || event.code === 'Space') {
clear(event);
event.preventDefault();
}
};
var createClearIcon = function createClearIcon() {
if (props.value != null && props.showClear && !props.disabled && !ObjectUtils.isEmpty(props.options)) {
var clearIconProps = mergeProps({
className: cx('clearIcon'),
onPointerUp: clear,
tabIndex: props.editable ? -1 : props.tabIndex || '0',
onKeyDown: onClearIconKeyDown,
'aria-label': localeOption('clear')
}, ptm('clearIcon'));
var icon = props.clearIcon || /*#__PURE__*/React.createElement(TimesIcon, clearIconProps);
return IconUtils.getJSXIcon(icon, _objectSpread$1n({}, clearIconProps), {
props: props
});
}
return null;
};
var createLoadingIcon = function createLoadingIcon() {
var loadingIconProps = mergeProps({
className: cx('loadingIcon'),
'data-pr-overlay-visible': overlayVisibleState
}, ptm('loadingIcon'));
var icon = props.loadingIcon || /*#__PURE__*/React.createElement(SpinnerIcon, {
spin: true
});
var loadingIcon = IconUtils.getJSXIcon(icon, _objectSpread$1n({}, loadingIconProps), {
props: props
});
var ariaLabel = props.placeholder || props.ariaLabel;
var loadingButtonProps = mergeProps({
className: cx('trigger'),
role: 'button',
'aria-haspopup': 'listbox',
'aria-expanded': overlayVisibleState,
'aria-label': ariaLabel
}, ptm('trigger'));
return /*#__PURE__*/React.createElement("div", loadingButtonProps, loadingIcon);
};
var createDropdownIcon = function createDropdownIcon() {
var dropdownIconProps = mergeProps({
className: cx('dropdownIcon'),
'data-pr-overlay-visible': overlayVisibleState
}, ptm('dropdownIcon'));
var icon = !overlayVisibleState ? props.dropdownIcon || /*#__PURE__*/React.createElement(ChevronDownIcon, dropdownIconProps) : props.collapseIcon || /*#__PURE__*/React.createElement(ChevronUpIcon, dropdownIconProps);
var dropdownIcon = IconUtils.getJSXIcon(icon, _objectSpread$1n({}, dropdownIconProps), {
props: props
});
var ariaLabel = props.placeholder || props.ariaLabel;
var triggerProps = mergeProps({
className: cx('trigger'),
role: 'button',
'aria-haspopup': 'listbox',
'aria-expanded': overlayVisibleState,
'aria-label': ariaLabel
}, ptm('trigger'));
return /*#__PURE__*/React.createElement("div", triggerProps, dropdownIcon);
};
var visibleOptions = getVisibleOptions();
var selectedOption = getSelectedOption();
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = DropdownBase.getOtherProps(props);
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var hiddenSelect = createHiddenSelect();
var keyboardHelper = createKeyboardHelper();
var labelElement = createLabel();
var dropdownIcon = props.loading ? createLoadingIcon() : createDropdownIcon();
var clearIcon = createClearIcon();
var rootProps = mergeProps({
id: props.id,
ref: elementRef,
className: classNames(props.className, cx('root', {
context: context,
focusedState: focusedState,
overlayVisibleState: overlayVisibleState
})),
style: props.style,
onClick: function onClick(e) {
return _onClick(e);
},
onMouseDown: props.onMouseDown,
onContextMenu: props.onContextMenu,
onFocus: onFocus,
'data-p-disabled': props.disabled,
'data-p-focus': focusedState,
'aria-activedescendant': focusedState ? "dropdownItem_".concat(focusedOptionIndex) : undefined
}, otherProps, ptm('root'));
var firstHiddenFocusableElementProps = mergeProps({
ref: firstHiddenFocusableElementOnOverlay,
role: 'presentation',
className: 'p-hidden-accessible p-hidden-focusable',
tabIndex: '0',
onFocus: onFirstHiddenFocus,
'data-p-hidden-accessible': true,
'data-p-hidden-focusable': true
}, ptm('hiddenFirstFocusableEl'));
var lastHiddenFocusableElementProps = mergeProps({
ref: lastHiddenFocusableElementOnOverlay,
role: 'presentation',
className: 'p-hidden-accessible p-hidden-focusable',
tabIndex: '0',
onFocus: onLastHiddenFocus,
'data-p-hidden-accessible': true,
'data-p-hidden-focusable': true
}, ptm('hiddenLastFocusableEl'));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, keyboardHelper, hiddenSelect, labelElement, clearIcon, dropdownIcon, /*#__PURE__*/React.createElement(DropdownPanel, _extends({
hostName: "Dropdown",
ref: overlayRef,
visibleOptions: visibleOptions,
virtualScrollerRef: virtualScrollerRef
}, props, {
appendTo: appendTo,
cx: cx,
filterValue: filterValue,
focusedOptionIndex: focusedOptionIndex,
getOptionGroupChildren: getOptionGroupChildren,
getOptionGroupLabel: getOptionGroupLabel,
getOptionGroupRenderKey: getOptionGroupRenderKey,
getOptionLabel: getOptionLabel,
getOptionRenderKey: getOptionRenderKey,
getSelectedOptionIndex: getSelectedOptionIndex,
hasFilter: hasFilter,
"in": overlayVisibleState,
isOptionDisabled: isOptionDisabled,
isSelected: isSelected,
onOverlayHide: hide,
onClick: onPanelClick,
onEnter: onOverlayEnter,
onEntered: onOverlayEntered,
onExit: onOverlayExit,
onExited: onOverlayExited,
onFilterClearIconClick: onFilterClearIconClick,
onFilterInputChange: onFilterInputChange,
onFilterInputKeyDown: onFilterInputKeyDown,
onOptionClick: onOptionClick,
onInputKeyDown: onInputKeyDown,
ptm: ptm,
resetFilter: resetFilter,
changeFocusedOptionIndex: changeFocusedOptionIndex,
firstFocusableElement: /*#__PURE__*/React.createElement("span", firstHiddenFocusableElementProps),
lastFocusableElement: /*#__PURE__*/React.createElement("span", lastHiddenFocusableElementProps),
sx: sx
}))), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip,
pt: ptm('tooltip')
}, props.tooltipOptions)));
}));
Dropdown.displayName = 'Dropdown';
var RowsPerPageDropdown = /*#__PURE__*/React.memo(function (inProps) {
useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = RowsPerPageDropdownBase.getProps(inProps, context);
var hasOptions = props.options && props.options.length > 0;
var options = hasOptions ? props.options.map(function (opt) {
return {
label: String(opt),
value: opt
};
}) : [];
var placeholderValue = localeOption('choose');
var ariaLabelValue = ariaLabel('jumpToPageDropdownLabel');
var element = hasOptions ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, {
value: props.value,
options: options,
onChange: props.onChange,
appendTo: props.appendTo,
disabled: props.disabled,
placeholder: placeholderValue,
"aria-label": ariaLabelValue,
pt: props.ptm('RPPDropdown'),
unstyled: props.unstyled,
__parentMetadata: {
parent: props.metaData
}
})) : null;
if (props.template) {
var defaultOptions = {
value: props.value,
options: options,
onChange: props.onChange,
appendTo: props.appendTo,
currentPage: props.page,
totalPages: props.pageCount,
totalRecords: props.totalRecords,
disabled: props.disabled,
ariaLabel: ariaLabelValue,
element: element,
props: props
};
return ObjectUtils.getJSXElement(props.template, defaultOptions);
}
return element;
});
RowsPerPageDropdown.displayName = 'RowsPerPageDropdown';
function ownKeys$1m(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$1m(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1m(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1m(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Paginator = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = PaginatorBase.getProps(inProps, context);
var metaData = _objectSpread$1m({
props: props
}, props.__parentMetadata);
var _PaginatorBase$setMet = PaginatorBase.setMetaData(metaData),
ptm = _PaginatorBase$setMet.ptm,
cx = _PaginatorBase$setMet.cx,
isUnstyled = _PaginatorBase$setMet.isUnstyled;
useHandleStyle(PaginatorBase.css.styles, isUnstyled, {
name: 'paginator'
});
var elementRef = React.useRef(null);
var page = Math.floor(props.first / props.rows);
var totalPages = Math.ceil(props.totalRecords / props.rows);
var isFirstPage = page === 0;
var isLastPage = page === totalPages - 1;
var isEmpty = totalPages === 0;
var calculatePageLinkBoundaries = function calculatePageLinkBoundaries() {
var numberOfPages = totalPages;
var visiblePages = Math.min(props.pageLinkSize, numberOfPages);
//calculate range, keep current in middle if necessary
var start = Math.max(0, Math.ceil(page - visiblePages / 2));
var end = Math.min(numberOfPages - 1, start + visiblePages - 1);
//check when approaching to last page
var delta = props.pageLinkSize - (end - start + 1);
start = Math.max(0, start - delta);
return [start, end];
};
var updatePageLinks = function updatePageLinks() {
var pageLinks = [];
var boundaries = calculatePageLinkBoundaries();
var start = boundaries[0];
var end = boundaries[1];
for (var i = start; i <= end; i++) {
pageLinks.push(i + 1);
}
return pageLinks;
};
var changePage = function changePage(first, rows) {
var pc = totalPages;
var p = Math.floor(first / rows);
if (p >= 0 && p < pc) {
var newPageState = {
first: first,
rows: rows,
page: p,
totalPages: pc
};
if (props.onPageChange) {
props.onPageChange(newPageState);
}
}
};
var changePageToFirst = function changePageToFirst(event) {
changePage(0, props.rows);
event.preventDefault();
};
var changePageToPrev = function changePageToPrev(event) {
changePage(props.first - props.rows, props.rows);
event.preventDefault();
};
var onPageLinkClick = function onPageLinkClick(event) {
changePage((event.value - 1) * props.rows, props.rows);
};
var changePageToNext = function changePageToNext(event) {
changePage(props.first + props.rows, props.rows);
event.preventDefault();
};
var changePageToLast = function changePageToLast(event) {
changePage((totalPages - 1) * props.rows, props.rows);
event.preventDefault();
};
var onRowsChange = function onRowsChange(event) {
var rows = event.value;
changePage(0, rows);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
useUpdateEffect(function () {
if (page > 0 && props.first >= props.totalRecords) {
changePage((totalPages - 1) * props.rows, props.rows);
}
}, [props.totalRecords]);
var createElement = function createElement(key, template) {
var element;
switch (key) {
case 'FirstPageLink':
element = /*#__PURE__*/React.createElement(FirstPageLink, {
hostName: "Paginator",
key: key,
page: page,
totalPages: totalPages,
totalRecords: props.totalRecords,
rows: props.rows,
onClick: changePageToFirst,
disabled: isFirstPage || isEmpty,
template: template,
firstPageLinkIcon: props.firstPageLinkIcon,
ptm: ptm,
cx: cx
});
break;
case 'PrevPageLink':
element = /*#__PURE__*/React.createElement(PrevPageLink, {
hostName: "Paginator",
key: key,
page: page,
totalPages: totalPages,
totalRecords: props.totalRecords,
rows: props.rows,
onClick: changePageToPrev,
disabled: isFirstPage || isEmpty,
template: template,
prevPageLinkIcon: props.prevPageLinkIcon,
ptm: ptm,
cx: cx
});
break;
case 'NextPageLink':
element = /*#__PURE__*/React.createElement(NextPageLink, {
hostName: "Paginator",
key: key,
page: page,
totalPages: totalPages,
totalRecords: props.totalRecords,
rows: props.rows,
onClick: changePageToNext,
disabled: isLastPage || isEmpty,
template: template,
nextPageLinkIcon: props.nextPageLinkIcon,
ptm: ptm,
cx: cx
});
break;
case 'LastPageLink':
element = /*#__PURE__*/React.createElement(LastPageLink, {
hostName: "Paginator",
key: key,
page: page,
totalPages: totalPages,
totalRecords: props.totalRecords,
rows: props.rows,
onClick: changePageToLast,
disabled: isLastPage || isEmpty,
template: template,
lastPageLinkIcon: props.lastPageLinkIcon,
ptm: ptm,
cx: cx
});
break;
case 'PageLinks':
element = /*#__PURE__*/React.createElement(PageLinks, {
hostName: "Paginator",
key: key,
page: page,
totalPages: totalPages,
totalRecords: props.totalRecords,
rows: props.rows,
value: updatePageLinks(),
onClick: onPageLinkClick,
template: template,
ptm: ptm,
cx: cx
});
break;
case 'RowsPerPageDropdown':
element = /*#__PURE__*/React.createElement(RowsPerPageDropdown, {
hostName: "Paginator",
key: key,
value: props.rows,
page: page,
totalPages: totalPages,
totalRecords: props.totalRecords,
options: props.rowsPerPageOptions,
onChange: onRowsChange,
appendTo: props.dropdownAppendTo,
template: template,
disabled: isEmpty,
unstyled: props.unstyled,
ptm: ptm,
cx: cx,
metaData: metaData
});
break;
case 'CurrentPageReport':
element = /*#__PURE__*/React.createElement(CurrentPageReport, {
hostName: "Paginator",
reportTemplate: props.currentPageReportTemplate,
key: key,
page: page,
totalPages: totalPages,
totalRecords: props.totalRecords,
rows: props.rows,
first: props.first,
template: template,
ptm: ptm
});
break;
case 'JumpToPageInput':
element = /*#__PURE__*/React.createElement(JumpToPageInput, {
hostName: "Paginator",
key: key,
rows: props.rows,
page: page,
totalPages: totalPages,
onChange: changePage,
disabled: isEmpty,
template: template,
ptm: ptm,
unstyled: props.unstyled,
metaData: metaData
});
break;
default:
element = null;
break;
}
return element;
};
var createElements = function createElements() {
var template = props.template;
if (template) {
if (_typeof(template) === 'object') {
return template.layout ? template.layout.split(' ').map(function (value) {
var key = value.trim();
return createElement(key, template[key]);
}) : Object.entries(template).map(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
key = _ref2[0],
_template = _ref2[1];
return createElement(key, _template);
});
}
return template.split(' ').map(function (value) {
return createElement(value.trim());
});
}
return null;
};
if (!props.alwaysShow && totalPages <= 1) {
return null;
}
var leftContent = ObjectUtils.getJSXElement(props.leftContent, props);
var rightContent = ObjectUtils.getJSXElement(props.rightContent, props);
var elements = createElements();
var leftProps = mergeProps({
className: cx('left')
}, ptm('left'));
var leftElement = leftContent && /*#__PURE__*/React.createElement("div", leftProps, leftContent);
var endProps = mergeProps({
className: cx('end')
}, ptm('end'));
var rightElement = rightContent && /*#__PURE__*/React.createElement("div", endProps, rightContent);
var rootProps = mergeProps({
ref: elementRef,
className: classNames(props.className, cx('root')),
style: props.style
}, PaginatorBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("div", rootProps, leftElement, elements, rightElement);
}));
Paginator.displayName = 'Paginator';
function ownKeys$1l(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$1l(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1l(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1l(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var styles$I = "\n@layer primereact {\n .p-datatable {\n position: relative;\n }\n\n .p-datatable > .p-datatable-wrapper {\n overflow: auto;\n }\n\n .p-datatable-table {\n border-spacing: 0px;\n width: 100%;\n }\n\n .p-datatable .p-sortable-disabled {\n cursor: auto;\n }\n\n .p-datatable .p-sortable-column {\n cursor: pointer;\n user-select: none;\n }\n\n .p-datatable .p-sortable-column .p-column-title,\n .p-datatable .p-sortable-column .p-sortable-column-icon,\n .p-datatable .p-sortable-column .p-sortable-column-badge {\n vertical-align: middle;\n }\n\n .p-datatable .p-sortable-column .p-sortable-column-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n .p-datatable-selectable .p-selectable-row,\n .p-datatable-selectable-cell .p-selectable-cell {\n cursor: pointer;\n }\n\n .p-datatable-drag-selection-helper {\n position: absolute;\n z-index: 99999999;\n }\n\n /* Scrollable */\n .p-datatable-scrollable > .p-datatable-wrapper {\n position: relative;\n }\n\n .p-datatable-scrollable-table > .p-datatable-thead {\n position: sticky;\n top: 0;\n z-index: 2;\n }\n\n .p-datatable.p-datatable-gridlines .p-datatable-scrollable-table > .p-datatable-thead {\n top: -1px;\n }\n\n .p-datatable-scrollable-table > .p-datatable-frozen-tbody {\n position: sticky;\n z-index: 1;\n }\n\n .p-datatable-scrollable-table > .p-datatable-tfoot {\n position: sticky;\n bottom: 0;\n z-index: 1;\n }\n\n .p-datatable-scrollable .p-frozen-column {\n position: sticky;\n background: inherit;\n }\n\n .p-datatable-scrollable th.p-frozen-column {\n z-index: 1;\n }\n\n .p-datatable-flex-scrollable {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .p-datatable-flex-scrollable > .p-datatable-wrapper {\n display: flex;\n flex-direction: column;\n flex: 1;\n height: 100%;\n }\n\n .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header {\n position: sticky;\n z-index: 1;\n }\n\n /* Resizable */\n .p-datatable-resizable-table > .p-datatable-thead > tr > th,\n .p-datatable-resizable-table > .p-datatable-tfoot > tr > td,\n .p-datatable-resizable-table > .p-datatable-tbody > tr > td {\n overflow: hidden;\n white-space: nowrap;\n }\n\n .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) {\n background-clip: padding-box;\n position: relative;\n }\n\n .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer {\n display: none;\n }\n\n .p-datatable .p-column-resizer {\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n margin: 0;\n width: 0.5rem;\n height: 100%;\n padding: 0px;\n cursor: col-resize;\n border: 1px solid transparent;\n }\n\n .p-datatable .p-column-header-content {\n display: flex;\n align-items: center;\n }\n\n .p-datatable .p-column-resizer-helper {\n width: 1px;\n position: absolute;\n z-index: 10;\n display: none;\n }\n\n .p-datatable .p-row-editor-init,\n .p-datatable .p-row-editor-save,\n .p-datatable .p-row-editor-cancel {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n }\n\n /* Expand */\n .p-datatable .p-row-toggler {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n }\n\n /* Reorder */\n .p-datatable-reorder-indicator-up,\n .p-datatable-reorder-indicator-down {\n position: absolute;\n display: none;\n }\n\n .p-reorderable-column,\n .p-datatable-reorderablerow-handle {\n cursor: move;\n }\n\n /* Loader */\n .p-datatable .p-datatable-loading-overlay {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2;\n }\n\n /* Filter */\n .p-column-filter-row {\n display: flex;\n align-items: center;\n width: 100%;\n }\n\n .p-column-filter-menu {\n display: inline-flex;\n margin-left: auto;\n }\n\n .p-column-filter-row .p-column-filter-element {\n flex: 1 1 auto;\n width: 1%;\n }\n\n .p-column-filter-menu-button,\n .p-column-filter-clear-button {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n overflow: hidden;\n position: relative;\n }\n\n .p-column-filter-overlay {\n position: absolute;\n top: 0;\n left: 0;\n }\n\n .p-column-filter-row-items {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n .p-column-filter-row-item {\n cursor: pointer;\n }\n\n .p-column-filter-add-button,\n .p-column-filter-remove-button {\n justify-content: center;\n }\n\n .p-column-filter-add-button .p-button-label,\n .p-column-filter-remove-button .p-button-label {\n flex-grow: 0;\n }\n\n .p-column-filter-buttonbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {\n width: auto;\n }\n\n /* Responsive */\n .p-datatable .p-datatable-tbody > tr > td > .p-column-title {\n display: none;\n }\n\n /* VirtualScroller */\n .p-datatable-virtualscroller-spacer {\n display: flex;\n }\n\n .p-datatable .p-virtualscroller .p-virtualscroller-loading {\n transform: none;\n min-height: 0;\n position: sticky;\n top: 0;\n left: 0;\n }\n\n /* Alignment */\n .p-datatable .p-datatable-thead > tr > th.p-align-left > .p-column-header-content,\n .p-datatable .p-datatable-tbody > tr > td.p-align-left,\n .p-datatable .p-datatable-tfoot > tr > td.p-align-left {\n text-align: left;\n justify-content: flex-start;\n }\n\n .p-datatable .p-datatable-thead > tr > th.p-align-right > .p-column-header-content,\n .p-datatable .p-datatable-tbody > tr > td.p-align-right,\n .p-datatable .p-datatable-tfoot > tr > td.p-align-right {\n text-align: right;\n justify-content: flex-end;\n }\n\n .p-datatable .p-datatable-thead > tr > th.p-align-center > .p-column-header-content,\n .p-datatable .p-datatable-tbody > tr > td.p-align-center,\n .p-datatable .p-datatable-tfoot > tr > td.p-align-center {\n text-align: center;\n justify-content: center;\n }\n}\n";
var classes$T = {
root: function root(_ref) {
var props = _ref.props,
selectable = _ref.selectable;
return classNames('p-datatable p-component', {
'p-datatable-hoverable-rows': props.rowHover,
'p-datatable-selectable': selectable && !props.cellSelection,
'p-datatable-selectable-cell': selectable && props.cellSelection,
'p-datatable-resizable': props.resizableColumns,
'p-datatable-resizable-fit': props.resizableColumns && props.columnResizeMode === 'fit',
'p-datatable-scrollable': props.scrollable,
'p-datatable-flex-scrollable': props.scrollable && props.scrollHeight === 'flex',
'p-datatable-responsive-stack': props.responsiveLayout === 'stack',
'p-datatable-responsive-scroll': props.responsiveLayout === 'scroll',
'p-datatable-striped': props.stripedRows,
'p-datatable-gridlines': props.showGridlines,
'p-datatable-grouped-header': props.headerColumnGroup != null,
'p-datatable-grouped-footer': props.footerColumnGroup != null,
'p-datatable-sm': props.size === 'small',
'p-datatable-lg': props.size === 'large'
});
},
loadingIcon: 'p-datatable-loading-icon',
loadingOverlay: 'p-datatable-loading-overlay p-component-overlay',
header: 'p-datatable-header',
wrapper: 'p-datatable-wrapper',
table: function table(_ref2) {
var props = _ref2.props;
return classNames('p-datatable-table', {
'p-datatable-scrollable-table': props.scrollable,
'p-datatable-resizable-table': props.resizableColumns,
'p-datatable-resizable-table-fit': props.resizableColumns && props.columnResizeMode === 'fit'
});
},
thead: 'p-datatable-thead',
tfoot: 'p-datatable-tfoot',
footer: 'p-datatable-footer',
checkIcon: 'p-checkbox-icon',
resizeHelper: 'p-column-resizer-helper',
reorderIndicatorUp: 'p-datatable-reorder-indicator-up',
reorderIndicatorDown: 'p-datatable-reorder-indicator-down',
paginator: function paginator(_ref3) {
var position = _ref3.position;
return classNames('p-paginator-' + position);
},
bodyCell: function bodyCell(_ref4) {
var selectionMode = _ref4.selectionMode,
editor = _ref4.editor,
editingState = _ref4.editingState,
frozen = _ref4.frozen,
cellSelected = _ref4.cellSelected,
align = _ref4.align,
props = _ref4.bodyProps,
getCellParams = _ref4.getCellParams;
return classNames(_defineProperty({
'p-selection-column': selectionMode !== null,
'p-editable-column': editor,
'p-cell-editing': editor && editingState,
'p-frozen-column': frozen,
'p-selectable-cell': props.allowCellSelection && props.isSelectable({
data: getCellParams(),
index: props.rowIndex
}),
'p-highlight': cellSelected
}, "p-align-".concat(align), !!align));
},
columnTitle: 'p-column-title',
bodyRow: function bodyRow(_ref5) {
var props = _ref5.rowProps;
return classNames({
'p-highlight': !props.allowCellSelection && props.selected || props.contextMenuSelected,
'p-highlight-contextmenu': props.contextMenuSelected,
'p-selectable-row': props.allowRowSelection && props.isSelectable({
data: props.rowData,
index: props.rowIndex
}),
'p-row-odd': props.rowIndex % 2 !== 0
});
},
rowGroupTogglerIcon: 'p-row-toggler-icon',
rowGroupToggler: 'p-row-toggler p-link',
rowGroupHeader: 'p-rowgroup-header',
rowGroupHeaderName: 'p-rowgroup-header-name',
rowGroupFooter: 'p-rowgroup-footer',
rowReorderIcon: 'p-datatable-reorderablerow-handle',
rowTogglerIcon: 'p-row-toggler-icon',
rowToggler: 'p-row-toggler p-link',
rowEditorSaveIcon: 'p-row-editor-save-icon',
rowEditorSaveButton: 'p-row-editor-save p-link',
rowEditorCancelIcon: 'p-row-editor-cancel-icon',
rowEditorCancelButton: 'p-row-editor-cancel p-link',
rowEditorInitIcon: 'p-row-editor-init-icon',
rowEditorInitButton: 'p-row-editor-init p-link',
rowExpansion: 'p-datatable-row-expansion',
virtualScrollerSpacer: function virtualScrollerSpacer(_ref6) {
var className = _ref6.className;
return className;
},
tbody: function tbody(_ref7) {
var className = _ref7.className;
return className;
},
filterInput: 'p-fluid p-column-filter-element',
filterMenuButton: function filterMenuButton(_ref8) {
var overlayVisibleState = _ref8.overlayVisibleState,
hasFilter = _ref8.hasFilter;
return classNames('p-column-filter-menu-button p-link', {
'p-column-filter-menu-button-open': overlayVisibleState,
'p-column-filter-menu-button-active': hasFilter()
});
},
headerFilterClearButton: function headerFilterClearButton(_ref9) {
var hasRowFilter = _ref9.hasRowFilter;
return classNames('p-column-filter-clear-button p-link', {
'p-hidden-space': !hasRowFilter()
});
},
filterSeparator: 'p-column-filter-separator',
filterRowItem: function filterRowItem(_ref10) {
var isRowMatchModeSelected = _ref10.isRowMatchModeSelected,
isShowMatchModes = _ref10.isShowMatchModes,
value = _ref10.value;
return isShowMatchModes() ? classNames('p-column-filter-row-item', {
'p-highlight': value && isRowMatchModeSelected(value)
}) : undefined;
},
filterRowItems: 'p-column-filter-row-items',
filterOperator: 'p-column-filter-operator',
filterConstraints: 'p-column-filter-constraints',
filterConstraint: 'p-column-filter-constraint',
filterAddRule: 'p-column-filter-add-rule',
filterButtonBar: 'p-column-filter-buttonbar',
filterOverlay: function filterOverlay(_ref11) {
var props = _ref11.columnFilterProps,
context = _ref11.context,
getColumnProp = _ref11.getColumnProp;
return classNames('p-column-filter-overlay p-component p-fluid', getColumnProp('filterMenuClassName'), {
'p-column-filter-overlay-menu': props.display === 'menu',
'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
});
},
columnFilter: function columnFilter(_ref12) {
var props = _ref12.columnFilterProps;
return classNames('p-column-filter p-fluid', {
'p-column-filter-row': props.display === 'row',
'p-column-filter-menu': props.display === 'menu'
});
},
columnResizer: 'p-column-resizer',
emptyMessage: 'p-datatable-emptymessage',
sortBadge: 'p-sortable-column-badge',
sortIcon: 'p-sortable-column-icon',
headerTitle: 'p-column-title',
headerContent: 'p-column-header-content',
headerCell: function headerCell(_ref13) {
var props = _ref13.headerProps,
frozen = _ref13.frozen,
sortMeta = _ref13.sortMeta,
align = _ref13.align,
_isSortableDisabled = _ref13._isSortableDisabled,
getColumnProp = _ref13.getColumnProp;
return ObjectUtils.isEmpty(props) ? classNames('p-filter-column', {
'p-frozen-column': frozen
}) : classNames(_defineProperty({
'p-filter-column': !props.headerColumnGroup && props.filterDisplay === 'row',
'p-sortable-column': getColumnProp('sortable'),
'p-resizable-column': props.resizableColumns && getColumnProp('resizeable'),
'p-highlight': sortMeta.sorted,
'p-frozen-column': frozen,
'p-selection-column': getColumnProp('selectionMode'),
'p-sortable-disabled': getColumnProp('sortable') && _isSortableDisabled,
'p-reorderable-column': props.reorderableColumns && getColumnProp('reorderable') && !frozen
}, "p-align-".concat(align), !!align));
},
footerCell: function footerCell(_ref14) {
var getColumnProp = _ref14.getColumnProp,
align = _ref14.align;
return classNames(_defineProperty({
'p-frozen-column': getColumnProp('frozen')
}, "p-align-".concat(align), !!align));
},
transition: 'p-connected-overlay'
};
var inlineStyles$h = {
wrapper: {
overflow: 'auto'
},
resizeHelper: {
display: 'none'
},
reorderIndicatorUp: function reorderIndicatorUp(_ref15) {
var style = _ref15.style;
return _objectSpread$1l({}, style);
},
reorderIndicatorDown: function reorderIndicatorDown(_ref16) {
var style = _ref16.style;
return _objectSpread$1l({}, style);
}
};
var DataTableBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'DataTable',
alwaysShowPaginator: true,
breakpoint: '960px',
cellClassName: null,
cellMemo: true,
cellMemoProps: ['rowData', 'field', 'allowCellSelection', 'isCellSelected', 'editMode', 'index', 'tabIndex', 'editing', 'expanded', 'editingMeta', 'frozenCol', 'alignFrozenCol'],
cellMemoPropsDepth: 1,
cellSelection: false,
checkIcon: null,
className: null,
collapsedRowIcon: null,
columnResizeMode: 'fit',
compareSelectionBy: 'deepEquals',
contextMenuSelection: null,
csvSeparator: ',',
currentPageReportTemplate: '({currentPage} of {totalPages})',
customRestoreState: null,
customSaveState: null,
dataKey: null,
defaultSortOrder: 1,
dragSelection: false,
editMode: null,
editingRows: null,
emptyMessage: null,
expandableRowGroups: false,
expandedRowIcon: null,
expandedRows: null,
exportFilename: 'download',
exportFunction: null,
filterClearIcon: null,
filterDelay: 300,
filterDisplay: 'menu',
filterIcon: null,
filterLocale: undefined,
filters: null,
first: 0,
footer: null,
footerColumnGroup: null,
frozenRow: false,
frozenValue: null,
frozenWidth: null,
globalFilter: null,
globalFilterFields: null,
globalFilterMatchMode: FilterMatchMode.CONTAINS,
groupRowsBy: null,
header: null,
headerColumnGroup: null,
id: null,
isDataSelectable: null,
lazy: false,
loading: false,
loadingIcon: null,
metaKeySelection: false,
multiSortMeta: null,
onAllRowsSelect: null,
onAllRowsUnselect: null,
onCellClick: null,
onCellSelect: null,
onCellUnselect: null,
onColReorder: null,
onColumnResizeEnd: null,
onColumnResizerClick: null,
onColumnResizerDoubleClick: null,
onContextMenu: null,
onContextMenuSelectionChange: null,
onFilter: null,
onPage: null,
onRowClick: null,
onRowCollapse: null,
onRowDoubleClick: null,
onRowEditCancel: null,
onRowEditChange: null,
onRowEditComplete: null,
onRowEditInit: null,
onRowEditSave: null,
onRowExpand: null,
onRowMouseEnter: null,
onRowMouseLeave: null,
onRowPointerDown: null,
onRowPointerUp: null,
onRowReorder: null,
onRowSelect: null,
onRowToggle: null,
onRowUnselect: null,
onSelectAllChange: null,
onSelectionChange: null,
onSort: null,
onStateRestore: null,
onStateSave: null,
onValueChange: null,
pageLinkSize: 5,
paginator: false,
paginatorClassName: null,
paginatorDropdownAppendTo: null,
paginatorLeft: null,
paginatorPosition: 'bottom',
paginatorRight: null,
paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
removableSort: false,
reorderIndicatorDownIcon: null,
reorderIndicatorUpIcon: null,
reorderableColumns: false,
reorderableRows: false,
resizableColumns: false,
responsiveLayout: 'scroll',
rowClassName: null,
rowEditValidator: null,
rowEditorCancelIcon: null,
rowEditorInitIcon: null,
rowEditorSaveIcon: null,
rowExpansionTemplate: null,
rowGroupFooterTemplate: null,
rowGroupHeaderTemplate: null,
rowGroupMode: null,
rowHover: false,
rows: null,
rowsPerPageOptions: null,
scrollHeight: null,
scrollable: false,
selectAll: false,
selectOnEdit: true,
selection: null,
selectionAriaLabel: null,
selectionAutoFocus: true,
selectionMode: null,
selectionPageOnly: false,
showGridlines: false,
showHeaders: true,
showRowReorderElement: null,
showSelectAll: true,
showSelectionElement: null,
size: 'normal',
sortField: null,
sortIcon: null,
sortMode: 'single',
sortOrder: null,
stateKey: null,
stateStorage: 'session',
stripedRows: false,
style: null,
tabIndex: 0,
tableClassName: null,
tableStyle: null,
totalRecords: null,
value: null,
virtualScrollerOptions: null,
children: undefined
},
css: {
styles: styles$I,
classes: classes$T,
inlineStyles: inlineStyles$h
}
});
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 _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;
}
var BarsIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M13.3226 3.6129H0.677419C0.497757 3.6129 0.325452 3.54152 0.198411 3.41448C0.0713707 3.28744 0 3.11514 0 2.93548C0 2.75581 0.0713707 2.58351 0.198411 2.45647C0.325452 2.32943 0.497757 2.25806 0.677419 2.25806H13.3226C13.5022 2.25806 13.6745 2.32943 13.8016 2.45647C13.9286 2.58351 14 2.75581 14 2.93548C14 3.11514 13.9286 3.28744 13.8016 3.41448C13.6745 3.54152 13.5022 3.6129 13.3226 3.6129ZM13.3226 7.67741H0.677419C0.497757 7.67741 0.325452 7.60604 0.198411 7.479C0.0713707 7.35196 0 7.17965 0 6.99999C0 6.82033 0.0713707 6.64802 0.198411 6.52098C0.325452 6.39394 0.497757 6.32257 0.677419 6.32257H13.3226C13.5022 6.32257 13.6745 6.39394 13.8016 6.52098C13.9286 6.64802 14 6.82033 14 6.99999C14 7.17965 13.9286 7.35196 13.8016 7.479C13.6745 7.60604 13.5022 7.67741 13.3226 7.67741ZM0.677419 11.7419H13.3226C13.5022 11.7419 13.6745 11.6706 13.8016 11.5435C13.9286 11.4165 14 11.2442 14 11.0645C14 10.8848 13.9286 10.7125 13.8016 10.5855C13.6745 10.4585 13.5022 10.3871 13.3226 10.3871H0.677419C0.497757 10.3871 0.325452 10.4585 0.198411 10.5855C0.0713707 10.7125 0 10.8848 0 11.0645C0 11.2442 0.0713707 11.4165 0.198411 11.5435C0.325452 11.6706 0.497757 11.7419 0.677419 11.7419Z",
fill: "currentColor"
}));
}));
BarsIcon.displayName = 'BarsIcon';
var PencilIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
d: "M0.609628 13.959C0.530658 13.9599 0.452305 13.9451 0.379077 13.9156C0.305849 13.8861 0.239191 13.8424 0.18294 13.787C0.118447 13.7234 0.0688234 13.6464 0.0376166 13.5614C0.00640987 13.4765 -0.00560954 13.3857 0.00241768 13.2956L0.25679 10.1501C0.267698 10.0041 0.331934 9.86709 0.437312 9.76516L9.51265 0.705715C10.0183 0.233014 10.6911 -0.0203041 11.3835 0.00127367C12.0714 0.00660201 12.7315 0.27311 13.2298 0.746671C13.7076 1.23651 13.9824 1.88848 13.9992 2.57201C14.0159 3.25554 13.7733 3.92015 13.32 4.4327L4.23648 13.5331C4.13482 13.6342 4.0017 13.6978 3.85903 13.7133L0.667067 14L0.609628 13.959ZM1.43018 10.4696L1.25787 12.714L3.50619 12.5092L12.4502 3.56444C12.6246 3.35841 12.7361 3.10674 12.7714 2.83933C12.8067 2.57193 12.7644 2.30002 12.6495 2.05591C12.5346 1.8118 12.3519 1.60575 12.1231 1.46224C11.8943 1.31873 11.6291 1.2438 11.3589 1.24633C11.1813 1.23508 11.0033 1.25975 10.8355 1.31887C10.6677 1.37798 10.5136 1.47033 10.3824 1.59036L1.43018 10.4696Z",
fill: "currentColor"
}));
}));
PencilIcon.displayName = 'PencilIcon';
function ownKeys$1k(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$1k(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1k(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1k(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var RowCheckbox = /*#__PURE__*/React.memo(function (props) {
var mergeProps = useMergeProps();
var getColumnProps = function getColumnProps() {
return ColumnBase.getCProps(props.column);
};
var _props$ptCallbacks = props.ptCallbacks,
ptm = _props$ptCallbacks.ptm,
ptmo = _props$ptCallbacks.ptmo,
cx = _props$ptCallbacks.cx;
var getColumnPTOptions = function getColumnPTOptions(key) {
var columnMetaData = {
props: getColumnProps(),
parent: props.metaData,
hostName: props.hostName,
state: {},
context: {
index: props.tabIndex,
checked: props.checked,
disabled: props.disabled
}
};
return mergeProps(ptm("column.".concat(key), {
column: columnMetaData
}), ptm("column.".concat(key), columnMetaData), ptmo(getColumnProps(), key, columnMetaData));
};
var onChange = function onChange(event) {
if (!props.disabled) {
props.onChange(event);
}
};
var checkboxIconProps = mergeProps({
className: cx('checkIcon')
}, getColumnPTOptions('rowCheckbox.icon'));
var icon = props.checked ? props.checkIcon || /*#__PURE__*/React.createElement(CheckIcon, checkboxIconProps) : null;
var checkIcon = IconUtils.getJSXIcon(icon, _objectSpread$1k({}, checkboxIconProps), {
props: props
});
var tabIndex = props.disabled ? null : '0';
var checkboxProps = {
role: 'checkbox',
'aria-checked': props.checked,
tabIndex: tabIndex,
onChange: onChange,
'aria-label': props.ariaLabel,
checked: props.checked,
icon: checkIcon,
disabled: props.disabled,
unstyled: props.unstyled,
pt: getColumnPTOptions('rowCheckbox')
};
return /*#__PURE__*/React.createElement(Checkbox, checkboxProps);
});
RowCheckbox.displayName = 'RowCheckbox';
var classes$S = {
root: function root(_ref) {
var props = _ref.props,
context = _ref.context;
return classNames('p-radiobutton p-component', {
'p-highlight': props.checked,
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
});
},
box: 'p-radiobutton-box',
input: 'p-radiobutton-input',
icon: 'p-radiobutton-icon'
};
var RadioButtonBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'RadioButton',
autoFocus: false,
checked: false,
className: null,
disabled: false,
id: null,
inputId: null,
inputRef: null,
invalid: false,
variant: null,
name: null,
onChange: null,
onClick: null,
required: false,
style: null,
tabIndex: null,
tooltip: null,
tooltipOptions: null,
value: null,
children: undefined
},
css: {
classes: classes$S
}
});
function ownKeys$1j(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$1j(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1j(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1j(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var RadioButton = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = RadioButtonBase.getProps(inProps, context);
var elementRef = React.useRef(null);
var inputRef = React.useRef(props.inputRef);
var _RadioButtonBase$setM = RadioButtonBase.setMetaData({
props: props
}),
ptm = _RadioButtonBase$setM.ptm,
cx = _RadioButtonBase$setM.cx,
isUnstyled = _RadioButtonBase$setM.isUnstyled;
useHandleStyle(RadioButtonBase.css.styles, isUnstyled, {
name: 'radiobutton'
});
var select = function select(event) {
onChange(event);
};
var onChange = function onChange(event) {
if (props.disabled || props.readOnly) {
return;
}
if (props.onChange) {
var checked = props.checked;
var radioClicked = event.target instanceof HTMLDivElement;
var inputClicked = event.target === inputRef.current;
var isInputToggled = inputClicked && event.target.checked !== checked;
var isRadioToggled = radioClicked && (DomHandler.hasClass(elementRef.current, 'p-radiobutton-checked') === checked ? !checked : false);
var value = !checked;
var eventData = {
originalEvent: event,
value: props.value,
checked: value,
stopPropagation: function stopPropagation() {
event === null || event === void 0 || event.stopPropagation();
},
preventDefault: function preventDefault() {
event === null || event === void 0 || event.preventDefault();
},
target: {
type: 'radio',
name: props.name,
id: props.id,
value: props.value,
checked: value
}
};
if (isInputToggled || isRadioToggled) {
var _props$onChange;
props === null || props === void 0 || (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, eventData);
// do not continue if the user defined click wants to prevent
if (event.defaultPrevented) {
return;
}
if (isRadioToggled) {
inputRef.current.checked = value;
}
}
DomHandler.focus(inputRef.current);
}
};
var onFocus = function onFocus(event) {
var _props$onFocus;
props === null || props === void 0 || (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, event);
};
var onBlur = function onBlur(event) {
var _props$onBlur;
props === null || props === void 0 || (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, event);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
select: select,
focus: function focus() {
return DomHandler.focus(inputRef.current);
},
getElement: function getElement() {
return elementRef.current;
},
getInput: function getInput() {
return inputRef.current;
}
};
});
React.useEffect(function () {
if (inputRef.current) {
inputRef.current.checked = props.checked;
}
}, [props.checked]);
React.useEffect(function () {
ObjectUtils.combinedRefs(inputRef, props.inputRef);
}, [inputRef, props.inputRef]);
useMountEffect(function () {
if (props.autoFocus) {
DomHandler.focus(inputRef.current, props.autoFocus);
}
});
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = RadioButtonBase.getOtherProps(props);
var rootProps = mergeProps({
id: props.id,
className: classNames(props.className, cx('root', {
context: context
})),
style: props.style,
'data-p-checked': props.checked
}, otherProps, ptm('root'));
delete rootProps.input;
delete rootProps.box;
delete rootProps.icon;
var createInputElement = function createInputElement() {
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var inputProps = mergeProps(_objectSpread$1j({
id: props.inputId,
type: 'radio',
name: props.name,
defaultChecked: props.checked,
onFocus: onFocus,
onBlur: onBlur,
onChange: onChange,
disabled: props.disabled,
readOnly: props.readOnly,
required: props.required,
tabIndex: props.tabIndex,
className: cx('input')
}, ariaProps), inProps.input, ptm('input'));
return /*#__PURE__*/React.createElement("input", _extends({
ref: inputRef
}, inputProps));
};
var createBoxElement = function createBoxElement() {
var boxProps = mergeProps({
className: cx('box')
}, inProps.box, ptm('box'));
var iconProps = mergeProps({
className: cx('icon')
}, inProps.icon, ptm('icon'));
return /*#__PURE__*/React.createElement("div", boxProps, /*#__PURE__*/React.createElement("div", iconProps));
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef
}, rootProps), createInputElement(), createBoxElement()), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip,
pt: ptm('tooltip')
}, props.tooltipOptions)));
}));
RadioButton.displayName = 'RadioButton';
var RowRadioButton = /*#__PURE__*/React.memo(function (props) {
var mergeProps = useMergeProps();
var getColumnProps = function getColumnProps() {
return ColumnBase.getCProps(props.column);
};
var _props$ptCallbacks = props.ptCallbacks,
ptm = _props$ptCallbacks.ptm,
ptmo = _props$ptCallbacks.ptmo;
var getColumnPTOptions = function getColumnPTOptions(key) {
var columnMetaData = {
props: getColumnProps(),
parent: props.metaData,
hostName: props.hostName,
state: {},
context: {
index: props.tabIndex,
checked: props.checked,
disabled: props.disabled
}
};
return mergeProps(ptm("column.".concat(key), {
column: columnMetaData
}), ptm("column.".concat(key), columnMetaData), ptmo(getColumnProps(), key, columnMetaData));
};
var onChange = function onChange(event) {
if (!props.disabled) {
props.onChange(event);
}
};
var radioButtonProps = {
role: 'radio',
'aria-checked': props.checked,
checked: props.checked,
disabled: props.disabled,
name: "".concat(props.tableSelector, "_dt_radio"),
onChange: onChange,
unstyled: props.unstyled,
pt: getColumnPTOptions('rowRadioButton')
};
return /*#__PURE__*/React.createElement(RadioButton, radioButtonProps);
});
RowRadioButton.displayName = 'RowRadioButton';
function ownKeys$1i(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$1i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1i(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Cell = function Cell(props) {
var mergeProps = useMergeProps();
var _React$useState = React.useState(props.editing),
_React$useState2 = _slicedToArray(_React$useState, 2),
editingState = _React$useState2[0],
setEditingState = _React$useState2[1];
var _React$useState3 = React.useState(props.rowData),
_React$useState4 = _slicedToArray(_React$useState3, 2),
editingRowDataState = _React$useState4[0],
setEditingRowDataState = _React$useState4[1];
var _React$useState5 = React.useState({}),
_React$useState6 = _slicedToArray(_React$useState5, 2),
styleObjectState = _React$useState6[0],
setStyleObjectState = _React$useState6[1];
var elementRef = React.useRef(null);
var keyHelperRef = React.useRef(null);
var focusTimeout = React.useRef(null);
var initFocusTimeout = React.useRef(null);
var editingRowDataStateRef = React.useRef(null);
var _props$ptCallbacks = props.ptCallbacks,
ptm = _props$ptCallbacks.ptm,
ptmo = _props$ptCallbacks.ptmo,
cx = _props$ptCallbacks.cx;
var getColumnProp = function getColumnProp(name) {
return ColumnBase.getCProp(props.column, name);
};
var getColumnPTOptions = function getColumnPTOptions(key) {
var columnMetaData = {
props: props.cProps,
parent: props.metaData,
hostName: props.hostName,
state: {
styleObject: styleObjectState,
editing: editingState,
editingRowData: editingRowDataState
},
context: {
index: props.index,
size: props.metaData.props.size,
showGridlines: props.metaData.props.showGridlines
}
};
return mergeProps(ptm("column.".concat(key), {
column: columnMetaData
}), ptm("column.".concat(key), columnMetaData), ptmo(props.cProps, key, columnMetaData));
};
var isEditable = function isEditable() {
return ObjectUtils.isNotEmpty(props.editMode) && getColumnProp('editor');
};
var cellEditValidateOnClose = function cellEditValidateOnClose() {
return getColumnProp('cellEditValidateOnClose');
};
var isIgnoredElement = function isIgnoredElement(element) {
var isOverlay = function isOverlay(el) {
return el.getAttribute && el.getAttribute('data-pr-is-overlay');
};
return isOverlay(element) || DomHandler.getParents(element).find(function (el) {
return isOverlay(el);
});
};
var _useEventListener = useEventListener({
type: 'click',
listener: function listener(e) {
if (!isIgnoredElement(e.target) && isOutsideClicked(e.target)) {
switchCellToViewMode(e, true);
}
},
options: true,
when: isEditable()
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentClickListener = _useEventListener2[0],
unbindDocumentClickListener = _useEventListener2[1];
var isOutsideClicked = function isOutsideClicked(target) {
return elementRef.current && !(elementRef.current.isSameNode(target) || elementRef.current.contains(target));
};
var getStyle = function getStyle() {
var bodyStyle = getColumnProp('bodyStyle');
var columnStyle = getColumnProp('style');
return props.frozenCol ? Object.assign({}, columnStyle, bodyStyle, styleObjectState) : Object.assign({}, columnStyle, bodyStyle);
};
var getCellParams = function getCellParams() {
return {
value: props.resolveFieldData(),
field: props.field,
rowData: props.rowData,
rowIndex: props.rowIndex,
cellIndex: props.index,
selected: props.isCellSelected,
column: props.column,
props: props
};
};
var getCellCallbackParams = function getCellCallbackParams(event) {
var params = getCellParams();
return _objectSpread$1i({
originalEvent: event
}, params);
};
var closeCell = function closeCell(event) {
var params = getCellCallbackParams(event);
var onBeforeCellEditHide = getColumnProp('onBeforeCellEditHide');
if (onBeforeCellEditHide) {
onBeforeCellEditHide(params);
}
/* When using the 'tab' key, the focus event of the next cell is not called in IE. */
setTimeout(function () {
setEditingState(false);
unbindDocumentClickListener();
}, 1);
};
var switchCellToViewMode = function switchCellToViewMode(event, submit) {
var callbackParams = getCellCallbackParams(event);
var newRowData = _objectSpread$1i({}, editingRowDataStateRef.current);
var newValue = props.resolveFieldData(newRowData);
var params = _objectSpread$1i(_objectSpread$1i({}, callbackParams), {}, {
newRowData: newRowData,
newValue: newValue
});
var onCellEditCancel = getColumnProp('onCellEditCancel');
var cellEditValidator = getColumnProp('cellEditValidator');
var onCellEditComplete = getColumnProp('onCellEditComplete');
if (!submit && onCellEditCancel) {
onCellEditCancel(params);
}
var valid = true;
if ((!submit || cellEditValidateOnClose()) && cellEditValidator) {
valid = cellEditValidator(params);
}
if (valid) {
if (submit && onCellEditComplete) {
onCellEditComplete(params);
}
closeCell(event);
} else {
event.preventDefault();
}
setEditingRowDataState(newRowData);
};
var editorCallback = function editorCallback(val) {
var editingRowData = _objectSpread$1i({}, editingRowDataState);
ObjectUtils.mutateFieldData(editingRowData, props.field, val);
setEditingRowDataState(editingRowData);
// update editing meta for complete methods on row mode
var currentData = props.getEditingRowData();
if (currentData) {
ObjectUtils.mutateFieldData(currentData, props.field, val);
}
editingRowDataStateRef.current = editingRowData;
};
var _onClick = function onClick(event) {
props.onClick(event, getCellCallbackParams(event), isEditable(), editingState, setEditingState, props.column, bindDocumentClickListener);
};
var _onMouseDown = function onMouseDown(event) {
var params = getCellCallbackParams(event);
props.onMouseDown && props.onMouseDown(params);
};
var _onMouseUp = function onMouseUp(event) {
var params = getCellCallbackParams(event);
props.onMouseUp && props.onMouseUp(params);
};
var _onKeyDown = function onKeyDown(event) {
if (props.editMode !== 'row') {
if (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Tab') {
switchCellToViewMode(event, true);
}
if (event.code === 'Escape') {
switchCellToViewMode(event, false);
}
}
if (props.allowCellSelection) {
var target = event.target,
cell = event.currentTarget;
switch (event.code) {
case 'ArrowLeft':
var prevCell = props.findPrevSelectableCell(cell);
if (prevCell) {
changeTabIndex(cell, prevCell);
prevCell.focus();
}
event.preventDefault();
break;
case 'ArrowRight':
var nextCell = props.findNextSelectableCell(cell);
if (nextCell) {
changeTabIndex(cell, nextCell);
nextCell.focus();
}
event.preventDefault();
break;
case 'ArrowUp':
var upCell = props.findUpSelectableCell(cell, index);
if (upCell) {
changeTabIndex(cell, upCell);
upCell.focus();
}
event.preventDefault();
break;
case 'ArrowDown':
var downCell = props.findDownSelectableCell(cell, index);
if (downCell) {
changeTabIndex(cell, downCell);
downCell.focus();
}
event.preventDefault();
break;
case 'Enter':
case 'NumpadEnter':
if (event.shiftKey || event.ctrlKey) ; else if (!DomHandler.isClickable(target)) {
_onClick(event);
event.preventDefault();
}
break;
case 'Space':
if (!DomHandler.isClickable(target) && !target.readOnly) {
_onClick(event);
event.preventDefault();
}
break;
}
}
};
var _onBlur = function onBlur(event) {
if (props.editMode !== 'row' && editingState && getColumnProp('cellEditValidatorEvent') === 'blur') {
switchCellToViewMode(event, true);
}
};
var onEditorFocus = function onEditorFocus(event) {
_onClick(event);
};
var onRadioChange = function onRadioChange(event) {
props.onRadioChange({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
};
var onRowToggle = function onRowToggle(event) {
props.onRowToggle({
originalEvent: event,
data: props.rowData
});
event.preventDefault();
event.stopPropagation();
};
var onRowEditInit = function onRowEditInit(event) {
props.onRowEditInit({
originalEvent: event,
data: props.rowData,
newData: props.getEditingRowData(),
field: props.field,
index: props.rowIndex
});
};
var onRowEditSave = function onRowEditSave(event) {
props.onRowEditSave({
originalEvent: event,
data: props.rowData,
newData: props.getEditingRowData(),
field: props.field,
index: props.rowIndex
});
props.focusOnInit(initFocusTimeout, elementRef);
};
var onRowEditCancel = function onRowEditCancel(event) {
props.onRowEditCancel({
originalEvent: event,
data: props.rowData,
newData: props.getEditingRowData(),
field: props.field,
index: props.rowIndex
});
props.focusOnInit(initFocusTimeout, elementRef);
};
React.useEffect(function () {
if (props.frozenCol) props.updateStickyPosition(elementRef, props.frozenCol, props.alignFrozenCol, styleObjectState, setStyleObjectState);
if (props.editMode === 'cell' || props.editMode === 'row') props.focusOnElement(focusTimeout, editingState, elementRef, keyHelperRef);
}, [props.editMode, props.editing, editingState, props.frozenCol, props.alignFrozenCol]); // eslint-disable-line react-hooks/exhaustive-deps
React.useEffect(function () {
if (props.editMode === 'row' && props.editing !== editingState) {
setEditingState(props.editing);
}
}, [props.editMode, props.editing, editingState]);
useUpdateEffect(function () {
if (props.editMode === 'cell' || props.editMode === 'row') {
var editingRowData = props.getEditingRowData();
setEditingRowDataState(editingRowData);
editingRowDataStateRef.current = editingRowData;
}
}, [props.editingMeta]);
React.useEffect(function () {
if (props.editMode === 'cell' || props.editMode === 'row') {
var callbackParams = getCellCallbackParams();
var params = _objectSpread$1i(_objectSpread$1i({}, callbackParams), {}, {
editing: editingState,
editingKey: props.editingKey
});
props.onEditingMetaChange(params);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [editingState]);
useUnmountEffect(function () {
if (editingRowDataStateRef.current) {
editingRowDataStateRef.current = null;
}
});
var createLoading = function createLoading() {
var options = props.getVirtualScrollerOption('getLoaderOptions')(props.rowIndex, {
cellIndex: props.index,
cellFirst: props.index === 0,
cellLast: props.index === props.getVirtualScrollerOption('columns').length - 1,
cellEven: props.index % 2 === 0,
cellOdd: props.index % 2 !== 0,
column: props.column,
field: props.field
});
var content = ObjectUtils.getJSXElement(props.getVirtualScrollerOption('loadingTemplate'), options);
var bodyCellProps = mergeProps(getColumnPTOptions('bodyCell'), {
role: 'cell'
});
return /*#__PURE__*/React.createElement("td", bodyCellProps, content);
};
var createElement = function createElement() {
var content;
var editorKeyHelper;
var cellSelected = props.allowCellSelection && props.isCellSelected;
var isRowEditor = props.editMode === 'row';
var tabIndex = props.getTabIndex(cellSelected, props.index);
var selectionMode = getColumnProp('selectionMode');
var rowReorder = getColumnProp('rowReorder');
var header = getColumnProp('header');
var body = getColumnProp('body');
var editor = getColumnProp('editor');
var frozen = props.frozenCol;
var align = getColumnProp('align');
var value = props.resolveFieldData();
var columnBodyOptions = {
column: props.column,
field: props.field,
rowIndex: props.rowIndex,
frozenRow: props.frozenRow,
props: props.tableProps
};
var rowEditor = ObjectUtils.getPropValue(getColumnProp('rowEditor'), props.rowData, columnBodyOptions);
var expander = ObjectUtils.getPropValue(getColumnProp('expander'), props.rowData, columnBodyOptions);
var cellClassName = ObjectUtils.getPropValue(props.cellClassName, value, columnBodyOptions);
var bodyClassName = ObjectUtils.getPropValue(getColumnProp('bodyClassName'), props.rowData, columnBodyOptions);
var style = getStyle();
var columnTitleProps = mergeProps({
className: cx('columnTitle')
}, getColumnPTOptions('columnTitle'));
var title = props.responsiveLayout === 'stack' && /*#__PURE__*/React.createElement("span", columnTitleProps, ObjectUtils.getJSXElement(header, {
props: props.tableProps
}));
if (selectionMode) {
var showSelection = props.showSelectionElement ? props.showSelectionElement(props.rowData, {
rowIndex: props.rowIndex,
props: props.tableProps
}) : true;
var label;
if (showSelection) {
var ariaLabelField = props.selectionAriaLabel || props.tableProps.dataKey;
var ariaLabelText = ObjectUtils.resolveFieldData(props.rowData, ariaLabelField);
label = "".concat(props.isRowSelected ? ariaLabel('unselectRow') : ariaLabel('selectRow'), " ").concat(ariaLabelText);
}
content = showSelection && /*#__PURE__*/React.createElement(React.Fragment, null, selectionMode === 'single' && /*#__PURE__*/React.createElement(RowRadioButton, {
hostName: props.hostName,
column: props.column,
checked: props.isRowSelected,
disabled: !props.isSelectable({
data: props.rowData,
index: props.rowIndex
}),
onChange: onRadioChange,
tabIndex: props.tabIndex,
tableSelector: props.tableSelector,
ariaLabel: label,
ptCallbacks: props.ptCallbacks,
metaData: props.metaData,
unstyled: props.unstyled
}), selectionMode === 'multiple' && /*#__PURE__*/React.createElement(RowCheckbox, {
hostName: props.hostName,
column: props.column,
checked: props.isRowSelected,
disabled: !props.isSelectable({
data: props.rowData,
index: props.rowIndex
}),
onChange: props.onCheckboxChange,
tabIndex: props.tabIndex,
ariaLabel: label,
checkIcon: props.checkIcon,
ptCallbacks: props.ptCallbacks,
metaData: props.metaData,
unstyled: props.unstyled
}));
} else if (rowReorder) {
var showReorder = props.showRowReorderElement ? props.showRowReorderElement(props.rowData, {
rowIndex: props.rowIndex,
props: props.tableProps
}) : true;
var customIcon = getColumnProp('rowReorderIcon');
var rowReorderIconProps = mergeProps({
className: cx('rowReorderIcon')
}, customIcon ? null : getColumnPTOptions('rowReorderIcon'));
var rowReorderIcon = customIcon || /*#__PURE__*/React.createElement(BarsIcon, rowReorderIconProps);
content = showReorder ? IconUtils.getJSXIcon(rowReorderIcon, _objectSpread$1i({}, rowReorderIconProps), {
props: props
}) : null;
} else if (expander) {
var rowTogglerIconProps = mergeProps({
className: cx('rowTogglerIcon'),
'aria-hidden': true
}, getColumnPTOptions('rowTogglerIcon'));
var icon = props.expanded ? props.expandedRowIcon || /*#__PURE__*/React.createElement(ChevronDownIcon, rowTogglerIconProps) : props.collapsedRowIcon || /*#__PURE__*/React.createElement(ChevronRightIcon, rowTogglerIconProps);
var togglerIcon = IconUtils.getJSXIcon(icon, _objectSpread$1i({}, rowTogglerIconProps), {
props: props
});
var ariaControls = "".concat(props.tableSelector, "_content_").concat(props.rowIndex, "_expanded");
var _ariaLabelField = props.selectionAriaLabel || props.tableProps.dataKey;
var _ariaLabelText = ObjectUtils.resolveFieldData(props.rowData, _ariaLabelField);
var _label = "".concat(props.expanded ? ariaLabel('collapseLabel') : ariaLabel('expandLabel'), " ").concat(_ariaLabelText);
var expanderProps = {
onClick: onRowToggle,
className: cx('rowToggler')
};
var rowTogglerProps = mergeProps(_objectSpread$1i(_objectSpread$1i({}, expanderProps), {}, {
type: 'button',
'aria-expanded': props.expanded,
'aria-controls': ariaControls,
tabIndex: props.tabIndex,
'aria-label': _label
}), getColumnPTOptions('rowToggler'));
content = /*#__PURE__*/React.createElement("button", rowTogglerProps, togglerIcon, /*#__PURE__*/React.createElement(Ripple, null));
if (body) {
expanderProps.element = content;
content = ObjectUtils.getJSXElement(body, props.rowData, {
column: props.column,
field: props.field,
rowIndex: props.rowIndex,
frozenRow: props.frozenRow,
props: props.tableProps,
expander: expanderProps
});
}
} else if (isRowEditor && rowEditor) {
var rowEditorProps = {};
var rowEditorSaveIconProps = mergeProps({
className: cx('rowEditorSaveIcon')
}, getColumnPTOptions('rowEditorSaveIcon'));
var rowEditorCancelIconProps = mergeProps({
className: cx('rowEditorCancelIcon')
}, getColumnPTOptions('rowEditorCancelIcon'));
var rowEditorInitIconProps = mergeProps({
className: cx('rowEditorInitIcon')
}, getColumnPTOptions('rowEditorInitIcon'));
var rowEditorSaveIcon = IconUtils.getJSXIcon(props.rowEditorSaveIcon || /*#__PURE__*/React.createElement(CheckIcon, rowEditorSaveIconProps), _objectSpread$1i({}, rowEditorSaveIconProps), {
props: props
});
var rowEditorCancelIcon = IconUtils.getJSXIcon(props.rowEditorCancelIcon || /*#__PURE__*/React.createElement(TimesIcon, rowEditorCancelIconProps), _objectSpread$1i({}, rowEditorCancelIconProps), {
props: props
});
var rowEditorInitIcon = IconUtils.getJSXIcon(props.rowEditorInitIcon || /*#__PURE__*/React.createElement(PencilIcon, rowEditorInitIconProps), _objectSpread$1i({}, rowEditorInitIconProps), {
props: props
});
if (editingState) {
rowEditorProps = {
editing: true,
onSaveClick: onRowEditSave,
saveClassName: cx('rowEditorSaveButton'),
onCancelClick: onRowEditCancel,
cancelClassName: cx('rowEditorCancelButton')
};
var rowEditorSaveButtonProps = mergeProps({
type: 'button',
name: 'row-save',
'aria-label': ariaLabel('saveEdit'),
onClick: rowEditorProps.onSaveClick,
className: rowEditorProps.saveClassName,
tabIndex: props.tabIndex,
'data-p-row-editor-save': true
}, getColumnPTOptions('rowEditorSaveButton'));
var rowEditorCancelButtonProps = mergeProps({
type: 'button',
name: 'row-cancel',
'aria-label': ariaLabel('cancelEdit'),
onClick: rowEditorProps.onCancelClick,
className: rowEditorProps.cancelClassName,
tabIndex: props.tabIndex
}, getColumnPTOptions('rowEditorCancelButton'));
content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", rowEditorSaveButtonProps, rowEditorSaveIcon, /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("button", rowEditorCancelButtonProps, rowEditorCancelIcon, /*#__PURE__*/React.createElement(Ripple, null)));
} else {
rowEditorProps = {
editing: false,
onInitClick: onRowEditInit,
initClassName: cx('rowEditorInitButton')
};
var rowEditorInitButtonProps = mergeProps({
type: 'button',
name: 'row-edit',
'aria-label': ariaLabel('editRow'),
onClick: rowEditorProps.onInitClick,
className: rowEditorProps.initClassName,
tabIndex: props.tabIndex,
'data-p-row-editor-init': true
}, getColumnPTOptions('rowEditorInitButton'));
content = /*#__PURE__*/React.createElement("button", rowEditorInitButtonProps, rowEditorInitIcon, /*#__PURE__*/React.createElement(Ripple, null));
}
if (body) {
rowEditorProps.element = content;
content = ObjectUtils.getJSXElement(body, props.rowData, {
column: props.column,
field: props.field,
rowIndex: props.rowIndex,
frozenRow: props.frozenRow,
props: props.tableProps,
rowEditor: rowEditorProps
});
}
} else if (body && (!editingState || !editor)) {
content = body ? ObjectUtils.getJSXElement(body, props.rowData, {
column: props.column,
field: props.field,
rowIndex: props.rowIndex,
frozenRow: props.frozenRow,
props: props.tableProps
}) : value;
} else if (editor && editingState) {
content = ObjectUtils.getJSXElement(editor, {
rowData: editingRowDataState,
value: props.resolveFieldData(editingRowDataState),
column: props.column,
field: props.field,
rowIndex: props.rowIndex,
frozenRow: props.frozenRow,
props: props.tableProps,
editorCallback: editorCallback
});
} else {
content = value;
}
content = typeof content === 'boolean' ? content.toString() : content;
if (!isRowEditor && editor) {
var editorKeyHelperProps = mergeProps({
tabIndex: '0',
className: 'p-cell-editor-key-helper p-hidden-accessible',
onFocus: function onFocus(e) {
return onEditorFocus(e);
}
}, getColumnPTOptions('editorKeyHelperLabel'));
var editorKeyHelperLabelProps = mergeProps(getColumnPTOptions('editorKeyHelper'));
/* eslint-disable */
editorKeyHelper = /*#__PURE__*/React.createElement("a", _extends({
ref: keyHelperRef
}, editorKeyHelperProps), /*#__PURE__*/React.createElement("span", editorKeyHelperLabelProps));
/* eslint-enable */
}
var bodyCellProps = mergeProps({
style: style,
className: classNames(bodyClassName, getColumnProp('className'), cellClassName, cx('bodyCell', {
selectionMode: selectionMode,
editor: editor,
editingState: editingState,
frozen: frozen,
cellSelected: cellSelected,
align: align,
bodyProps: props,
getCellParams: getCellParams
})),
rowSpan: props.rowSpan,
tabIndex: tabIndex,
role: 'cell',
onClick: function onClick(e) {
return _onClick(e);
},
onKeyDown: function onKeyDown(e) {
return _onKeyDown(e);
},
onBlur: function onBlur(e) {
return _onBlur(e);
},
onMouseDown: function onMouseDown(e) {
return _onMouseDown(e);
},
onMouseUp: function onMouseUp(e) {
return _onMouseUp(e);
},
'data-p-selectable-cell': props.allowCellSelection && props.isSelectable({
data: getCellParams(),
index: props.rowIndex
}),
'data-p-selection-column': getColumnProp('selectionMode') != null,
'data-p-editable-column': isEditable() != null,
'data-p-cell-editing': editingState,
'data-p-frozen-column': frozen
}, getColumnPTOptions('root'), getColumnPTOptions('bodyCell'));
return /*#__PURE__*/React.createElement("td", _extends({
ref: elementRef
}, bodyCellProps), editorKeyHelper, title, content);
};
return props.getVirtualScrollerOption('loading') ? createLoading() : createElement();
};
// RadioCheckCell is used for the Radio and Checkbox selection and has the isRowSelected dependency
var RadioCheckCell = /*#__PURE__*/React.memo(function (props) {
return /*#__PURE__*/React.createElement(Cell, props);
}, function (prevProps, nextProps) {
if (nextProps.cellMemo === false) return false;
var keysToCompare = ['isRowSelected', 'field', 'allowCellSelection', 'isCellSelected', 'editMode', 'index', 'tabIndex', 'editing', 'expanded', 'editingMeta', 'rowData'];
return ObjectUtils.selectiveCompare(prevProps, nextProps, keysToCompare);
});
RadioCheckCell.displayName = 'RadioCheckCell';
var defaultKeysToCompare = ['rowData', 'field', 'allowCellSelection', 'isCellSelected', 'editMode', 'index', 'tabIndex', 'editing', 'expanded', 'editingMeta', 'frozenCol', 'alignFrozenCol'];
var BodyCell = /*#__PURE__*/React.memo(function (props) {
return /*#__PURE__*/React.createElement(Cell, props);
}, function (prevProps, nextProps) {
if (nextProps.cellMemo === false) return false;
var memoProps = nextProps.cellMemoProps;
var keysToCompare = Array.isArray(memoProps) && memoProps.every(function (prop) {
return typeof prop === 'string';
}) ? memoProps : defaultKeysToCompare;
var memoPropsDepth = nextProps.cellMemoPropsDepth;
var depth = typeof memoPropsDepth === 'number' && memoPropsDepth > 0 ? memoPropsDepth : 1;
return ObjectUtils.selectiveCompare(prevProps, nextProps, keysToCompare, depth);
});
BodyCell.displayName = 'BodyCell';
function ownKeys$1h(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$1h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1h(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var BodyRow = /*#__PURE__*/React.memo(function (props) {
var mergeProps = useMergeProps();
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
editingState = _React$useState2[0],
setEditingState = _React$useState2[1];
var editing = props.onRowEditChange ? props.editing : editingState;
var _props$ptCallbacks = props.ptCallbacks,
ptm = _props$ptCallbacks.ptm,
cx = _props$ptCallbacks.cx;
var isRowSelected = !props.allowCellSelection && props.selected || props.contextMenuSelected;
var getBodyRowPTOptions = function getBodyRowPTOptions(key) {
return ptm(key, {
parent: props.metaData,
hostName: props.hostName,
state: {
editing: editing
},
context: {
index: props.index,
selectable: props.allowRowSelection && props.isSelectable({
data: props.rowData,
index: props.rowIndex
}),
selected: isRowSelected,
stripedRows: props.metaData.props.stripedRows
}
});
};
var getColumnProp = function getColumnProp(column, name) {
return ColumnBase.getCProp(column, name);
};
var isFocusable = function isFocusable() {
return props.selectionMode && props.selectionModeInColumn !== 'single' && props.selectionModeInColumn !== 'multiple';
};
var isGrouped = function isGrouped(column) {
var columnField = getColumnProp(column, 'field');
if (props.groupRowsBy && columnField) {
return Array.isArray(props.groupRowsBy) ? props.groupRowsBy.indexOf(columnField) > -1 : props.groupRowsBy === columnField;
}
return false;
};
var equals = function equals(data1, data2) {
return props.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, props.dataKey);
};
var getTabIndex = function getTabIndex() {
return isFocusable() && !props.allowCellSelection ? props.rowIndex === 0 ? props.tabIndex : -1 : null;
};
var findIndex = function findIndex(collection, rowData) {
return (collection || []).findIndex(function (data) {
return equals(rowData, data);
});
};
var changeTabIndex = function changeTabIndex(currentElement, nextElement) {
if (currentElement && nextElement) {
currentElement.tabIndex = -1;
nextElement.tabIndex = props.tabIndex;
}
};
var findFirstSelectableRow = function findFirstSelectableRow(row) {
var firstRow = DomHandler.findSingle(row.parentNode, 'tr[data-p-selectable-row]');
return firstRow ? firstRow : null;
};
var _findNextSelectableRow = function findNextSelectableRow(row) {
var nextRow = row.nextElementSibling;
return nextRow ? DomHandler.getAttribute(nextRow, 'data-p-selectable-row') === true ? nextRow : _findNextSelectableRow(nextRow) : null;
};
var _findPrevSelectableRow = function findPrevSelectableRow(row) {
var prevRow = row.previousElementSibling;
return prevRow ? DomHandler.getAttribute(prevRow, 'data-p-selectable-row') === true ? prevRow : _findPrevSelectableRow(prevRow) : null;
};
var findLastSelectableRow = function findLastSelectableRow(row) {
var lastRow = DomHandler.findSingle(row.parentNode, 'tr[data-p-selectable-row]:last-child');
return lastRow ? lastRow : null;
};
var shouldRenderBodyCell = function shouldRenderBodyCell(value, column, i) {
if (getColumnProp(column, 'hidden')) {
return false;
} else if (props.rowGroupMode && props.rowGroupMode === 'rowspan' && isGrouped(column)) {
var prevRowData = value[i - 1];
if (prevRowData) {
var currentRowFieldData = ObjectUtils.resolveFieldData(value[i], getColumnProp(column, 'field'));
var previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, getColumnProp(column, 'field'));
return currentRowFieldData !== previousRowFieldData;
}
}
return true;
};
var calculateRowGroupSize = function calculateRowGroupSize(value, column, index) {
if (isGrouped(column)) {
var currentRowFieldData = ObjectUtils.resolveFieldData(value[index], getColumnProp(column, 'field'));
var nextRowFieldData = currentRowFieldData;
var groupRowSpan = 0;
while (currentRowFieldData === nextRowFieldData) {
groupRowSpan++;
var nextRowData = value[++index];
if (nextRowData) {
nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, getColumnProp(column, 'field'));
} else {
break;
}
}
return groupRowSpan === 1 ? null : groupRowSpan;
}
return null;
};
var _onClick = function onClick(event) {
props.onRowClick({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
};
var _onDoubleClick = function onDoubleClick(event) {
props.onRowDoubleClick({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
};
var _onPointerDown = function onPointerDown(event) {
props.onRowPointerDown({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
};
var _onPointerUp = function onPointerUp(event) {
props.onRowPointerUp({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
};
var onRightClick = function onRightClick(event) {
props.onRowRightClick({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
};
var _onMouseEnter = function onMouseEnter(event) {
props.onRowMouseEnter({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
};
var _onMouseLeave = function onMouseLeave(event) {
props.onRowMouseLeave({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
};
var _onTouchEnd = function onTouchEnd(event) {
props.onRowTouchEnd(event);
};
var _onKeyDown = function onKeyDown(event) {
if (isFocusable() && !props.allowCellSelection) {
var target = event.target,
row = event.currentTarget;
switch (event.code) {
case 'ArrowDown':
onArrowDownKey(row, event);
break;
case 'ArrowUp':
onArrowUpKey(row, event);
break;
case 'Home':
onHomeKey(row, event);
break;
case 'End':
onEndKey(row, event);
break;
case 'Enter':
case 'NumpadEnter':
onEnterKey(row, event, target);
break;
case 'Space':
onSpaceKey(row, event, target);
break;
case 'Tab':
onTabKey(row, event);
break;
}
}
};
var onArrowDownKey = function onArrowDownKey(row, event) {
var nextRow = _findNextSelectableRow(row);
if (nextRow) {
changeTabIndex(row, nextRow);
nextRow.focus();
}
event.preventDefault();
};
var onArrowUpKey = function onArrowUpKey(row, event) {
var prevRow = _findPrevSelectableRow(row);
if (prevRow) {
changeTabIndex(row, prevRow);
prevRow.focus();
}
event.preventDefault();
};
var onHomeKey = function onHomeKey(row, event) {
var firstRow = findFirstSelectableRow(row);
if (firstRow) {
changeTabIndex(row, firstRow);
firstRow.focus();
}
event.preventDefault();
};
var onEndKey = function onEndKey(row, event) {
var lastRow = findLastSelectableRow(row);
if (lastRow) {
changeTabIndex(row, lastRow);
lastRow.focus();
}
event.preventDefault();
};
var onEnterKey = function onEnterKey(row, event, target) {
if (!DomHandler.isClickable(target)) {
_onClick(event);
event.preventDefault();
}
};
var onSpaceKey = function onSpaceKey(row, event, target) {
if (!DomHandler.isClickable(target) && !target.readOnly) {
_onClick(event);
event.preventDefault();
}
};
var onTabKey = function onTabKey(row, event) {
var parent = row.parentNode;
var rows = DomHandler.find(parent, 'tr[data-p-selectable-row="true"]');
if (event.code === 'Tab' && rows && rows.length > 0) {
var firstSelectedRow = DomHandler.findSingle(parent, 'tr[data-p-highlight="true"]');
var focusedItem = DomHandler.findSingle(parent, 'tr[data-p-selectable-row="true"][tabindex="0"]');
if (firstSelectedRow) {
firstSelectedRow.tabIndex = '0';
focusedItem && focusedItem !== firstSelectedRow && (focusedItem.tabIndex = '-1');
} else {
rows[0].tabIndex = '0';
focusedItem !== rows[0] && (rows[props.rowIndex].tabIndex = '-1');
}
}
};
var _onMouseDown = function onMouseDown(event) {
props.onRowMouseDown({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
};
var _onMouseUp = function onMouseUp(event) {
props.onRowMouseUp({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
};
var _onDragStart = function onDragStart(event) {
props.onRowDragStart({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
};
var _onDragOver = function onDragOver(event) {
props.onRowDragOver({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
};
var _onDragLeave = function onDragLeave(event) {
props.onRowDragLeave({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
};
var _onDragEnd = function onDragEnd(event) {
props.onRowDragEnd({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
};
var _onDrop = function onDrop(event) {
props.onRowDrop({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
};
var onEditChange = function onEditChange(e, isEditing) {
if (props.onRowEditChange) {
var editingRows;
var dataKey = props.dataKey;
var originalEvent = e.originalEvent,
data = e.data,
index = e.index,
newData = e.newData;
if (dataKey) {
var dataKeyValue = String(ObjectUtils.resolveFieldData(data, dataKey));
editingRows = props.editingRows ? _objectSpread$1h({}, props.editingRows) : {};
if (!isEditing) {
delete editingRows[dataKeyValue];
// if the key value was changed, stop editing for the new key value too
var newDataKeyValue = String(ObjectUtils.resolveFieldData(newData, dataKey));
delete editingRows[newDataKeyValue];
} else {
editingRows[dataKeyValue] = true;
}
} else {
var editingRowIndex = findIndex(props.editingRows, data);
editingRows = props.editingRows ? _toConsumableArray(props.editingRows) : [];
if (editingRowIndex !== -1) {
editingRows = editingRows.filter(function (val, i) {
return i !== editingRowIndex;
});
} else {
editingRows.push(data);
}
}
props.onRowEditChange({
originalEvent: originalEvent,
data: editingRows,
index: index
});
} else {
setEditingState(isEditing);
}
};
var onEditInit = function onEditInit(e) {
var event = e.originalEvent;
if (props.onRowEditInit) {
props.onRowEditInit({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
}
onEditChange(e, true);
event.preventDefault();
};
var onEditSave = function onEditSave(e) {
var event = e.originalEvent,
newData = e.newData;
var valid = props.rowEditValidator ? props.rowEditValidator(newData, {
props: props.tableProps,
rowIndex: props.rowIndex
}) : true;
if (props.onRowEditSave) {
props.onRowEditSave({
originalEvent: event,
data: props.rowData,
index: props.rowIndex,
newData: newData,
valid: valid
});
}
if (valid) {
if (props.onRowEditComplete) {
props.onRowEditComplete(e);
}
onEditChange(e, false);
}
event.preventDefault();
};
var onEditCancel = function onEditCancel(e) {
var event = e.originalEvent;
if (props.onRowEditCancel) {
props.onRowEditCancel({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
}
onEditChange(e, false);
event.preventDefault();
};
var equalsDataCell = function equalsDataCell(data) {
return props.compareSelectionBy === 'equals' ? data === props.rowData : ObjectUtils.equals(data, props.rowData, props.dataKey);
};
var equalsCell = function equalsCell(selectedCell, field, colIndex) {
return selectedCell && (selectedCell.rowIndex === props.rowIndex || equalsDataCell(selectedCell.rowData)) && (selectedCell.field === field || selectedCell.cellIndex === colIndex);
};
var findIndexCell = function findIndexCell(collection, field, colIndex) {
return (collection || []).findIndex(function (data) {
return equalsCell(data, field, colIndex);
});
};
var isCellSelected = function isCellSelected(selection, field, colIndex) {
return selection ? selection instanceof Array ? findIndexCell(selection, field, colIndex) > -1 : equalsCell(selection, field, colIndex) : false;
};
var onCheckboxChange = function onCheckboxChange(event) {
props.onCheckboxChange({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
};
var editingKey = props.dataKey ? props.rowData && props.rowData[props.dataKey] || props.rowIndex : props.rowIndex;
var getVirtualScrollerOption = React.useCallback(function (option) {
return props.virtualScrollerOptions ? props.virtualScrollerOptions[option] : null;
}, [props.virtualScrollerOptions]);
var getEditingRowData = function getEditingRowData() {
return props.editingMeta && props.editingMeta[editingKey] ? props.editingMeta[editingKey].data : props.rowData;
};
var getTabIndexCell = React.useCallback(function (cellSelected, cellIndex) {
return props.allowCellSelection ? cellSelected ? 0 : props.rowIndex === 0 && cellIndex === 0 ? props.tabIndex : -1 : null;
}, [props.allowCellSelection, props.rowIndex, props.tabIndex]);
var findNextSelectableCell = React.useCallback(function (cell) {
var nextCell = cell.nextElementSibling;
return nextCell ? DomHandler.getAttribute(nextCell, 'data-p-selectable-cell') ? nextCell : findNextSelectableCell(nextCell) : null;
}, []);
var findPrevSelectableCell = React.useCallback(function (cell) {
var prevCell = cell.previousElementSibling;
return prevCell ? DomHandler.getAttribute(prevCell, 'data-p-selectable-cell') ? prevCell : findPrevSelectableCell(prevCell) : null;
}, []);
var findDownSelectableCell = React.useCallback(function (cell, cellIndex) {
var downRow = cell.parentElement.nextElementSibling;
var downCell = downRow ? downRow.children[cellIndex] : null;
return downRow && downCell ? DomHandler.getAttribute(downRow, 'data-p-selectable-row') && DomHandler.getAttribute(downCell, 'data-p-selectable-cell') ? downCell : findDownSelectableCell(downCell) : null;
}, []);
var findUpSelectableCell = React.useCallback(function (cell, cellIndex) {
var upRow = cell.parentElement.previousElementSibling;
var upCell = upRow ? upRow.children[cellIndex] : null;
return upRow && upCell ? DomHandler.getAttribute(upRow, 'data-p-selectable-row') && DomHandler.getAttribute(upCell, 'data-p-selectable-cell') ? upCell : findUpSelectableCell(upCell) : null;
}, []);
var focusOnElement = React.useCallback(function (focusTimeoutRef, editingState, elementRef, keyHelperRef) {
clearTimeout(focusTimeoutRef.current);
focusTimeoutRef.current = setTimeout(function () {
if (editingState) {
var focusableEl = props.editMode === 'cell' ? DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-pc-section="editorkeyhelperlabel"])') : DomHandler.findSingle(elementRef.current, '[data-p-row-editor-save="true"]');
focusableEl && focusableEl.focus();
}
keyHelperRef.current && (keyHelperRef.current.tabIndex = editingState ? -1 : 0);
}, 1);
}, [props.editMode]);
var focusOnInit = React.useCallback(function (initFocusTimeoutRef, elementRef) {
clearTimeout(initFocusTimeoutRef.current);
initFocusTimeoutRef.current = setTimeout(function () {
var focusableEl = props.editMode === 'row' ? DomHandler.findSingle(elementRef.current, '[data-p-row-editor-init="true"]') : null;
focusableEl && focusableEl.focus();
}, 1);
}, [props.editMode]);
var updateStickyPosition = React.useCallback(function (elementRef, frozen, alignFrozen, styleObjectState, setStyleObjectState) {
if (frozen) {
var styleObject = _objectSpread$1h({}, styleObjectState);
if (alignFrozen === 'right') {
var right = 0;
var next = elementRef.current && elementRef.current.nextElementSibling;
if (next && next.classList.contains('p-frozen-column')) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
}
styleObject.right = right + 'px';
} else {
var left = 0;
var prev = elementRef.current && elementRef.current.previousElementSibling;
while (prev) {
if (prev.classList.contains('p-frozen-column')) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
elementRef.current.style.left = left + 'px';
break;
}
prev = prev.previousElementSibling;
}
styleObject.left = left + 'px';
}
var isSameStyle = styleObjectState.left === styleObject.left && styleObjectState.right === styleObject.right;
!isSameStyle && setStyleObjectState(styleObject);
}
}, []);
var onCellClick = function onCellClick(event, params, isEditable, editingState, setEditingState, column, bindDocumentClickListener) {
if (props.editMode !== 'row' && isEditable && !editingState && (props.selectOnEdit || !props.selectOnEdit && props.isRowSelected)) {
var onBeforeCellEditShow = getColumnProp(column, 'onBeforeCellEditShow');
var onCellEditInit = getColumnProp(column, 'onCellEditInit');
var cellEditValidatorEvent = getColumnProp(column, 'cellEditValidatorEvent');
if (onBeforeCellEditShow) {
// if user returns false do not show the editor
if (onBeforeCellEditShow(params) === false) {
return;
}
// if user prevents default stop the editor
if (event && event.defaultPrevented) {
return;
}
}
// If the data is sorted using sort icon, it has been added to wait for the sort operation when any cell is wanted to be opened.
setTimeout(function () {
setEditingState(true);
if (onCellEditInit) {
if (onCellEditInit(params) === false) {
return;
}
// if user prevents default stop the editor
if (event && event.defaultPrevented) {
return;
}
}
if (cellEditValidatorEvent === 'click') {
bindDocumentClickListener();
}
}, 1);
}
if (props.allowCellSelection && props.onCellClick) {
props.onCellClick(params);
}
};
var createContent = function createContent() {
return props.columns.map(function (col, i) {
if (shouldRenderBodyCell(props.value, col, props.index)) {
var key = "".concat(props.rowIndex, "_").concat(getColumnProp(col, 'columnKey') || getColumnProp(col, 'field'), "_").concat(i);
var rowSpan = props.rowGroupMode === 'rowspan' ? calculateRowGroupSize(props.value, col, props.index) : null;
var field = getColumnProp(col, 'field') || "field_".concat(i);
var resolveFieldData = function resolveFieldData(data) {
return ObjectUtils.resolveFieldData(data || props.rowData, field);
};
var selectionMode = getColumnProp(col, 'selectionMode');
var cellProps = mergeProps({
hostName: props.hostName,
allowCellSelection: props.allowCellSelection,
cellMemo: props.cellMemo,
cellMemoProps: props.cellMemoProps,
cellMemoPropsDepth: props.cellMemoPropsDepth,
cellClassName: props.cellClassName,
checkIcon: props.checkIcon,
collapsedRowIcon: props.collapsedRowIcon,
field: field,
resolveFieldData: resolveFieldData,
column: col,
cProps: props.colsProps[i],
dataKey: props.dataKey,
editMode: props.editMode,
editing: editing,
editingMeta: props.editingMeta,
onEditingMetaChange: props.onEditingMetaChange,
editingKey: editingKey,
getEditingRowData: getEditingRowData,
expanded: props.expanded,
expandedRowIcon: props.expandedRowIcon,
frozenRow: props.frozenRow,
frozenCol: getColumnProp(col, 'frozen'),
alignFrozenCol: getColumnProp(col, 'alignFrozen'),
index: i,
isSelectable: props.isSelectable,
onCheckboxChange: onCheckboxChange,
onClick: onCellClick,
onMouseDown: props.onCellMouseDown,
onMouseUp: props.onCellMouseUp,
onRadioChange: props.onRadioChange,
onRowEditCancel: onEditCancel,
onRowEditInit: onEditInit,
onRowEditSave: onEditSave,
onRowToggle: props.onRowToggle,
responsiveLayout: props.responsiveLayout,
rowData: props.rowData,
rowEditorCancelIcon: props.rowEditorCancelIcon,
rowEditorInitIcon: props.rowEditorInitIcon,
rowEditorSaveIcon: props.rowEditorSaveIcon,
rowIndex: props.rowIndex,
rowSpan: rowSpan,
selectOnEdit: props.selectOnEdit,
isRowSelected: isRowSelected,
isCellSelected: isCellSelected(props.selection, field, i),
selectionAriaLabel: props.tableProps.selectionAriaLabel,
showRowReorderElement: props.showRowReorderElement,
showSelectionElement: props.showSelectionElement,
tabIndex: props.tabIndex,
getTabIndex: getTabIndexCell,
tableProps: props.tableProps,
tableSelector: props.tableSelector,
value: props.value,
getVirtualScrollerOption: getVirtualScrollerOption,
ptCallbacks: props.ptCallbacks,
metaData: props.metaData,
unstyled: props.unstyled,
findNextSelectableCell: findNextSelectableCell,
findPrevSelectableCell: findPrevSelectableCell,
findDownSelectableCell: findDownSelectableCell,
findUpSelectableCell: findUpSelectableCell,
focusOnElement: focusOnElement,
focusOnInit: focusOnInit,
updateStickyPosition: updateStickyPosition
});
return /*#__PURE__*/React.createElement(Fragment, {
key: key
}, selectionMode ? /*#__PURE__*/React.createElement(RadioCheckCell, cellProps) : /*#__PURE__*/React.createElement(BodyCell, cellProps));
}
return null;
});
};
var rowClassName = ObjectUtils.getPropValue(props.rowClassName, props.rowData, {
props: props.tableProps
});
var style = {
height: props.virtualScrollerOptions ? props.virtualScrollerOptions.itemSize : undefined
};
var content = createContent();
var tabIndex = getTabIndex();
var rowProps = mergeProps({
role: 'row',
tabIndex: tabIndex,
className: classNames(cx('bodyRow', {
rowProps: props
})),
style: style,
onMouseDown: function onMouseDown(e) {
return _onMouseDown(e);
},
onMouseUp: function onMouseUp(e) {
return _onMouseUp(e);
},
onMouseEnter: function onMouseEnter(e) {
return _onMouseEnter(e);
},
onMouseLeave: function onMouseLeave(e) {
return _onMouseLeave(e);
},
onClick: function onClick(e) {
return _onClick(e);
},
onDoubleClick: function onDoubleClick(e) {
return _onDoubleClick(e);
},
onPointerDown: function onPointerDown(e) {
return _onPointerDown(e);
},
onPointerUp: function onPointerUp(e) {
return _onPointerUp(e);
},
onContextMenu: function onContextMenu(e) {
return onRightClick(e);
},
onTouchEnd: function onTouchEnd(e) {
return _onTouchEnd(e);
},
onKeyDown: function onKeyDown(e) {
return _onKeyDown(e);
},
onDragStart: function onDragStart(e) {
return _onDragStart(e);
},
onDragOver: function onDragOver(e) {
return _onDragOver(e);
},
onDragLeave: function onDragLeave(e) {
return _onDragLeave(e);
},
onDragEnd: function onDragEnd(e) {
return _onDragEnd(e);
},
onDrop: function onDrop(e) {
return _onDrop(e);
},
'aria-selected': props !== null && props !== void 0 && props.selectionMode ? props.selected : null,
'data-p-selectable-row': props.allowRowSelection && props.isSelectable({
data: props.rowData,
index: props.rowIndex
}),
'data-p-highlight': props.selected,
'data-p-highlight-contextmenu': props.contextMenuSelected
}, getBodyRowPTOptions('bodyRow'), {
className: classNames(rowClassName) // #5983 must be last so all unstyled merging takes place first
});
return /*#__PURE__*/React.createElement("tr", rowProps, content);
});
BodyRow.displayName = 'BodyRow';
function ownKeys$1g(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$1g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1g(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var RowTogglerButton = /*#__PURE__*/React.memo(function (props) {
var mergeProps = useMergeProps();
var _props$ptCallbacks = props.ptCallbacks,
ptm = _props$ptCallbacks.ptm,
ptmo = _props$ptCallbacks.ptmo,
cx = _props$ptCallbacks.cx;
_props$ptCallbacks.isUnstyled;
var _onClick = function onClick(event) {
props.onClick({
originalEvent: event,
data: props.rowData
});
};
var getColumnProps = function getColumnProps() {
return ColumnBase.getCProps(props.column);
};
var getColumnPTOptions = function getColumnPTOptions(key) {
var cProps = getColumnProps();
var columnMetaData = {
props: getColumnProps(),
parent: props.metaData,
hostName: props.hostName
};
return mergeProps(ptm("column.".concat(key), {
column: columnMetaData
}), ptm("column.".concat(key), columnMetaData), ptmo(cProps, key, columnMetaData));
};
var rowGroupTogglerIconProps = mergeProps({
className: cx('rowGroupTogglerIcon'),
'aria-hidden': true
}, ptm('rowGroupTogglerIcon'), getColumnPTOptions('rowGroupTogglerIcon'));
var icon = props.expanded ? props.expandedRowIcon || /*#__PURE__*/React.createElement(ChevronDownIcon, rowGroupTogglerIconProps) : props.collapsedRowIcon || /*#__PURE__*/React.createElement(ChevronRightIcon, rowGroupTogglerIconProps);
var togglerIcon = IconUtils.getJSXIcon(icon, _objectSpread$1g({}, rowGroupTogglerIconProps), {
props: props
});
var label = props.expanded ? ariaLabel('collapseLabel') : ariaLabel('expandLabel');
var rowGroupTogglerProps = mergeProps({
type: 'button',
onClick: function onClick(e) {
return _onClick(e);
},
className: cx('rowGroupToggler'),
tabIndex: props.tabIndex,
'aria-label': label
}, ptm('rowGroupToggler'), getColumnPTOptions('rowGroupToggler'));
return /*#__PURE__*/React.createElement("button", rowGroupTogglerProps, togglerIcon, /*#__PURE__*/React.createElement(Ripple, null));
});
RowTogglerButton.displayName = 'RowTogglerButton';
var _excluded$2 = ["originalEvent"];
function ownKeys$1f(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$1f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1f(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (props, ref) {
var mergeProps = useMergeProps();
var _props$ptCallbacks = props.ptCallbacks,
ptm = _props$ptCallbacks.ptm,
ptmo = _props$ptCallbacks.ptmo,
cx = _props$ptCallbacks.cx,
isUnstyled = _props$ptCallbacks.isUnstyled;
var _React$useState = React.useState({}),
_React$useState2 = _slicedToArray(_React$useState, 2),
rowGroupHeaderStyleObjectState = _React$useState2[0],
setRowGroupHeaderStyleObjectState = _React$useState2[1];
var getColumnProps = function getColumnProps(column) {
return ColumnBase.getCProps(column);
};
var cProps = getColumnProps(props.column);
var colsProps = props.columns ? props.columns.map(function (col) {
return getColumnProps(col);
}) : [];
var getColumnPTOptions = function getColumnPTOptions(key) {
var columnMetaData = {
props: cProps,
parent: props.metaData,
hostName: props.hostName,
state: {
rowGroupHeaderStyleObject: rowGroupHeaderStyleObjectState
}
};
return mergeProps(ptm("column.".concat(key), {
column: columnMetaData
}), ptm("column.".concat(key), columnMetaData), ptmo(cProps, key, columnMetaData));
};
var elementRef = React.useRef(null);
var refCallback = React.useCallback(function (el) {
elementRef.current = el;
props.virtualScrollerContentRef && props.virtualScrollerContentRef(el);
}, [props]);
var dragSelectionHelper = React.useRef(null);
var initialDragPosition = React.useRef(null);
var anchorRowIndex = React.useRef(null);
var anchorCellIndex = React.useRef(null);
var rangeRowIndex = React.useRef(null);
var anchorRowFirst = React.useRef(null);
var rowTouched = React.useRef(false);
var rowDragging = React.useRef(false);
var draggedRowIndex = React.useRef(null);
var droppedRowIndex = React.useRef(null);
var isSubheaderGrouping = props.rowGroupMode && props.rowGroupMode === 'subheader';
var isRadioSelectionMode = props.selectionMode === 'radiobutton';
var isCheckboxSelectionMode = props.selectionMode === 'checkbox';
var isRadioSelectionModeInColumn = props.selectionModeInColumn === 'single';
var isCheckboxSelectionModeInColumn = props.selectionModeInColumn === 'multiple';
var equals = function equals(data1, data2) {
if (allowCellSelection()) {
return (data1.rowIndex === data2.rowIndex || data1.rowData === data2.rowData) && (data1.field === data2.field || data1.cellIndex === data2.cellIndex);
}
return props.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, props.dataKey);
};
var isSelectionEnabled = function isSelectionEnabled() {
return props.selectionMode || props.selectionModeInColumn !== null || props.columns && props.columns.some(function (col) {
return col && !!getColumnProp(col, 'selectionMode');
});
};
var isSingleSelection = function isSingleSelection() {
return props.selectionMode === 'single' && !isCheckboxSelectionModeInColumn || !isRadioSelectionMode && isRadioSelectionModeInColumn;
};
var isMultipleSelection = function isMultipleSelection() {
return props.selectionMode === 'multiple' && !isRadioSelectionModeInColumn || isCheckboxSelectionModeInColumn;
};
var isRadioOnlySelection = function isRadioOnlySelection() {
return isRadioSelectionMode && isRadioSelectionModeInColumn;
};
var isCheckboxOnlySelection = function isCheckboxOnlySelection() {
return isCheckboxSelectionMode && isCheckboxSelectionModeInColumn;
};
var isSelected = function isSelected(rowData) {
if (rowData && props.selection) {
return props.selection instanceof Array ? findIndex(props.selection, rowData) > -1 : equals(rowData, props.selection);
}
return false;
};
var isContextMenuSelected = function isContextMenuSelected(rowData) {
if (rowData && props.contextMenuSelection) {
return equals(rowData, props.contextMenuSelection);
}
return false;
};
var isSelectable = function isSelectable(options) {
return props.isDataSelectable ? props.isDataSelectable(options) : true;
};
var isRowExpanded = function isRowExpanded(rowData) {
if (rowData && props.expandedRows) {
if (isSubheaderGrouping && props.expandableRowGroups) {
return isRowGroupExpanded(rowData);
}
if (props.dataKey) {
var rowId = ObjectUtils.resolveFieldData(rowData, props.dataKey);
var expanded = false;
if (props.expandedRows) {
if (Array.isArray(props.expandedRows)) {
expanded = props.expandedRows.some(function (row) {
return ObjectUtils.resolveFieldData(row, props.dataKey) === rowId;
});
} else {
expanded = props.expandedRows[rowId] !== undefined;
}
}
return expanded;
}
return findIndex(props.expandedRows, rowData) !== -1;
}
return false;
};
var isRowGroupExpanded = function isRowGroupExpanded(rowData) {
if (props.dataKey === props.groupRowsBy) {
return Object.keys(props.expandedRows).some(function (data) {
return ObjectUtils.equals(data, ObjectUtils.resolveFieldData(rowData, props.dataKey));
});
}
return props.expandedRows.some(function (data) {
return ObjectUtils.equals(data, rowData, props.groupRowsBy);
});
};
var isRowEditing = function isRowEditing(rowData) {
if (props.editMode === 'row' && rowData && props.editingRows) {
if (props.dataKey) {
return props.editingRows ? props.editingRows[ObjectUtils.resolveFieldData(rowData, props.dataKey)] !== undefined : false;
}
return findIndex(props.editingRows, rowData) !== -1;
}
return false;
};
var allowDrag = function allowDrag(event) {
return props.dragSelection && isMultipleSelection() && !event.originalEvent.shiftKey;
};
var allowRowDrag = function allowRowDrag(event) {
return !allowCellSelection() && allowDrag(event) || props.reorderableRows;
};
var allowCellDrag = function allowCellDrag(event) {
return allowCellSelection() && allowDrag(event);
};
var allowSelection = function allowSelection(event) {
return !DomHandler.isClickable(event.originalEvent.target);
};
var metaKeySelectionRef = React.useRef(props.metaKeySelection);
React.useEffect(function () {
metaKeySelectionRef.current = props.metaKeySelection;
}, [props.metaKeySelection]);
var allowMetaKeySelection = function allowMetaKeySelection(event) {
return !rowTouched.current && (!metaKeySelectionRef.current || metaKeySelectionRef.current && (event.originalEvent.metaKey || event.originalEvent.ctrlKey));
};
var allowRangeSelection = function allowRangeSelection(event) {
return isMultipleSelection() && event.originalEvent.shiftKey && anchorRowIndex.current !== null;
};
var allowRowSelection = function allowRowSelection() {
return (props.selectionMode || props.selectionModeInColumn) && !isRadioOnlySelection() && !isCheckboxOnlySelection();
};
var allowCellSelection = function allowCellSelection() {
return props.cellSelection && !isRadioSelectionModeInColumn && !isCheckboxSelectionModeInColumn;
};
var getColumnsLength = function getColumnsLength() {
return props.columns ? props.columns.length : 0;
};
var getColumnProp = function getColumnProp(column, name) {
return ColumnBase.getCProp(column, name);
};
var getVirtualScrollerOption = function getVirtualScrollerOption(option, options) {
options = options || props.virtualScrollerOptions;
return options ? options[option] : null;
};
var findIndex = function findIndex(collection, rowData) {
return (collection || []).findIndex(function (data) {
return equals(rowData, data);
});
};
var rowGroupHeaderStyle = function rowGroupHeaderStyle() {
if (props.scrollable) {
return {
top: rowGroupHeaderStyleObjectState.top
};
}
return null;
};
var getRowKey = function getRowKey(rowData, index) {
return props.dataKey ? ObjectUtils.resolveFieldData(rowData, props.dataKey) : index;
};
var shouldRenderRowGroupHeader = function shouldRenderRowGroupHeader(value, rowData, i) {
var currentRowFieldData = ObjectUtils.resolveFieldData(rowData, props.groupRowsBy);
var prevRowData = value[i - 1];
if (prevRowData) {
var previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, props.groupRowsBy);
return !ObjectUtils.deepEquals(currentRowFieldData, previousRowFieldData);
}
return true;
};
var shouldRenderRowGroupFooter = function shouldRenderRowGroupFooter(value, rowData, i, expanded) {
if (props.expandableRowGroups && !expanded) {
return false;
}
var currentRowFieldData = ObjectUtils.resolveFieldData(rowData, props.groupRowsBy);
var nextRowData = value[i + 1];
if (nextRowData) {
var nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, props.groupRowsBy);
return !ObjectUtils.deepEquals(currentRowFieldData, nextRowFieldData);
}
return true;
};
var updateFrozenRowStickyPosition = function updateFrozenRowStickyPosition() {
elementRef.current.style.top = DomHandler.getOuterHeight(elementRef.current.previousElementSibling) + 'px';
};
var updateFrozenRowGroupHeaderStickyPosition = function updateFrozenRowGroupHeaderStickyPosition() {
var tableHeaderHeight = DomHandler.getOuterHeight(elementRef.current.previousElementSibling);
var top = tableHeaderHeight + 'px';
if (rowGroupHeaderStyleObjectState.top !== top) {
setRowGroupHeaderStyleObjectState({
top: top
});
}
};
var selectionRef = React.useRef(props.selection);
React.useEffect(function () {
selectionRef.current = props.selection;
}, [props.selection]);
var onSingleSelection = function onSingleSelection(_ref) {
var originalEvent = _ref.originalEvent,
data = _ref.data,
index = _ref.index,
toggleable = _ref.toggleable,
type = _ref.type;
if (!isSelectable({
data: data,
index: index
})) {
return;
}
var selected = isSelected(data);
var currentSelection = selectionRef.current || [];
var newSelection = currentSelection;
if (selected) {
if (toggleable) {
newSelection = null;
onUnselect({
originalEvent: originalEvent,
data: data,
type: type
});
}
} else {
newSelection = data;
onSelect({
originalEvent: originalEvent,
data: data,
type: type
});
}
focusOnElement(originalEvent, true);
if (props.onSelectionChange && newSelection !== currentSelection) {
props.onSelectionChange({
originalEvent: originalEvent,
value: newSelection,
type: type
});
}
};
var onMultipleSelection = function onMultipleSelection(_ref2) {
var originalEvent = _ref2.originalEvent,
data = _ref2.data,
index = _ref2.index,
toggleable = _ref2.toggleable,
type = _ref2.type;
if (!isSelectable({
data: data,
index: index
})) {
return;
}
var selected = isSelected(data);
var currentSelection = selectionRef.current || [];
var newSelection = currentSelection;
if (selected) {
if (toggleable) {
var selectionIndex = findIndex(currentSelection, data);
newSelection = currentSelection.filter(function (val, i) {
return i !== selectionIndex;
});
onUnselect({
originalEvent: originalEvent,
data: data,
type: type
});
} else if (currentSelection.length) {
currentSelection.forEach(function (d) {
return onUnselect({
originalEvent: originalEvent,
data: d,
type: type
});
});
newSelection = [data];
onSelect({
originalEvent: originalEvent,
data: data,
type: type
});
}
} else {
newSelection = ObjectUtils.isObject(currentSelection) ? [currentSelection] : currentSelection;
newSelection = toggleable && isMultipleSelection() ? [].concat(_toConsumableArray(newSelection), [data]) : [data];
onSelect({
originalEvent: originalEvent,
data: data,
type: type
});
}
if (props.onSelectionChange && newSelection !== currentSelection) {
props.onSelectionChange({
originalEvent: originalEvent,
value: newSelection,
type: type
});
}
};
var onRangeSelection = function onRangeSelection(event, type) {
DomHandler.clearSelection();
rangeRowIndex.current = allowCellSelection() ? event.rowIndex : event.index;
var selection = selectRange(event);
if (props.onSelectionChange && selection !== props.selection) {
props.onSelectionChange({
originalEvent: event.originalEvent,
value: selection,
type: type
});
}
anchorRowIndex.current = rangeRowIndex.current;
anchorCellIndex.current = event.cellIndex;
};
var selectRange = function selectRange(event) {
var rangeStart;
var rangeEnd;
var isAllowCellSelection = allowCellSelection();
if (rangeRowIndex.current > anchorRowIndex.current) {
rangeStart = anchorRowIndex.current;
rangeEnd = rangeRowIndex.current;
} else if (rangeRowIndex.current < anchorRowIndex.current) {
rangeStart = rangeRowIndex.current;
rangeEnd = anchorRowIndex.current;
} else {
rangeStart = rangeEnd = rangeRowIndex.current;
}
return isAllowCellSelection ? selectRangeOnCell(event, rangeStart, rangeEnd) : selectRangeOnRow(event, rangeStart, rangeEnd);
};
var selectRangeOnRow = function selectRangeOnRow(event, rowRangeStart, rowRangeEnd) {
var selection = [];
for (var i = rowRangeStart; i <= rowRangeEnd; i++) {
var rangeRowData = props.processedData[i];
if (!isSelectable({
data: rangeRowData,
index: i
})) {
continue;
}
selection.push(rangeRowData);
onSelect({
originalEvent: event.originalEvent,
data: rangeRowData,
type: 'row'
});
}
return selection;
};
var selectRangeOnCell = function selectRangeOnCell(event, rowRangeStart, rowRangeEnd) {
var cellRangeStart;
var cellRangeEnd;
var cellIndex = event.cellIndex;
if (cellIndex > anchorCellIndex.current) {
cellRangeStart = anchorCellIndex.current;
cellRangeEnd = cellIndex;
} else if (cellIndex < anchorCellIndex.current) {
cellRangeStart = cellIndex;
cellRangeEnd = anchorCellIndex.current;
} else {
cellRangeStart = cellRangeEnd = cellIndex;
}
var value = props.value;
var selection = [];
for (var i = rowRangeStart; i <= rowRangeEnd; i++) {
var rowData = value[i];
var columns = props.columns;
var rowIndex = props.paginator ? i + props.first : i;
for (var j = cellRangeStart; j <= cellRangeEnd; j++) {
var field = getColumnProp(columns[j], 'field');
var _value = ObjectUtils.resolveFieldData(rowData, field);
var rangeRowData = {
value: _value,
field: field,
rowData: rowData,
rowIndex: rowIndex,
cellIndex: j,
selected: true
};
if (!isSelectable({
data: rangeRowData,
index: i
})) {
continue;
}
selection.push(rangeRowData);
onSelect({
originalEvent: event.originalEvent,
data: rangeRowData,
type: 'cell'
});
}
}
return selection;
};
var onSelect = function onSelect(event) {
if (allowCellSelection()) {
props.onCellSelect && props.onCellSelect(_objectSpread$1f(_objectSpread$1f({
originalEvent: event.originalEvent
}, event.data), {}, {
type: event.type
}));
} else {
props.onRowSelect && props.onRowSelect(event);
}
};
var onUnselect = function onUnselect(event) {
if (allowCellSelection()) {
props.onCellUnselect && props.onCellUnselect(_objectSpread$1f(_objectSpread$1f({
originalEvent: event.originalEvent
}, event.data), {}, {
type: event.type
}));
} else {
props.onRowUnselect && props.onRowUnselect(event);
}
};
var enableDragSelection = function enableDragSelection(event) {
if (props.dragSelection && !dragSelectionHelper.current) {
dragSelectionHelper.current = document.createElement('div');
dragSelectionHelper.current.setAttribute('p-datatable-drag-selection-helper', 'true');
!isUnstyled() && DomHandler.addClass(dragSelectionHelper.current, 'p-datatable-drag-selection-helper');
initialDragPosition.current = {
x: event.clientX,
y: event.clientY
};
dragSelectionHelper.current.style.top = "".concat(event.pageY, "px");
dragSelectionHelper.current.style.left = "".concat(event.pageX, "px");
bindDragSelectionEvents();
}
};
var focusOnElement = function focusOnElement(event, isFocused) {
var target = event.currentTarget;
if (!allowCellSelection() && props.selectionAutoFocus) {
if (isCheckboxSelectionModeInColumn) {
var checkbox = DomHandler.findSingle(target, 'td[data-p-selection-column="true"] [data-pc-section="checkbox"]');
checkbox && checkbox.focus();
} else if (isRadioSelectionModeInColumn) {
var radio = DomHandler.findSingle(target, 'td[data-p-selection-column="true"] input[type="radio"]');
radio && radio.focus();
}
}
!isFocused && target && target.focus();
};
var changeTabIndex = function changeTabIndex(event, type) {
var target = event.currentTarget;
var isSelectable = DomHandler.getAttribute(target, type === 'cell' ? 'data-p-selectable-cell' : 'data-p-selectable-row') === true;
if (isSelectable) {
var selector = type === 'cell' ? 'tr > td' : 'tr';
var tabbableEl = DomHandler.findSingle(elementRef.current, "".concat(selector, "[tabindex=\"").concat(props.tabIndex, "\"]"));
if (tabbableEl && target) {
tabbableEl.tabIndex = -1;
target.tabIndex = props.tabIndex;
}
}
};
var onRowClick = function onRowClick(event) {
if (event.defaultPrevented || event.originalEvent && event.originalEvent.defaultPrevented || allowCellSelection() || !allowSelection(event)) {
return;
}
props.onRowClick && props.onRowClick(event);
if (allowRowSelection()) {
if (allowRangeSelection(event)) {
onRangeSelection(event, 'row');
} else {
var toggleable = isRadioSelectionModeInColumn || isCheckboxSelectionModeInColumn || allowMetaKeySelection(event);
anchorRowIndex.current = event.index;
rangeRowIndex.current = event.index;
anchorRowFirst.current = props.first;
if (isSingleSelection()) {
onSingleSelection(_objectSpread$1f(_objectSpread$1f({}, event), {}, {
toggleable: toggleable,
type: 'row'
}));
} else {
onMultipleSelection(_objectSpread$1f(_objectSpread$1f({}, event), {}, {
toggleable: toggleable,
type: 'row'
}));
}
}
changeTabIndex(event.originalEvent, 'row');
} else {
focusOnElement(event.originalEvent);
}
rowTouched.current = false;
};
var onRowDoubleClick = function onRowDoubleClick(e) {
var event = e.originalEvent;
if (DomHandler.isClickable(event.target)) {
return;
}
if (props.onRowDoubleClick) {
props.onRowDoubleClick(e);
}
};
var onRowPointerDown = function onRowPointerDown(e) {
var event = e.originalEvent;
if (DomHandler.isClickable(event.target)) {
return;
}
if (props.onRowPointerDown) {
props.onRowPointerDown(e);
}
};
var onRowPointerUp = function onRowPointerUp(e) {
var event = e.originalEvent;
if (DomHandler.isClickable(event.target)) {
return;
}
if (props.onRowPointerUp) {
props.onRowPointerUp(e);
}
};
var onRowRightClick = function onRowRightClick(event) {
if (props.onContextMenu || props.onContextMenuSelectionChange) {
var hasSelection = ObjectUtils.isNotEmpty(props.selection);
var data = event.data;
if (hasSelection) {
DomHandler.clearSelection();
}
if (props.onContextMenuSelectionChange) {
props.onContextMenuSelectionChange({
originalEvent: event.originalEvent,
value: data,
index: event.index
});
}
if (props.onContextMenu) {
props.onContextMenu({
originalEvent: event.originalEvent,
data: data,
index: event.index
});
}
event.originalEvent.preventDefault();
}
};
var onRowMouseEnter = function onRowMouseEnter(event) {
props.onRowMouseEnter && props.onRowMouseEnter(event);
};
var onRowMouseLeave = function onRowMouseLeave(event) {
props.onRowMouseLeave && props.onRowMouseLeave(event);
};
var onRowTouchEnd = function onRowTouchEnd() {
rowTouched.current = true;
};
var onRowMouseDown = function onRowMouseDown(e) {
var event = e.originalEvent;
var isDraggableHandle = isUnstyled() ? DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowreordericon' || event.target.closest('[data-pc-section="rowreordericon"]') : DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle') || event.target.closest('.p-datatable-reorderablerow-handle');
event.currentTarget.draggable = isDraggableHandle;
//event.target.draggable = isDraggableHandle;
if (allowRowDrag(e)) {
enableDragSelection(event);
anchorRowIndex.current = e.index;
rangeRowIndex.current = e.index;
anchorRowFirst.current = props.first;
}
};
var onRowMouseUp = function onRowMouseUp(event) {
var isSameRow = event.index === anchorRowIndex.current;
if (allowRowDrag(event) && !isSameRow) {
onRangeSelection(event, 'row');
}
};
var expandedRowsRef = React.useRef(props.expandedRows);
React.useEffect(function () {
expandedRowsRef.current = props.expandedRows;
}, [props.expandedRows]);
var onRowToggle = function onRowToggle(event) {
var expandedRows;
var dataKey = props.dataKey;
var hasDataKey = props.groupRowsBy ? dataKey === props.groupRowsBy : !!dataKey;
if (hasDataKey) {
var dataKeyValue = String(ObjectUtils.resolveFieldData(event.data, dataKey));
expandedRows = expandedRowsRef.current ? _objectSpread$1f({}, expandedRowsRef.current) : {};
if (expandedRows[dataKeyValue] != null) {
delete expandedRows[dataKeyValue];
if (props.onRowCollapse) {
props.onRowCollapse({
originalEvent: event,
data: event.data
});
}
} else {
expandedRows[dataKeyValue] = true;
if (props.onRowExpand) {
props.onRowExpand({
originalEvent: event,
data: event.data
});
}
}
} else {
var expandedRowIndex = findIndex(expandedRowsRef.current, event.data);
expandedRows = expandedRowsRef.current ? _toConsumableArray(expandedRowsRef.current) : [];
if (expandedRowIndex !== -1) {
expandedRows = expandedRows.filter(function (_, i) {
return i !== expandedRowIndex;
});
if (props.onRowCollapse) {
props.onRowCollapse({
originalEvent: event,
data: event.data
});
}
} else {
expandedRows.push(event.data);
if (props.onRowExpand) {
props.onRowExpand({
originalEvent: event,
data: event.data
});
}
}
}
if (props.onRowToggle) {
props.onRowToggle({
data: expandedRows
});
}
};
var onRowDragStart = function onRowDragStart(e) {
var event = e.originalEvent,
index = e.index;
if (allowRowDrag(e)) {
rowDragging.current = true;
draggedRowIndex.current = index;
event.dataTransfer.setData('text', 'b'); // For firefox
}
};
var onRowDragOver = function onRowDragOver(e) {
var event = e.originalEvent,
index = e.index;
if (!rowDragging.current) {
return;
}
if (draggedRowIndex.current !== index) {
var rowElement = event.currentTarget;
var rowY = DomHandler.getOffset(rowElement).top + DomHandler.getWindowScrollTop();
var pageY = event.pageY + window.scrollY;
var rowMidY = rowY + DomHandler.getOuterHeight(rowElement) / 2;
var prevRowElement = rowElement.previousElementSibling;
if (pageY < rowMidY) {
rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
!isUnstyled() && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
droppedRowIndex.current = index;
if (prevRowElement) {
prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'true');
!isUnstyled() && DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom');
} else {
rowElement.setAttribute('data-p-datatable-dragpoint-top', 'true');
!isUnstyled() && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
}
} else {
if (prevRowElement) {
prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
!isUnstyled() && DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
} else {
rowElement.setAttribute('data-p-datatable-dragpoint-top', 'true');
!isUnstyled() && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
}
if (index + 1 !== draggedRowIndex.current) droppedRowIndex.current = index + 1;
rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'true');
!isUnstyled() && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom');
}
}
event.preventDefault();
};
var onRowDragLeave = function onRowDragLeave(e) {
var event = e.originalEvent;
var rowElement = event.currentTarget;
var prevRowElement = rowElement.previousElementSibling;
if (prevRowElement) {
prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
!isUnstyled() && DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
}
rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
!isUnstyled() && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
rowElement.setAttribute('data-p-datatable-dragpoint-top', 'false');
!isUnstyled() && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top');
};
var onRowDragEnd = function onRowDragEnd(e) {
var event = e.originalEvent;
rowDragging.current = false;
draggedRowIndex.current = null;
droppedRowIndex.current = null;
event.currentTarget.draggable = false;
};
var onRowDrop = function onRowDrop(e) {
var event = e.originalEvent;
if (droppedRowIndex.current != null) {
var dropIndex = draggedRowIndex.current > droppedRowIndex.current ? droppedRowIndex.current : droppedRowIndex.current === 0 ? 0 : droppedRowIndex.current - 1;
var val = _toConsumableArray(props.tableProps.value);
ObjectUtils.reorderArray(val, draggedRowIndex.current, dropIndex);
if (props.onRowReorder) {
props.onRowReorder({
originalEvent: event,
value: val,
dragIndex: draggedRowIndex.current,
dropIndex: dropIndex
});
}
}
//cleanup
onRowDragLeave(e);
onRowDragEnd(e);
event.preventDefault();
};
var onRadioChange = function onRadioChange(event) {
onSingleSelection(_objectSpread$1f(_objectSpread$1f({}, event), {}, {
toggleable: true,
type: 'radio'
}));
};
var onCheckboxChange = function onCheckboxChange(event) {
onMultipleSelection(_objectSpread$1f(_objectSpread$1f({}, event), {}, {
toggleable: true,
type: 'checkbox'
}));
};
var onDragSelectionMouseMove = function onDragSelectionMouseMove(event) {
var _initialDragPosition$ = initialDragPosition.current,
x = _initialDragPosition$.x,
y = _initialDragPosition$.y;
var dx = event.clientX - x;
var dy = event.clientY - y;
if (dy < 0) {
dragSelectionHelper.current.style.top = "".concat(event.pageY + 5, "px");
}
if (dx < 0) {
dragSelectionHelper.current.style.left = "".concat(event.pageX + 5, "px");
}
dragSelectionHelper.current.style.height = "".concat(Math.abs(dy), "px");
dragSelectionHelper.current.style.width = "".concat(Math.abs(dx), "px");
event.preventDefault();
};
var _onDragSelectionMouseUp = function onDragSelectionMouseUp() {
if (dragSelectionHelper.current) {
dragSelectionHelper.current.remove();
dragSelectionHelper.current = null;
}
document.removeEventListener('mousemove', onDragSelectionMouseMove);
document.removeEventListener('mouseup', _onDragSelectionMouseUp);
};
var onCellClick = function onCellClick(event) {
if (!allowSelection(event)) {
return;
}
props.onCellClick && props.onCellClick(event);
if (allowCellSelection()) {
if (allowRangeSelection(event)) {
onRangeSelection(event, 'cell');
} else {
var toggleable = allowMetaKeySelection(event);
var originalEvent = event.originalEvent,
data = _objectWithoutProperties(event, _excluded$2);
anchorRowIndex.current = event.rowIndex;
rangeRowIndex.current = event.rowIndex;
anchorRowFirst.current = props.first;
anchorCellIndex.current = event.cellIndex;
if (isSingleSelection()) {
onSingleSelection({
originalEvent: originalEvent,
data: data,
index: event.rowIndex,
toggleable: toggleable,
type: 'cell'
});
} else {
onMultipleSelection({
originalEvent: originalEvent,
data: data,
index: event.rowIndex,
toggleable: toggleable,
type: 'cell'
});
}
}
changeTabIndex(event.originalEvent, 'cell');
}
rowTouched.current = false;
};
var onCellMouseDown = function onCellMouseDown(event) {
if (allowCellDrag(event)) {
enableDragSelection(event.originalEvent);
anchorRowIndex.current = event.rowIndex;
rangeRowIndex.current = event.rowIndex;
anchorRowFirst.current = props.first;
anchorCellIndex.current = event.cellIndex;
}
};
var onCellMouseUp = function onCellMouseUp(event) {
var isSameCell = event.rowIndex === anchorRowIndex.current && event.cellIndex === anchorCellIndex.current;
if (allowCellDrag(event) && !isSameCell) {
onRangeSelection(event, 'cell');
}
};
var bindDragSelectionEvents = function bindDragSelectionEvents() {
document.addEventListener('mousemove', onDragSelectionMouseMove);
document.addEventListener('mouseup', _onDragSelectionMouseUp);
document.body.appendChild(dragSelectionHelper.current);
};
var unbindDragSelectionEvents = function unbindDragSelectionEvents() {
_onDragSelectionMouseUp();
};
React.useEffect(function () {
if (props.frozenRow) {
updateFrozenRowStickyPosition();
}
if (props.scrollable && props.rowGroupMode === 'subheader') {
updateFrozenRowGroupHeaderStickyPosition();
}
});
useUpdateEffect(function () {
if (props.paginator && isMultipleSelection()) {
anchorRowIndex.current = null;
}
}, [props.first]);
useUnmountEffect(function () {
if (props.dragSelection) {
unbindDragSelectionEvents();
}
});
var createEmptyContent = function createEmptyContent() {
if (!props.loading) {
var colSpan = getColumnsLength();
var _content = ObjectUtils.getJSXElement(props.emptyMessage, {
props: props.tableProps,
frozen: props.frozenRow
}) || localeOption('emptyMessage');
var emptyMessageProps = mergeProps({
className: cx('emptyMessage'),
role: 'row'
}, ptm('emptyMessage'));
var bodyCellProps = mergeProps({
colSpan: colSpan,
role: 'cell'
}, getColumnPTOptions('root'), getColumnPTOptions('bodyCell'));
return /*#__PURE__*/React.createElement("tr", emptyMessageProps, /*#__PURE__*/React.createElement("td", bodyCellProps, _content));
}
return null;
};
var createGroupHeader = function createGroupHeader(rowData, rowIndex, expanded, colSpan) {
if (isSubheaderGrouping && shouldRenderRowGroupHeader(props.value, rowData, rowIndex - props.first)) {
var style = rowGroupHeaderStyle();
var toggler = props.expandableRowGroups && /*#__PURE__*/React.createElement(RowTogglerButton, {
hostName: props.hostName,
onClick: onRowToggle,
rowData: rowData,
expanded: expanded,
expandedRowIcon: props.expandedRowIcon,
collapsedRowIcon: props.collapsedRowIcon,
ptCallbacks: props.ptCallbacks,
metaData: props.metaData,
unstyled: isUnstyled()
});
var options = {
index: rowIndex,
props: props.tableProps,
customRendering: false
};
var _content2 = ObjectUtils.getJSXElement(props.rowGroupHeaderTemplate, rowData, options);
// check if the user wants complete control of the rendering
if (!options.customRendering) {
var bodyCellProps = mergeProps({
colSpan: colSpan
}, getColumnPTOptions('root'), getColumnPTOptions('bodyCell'));
var rowGroupHeaderNameProps = mergeProps({
className: cx('rowGroupHeaderName')
}, ptm('rowGroupHeaderName'));
_content2 = /*#__PURE__*/React.createElement("td", bodyCellProps, toggler, /*#__PURE__*/React.createElement("span", rowGroupHeaderNameProps, _content2));
}
var rowGroupHeaderProps = mergeProps({
className: cx('rowGroupHeader'),
style: style,
role: 'row'
}, ptm('rowGroupHeader'));
return /*#__PURE__*/React.createElement("tr", rowGroupHeaderProps, _content2);
}
return null;
};
var createRow = function createRow(rowData, rowIndex, index, expanded) {
if (!props.expandableRowGroups || expanded) {
var selected = isSelectionEnabled() ? isSelected(rowData) : false;
var contextMenuSelected = isContextMenuSelected(rowData);
var _allowRowSelection = allowRowSelection();
var _allowCellSelection = allowCellSelection();
var editing = isRowEditing(rowData);
return /*#__PURE__*/React.createElement(BodyRow, {
hostName: props.hostName,
allowCellSelection: _allowCellSelection,
allowRowSelection: _allowRowSelection,
cellMemo: props.cellMemo,
cellMemoProps: props.cellMemoProps,
cellMemoPropsDepth: props.cellMemoPropsDepth,
cellClassName: props.cellClassName,
checkIcon: props.checkIcon,
collapsedRowIcon: props.collapsedRowIcon,
columns: props.columns,
colsProps: colsProps,
compareSelectionBy: props.compareSelectionBy,
contextMenuSelected: contextMenuSelected,
dataKey: props.dataKey,
editMode: props.editMode,
editing: editing,
editingMeta: props.editingMeta,
editingRows: props.editingRows,
expanded: expanded,
expandedRowIcon: props.expandedRowIcon,
frozenRow: props.frozenRow,
groupRowsBy: props.groupRowsBy,
index: index,
isSelectable: isSelectable,
onCellClick: onCellClick,
onCellMouseDown: onCellMouseDown,
onCellMouseUp: onCellMouseUp,
onCheckboxChange: onCheckboxChange,
onEditingMetaChange: props.onEditingMetaChange,
onRadioChange: onRadioChange,
onRowClick: onRowClick,
onRowDoubleClick: onRowDoubleClick,
onRowPointerDown: onRowPointerDown,
onRowPointerUp: onRowPointerUp,
onRowDragEnd: onRowDragEnd,
onRowDragLeave: onRowDragLeave,
onRowDragOver: onRowDragOver,
onRowDragStart: onRowDragStart,
onRowDrop: onRowDrop,
onRowEditCancel: props.onRowEditCancel,
onRowEditChange: props.onRowEditChange,
onRowEditComplete: props.onRowEditComplete,
onRowEditInit: props.onRowEditInit,
onRowEditSave: props.onRowEditSave,
onRowMouseDown: onRowMouseDown,
onRowMouseEnter: onRowMouseEnter,
onRowMouseLeave: onRowMouseLeave,
onRowMouseUp: onRowMouseUp,
onRowRightClick: onRowRightClick,
onRowToggle: onRowToggle,
onRowTouchEnd: onRowTouchEnd,
responsiveLayout: props.responsiveLayout,
rowClassName: props.rowClassName,
rowData: rowData,
rowEditValidator: props.rowEditValidator,
rowEditorCancelIcon: props.rowEditorCancelIcon,
rowEditorInitIcon: props.rowEditorInitIcon,
rowEditorSaveIcon: props.rowEditorSaveIcon,
rowGroupMode: props.rowGroupMode,
rowIndex: rowIndex,
selectOnEdit: props.selectOnEdit,
selected: selected,
selection: props.selection,
selectionMode: props.selectionMode,
selectionModeInColumn: props.selectionModeInColumn,
showRowReorderElement: props.showRowReorderElement,
showSelectionElement: props.showSelectionElement,
tabIndex: props.tabIndex,
tableProps: props.tableProps,
tableSelector: props.tableSelector,
value: props.value,
virtualScrollerOptions: props.virtualScrollerOptions,
ptCallbacks: props.ptCallbacks,
metaData: props.metaData,
unstyled: isUnstyled()
});
}
};
var createExpansion = function createExpansion(rowData, rowIndex, expanded, colSpan) {
if (expanded && !(isSubheaderGrouping && props.expandableRowGroups)) {
var id = "".concat(props.tableSelector, "_content_").concat(rowIndex, "_expanded");
var options = {
index: rowIndex,
customRendering: false
};
var _content3 = ObjectUtils.getJSXElement(props.rowExpansionTemplate, rowData, options);
// check if the user wants complete control of the rendering
if (!options.customRendering) {
var bodyCellProps = mergeProps({
colSpan: colSpan,
role: 'cell'
}, getColumnPTOptions('root'), getColumnPTOptions('bodyCell'));
_content3 = /*#__PURE__*/React.createElement("td", bodyCellProps, _content3);
}
var rowExpansionProps = mergeProps({
id: id,
className: cx('rowExpansion'),
role: 'row'
}, ptm('rowExpansion'));
return /*#__PURE__*/React.createElement("tr", rowExpansionProps, _content3);
}
return null;
};
var createGroupFooter = function createGroupFooter(rowData, rowIndex, expanded, colSpan) {
if (isSubheaderGrouping && shouldRenderRowGroupFooter(props.value, rowData, rowIndex - props.first, expanded)) {
var _content4 = ObjectUtils.getJSXElement(props.rowGroupFooterTemplate, rowData, {
index: rowIndex,
colSpan: colSpan,
props: props.tableProps
});
var rowGroupFooterProps = mergeProps({
className: cx('rowGroupFooter'),
role: 'row'
}, ptm('rowGroupFooter'));
return /*#__PURE__*/React.createElement("tr", rowGroupFooterProps, _content4);
}
return null;
};
var createContent = function createContent() {
return props.value && props.value.map(function (rowData, index) {
var rowIndex = getVirtualScrollerOption('getItemOptions') ? getVirtualScrollerOption('getItemOptions')(index).index : props.first + index;
var key = getRowKey(rowData, rowIndex);
var expanded = isRowExpanded(rowData);
var colSpan = getColumnsLength();
var groupHeader = createGroupHeader(rowData, rowIndex, expanded, colSpan);
var row = createRow(rowData, rowIndex, index, expanded);
var expansion = createExpansion(rowData, rowIndex, expanded, colSpan);
var groupFooter = createGroupFooter(rowData, rowIndex, expanded, colSpan);
return /*#__PURE__*/React.createElement(React.Fragment, {
key: key
}, groupHeader, row, expansion, groupFooter);
});
};
var content = props.empty ? createEmptyContent() : createContent();
var ptKey = props.className === 'p-datatable-virtualscroller-spacer' ? 'virtualScrollerSpacer' : 'tbody';
var tbodyProps = mergeProps({
style: props.style,
className: cx(ptKey, {
className: props.className
}),
role: ' rowgroup'
}, ptm(ptKey, {
hostName: props.hostName
}));
return /*#__PURE__*/React.createElement("tbody", _extends({
ref: refCallback
}, tbodyProps), content);
}));
TableBody.displayName = 'TableBody';
var ColumnGroupBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'ColumnGroup',
children: undefined
},
getCProp: function getCProp(group, name) {
return ObjectUtils.getComponentProp(group, name, ColumnGroupBase.defaultProps);
},
getCProps: function getCProps(group) {
return ObjectUtils.getComponentProps(group, ColumnGroupBase.defaultProps);
}
});
var RowBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Row',
style: null,
className: null,
children: undefined
},
getCProp: function getCProp(row, name) {
return ObjectUtils.getComponentProp(row, name, RowBase.defaultProps);
}
});
function ownKeys$1e(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$1e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var FooterCell = /*#__PURE__*/React.memo(function (props) {
var _React$useState = React.useState({}),
_React$useState2 = _slicedToArray(_React$useState, 2),
styleObjectState = _React$useState2[0],
setStyleObjectState = _React$useState2[1];
var elementRef = React.useRef(null);
var mergeProps = useMergeProps();
var getColumnProps = function getColumnProps() {
return ColumnBase.getCProps(props.column);
};
var _props$ptCallbacks = props.ptCallbacks,
ptm = _props$ptCallbacks.ptm,
ptmo = _props$ptCallbacks.ptmo,
cx = _props$ptCallbacks.cx;
var getColumnPTOptions = function getColumnPTOptions(key) {
var cProps = getColumnProps();
var columnMetaData = {
props: cProps,
parent: props.metaData,
hostName: props.hostName,
state: {
styleObject: styleObjectState
},
context: {
index: props.index,
size: props.metaData.props.size,
showGridlines: props.metaData.props.showGridlines
}
};
return mergeProps(ptm("column.".concat(key), {
column: columnMetaData
}), ptm("column.".concat(key), columnMetaData), ptmo(cProps, key, columnMetaData));
};
var getColumnProp = function getColumnProp(name) {
return ColumnBase.getCProp(props.column, name);
};
var getStyle = function getStyle() {
var footerStyle = getColumnProp('footerStyle');
var columnStyle = getColumnProp('style');
return getColumnProp('frozen') ? Object.assign({}, columnStyle, footerStyle, styleObjectState) : Object.assign({}, columnStyle, footerStyle);
};
var updateStickyPosition = function updateStickyPosition() {
if (getColumnProp('frozen')) {
var styleObject = _objectSpread$1e({}, styleObjectState);
var _align = getColumnProp('alignFrozen');
if (_align === 'right') {
var right = 0;
var next = elementRef.current && elementRef.current.nextElementSibling;
if (next && next.classList.contains('p-frozen-column')) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
}
styleObject.right = right + 'px';
} else {
var left = 0;
var prev = elementRef.current && elementRef.current.previousElementSibling;
while (prev) {
if (prev && prev.classList.contains('p-frozen-column')) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
elementRef.current.style.left = left + 'px';
break;
}
prev = prev.previousElementSibling;
}
styleObject.left = left + 'px';
}
var isSameStyle = styleObjectState.left === styleObject.left && styleObjectState.right === styleObject.right;
!isSameStyle && setStyleObjectState(styleObject);
}
};
React.useEffect(function () {
if (getColumnProp('frozen')) {
updateStickyPosition();
}
});
var style = getStyle();
var align = getColumnProp('align');
var colSpan = getColumnProp('colSpan');
var rowSpan = getColumnProp('rowSpan');
var content = ObjectUtils.getJSXElement(getColumnProp('footer'), {
props: props.tableProps
});
var footerCellProps = mergeProps({
style: style,
className: classNames(getColumnProp('footerClassName'), getColumnProp('className'), cx('footerCell', {
getColumnProp: getColumnProp,
align: align
})),
role: 'cell',
colSpan: colSpan,
rowSpan: rowSpan
}, getColumnPTOptions('root'), getColumnPTOptions('footerCell'));
return /*#__PURE__*/React.createElement("td", _extends({
ref: elementRef
}, footerCellProps), content);
});
FooterCell.displayName = 'FooterCell';
var _excluded$1 = ["unstyled", "__TYPE", "ptOptions"];
function ownKeys$1d(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$1d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var TableFooter = /*#__PURE__*/React.memo(function (props) {
var _props$ptCallbacks = props.ptCallbacks,
ptm = _props$ptCallbacks.ptm,
ptmo = _props$ptCallbacks.ptmo,
cx = _props$ptCallbacks.cx;
var mergeProps = useMergeProps();
var getRowProps = function getRowProps(row) {
return ColumnGroupBase.getCProps(row);
};
var context = React.useContext(PrimeReactContext);
var getColumnGroupProps = function getColumnGroupProps() {
return props.footerColumnGroup ? ColumnGroupBase.getCProps(props.footerColumnGroup) : undefined;
};
var getRowPTOptions = function getRowPTOptions(row, key) {
var rProps = getRowProps(row);
var rowMetaData = {
props: rProps,
parent: props.metaData,
hostName: props.hostName
};
return mergeProps(ptm("row.".concat(key), {
row: rowMetaData
}), ptm("row.".concat(key), rowMetaData), ptmo(rProps, key, rowMetaData));
};
var getColumnGroupPTOptions = function getColumnGroupPTOptions(key) {
var cGProps = getColumnGroupProps();
var columnGroupMetaData = {
props: getColumnGroupProps(),
parent: props.metaData,
hostName: props.hostName
};
return mergeProps(ptm("columnGroup.".concat(key), {
columnGroup: columnGroupMetaData
}), ptm("columnGroup.".concat(key), columnGroupMetaData), ptmo(cGProps, key, columnGroupMetaData));
};
var hasFooter = function hasFooter() {
return props.footerColumnGroup ? true : props.columns ? props.columns.some(function (col) {
return col && getColumnProp(col, 'footer');
}) : false;
};
var getColumnProp = function getColumnProp(column, name) {
return ColumnBase.getCProp(column, name);
};
var createGroupFooterCells = function createGroupFooterCells(row) {
var columns = React.Children.toArray(RowBase.getCProp(row, 'children'));
return createFooterCells(columns);
};
var createFooterCells = function createFooterCells(columns) {
return React.Children.map(columns, function (col, i) {
var isVisible = col ? !getColumnProp(col, 'hidden') : true;
var key = col ? getColumnProp(col, 'columnKey') || getColumnProp(col, 'field') || i : i;
return isVisible && /*#__PURE__*/React.createElement(FooterCell, {
hostName: props.hostName,
key: key,
tableProps: props.tableProps,
column: col,
ptCallbacks: props.ptCallbacks,
metaData: props.metaData
});
});
};
var createContent = function createContent() {
if (props.footerColumnGroup) {
var rows = React.Children.toArray(ColumnGroupBase.getCProp(props.footerColumnGroup, 'children'));
return rows.map(function (row, i) {
var _RowBase$getProps = RowBase.getProps(row.props, context),
unstyled = _RowBase$getProps.unstyled;
_RowBase$getProps.__TYPE;
_RowBase$getProps.ptOptions;
var rest = _objectWithoutProperties(_RowBase$getProps, _excluded$1);
var rootProps = mergeProps({
role: 'row'
}, unstyled ? _objectSpread$1d({
unstyled: unstyled
}, rest) : rest, getRowPTOptions(row, 'root'));
return /*#__PURE__*/React.createElement("tr", _extends({}, rootProps, {
key: i
}), createGroupFooterCells(row));
});
}
var footerRowProps = mergeProps({
role: 'row'
}, ptm('footerRow', {
hostName: props.hostName
}));
return /*#__PURE__*/React.createElement("tr", footerRowProps, createFooterCells(props.columns));
};
if (hasFooter()) {
var content = createContent();
var tfootProps = mergeProps({
className: cx('tfoot'),
role: 'rowgroup'
}, getColumnGroupPTOptions('root'), ptm('tfoot', {
hostName: props.hostName
}));
return /*#__PURE__*/React.createElement("tfoot", tfootProps, content);
}
return null;
});
TableFooter.displayName = 'TableFooter';
var FilterIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
d: "M8.64708 14H5.35296C5.18981 13.9979 5.03395 13.9321 4.91858 13.8167C4.8032 13.7014 4.73745 13.5455 4.73531 13.3824V7L0.329431 0.98C0.259794 0.889466 0.217389 0.780968 0.20718 0.667208C0.19697 0.553448 0.219379 0.439133 0.271783 0.337647C0.324282 0.236453 0.403423 0.151519 0.500663 0.0920138C0.597903 0.0325088 0.709548 0.000692754 0.823548 0H13.1765C13.2905 0.000692754 13.4021 0.0325088 13.4994 0.0920138C13.5966 0.151519 13.6758 0.236453 13.7283 0.337647C13.7807 0.439133 13.8031 0.553448 13.7929 0.667208C13.7826 0.780968 13.7402 0.889466 13.6706 0.98L9.26472 7V13.3824C9.26259 13.5455 9.19683 13.7014 9.08146 13.8167C8.96609 13.9321 8.81022 13.9979 8.64708 14ZM5.97061 12.7647H8.02943V6.79412C8.02878 6.66289 8.07229 6.53527 8.15296 6.43177L11.9412 1.23529H2.05884L5.86355 6.43177C5.94422 6.53527 5.98773 6.66289 5.98708 6.79412L5.97061 12.7647Z",
fill: "currentColor"
}));
}));
FilterIcon.displayName = 'FilterIcon';
var FilterSlashIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M13.4994 0.0920138C13.5967 0.151519 13.6758 0.236453 13.7283 0.337647C13.7807 0.439133 13.8031 0.553448 13.7929 0.667208C13.7827 0.780968 13.7403 0.889466 13.6707 0.98L11.406 4.06823C11.3099 4.19928 11.1656 4.28679 11.005 4.3115C10.8444 4.33621 10.6805 4.2961 10.5495 4.2C10.4184 4.1039 10.3309 3.95967 10.3062 3.79905C10.2815 3.63843 10.3216 3.47458 10.4177 3.34353L11.9412 1.23529H7.41184C7.24803 1.23529 7.09093 1.17022 6.97509 1.05439C6.85926 0.938558 6.79419 0.781457 6.79419 0.617647C6.79419 0.453837 6.85926 0.296736 6.97509 0.180905C7.09093 0.0650733 7.24803 0 7.41184 0H13.1765C13.2905 0.000692754 13.4022 0.0325088 13.4994 0.0920138ZM4.20008 0.181168H4.24126L13.2013 9.03411C13.3169 9.14992 13.3819 9.3069 13.3819 9.47058C13.3819 9.63426 13.3169 9.79124 13.2013 9.90705C13.1445 9.96517 13.0766 10.0112 13.0016 10.0423C12.9266 10.0735 12.846 10.0891 12.7648 10.0882C12.6836 10.0886 12.6032 10.0728 12.5283 10.0417C12.4533 10.0106 12.3853 9.96479 12.3283 9.90705L9.3142 6.92587L9.26479 6.99999V13.3823C9.26265 13.5455 9.19689 13.7014 9.08152 13.8167C8.96615 13.9321 8.81029 13.9979 8.64714 14H5.35302C5.18987 13.9979 5.03401 13.9321 4.91864 13.8167C4.80327 13.7014 4.73751 13.5455 4.73537 13.3823V6.99999L0.329492 1.02117C0.259855 0.930634 0.21745 0.822137 0.207241 0.708376C0.197031 0.594616 0.21944 0.480301 0.271844 0.378815C0.324343 0.277621 0.403484 0.192687 0.500724 0.133182C0.597964 0.073677 0.709609 0.041861 0.823609 0.0411682H3.86243C3.92448 0.0461551 3.9855 0.060022 4.04361 0.0823446C4.10037 0.10735 4.15311 0.140655 4.20008 0.181168ZM8.02949 6.79411C8.02884 6.66289 8.07235 6.53526 8.15302 6.43176L8.42478 6.05293L3.55773 1.23529H2.0589L5.84714 6.43176C5.92781 6.53526 5.97132 6.66289 5.97067 6.79411V12.7647H8.02949V6.79411Z",
fill: "currentColor"
}));
}));
FilterSlashIcon.displayName = 'FilterSlashIcon';
var PlusIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
d: "M7.67742 6.32258V0.677419C7.67742 0.497757 7.60605 0.325452 7.47901 0.198411C7.35197 0.0713707 7.17966 0 7 0C6.82034 0 6.64803 0.0713707 6.52099 0.198411C6.39395 0.325452 6.32258 0.497757 6.32258 0.677419V6.32258H0.677419C0.497757 6.32258 0.325452 6.39395 0.198411 6.52099C0.0713707 6.64803 0 6.82034 0 7C0 7.17966 0.0713707 7.35197 0.198411 7.47901C0.325452 7.60605 0.497757 7.67742 0.677419 7.67742H6.32258V13.3226C6.32492 13.5015 6.39704 13.6725 6.52358 13.799C6.65012 13.9255 6.82106 13.9977 7 14C7.17966 14 7.35197 13.9286 7.47901 13.8016C7.60605 13.6745 7.67742 13.5022 7.67742 13.3226V7.67742H13.3226C13.5022 7.67742 13.6745 7.60605 13.8016 7.47901C13.9286 7.35197 14 7.17966 14 7C13.9977 6.82106 13.9255 6.65012 13.799 6.52358C13.6725 6.39704 13.5015 6.32492 13.3226 6.32258H7.67742Z",
fill: "currentColor"
}));
}));
PlusIcon.displayName = 'PlusIcon';
var TrashIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M3.44802 13.9955H10.552C10.8056 14.0129 11.06 13.9797 11.3006 13.898C11.5412 13.8163 11.7632 13.6877 11.9537 13.5196C12.1442 13.3515 12.2995 13.1473 12.4104 12.9188C12.5213 12.6903 12.5858 12.442 12.6 12.1884V4.36041H13.4C13.5591 4.36041 13.7117 4.29722 13.8243 4.18476C13.9368 4.07229 14 3.91976 14 3.76071C14 3.60166 13.9368 3.44912 13.8243 3.33666C13.7117 3.22419 13.5591 3.16101 13.4 3.16101H12.0537C12.0203 3.1557 11.9863 3.15299 11.952 3.15299C11.9178 3.15299 11.8838 3.1557 11.8503 3.16101H11.2285C11.2421 3.10893 11.2487 3.05513 11.248 3.00106V1.80966C11.2171 1.30262 10.9871 0.828306 10.608 0.48989C10.229 0.151475 9.73159 -0.0236625 9.22402 0.00257442H4.77602C4.27251 -0.0171866 3.78126 0.160868 3.40746 0.498617C3.03365 0.836366 2.807 1.30697 2.77602 1.80966V3.00106C2.77602 3.0556 2.78346 3.10936 2.79776 3.16101H0.6C0.521207 3.16101 0.443185 3.17652 0.37039 3.20666C0.297595 3.2368 0.231451 3.28097 0.175736 3.33666C0.120021 3.39235 0.0758251 3.45846 0.0456722 3.53121C0.0155194 3.60397 0 3.68196 0 3.76071C0 3.83946 0.0155194 3.91744 0.0456722 3.9902C0.0758251 4.06296 0.120021 4.12907 0.175736 4.18476C0.231451 4.24045 0.297595 4.28462 0.37039 4.31476C0.443185 4.3449 0.521207 4.36041 0.6 4.36041H1.40002V12.1884C1.41426 12.442 1.47871 12.6903 1.58965 12.9188C1.7006 13.1473 1.85582 13.3515 2.04633 13.5196C2.23683 13.6877 2.45882 13.8163 2.69944 13.898C2.94005 13.9797 3.1945 14.0129 3.44802 13.9955ZM2.60002 4.36041H11.304V12.1884C11.304 12.5163 10.952 12.7961 10.504 12.7961H3.40002C2.97602 12.7961 2.60002 12.5163 2.60002 12.1884V4.36041ZM3.95429 3.16101C3.96859 3.10936 3.97602 3.0556 3.97602 3.00106V1.80966C3.97602 1.48183 4.33602 1.20197 4.77602 1.20197H9.24802C9.66403 1.20197 10.048 1.48183 10.048 1.80966V3.00106C10.0473 3.05515 10.054 3.10896 10.0678 3.16101H3.95429ZM5.57571 10.997C5.41731 10.995 5.26597 10.9311 5.15395 10.8191C5.04193 10.7071 4.97808 10.5558 4.97601 10.3973V6.77517C4.97601 6.61612 5.0392 6.46359 5.15166 6.35112C5.26413 6.23866 5.41666 6.17548 5.57571 6.17548C5.73476 6.17548 5.8873 6.23866 5.99976 6.35112C6.11223 6.46359 6.17541 6.61612 6.17541 6.77517V10.3894C6.17647 10.4688 6.16174 10.5476 6.13208 10.6213C6.10241 10.695 6.05841 10.762 6.00261 10.8186C5.94682 10.8751 5.88035 10.92 5.80707 10.9506C5.73378 10.9813 5.65514 10.9971 5.57571 10.997ZM7.99968 10.8214C8.11215 10.9339 8.26468 10.997 8.42373 10.997C8.58351 10.9949 8.73604 10.93 8.84828 10.8163C8.96052 10.7025 9.02345 10.5491 9.02343 10.3894V6.77517C9.02343 6.61612 8.96025 6.46359 8.84778 6.35112C8.73532 6.23866 8.58278 6.17548 8.42373 6.17548C8.26468 6.17548 8.11215 6.23866 7.99968 6.35112C7.88722 6.46359 7.82404 6.61612 7.82404 6.77517V10.3973C7.82404 10.5564 7.88722 10.7089 7.99968 10.8214Z",
fill: "currentColor"
}));
}));
TrashIcon.displayName = 'TrashIcon';
function ownKeys$1c(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$1c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
overlayVisibleState = _React$useState2[0],
setOverlayVisibleState = _React$useState2[1];
var overlayRef = React.useRef(null);
var overlayId = React.useRef(null);
var iconRef = React.useRef(null);
var selfClick = React.useRef(false);
var overlayEventListener = React.useRef(null);
var mergeProps = useMergeProps();
var getColumnProp = function getColumnProp(name) {
return ColumnBase.getCProp(props.column, name);
};
var getColumnProps = function getColumnProps() {
return ColumnBase.getCProps(props.column);
};
var context = React.useContext(PrimeReactContext);
var _props$ptCallbacks = props.ptCallbacks,
ptm = _props$ptCallbacks.ptm,
ptmo = _props$ptCallbacks.ptmo,
cx = _props$ptCallbacks.cx;
var getColumnPTOptions = function getColumnPTOptions(key, params) {
var cProps = getColumnProps();
var columnMetadata = _objectSpread$1c({
props: cProps,
parent: props.metaData,
hostName: props.hostName,
state: {
overlayVisible: overlayVisibleState
}
}, params);
return mergeProps(ptm("column.".concat(key), {
column: columnMetadata
}), ptm("column.".concat(key), columnMetadata), ptmo(cProps, key, columnMetadata));
};
var field = getColumnProp('filterField') || getColumnProp('field');
var filterModel = props.filters[field];
var filterStoreModel = props.filtersStore && props.filtersStore[field];
var _useOverlayListener = useOverlayListener({
target: iconRef,
overlay: overlayRef,
listener: function listener(event, _ref) {
var type = _ref.type,
valid = _ref.valid;
if (valid) {
if (type === 'outside') {
if (!selfClick.current && !isTargetClicked(event.target)) {
hide();
}
selfClick.current = false;
} else if (context.hideOverlaysOnDocumentScrolling) {
hide();
} else if (!DomHandler.isDocument(event.target)) {
DomHandler.alignOverlay(overlayRef.current, iconRef.current, context && context.appendTo || PrimeReact.appendTo, false);
}
}
},
when: overlayVisibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var hasFilter = function hasFilter() {
if (!filterStoreModel || !filterModel) {
return false;
}
return filterStoreModel.operator ? !isFilterBlank(filterModel.constraints[0].value) : !isFilterBlank(filterModel.value);
};
var hasRowFilter = function hasRowFilter() {
return filterModel && !isFilterBlank(filterModel.value);
};
var isFilterBlank = function isFilterBlank(filter) {
return ObjectUtils.isEmpty(filter);
};
var isRowMatchModeSelected = function isRowMatchModeSelected(matchMode) {
return filterModel && filterModel.matchMode === matchMode;
};
var matchModes = function matchModes() {
return getColumnProp('filterMatchModeOptions') || context && context.filterMatchModeOptions[findDataType()].map(function (key) {
return {
label: localeOption(key),
value: key
};
}) || PrimeReact.filterMatchModeOptions[findDataType()].map(function (key) {
return {
label: localeOption(key),
value: key
};
});
};
var isShowMenuButton = function isShowMenuButton() {
return getColumnProp('showFilterMenu') && (props.display === 'row' ? getColumnProp('dataType') !== 'boolean' : true);
};
var isShowClearButton = function isShowClearButton() {
return getColumnProp('showClearButton') && props.display === 'row';
};
var isShowMatchModes = function isShowMatchModes() {
return getColumnProp('dataType') !== 'boolean' && getColumnProp('showFilterMatchModes') && matchModes() && getColumnProp('showFilterMenuOptions');
};
var isShowOperator = function isShowOperator() {
return getColumnProp('showFilterOperator') && filterModel && filterModel.operator && getColumnProp('showFilterMenuOptions');
};
var showRemoveIcon = function showRemoveIcon() {
return fieldConstraints().length > 1;
};
var isShowAddConstraint = function isShowAddConstraint() {
return getColumnProp('showAddButton') && filterModel && filterModel.operator && fieldConstraints() && fieldConstraints().length < getColumnProp('maxConstraints') && getColumnProp('showFilterMenuOptions');
};
var isOutsideClicked = function isOutsideClicked(target) {
return !isTargetClicked(target) && overlayRef.current && !(overlayRef.current.isSameNode(target) || overlayRef.current.contains(target));
};
var isTargetClicked = function isTargetClicked(target) {
return iconRef.current && (iconRef.current.isSameNode(target) || iconRef.current.contains(target));
};
var getDefaultConstraint = function getDefaultConstraint() {
if (filterStoreModel) {
if (filterStoreModel.operator) {
return {
matchMode: filterStoreModel.constraints[0].matchMode,
operator: filterStoreModel.operator
};
}
return {
matchMode: filterStoreModel.matchMode
};
}
};
var findDataType = function findDataType() {
var dataType = getColumnProp('dataType');
var matchMode = getColumnProp('filterMatchMode');
var hasMatchMode = function hasMatchMode(key) {
return context && context.filterMatchModeOptions[key].some(function (mode) {
return mode === matchMode;
}) || PrimeReact.filterMatchModeOptions[key].some(function (mode) {
return mode === matchMode;
});
};
if (matchMode === 'custom' && !hasMatchMode(dataType)) {
context && context.filterMatchModeOptions[dataType].push(FilterMatchMode.CUSTOM) || PrimeReact.filterMatchModeOptions[dataType].push(FilterMatchMode.CUSTOM);
return dataType;
} else if (matchMode) {
return Object.keys(context && context.filterMatchModeOptions || PrimeReact.filterMatchModeOptions).find(function (key) {
return hasMatchMode(key);
}) || dataType;
}
return dataType;
};
var clearFilter = function clearFilter() {
var filterClearCallback = getColumnProp('onFilterClear');
var defaultConstraint = getDefaultConstraint();
var filters = _objectSpread$1c({}, props.filters);
if (filters[field].operator) {
filters[field].constraints.splice(1);
filters[field].operator = defaultConstraint.operator;
filters[field].constraints[0] = {
value: null,
matchMode: defaultConstraint.matchMode
};
} else {
filters[field].value = null;
filters[field].matchMode = defaultConstraint ? defaultConstraint.matchMode : filters[field].matchMode;
}
filterClearCallback && filterClearCallback();
props.onFilterChange(filters);
props.onFilterApply();
hide();
};
var applyFilter = function applyFilter() {
var filterApplyClickCallback = getColumnProp('onFilterApplyClick');
filterApplyClickCallback && filterApplyClickCallback({
field: field,
constraints: filterModel
});
props.onFilterApply();
hide();
};
var toggleMenu = function toggleMenu() {
setOverlayVisibleState(function (prevVisible) {
return !prevVisible;
});
};
var onToggleButtonKeyDown = function onToggleButtonKeyDown(event) {
switch (event.key) {
case 'Escape':
case 'Tab':
hide();
break;
case 'ArrowDown':
if (overlayVisibleState) {
var focusable = DomHandler.getFirstFocusableElement(overlayRef.current);
focusable && focusable.focus();
event.preventDefault();
} else if (event.altKey) {
setOverlayVisibleState(true);
event.preventDefault();
}
break;
}
};
var onContentKeyDown = function onContentKeyDown(event) {
if (event.key === 'Escape') {
hide();
iconRef.current && iconRef.current.focus();
}
};
var onInputChange = function onInputChange(event, index) {
var filters = _objectSpread$1c({}, props.filters);
var value = event.target.value;
var filterField = filters[field];
if (props.display === 'menu' && ObjectUtils.isNotEmpty(filterField.constraints)) {
filterField.constraints[index].value = value;
} else {
filterField.value = value;
}
props.onFilterChange(filters);
if (!getColumnProp('showApplyButton') || props.display === 'row') {
props.onFilterApply();
}
};
var onInputKeydown = function onInputKeydown(event, _index) {
if (event.key === 'Enter') {
if (!getColumnProp('showApplyButton') || props.display === 'menu') {
applyFilter();
}
}
};
var onRowMatchModeChange = function onRowMatchModeChange(matchMode) {
var _iconRef$current;
var filterMatchModeChangeCallback = getColumnProp('onFilterMatchModeChange');
var filters = _objectSpread$1c({}, props.filters);
filters[field].matchMode = matchMode;
filterMatchModeChangeCallback && filterMatchModeChangeCallback({
field: field,
matchMode: matchMode
});
props.onFilterChange(filters);
props.onFilterApply();
hide();
(_iconRef$current = iconRef.current) === null || _iconRef$current === void 0 || _iconRef$current.focus();
};
var onRowMatchModeKeyDown = function onRowMatchModeKeyDown(event, matchMode, clear) {
var item = event.target;
switch (event.key) {
case 'ArrowDown':
var nextItem = _findNextItem(item);
if (nextItem) {
item.removeAttribute('tabindex');
nextItem.tabIndex = 0;
nextItem.focus();
}
event.preventDefault();
break;
case 'ArrowUp':
var prevItem = _findPrevItem(item);
if (prevItem) {
item.removeAttribute('tabindex');
prevItem.tabIndex = 0;
prevItem.focus();
}
event.preventDefault();
break;
case 'Enter':
clear ? clearFilter() : onRowMatchModeChange(matchMode.value);
event.preventDefault();
break;
}
};
var onOperatorChange = function onOperatorChange(e) {
var filterOperationChangeCallback = getColumnProp('onFilterOperatorChange');
var value = e.value;
var filters = _objectSpread$1c({}, props.filters);
filters[field].operator = value;
props.onFilterChange(filters);
filterOperationChangeCallback && filterOperationChangeCallback({
field: field,
operator: value
});
if (!getColumnProp('showApplyButton')) {
props.onFilterApply();
}
};
var onMenuMatchModeChange = function onMenuMatchModeChange(value, index) {
var filterMatchModeChangeCallback = getColumnProp('onFilterMatchModeChange');
var filters = _objectSpread$1c({}, props.filters);
var filterField = filters[field];
if (props.display === 'menu' && ObjectUtils.isNotEmpty(filterField.constraints)) {
filterField.constraints[index].matchMode = value;
} else {
filterField.matchMode = value;
}
props.onFilterChange(filters);
filterMatchModeChangeCallback && filterMatchModeChangeCallback({
field: field,
matchMode: value,
index: index
});
if (!getColumnProp('showApplyButton')) {
props.onFilterApply();
}
};
var addConstraint = function addConstraint() {
var filterConstraintAddCallback = getColumnProp('onFilterConstraintAdd');
var defaultConstraint = getDefaultConstraint();
var filters = _objectSpread$1c({}, props.filters);
var newConstraint = {
value: null,
matchMode: defaultConstraint.matchMode
};
filters[field].constraints.push(newConstraint);
filterConstraintAddCallback && filterConstraintAddCallback({
field: field,
constraint: newConstraint
});
props.onFilterChange(filters);
if (!getColumnProp('showApplyButton')) {
props.onFilterApply();
}
};
var removeConstraint = function removeConstraint(index) {
var filterConstraintRemoveCallback = getColumnProp('onFilterConstraintRemove');
var filters = _objectSpread$1c({}, props.filters);
var removedConstraint = filters[field].constraints.splice(index, 1);
filterConstraintRemoveCallback && filterConstraintRemoveCallback({
field: field,
constraint: removedConstraint
});
props.onFilterChange(filters);
if (!getColumnProp('showApplyButton')) {
props.onFilterApply();
}
};
var _findNextItem = function findNextItem(item) {
var nextItem = item.nextElementSibling;
return nextItem ? DomHandler.getAttribute(nextItem, 'data-p-column-filter-separator') === true ? _findNextItem(nextItem) : nextItem : item.parentElement.firstElementChild;
};
var _findPrevItem = function findPrevItem(item) {
var prevItem = item.previousElementSibling;
return prevItem ? DomHandler.getAttribute(prevItem, 'data-p-column-filter-separator') === true ? _findPrevItem(prevItem) : prevItem : item.parentElement.lastElementChild;
};
var hide = function hide() {
setOverlayVisibleState(false);
};
var onContentClick = function onContentClick(event) {
selfClick.current = true;
OverlayService.emit('overlay-click', {
originalEvent: event,
target: overlayRef.current
});
};
var onContentMouseDown = function onContentMouseDown() {
selfClick.current = true;
};
var onOverlayEnter = function onOverlayEnter() {
ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, context && context.zIndex.overlay || PrimeReact.zIndex.overlay);
DomHandler.addStyles(overlayRef.current, {
position: 'absolute',
top: '0',
left: '0'
});
DomHandler.alignOverlay(overlayRef.current, iconRef.current, context && context.appendTo || PrimeReact.appendTo, false);
overlayEventListener.current = function (e) {
if (!isOutsideClicked(e.target)) {
selfClick.current = true;
}
};
OverlayService.on('overlay-click', overlayEventListener.current);
};
var onOverlayEntered = function onOverlayEntered() {
bindOverlayListener();
};
var onOverlayExit = function onOverlayExit() {
onOverlayHide();
};
var onOverlayExited = function onOverlayExited() {
ZIndexUtils.clear(overlayRef.current);
};
var onOverlayHide = function onOverlayHide() {
unbindOverlayListener();
OverlayService.off('overlay-click', overlayEventListener.current);
overlayEventListener.current = null;
selfClick.current = false;
};
var fieldConstraints = function fieldConstraints() {
return filterModel ? filterModel.constraints || [filterModel] : [];
};
var operator = function operator() {
return filterModel.operator;
};
var operatorOptions = function operatorOptions() {
return [{
label: localeOption('matchAll'),
value: FilterOperator.AND
}, {
label: localeOption('matchAny'),
value: FilterOperator.OR
}];
};
var noFilterLabel = function noFilterLabel() {
return localeOption('noFilter');
};
var removeRuleButtonLabel = function removeRuleButtonLabel() {
return localeOption('removeRule');
};
var addRuleButtonLabel = function addRuleButtonLabel() {
return localeOption('addRule');
};
var clearButtonLabel = function clearButtonLabel() {
return localeOption('clear');
};
var applyButtonLabel = function applyButtonLabel() {
return localeOption('apply');
};
var filterCallback = function filterCallback(value) {
var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var filters = _objectSpread$1c({}, props.filters);
var meta = filters[field];
props.display === 'menu' && meta && meta.operator ? filters[field].constraints[index].value = value : filters[field].value = value;
props.onFilterChange(filters);
};
var filterApplyCallback = function filterApplyCallback() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
args && filterCallback(args[0], args[1]);
props.onFilterApply();
};
useUpdateEffect(function () {
if (props.display === 'menu' && overlayVisibleState) {
DomHandler.alignOverlay(overlayRef.current, iconRef.current, context && context.appendTo || PrimeReact.appendTo, false);
}
});
useMountEffect(function () {
if (!overlayId.current) {
overlayId.current = UniqueComponentId();
}
});
useUnmountEffect(function () {
if (overlayEventListener.current) {
OverlayService.off('overlay-click', overlayEventListener.current);
overlayEventListener.current = null;
}
if (overlayRef.current) {
ZIndexUtils.clear(overlayRef.current);
onOverlayHide();
}
});
var createFilterElement = function createFilterElement(model, index) {
var value = model ? model.value : null;
return getColumnProp('filterElement') ? ObjectUtils.getJSXElement(getColumnProp('filterElement'), {
field: field,
index: index,
filterModel: model,
value: value,
filterApplyCallback: filterApplyCallback,
filterCallback: filterCallback
}) : /*#__PURE__*/React.createElement(InputText, {
type: getColumnProp('filterType'),
value: value || '',
onChange: function onChange(e) {
return onInputChange(e, index);
},
onKeyDown: function onKeyDown(e) {
return onInputKeydown(e);
},
className: "p-column-filter",
placeholder: getColumnProp('filterPlaceholder'),
maxLength: getColumnProp('filterMaxLength'),
"aria-label": getColumnProp('filterPlaceholder'),
unstyled: props.unstyled,
__parentMetadata: {
parent: props.metaData
}
});
};
var createRowFilterElement = function createRowFilterElement() {
if (props.display === 'row') {
var content = createFilterElement(filterModel, 0);
var filterInputProps = mergeProps({
className: cx('filterInput')
}, getColumnPTOptions('filterInput'));
return /*#__PURE__*/React.createElement("div", filterInputProps, content);
}
return null;
};
var createMenuFilterElement = function createMenuFilterElement(fieldConstraint, index) {
return props.display === 'menu' ? createFilterElement(fieldConstraint, index) : null;
};
var createMenuButton = function createMenuButton() {
if (!isShowMenuButton()) {
return null;
}
var filterIconProps = mergeProps({
'aria-hidden': true
}, getColumnPTOptions('filterIcon'));
var icon = props.filterIcon || /*#__PURE__*/React.createElement(FilterIcon, filterIconProps);
var columnFilterIcon = IconUtils.getJSXIcon(icon, _objectSpread$1c({}, filterIconProps), {
props: props
});
var label = overlayVisibleState ? ariaLabel('hideFilterMenu') : ariaLabel('showFilterMenu');
var filterMenuButtonProps = mergeProps({
type: 'button',
className: cx('filterMenuButton', {
overlayVisibleState: overlayVisibleState,
hasFilter: hasFilter
}),
'aria-haspopup': true,
'aria-expanded': overlayVisibleState,
'aria-label': label,
'aria-controls': overlayVisibleState ? overlayId.current : undefined,
onClick: function onClick(e) {
return toggleMenu();
},
onKeyDown: function onKeyDown(e) {
return onToggleButtonKeyDown(e);
}
}, getColumnPTOptions('filterMenuButton', {
context: {
active: hasFilter()
}
}));
return /*#__PURE__*/React.createElement("button", _extends({
ref: iconRef
}, filterMenuButtonProps), columnFilterIcon, /*#__PURE__*/React.createElement(Ripple, null));
};
var createClearButton = function createClearButton() {
if (!isShowClearButton()) {
return null;
}
var filterClearIconProps = mergeProps({
'aria-hidden': true
}, getColumnPTOptions('filterClearIcon'));
var icon = props.filterClearIcon || /*#__PURE__*/React.createElement(FilterSlashIcon, filterClearIconProps);
var filterClearIcon = IconUtils.getJSXIcon(icon, _objectSpread$1c({}, filterClearIconProps), {
props: props
});
var clearLabel = clearButtonLabel();
var headerFilterClearButtonProps = mergeProps({
className: cx('headerFilterClearButton', {
hasRowFilter: hasRowFilter
}),
type: 'button',
onClick: function onClick(e) {
return clearFilter();
},
'aria-label': clearLabel
}, getColumnPTOptions('headerFilterClearButton', {
context: {
hidden: hasRowFilter()
}
}));
return /*#__PURE__*/React.createElement("button", headerFilterClearButtonProps, filterClearIcon, /*#__PURE__*/React.createElement(Ripple, null));
};
var createRowItems = function createRowItems() {
if (isShowMatchModes()) {
var _matchModes = matchModes();
var _noFilterLabel = noFilterLabel();
var filterSeparatorProps = mergeProps({
className: cx('filterSeparator'),
'data-p-column-filter-separator': true
}, getColumnPTOptions('filterSeparator'));
var filterRowItemProps = mergeProps({
className: cx('filterRowItem', {
isRowMatchModeSelected: isRowMatchModeSelected,
isShowMatchModes: isShowMatchModes
}),
onClick: function onClick(e) {
return clearFilter();
},
onKeyDown: function onKeyDown(e) {
return onRowMatchModeKeyDown(e, null, true);
}
}, getColumnPTOptions('filterRowItem'));
var filterRowItemsProps = mergeProps({
className: cx('filterRowItems')
}, getColumnPTOptions('filterRowItems'));
return /*#__PURE__*/React.createElement("ul", filterRowItemsProps, _matchModes.map(function (matchMode, i) {
var value = matchMode.value,
label = matchMode.label;
var tabIndex = i === 0 ? 0 : null;
var filterRowItemProps = mergeProps({
className: cx('filterRowItem', {
isRowMatchModeSelected: isRowMatchModeSelected,
isShowMatchModes: isShowMatchModes,
value: value
}),
onClick: function onClick() {
return onRowMatchModeChange(value);
},
onKeyDown: function onKeyDown(e) {
return onRowMatchModeKeyDown(e, matchMode);
},
tabIndex: tabIndex
}, getColumnPTOptions('filterRowItem', {
context: {
highlighted: matchMode && isRowMatchModeSelected(value)
}
}));
return /*#__PURE__*/React.createElement("li", _extends({}, filterRowItemProps, {
key: label
}), label);
}), /*#__PURE__*/React.createElement("li", filterSeparatorProps), /*#__PURE__*/React.createElement("li", filterRowItemProps, _noFilterLabel));
}
return null;
};
var createOperator = function createOperator() {
if (isShowOperator()) {
var options = operatorOptions();
var value = operator();
var filterOperatorProps = mergeProps({
className: cx('filterOperator')
}, getColumnPTOptions('filterOperator'));
return /*#__PURE__*/React.createElement("div", filterOperatorProps, /*#__PURE__*/React.createElement(Dropdown, {
options: options,
value: value,
onChange: onOperatorChange,
className: "p-column-filter-operator-dropdown",
pt: getColumnPTOptions('filterOperatorDropdown'),
unstyled: props.unstyled,
__parentMetadata: {
parent: props.metaData
},
"aria-label": ariaLabel('filterOperator')
}));
}
return null;
};
var createMatchModeDropdown = function createMatchModeDropdown(constraint, index) {
if (isShowMatchModes()) {
var options = matchModes();
return /*#__PURE__*/React.createElement(Dropdown, {
options: options,
value: constraint.matchMode,
onChange: function onChange(e) {
return onMenuMatchModeChange(e.value, index);
},
className: "p-column-filter-matchmode-dropdown",
pt: getColumnPTOptions('filterMatchModeDropdown'),
unstyled: props.unstyled,
__parentMetadata: {
parent: props.metaData
},
"aria-label": ariaLabel('filterConstraint')
});
}
return null;
};
var createRemoveButton = function createRemoveButton(index) {
if (showRemoveIcon()) {
var removeRuleLabel = removeRuleButtonLabel();
return /*#__PURE__*/React.createElement(Button, {
type: "button",
icon: props.filterRemoveIcon || /*#__PURE__*/React.createElement(TrashIcon, null),
className: "p-column-filter-remove-button p-button-text p-button-danger p-button-sm",
onClick: function onClick() {
return removeConstraint(index);
},
label: removeRuleLabel,
pt: getColumnPTOptions('filterRemoveButton'),
unstyled: props.unstyled,
__parentMetadata: {
parent: props.metaData
}
});
}
return null;
};
var createConstraints = function createConstraints() {
var _fieldConstraints = fieldConstraints();
var filterConstraintsProps = mergeProps({
className: cx('filterConstraints')
}, getColumnPTOptions('filterConstraints'));
var filterConstraintProps = mergeProps({
className: cx('filterConstraint')
}, getColumnPTOptions('filterConstraint'));
return /*#__PURE__*/React.createElement("div", filterConstraintsProps, _fieldConstraints.map(function (fieldConstraint, i) {
var matchModeDropdown = createMatchModeDropdown(fieldConstraint, i);
var menuFilterElement = createMenuFilterElement(fieldConstraint, i);
var removeButton = createRemoveButton(i);
var filterRemoveProps = mergeProps(getColumnPTOptions('filterRemove'));
return /*#__PURE__*/React.createElement("div", _extends({}, filterConstraintProps, {
key: i
}), matchModeDropdown, menuFilterElement, /*#__PURE__*/React.createElement("div", filterRemoveProps, removeButton));
}));
};
var createAddRule = function createAddRule() {
if (isShowAddConstraint()) {
var addRuleLabel = addRuleButtonLabel();
var filterAddRuleProps = mergeProps({
className: cx('filterAddRule')
}, getColumnPTOptions('filterAddRule'));
return /*#__PURE__*/React.createElement("div", filterAddRuleProps, /*#__PURE__*/React.createElement(Button, {
type: "button",
label: addRuleLabel,
icon: props.filterAddIcon || /*#__PURE__*/React.createElement(PlusIcon, null),
className: "p-column-filter-add-button p-button-text p-button-sm",
onClick: addConstraint,
pt: getColumnPTOptions('filterAddRuleButton'),
unstyled: props.unstyled,
__parentMetadata: {
parent: props.metaData
}
}));
}
return null;
};
var createFilterClearButton = function createFilterClearButton() {
if (getColumnProp('showClearButton')) {
if (!getColumnProp('filterClear')) {
var clearLabel = clearButtonLabel();
return /*#__PURE__*/React.createElement(Button, {
type: "button",
outlined: true,
size: "small",
onClick: clearFilter,
label: clearLabel,
pt: getColumnPTOptions('filterClearButton'),
unstyled: props.unstyled,
__parentMetadata: {
parent: props.metaData
}
});
}
return ObjectUtils.getJSXElement(getColumnProp('filterClear'), {
field: field,
filterModel: filterModel,
filterClearCallback: clearFilter
});
}
return null;
};
var createFilterApplyButton = function createFilterApplyButton() {
if (getColumnProp('showApplyButton')) {
if (!getColumnProp('filterApply')) {
var applyLabel = applyButtonLabel();
return /*#__PURE__*/React.createElement(Button, {
type: "button",
size: "small",
onClick: applyFilter,
label: applyLabel,
pt: getColumnPTOptions('filterApplyButton'),
unstyled: props.unstyled,
__parentMetadata: {
parent: props.metaData
}
});
}
return ObjectUtils.getJSXElement(getColumnProp('filterApply'), {
field: field,
filterModel: filterModel,
filterApplyCallback: applyFilter
});
}
return null;
};
var createButtonBar = function createButtonBar() {
var clearButton = createFilterClearButton();
var applyButton = createFilterApplyButton();
var filterButtonbarProps = mergeProps({
className: cx('filterButtonBar')
}, getColumnPTOptions('filterButtonBar'));
return /*#__PURE__*/React.createElement("div", filterButtonbarProps, clearButton, applyButton);
};
var createItems = function createItems() {
var operator = createOperator();
var constraints = createConstraints();
var addRule = createAddRule();
var buttonBar = createButtonBar();
return /*#__PURE__*/React.createElement(React.Fragment, null, operator, constraints, addRule, buttonBar);
};
var createOverlay = function createOverlay() {
var style = getColumnProp('filterMenuStyle');
var filterHeader = ObjectUtils.getJSXElement(getColumnProp('filterHeader'), {
field: field,
filterModel: filterModel,
filterApplyCallback: filterApplyCallback
});
var filterFooter = ObjectUtils.getJSXElement(getColumnProp('filterFooter'), {
field: field,
filterModel: filterModel,
filterApplyCallback: filterApplyCallback
});
var items = props.display === 'row' ? createRowItems() : createItems();
var filterOverlayProps = mergeProps({
style: style,
className: cx('filterOverlay', {
columnFilterProps: props,
context: context,
getColumnProp: getColumnProp
}),
onKeyDown: function onKeyDown(e) {
return onContentKeyDown(e);
},
onClick: function onClick(e) {
return onContentClick(e);
},
onMouseDown: function onMouseDown(e) {
return onContentMouseDown();
},
id: overlayId.current,
'aria-modal': overlayVisibleState,
role: 'dialog'
}, getColumnPTOptions('filterOverlay'));
var transitionProps = mergeProps({
classNames: cx('transition'),
"in": overlayVisibleState,
timeout: {
enter: 120,
exit: 100
},
unmountOnExit: true,
onEnter: onOverlayEnter,
onEntered: onOverlayEntered,
onExit: onOverlayExit,
onExited: onOverlayExited
}, getColumnPTOptions('transition'));
return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: overlayRef
}, transitionProps), /*#__PURE__*/React.createElement("div", _extends({
ref: overlayRef
}, filterOverlayProps), /*#__PURE__*/React.createElement(FocusTrap$1, {
autoFocus: true
}, filterHeader, items, filterFooter))));
};
var rowFilterElement = createRowFilterElement();
var menuButton = createMenuButton();
var clearButton = createClearButton();
var overlay = createOverlay();
var columnFilter = mergeProps({
className: cx('columnFilter', {
columnFilterProps: props
})
}, getColumnPTOptions('columnFilter'));
return /*#__PURE__*/React.createElement("div", columnFilter, rowFilterElement, menuButton, clearButton, overlay);
});
ColumnFilter.displayName = 'ColumnFilter';
var SortAltIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
d: "M5.64515 3.61291C5.47353 3.61291 5.30192 3.54968 5.16644 3.4142L3.38708 1.63484L1.60773 3.4142C1.34579 3.67613 0.912244 3.67613 0.650309 3.4142C0.388374 3.15226 0.388374 2.71871 0.650309 2.45678L2.90837 0.198712C3.17031 -0.0632236 3.60386 -0.0632236 3.86579 0.198712L6.12386 2.45678C6.38579 2.71871 6.38579 3.15226 6.12386 3.4142C5.98837 3.54968 5.81676 3.61291 5.64515 3.61291Z",
fill: "currentColor"
}), /*#__PURE__*/React.createElement("path", {
d: "M3.38714 14C3.01681 14 2.70972 13.6929 2.70972 13.3226V0.677419C2.70972 0.307097 3.01681 0 3.38714 0C3.75746 0 4.06456 0.307097 4.06456 0.677419V13.3226C4.06456 13.6929 3.75746 14 3.38714 14Z",
fill: "currentColor"
}), /*#__PURE__*/React.createElement("path", {
d: "M10.6129 14C10.4413 14 10.2697 13.9368 10.1342 13.8013L7.87611 11.5432C7.61418 11.2813 7.61418 10.8477 7.87611 10.5858C8.13805 10.3239 8.5716 10.3239 8.83353 10.5858L10.6129 12.3652L12.3922 10.5858C12.6542 10.3239 13.0877 10.3239 13.3497 10.5858C13.6116 10.8477 13.6116 11.2813 13.3497 11.5432L11.0916 13.8013C10.9561 13.9368 10.7845 14 10.6129 14Z",
fill: "currentColor"
}), /*#__PURE__*/React.createElement("path", {
d: "M10.6129 14C10.2426 14 9.93552 13.6929 9.93552 13.3226V0.677419C9.93552 0.307097 10.2426 0 10.6129 0C10.9833 0 11.2904 0.307097 11.2904 0.677419V13.3226C11.2904 13.6929 10.9832 14 10.6129 14Z",
fill: "currentColor"
}));
}));
SortAltIcon.displayName = 'SortAltIcon';
var SortAmountDownIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
d: "M4.93953 10.5858L3.83759 11.6877V0.677419C3.83759 0.307097 3.53049 0 3.16017 0C2.78985 0 2.48275 0.307097 2.48275 0.677419V11.6877L1.38082 10.5858C1.11888 10.3239 0.685331 10.3239 0.423396 10.5858C0.16146 10.8477 0.16146 11.2813 0.423396 11.5432L2.68146 13.8013C2.74469 13.8645 2.81694 13.9097 2.89823 13.9458C2.97952 13.9819 3.06985 14 3.16017 14C3.25049 14 3.33178 13.9819 3.42211 13.9458C3.5034 13.9097 3.57565 13.8645 3.63888 13.8013L5.89694 11.5432C6.15888 11.2813 6.15888 10.8477 5.89694 10.5858C5.63501 10.3239 5.20146 10.3239 4.93953 10.5858ZM13.0957 0H7.22468C6.85436 0 6.54726 0.307097 6.54726 0.677419C6.54726 1.04774 6.85436 1.35484 7.22468 1.35484H13.0957C13.466 1.35484 13.7731 1.04774 13.7731 0.677419C13.7731 0.307097 13.466 0 13.0957 0ZM7.22468 5.41935H9.48275C9.85307 5.41935 10.1602 5.72645 10.1602 6.09677C10.1602 6.4671 9.85307 6.77419 9.48275 6.77419H7.22468C6.85436 6.77419 6.54726 6.4671 6.54726 6.09677C6.54726 5.72645 6.85436 5.41935 7.22468 5.41935ZM7.6763 8.12903H7.22468C6.85436 8.12903 6.54726 8.43613 6.54726 8.80645C6.54726 9.17677 6.85436 9.48387 7.22468 9.48387H7.6763C8.04662 9.48387 8.35372 9.17677 8.35372 8.80645C8.35372 8.43613 8.04662 8.12903 7.6763 8.12903ZM7.22468 2.70968H11.2892C11.6595 2.70968 11.9666 3.01677 11.9666 3.3871C11.9666 3.75742 11.6595 4.06452 11.2892 4.06452H7.22468C6.85436 4.06452 6.54726 3.75742 6.54726 3.3871C6.54726 3.01677 6.85436 2.70968 7.22468 2.70968Z",
fill: "currentColor"
}));
}));
SortAmountDownIcon.displayName = 'SortAmountDownIcon';
var SortAmountUpAltIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
d: "M3.63435 0.19871C3.57113 0.135484 3.49887 0.0903226 3.41758 0.0541935C3.255 -0.0180645 3.06532 -0.0180645 2.90274 0.0541935C2.82145 0.0903226 2.74919 0.135484 2.68597 0.19871L0.427901 2.45677C0.165965 2.71871 0.165965 3.15226 0.427901 3.41419C0.689836 3.67613 1.12338 3.67613 1.38532 3.41419L2.48726 2.31226V13.3226C2.48726 13.6929 2.79435 14 3.16467 14C3.535 14 3.84209 13.6929 3.84209 13.3226V2.31226L4.94403 3.41419C5.07951 3.54968 5.25113 3.6129 5.42274 3.6129C5.59435 3.6129 5.76597 3.54968 5.90145 3.41419C6.16338 3.15226 6.16338 2.71871 5.90145 2.45677L3.64338 0.19871H3.63435ZM13.7685 13.3226C13.7685 12.9523 13.4615 12.6452 13.0911 12.6452H7.22016C6.84984 12.6452 6.54274 12.9523 6.54274 13.3226C6.54274 13.6929 6.84984 14 7.22016 14H13.0911C13.4615 14 13.7685 13.6929 13.7685 13.3226ZM7.22016 8.58064C6.84984 8.58064 6.54274 8.27355 6.54274 7.90323C6.54274 7.5329 6.84984 7.22581 7.22016 7.22581H9.47823C9.84855 7.22581 10.1556 7.5329 10.1556 7.90323C10.1556 8.27355 9.84855 8.58064 9.47823 8.58064H7.22016ZM7.22016 5.87097H7.67177C8.0421 5.87097 8.34919 5.56387 8.34919 5.19355C8.34919 4.82323 8.0421 4.51613 7.67177 4.51613H7.22016C6.84984 4.51613 6.54274 4.82323 6.54274 5.19355C6.54274 5.56387 6.84984 5.87097 7.22016 5.87097ZM11.2847 11.2903H7.22016C6.84984 11.2903 6.54274 10.9832 6.54274 10.6129C6.54274 10.2426 6.84984 9.93548 7.22016 9.93548H11.2847C11.655 9.93548 11.9621 10.2426 11.9621 10.6129C11.9621 10.9832 11.655 11.2903 11.2847 11.2903Z",
fill: "currentColor"
}));
}));
SortAmountUpAltIcon.displayName = 'SortAmountUpAltIcon';
function ownKeys$1b(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$1b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var HeaderCheckbox = /*#__PURE__*/React.memo(function (props) {
var mergeProps = useMergeProps();
var getColumnProps = function getColumnProps() {
return ColumnBase.getCProps(props.column);
};
var _props$ptCallbacks = props.ptCallbacks,
ptm = _props$ptCallbacks.ptm,
ptmo = _props$ptCallbacks.ptmo,
cx = _props$ptCallbacks.cx;
var getColumnPTOptions = function getColumnPTOptions(key) {
var cProps = getColumnProps();
var columnMetaData = {
props: cProps,
parent: props.metaData,
hostName: props.hostName,
state: {},
context: {
checked: props.checked,
disabled: props.disabled
}
};
return mergeProps(ptm("column.".concat(key), {
column: columnMetaData
}), ptm("column.".concat(key), columnMetaData), ptmo(cProps, key, columnMetaData));
};
var onChange = function onChange(event) {
if (!props.disabled) {
props.onChange({
originalEvent: event,
checked: !props.checked
});
}
};
var headerCheckboxIconProps = mergeProps({
className: cx('checkIcon')
}, getColumnPTOptions('headerCheckbox.icon'));
var icon = props.checked ? props.checkIcon || /*#__PURE__*/React.createElement(CheckIcon, headerCheckboxIconProps) : null;
var checkIcon = IconUtils.getJSXIcon(icon, _objectSpread$1b({}, headerCheckboxIconProps), {
props: props
});
var tabIndex = props.disabled ? null : 0;
var headerCheckboxProps = {
role: 'checkbox',
'aria-checked': props.checked,
'aria-label': props.checked ? ariaLabel('selectAll') : ariaLabel('unselectAll'),
tabIndex: tabIndex,
onChange: onChange,
icon: checkIcon,
checked: props.checked,
disabled: props.disabled,
unstyled: props.unstyled,
pt: getColumnPTOptions('headerCheckbox')
};
return /*#__PURE__*/React.createElement(Checkbox, headerCheckboxProps);
});
HeaderCheckbox.displayName = 'HeaderCheckbox';
function ownKeys$1a(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$1a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var HeaderCell = /*#__PURE__*/React.memo(function (props) {
var _React$useState = React.useState({}),
_React$useState2 = _slicedToArray(_React$useState, 2),
styleObjectState = _React$useState2[0],
setStyleObjectState = _React$useState2[1];
var elementRef = React.useRef(null);
var prevColumn = usePrevious(props.column);
var mergeProps = useMergeProps();
var parentMetaData = props.metaData,
ptCallbacks = props.ptCallbacks,
index = props.index;
var _props$ptCallbacks = props.ptCallbacks,
ptm = _props$ptCallbacks.ptm,
ptmo = _props$ptCallbacks.ptmo,
cx = _props$ptCallbacks.cx;
var params = {
index: index
};
var parentParams = _objectSpread$1a(_objectSpread$1a({}, parentMetaData), params);
var getColumnProps = function getColumnProps() {
return ColumnBase.getCProps(props.column);
};
var getColumnPTOptions = function getColumnPTOptions(key) {
var cProps = getColumnProps();
var columnMetaData = {
props: cProps,
parent: parentParams,
hostName: props.hostName,
state: {
styleObject: styleObjectState
},
context: {
index: props.index,
sorted: getSortMeta().sorted,
resizable: props.resizableColumns,
size: props.metaData.props.size,
showGridlines: props.metaData.props.showGridlines
}
};
return mergeProps(ptm("column.".concat(key), {
column: columnMetaData
}), ptm("column.".concat(key), columnMetaData), ptmo(cProps, key, columnMetaData));
};
var isBadgeVisible = function isBadgeVisible() {
return props.multiSortMeta && props.multiSortMeta.length > 1;
};
var isSortableDisabled = function isSortableDisabled() {
return !getColumnProp('sortable') || getColumnProp('sortable') && (props.allSortableDisabled || getColumnProp('sortableDisabled'));
};
var getColumnProp = function getColumnProp() {
return props.column ? typeof (arguments.length <= 0 ? undefined : arguments[0]) === 'string' ? ColumnBase.getCProp(props.column, arguments.length <= 0 ? undefined : arguments[0]) : ColumnBase.getCProp((arguments.length <= 0 ? undefined : arguments[0]) || props.column, arguments.length <= 1 ? undefined : arguments[1]) : null;
};
var getStyle = function getStyle() {
var headerStyle = getColumnProp('headerStyle');
var columnStyle = getColumnProp('style');
return getColumnProp('frozen') ? Object.assign({}, columnStyle, headerStyle, styleObjectState) : Object.assign({}, columnStyle, headerStyle);
};
var getMultiSortMetaIndex = function getMultiSortMetaIndex() {
return props.multiSortMeta.findIndex(function (meta) {
return meta.field === getColumnProp('field') || meta.field === getColumnProp('sortField');
});
};
var getSortMeta = function getSortMeta() {
var sorted = false;
var sortOrder = 0;
var metaIndex = -1;
if (props.sortMode === 'single') {
sorted = props.sortField && (props.sortField === getColumnProp('field') || props.sortField === getColumnProp('sortField'));
sortOrder = sorted ? props.sortOrder : 0;
} else if (props.sortMode === 'multiple') {
metaIndex = getMultiSortMetaIndex();
if (metaIndex > -1) {
sorted = true;
sortOrder = props.multiSortMeta[metaIndex].order;
}
}
return {
sorted: sorted,
sortOrder: sortOrder,
metaIndex: metaIndex
};
};
var getAriaSort = function getAriaSort(_ref) {
var sorted = _ref.sorted,
sortOrder = _ref.sortOrder;
if (getColumnProp('sortable')) {
if (sorted && sortOrder < 0) {
return 'descending';
} else if (sorted && sortOrder > 0) {
return 'ascending';
}
return 'none';
}
return null;
};
var updateStickyPosition = function updateStickyPosition() {
if (getColumnProp('frozen')) {
var styleObject = _objectSpread$1a({}, styleObjectState);
var align = getColumnProp('alignFrozen');
if (align === 'right') {
var right = 0;
var next = elementRef.current && elementRef.current.nextElementSibling;
if (next && next.classList.contains('p-frozen-column')) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
}
styleObject.right = right + 'px';
} else {
var left = 0;
var prev = elementRef.current && elementRef.current.previousElementSibling;
while (prev) {
if (prev && prev.classList.contains('p-frozen-column')) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
elementRef.current.style.left = left + 'px';
break;
}
prev = prev.previousElementSibling;
}
styleObject.left = left + 'px';
}
var filterRow = elementRef.current.parentElement.nextElementSibling;
if (filterRow) {
var _index = DomHandler.index(elementRef.current);
filterRow.children[_index].style.left = styleObject.left;
filterRow.children[_index].style.right = styleObject.right;
}
var isSameStyle = styleObjectState.left === styleObject.left && styleObjectState.right === styleObject.right;
!isSameStyle && setStyleObjectState(styleObject);
}
};
var updateSortableDisabled = function updateSortableDisabled(prevColumn) {
if (getColumnProp(prevColumn, 'sortableDisabled') !== getColumnProp('sortableDisabled') || getColumnProp(prevColumn, 'sortable') !== getColumnProp('sortable')) {
props.onSortableChange();
}
};
var _onClick = function onClick(event) {
if (!isSortableDisabled()) {
var targetNode = event.target;
if (DomHandler.getAttribute(targetNode, 'data-p-sortable-column') === true || DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headertitle' || DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headercontent' || DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sortIcon' || DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sortIcon' || targetNode.closest('[data-p-sortable-column="true"]') && !targetNode.closest('[data-pc-section="filtermenubutton"]')) {
DomHandler.clearSelection();
props.onSortChange({
originalEvent: event,
column: props.column,
sortableDisabledFields: props.sortableDisabledFields
});
}
}
};
var _onMouseDown = function onMouseDown(event) {
props.onColumnMouseDown({
originalEvent: event,
column: props.column
});
};
var _onKeyDown = function onKeyDown(event) {
if ((event.code == 'Enter' || event.code === 'NumpadEnter' || event.code == 'Space') && event.target === elementRef.current && DomHandler.getAttribute(event.currentTarget, 'data-p-sortable-column') === true) {
_onClick(event);
event.preventDefault();
}
};
var _onDragStart = function onDragStart(event) {
props.onColumnDragStart({
originalEvent: event,
column: props.column
});
};
var _onDragOver = function onDragOver(event) {
props.onColumnDragOver({
originalEvent: event,
column: props.column
});
};
var _onDragLeave = function onDragLeave(event) {
props.onColumnDragLeave({
originalEvent: event,
column: props.column
});
};
var _onDrop = function onDrop(event) {
props.onColumnDrop({
originalEvent: event,
column: props.column
});
};
var onResizeStart = function onResizeStart(event) {
props.onColumnResizeStart({
originalEvent: event,
column: props.column
});
};
var onResizerClick = function onResizerClick(event) {
if (props.onColumnResizerClick) {
props.onColumnResizerClick({
originalEvent: event,
element: event.currentTarget.parentElement,
column: props.column
});
event.preventDefault();
}
};
var onResizerDoubleClick = function onResizerDoubleClick(event) {
if (props.onColumnResizerDoubleClick) {
props.onColumnResizerDoubleClick({
originalEvent: event,
element: event.currentTarget.parentElement,
column: props.column
});
event.preventDefault();
}
};
React.useEffect(function () {
if (getColumnProp('frozen')) {
updateStickyPosition();
}
updateSortableDisabled(prevColumn);
});
var createResizer = function createResizer() {
if (props.resizableColumns && !getColumnProp('frozen')) {
var columnResizerProps = mergeProps({
className: cx('columnResizer'),
onMouseDown: function onMouseDown(e) {
return onResizeStart(e);
},
onTouchStart: function onTouchStart(e) {
return onResizeStart(e);
},
onClick: function onClick(e) {
return onResizerClick(e);
},
onDoubleClick: function onDoubleClick(e) {
return onResizerDoubleClick(e);
}
}, getColumnPTOptions('columnResizer'));
return /*#__PURE__*/React.createElement("span", columnResizerProps);
}
return null;
};
var createTitle = function createTitle() {
var title = ObjectUtils.getJSXElement(getColumnProp('header'), {
props: props.tableProps
});
var headerTitleProps = mergeProps({
className: cx('headerTitle')
}, getColumnPTOptions('headerTitle'));
return /*#__PURE__*/React.createElement("span", headerTitleProps, title);
};
var createSortIcon = function createSortIcon(_ref2) {
var sorted = _ref2.sorted,
sortOrder = _ref2.sortOrder;
if (getColumnProp('sortable')) {
var sortIconProps = mergeProps({
className: cx('sortIcon')
}, getColumnPTOptions('sortIcon'));
var sortProps = mergeProps(getColumnPTOptions('sort'));
var icon = sorted ? sortOrder < 0 ? /*#__PURE__*/React.createElement(SortAmountDownIcon, sortIconProps) : /*#__PURE__*/React.createElement(SortAmountUpAltIcon, sortIconProps) : /*#__PURE__*/React.createElement(SortAltIcon, sortIconProps);
var sortIcon = IconUtils.getJSXIcon(props.sortIcon || icon, _objectSpread$1a({}, sortIconProps), {
props: props,
sorted: sorted,
sortOrder: sortOrder
});
return /*#__PURE__*/React.createElement("span", sortProps, sortIcon);
}
return null;
};
var createBadge = function createBadge(_ref3) {
var metaIndex = _ref3.metaIndex;
if (metaIndex !== -1 && isBadgeVisible()) {
var value = props.groupRowsBy && props.groupRowsBy === props.groupRowSortField ? metaIndex : metaIndex + 1;
var sortBadgeProps = mergeProps({
className: cx('sortBadge')
}, getColumnPTOptions('root'), getColumnPTOptions('sortBadge'));
return /*#__PURE__*/React.createElement("span", sortBadgeProps, value);
}
return null;
};
var createCheckbox = function createCheckbox() {
if (props.showSelectAll && getColumnProp('selectionMode') === 'multiple' && props.filterDisplay !== 'row') {
var allRowsSelected = props.allRowsSelected(props.value);
return /*#__PURE__*/React.createElement(HeaderCheckbox, {
hostName: props.hostName,
column: props.column,
checked: allRowsSelected,
onChange: props.onColumnCheckboxChange,
disabled: props.empty,
ptCallbacks: ptCallbacks,
metaData: parentMetaData,
unstyled: props.unstyled
});
}
return null;
};
var createFilter = function createFilter() {
if (props.filterDisplay === 'menu' && getColumnProp('filter')) {
return /*#__PURE__*/React.createElement(ColumnFilter, {
hostName: props.hostName,
display: "menu",
column: props.column,
filters: props.filters,
onFilterChange: props.onFilterChange,
onFilterApply: props.onFilterApply,
filtersStore: props.filtersStore,
filterIcon: props.filterIcon,
filterClearIcon: props.filterClearIcon,
ptCallbacks: ptCallbacks,
metaData: parentMetaData,
unstyled: props.unstyled
});
}
return null;
};
var createHeader = function createHeader(sortMeta) {
var title = createTitle();
var sortIcon = createSortIcon(sortMeta);
var badge = createBadge(sortMeta);
var checkbox = createCheckbox();
var filter = createFilter();
var headerContentProps = mergeProps({
className: cx('headerContent')
}, getColumnPTOptions('headerContent'));
return /*#__PURE__*/React.createElement("div", headerContentProps, title, sortIcon, badge, checkbox, filter);
};
var createElement = function createElement() {
var _isSortableDisabled = isSortableDisabled();
var sortMeta = getSortMeta();
var style = getStyle();
var align = getColumnProp('alignHeader') || getColumnProp('align');
var frozen = getColumnProp('frozen');
var tabIndex = getColumnProp('sortable') && !_isSortableDisabled ? props.tabIndex : null;
var colSpan = getColumnProp('colSpan');
var rowSpan = getColumnProp('rowSpan');
var ariaSort = getAriaSort(sortMeta);
var headerTooltip = getColumnProp('headerTooltip');
var headerClassName = getColumnProp('headerClassName');
var hasTooltip = ObjectUtils.isNotEmpty(headerTooltip);
var headerTooltipOptions = getColumnProp('headerTooltipOptions');
var resizer = createResizer();
var header = createHeader(sortMeta);
var headerCellProps = mergeProps({
className: classNames(headerClassName, cx('headerCell', {
headerProps: props,
frozen: frozen,
sortMeta: sortMeta,
align: align,
_isSortableDisabled: _isSortableDisabled,
getColumnProp: getColumnProp
})),
style: style,
role: 'columnheader',
onClick: function onClick(e) {
return _onClick(e);
},
onKeyDown: function onKeyDown(e) {
return _onKeyDown(e);
},
onMouseDown: function onMouseDown(e) {
return _onMouseDown(e);
},
onDragStart: function onDragStart(e) {
return _onDragStart(e);
},
onDragOver: function onDragOver(e) {
return _onDragOver(e);
},
onDragLeave: function onDragLeave(e) {
return _onDragLeave(e);
},
onDrop: function onDrop(e) {
return _onDrop(e);
},
tabIndex: tabIndex,
colSpan: colSpan,
rowSpan: rowSpan,
'aria-sort': ariaSort,
'data-p-sortable-column': getColumnProp('sortable'),
'data-p-resizable-column': props.resizableColumns,
'data-p-highlight': sortMeta.sorted,
'data-p-filter-column': !props.metaData.props.headerColumnGroup && props.filterDisplay === 'row',
'data-p-frozen-column': getColumnProp('frozen'),
'data-p-reorderable-column': props.reorderableColumns
}, getColumnPTOptions('root'), getColumnPTOptions('headerCell'));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("th", _extends({
ref: elementRef
}, headerCellProps), resizer, header), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: headerTooltip,
pt: getColumnPTOptions('tooltip'),
unstyled: props.unstyled
}, headerTooltipOptions)));
};
var element = createElement();
return element;
});
HeaderCell.displayName = 'HeaderCell';
var _excluded = ["unstyled", "__TYPE", "ptOptions"];
function ownKeys$19(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$19(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$19(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$19(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var TableHeader = /*#__PURE__*/React.memo(function (props) {
var _React$useState = React.useState([]),
_React$useState2 = _slicedToArray(_React$useState, 2),
sortableDisabledFieldsState = _React$useState2[0],
setSortableDisabledFieldsState = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
allSortableDisabledState = _React$useState4[0],
setAllSortableDisabledState = _React$useState4[1];
var mergeProps = useMergeProps();
var isSingleSort = props.sortMode === 'single';
var isMultipleSort = props.sortMode === 'multiple';
var isAllSortableDisabled = isSingleSort && allSortableDisabledState;
var _props$ptCallbacks = props.ptCallbacks,
ptm = _props$ptCallbacks.ptm,
ptmo = _props$ptCallbacks.ptmo,
cx = _props$ptCallbacks.cx;
var context = React.useContext(PrimeReactContext);
var getColumnProp = function getColumnProp(column, name) {
return ColumnBase.getCProp(column, name);
};
var getColumnProps = function getColumnProps(column) {
return ColumnBase.getCProps(column);
};
var getRowProps = function getRowProps(row) {
return ColumnGroupBase.getCProps(row);
};
var getColumnGroupProps = function getColumnGroupProps() {
return props.headerColumnGroup ? ptmo(ColumnGroupBase.getCProps(props.headerColumnGroup)) : undefined;
};
var getColumnGroupPTOptions = function getColumnGroupPTOptions(key) {
var cGProps = getColumnGroupProps();
var columnGroupMetaData = {
props: cGProps,
parent: props.metaData,
hostName: props.hostName,
state: {
sortableDisabledFields: sortableDisabledFieldsState,
allSortableDisabled: allSortableDisabledState
}
};
return mergeProps(ptm("columnGroup.".concat(key), {
columnGroup: columnGroupMetaData
}), ptm("columnGroup.".concat(key), columnGroupMetaData), ptmo(cGProps, key, columnGroupMetaData));
};
var getColumnPTOptions = function getColumnPTOptions(column, key) {
var cProps = getColumnProps(column);
var columnMetaData = {
props: cProps,
parent: props.metaData,
hostName: props.hostName,
state: {
sortableDisabledFields: sortableDisabledFieldsState,
allSortableDisabled: allSortableDisabledState
}
};
return mergeProps(ptm("column.".concat(key), {
column: columnMetaData
}), ptm("column.".concat(key), columnMetaData), ptmo(cProps, key, columnMetaData));
};
var getRowPTOptions = function getRowPTOptions(row, key) {
var rProps = getRowProps(row);
var rowMetaData = {
props: rProps,
parent: props.metaData,
hostName: props.hostName
};
return mergeProps(ptm("row.".concat(key), {
row: rowMetaData
}), ptm("row.".concat(key), rowMetaData), ptmo(rProps, key, rowMetaData));
};
var isColumnSorted = function isColumnSorted(column) {
return props.sortField !== null ? getColumnProp(column, 'field') === props.sortField || getColumnProp(column, 'sortField') === props.sortField : false;
};
var updateSortableDisabled = function updateSortableDisabled() {
if (isSingleSort || isMultipleSort && props.onSortChange) {
var sortableDisabledFields = [];
var allSortableDisabled = false;
props.columns.forEach(function (column) {
if (getColumnProp(column, 'sortableDisabled')) {
sortableDisabledFields.push(getColumnProp(column, 'sortField') || getColumnProp(column, 'field'));
if (!allSortableDisabled && isColumnSorted(column)) {
allSortableDisabled = true;
}
}
});
setSortableDisabledFieldsState(sortableDisabledFields);
setAllSortableDisabledState(allSortableDisabled);
}
};
var onSortableChange = function onSortableChange() {
updateSortableDisabled();
};
var onCheckboxChange = function onCheckboxChange(e) {
props.onColumnCheckboxChange(e, props.value);
};
useMountEffect(function () {
updateSortableDisabled();
});
var createGroupHeaderCells = function createGroupHeaderCells(row) {
var columns = React.Children.toArray(RowBase.getCProp(row, 'children'));
return createHeaderCells(columns);
};
var createHeaderCells = function createHeaderCells(columns) {
return React.Children.map(columns, function (col, i) {
var isVisible = col ? !getColumnProp(col, 'hidden') : true;
var key = col ? getColumnProp(col, 'columnKey') || getColumnProp(col, 'field') || i : i;
return isVisible && /*#__PURE__*/React.createElement(HeaderCell, {
hostName: props.hostName,
allRowsSelected: props.allRowsSelected,
allSortableDisabled: isAllSortableDisabled,
column: col,
index: i,
empty: props.empty,
filterClearIcon: props.filterClearIcon,
filterDisplay: props.filterDisplay,
filterIcon: props.filterIcon,
filters: props.filters,
filtersStore: props.filtersStore,
groupRowSortField: props.groupRowSortField,
groupRowsBy: props.groupRowsBy,
key: key,
multiSortMeta: props.multiSortMeta,
onColumnCheckboxChange: onCheckboxChange,
onColumnDragLeave: props.onColumnDragLeave,
onColumnDragOver: props.onColumnDragOver,
onColumnDragStart: props.onColumnDragStart,
onColumnDrop: props.onColumnDrop,
onColumnMouseDown: props.onColumnMouseDown,
onColumnResizeStart: props.onColumnResizeStart,
onColumnResizerClick: props.onColumnResizerClick,
onColumnResizerDoubleClick: props.onColumnResizerDoubleClick,
onFilterApply: props.onFilterApply,
onFilterChange: props.onFilterChange,
onSortChange: props.onSortChange,
onSortableChange: onSortableChange,
reorderableColumns: props.reorderableColumns,
resizableColumns: props.resizableColumns,
showSelectAll: props.showSelectAll,
sortField: props.sortField,
sortIcon: props.sortIcon,
sortMode: props.sortMode,
sortOrder: props.sortOrder,
sortableDisabledFields: sortableDisabledFieldsState,
tabIndex: props.tabIndex,
tableProps: props.tableProps,
value: props.value,
ptCallbacks: props.ptCallbacks,
metaData: props.metaData,
unstyled: props.unstyled
});
});
};
var createCheckbox = function createCheckbox(column, selectionMode) {
if (props.showSelectAll && selectionMode === 'multiple') {
var allRowsSelected = props.allRowsSelected(props.value);
return /*#__PURE__*/React.createElement(HeaderCheckbox, {
hostName: props.hostName,
column: column,
checked: allRowsSelected,
onChange: onCheckboxChange,
disabled: props.empty,
ptCallbacks: props.ptCallbacks,
metaData: props.metaData,
unstyled: props.unstyled
});
}
return null;
};
var createFilter = function createFilter(column, filter) {
if (filter) {
return /*#__PURE__*/React.createElement(ColumnFilter, {
hostName: props.hostName,
display: "row",
column: column,
filterClearIcon: props.filterClearIcon,
filterIcon: props.filterIcon,
filters: props.filters,
filtersStore: props.filtersStore,
metaData: props.metaData,
onFilterApply: props.onFilterApply,
onFilterChange: props.onFilterChange,
ptCallbacks: props.ptCallbacks,
unstyled: props.unstyled
});
}
return null;
};
var createFilterCells = function createFilterCells() {
return React.Children.map(props.columns, function (col, i) {
var isVisible = !getColumnProp(col, 'hidden');
if (isVisible) {
var _ColumnBase$getCProps = ColumnBase.getCProps(col),
filterHeaderStyle = _ColumnBase$getCProps.filterHeaderStyle,
style = _ColumnBase$getCProps.style,
filterHeaderClassName = _ColumnBase$getCProps.filterHeaderClassName,
className = _ColumnBase$getCProps.className,
frozen = _ColumnBase$getCProps.frozen,
columnKey = _ColumnBase$getCProps.columnKey,
field = _ColumnBase$getCProps.field,
selectionMode = _ColumnBase$getCProps.selectionMode,
filter = _ColumnBase$getCProps.filter;
var colStyle = _objectSpread$19(_objectSpread$19({}, filterHeaderStyle || {}), style || {});
var colKey = columnKey || field || i;
var checkbox = createCheckbox(col, selectionMode);
var filterRow = createFilter(col, filter);
var headerCellProps = mergeProps({
style: colStyle,
className: classNames(filterHeaderClassName, className, cx('headerCell', {
frozen: frozen,
column: col
}))
}, getColumnPTOptions(col, 'root'), getColumnPTOptions(col, 'headerCell'));
return /*#__PURE__*/React.createElement("th", _extends({
key: colKey
}, headerCellProps), checkbox, filterRow);
}
return null;
});
};
var createContent = function createContent() {
if (props.headerColumnGroup) {
var rows = React.Children.toArray(ColumnGroupBase.getCProp(props.headerColumnGroup, 'children'));
return rows.map(function (row, i) {
var _RowBase$getProps = RowBase.getProps(row.props, context),
unstyled = _RowBase$getProps.unstyled;
_RowBase$getProps.__TYPE;
_RowBase$getProps.ptOptions;
var rest = _objectWithoutProperties(_RowBase$getProps, _excluded);
var headerRowProps = mergeProps({
role: 'row'
}, unstyled ? _objectSpread$19({
unstyled: unstyled
}, rest) : rest, getRowPTOptions(row, 'root'));
return /*#__PURE__*/React.createElement("tr", _extends({}, headerRowProps, {
key: i
}), createGroupHeaderCells(row));
});
}
var headerRowProps = mergeProps({
role: 'row'
}, ptm('headerRow', {
hostName: props.hostName
}));
var headerRow = /*#__PURE__*/React.createElement("tr", headerRowProps, createHeaderCells(props.columns));
var filterRow = props.filterDisplay === 'row' && /*#__PURE__*/React.createElement("tr", headerRowProps, createFilterCells());
return /*#__PURE__*/React.createElement(React.Fragment, null, headerRow, filterRow);
};
var content = createContent();
var theadProps = mergeProps({
className: cx('thead'),
role: 'rowgroup'
}, getColumnGroupPTOptions('root'), ptm('thead', {
hostName: props.hostName
}));
return /*#__PURE__*/React.createElement("thead", theadProps, content);
});
TableHeader.displayName = 'TableHeader';
function _createForOfIteratorHelper$b(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$b(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray$b(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$b(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$b(r, a) : void 0; } }
function _arrayLikeToArray$b(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 ownKeys$18(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$18(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$18(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$18(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var context = React.useContext(PrimeReactContext);
var mergeProps = useMergeProps();
var props = DataTableBase.getProps(inProps, context);
var _React$useState = React.useState(props.first),
_React$useState2 = _slicedToArray(_React$useState, 2),
firstState = _React$useState2[0],
setFirstState = _React$useState2[1];
var _React$useState3 = React.useState(props.rows),
_React$useState4 = _slicedToArray(_React$useState3, 2),
rowsState = _React$useState4[0],
setRowsState = _React$useState4[1];
var _React$useState5 = React.useState(props.sortField),
_React$useState6 = _slicedToArray(_React$useState5, 2),
sortFieldState = _React$useState6[0],
setSortFieldState = _React$useState6[1];
var _React$useState7 = React.useState(props.sortOrder),
_React$useState8 = _slicedToArray(_React$useState7, 2),
sortOrderState = _React$useState8[0],
setSortOrderState = _React$useState8[1];
var _React$useState9 = React.useState(props.multiSortMeta),
_React$useState10 = _slicedToArray(_React$useState9, 2),
multiSortMetaState = _React$useState10[0],
setMultiSortMetaState = _React$useState10[1];
var _React$useState11 = React.useState(props.filters),
_React$useState12 = _slicedToArray(_React$useState11, 2),
filtersState = _React$useState12[0],
setFiltersState = _React$useState12[1];
var _React$useState13 = React.useState([]),
_React$useState14 = _slicedToArray(_React$useState13, 2),
columnOrderState = _React$useState14[0],
setColumnOrderState = _React$useState14[1];
var _React$useState15 = React.useState(null),
_React$useState16 = _slicedToArray(_React$useState15, 2),
groupRowsSortMetaState = _React$useState16[0],
setGroupRowsSortMetaState = _React$useState16[1];
var _React$useState17 = React.useState({}),
_React$useState18 = _slicedToArray(_React$useState17, 2),
editingMetaState = _React$useState18[0],
setEditingMetaState = _React$useState18[1];
var _React$useState19 = React.useState({}),
_React$useState20 = _slicedToArray(_React$useState19, 2),
frozenEditingMetaState = _React$useState20[0],
setFrozenEditingMetaState = _React$useState20[1];
var _React$useState21 = React.useState(props.rows),
_React$useState22 = _slicedToArray(_React$useState21, 2),
d_rowsState = _React$useState22[0],
setD_rowsState = _React$useState22[1];
var _React$useState23 = React.useState({}),
_React$useState24 = _slicedToArray(_React$useState23, 2),
d_filtersState = _React$useState24[0],
setD_filtersState = _React$useState24[1];
var metaData = {
props: props,
state: {
first: firstState,
rows: rowsState,
sortField: sortFieldState,
sortOrder: sortOrderState,
multiSortMeta: multiSortMetaState,
filters: filtersState,
columnOrder: columnOrderState,
groupRowsSortMeta: groupRowsSortMetaState,
editingMeta: editingMetaState,
frozenEditingMeta: frozenEditingMetaState,
d_rows: d_rowsState,
d_filters: d_filtersState
},
context: {
scrollable: props.scrollable
}
};
var ptCallbacks = DataTableBase.setMetaData(metaData);
useHandleStyle(DataTableBase.css.styles, ptCallbacks.isUnstyled, {
name: 'datatable'
});
var attributeSelector = React.useRef('');
var elementRef = React.useRef(null);
var tableRef = React.useRef(null);
var wrapperRef = React.useRef(null);
var bodyRef = React.useRef(null);
var frozenBodyRef = React.useRef(null);
var virtualScrollerRef = React.useRef(null);
var reorderIndicatorUpRef = React.useRef(null);
var reorderIndicatorDownRef = React.useRef(null);
var colReorderIconWidth = React.useRef(null);
var colReorderIconHeight = React.useRef(null);
var resizeHelperRef = React.useRef(null);
var draggedColumnElement = React.useRef(null);
var draggedColumn = React.useRef(null);
var dropPosition = React.useRef(null);
var styleElement = React.useRef(null);
var responsiveStyleElement = React.useRef(null);
var beforeResizeStyleElement = React.useRef(null);
var columnWidthsState = React.useRef(null);
var tableWidthState = React.useRef(null);
var resizeColumn = React.useRef(null);
var resizeColumnElement = React.useRef(null);
var columnResizing = React.useRef(false);
var lastResizeHelperX = React.useRef(null);
var columnSortable = React.useRef(false);
var columnSortFunction = React.useRef(null);
var columnField = React.useRef(null);
var filterTimeout = React.useRef(null);
if (props.rows !== d_rowsState && !props.onPage) {
setRowsState(props.rows);
setD_rowsState(props.rows);
}
var columnResizeStartListener = function columnResizeStartListener(event) {
return columnResizing.current && onColumnResize(event);
};
var columnResizeEndListener = function columnResizeEndListener() {
return columnResizing.current && (columnResizing.current = false, onColumnResizeEnd());
};
var _useEventListener = useEventListener({
type: 'mousemove',
listener: columnResizeStartListener
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentMouseMoveListener = _useEventListener2[0],
unbindDocumentMouseMoveListener = _useEventListener2[1];
var _useEventListener3 = useEventListener({
type: 'mouseup',
listener: columnResizeEndListener
}),
_useEventListener4 = _slicedToArray(_useEventListener3, 2),
bindDocumentMouseUpListener = _useEventListener4[0],
unbindDocumentMouseUpListener = _useEventListener4[1];
var _useEventListener5 = useEventListener({
type: 'touchmove',
listener: columnResizeStartListener
}),
_useEventListener6 = _slicedToArray(_useEventListener5, 2),
bindDocumentTouchMoveListener = _useEventListener6[0],
unbindDocumentTouchMoveListener = _useEventListener6[1];
var _useEventListener7 = useEventListener({
type: 'touchend',
listener: columnResizeEndListener
}),
_useEventListener8 = _slicedToArray(_useEventListener7, 2),
bindDocumentTouchEndListener = _useEventListener8[0],
unbindDocumentTouchEndListener = _useEventListener8[1];
var isCustomStateStorage = function isCustomStateStorage() {
return props.stateStorage === 'custom';
};
var isStateful = function isStateful() {
return props.stateKey != null || isCustomStateStorage();
};
var isVirtualScrollerDisabled = function isVirtualScrollerDisabled() {
return ObjectUtils.isEmpty(props.virtualScrollerOptions) || !props.scrollable;
};
var isEquals = function isEquals(data1, data2) {
return props.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, props.dataKey);
};
var hasFilter = function hasFilter() {
return ObjectUtils.isNotEmpty(getFilters()) || props.globalFilter;
};
var getFirst = function getFirst() {
return props.onPage ? props.first : firstState;
};
var getRows = function getRows() {
return props.onPage ? props.rows : rowsState;
};
var getSortField = function getSortField() {
return props.onSort ? props.sortField : sortFieldState;
};
var getSortOrder = function getSortOrder() {
return props.onSort ? props.sortOrder : sortOrderState;
};
var getMultiSortMeta = function getMultiSortMeta() {
return (props.onSort ? props.multiSortMeta : multiSortMetaState) || [];
};
var getFilters = function getFilters() {
return props.onFilter ? props.filters : filtersState;
};
var getColumnProp = function getColumnProp(column, name) {
return ColumnBase.getCProp(column, name);
};
var getColumns = function getColumns(ignoreReorderable) {
var columns = React.Children.toArray(props.children);
if (!columns) {
return null;
}
if (!ignoreReorderable && props.reorderableColumns && columnOrderState) {
var orderedColumns = columnOrderState.reduce(function (arr, columnKey) {
var column = findColumnByKey(columns, columnKey);
column && arr.push(column);
return arr;
}, []);
return [].concat(_toConsumableArray(orderedColumns), _toConsumableArray(columns.filter(function (col) {
return orderedColumns.indexOf(col) < 0;
})));
}
return columns;
};
var saveState = function saveState() {
var state = {};
if (props.paginator) {
state.first = getFirst();
state.rows = getRows();
}
var sortField = getSortField();
if (sortField) {
state.sortField = sortField;
state.sortOrder = getSortOrder();
}
var multiSortMeta = getMultiSortMeta();
if (multiSortMeta) {
state.multiSortMeta = multiSortMeta;
}
if (hasFilter()) {
state.filters = getFilters();
}
if (props.resizableColumns) {
saveColumnWidths(state);
}
if (props.reorderableColumns) {
state.columnOrder = columnOrderState;
}
if (props.expandedRows) {
state.expandedRows = props.expandedRows;
}
if (props.selection && props.onSelectionChange) {
state.selection = props.selection;
}
if (isCustomStateStorage()) {
if (props.customSaveState) {
props.customSaveState(state);
}
} else {
var storage = getStorage(props.stateStorage);
if (ObjectUtils.isNotEmpty(state)) {
storage.setItem(props.stateKey, JSON.stringify(state));
}
}
if (props.onStateSave) {
props.onStateSave(state);
}
};
var clearState = function clearState() {
var storage = getStorage(props.stateStorage);
if (storage && props.stateKey) {
storage.removeItem(props.stateKey);
}
};
var restoreState = function restoreState() {
var restoredState = {};
if (isCustomStateStorage()) {
if (props.customRestoreState) {
restoredState = props.customRestoreState();
}
} else {
var storage = getStorage(props.stateStorage);
var stateString = storage.getItem(props.stateKey);
var dateFormat = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/;
var reviver = function reviver(key, value) {
return typeof value === 'string' && dateFormat.test(value) ? new Date(value) : value;
};
if (stateString) {
restoredState = JSON.parse(stateString, reviver);
}
}
_restoreState(restoredState);
};
var restoreTableState = function restoreTableState(restoredState) {
_restoreState(restoredState);
};
var _restoreState = function _restoreState() {
var restoredState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
if (ObjectUtils.isNotEmpty(restoredState)) {
if (props.paginator) {
if (props.onPage) {
var getOnPageParams = function getOnPageParams(first, rows) {
var totalRecords = getTotalRecords(processedData());
var pageCount = Math.ceil(totalRecords / rows) || 1;
var page = Math.floor(first / rows);
return {
first: first,
rows: rows,
page: page,
pageCount: pageCount
};
};
props.onPage(createEvent(getOnPageParams(restoredState.first, restoredState.rows)));
} else {
setFirstState(restoredState.first);
setRowsState(restoredState.rows);
}
}
if (restoredState.sortField) {
if (props.onSort) {
props.onSort(createEvent({
sortField: restoredState.sortField,
sortOrder: restoredState.sortOrder
}));
} else {
setSortFieldState(restoredState.sortField);
setSortOrderState(restoredState.sortOrder);
}
}
if (restoredState.multiSortMeta) {
if (props.onSort) {
props.onSort(createEvent({
multiSortMeta: restoredState.multiSortMeta
}));
} else {
var lastMeta = restoredState.multiSortMeta[restoredState.multiSortMeta.length - 1];
var field = lastMeta && lastMeta.field ? lastMeta.field : null;
if (field) {
var sortColumn = findColumnByKey(getColumns(), field);
if (sortColumn) {
var sortFunction = getColumnProp(sortColumn, 'sortFunction');
var sortable = getColumnProp(sortColumn, 'sortable');
if (sortFunction && sortable) {
columnSortFunction.current = sortFunction;
columnSortable.current = sortable;
columnField.current = field;
}
}
}
setMultiSortMetaState(restoredState.multiSortMeta);
}
}
if (restoredState.filters) {
setD_filtersState(cloneFilters(restoredState.filters));
if (props.onFilter) {
props.onFilter(createEvent({
filters: restoredState.filters
}));
} else {
setFiltersState(cloneFilters(restoredState.filters));
}
}
if (props.resizableColumns) {
columnWidthsState.current = restoredState.columnWidths;
tableWidthState.current = restoredState.tableWidth;
restoreColumnWidths();
}
if (props.reorderableColumns) {
setColumnOrderState(restoredState.columnOrder);
}
if (restoredState.expandedRows && props.onRowToggle) {
props.onRowToggle({
data: restoredState.expandedRows
});
}
if (restoredState.selection && props.onSelectionChange) {
props.onSelectionChange({
value: restoredState.selection
});
}
if (props.onStateRestore) {
props.onStateRestore(restoredState);
}
}
};
var saveColumnWidths = function saveColumnWidths(state) {
var widths = [];
var headers = DomHandler.find(elementRef.current, '[data-pc-section="thead"] > tr > th');
headers.forEach(function (header) {
return widths.push(DomHandler.getOuterWidth(header));
});
state.columnWidths = widths.join(',');
if (props.columnResizeMode === 'expand') {
state.tableWidth = DomHandler.getOuterWidth(tableRef.current) + 'px';
}
};
var addColumnWidthStyles = function addColumnWidthStyles(widths) {
createStyleElement();
var innerHTML = '';
var selector = "[data-pc-name=\"datatable\"][".concat(attributeSelector.current, "] > [data-pc-section=\"wrapper\"] ").concat(isVirtualScrollerDisabled() ? '' : '> [data-pc-name="virtualscroller"]', " > [data-pc-section=\"table\"]");
widths.forEach(function (width, index) {
var style = "width: ".concat(width, "px !important; max-width: ").concat(width, "px !important");
innerHTML = innerHTML + "\n ".concat(selector, " > [data-pc-section=\"thead\"] > tr > th:nth-child(").concat(index + 1, "),\n ").concat(selector, " > [data-pc-section=\"tbody\"] > tr > td:nth-child(").concat(index + 1, "),\n ").concat(selector, " > [data-pc-section=\"tfoot\"] > tr > td:nth-child(").concat(index + 1, ") {\n ").concat(style, "\n }\n ");
});
styleElement.current.innerHTML = innerHTML;
};
var restoreColumnWidths = function restoreColumnWidths() {
if (columnWidthsState.current) {
var widths = columnWidthsState.current.split(',');
if (props.columnResizeMode === 'expand' && tableWidthState.current) {
tableRef.current.style.width = tableWidthState.current;
tableRef.current.style.minWidth = tableWidthState.current;
}
if (ObjectUtils.isNotEmpty(widths)) {
addColumnWidthStyles(widths);
}
}
};
var findParentHeader = function findParentHeader(element) {
if (element.nodeName === 'TH') {
return element;
}
var parent = element.parentElement;
while (parent.nodeName !== 'TH') {
parent = parent.parentElement;
if (!parent) {
break;
}
}
return parent;
};
var getGroupRowSortField = function getGroupRowSortField() {
return props.sortMode === 'single' ? props.sortField : groupRowsSortMetaState ? groupRowsSortMetaState.field : null;
};
var getSelectableData = function getSelectableData(val) {
if (props.showSelectionElement || props.isDataSelectable) {
return val.filter(function (data, index) {
var isSelectable = true;
if (props.showSelectionElement) {
isSelectable = props.showSelectionElement({
rowIndex: index,
props: props
});
}
if (props.isDataSelectable && isSelectable) {
isSelectable = props.isDataSelectable({
data: data,
index: index
});
}
return isSelectable;
});
}
return val;
};
var allRowsSelected = function allRowsSelected(processedData) {
if (props.onSelectAllChange) {
return props.selectAll;
}
var data = props.selectionPageOnly ? dataToRender(processedData) : processedData;
var val = ObjectUtils.isNotEmpty(props.frozenValue) ? [].concat(_toConsumableArray(props.frozenValue), _toConsumableArray(data)) : data;
var selectableVal = getSelectableData(val);
return ObjectUtils.isNotEmpty(selectableVal) && props.selection && selectableVal.every(function (sv) {
return ObjectUtils.isArray(props.selection) && props.selection.some(function (s) {
return isEquals(s, sv);
});
});
};
var getSelectionModeInColumn = function getSelectionModeInColumn(columns) {
if (columns) {
var col = columns.find(function (c) {
return !!getColumnProp(c, 'selectionMode');
});
return col ? getColumnProp(col, 'selectionMode') : null;
}
return null;
};
var findColumnByKey = function findColumnByKey(columns, key) {
return ObjectUtils.isNotEmpty(columns) ? columns.find(function (col) {
return getColumnProp(col, 'columnKey') === key || getColumnProp(col, 'field') === key;
}) : null;
};
var getTotalRecords = function getTotalRecords(data) {
return props.lazy ? props.totalRecords : data ? data.length : 0;
};
var onEditingMetaChange = function onEditingMetaChange(e) {
var rowData = e.rowData,
field = e.field,
editingKey = e.editingKey;
e.rowIndex;
var editing = e.editing;
var editingMeta = _objectSpread$18({}, editingMetaState);
var meta = editingMeta[editingKey];
if (editing) {
!meta && (meta = editingMeta[editingKey] = {
data: _objectSpread$18({}, rowData),
fields: []
});
meta.fields.push(field);
} else if (meta) {
var fields = meta.fields.filter(function (f) {
return f !== field;
});
!fields.length ? delete editingMeta[editingKey] : meta.fields = fields;
}
setEditingMetaState(editingMeta);
};
var clearEditingMetaData = function clearEditingMetaData() {
if (props.editMode && ObjectUtils.isNotEmpty(editingMetaState)) {
setEditingMetaState({});
}
};
var onFrozenEditingMetaChange = function onFrozenEditingMetaChange(e) {
var rowData = e.rowData,
field = e.field,
editingKey = e.editingKey,
editing = e.editing;
var frozenEditingMeta = _objectSpread$18({}, frozenEditingMetaState);
var meta = frozenEditingMeta[editingKey];
if (editing) {
!meta && (meta = frozenEditingMeta[editingKey] = {
data: _objectSpread$18({}, rowData),
fields: []
});
meta.fields.push(field);
} else if (meta) {
var fields = meta.fields.filter(function (f) {
return f !== field;
});
!fields.length ? delete frozenEditingMeta[editingKey] : meta.fields = fields;
}
setFrozenEditingMetaState(frozenEditingMeta);
};
var clearFrozenEditingMetaData = function clearFrozenEditingMetaData() {
if (props.editMode && ObjectUtils.isNotEmpty(frozenEditingMetaState)) {
setFrozenEditingMetaState({});
}
};
var onColumnResizeStart = function onColumnResizeStart(e) {
createBeforeResizeStyleElement();
var event = e.originalEvent,
column = e.column;
var containerLeft = DomHandler.getOffset(elementRef.current).left;
resizeColumn.current = column;
resizeColumnElement.current = event.currentTarget.parentElement;
columnResizing.current = true;
lastResizeHelperX.current = (event.type === 'touchstart' ? event.changedTouches[0].clientX : event.pageX) - containerLeft + elementRef.current.scrollLeft;
bindColumnResizeEvents();
};
var onColumnResize = function onColumnResize(event) {
var containerLeft = DomHandler.getOffset(elementRef.current).left;
elementRef.current.setAttribute('data-p-unselectable-text', true);
resizeHelperRef.current.style.height = elementRef.current.offsetHeight + 'px';
resizeHelperRef.current.style.top = 0 + 'px';
resizeHelperRef.current.style.left = (event.type === 'touchmove' ? event.changedTouches[0].clientX : event.pageX) - containerLeft + elementRef.current.scrollLeft + 'px';
resizeHelperRef.current.style.display = 'block';
};
var onColumnResizeEnd = function onColumnResizeEnd() {
var delta = resizeHelperRef.current.offsetLeft - lastResizeHelperX.current;
var columnWidth = resizeColumnElement.current.offsetWidth;
var newColumnWidth = columnWidth + delta;
var minWidth = resizeColumnElement.current.style.minWidth || 15;
if (columnWidth + delta > parseInt(minWidth, 10)) {
if (props.columnResizeMode === 'fit') {
var nextColumn = resizeColumnElement.current.nextElementSibling;
var nextColumnWidth = nextColumn.offsetWidth - delta;
if (newColumnWidth > 15 && nextColumnWidth > 15) {
resizeTableCells(newColumnWidth, nextColumnWidth);
}
} else if (props.columnResizeMode === 'expand') {
var tableWidth = tableRef.current.offsetWidth + delta + 'px';
var updateTableWidth = function updateTableWidth(el) {
!!el && (el.style.width = el.style.minWidth = tableWidth);
};
// https://github.com/primefaces/primereact/issues/3970 Reasoning: resize table cells before updating the table width so that it can use existing computed cell widths and adjust only the one column.
resizeTableCells(newColumnWidth);
updateTableWidth(tableRef.current);
if (!isVirtualScrollerDisabled()) {
updateTableWidth(bodyRef.current);
updateTableWidth(frozenBodyRef.current);
if (wrapperRef.current) {
updateTableWidth(DomHandler.findSingle(wrapperRef.current, '[data-pc-name="virtualscroller"] > table > tbody'));
}
}
}
if (props.onColumnResizeEnd) {
props.onColumnResizeEnd({
element: resizeColumnElement.current,
column: resizeColumn.current,
delta: delta
});
}
if (isStateful()) {
saveState();
}
}
resizeHelperRef.current.style.display = 'none';
resizeColumn.current = null;
resizeColumnElement.current = null;
elementRef.current.setAttribute('data-p-unselectable-text', 'true');
destroyBeforeResizeStyleElement();
unbindColumnResizeEvents();
};
var resizeTableCells = function resizeTableCells(newColumnWidth, nextColumnWidth) {
var widths = [];
var colIndex = DomHandler.index(resizeColumnElement.current);
var headers = DomHandler.find(tableRef.current, '[data-pc-section="thead"] > tr > th');
headers.forEach(function (header) {
return widths.push(DomHandler.getOuterWidth(header));
});
destroyStyleElement();
createStyleElement();
var innerHTML = '';
var selector = "[data-pc-name=\"datatable\"][".concat(attributeSelector.current, "] > [data-pc-section=\"wrapper\"] ").concat(isVirtualScrollerDisabled() ? '' : '> [data-pc-name="virtualscroller"]', " > [data-pc-section=\"table\"]");
widths.forEach(function (width, index) {
var colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
var style = "width: ".concat(colWidth, "px !important; max-width: ").concat(colWidth, "px !important");
innerHTML = innerHTML + "\n ".concat(selector, " > [data-pc-section=\"thead\"] > tr > th:nth-child(").concat(index + 1, "),\n ").concat(selector, " > [data-pc-section=\"tbody\"] > tr > td:nth-child(").concat(index + 1, "),\n ").concat(selector, " > [data-pc-section=\"tfoot\"] > tr > td:nth-child(").concat(index + 1, ") {\n ").concat(style, "\n }\n ");
});
styleElement.current.innerHTML = innerHTML;
};
var bindColumnResizeEvents = function bindColumnResizeEvents() {
bindDocumentMouseMoveListener();
bindDocumentMouseUpListener();
bindDocumentTouchMoveListener();
bindDocumentTouchEndListener();
};
var unbindColumnResizeEvents = function unbindColumnResizeEvents() {
unbindDocumentMouseMoveListener();
unbindDocumentMouseUpListener();
unbindDocumentTouchMoveListener();
unbindDocumentTouchEndListener();
};
var onColumnHeaderMouseDown = function onColumnHeaderMouseDown(e) {
DomHandler.clearSelection();
var event = e.originalEvent,
column = e.column;
if (props.reorderableColumns && getColumnProp(column, 'reorderable') !== false && !getColumnProp(column, 'frozen')) {
if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || DomHandler.getAttribute(event.target, '[data-pc-section="columnresizer"]')) {
event.currentTarget.draggable = false;
} else {
event.currentTarget.draggable = true;
}
}
};
var onColumnHeaderCheckboxChange = function onColumnHeaderCheckboxChange(e, processedData) {
if (props.onSelectAllChange) {
props.onSelectAllChange(e);
} else {
var originalEvent = e.originalEvent,
checked = e.checked;
var _data = props.selectionPageOnly ? dataToRender(processedData) : processedData;
var selection = props.selectionPageOnly && props.selection ? props.selection.filter(function (s) {
return !_data.some(function (d) {
return isEquals(s, d);
});
}) : [];
if (checked) {
selection = ObjectUtils.isNotEmpty(props.frozenValue) ? [].concat(_toConsumableArray(selection), _toConsumableArray(props.frozenValue), _toConsumableArray(_data)) : [].concat(_toConsumableArray(selection), _toConsumableArray(_data));
selection = getSelectableData(selection);
props.onAllRowsSelect && props.onAllRowsSelect({
originalEvent: originalEvent,
data: selection,
type: 'all'
});
} else {
props.onAllRowsUnselect && props.onAllRowsUnselect({
originalEvent: originalEvent,
data: selection,
type: 'all'
});
}
if (props.onSelectionChange) {
props.onSelectionChange({
originalEvent: originalEvent,
value: selection,
type: 'all'
});
}
}
};
var onColumnHeaderDragStart = function onColumnHeaderDragStart(e) {
var event = e.originalEvent,
column = e.column;
if (columnResizing.current) {
event.preventDefault();
return;
}
if (!props.reorderableColumns) {
return;
}
colReorderIconWidth.current = DomHandler.getHiddenElementOuterWidth(reorderIndicatorUpRef.current);
colReorderIconHeight.current = DomHandler.getHiddenElementOuterHeight(reorderIndicatorUpRef.current);
draggedColumn.current = column;
draggedColumnElement.current = findParentHeader(event.currentTarget);
event.dataTransfer.setData('text', 'b'); // Firefox requires this to make dragging possible
};
var onColumnHeaderDragOver = function onColumnHeaderDragOver(e) {
var event = e.originalEvent,
column = e.column;
var dropHeader = findParentHeader(event.currentTarget);
if (props.reorderableColumns && draggedColumnElement.current && dropHeader && !getColumnProp(column, 'frozen')) {
event.preventDefault();
if (draggedColumnElement.current !== dropHeader) {
var containerOffset = DomHandler.getOffset(elementRef.current);
var dropHeaderOffset = DomHandler.getOffset(dropHeader);
var targetLeft = dropHeaderOffset.left - containerOffset.left;
var columnCenter = dropHeaderOffset.left + dropHeader.offsetWidth / 2;
var dragIndex = DomHandler.index(draggedColumnElement.current);
var dropIndex = DomHandler.index(findParentHeader(event.currentTarget));
reorderIndicatorUpRef.current.style.top = dropHeaderOffset.top - containerOffset.top - (colReorderIconHeight.current - 1) + 'px';
reorderIndicatorDownRef.current.style.top = dropHeaderOffset.top - containerOffset.top + dropHeader.offsetHeight + 'px';
if (event.pageX > columnCenter && dragIndex < dropIndex) {
reorderIndicatorUpRef.current.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(colReorderIconWidth.current / 2) + 'px';
reorderIndicatorDownRef.current.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(colReorderIconWidth.current / 2) + 'px';
dropPosition.current = 1;
} else if (dragIndex > dropIndex) {
reorderIndicatorUpRef.current.style.left = targetLeft - Math.ceil(colReorderIconWidth.current / 2) + 'px';
reorderIndicatorDownRef.current.style.left = targetLeft - Math.ceil(colReorderIconWidth.current / 2) + 'px';
dropPosition.current = -1;
}
reorderIndicatorUpRef.current.style.display = 'block';
reorderIndicatorDownRef.current.style.display = 'block';
}
}
};
var onColumnHeaderDragLeave = function onColumnHeaderDragLeave(e) {
var event = e.originalEvent;
if (props.reorderableColumns && draggedColumnElement.current) {
event.preventDefault();
reorderIndicatorUpRef.current.style.display = 'none';
reorderIndicatorDownRef.current.style.display = 'none';
}
};
var onColumnHeaderDrop = function onColumnHeaderDrop(e) {
var event = e.originalEvent,
column = e.column;
event.preventDefault();
if (draggedColumnElement.current) {
var dragIndex = DomHandler.index(draggedColumnElement.current);
var dropIndex = DomHandler.index(findParentHeader(event.currentTarget));
var allowDrop = dragIndex !== dropIndex;
if (allowDrop && (dropIndex - dragIndex === 1 && dropPosition.current === -1 || dragIndex - dropIndex === 1 && dropPosition.current === 1)) {
allowDrop = false;
}
if (allowDrop) {
var _columns = getColumns();
var isSameColumn = function isSameColumn(col1, col2) {
return getColumnProp(col1, 'columnKey') || getColumnProp(col2, 'columnKey') ? ObjectUtils.equals(col1.props, col2.props, 'columnKey') : ObjectUtils.equals(col1.props, col2.props, 'field');
};
var dragColIndex = _columns.findIndex(function (child) {
return isSameColumn(child, draggedColumn.current);
});
var dropColIndex = _columns.findIndex(function (child) {
return isSameColumn(child, column);
});
var widths = [];
var headers = DomHandler.find(tableRef.current, '[data-pc-section="thead"] > tr > th');
headers.forEach(function (header) {
return widths.push(DomHandler.getOuterWidth(header));
});
var movedItem = widths.find(function (items, index) {
return index === dragColIndex;
});
var remainingItems = widths.filter(function (items, index) {
return index !== dragColIndex;
});
var reorderedWidths = [].concat(_toConsumableArray(remainingItems.slice(0, dropColIndex)), [movedItem], _toConsumableArray(remainingItems.slice(dropColIndex)));
addColumnWidthStyles(reorderedWidths);
if (dropColIndex < dragColIndex && dropPosition.current === 1) {
dropColIndex++;
}
if (dropColIndex > dragColIndex && dropPosition.current === -1) {
dropColIndex--;
}
ObjectUtils.reorderArray(_columns, dragColIndex, dropColIndex);
var columnOrder = _columns.reduce(function (orders, col) {
orders.push(getColumnProp(col, 'columnKey') || getColumnProp(col, 'field'));
return orders;
}, []);
setColumnOrderState(columnOrder);
if (props.onColReorder) {
props.onColReorder({
originalEvent: event,
dragIndex: dragColIndex,
dropIndex: dropColIndex,
columns: _columns
});
}
}
reorderIndicatorUpRef.current.style.display = 'none';
reorderIndicatorDownRef.current.style.display = 'none';
draggedColumnElement.current.draggable = false;
draggedColumnElement.current = null;
draggedColumn.current = null;
dropPosition.current = null;
}
};
var createBeforeResizeStyleElement = function createBeforeResizeStyleElement() {
beforeResizeStyleElement.current = DomHandler.createInlineStyle(context && context.nonce || PrimeReact.nonce, context && context.styleContainer);
var innerHTML = "\n[data-pc-name=\"datatable\"][".concat(attributeSelector.current, "] {\n user-select:none;\n}\n ");
beforeResizeStyleElement.current.innerHTML = innerHTML;
};
var createStyleElement = function createStyleElement() {
styleElement.current = DomHandler.createInlineStyle(context && context.nonce || PrimeReact.nonce, context && context.styleContainer);
};
var createResponsiveStyle = function createResponsiveStyle() {
if (!responsiveStyleElement.current) {
responsiveStyleElement.current = DomHandler.createInlineStyle(context && context.nonce || PrimeReact.nonce, context && context.styleContainer);
var tableSelector = ".p-datatable-wrapper ".concat(isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller', " > .p-datatable-table");
var selector = ".p-datatable[".concat(attributeSelector.current, "] > ").concat(tableSelector);
var gridLinesSelector = ".p-datatable[".concat(attributeSelector.current, "].p-datatable-gridlines > ").concat(tableSelector);
var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n ").concat(selector, " > .p-datatable-thead > tr > th,\n ").concat(selector, " > .p-datatable-tfoot > tr > td {\n display: none;\n }\n\n ").concat(selector, " > .p-datatable-tbody > tr > td {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: space-between;\n }\n\n ").concat(selector, " > .p-datatable-tbody > tr > td:not(:last-child) {\n border: 0 none;\n }\n\n ").concat(gridLinesSelector, " > .p-datatable-tbody > tr > td:last-child {\n border-top: 0;\n border-right: 0;\n border-left: 0;\n }\n\n ").concat(selector, " > .p-datatable-tbody > tr > td > .p-column-title {\n display: block;\n }\n}\n");
responsiveStyleElement.current.innerHTML = innerHTML;
}
};
var destroyResponsiveStyle = function destroyResponsiveStyle() {
responsiveStyleElement.current = DomHandler.removeInlineStyle(responsiveStyleElement.current);
};
var destroyStyleElement = function destroyStyleElement() {
styleElement.current = DomHandler.removeInlineStyle(styleElement.current);
};
var destroyBeforeResizeStyleElement = function destroyBeforeResizeStyleElement() {
beforeResizeStyleElement.current = DomHandler.removeInlineStyle(beforeResizeStyleElement.current);
};
var onPageChange = function onPageChange(e) {
clearEditingMetaData();
clearFrozenEditingMetaData();
if (props.onPage) {
props.onPage(createEvent(e));
} else {
setFirstState(e.first);
setRowsState(e.rows);
}
if (props.onValueChange) {
props.onValueChange(processedData());
}
};
var onSortChange = function onSortChange(e) {
clearEditingMetaData();
clearFrozenEditingMetaData();
var event = e.originalEvent,
column = e.column,
sortableDisabledFields = e.sortableDisabledFields;
var sortField = getColumnProp(column, 'sortField') || getColumnProp(column, 'field');
var sortOrder = props.defaultSortOrder;
var multiSortMeta;
var eventMeta;
columnSortable.current = getColumnProp(column, 'sortable');
columnSortFunction.current = getColumnProp(column, 'sortFunction');
columnField.current = sortField;
if (props.sortMode === 'multiple') {
var metaKey = event.metaKey || event.ctrlKey;
multiSortMeta = _toConsumableArray(getMultiSortMeta());
var sortMeta = multiSortMeta.find(function (sortMeta) {
return sortMeta.field === sortField;
});
sortOrder = sortMeta ? getCalculatedSortOrder(sortMeta.order) : sortOrder;
var newMetaData = {
field: sortField,
order: sortOrder
};
if (sortOrder) {
multiSortMeta = metaKey ? multiSortMeta : multiSortMeta.filter(function (meta) {
return sortableDisabledFields.some(function (field) {
return field === meta.field;
});
});
addSortMeta(newMetaData, multiSortMeta);
} else if (props.removableSort) {
removeSortMeta(newMetaData, multiSortMeta);
}
eventMeta = {
multiSortMeta: multiSortMeta
};
} else {
sortOrder = getSortField() === sortField ? getCalculatedSortOrder(getSortOrder()) : sortOrder;
if (props.removableSort) {
sortField = sortOrder ? sortField : null;
}
eventMeta = {
sortField: sortField,
sortOrder: sortOrder
};
}
if (props.onSort) {
props.onSort(createEvent(eventMeta));
} else {
setFirstState(0);
setSortFieldState(eventMeta.sortField);
setSortOrderState(eventMeta.sortOrder);
setMultiSortMetaState(eventMeta.multiSortMeta);
}
if (props.onValueChange) {
props.onValueChange(processedData({
sortField: sortField,
sortOrder: sortOrder,
multiSortMeta: multiSortMeta
}));
}
};
var getCalculatedSortOrder = function getCalculatedSortOrder(currentOrder) {
return props.removableSort ? props.defaultSortOrder === currentOrder ? currentOrder * -1 : 0 : currentOrder * -1;
};
var compareValuesOnSort = function compareValuesOnSort(value1, value2, comparator, order) {
return ObjectUtils.sort(value1, value2, order, comparator, context && context.nullSortOrder || PrimeReact.nullSortOrder);
};
var addSortMeta = function addSortMeta(meta, multiSortMeta) {
var index = multiSortMeta.findIndex(function (sortMeta) {
return sortMeta.field === meta.field;
});
if (index >= 0) {
multiSortMeta[index] = meta;
} else {
multiSortMeta.push(meta);
}
};
var removeSortMeta = function removeSortMeta(meta, multiSortMeta) {
var index = multiSortMeta.findIndex(function (sortMeta) {
return sortMeta.field === meta.field;
});
if (index >= 0) {
multiSortMeta.splice(index, 1);
}
multiSortMeta = multiSortMeta.length > 0 ? multiSortMeta : null;
};
var sortSingle = function sortSingle(data, field, order) {
if (props.groupRowsBy && props.groupRowsBy === props.sortField) {
var multiSortMeta = [{
field: props.sortField,
order: props.sortOrder || props.defaultSortOrder
}];
props.sortField !== field && multiSortMeta.push({
field: field,
order: order
});
return sortMultiple(data, multiSortMeta);
}
var value = _toConsumableArray(data);
if (columnSortable.current && columnSortFunction.current) {
value = columnSortFunction.current({
data: data,
field: field,
order: order
});
} else {
// performance optimization to prevent resolving field data in each loop
var lookupMap = new Map();
var comparator = ObjectUtils.localeComparator(context && context.locale || PrimeReact.locale);
var _iterator = _createForOfIteratorHelper$b(data),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var item = _step.value;
lookupMap.set(item, ObjectUtils.resolveFieldData(item, field));
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
value.sort(function (data1, data2) {
var value1 = lookupMap.get(data1);
var value2 = lookupMap.get(data2);
return compareValuesOnSort(value1, value2, comparator, order);
});
}
return value;
};
var sortMultiple = function sortMultiple(data) {
var multiSortMeta = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
if (props.groupRowsBy && (groupRowsSortMetaState || multiSortMeta.length && props.groupRowsBy === multiSortMeta[0].field)) {
var groupRowsSortMeta = groupRowsSortMetaState;
var firstSortMeta = multiSortMeta[0];
if (!groupRowsSortMeta) {
groupRowsSortMeta = firstSortMeta;
setGroupRowsSortMetaState(groupRowsSortMeta);
}
if (firstSortMeta.field !== groupRowsSortMeta.field) {
multiSortMeta = [groupRowsSortMeta].concat(_toConsumableArray(multiSortMeta));
}
}
var value = _toConsumableArray(data);
if (columnSortable.current && columnSortFunction.current) {
var meta = multiSortMeta.find(function (meta) {
return meta.field === columnField.current;
});
var field = columnField.current;
var order = meta ? meta.order : props.defaultSortOrder;
value = columnSortFunction.current({
data: data,
field: field,
order: order,
multiSortMeta: multiSortMeta
});
} else {
var comparator = ObjectUtils.localeComparator(context && context.locale || PrimeReact.locale);
value.sort(function (data1, data2) {
return _multisortField(data1, data2, multiSortMeta, 0, comparator);
});
}
return value;
};
var _multisortField = function multisortField(data1, data2, multiSortMeta, index, comparator) {
if (!multiSortMeta || !multiSortMeta[index]) {
return;
}
var value1 = ObjectUtils.resolveFieldData(data1, multiSortMeta[index].field);
var value2 = ObjectUtils.resolveFieldData(data2, multiSortMeta[index].field);
// check if they are equal handling dates and locales
if (ObjectUtils.compare(value1, value2, comparator) === 0) {
return multiSortMeta.length - 1 > index ? _multisortField(data1, data2, multiSortMeta, index + 1, comparator) : 0;
}
return compareValuesOnSort(value1, value2, comparator, multiSortMeta[index].order);
};
var onFilterChange = function onFilterChange(filters) {
clearEditingMetaData();
clearFrozenEditingMetaData();
setD_filtersState(filters);
};
var onFilterApply = function onFilterApply(filtersToApply) {
clearTimeout(filterTimeout.current);
filterTimeout.current = setTimeout(function () {
var filters = cloneFilters(filtersToApply || d_filtersState);
if (props.onFilter) {
props.onFilter(createEvent({
filters: filters
}));
} else {
setFirstState(0);
setFiltersState(filters);
}
if (props.onValueChange) {
props.onValueChange(processedData({
filters: filters
}));
}
}, props.filterDelay);
};
var getActiveFilters = function getActiveFilters(filters) {
var removeEmptyFilters = function removeEmptyFilters(_ref) {
var _ref2 = _slicedToArray(_ref, 2),
key = _ref2[0],
value = _ref2[1];
if (value.constraints) {
var filteredConstraints = value.constraints.filter(function (constraint) {
return constraint.value !== null;
});
if (filteredConstraints.length > 0) {
return [key, _objectSpread$18(_objectSpread$18({}, value), {}, {
constraints: filteredConstraints
})];
}
} else if (value.value !== null) {
return [key, value];
}
return undefined;
};
var filterValidEntries = function filterValidEntries(entry) {
return entry !== undefined;
};
var entries = Object.entries(filters).map(removeEmptyFilters).filter(filterValidEntries);
return Object.fromEntries(entries);
};
var filterLocal = function filterLocal(data, filters) {
if (!data) {
return;
}
var activeFilters = filters ? getActiveFilters(filters) : {};
var columns = getColumns();
var filteredValue = [];
var isGlobalFilter = activeFilters.global || props.globalFilter;
var globalFilterFieldsArray;
if (isGlobalFilter) {
globalFilterFieldsArray = props.globalFilterFields || columns.filter(function (col) {
return !getColumnProp(col, 'excludeGlobalFilter');
}).map(function (col) {
return getColumnProp(col, 'filterField') || getColumnProp(col, 'field');
});
}
for (var i = 0; i < data.length; i++) {
var localMatch = true;
var globalMatch = false;
var localFiltered = false;
for (var prop in activeFilters) {
if (prop === 'null') {
continue;
}
if (Object.prototype.hasOwnProperty.call(activeFilters, prop) && prop !== 'global') {
localFiltered = true;
var filterField = prop;
var filterMeta = activeFilters[filterField];
if (filterMeta.operator) {
for (var j = 0; j < filterMeta.constraints.length; j++) {
var filterConstraint = filterMeta.constraints[j];
localMatch = executeLocalFilter(filterField, data[i], filterConstraint, j);
if (filterMeta.operator === FilterOperator.OR && localMatch || filterMeta.operator === FilterOperator.AND && !localMatch) {
break;
}
}
} else {
localMatch = executeLocalFilter(filterField, data[i], filterMeta, 0);
}
if (!localMatch) {
break;
}
}
}
if (localMatch && isGlobalFilter && !globalMatch && globalFilterFieldsArray) {
for (var _j = 0; _j < globalFilterFieldsArray.length; _j++) {
var globalFilterField = globalFilterFieldsArray[_j];
var matchMode = activeFilters.global ? activeFilters.global.matchMode : props.globalFilterMatchMode;
var value = activeFilters.global ? activeFilters.global.value : props.globalFilter;
globalMatch = FilterService.filters[matchMode](ObjectUtils.resolveFieldData(data[i], globalFilterField), value, props.filterLocale);
if (globalMatch) {
break;
}
}
}
var matches = void 0;
if (isGlobalFilter) {
matches = localFiltered ? localFiltered && localMatch && globalMatch : globalMatch;
} else {
matches = localFiltered && localMatch;
}
if (matches) {
filteredValue.push(data[i]);
}
}
if (filteredValue.length === props.value.length || Object.keys(activeFilters).length === 0) {
filteredValue = data;
}
return filteredValue;
};
var executeLocalFilter = function executeLocalFilter(field, rowData, filterMeta, index) {
var filterValue = filterMeta.value;
var filterMatchMode = filterMeta.matchMode === 'custom' ? "custom_".concat(field) : filterMeta.matchMode || FilterMatchMode.STARTS_WITH;
var dataFieldValue = ObjectUtils.resolveFieldData(rowData, field);
var filterConstraint = FilterService.filters[filterMatchMode];
return ObjectUtils.isFunction(filterConstraint) && filterConstraint(dataFieldValue, filterValue, props.filterLocale, index);
};
var cloneFilters = function cloneFilters(filters) {
filters = filters || props.filters;
var cloned = {};
if (filters) {
Object.entries(filters).forEach(function (_ref3) {
var _ref4 = _slicedToArray(_ref3, 2),
prop = _ref4[0],
value = _ref4[1];
cloned[prop] = value.operator ? {
operator: value.operator,
constraints: value.constraints.map(function (constraint) {
return _objectSpread$18({}, constraint);
})
} : _objectSpread$18({}, value);
});
} else {
var _columns2 = getColumns();
cloned = _columns2.reduce(function (filters, col) {
var field = getColumnProp(col, 'filterField') || getColumnProp(col, 'field');
var filterFunction = getColumnProp(col, 'filterFunction');
var dataType = getColumnProp(col, 'dataType');
var matchMode = getColumnProp(col, 'filterMatchMode') || (context && context.filterMatchModeOptions[dataType] || PrimeReact.filterMatchModeOptions[dataType] ? context && context.filterMatchModeOptions[dataType][0] || PrimeReact.filterMatchModeOptions[dataType][0] : FilterMatchMode.STARTS_WITH);
var constraint = {
value: null,
matchMode: matchMode
};
if (filterFunction) {
FilterService.register("custom_".concat(field), function () {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return filterFunction.apply(void 0, args.concat([{
column: col
}]));
});
}
filters[field] = props.filterDisplay === 'menu' ? {
operator: FilterOperator.AND,
constraints: [constraint]
} : constraint;
return filters;
}, {});
}
return cloned;
};
var filter = function filter(value, field, matchMode) {
var index = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
var filters = _objectSpread$18({}, d_filtersState);
var meta = filters[field];
var constraint = meta && meta.operator ? meta.constraints[index] : meta;
constraint = meta ? {
value: value,
matchMode: matchMode || constraint.matchMode
} : {
value: value,
matchMode: matchMode
};
props.filterDisplay === 'menu' && meta && meta.operator ? filters[field].constraints[index] = constraint : filters[field] = constraint;
setD_filtersState(filters);
onFilterApply(filters);
};
var reset = function reset() {
setD_rowsState(props.rows);
setD_filtersState(cloneFilters(props.filters));
setGroupRowsSortMetaState(null);
setEditingMetaState({});
setFrozenEditingMetaState({});
if (!props.onPage) {
setFirstState(props.first);
setRowsState(props.rows);
}
if (!props.onSort) {
setSortFieldState(props.sortField);
setSortOrderState(props.sortOrder);
setMultiSortMetaState(props.multiSortMeta);
}
if (!props.onFilter) {
setFiltersState(props.filters);
}
resetColumnOrder();
};
var resetScroll = function resetScroll() {
if (wrapperRef.current) {
var scrollableContainer = !isVirtualScrollerDisabled() ? DomHandler.findSingle(wrapperRef.current, '[data-pc-name="virtualscroller"]') : wrapperRef.current;
scrollableContainer.scrollTo(0, 0);
}
};
var resetResizeColumnsWidth = function resetResizeColumnsWidth() {
destroyStyleElement();
};
var resetColumnOrder = function resetColumnOrder() {
var columns = getColumns(true);
var columnOrder = [];
if (columns) {
columnOrder = columns.reduce(function (orders, col) {
orders.push(getColumnProp(col, 'columnKey') || getColumnProp(col, 'field'));
return orders;
}, []);
}
setColumnOrderState(columnOrder);
};
var exportCSV = function exportCSV(options) {
var data;
var csv = "\uFEFF";
if (options && options.selectionOnly) {
data = props.selection || [];
} else {
data = [].concat(_toConsumableArray(props.frozenValue || []), _toConsumableArray(processedData() || []));
}
// First build collection of exportable columns
var exportableColumns = getColumns().filter(function (column) {
var exportable = getColumnProp(column, 'exportable');
var field = getColumnProp(column, 'field');
// Column must be exportable (or undefined/not set) and have a field defined
return exportable !== false && field;
});
// headers
exportableColumns.forEach(function (column, i) {
var _ref5 = [getColumnProp(column, 'field'), getColumnProp(column, 'header'), getColumnProp(column, 'exportHeader')],
field = _ref5[0],
header = _ref5[1],
exportHeader = _ref5[2];
var columnHeader = String(exportHeader || header || field).replace(/"/g, '""').replace(/\n/g, "\u2028");
csv = csv + ('"' + columnHeader + '"');
if (i < exportableColumns.length - 1) {
csv = csv + props.csvSeparator;
}
});
// body
data.forEach(function (record) {
csv = csv + '\n';
exportableColumns.forEach(function (column, i) {
var _ref6 = [getColumnProp(column, 'field'), getColumnProp(column, 'exportField')],
colField = _ref6[0],
exportField = _ref6[1];
var field = exportField || colField;
var cellData = ObjectUtils.resolveFieldData(record, field);
if (cellData != null) {
if (props.exportFunction) {
cellData = props.exportFunction({
data: cellData,
field: field,
rowData: record,
column: column
});
} else {
cellData = String(cellData).replace(/"/g, '""').replace(/\n/g, "\u2028");
}
} else {
cellData = '';
}
csv = csv + ('"' + cellData + '"');
if (i < exportableColumns.length - 1) {
csv = csv + props.csvSeparator;
}
});
});
DomHandler.exportCSV(csv, props.exportFilename);
};
var closeEditingCell = function closeEditingCell() {
if (props.editMode !== 'row') {
document.body.click();
}
};
var closeEditingRows = function closeEditingRows() {
DomHandler.find(document.body, '[data-pc-section="roweditorcancelbuttonprops"]').forEach(function (button, index) {
setTimeout(function () {
button.click();
}, index * 5);
});
};
var createEvent = function createEvent(event) {
return _objectSpread$18({
first: getFirst(),
rows: getRows(),
sortField: getSortField(),
sortOrder: getSortOrder(),
multiSortMeta: getMultiSortMeta(),
filters: getFilters()
}, event);
};
var processedData = function processedData(localState) {
var data = props.value || [];
if (!props.lazy) {
if (data && data.length) {
var filters = localState && localState.filters || getFilters();
var sortField = localState && localState.sortField || getSortField();
var sortOrder = localState && localState.sortOrder || getSortOrder();
var multiSortMeta = localState && localState.multiSortMeta || getMultiSortMeta();
var _columns3 = getColumns();
var sortColumn = _columns3.find(function (col) {
return getColumnProp(col, 'field') === sortField;
});
if (sortColumn) {
columnSortable.current = getColumnProp(sortColumn, 'sortable');
columnSortFunction.current = getColumnProp(sortColumn, 'sortFunction');
}
if (ObjectUtils.isNotEmpty(filters) || props.globalFilter) {
data = filterLocal(data, filters);
}
if (sortField || ObjectUtils.isNotEmpty(multiSortMeta)) {
if (props.sortMode === 'single') {
data = sortSingle(data, sortField, sortOrder);
} else if (props.sortMode === 'multiple') {
data = sortMultiple(data, multiSortMeta);
}
}
}
}
return data;
};
var dataToRender = function dataToRender(data) {
if (data && props.paginator) {
var first = props.lazy ? 0 : getFirst();
return data.slice(first, first + getRows());
}
return data;
};
useMountEffect(function () {
if (elementRef.current) {
attributeSelector.current = UniqueComponentId();
elementRef.current.setAttribute(attributeSelector.current, '');
}
//setFiltersState(cloneFilters(props.filters)); // Github #4248
setD_filtersState(cloneFilters(props.filters));
if (isStateful()) {
restoreState();
if (props.resizableColumns) {
restoreColumnWidths();
}
}
});
useUpdateEffect(function () {
if (props.responsiveLayout === 'stack' && !props.scrollable) {
createResponsiveStyle();
}
return function () {
destroyResponsiveStyle();
};
}, [props.breakpoint]);
useUpdateEffect(function () {
var filters = cloneFilters(props.filters);
setFiltersState(filters);
setD_filtersState(cloneFilters(props.filters));
if (props.onValueChange) {
props.onValueChange(processedData({
filters: filters
}));
}
}, [props.filters]);
useUpdateEffect(function () {
if (isStateful()) {
saveState();
}
});
useUpdateEffect(function () {
destroyResponsiveStyle();
if (props.responsiveLayout === 'stack' && !props.scrollable) {
createResponsiveStyle();
}
}, [props.responsiveLayout, props.scrollable]);
useUpdateEffect(function () {
if (props.globalFilter) {
filter(props.globalFilter, 'global', props.globalFilterMatchMode);
} else {
// #3819 was filtering but now reset filter state
if (d_filtersState['global']) {
var filters = _objectSpread$18({}, d_filtersState);
delete filters['global'];
setD_filtersState(filters);
onFilterApply(filters);
}
}
}, [props.globalFilter, props.globalFilterMatchMode]);
useUnmountEffect(function () {
unbindColumnResizeEvents();
destroyStyleElement();
destroyResponsiveStyle();
destroyBeforeResizeStyleElement();
});
React.useImperativeHandle(ref, function () {
return {
props: props,
clearState: clearState,
closeEditingCell: closeEditingCell,
closeEditingRows: closeEditingRows,
exportCSV: exportCSV,
filter: filter,
reset: reset,
resetColumnOrder: resetColumnOrder,
resetScroll: resetScroll,
resetResizeColumnsWidth: resetResizeColumnsWidth,
restoreColumnWidths: restoreColumnWidths,
restoreState: restoreState,
restoreTableState: restoreTableState,
saveState: saveState,
getFilterMeta: function getFilterMeta() {
return filtersState;
},
setFilterMeta: function setFilterMeta(filters) {
return setFiltersState(filters);
},
getSortMeta: function getSortMeta() {
return multiSortMetaState;
},
setSortMeta: function setSortMeta(sorts) {
return setMultiSortMetaState(sorts);
},
getElement: function getElement() {
return elementRef.current;
},
getTable: function getTable() {
return tableRef.current;
},
getVirtualScroller: function getVirtualScroller() {
return virtualScrollerRef.current;
},
getProcessedData: function getProcessedData() {
return processedData();
}
};
});
var createLoader = function createLoader() {
if (props.loading) {
var loadingIconProps = mergeProps({
className: ptCallbacks.cx('loadingIcon')
}, ptCallbacks.ptm('loadingIcon'));
var icon = props.loadingIcon || /*#__PURE__*/React.createElement(SpinnerIcon, _extends({}, loadingIconProps, {
spin: true
}));
var loadingIcon = IconUtils.getJSXIcon(icon, _objectSpread$18({}, loadingIconProps), {
props: props
});
var loadingOverlayProps = mergeProps({
className: ptCallbacks.cx('loadingOverlay')
}, ptCallbacks.ptm('loadingOverlay'));
return /*#__PURE__*/React.createElement("div", loadingOverlayProps, loadingIcon);
}
return null;
};
var createHeader = function createHeader() {
if (props.header) {
var _content = ObjectUtils.getJSXElement(props.header, {
props: props
});
var headerProps = mergeProps({
className: ptCallbacks.cx('header')
}, ptCallbacks.ptm('header'));
return /*#__PURE__*/React.createElement("div", headerProps, _content);
}
return null;
};
var createTableHeader = function createTableHeader(options, empty, _isVirtualScrollerDisabled) {
if (props.showHeaders === false) {
return null;
}
var sortField = getSortField();
var sortOrder = getSortOrder();
var multiSortMeta = _toConsumableArray(getMultiSortMeta());
var groupRowSortField = getGroupRowSortField();
var filters = d_filtersState;
var filtersStore = !props.onFilter && props.filters || getFilters();
var processedData = options.items,
virtualScrollerProps = options.props,
columns = options.columns;
var data = _isVirtualScrollerDisabled || virtualScrollerProps.lazy ? processedData : virtualScrollerProps.items;
return /*#__PURE__*/React.createElement(TableHeader, {
hostName: "DataTable",
value: data,
tableProps: props,
columns: columns,
tabIndex: props.tabIndex,
empty: empty,
headerColumnGroup: props.headerColumnGroup,
resizableColumns: props.resizableColumns,
onColumnResizeStart: onColumnResizeStart,
onColumnResizerClick: props.onColumnResizerClick,
onColumnResizerDoubleClick: props.onColumnResizerDoubleClick,
sortMode: props.sortMode,
sortField: sortField,
sortIcon: props.sortIcon,
sortOrder: sortOrder,
multiSortMeta: multiSortMeta,
groupRowsBy: props.groupRowsBy,
groupRowSortField: groupRowSortField,
onSortChange: onSortChange,
filterDisplay: props.filterDisplay,
filters: filters,
filtersStore: filtersStore,
filterIcon: props.filterIcon,
filterClearIcon: props.filterClearIcon,
onFilterChange: onFilterChange,
onFilterApply: onFilterApply,
showSelectAll: props.showSelectAll,
allRowsSelected: allRowsSelected,
onColumnCheckboxChange: onColumnHeaderCheckboxChange,
onColumnMouseDown: onColumnHeaderMouseDown,
onColumnDragStart: onColumnHeaderDragStart,
onColumnDragOver: onColumnHeaderDragOver,
onColumnDragLeave: onColumnHeaderDragLeave,
onColumnDrop: onColumnHeaderDrop,
rowGroupMode: props.rowGroupMode,
reorderableColumns: props.reorderableColumns,
ptCallbacks: ptCallbacks,
metaData: metaData,
unstyled: props.unstyled
});
};
var createTableBody = function createTableBody(options, selectionModeInColumn, empty, isVirtualScrollerDisabled, processedData) {
var first = getFirst();
var rows = options.rows,
columns = options.columns,
contentRef = options.contentRef,
style = options.style,
className = options.className,
spacerStyle = options.spacerStyle,
itemSize = options.itemSize;
var frozenBody = ObjectUtils.isNotEmpty(props.frozenValue) && /*#__PURE__*/React.createElement(TableBody, {
hostName: "DataTable",
ref: frozenBodyRef,
cellMemo: props.cellMemo,
cellMemoProps: props.cellMemoProps,
cellMemoPropsDepth: props.cellMemoPropsDepth,
cellClassName: props.cellClassName,
cellSelection: props.cellSelection,
checkIcon: props.checkIcon,
className: "p-datatable-tbody p-datatable-frozen-tbody",
collapsedRowIcon: props.collapsedRowIcon,
columns: columns,
compareSelectionBy: props.compareSelectionBy,
contextMenuSelection: props.contextMenuSelection,
dataKey: props.dataKey,
dragSelection: props.dragSelection,
editMode: props.editMode,
editingMeta: frozenEditingMetaState,
editingRows: props.editingRows,
emptyMessage: props.emptyMessage,
expandableRowGroups: props.expandableRowGroups,
expandedRowIcon: props.expandedRowIcon,
expandedRows: props.expandedRows,
first: first,
frozenRow: true,
groupRowsBy: props.groupRowsBy,
isDataSelectable: props.isDataSelectable,
isVirtualScrollerDisabled: true,
lazy: props.lazy,
loading: props.loading,
metaKeySelection: props.metaKeySelection,
onCellClick: props.onCellClick,
onCellSelect: props.onCellSelect,
onCellUnselect: props.onCellUnselect,
onContextMenu: props.onContextMenu,
onContextMenuSelectionChange: props.onContextMenuSelectionChange,
onEditingMetaChange: onFrozenEditingMetaChange,
onRowClick: props.onRowClick,
onRowCollapse: props.onRowCollapse,
onRowDoubleClick: props.onRowDoubleClick,
onRowPointerDown: props.onRowPointerDown,
onRowPointerUp: props.onRowPointerUp,
onRowEditCancel: props.onRowEditCancel,
onRowEditChange: props.onRowEditChange,
onRowEditComplete: props.onRowEditComplete,
onRowEditInit: props.onRowEditInit,
onRowEditSave: props.onRowEditSave,
onRowExpand: props.onRowExpand,
onRowMouseEnter: props.onRowMouseEnter,
onRowMouseLeave: props.onRowMouseLeave,
onRowReorder: props.onRowReorder,
onRowSelect: props.onRowSelect,
onRowToggle: props.onRowToggle,
onRowUnselect: props.onRowUnselect,
onSelectionChange: props.onSelectionChange,
paginator: props.paginator
// pass processedData #7546
,
processedData: processedData,
reorderableRows: props.reorderableRows,
responsiveLayout: props.responsiveLayout,
rowClassName: props.rowClassName,
rowEditValidator: props.rowEditValidator,
rowEditorCancelIcon: props.rowEditorCancelIcon,
rowEditorInitIcon: props.rowEditorInitIcon,
rowEditorSaveIcon: props.rowEditorSaveIcon,
rowExpansionTemplate: props.rowExpansionTemplate,
rowGroupFooterTemplate: props.rowGroupFooterTemplate,
rowGroupHeaderTemplate: props.rowGroupHeaderTemplate,
rowGroupMode: props.rowGroupMode,
scrollable: props.scrollable,
selectOnEdit: props.selectOnEdit,
selection: props.selection,
selectionAutoFocus: props.selectionAutoFocus,
selectionMode: props.selectionMode,
selectionModeInColumn: selectionModeInColumn,
showRowReorderElement: props.showRowReorderElement,
showSelectionElement: props.showSelectionElement,
tabIndex: props.tabIndex,
tableProps: props,
tableSelector: attributeSelector.current,
value: props.frozenValue,
virtualScrollerOptions: options,
ptCallbacks: ptCallbacks,
metaData: metaData,
unstyled: props.unstyled
});
var body = /*#__PURE__*/React.createElement(TableBody, {
hostName: "DataTable",
ref: bodyRef,
cellMemo: props.cellMemo,
cellMemoProps: props.cellMemoProps,
cellMemoPropsDepth: props.cellMemoPropsDepth,
cellClassName: props.cellClassName,
cellSelection: props.cellSelection,
checkIcon: props.checkIcon,
className: classNames('p-datatable-tbody', className),
collapsedRowIcon: props.collapsedRowIcon,
columns: columns,
compareSelectionBy: props.compareSelectionBy,
contextMenuSelection: props.contextMenuSelection,
dataKey: props.dataKey,
dragSelection: props.dragSelection,
editMode: props.editMode,
editingMeta: editingMetaState,
editingRows: props.editingRows,
empty: empty,
emptyMessage: props.emptyMessage,
expandableRowGroups: props.expandableRowGroups,
expandedRowIcon: props.expandedRowIcon,
expandedRows: props.expandedRows,
first: first,
frozenRow: false,
groupRowsBy: props.groupRowsBy,
isDataSelectable: props.isDataSelectable,
isVirtualScrollerDisabled: isVirtualScrollerDisabled,
lazy: props.lazy,
loading: props.loading,
metaKeySelection: props.metaKeySelection,
onCellClick: props.onCellClick,
onCellSelect: props.onCellSelect,
onCellUnselect: props.onCellUnselect,
onContextMenu: props.onContextMenu,
onContextMenuSelectionChange: props.onContextMenuSelectionChange,
onEditingMetaChange: onEditingMetaChange,
onRowClick: props.onRowClick,
onRowCollapse: props.onRowCollapse,
onRowDoubleClick: props.onRowDoubleClick,
onRowEditCancel: props.onRowEditCancel,
onRowEditChange: props.onRowEditChange,
onRowEditComplete: props.onRowEditComplete,
onRowEditInit: props.onRowEditInit,
onRowEditSave: props.onRowEditSave,
onRowExpand: props.onRowExpand,
onRowMouseEnter: props.onRowMouseEnter,
onRowMouseLeave: props.onRowMouseLeave,
onRowPointerDown: props.onRowPointerDown,
onRowPointerUp: props.onRowPointerUp,
onRowReorder: props.onRowReorder,
onRowSelect: props.onRowSelect,
onRowToggle: props.onRowToggle,
onRowUnselect: props.onRowUnselect,
onSelectionChange: props.onSelectionChange,
paginator: props.paginator
// pass processedData #7546
,
processedData: processedData,
reorderableRows: props.reorderableRows,
responsiveLayout: props.responsiveLayout,
rowClassName: props.rowClassName,
rowEditValidator: props.rowEditValidator,
rowEditorCancelIcon: props.rowEditorCancelIcon,
rowEditorInitIcon: props.rowEditorInitIcon,
rowEditorSaveIcon: props.rowEditorSaveIcon,
rowExpansionTemplate: props.rowExpansionTemplate,
rowGroupFooterTemplate: props.rowGroupFooterTemplate,
rowGroupHeaderTemplate: props.rowGroupHeaderTemplate,
rowGroupMode: props.rowGroupMode,
scrollable: props.scrollable,
selectOnEdit: props.selectOnEdit,
selection: props.selection,
selectionAutoFocus: props.selectionAutoFocus,
selectionMode: props.selectionMode,
selectionModeInColumn: selectionModeInColumn,
showRowReorderElement: props.showRowReorderElement,
showSelectionElement: props.showSelectionElement,
style: style,
tabIndex: props.tabIndex,
tableProps: props,
tableSelector: attributeSelector.current,
value: dataToRender(rows),
virtualScrollerContentRef: contentRef,
virtualScrollerOptions: options,
ptCallbacks: ptCallbacks,
metaData: metaData,
unstyled: props.unstyled
});
var spacerBody = ObjectUtils.isNotEmpty(spacerStyle) ? /*#__PURE__*/React.createElement(TableBody, {
hostName: "DataTable",
style: {
height: "calc(".concat(spacerStyle.height, " - ").concat(rows.length * itemSize, "px)")
},
className: "p-datatable-virtualscroller-spacer",
ptCallbacks: ptCallbacks,
metaData: metaData,
unstyled: props.unstyled
}) : null;
return /*#__PURE__*/React.createElement(React.Fragment, null, frozenBody, body, spacerBody);
};
var createTableFooter = function createTableFooter(options) {
var columns = options.columns;
return /*#__PURE__*/React.createElement(TableFooter, {
hostName: "DataTable",
tableProps: props,
columns: columns,
footerColumnGroup: props.footerColumnGroup,
ptCallbacks: ptCallbacks,
metaData: metaData,
unstyled: props.unstyled
});
};
var createContent = function createContent(processedData, columns, selectionModeInColumn, empty) {
if (!columns) {
return;
}
var _isVirtualScrollerDisabled = isVirtualScrollerDisabled();
var virtualScrollerOptions = props.virtualScrollerOptions || {};
var wrapperProps = mergeProps({
className: ptCallbacks.cx('wrapper'),
style: _objectSpread$18(_objectSpread$18({}, ptCallbacks.sx('wrapper')), {}, {
maxHeight: _isVirtualScrollerDisabled ? props.scrollHeight : null
})
}, ptCallbacks.ptm('wrapper'));
return /*#__PURE__*/React.createElement("div", _extends({
ref: wrapperRef
}, wrapperProps), /*#__PURE__*/React.createElement(VirtualScroller, _extends({
ref: virtualScrollerRef
}, virtualScrollerOptions, {
items: processedData,
columns: columns,
style: _objectSpread$18(_objectSpread$18({}, virtualScrollerOptions.style), {
height: props.scrollHeight !== 'flex' ? props.scrollHeight : undefined
}),
scrollHeight: props.scrollHeight !== 'flex' ? undefined : '100%',
disabled: _isVirtualScrollerDisabled,
loaderDisabled: true,
inline: true,
autoSize: true,
pt: ptCallbacks.ptm('virtualScroller'),
__parentMetadata: {
parent: metaData
},
showSpacer: false,
unstyled: props.unstyled,
contentTemplate: function contentTemplate(options) {
var ref = function ref(el) {
tableRef.current = el;
options.spacerRef && options.spacerRef(el);
};
var tableHeader = createTableHeader(options, empty, _isVirtualScrollerDisabled);
var tableBody = createTableBody(options, selectionModeInColumn, empty, _isVirtualScrollerDisabled, processedData);
var tableFooter = createTableFooter(options);
var tableProps = mergeProps({
className: classNames(props.tableClassName, ptCallbacks.cx('table')),
style: props.tableStyle,
role: 'table'
}, ptCallbacks.ptm('table'));
return /*#__PURE__*/React.createElement("table", _extends({
ref: ref
}, tableProps), tableHeader, tableBody, tableFooter);
}
})));
};
var createFooter = function createFooter() {
if (props.footer) {
var _content2 = ObjectUtils.getJSXElement(props.footer, {
props: props
});
var footerProps = mergeProps({
className: ptCallbacks.cx('footer')
}, ptCallbacks.ptm('footer'));
return /*#__PURE__*/React.createElement("div", footerProps, _content2);
}
return null;
};
var createPaginator = function createPaginator(position, totalRecords) {
return /*#__PURE__*/React.createElement(Paginator, {
first: getFirst(),
rows: getRows(),
pageLinkSize: props.pageLinkSize,
className: classNames(props.paginatorClassName, ptCallbacks.cx('paginator', {
position: position
})),
onPageChange: onPageChange,
template: props.paginatorTemplate,
totalRecords: totalRecords,
rowsPerPageOptions: props.rowsPerPageOptions,
currentPageReportTemplate: props.currentPageReportTemplate,
leftContent: props.paginatorLeft,
rightContent: props.paginatorRight,
alwaysShow: props.alwaysShowPaginator,
dropdownAppendTo: props.paginatorDropdownAppendTo,
pt: ptCallbacks.ptm('paginator'),
unstyled: props.unstyled,
__parentMetadata: {
parent: metaData
}
});
};
var createPaginatorTop = function createPaginatorTop(totalRecords) {
if (props.paginator && props.paginatorPosition !== 'bottom') {
return createPaginator('top', totalRecords);
}
return null;
};
var createPaginatorBottom = function createPaginatorBottom(totalRecords) {
if (props.paginator && props.paginatorPosition !== 'top') {
return createPaginator('bottom', totalRecords);
}
return null;
};
var createResizeHelper = function createResizeHelper() {
if (props.resizableColumns) {
var resizeHelperProps = mergeProps({
className: ptCallbacks.cx('resizeHelper'),
style: ptCallbacks.sx('resizeHelper')
}, ptCallbacks.ptm('resizeHelper'));
return /*#__PURE__*/React.createElement("div", _extends({
ref: resizeHelperRef
}, resizeHelperProps));
}
return null;
};
var createReorderIndicators = function createReorderIndicators() {
if (props.reorderableColumns) {
var style = {
position: 'absolute',
display: 'none'
};
var reorderIndicatorUpProps = mergeProps({
className: ptCallbacks.cx('reorderIndicatorUp'),
style: ptCallbacks.sx('reorderIndicatorUp', {
style: style
})
}, ptCallbacks.ptm('reorderIndicatorUp'));
var reorderIndicatorUpIconProps = mergeProps(ptCallbacks.ptm('reorderIndicatorUpIcon'));
var reorderIndicatorUpIcon = IconUtils.getJSXIcon(props.reorderIndicatorUpIcon || /*#__PURE__*/React.createElement(ArrowDownIcon, reorderIndicatorUpIconProps), _objectSpread$18({}, reorderIndicatorUpIconProps), {
props: props
});
var reorderIndicatorDownProps = mergeProps({
className: ptCallbacks.cx('reorderIndicatorDown'),
style: ptCallbacks.sx('reorderIndicatorDown', {
style: style
})
}, ptCallbacks.ptm('reorderIndicatorDown'));
var reorderIndicatorDownIconProps = mergeProps(ptCallbacks.ptm('reorderIndicatorDownIcon'));
var reorderIndicatorDownIcon = IconUtils.getJSXIcon(props.reorderIndicatorDownIcon || /*#__PURE__*/React.createElement(ArrowUpIcon, reorderIndicatorDownIconProps), _objectSpread$18({}, reorderIndicatorDownIconProps), {
props: props
});
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", _extends({
ref: reorderIndicatorUpRef
}, reorderIndicatorUpProps), reorderIndicatorUpIcon), /*#__PURE__*/React.createElement("span", _extends({
ref: reorderIndicatorDownRef
}, reorderIndicatorDownProps), reorderIndicatorDownIcon));
}
return null;
};
var data = processedData();
var columns = getColumns();
var totalRecords = getTotalRecords(data);
var empty = ObjectUtils.isEmpty(data);
var selectionModeInColumn = getSelectionModeInColumn(columns);
var selectable = props.selectionMode || selectionModeInColumn;
var loader = createLoader();
var header = createHeader();
var paginatorTop = createPaginatorTop(totalRecords);
var content = createContent(data, columns, selectionModeInColumn, empty);
var paginatorBottom = createPaginatorBottom(totalRecords);
var footer = createFooter();
var resizeHelper = createResizeHelper();
var reorderIndicators = createReorderIndicators();
var rootProps = mergeProps({
id: props.id,
className: classNames(props.className, ptCallbacks.cx('root', {
selectable: selectable
})),
style: props.style,
'data-scrollselectors': '.p-datatable-wrapper',
'data-showgridlines': props.showGridlines
}, DataTableBase.getOtherProps(props), ptCallbacks.ptm('root'));
return /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef
}, rootProps), loader, header, paginatorTop, content, paginatorBottom, footer, resizeHelper, reorderIndicators);
});
DataTable.displayName = 'DataTable';
var ThLargeIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M1.90909 6.36364H4.45455C4.96087 6.36364 5.44645 6.1625 5.80448 5.80448C6.1625 5.44645 6.36364 4.96087 6.36364 4.45455V1.90909C6.36364 1.40277 6.1625 0.917184 5.80448 0.55916C5.44645 0.201136 4.96087 0 4.45455 0H1.90909C1.40277 0 0.917184 0.201136 0.55916 0.55916C0.201136 0.917184 0 1.40277 0 1.90909V4.45455C0 4.96087 0.201136 5.44645 0.55916 5.80448C0.917184 6.1625 1.40277 6.36364 1.90909 6.36364ZM1.46154 1.46154C1.58041 1.34268 1.741 1.27492 1.90909 1.27273H4.45455C4.62264 1.27492 4.78322 1.34268 4.90209 1.46154C5.02096 1.58041 5.08871 1.741 5.09091 1.90909V4.45455C5.08871 4.62264 5.02096 4.78322 4.90209 4.90209C4.78322 5.02096 4.62264 5.08871 4.45455 5.09091H1.90909C1.741 5.08871 1.58041 5.02096 1.46154 4.90209C1.34268 4.78322 1.27492 4.62264 1.27273 4.45455V1.90909C1.27492 1.741 1.34268 1.58041 1.46154 1.46154ZM1.90909 14H4.45455C4.96087 14 5.44645 13.7989 5.80448 13.4408C6.1625 13.0828 6.36364 12.5972 6.36364 12.0909V9.54544C6.36364 9.03912 6.1625 8.55354 5.80448 8.19551C5.44645 7.83749 4.96087 7.63635 4.45455 7.63635H1.90909C1.40277 7.63635 0.917184 7.83749 0.55916 8.19551C0.201136 8.55354 0 9.03912 0 9.54544V12.0909C0 12.5972 0.201136 13.0828 0.55916 13.4408C0.917184 13.7989 1.40277 14 1.90909 14ZM1.46154 9.0979C1.58041 8.97903 1.741 8.91128 1.90909 8.90908H4.45455C4.62264 8.91128 4.78322 8.97903 4.90209 9.0979C5.02096 9.21677 5.08871 9.37735 5.09091 9.54544V12.0909C5.08871 12.259 5.02096 12.4196 4.90209 12.5384C4.78322 12.6573 4.62264 12.7251 4.45455 12.7273H1.90909C1.741 12.7251 1.58041 12.6573 1.46154 12.5384C1.34268 12.4196 1.27492 12.259 1.27273 12.0909V9.54544C1.27492 9.37735 1.34268 9.21677 1.46154 9.0979ZM12.0909 6.36364H9.54544C9.03912 6.36364 8.55354 6.1625 8.19551 5.80448C7.83749 5.44645 7.63635 4.96087 7.63635 4.45455V1.90909C7.63635 1.40277 7.83749 0.917184 8.19551 0.55916C8.55354 0.201136 9.03912 0 9.54544 0H12.0909C12.5972 0 13.0828 0.201136 13.4408 0.55916C13.7989 0.917184 14 1.40277 14 1.90909V4.45455C14 4.96087 13.7989 5.44645 13.4408 5.80448C13.0828 6.1625 12.5972 6.36364 12.0909 6.36364ZM9.54544 1.27273C9.37735 1.27492 9.21677 1.34268 9.0979 1.46154C8.97903 1.58041 8.91128 1.741 8.90908 1.90909V4.45455C8.91128 4.62264 8.97903 4.78322 9.0979 4.90209C9.21677 5.02096 9.37735 5.08871 9.54544 5.09091H12.0909C12.259 5.08871 12.4196 5.02096 12.5384 4.90209C12.6573 4.78322 12.7251 4.62264 12.7273 4.45455V1.90909C12.7251 1.741 12.6573 1.58041 12.5384 1.46154C12.4196 1.34268 12.259 1.27492 12.0909 1.27273H9.54544ZM9.54544 14H12.0909C12.5972 14 13.0828 13.7989 13.4408 13.4408C13.7989 13.0828 14 12.5972 14 12.0909V9.54544C14 9.03912 13.7989 8.55354 13.4408 8.19551C13.0828 7.83749 12.5972 7.63635 12.0909 7.63635H9.54544C9.03912 7.63635 8.55354 7.83749 8.19551 8.19551C7.83749 8.55354 7.63635 9.03912 7.63635 9.54544V12.0909C7.63635 12.5972 7.83749 13.0828 8.19551 13.4408C8.55354 13.7989 9.03912 14 9.54544 14ZM9.0979 9.0979C9.21677 8.97903 9.37735 8.91128 9.54544 8.90908H12.0909C12.259 8.91128 12.4196 8.97903 12.5384 9.0979C12.6573 9.21677 12.7251 9.37735 12.7273 9.54544V12.0909C12.7251 12.259 12.6573 12.4196 12.5384 12.5384C12.4196 12.6573 12.259 12.7251 12.0909 12.7273H9.54544C9.37735 12.7251 9.21677 12.6573 9.0979 12.5384C8.97903 12.4196 8.91128 12.259 8.90908 12.0909V9.54544C8.91128 9.37735 8.97903 9.21677 9.0979 9.0979Z",
fill: "currentColor"
}));
}));
ThLargeIcon.displayName = 'ThLargeIcon';
var classes$R = {
loadingIcon: 'p-dataview-loading-icon',
loadingOverlay: 'p-dataview-loading-overlay p-component-overlay',
emptyMessage: 'p-dataview-emptymessage',
header: 'p-dataview-header',
footer: 'p-dataview-footer',
content: 'p-dataview-content',
grid: function grid(_ref) {
var props = _ref.props;
return classNames('p-grid grid', {
'p-nogutter grid-nogutter': !props.gutter
});
},
root: function root(_ref2) {
var props = _ref2.props;
return classNames('p-dataview p-component', _defineProperty(_defineProperty({}, "p-dataview-".concat(props.layout), !!props.layout), 'p-dataview-loading', props.loading));
}
};
var styles$H = "\n@layer primereact {\n .p-dataview-loading {\n position: relative;\n min-height: 4rem;\n }\n\n .p-dataview .p-dataview-loading-overlay {\n position: absolute;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n}\n";
var DataViewBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'DataView',
id: null,
header: null,
footer: null,
value: null,
layout: 'list',
dataKey: null,
rows: null,
first: 0,
totalRecords: null,
paginator: false,
paginatorPosition: 'bottom',
alwaysShowPaginator: true,
paginatorClassName: null,
paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
paginatorLeft: null,
paginatorRight: null,
paginatorDropdownAppendTo: null,
pageLinkSize: 5,
rowsPerPageOptions: null,
currentPageReportTemplate: '({currentPage} of {totalPages})',
emptyMessage: null,
sortField: null,
sortOrder: null,
style: null,
className: null,
lazy: false,
loading: false,
loadingIcon: null,
gutter: false,
itemTemplate: null,
listTemplate: null,
onPage: null,
children: undefined
},
css: {
classes: classes$R,
styles: styles$H
}
});
var DataViewLayoutOptionsBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'DataViewLayoutOptions',
id: null,
style: null,
className: null,
layout: null,
listIcon: null,
gridIcon: null,
onChange: null,
children: undefined
},
css: {
classes: {
root: 'p-dataview p-component p-dataview-layout-options p-selectbutton p-button-group',
listButton: function listButton(_ref3) {
var props = _ref3.props;
return classNames('p-button p-button-icon-only', {
'p-highlight': props.layout === 'list'
});
},
gridButton: function gridButton(_ref4) {
var props = _ref4.props;
return classNames('p-button p-button-icon-only', {
'p-highlight': props.layout === 'grid'
});
}
}
}
});
function _createForOfIteratorHelper$a(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$a(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray$a(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$a(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$a(r, a) : void 0; } }
function _arrayLikeToArray$a(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 ownKeys$17(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$17(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$17(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$17(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var DataViewLayoutOptions = /*#__PURE__*/React.memo(function (inProps) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = DataViewLayoutOptionsBase.getProps(inProps, context);
var _DataViewLayoutOption = DataViewLayoutOptionsBase.setMetaData({
props: props
}),
ptm = _DataViewLayoutOption.ptm,
cx = _DataViewLayoutOption.cx;
var changeLayout = function changeLayout(event, layoutMode) {
props.onChange({
originalEvent: event,
value: layoutMode
});
event.preventDefault();
};
var listIconProps = mergeProps(ptm('list'));
var gridIconProps = mergeProps(ptm('grid'));
var listIcon = IconUtils.getJSXIcon(props.listIcon || /*#__PURE__*/React.createElement(BarsIcon, listIconProps), _objectSpread$17({}, listIconProps), {
props: props
});
var gridIcon = IconUtils.getJSXIcon(props.gridIcon || /*#__PURE__*/React.createElement(ThLargeIcon, gridIconProps), _objectSpread$17({}, gridIconProps), {
props: props
});
var rootProps = mergeProps({
id: props.id,
style: props.style,
className: classNames(props.className, cx('root'))
}, DataViewLayoutOptionsBase.getOtherProps(props), ptm('root'));
var listButtonProps = mergeProps({
type: 'button',
className: cx('listButton'),
onClick: function onClick(event) {
return changeLayout(event, 'list');
}
}, ptm('listButton'));
var gridButtonProps = mergeProps({
type: 'button',
className: cx('gridButton'),
onClick: function onClick(event) {
return changeLayout(event, 'grid');
}
}, ptm('gridButton'));
return /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement("button", listButtonProps, listIcon, /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("button", gridButtonProps, gridIcon, /*#__PURE__*/React.createElement(Ripple, null)));
});
var DataViewItem = /*#__PURE__*/React.memo(function (props) {
return props.template(props.item, props.layout);
});
var DataView = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = DataViewBase.getProps(inProps, context);
var _React$useState = React.useState(props.first),
_React$useState2 = _slicedToArray(_React$useState, 2),
firstState = _React$useState2[0],
setFirstState = _React$useState2[1];
var _React$useState3 = React.useState(props.rows),
_React$useState4 = _slicedToArray(_React$useState3, 2),
rowsState = _React$useState4[0],
setRowsState = _React$useState4[1];
var metaData = {
props: props,
state: {
first: firstState,
rows: rowsState
}
};
var _DataViewBase$setMeta = DataViewBase.setMetaData(metaData),
ptm = _DataViewBase$setMeta.ptm,
cx = _DataViewBase$setMeta.cx,
isUnstyled = _DataViewBase$setMeta.isUnstyled;
useHandleStyle(DataViewBase.css.styles, isUnstyled, {
name: 'dataview'
});
var elementRef = React.useRef(null);
var first = props.onPage ? props.first : firstState;
var rows = props.onPage ? props.rows : rowsState;
var getItemRenderKey = function getItemRenderKey(value) {
return props.dataKey ? ObjectUtils.resolveFieldData(value, props.dataKey) : null;
};
var getTotalRecords = function getTotalRecords() {
return props.totalRecords ? props.totalRecords : props.value ? props.value.length : 0;
};
var createPaginator = function createPaginator(position) {
var className = classNames('p-paginator-' + position, props.paginatorClassName);
var totalRecords = getTotalRecords();
return /*#__PURE__*/React.createElement(Paginator, {
first: first,
rows: rows,
pageLinkSize: props.pageLinkSize,
className: className,
onPageChange: onPageChange,
template: props.paginatorTemplate,
totalRecords: totalRecords,
rowsPerPageOptions: props.rowsPerPageOptions,
currentPageReportTemplate: props.currentPageReportTemplate,
leftContent: props.paginatorLeft,
rightContent: props.paginatorRight,
alwaysShow: props.alwaysShowPaginator,
dropdownAppendTo: props.paginatorDropdownAppendTo,
pt: ptm('paginator'),
unstyled: props.unstyled,
__parentMetadata: {
parent: metaData
}
});
};
var onPageChange = function onPageChange(event) {
if (props.onPage) {
props.onPage(event);
} else {
setFirstState(event.first);
setRowsState(event.rows);
}
};
var getItems = function getItems(value) {
if (props.paginator) {
var currentFirst = props.lazy ? 0 : first;
var totalRecords = getTotalRecords();
var last = Math.min(rows + currentFirst, totalRecords);
return value.slice(currentFirst, last) || [];
}
return value;
};
var sort = function sort() {
if (props.value) {
// performance optimization to prevent resolving field data in each loop
var lookupMap = new Map();
var comparator = ObjectUtils.localeComparator(context && context.locale || PrimeReact.locale);
var value = _toConsumableArray(props.value);
var _iterator = _createForOfIteratorHelper$a(value),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var item = _step.value;
lookupMap.set(item, ObjectUtils.resolveFieldData(item, props.sortField));
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
value.sort(function (data1, data2) {
var value1 = lookupMap.get(data1);
var value2 = lookupMap.get(data2);
return ObjectUtils.sort(value1, value2, props.sortOrder, comparator, context && context.nullSortOrder || PrimeReact.nullSortOrder);
});
return value;
}
return null;
};
var createLoader = function createLoader() {
if (props.loading) {
var loadingIconProps = mergeProps({
className: cx('loadingIcon')
}, ptm('loadingIcon'));
var icon = props.loadingIcon || /*#__PURE__*/React.createElement(SpinnerIcon, _extends({}, loadingIconProps, {
spin: true
}));
var loadingIcon = IconUtils.getJSXIcon(icon, _objectSpread$17({}, loadingIconProps), {
props: props
});
var loadingOverlayProps = mergeProps({
className: cx('loadingOverlay')
}, ptm('loadingOverlay'));
return /*#__PURE__*/React.createElement("div", loadingOverlayProps, loadingIcon);
}
return null;
};
var createTopPaginator = function createTopPaginator() {
if (props.paginator && (props.paginatorPosition !== 'bottom' || props.paginatorPosition === 'both')) {
return createPaginator('top');
}
return null;
};
var createBottomPaginator = function createBottomPaginator() {
if (props.paginator && (props.paginatorPosition !== 'top' || props.paginatorPosition === 'both')) {
return createPaginator('bottom');
}
return null;
};
var createEmptyMessage = function createEmptyMessage() {
if (!props.loading) {
var _content = props.emptyMessage || localeOption('emptyMessage');
var emptyMessageProps = mergeProps({
className: cx('emptyMessage')
}, ptm('emptyMessage'));
return /*#__PURE__*/React.createElement("div", emptyMessageProps, _content);
}
return null;
};
var createHeader = function createHeader() {
if (props.header) {
var headerProps = mergeProps({
className: cx('header')
}, ptm('header'));
return /*#__PURE__*/React.createElement("div", headerProps, props.header);
}
return null;
};
var createFooter = function createFooter() {
if (props.footer) {
var footerProps = mergeProps({
className: cx('footer')
}, ptm('footer'));
return /*#__PURE__*/React.createElement("div", footerProps, props.footer);
}
return null;
};
var createItems = function createItems(value) {
if (ObjectUtils.isNotEmpty(value)) {
var items = getItems(value);
return items.map(function (item, index) {
return /*#__PURE__*/React.createElement(DataViewItem, {
key: getItemRenderKey(item) || index,
template: props.itemTemplate,
layout: props.layout,
item: item
});
});
}
return createEmptyMessage();
};
var createContent = function createContent(value) {
var contentProps = mergeProps({
className: cx('content')
}, ptm('content'));
var content = null;
if (props.listTemplate) {
var items = getItems(value);
if (ObjectUtils.isNotEmpty(items)) {
content = ObjectUtils.getJSXElement(props.listTemplate, items, props.layout);
} else {
content = createEmptyMessage();
}
} else {
var _items = createItems(value);
var gridProps = mergeProps({
className: cx('grid')
}, ptm('grid'));
content = /*#__PURE__*/React.createElement("div", gridProps, _items);
}
return /*#__PURE__*/React.createElement("div", contentProps, content);
};
var processData = function processData() {
var data = props.value;
if (ObjectUtils.isNotEmpty(data) && props.sortField) {
data = sort();
}
return data;
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var data = processData();
var loader = createLoader();
var topPaginator = createTopPaginator();
var bottomPaginator = createBottomPaginator();
var header = createHeader();
var footer = createFooter();
var content = createContent(data);
var rootProps = mergeProps({
id: props.id,
ref: elementRef,
style: props.style,
className: classNames(props.className, cx('root'))
}, DataViewBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("div", rootProps, loader, header, topPaginator, content, bottomPaginator, footer);
}));
DataViewLayoutOptions.displayName = 'DataViewLayoutOptions';
DataViewItem.displayName = 'DataViewItem';
DataView.displayName = 'DataView';
var DeferredContentBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'DeferredContent',
onload: null,
children: undefined
}
});
var DeferredContent = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = DeferredContentBase.getProps(inProps, context);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
loadedState = _React$useState2[0],
setLoadedState = _React$useState2[1];
var elementRef = React.useRef(null);
var _useEventListener = useEventListener({
target: 'window',
type: 'scroll',
listener: function listener() {
if (shouldLoad()) {
load();
unbindScrollListener();
}
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindScrollListener = _useEventListener2[0],
unbindScrollListener = _useEventListener2[1];
var _DeferredContentBase$ = DeferredContentBase.setMetaData({
props: props,
state: {
loaded: loadedState
}
}),
ptm = _DeferredContentBase$.ptm;
var shouldLoad = function shouldLoad() {
if (loadedState) {
return false;
}
var rect = elementRef.current.getBoundingClientRect();
var winHeight = document.documentElement.clientHeight;
return winHeight >= rect.top;
};
var load = function load(event) {
setLoadedState(true);
props.onLoad && props.onLoad(event);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
useMountEffect(function () {
if (!loadedState) {
shouldLoad() ? load() : bindScrollListener();
}
});
var rootProps = mergeProps({
ref: elementRef
}, DeferredContentBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("div", rootProps, loadedState && props.children);
});
DeferredContent.displayName = 'DeferredContent';
var classes$Q = {
root: function root(_ref) {
var props = _ref.props,
horizontal = _ref.horizontal,
vertical = _ref.vertical;
return classNames("p-divider p-component p-divider-".concat(props.layout, " p-divider-").concat(props.type), {
'p-divider-left': horizontal && (!props.align || props.align === 'left'),
'p-divider-right': horizontal && props.align === 'right',
'p-divider-center': horizontal && props.align === 'center' || vertical && (!props.align || props.align === 'center'),
'p-divider-top': vertical && props.align === 'top',
'p-divider-bottom': vertical && props.align === 'bottom'
}, props.className);
},
content: 'p-divider-content'
};
var styles$G = "\n@layer primereact {\n .p-divider-horizontal {\n display: flex;\n width: 100%;\n position: relative;\n align-items: center;\n }\n \n .p-divider-horizontal:before {\n position: absolute;\n display: block;\n top: 50%;\n left: 0;\n width: 100%;\n content: \"\";\n }\n \n .p-divider-horizontal.p-divider-left {\n justify-content: flex-start;\n }\n \n .p-divider-horizontal.p-divider-right {\n justify-content: flex-end;\n }\n \n .p-divider-horizontal.p-divider-center {\n justify-content: center;\n }\n \n .p-divider-content {\n z-index: 1;\n }\n \n .p-divider-vertical {\n min-height: 100%;\n margin: 0 1rem;\n display: flex;\n position: relative;\n justify-content: center;\n }\n \n .p-divider-vertical:before {\n position: absolute;\n display: block;\n top: 0;\n left: 50%;\n height: 100%;\n content: \"\";\n }\n \n .p-divider-vertical.p-divider-top {\n align-items: flex-start;\n }\n \n .p-divider-vertical.p-divider-center {\n align-items: center;\n }\n \n .p-divider-vertical.p-divider-bottom {\n align-items: flex-end;\n }\n \n .p-divider-solid.p-divider-horizontal:before {\n border-top-style: solid;\n }\n \n .p-divider-solid.p-divider-vertical:before {\n border-left-style: solid;\n }\n \n .p-divider-dashed.p-divider-horizontal:before {\n border-top-style: dashed;\n }\n \n .p-divider-dashed.p-divider-vertical:before {\n border-left-style: dashed;\n }\n \n .p-divider-dotted.p-divider-horizontal:before {\n border-top-style: dotted;\n }\n \n .p-divider-dotted.p-divider-horizontal:before {\n border-left-style: dotted;\n }\n}\n";
var inlineStyles$g = {
root: function root(_ref2) {
var props = _ref2.props;
return {
justifyContent: props.layout === 'horizontal' ? props.align === 'center' || props.align === null ? 'center' : props.align === 'left' ? 'flex-start' : props.align === 'right' ? 'flex-end' : null : null,
alignItems: props.layout === 'vertical' ? props.align === 'center' || props.align === null ? 'center' : props.align === 'top' ? 'flex-start' : props.align === 'bottom' ? 'flex-end' : null : null
};
}
};
var DividerBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Divider',
align: null,
layout: 'horizontal',
type: 'solid',
style: null,
className: null,
children: undefined
},
css: {
classes: classes$Q,
styles: styles$G,
inlineStyles: inlineStyles$g
}
});
var Divider = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = DividerBase.getProps(inProps, context);
var _DividerBase$setMetaD = DividerBase.setMetaData({
props: props
}),
ptm = _DividerBase$setMetaD.ptm,
cx = _DividerBase$setMetaD.cx,
sx = _DividerBase$setMetaD.sx,
isUnstyled = _DividerBase$setMetaD.isUnstyled;
useHandleStyle(DividerBase.css.styles, isUnstyled, {
name: 'divider'
});
var elementRef = React.useRef(null);
var horizontal = props.layout === 'horizontal';
var vertical = props.layout === 'vertical';
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var rootProps = mergeProps({
ref: elementRef,
style: sx('root'),
className: cx('root', {
horizontal: horizontal,
vertical: vertical
}),
'aria-orientation': props.layout,
role: 'separator'
}, DividerBase.getOtherProps(props), ptm('root'));
var contentProps = mergeProps({
className: cx('content')
}, ptm('content'));
return /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement("div", contentProps, props.children));
});
Divider.displayName = 'Divider';
var classes$P = {
icon: 'p-dock-action-icon',
action: function action(_ref) {
var disabled = _ref.disabled;
return classNames('p-dock-action', {
'p-disabled': disabled
});
},
menuitem: function menuitem(_ref2) {
var currentIndexState = _ref2.currentIndexState,
index = _ref2.index,
active = _ref2.active;
return classNames('p-dock-item', {
'p-dock-item-second-prev': currentIndexState - 2 === index,
'p-dock-item-prev': currentIndexState - 1 === index,
'p-dock-item-current': currentIndexState === index,
'p-dock-item-next': currentIndexState + 1 === index,
'p-dock-item-second-next': currentIndexState + 2 === index,
'p-focus': active
});
},
content: 'p-menuitem-content',
header: 'p-dock-header',
menu: 'p-dock-list',
footer: 'p-dock-footer',
root: function root(_ref3) {
var props = _ref3.props;
return classNames("p-dock p-component p-dock-".concat(props.position), {
'p-dock-magnification': props.magnification
});
},
container: 'p-dock-list-container'
};
var styles$F = "\n@layer primereact {\n .p-dock {\n position: absolute;\n z-index: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n pointer-events: none;\n }\n\n .p-dock-list-container {\n display: flex;\n pointer-events: auto;\n }\n\n .p-dock-list {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: auto;\n }\n\n .p-dock-magnification .p-dock-item {\n transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);\n will-change: transform;\n }\n\n .p-dock-action {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: relative;\n overflow: hidden;\n cursor: default;\n }\n\n .p-dock-magnification .p-dock-item-second-prev,\n .p-dock-magnification .p-dock-item-second-next {\n transform: scale(1.2);\n }\n\n .p-dock-magnification .p-dock-item-prev,\n .p-dock-magnification .p-dock-item-next {\n transform: scale(1.4);\n }\n\n .p-dock-magnification .p-dock-item-current {\n transform: scale(1.6);\n z-index: 1;\n }\n\n /* Position */\n /* top */\n .p-dock-top {\n left: 0;\n top: 0;\n width: 100%;\n }\n\n .p-dock-top.p-dock-magnification .p-dock-item {\n transform-origin: center top;\n }\n\n .p-dock-top .p-dock-list-container {\n flex-direction: column-reverse;\n }\n\n /* bottom */\n .p-dock-bottom {\n left: 0;\n bottom: 0;\n width: 100%;\n }\n\n .p-dock-bottom.p-dock-magnification .p-dock-item {\n transform-origin: center bottom;\n }\n\n .p-dock-bottom .p-dock-list-container {\n flex-direction: column;\n }\n\n /* right */\n .p-dock-right {\n right: 0;\n top: 0;\n height: 100%;\n }\n\n .p-dock-right.p-dock-magnification .p-dock-item {\n transform-origin: center right;\n }\n\n .p-dock-right .p-dock-list {\n flex-direction: column;\n }\n\n /* left */\n .p-dock-left {\n left: 0;\n top: 0;\n height: 100%;\n }\n\n .p-dock-left.p-dock-magnification .p-dock-item {\n transform-origin: center left;\n }\n\n .p-dock-left .p-dock-list {\n flex-direction: column;\n }\n\n .p-dock-left .p-dock-list-container {\n flex-direction: row-reverse;\n }\n}\n";
var DockBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Dock',
id: null,
style: null,
className: null,
model: null,
tabIndex: 0,
onFocus: null,
onBlur: null,
position: 'bottom',
magnification: true,
header: null,
footer: null,
children: undefined
},
css: {
classes: classes$P,
styles: styles$F
}
});
function ownKeys$16(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$16(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$16(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$16(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Dock = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var _React$useState = React.useState(-3),
_React$useState2 = _slicedToArray(_React$useState, 2),
currentIndexState = _React$useState2[0],
setCurrentIndexState = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
focused = _React$useState4[0],
setFocused = _React$useState4[1];
var _React$useState5 = React.useState(-1),
_React$useState6 = _slicedToArray(_React$useState5, 2),
focusedOptionIndex = _React$useState6[0],
setFocusedOptionIndex = _React$useState6[1];
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = DockBase.getProps(inProps, context);
var _React$useState7 = React.useState(props.id),
_React$useState8 = _slicedToArray(_React$useState7, 2),
idState = _React$useState8[0],
setIdState = _React$useState8[1];
var _DockBase$setMetaData = DockBase.setMetaData({
props: props,
state: {
id: idState,
currentIndex: currentIndexState
}
}),
ptm = _DockBase$setMetaData.ptm,
cx = _DockBase$setMetaData.cx,
isUnstyled = _DockBase$setMetaData.isUnstyled;
var elementRef = React.useRef(null);
var listRef = React.useRef(null);
useHandleStyle(DockBase.css.styles, isUnstyled, {
name: 'dock'
});
var getPTOptions = function getPTOptions(key, item, index) {
return ptm(key, {
context: {
index: index,
item: item
}
});
};
var onListMouseLeave = function onListMouseLeave() {
setCurrentIndexState(-3);
};
var onItemMouseEnter = function onItemMouseEnter(index) {
setCurrentIndexState(index);
};
var onItemClick = function onItemClick(e, item) {
if (item.command) {
item.command({
originalEvent: e,
item: item
});
}
e.preventDefault();
};
var onListFocus = function onListFocus(event) {
setFocused(true);
changeFocusedOptionIndex(0);
props.onFocus && props.onFocus(event);
};
var onListBlur = function onListBlur(event) {
setFocused(false);
setFocusedOptionIndex(-1);
props.onBlur && props.onBlur(event);
};
var onListKeyDown = function onListKeyDown(event) {
switch (event.code) {
case 'ArrowDown':
if (props.position === 'left' || props.position === 'right') {
onArrowDownKey();
}
event.preventDefault();
break;
case 'ArrowUp':
if (props.position === 'left' || props.position === 'right') {
onArrowUpKey();
}
event.preventDefault();
break;
case 'ArrowRight':
if (props.position === 'top' || props.position === 'bottom') {
onArrowDownKey();
}
event.preventDefault();
break;
case 'ArrowLeft':
if (props.position === 'top' || props.position === 'bottom') {
onArrowUpKey();
}
event.preventDefault();
break;
case 'Home':
onHomeKey();
event.preventDefault();
break;
case 'End':
onEndKey();
event.preventDefault();
break;
case 'Enter':
case 'NumpadEnter':
case 'Space':
onSpaceKey();
event.preventDefault();
break;
}
};
var onArrowDownKey = function onArrowDownKey() {
var optionIndex = findNextOptionIndex(focusedOptionIndex);
changeFocusedOptionIndex(optionIndex);
};
var onArrowUpKey = function onArrowUpKey() {
var optionIndex = findPrevOptionIndex(focusedOptionIndex);
changeFocusedOptionIndex(optionIndex);
};
var onHomeKey = function onHomeKey() {
changeFocusedOptionIndex(0);
};
var onEndKey = function onEndKey() {
changeFocusedOptionIndex(DomHandler.find(listRef.current, 'li[data-pc-section="menuitem"][data-p-disabled="false"]').length - 1);
};
var onSpaceKey = function onSpaceKey() {
var element = DomHandler.findSingle(listRef.current, "li[id=\"".concat("".concat(focusedOptionIndex), "\"]"));
var anchorElement = element && DomHandler.findSingle(element, '[data-pc-section="action"]');
anchorElement ? anchorElement.click() : element && element.click();
};
var findNextOptionIndex = function findNextOptionIndex(index) {
var menuitems = DomHandler.find(listRef.current, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
var matchedOptionIndex = _toConsumableArray(menuitems).findIndex(function (link) {
return link.id === index;
});
return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
};
var findPrevOptionIndex = function findPrevOptionIndex(index) {
var menuitems = DomHandler.find(listRef.current, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
var matchedOptionIndex = _toConsumableArray(menuitems).findIndex(function (link) {
return link.id === index;
});
return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
};
var changeFocusedOptionIndex = function changeFocusedOptionIndex(index) {
var menuitems = DomHandler.find(listRef.current, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
var order = index >= menuitems.length ? menuitems.length - 1 : index < 0 ? 0 : index;
setFocusedOptionIndex(menuitems[order].getAttribute('id'));
};
var isItemActive = function isItemActive(id) {
return id === focusedOptionIndex;
};
var createItem = function createItem(item, index) {
if (item.visible === false) {
return null;
}
var disabled = item.disabled,
_icon = item.icon,
label = item.label,
template = item.template,
url = item.url,
target = item.target;
var key = item.id || idState + '_' + index;
var contentClassName = classNames('p-dock-action', {
'p-disabled': disabled
});
var iconClassName = classNames('p-dock-action-icon', _icon);
var iconProps = mergeProps({
className: cx('icon')
}, getPTOptions('icon', item, index));
var icon = IconUtils.getJSXIcon(_icon, _objectSpread$16({}, iconProps), {
props: props
});
var actionProps = mergeProps({
href: url || '#',
onFocus: function onFocus(event) {
return event.stopPropagation();
},
className: cx('action', {
disabled: disabled
}),
tabIndex: -1,
target: target,
'data-pr-tooltip': label,
onClick: function onClick(e) {
return onItemClick(e, item);
}
}, getPTOptions('action', item, index));
var content = /*#__PURE__*/React.createElement("a", actionProps, icon, /*#__PURE__*/React.createElement(Ripple, null));
if (template) {
var defaultContentOptions = {
onClick: function onClick(e) {
return onItemClick(e, item);
},
className: contentClassName,
iconClassName: iconClassName,
'aria-hidden': 'true',
tabIndex: -1,
element: content,
props: props,
index: index
};
content = ObjectUtils.getJSXElement(template, item, defaultContentOptions);
}
var contentProps = mergeProps({
className: cx('content')
}, getPTOptions('content', item, index));
var active = isItemActive(key);
var menuitemProps = mergeProps(_defineProperty(_defineProperty({
id: key,
role: 'menuitem',
'aria-label': label,
'aria-disabled': disabled,
'data-p-focused': active,
'data-p-disabled': disabled || false,
className: cx('menuitem', {
currentIndexState: currentIndexState,
index: index,
active: isItemActive(key)
})
}, "role", 'none'), "onMouseEnter", function onMouseEnter() {
return onItemMouseEnter(index);
}), getPTOptions('menuitem', item, index));
return /*#__PURE__*/React.createElement("li", _extends({}, menuitemProps, {
key: key
}), /*#__PURE__*/React.createElement("div", contentProps, content));
};
var createItems = function createItems() {
return props.model ? props.model.map(createItem) : null;
};
var createHeader = function createHeader() {
if (props.header) {
var _header = ObjectUtils.getJSXElement(props.header, {
props: props
});
var headerProps = mergeProps({
className: cx('header')
}, ptm('header'));
return /*#__PURE__*/React.createElement("div", headerProps, _header);
}
return null;
};
var createList = function createList() {
var items = createItems();
var menuProps = mergeProps({
ref: listRef,
className: cx('menu'),
role: 'menu',
'aria-orientation': props.position === 'bottom' || props.position === 'top' ? 'horizontal' : 'vertical',
'aria-activedescendant': focused ? focusedOptionIndex !== -1 ? focusedOptionIndex : null : undefined,
tabIndex: props.tabIndex || 0,
onFocus: onListFocus,
onBlur: onListBlur,
onKeyDown: onListKeyDown,
onMouseLeave: onListMouseLeave
}, ptm('menu'));
return /*#__PURE__*/React.createElement("ul", menuProps, items);
};
var createFooter = function createFooter() {
if (props.footer) {
var _footer = ObjectUtils.getJSXElement(props.footer, {
props: props
});
var footerProps = mergeProps({
className: cx('footer')
}, ptm('footer'));
return /*#__PURE__*/React.createElement("div", footerProps, _footer);
}
return null;
};
useMountEffect(function () {
if (!idState) {
setIdState(UniqueComponentId());
}
});
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var header = createHeader();
var list = createList();
var footer = createFooter();
var rootProps = mergeProps({
className: classNames(props.className, cx('root')),
style: props.style
}, DockBase.getOtherProps(props), ptm('root'));
var containerProps = mergeProps({
className: cx('container')
}, ptm('container'));
return /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
ref: elementRef
}, rootProps), /*#__PURE__*/React.createElement("div", containerProps, header, list, footer));
}));
Dock.displayName = 'Dock';
var classes$O = {
root: function root(_ref) {
var props = _ref.props;
return classNames('', props.className);
},
toolbar: '',
content: ''
};
var styles$E = "\n/*!\n * Quill Editor v2.0.2\n * https://quilljs.com\n * Copyright (c) 2017-2024, Slab\n * Copyright (c) 2014, Jason Chen\n * Copyright (c) 2013, salesforce.com\n */\n.ql-container {\n box-sizing: border-box;\n font-family: Helvetica, Arial, sans-serif;\n font-size: 13px;\n height: 100%;\n margin: 0;\n position: relative;\n}\n.ql-container.ql-disabled .ql-tooltip {\n visibility: hidden;\n}\n.ql-container:not(.ql-disabled) li[data-list=\"checked\"] > .ql-ui,\n.ql-container:not(.ql-disabled) li[data-list=\"unchecked\"] > .ql-ui {\n cursor: pointer;\n}\n.ql-clipboard {\n left: -100000px;\n height: 1px;\n overflow-y: hidden;\n position: absolute;\n top: 50%;\n}\n.ql-clipboard p {\n margin: 0;\n padding: 0;\n}\n.ql-editor {\n box-sizing: border-box;\n counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8\n list-9;\n line-height: 1.42;\n height: 100%;\n outline: none;\n overflow-y: auto;\n padding: 12px 15px;\n tab-size: 4;\n -moz-tab-size: 4;\n text-align: left;\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n.ql-editor > * {\n cursor: text;\n}\n.ql-editor p,\n.ql-editor ol,\n.ql-editor pre,\n.ql-editor blockquote,\n.ql-editor h1,\n.ql-editor h2,\n.ql-editor h3,\n.ql-editor h4,\n.ql-editor h5,\n.ql-editor h6 {\n margin: 0;\n padding: 0;\n}\n@supports (counter-set: none) {\n .ql-editor p,\n .ql-editor h1,\n .ql-editor h2,\n .ql-editor h3,\n .ql-editor h4,\n .ql-editor h5,\n .ql-editor h6 {\n counter-set: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8\n list-9;\n }\n}\n@supports not (counter-set: none) {\n .ql-editor p,\n .ql-editor h1,\n .ql-editor h2,\n .ql-editor h3,\n .ql-editor h4,\n .ql-editor h5,\n .ql-editor h6 {\n counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7\n list-8 list-9;\n }\n}\n.ql-editor table {\n border-collapse: collapse;\n}\n.ql-editor td {\n border: 1px solid #000;\n padding: 2px 5px;\n}\n.ql-editor ol {\n padding-left: 1.5em;\n}\n.ql-editor li {\n list-style-type: none;\n padding-left: 1.5em;\n position: relative;\n}\n.ql-editor li > .ql-ui:before {\n display: inline-block;\n margin-left: -1.5em;\n margin-right: 0.3em;\n text-align: right;\n white-space: nowrap;\n width: 1.2em;\n}\n.ql-editor li[data-list=\"checked\"] > .ql-ui,\n.ql-editor li[data-list=\"unchecked\"] > .ql-ui {\n color: #777;\n}\n.ql-editor li[data-list=\"bullet\"] > .ql-ui:before {\n content: \"\\2022\";\n}\n.ql-editor li[data-list=\"checked\"] > .ql-ui:before {\n content: \"\\2611\";\n}\n.ql-editor li[data-list=\"unchecked\"] > .ql-ui:before {\n content: \"\\2610\";\n}\n@supports (counter-set: none) {\n .ql-editor li[data-list] {\n counter-set: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;\n }\n}\n@supports not (counter-set: none) {\n .ql-editor li[data-list] {\n counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8\n list-9;\n }\n}\n.ql-editor li[data-list=\"ordered\"] {\n counter-increment: list-0;\n}\n.ql-editor li[data-list=\"ordered\"] > .ql-ui:before {\n content: counter(list-0, decimal) \". \";\n}\n.ql-editor li[data-list=\"ordered\"].ql-indent-1 {\n counter-increment: list-1;\n}\n.ql-editor li[data-list=\"ordered\"].ql-indent-1 > .ql-ui:before {\n content: counter(list-1, lower-alpha) \". \";\n}\n@supports (counter-set: none) {\n .ql-editor li[data-list].ql-indent-1 {\n counter-set: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;\n }\n}\n@supports not (counter-set: none) {\n .ql-editor li[data-list].ql-indent-1 {\n counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;\n }\n}\n.ql-editor li[data-list=\"ordered\"].ql-indent-2 {\n counter-increment: list-2;\n}\n.ql-editor li[data-list=\"ordered\"].ql-indent-2 > .ql-ui:before {\n content: counter(list-2, lower-roman) \". \";\n}\n@supports (counter-set: none) {\n .ql-editor li[data-list].ql-indent-2 {\n counter-set: list-3 list-4 list-5 list-6 list-7 list-8 list-9;\n }\n}\n@supports not (counter-set: none) {\n .ql-editor li[data-list].ql-indent-2 {\n counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;\n }\n}\n.ql-editor li[data-list=\"ordered\"].ql-indent-3 {\n counter-increment: list-3;\n}\n.ql-editor li[data-list=\"ordered\"].ql-indent-3 > .ql-ui:before {\n content: counter(list-3, decimal) \". \";\n}\n@supports (counter-set: none) {\n .ql-editor li[data-list].ql-indent-3 {\n counter-set: list-4 list-5 list-6 list-7 list-8 list-9;\n }\n}\n@supports not (counter-set: none) {\n .ql-editor li[data-list].ql-indent-3 {\n counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;\n }\n}\n.ql-editor li[data-list=\"ordered\"].ql-indent-4 {\n counter-increment: list-4;\n}\n.ql-editor li[data-list=\"ordered\"].ql-indent-4 > .ql-ui:before {\n content: counter(list-4, lower-alpha) \". \";\n}\n@supports (counter-set: none) {\n .ql-editor li[data-list].ql-indent-4 {\n counter-set: list-5 list-6 list-7 list-8 list-9;\n }\n}\n@supports not (counter-set: none) {\n .ql-editor li[data-list].ql-indent-4 {\n counter-reset: list-5 list-6 list-7 list-8 list-9;\n }\n}\n.ql-editor li[data-list=\"ordered\"].ql-indent-5 {\n counter-increment: list-5;\n}\n.ql-editor li[data-list=\"ordered\"].ql-indent-5 > .ql-ui:before {\n content: counter(list-5, lower-roman) \". \";\n}\n@supports (counter-set: none) {\n .ql-editor li[data-list].ql-indent-5 {\n counter-set: list-6 list-7 list-8 list-9;\n }\n}\n@supports not (counter-set: none) {\n .ql-editor li[data-list].ql-indent-5 {\n counter-reset: list-6 list-7 list-8 list-9;\n }\n}\n.ql-editor li[data-list=\"ordered\"].ql-indent-6 {\n counter-increment: list-6;\n}\n.ql-editor li[data-list=\"ordered\"].ql-indent-6 > .ql-ui:before {\n content: counter(list-6, decimal) \". \";\n}\n@supports (counter-set: none) {\n .ql-editor li[data-list].ql-indent-6 {\n counter-set: list-7 list-8 list-9;\n }\n}\n@supports not (counter-set: none) {\n .ql-editor li[data-list].ql-indent-6 {\n counter-reset: list-7 list-8 list-9;\n }\n}\n.ql-editor li[data-list=\"ordered\"].ql-indent-7 {\n counter-increment: list-7;\n}\n.ql-editor li[data-list=\"ordered\"].ql-indent-7 > .ql-ui:before {\n content: counter(list-7, lower-alpha) \". \";\n}\n@supports (counter-set: none) {\n .ql-editor li[data-list].ql-indent-7 {\n counter-set: list-8 list-9;\n }\n}\n@supports not (counter-set: none) {\n .ql-editor li[data-list].ql-indent-7 {\n counter-reset: list-8 list-9;\n }\n}\n.ql-editor li[data-list=\"ordered\"].ql-indent-8 {\n counter-increment: list-8;\n}\n.ql-editor li[data-list=\"ordered\"].ql-indent-8 > .ql-ui:before {\n content: counter(list-8, lower-roman) \". \";\n}\n@supports (counter-set: none) {\n .ql-editor li[data-list].ql-indent-8 {\n counter-set: list-9;\n }\n}\n@supports not (counter-set: none) {\n .ql-editor li[data-list].ql-indent-8 {\n counter-reset: list-9;\n }\n}\n.ql-editor li[data-list=\"ordered\"].ql-indent-9 {\n counter-increment: list-9;\n}\n.ql-editor li[data-list=\"ordered\"].ql-indent-9 > .ql-ui:before {\n content: counter(list-9, decimal) \". \";\n}\n.ql-editor .ql-indent-1:not(.ql-direction-rtl) {\n padding-left: 3em;\n}\n.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {\n padding-left: 4.5em;\n}\n.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {\n padding-right: 3em;\n}\n.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {\n padding-right: 4.5em;\n}\n.ql-editor .ql-indent-2:not(.ql-direction-rtl) {\n padding-left: 6em;\n}\n.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {\n padding-left: 7.5em;\n}\n.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {\n padding-right: 6em;\n}\n.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {\n padding-right: 7.5em;\n}\n.ql-editor .ql-indent-3:not(.ql-direction-rtl) {\n padding-left: 9em;\n}\n.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {\n padding-left: 10.5em;\n}\n.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {\n padding-right: 9em;\n}\n.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {\n padding-right: 10.5em;\n}\n.ql-editor .ql-indent-4:not(.ql-direction-rtl) {\n padding-left: 12em;\n}\n.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {\n padding-left: 13.5em;\n}\n.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {\n padding-right: 12em;\n}\n.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {\n padding-right: 13.5em;\n}\n.ql-editor .ql-indent-5:not(.ql-direction-rtl) {\n padding-left: 15em;\n}\n.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {\n padding-left: 16.5em;\n}\n.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {\n padding-right: 15em;\n}\n.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {\n padding-right: 16.5em;\n}\n.ql-editor .ql-indent-6:not(.ql-direction-rtl) {\n padding-left: 18em;\n}\n.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {\n padding-left: 19.5em;\n}\n.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {\n padding-right: 18em;\n}\n.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {\n padding-right: 19.5em;\n}\n.ql-editor .ql-indent-7:not(.ql-direction-rtl) {\n padding-left: 21em;\n}\n.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {\n padding-left: 22.5em;\n}\n.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {\n padding-right: 21em;\n}\n.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {\n padding-right: 22.5em;\n}\n.ql-editor .ql-indent-8:not(.ql-direction-rtl) {\n padding-left: 24em;\n}\n.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {\n padding-left: 25.5em;\n}\n.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {\n padding-right: 24em;\n}\n.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {\n padding-right: 25.5em;\n}\n.ql-editor .ql-indent-9:not(.ql-direction-rtl) {\n padding-left: 27em;\n}\n.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {\n padding-left: 28.5em;\n}\n.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {\n padding-right: 27em;\n}\n.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {\n padding-right: 28.5em;\n}\n.ql-editor li.ql-direction-rtl {\n padding-right: 1.5em;\n}\n.ql-editor li.ql-direction-rtl > .ql-ui:before {\n margin-left: 0.3em;\n margin-right: -1.5em;\n text-align: left;\n}\n.ql-editor table {\n table-layout: fixed;\n width: 100%;\n}\n.ql-editor table td {\n outline: none;\n}\n.ql-editor .ql-code-block-container {\n font-family: monospace;\n}\n.ql-editor .ql-video {\n display: block;\n max-width: 100%;\n}\n.ql-editor .ql-video.ql-align-center {\n margin: 0 auto;\n}\n.ql-editor .ql-video.ql-align-right {\n margin: 0 0 0 auto;\n}\n.ql-editor .ql-bg-black {\n background-color: #000;\n}\n.ql-editor .ql-bg-red {\n background-color: #e60000;\n}\n.ql-editor .ql-bg-orange {\n background-color: #f90;\n}\n.ql-editor .ql-bg-yellow {\n background-color: #ff0;\n}\n.ql-editor .ql-bg-green {\n background-color: #008a00;\n}\n.ql-editor .ql-bg-blue {\n background-color: #06c;\n}\n.ql-editor .ql-bg-purple {\n background-color: #93f;\n}\n.ql-editor .ql-color-white {\n color: #fff;\n}\n.ql-editor .ql-color-red {\n color: #e60000;\n}\n.ql-editor .ql-color-orange {\n color: #f90;\n}\n.ql-editor .ql-color-yellow {\n color: #ff0;\n}\n.ql-editor .ql-color-green {\n color: #008a00;\n}\n.ql-editor .ql-color-blue {\n color: #06c;\n}\n.ql-editor .ql-color-purple {\n color: #93f;\n}\n.ql-editor .ql-font-serif {\n font-family: Georgia, Times New Roman, serif;\n}\n.ql-editor .ql-font-monospace {\n font-family: Monaco, Courier New, monospace;\n}\n.ql-editor .ql-size-small {\n font-size: 0.75em;\n}\n.ql-editor .ql-size-large {\n font-size: 1.5em;\n}\n.ql-editor .ql-size-huge {\n font-size: 2.5em;\n}\n.ql-editor .ql-direction-rtl {\n direction: rtl;\n text-align: inherit;\n}\n.ql-editor .ql-align-center {\n text-align: center;\n}\n.ql-editor .ql-align-justify {\n text-align: justify;\n}\n.ql-editor .ql-align-right {\n text-align: right;\n}\n.ql-editor .ql-ui {\n position: absolute;\n}\n.ql-editor.ql-blank::before {\n color: rgba(0, 0, 0, 0.6);\n content: attr(data-placeholder);\n font-style: italic;\n left: 15px;\n pointer-events: none;\n position: absolute;\n right: 15px;\n}\n.ql-snow.ql-toolbar:after,\n.ql-snow .ql-toolbar:after {\n clear: both;\n content: \"\";\n display: table;\n}\n.ql-snow.ql-toolbar button,\n.ql-snow .ql-toolbar button {\n background: none;\n border: none;\n cursor: pointer;\n display: inline-block;\n float: left;\n height: 24px;\n padding: 3px 5px;\n width: 28px;\n}\n.ql-snow.ql-toolbar button svg,\n.ql-snow .ql-toolbar button svg {\n float: left;\n height: 100%;\n}\n.ql-snow.ql-toolbar button:active:hover,\n.ql-snow .ql-toolbar button:active:hover {\n outline: none;\n}\n.ql-snow.ql-toolbar input.ql-image[type=\"file\"],\n.ql-snow .ql-toolbar input.ql-image[type=\"file\"] {\n display: none;\n}\n.ql-snow.ql-toolbar button:hover,\n.ql-snow .ql-toolbar button:hover,\n.ql-snow.ql-toolbar button:focus,\n.ql-snow .ql-toolbar button:focus,\n.ql-snow.ql-toolbar button.ql-active,\n.ql-snow .ql-toolbar button.ql-active,\n.ql-snow.ql-toolbar .ql-picker-label:hover,\n.ql-snow .ql-toolbar .ql-picker-label:hover,\n.ql-snow.ql-toolbar .ql-picker-label.ql-active,\n.ql-snow .ql-toolbar .ql-picker-label.ql-active,\n.ql-snow.ql-toolbar .ql-picker-item:hover,\n.ql-snow .ql-toolbar .ql-picker-item:hover,\n.ql-snow.ql-toolbar .ql-picker-item.ql-selected,\n.ql-snow .ql-toolbar .ql-picker-item.ql-selected {\n color: #06c;\n}\n.ql-snow.ql-toolbar button:hover .ql-fill,\n.ql-snow .ql-toolbar button:hover .ql-fill,\n.ql-snow.ql-toolbar button:focus .ql-fill,\n.ql-snow .ql-toolbar button:focus .ql-fill,\n.ql-snow.ql-toolbar button.ql-active .ql-fill,\n.ql-snow .ql-toolbar button.ql-active .ql-fill,\n.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,\n.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,\n.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,\n.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,\n.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,\n.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,\n.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,\n.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,\n.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,\n.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,\n.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,\n.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,\n.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,\n.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,\n.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,\n.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,\n.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,\n.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,\n.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,\n.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,\n.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,\n.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {\n fill: #06c;\n}\n.ql-snow.ql-toolbar button:hover .ql-stroke,\n.ql-snow .ql-toolbar button:hover .ql-stroke,\n.ql-snow.ql-toolbar button:focus .ql-stroke,\n.ql-snow .ql-toolbar button:focus .ql-stroke,\n.ql-snow.ql-toolbar button.ql-active .ql-stroke,\n.ql-snow .ql-toolbar button.ql-active .ql-stroke,\n.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,\n.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,\n.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,\n.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,\n.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,\n.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,\n.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,\n.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,\n.ql-snow.ql-toolbar button:hover .ql-stroke-miter,\n.ql-snow .ql-toolbar button:hover .ql-stroke-miter,\n.ql-snow.ql-toolbar button:focus .ql-stroke-miter,\n.ql-snow .ql-toolbar button:focus .ql-stroke-miter,\n.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,\n.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,\n.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,\n.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,\n.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,\n.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,\n.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,\n.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,\n.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,\n.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {\n stroke: #06c;\n}\n@media (pointer: coarse) {\n .ql-snow.ql-toolbar button:hover:not(.ql-active),\n .ql-snow .ql-toolbar button:hover:not(.ql-active) {\n color: #444;\n }\n .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,\n .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,\n .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,\n .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {\n fill: #444;\n }\n .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,\n .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,\n .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,\n .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {\n stroke: #444;\n }\n}\n.ql-snow {\n box-sizing: border-box;\n}\n.ql-snow * {\n box-sizing: border-box;\n}\n.ql-snow .ql-hidden {\n display: none;\n}\n.ql-snow .ql-out-bottom,\n.ql-snow .ql-out-top {\n visibility: hidden;\n}\n.ql-snow .ql-tooltip {\n position: absolute;\n transform: translateY(10px);\n}\n.ql-snow .ql-tooltip a {\n cursor: pointer;\n text-decoration: none;\n}\n.ql-snow .ql-tooltip.ql-flip {\n transform: translateY(-10px);\n}\n.ql-snow .ql-formats {\n display: inline-block;\n vertical-align: middle;\n}\n.ql-snow .ql-formats:after {\n clear: both;\n content: \"\";\n display: table;\n}\n.ql-snow .ql-stroke {\n fill: none;\n stroke: #444;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-width: 2;\n}\n.ql-snow .ql-stroke-miter {\n fill: none;\n stroke: #444;\n stroke-miterlimit: 10;\n stroke-width: 2;\n}\n.ql-snow .ql-fill,\n.ql-snow .ql-stroke.ql-fill {\n fill: #444;\n}\n.ql-snow .ql-empty {\n fill: none;\n}\n.ql-snow .ql-even {\n fill-rule: evenodd;\n}\n.ql-snow .ql-thin,\n.ql-snow .ql-stroke.ql-thin {\n stroke-width: 1;\n}\n.ql-snow .ql-transparent {\n opacity: 0.4;\n}\n.ql-snow .ql-direction svg:last-child {\n display: none;\n}\n.ql-snow .ql-direction.ql-active svg:last-child {\n display: inline;\n}\n.ql-snow .ql-direction.ql-active svg:first-child {\n display: none;\n}\n.ql-snow .ql-editor h1 {\n font-size: 2em;\n}\n.ql-snow .ql-editor h2 {\n font-size: 1.5em;\n}\n.ql-snow .ql-editor h3 {\n font-size: 1.17em;\n}\n.ql-snow .ql-editor h4 {\n font-size: 1em;\n}\n.ql-snow .ql-editor h5 {\n font-size: 0.83em;\n}\n.ql-snow .ql-editor h6 {\n font-size: 0.67em;\n}\n.ql-snow .ql-editor a {\n text-decoration: underline;\n}\n.ql-snow .ql-editor blockquote {\n border-left: 4px solid #ccc;\n margin-bottom: 5px;\n margin-top: 5px;\n padding-left: 16px;\n}\n.ql-snow .ql-editor code,\n.ql-snow .ql-editor .ql-code-block-container {\n background-color: #f0f0f0;\n border-radius: 3px;\n}\n.ql-snow .ql-editor .ql-code-block-container {\n margin-bottom: 5px;\n margin-top: 5px;\n padding: 5px 10px;\n}\n.ql-snow .ql-editor code {\n font-size: 85%;\n padding: 2px 4px;\n}\n.ql-snow .ql-editor .ql-code-block-container {\n background-color: #23241f;\n color: #f8f8f2;\n overflow: visible;\n}\n.ql-snow .ql-editor img {\n max-width: 100%;\n}\n.ql-snow .ql-picker {\n color: #444;\n display: inline-block;\n float: left;\n font-size: 14px;\n font-weight: 500;\n height: 24px;\n position: relative;\n vertical-align: middle;\n}\n.ql-snow .ql-picker-label {\n cursor: pointer;\n display: inline-block;\n height: 100%;\n padding-left: 8px;\n padding-right: 2px;\n position: relative;\n width: 100%;\n}\n.ql-snow .ql-picker-label::before {\n display: inline-block;\n line-height: 22px;\n}\n.ql-snow .ql-picker-options {\n background-color: #fff;\n display: none;\n min-width: 100%;\n padding: 4px 8px;\n position: absolute;\n white-space: nowrap;\n}\n.ql-snow .ql-picker-options .ql-picker-item {\n cursor: pointer;\n display: block;\n padding-bottom: 5px;\n padding-top: 5px;\n}\n.ql-snow .ql-picker.ql-expanded .ql-picker-label {\n color: #ccc;\n z-index: 2;\n}\n.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {\n fill: #ccc;\n}\n.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {\n stroke: #ccc;\n}\n.ql-snow .ql-picker.ql-expanded .ql-picker-options {\n display: block;\n margin-top: -1px;\n top: 100%;\n z-index: 1;\n}\n.ql-snow .ql-color-picker,\n.ql-snow .ql-icon-picker {\n width: 28px;\n}\n.ql-snow .ql-color-picker .ql-picker-label,\n.ql-snow .ql-icon-picker .ql-picker-label {\n padding: 2px 4px;\n}\n.ql-snow .ql-color-picker .ql-picker-label svg,\n.ql-snow .ql-icon-picker .ql-picker-label svg {\n right: 4px;\n}\n.ql-snow .ql-icon-picker .ql-picker-options {\n padding: 4px 0;\n}\n.ql-snow .ql-icon-picker .ql-picker-item {\n height: 24px;\n width: 24px;\n padding: 2px 4px;\n}\n.ql-snow .ql-color-picker .ql-picker-options {\n padding: 3px 5px;\n width: 152px;\n}\n.ql-snow .ql-color-picker .ql-picker-item {\n border: 1px solid transparent;\n float: left;\n height: 16px;\n margin: 2px;\n padding: 0;\n width: 16px;\n}\n.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {\n position: absolute;\n margin-top: -9px;\n right: 0;\n top: 50%;\n width: 18px;\n}\n.ql-snow\n .ql-picker.ql-header\n .ql-picker-label[data-label]:not([data-label=\"\"])::before,\n.ql-snow\n .ql-picker.ql-font\n .ql-picker-label[data-label]:not([data-label=\"\"])::before,\n.ql-snow\n .ql-picker.ql-size\n .ql-picker-label[data-label]:not([data-label=\"\"])::before,\n.ql-snow\n .ql-picker.ql-header\n .ql-picker-item[data-label]:not([data-label=\"\"])::before,\n.ql-snow\n .ql-picker.ql-font\n .ql-picker-item[data-label]:not([data-label=\"\"])::before,\n.ql-snow\n .ql-picker.ql-size\n .ql-picker-item[data-label]:not([data-label=\"\"])::before {\n content: attr(data-label);\n}\n.ql-snow .ql-picker.ql-header {\n width: 98px;\n}\n.ql-snow .ql-picker.ql-header .ql-picker-label::before,\n.ql-snow .ql-picker.ql-header .ql-picker-item::before {\n content: \"Normal\";\n}\n.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]::before,\n.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]::before {\n content: \"Heading 1\";\n}\n.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]::before,\n.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]::before {\n content: \"Heading 2\";\n}\n.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]::before,\n.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]::before {\n content: \"Heading 3\";\n}\n.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]::before,\n.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]::before {\n content: \"Heading 4\";\n}\n.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]::before,\n.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]::before {\n content: \"Heading 5\";\n}\n.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]::before,\n.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]::before {\n content: \"Heading 6\";\n}\n.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]::before {\n font-size: 2em;\n}\n.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]::before {\n font-size: 1.5em;\n}\n.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]::before {\n font-size: 1.17em;\n}\n.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]::before {\n font-size: 1em;\n}\n.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]::before {\n font-size: 0.83em;\n}\n.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]::before {\n font-size: 0.67em;\n}\n.ql-snow .ql-picker.ql-font {\n width: 108px;\n}\n.ql-snow .ql-picker.ql-font .ql-picker-label::before,\n.ql-snow .ql-picker.ql-font .ql-picker-item::before {\n content: \"Sans Serif\";\n}\n.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=\"serif\"]::before,\n.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=\"serif\"]::before {\n content: \"Serif\";\n}\n.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=\"monospace\"]::before,\n.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=\"monospace\"]::before {\n content: \"Monospace\";\n}\n.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=\"serif\"]::before {\n font-family: Georgia, Times New Roman, serif;\n}\n.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=\"monospace\"]::before {\n font-family: Monaco, Courier New, monospace;\n}\n.ql-snow .ql-picker.ql-size {\n width: 98px;\n}\n.ql-snow .ql-picker.ql-size .ql-picker-label::before,\n.ql-snow .ql-picker.ql-size .ql-picker-item::before {\n content: \"Normal\";\n}\n.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=\"small\"]::before,\n.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=\"small\"]::before {\n content: \"Small\";\n}\n.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=\"large\"]::before,\n.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=\"large\"]::before {\n content: \"Large\";\n}\n.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=\"huge\"]::before,\n.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=\"huge\"]::before {\n content: \"Huge\";\n}\n.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=\"small\"]::before {\n font-size: 10px;\n}\n.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=\"large\"]::before {\n font-size: 18px;\n}\n.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=\"huge\"]::before {\n font-size: 32px;\n}\n.ql-snow .ql-color-picker.ql-background .ql-picker-item {\n background-color: #fff;\n}\n.ql-snow .ql-color-picker.ql-color .ql-picker-item {\n background-color: #000;\n}\n.ql-code-block-container {\n position: relative;\n}\n.ql-code-block-container .ql-ui {\n right: 5px;\n top: 5px;\n}\n.ql-toolbar.ql-snow {\n border: 1px solid #ccc;\n box-sizing: border-box;\n font-family: \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif;\n padding: 8px;\n}\n.ql-toolbar.ql-snow .ql-formats {\n margin-right: 15px;\n}\n.ql-toolbar.ql-snow .ql-picker-label {\n border: 1px solid transparent;\n}\n.ql-toolbar.ql-snow .ql-picker-options {\n border: 1px solid transparent;\n box-shadow: rgba(0, 0, 0, 0.2) 0 2px 8px;\n}\n.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {\n border-color: #ccc;\n}\n.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {\n border-color: #ccc;\n}\n.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,\n.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {\n border-color: #000;\n}\n.ql-toolbar.ql-snow + .ql-container.ql-snow {\n border-top: 0;\n}\n.ql-snow .ql-tooltip {\n background-color: #fff;\n border: 1px solid #ccc;\n box-shadow: 0 0 5px #ddd;\n color: #444;\n padding: 5px 12px;\n white-space: nowrap;\n}\n.ql-snow .ql-tooltip::before {\n content: \"Visit URL:\";\n line-height: 26px;\n margin-right: 8px;\n}\n.ql-snow .ql-tooltip input[type=\"text\"] {\n display: none;\n border: 1px solid #ccc;\n font-size: 13px;\n height: 26px;\n margin: 0;\n padding: 3px 5px;\n width: 170px;\n}\n.ql-snow .ql-tooltip a.ql-preview {\n display: inline-block;\n max-width: 200px;\n overflow-x: hidden;\n text-overflow: ellipsis;\n vertical-align: top;\n}\n.ql-snow .ql-tooltip a.ql-action::after {\n border-right: 1px solid #ccc;\n content: \"Edit\";\n margin-left: 16px;\n padding-right: 8px;\n}\n.ql-snow .ql-tooltip a.ql-remove::before {\n content: \"Remove\";\n margin-left: 8px;\n}\n.ql-snow .ql-tooltip a {\n line-height: 26px;\n}\n.ql-snow .ql-tooltip.ql-editing a.ql-preview,\n.ql-snow .ql-tooltip.ql-editing a.ql-remove {\n display: none;\n}\n.ql-snow .ql-tooltip.ql-editing input[type=\"text\"] {\n display: inline-block;\n}\n.ql-snow .ql-tooltip.ql-editing a.ql-action::after {\n border-right: 0;\n content: \"Save\";\n padding-right: 0;\n}\n.ql-snow .ql-tooltip[data-mode=\"link\"]::before {\n content: \"Enter link:\";\n}\n.ql-snow .ql-tooltip[data-mode=\"formula\"]::before {\n content: \"Enter formula:\";\n}\n.ql-snow .ql-tooltip[data-mode=\"video\"]::before {\n content: \"Enter video:\";\n}\n.ql-snow a {\n color: #06c;\n}\n.ql-container.ql-snow {\n border: 1px solid #ccc;\n}\n";
var EditorBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Editor',
id: null,
value: null,
style: null,
className: null,
placeholder: null,
readOnly: false,
modules: null,
formats: null,
theme: 'snow',
showHeader: true,
headerTemplate: null,
onTextChange: null,
onSelectionChange: null,
onLoad: null,
maxLength: null,
children: undefined
},
css: {
classes: classes$O,
styles: styles$E
}
});
function ownKeys$15(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$15(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$15(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$15(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var QuillJS = function () {
try {
return Quill;
} catch (_unused) {
return null;
}
}();
var Editor = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = EditorBase.getProps(inProps, context);
var _EditorBase$setMetaDa = EditorBase.setMetaData({
props: props
}),
ptm = _EditorBase$setMetaDa.ptm,
cx = _EditorBase$setMetaDa.cx,
isUnstyled = _EditorBase$setMetaDa.isUnstyled;
useHandleStyle(EditorBase.css.styles, isUnstyled, {
name: 'editor'
});
var elementRef = React.useRef(null);
var contentRef = React.useRef(null);
var toolbarRef = React.useRef(null);
var quill = React.useRef(null);
var isQuillLoaded = React.useRef(false);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
quillCreated = _React$useState2[0],
setQuillCreated = _React$useState2[1];
useMountEffect(function () {
if (!isQuillLoaded.current) {
var configuration = {
modules: _objectSpread$15({
toolbar: props.showHeader ? toolbarRef.current : false
}, props.modules),
placeholder: props.placeholder,
readOnly: props.readOnly,
theme: props.theme,
formats: props.formats
};
if (QuillJS) {
// GitHub #3097 loaded by script only
initQuill(new Quill(contentRef.current, configuration));
} else {
import('quill').then(function (module) {
if (module && DomHandler.isExist(contentRef.current)) {
var quillInstance;
if (module["default"]) {
// webpack
quillInstance = new module["default"](contentRef.current, configuration);
} else {
// parceljs
quillInstance = new module(contentRef.current, configuration);
}
initQuill(quillInstance);
}
});
}
isQuillLoaded.current = true;
}
});
var onTextChange = function onTextChange(delta, oldContents, source) {
var firstChild = contentRef.current.children[0];
var html = firstChild ? firstChild.innerHTML : null;
var text = quill.current.getText();
if (html === '
') {
html = null;
}
// GitHub #2271 prevent infinite loop on clipboard paste of HTML
if (source === 'api') {
var htmlValue = contentRef.current.children[0];
var editorValue = document.createElement('div');
editorValue.innerHTML = props.value || '';
// this is necessary because Quill rearranged style elements
if (DomHandler.isEqualElement(htmlValue, editorValue)) {
return;
}
}
if (props.maxLength) {
var length = quill.current.getLength();
if (length > props.maxLength) {
quill.current.deleteText(props.maxLength, length);
}
}
if (props.onTextChange) {
props.onTextChange({
htmlValue: html,
textValue: text,
delta: delta,
source: source
});
}
};
var onSelectionChange = function onSelectionChange(range, oldRange, source) {
if (props.onSelectionChange) {
props.onSelectionChange({
range: range,
oldRange: oldRange,
source: source
});
}
};
var initValue = useRef(props.value);
initValue.current = props.value;
var initQuill = function initQuill(quillInstance) {
quill.current = quillInstance;
if (initValue.current) {
quillInstance.setContents(quillInstance.clipboard.convert({
html: initValue.current,
text: ''
}));
}
setQuillCreated(true);
};
useUpdateEffect(function () {
if (quillCreated) {
quill.current.on('text-change', onTextChange);
quill.current.on('selection-change', onSelectionChange);
return function () {
quill.current.off('text-change', onTextChange);
quill.current.off('selection-change', onSelectionChange);
};
}
});
useUpdateEffect(function () {
if (quillCreated) {
if (quill.current && quill.current.getModule('toolbar')) {
props.onLoad && props.onLoad(quill.current);
}
}
}, [quillCreated]);
useUpdateEffect(function () {
if (quill.current && !quill.current.hasFocus()) {
if (props.value) {
quill.current.setContents(quill.current.clipboard.convert({
html: props.value,
text: ''
}));
} else {
quill.current.setText('');
}
}
}, [props.value]);
React.useImperativeHandle(ref, function () {
return {
props: props,
getQuill: function getQuill() {
return quill.current;
},
getElement: function getElement() {
return elementRef.current;
},
getContent: function getContent() {
return contentRef.current;
},
getToolbar: function getToolbar() {
return toolbarRef.current;
}
};
});
var createToolbarHeader = function createToolbarHeader() {
var toolbarProps = mergeProps({
ref: toolbarRef,
className: cx('toolbar')
}, ptm('toolbar'));
if (props.showHeader === false) {
return null;
} else if (props.headerTemplate) {
return /*#__PURE__*/React.createElement("div", toolbarProps, props.headerTemplate);
}
var getMergeProps = function getMergeProps(params, key) {
return mergeProps(params && _objectSpread$15({}, params), ptm(key));
};
var formatsProps = mergeProps({
className: 'ql-formats'
}, ptm('formats'));
return /*#__PURE__*/React.createElement("div", toolbarProps, /*#__PURE__*/React.createElement("span", formatsProps, /*#__PURE__*/React.createElement("select", getMergeProps({
className: 'ql-header',
defaultValue: '0'
}, 'header'), /*#__PURE__*/React.createElement("option", getMergeProps({
value: '1'
}, 'option'), "Heading"), /*#__PURE__*/React.createElement("option", getMergeProps({
value: '2'
}, 'option'), "Subheading"), /*#__PURE__*/React.createElement("option", getMergeProps({
value: '0'
}, 'option'), "Normal")), /*#__PURE__*/React.createElement("select", getMergeProps({
className: 'ql-font'
}, 'font'), /*#__PURE__*/React.createElement("option", getMergeProps(undefined, 'option')), /*#__PURE__*/React.createElement("option", getMergeProps({
value: 'serif'
}, 'option')), /*#__PURE__*/React.createElement("option", getMergeProps({
value: 'monospace'
}, 'option')))), /*#__PURE__*/React.createElement("span", formatsProps, /*#__PURE__*/React.createElement("button", getMergeProps({
type: 'button',
className: 'ql-bold',
'aria-label': 'Bold'
}, 'bold')), /*#__PURE__*/React.createElement("button", getMergeProps({
type: 'button',
className: 'ql-italic',
'aria-label': 'Italic'
}, 'italic')), /*#__PURE__*/React.createElement("button", getMergeProps({
type: 'button',
className: 'ql-underline',
'aria-label': 'Underline'
}, 'underline'))), /*#__PURE__*/React.createElement("span", formatsProps, /*#__PURE__*/React.createElement("select", getMergeProps({
className: 'ql-color'
}, 'color')), /*#__PURE__*/React.createElement("select", getMergeProps({
className: 'ql-background'
}, 'background'))), /*#__PURE__*/React.createElement("span", formatsProps, /*#__PURE__*/React.createElement("button", getMergeProps({
type: 'button',
className: 'ql-list',
value: 'ordered',
'aria-label': 'Ordered List'
}, 'list')), /*#__PURE__*/React.createElement("button", getMergeProps({
type: 'button',
className: 'ql-list',
value: 'bullet',
'aria-label': 'Unordered List'
}, 'list')), /*#__PURE__*/React.createElement("select", getMergeProps({
className: 'ql-align'
}, 'select'), /*#__PURE__*/React.createElement("option", getMergeProps({
defaultValue: true
}, 'option')), /*#__PURE__*/React.createElement("option", getMergeProps({
value: 'center'
}, 'option')), /*#__PURE__*/React.createElement("option", getMergeProps({
value: 'right'
}, 'option')), /*#__PURE__*/React.createElement("option", getMergeProps({
value: 'justify'
}, 'option')))), /*#__PURE__*/React.createElement("span", formatsProps, /*#__PURE__*/React.createElement("button", getMergeProps({
type: 'button',
className: 'ql-link',
'aria-label': 'Insert Link'
}, 'link')), /*#__PURE__*/React.createElement("button", getMergeProps({
type: 'button',
className: 'ql-image',
'aria-label': 'Insert Image'
}, 'image')), /*#__PURE__*/React.createElement("button", getMergeProps({
type: 'button',
className: 'ql-code-block',
'aria-label': 'Insert Code Block'
}, 'codeBlock'))), /*#__PURE__*/React.createElement("span", formatsProps, /*#__PURE__*/React.createElement("button", getMergeProps({
type: 'button',
className: 'ql-clean',
'aria-label': 'Remove Styles'
}, 'clean'))));
};
var header = createToolbarHeader();
var contentProps = mergeProps({
ref: contentRef,
className: cx('content'),
style: props.style
}, ptm('content'));
var content = /*#__PURE__*/React.createElement("div", contentProps);
var rootProps = mergeProps({
className: classNames(props.className, cx('root'))
}, EditorBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
ref: elementRef
}, rootProps), header, content);
}));
Editor.displayName = 'Editor';
var MinusIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
d: "M13.2222 7.77778H0.777778C0.571498 7.77778 0.373667 7.69584 0.227806 7.54998C0.0819442 7.40412 0 7.20629 0 7.00001C0 6.79373 0.0819442 6.5959 0.227806 6.45003C0.373667 6.30417 0.571498 6.22223 0.777778 6.22223H13.2222C13.4285 6.22223 13.6263 6.30417 13.7722 6.45003C13.9181 6.5959 14 6.79373 14 7.00001C14 7.20629 13.9181 7.40412 13.7722 7.54998C13.6263 7.69584 13.4285 7.77778 13.2222 7.77778Z",
fill: "currentColor"
}));
}));
MinusIcon.displayName = 'MinusIcon';
var FieldsetBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Fieldset',
id: null,
legend: null,
className: null,
style: null,
toggleable: null,
collapsed: null,
collapseIcon: null,
transitionOptions: null,
expandIcon: null,
onExpand: null,
onCollapse: null,
onToggle: null,
onClick: null,
children: undefined
},
css: {
classes: {
root: function root(_ref) {
var props = _ref.props;
return classNames('p-fieldset p-component', {
'p-fieldset-toggleable': props.toggleable
});
},
toggleableContent: 'p-toggleable-content',
togglericon: 'p-fieldset-toggler',
legendTitle: 'p-fieldset-legend-text',
legend: 'p-fieldset-legend p-unselectable-text',
content: 'p-fieldset-content',
transition: 'p-toggleable-content'
},
styles: "\n @layer primereact {\n .p-fieldset-legend > a,\n .p-fieldset-legend > span {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .p-fieldset-toggleable .p-fieldset-legend a {\n cursor: pointer;\n user-select: none;\n overflow: hidden;\n position: relative;\n text-decoration: none;\n }\n \n .p-fieldset-legend-text {\n line-height: 1;\n }\n }\n "
}
});
var Fieldset = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = FieldsetBase.getProps(inProps, context);
var _React$useState = React.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var _React$useState3 = React.useState(props.collapsed),
_React$useState4 = _slicedToArray(_React$useState3, 2),
collapsedState = _React$useState4[0],
setCollapsedState = _React$useState4[1];
var collapsed = props.toggleable ? props.onToggle ? props.collapsed : collapsedState : false;
var elementRef = React.useRef(null);
var contentRef = React.useRef(null);
var headerId = idState + '_header';
var contentId = idState + '_content';
var _FieldsetBase$setMeta = FieldsetBase.setMetaData({
props: props,
state: {
id: idState,
collapsed: collapsed
}
}),
ptm = _FieldsetBase$setMeta.ptm,
cx = _FieldsetBase$setMeta.cx,
isUnstyled = _FieldsetBase$setMeta.isUnstyled;
useHandleStyle(FieldsetBase.css.styles, isUnstyled, {
name: 'fieldset'
});
var toggle = function toggle(event) {
if (props.toggleable) {
collapsed ? expand(event) : collapse(event);
if (props.onToggle) {
props.onToggle({
originalEvent: event,
value: !collapsed
});
}
}
event.preventDefault();
};
var expand = function expand(event) {
if (!props.onToggle) {
setCollapsedState(false);
}
props.onExpand && props.onExpand(event);
};
var collapse = function collapse(event) {
if (!props.onToggle) {
setCollapsedState(true);
}
props.onCollapse && props.onCollapse(event);
};
useMountEffect(function () {
if (!props.id) {
setIdState(UniqueComponentId());
}
});
var onKeyDown = function onKeyDown(event) {
if (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') {
toggle(event);
event.preventDefault();
}
};
var createContent = function createContent() {
var contentProps = mergeProps({
className: cx('content')
}, ptm('content'));
var toggleableProps = mergeProps({
ref: contentRef,
id: contentId,
role: 'region',
'aria-labelledby': headerId,
className: cx('toggleableContent')
}, ptm('toggleableContent'));
var transitionProps = mergeProps({
classNames: cx('transition'),
timeout: {
enter: 1000,
exit: 450
},
"in": !collapsed,
unmountOnExit: true,
options: props.transitionOptions
}, ptm('transition'));
return /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: contentRef
}, transitionProps), /*#__PURE__*/React.createElement("div", toggleableProps, /*#__PURE__*/React.createElement("div", contentProps, props.children)));
};
var createToggleIcon = function createToggleIcon() {
if (props.toggleable) {
var togglerIconProps = mergeProps({
className: cx('togglericon')
}, ptm('togglericon'));
var icon = collapsed ? props.expandIcon || /*#__PURE__*/React.createElement(PlusIcon, togglerIconProps) : props.collapseIcon || /*#__PURE__*/React.createElement(MinusIcon, togglerIconProps);
var toggleIcon = IconUtils.getJSXIcon(icon, togglerIconProps, {
props: props
});
return toggleIcon;
}
return null;
};
var createLegendContent = function createLegendContent() {
var legendTextProps = mergeProps({
className: cx('legendTitle')
}, ptm('legendTitle'));
var togglerProps = mergeProps({
id: headerId,
role: 'button',
'aria-expanded': !collapsed,
'aria-controls': contentId,
onKeyDown: onKeyDown,
onClick: toggle,
'aria-label': props.legend,
tabIndex: 0
}, ptm('toggler'));
if (props.toggleable) {
var toggleIcon = createToggleIcon();
return /*#__PURE__*/React.createElement("a", togglerProps, toggleIcon, /*#__PURE__*/React.createElement("span", legendTextProps, props.legend), /*#__PURE__*/React.createElement(Ripple, null));
}
return /*#__PURE__*/React.createElement("span", _extends({}, legendTextProps, {
id: headerId
}), props.legend);
};
var createLegend = function createLegend() {
var legendProps = mergeProps({
className: cx('legend')
}, ptm('legend'));
if (props.legend != null || props.toggleable) {
var legendContent = createLegendContent();
return /*#__PURE__*/React.createElement("legend", legendProps, legendContent);
}
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
},
getContent: function getContent() {
return contentRef.current;
}
};
});
var rootProps = mergeProps({
id: idState,
ref: elementRef,
style: props.style,
className: classNames(props.className, cx('root')),
onClick: props.onClick
}, FieldsetBase.getOtherProps(props), ptm('root'));
var legend = createLegend();
var content = createContent();
return /*#__PURE__*/React.createElement("fieldset", rootProps, legend, content);
});
Fieldset.displayName = 'Fieldset';
function _readOnlyError(r) {
throw new TypeError('"' + r + '" is read-only');
}
var UploadIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M6.58942 9.82197C6.70165 9.93405 6.85328 9.99793 7.012 10C7.17071 9.99793 7.32234 9.93405 7.43458 9.82197C7.54681 9.7099 7.61079 9.55849 7.61286 9.4V2.04798L9.79204 4.22402C9.84752 4.28011 9.91365 4.32457 9.98657 4.35479C10.0595 4.38502 10.1377 4.40039 10.2167 4.40002C10.2956 4.40039 10.3738 4.38502 10.4467 4.35479C10.5197 4.32457 10.5858 4.28011 10.6413 4.22402C10.7538 4.11152 10.817 3.95902 10.817 3.80002C10.817 3.64102 10.7538 3.48852 10.6413 3.37602L7.45127 0.190618C7.44656 0.185584 7.44176 0.180622 7.43687 0.175736C7.32419 0.063214 7.17136 0 7.012 0C6.85264 0 6.69981 0.063214 6.58712 0.175736C6.58181 0.181045 6.5766 0.186443 6.5715 0.191927L3.38282 3.37602C3.27669 3.48976 3.2189 3.6402 3.22165 3.79564C3.2244 3.95108 3.28746 4.09939 3.39755 4.20932C3.50764 4.31925 3.65616 4.38222 3.81182 4.38496C3.96749 4.3877 4.11814 4.33001 4.23204 4.22402L6.41113 2.04807V9.4C6.41321 9.55849 6.47718 9.7099 6.58942 9.82197ZM11.9952 14H2.02883C1.751 13.9887 1.47813 13.9228 1.22584 13.8061C0.973545 13.6894 0.746779 13.5241 0.558517 13.3197C0.370254 13.1154 0.22419 12.876 0.128681 12.6152C0.0331723 12.3545 -0.00990605 12.0775 0.0019109 11.8V9.40005C0.0019109 9.24092 0.065216 9.08831 0.1779 8.97579C0.290584 8.86326 0.443416 8.80005 0.602775 8.80005C0.762134 8.80005 0.914966 8.86326 1.02765 8.97579C1.14033 9.08831 1.20364 9.24092 1.20364 9.40005V11.8C1.18295 12.0376 1.25463 12.274 1.40379 12.4602C1.55296 12.6463 1.76817 12.7681 2.00479 12.8H11.9952C12.2318 12.7681 12.447 12.6463 12.5962 12.4602C12.7453 12.274 12.817 12.0376 12.7963 11.8V9.40005C12.7963 9.24092 12.8596 9.08831 12.9723 8.97579C13.085 8.86326 13.2378 8.80005 13.3972 8.80005C13.5565 8.80005 13.7094 8.86326 13.8221 8.97579C13.9347 9.08831 13.998 9.24092 13.998 9.40005V11.8C14.022 12.3563 13.8251 12.8996 13.45 13.3116C13.0749 13.7236 12.552 13.971 11.9952 14Z",
fill: "currentColor"
}));
}));
UploadIcon.displayName = 'UploadIcon';
var styles$D = "\n@layer primereact {\n .p-message-wrapper {\n display: flex;\n align-items: center;\n }\n\n .p-message-icon {\n flex-shrink: 0;\n }\n \n .p-message-close {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .p-message-close.p-link {\n margin-left: auto;\n overflow: hidden;\n position: relative;\n }\n \n .p-message-enter {\n opacity: 0;\n }\n \n .p-message-enter-active {\n opacity: 1;\n transition: opacity .3s;\n }\n \n .p-message-exit {\n opacity: 1;\n max-height: 1000px;\n }\n \n .p-message-exit-active {\n opacity: 0;\n max-height: 0;\n margin: 0;\n overflow: hidden;\n transition: max-height .3s cubic-bezier(0, 1, 0, 1), opacity .3s, margin .3s;\n }\n \n .p-message-exit-active .p-message-close {\n display: none;\n }\n}\n";
var classes$N = {
uimessage: {
root: function root(_ref) {
var severity = _ref.severity;
return classNames('p-message p-component', _defineProperty({}, "p-message-".concat(severity), severity));
},
wrapper: 'p-message-wrapper',
detail: 'p-message-detail',
summary: 'p-message-summary',
icon: 'p-message-icon',
buttonicon: 'p-message-close-icon',
button: 'p-message-close p-link',
transition: 'p-message'
}
};
var MessagesBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Messages',
__parentMetadata: null,
id: null,
className: null,
style: null,
transitionOptions: null,
onRemove: null,
onClick: null,
children: undefined
},
css: {
classes: classes$N,
styles: styles$D
}
});
var ExclamationTriangleIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
d: "M13.4018 13.1893H0.598161C0.49329 13.189 0.390283 13.1615 0.299143 13.1097C0.208003 13.0578 0.131826 12.9832 0.0780112 12.8932C0.0268539 12.8015 0 12.6982 0 12.5931C0 12.4881 0.0268539 12.3848 0.0780112 12.293L6.47985 1.08982C6.53679 1.00399 6.61408 0.933574 6.70484 0.884867C6.7956 0.836159 6.897 0.810669 7 0.810669C7.103 0.810669 7.2044 0.836159 7.29516 0.884867C7.38592 0.933574 7.46321 1.00399 7.52015 1.08982L13.922 12.293C13.9731 12.3848 14 12.4881 14 12.5931C14 12.6982 13.9731 12.8015 13.922 12.8932C13.8682 12.9832 13.792 13.0578 13.7009 13.1097C13.6097 13.1615 13.5067 13.189 13.4018 13.1893ZM1.63046 11.989H12.3695L7 2.59425L1.63046 11.989Z",
fill: "currentColor"
}), /*#__PURE__*/React.createElement("path", {
d: "M6.99996 8.78801C6.84143 8.78594 6.68997 8.72204 6.57787 8.60993C6.46576 8.49782 6.40186 8.34637 6.39979 8.18784V5.38703C6.39979 5.22786 6.46302 5.0752 6.57557 4.96265C6.68813 4.85009 6.84078 4.78686 6.99996 4.78686C7.15914 4.78686 7.31179 4.85009 7.42435 4.96265C7.5369 5.0752 7.60013 5.22786 7.60013 5.38703V8.18784C7.59806 8.34637 7.53416 8.49782 7.42205 8.60993C7.30995 8.72204 7.15849 8.78594 6.99996 8.78801Z",
fill: "currentColor"
}), /*#__PURE__*/React.createElement("path", {
d: "M6.99996 11.1887C6.84143 11.1866 6.68997 11.1227 6.57787 11.0106C6.46576 10.8985 6.40186 10.7471 6.39979 10.5885V10.1884C6.39979 10.0292 6.46302 9.87658 6.57557 9.76403C6.68813 9.65147 6.84078 9.58824 6.99996 9.58824C7.15914 9.58824 7.31179 9.65147 7.42435 9.76403C7.5369 9.87658 7.60013 10.0292 7.60013 10.1884V10.5885C7.59806 10.7471 7.53416 10.8985 7.42205 11.0106C7.30995 11.1227 7.15849 11.1866 6.99996 11.1887Z",
fill: "currentColor"
}));
}));
ExclamationTriangleIcon.displayName = 'ExclamationTriangleIcon';
var InfoCircleIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M3.11101 12.8203C4.26215 13.5895 5.61553 14 7 14C8.85652 14 10.637 13.2625 11.9497 11.9497C13.2625 10.637 14 8.85652 14 7C14 5.61553 13.5895 4.26215 12.8203 3.11101C12.0511 1.95987 10.9579 1.06266 9.67879 0.532846C8.3997 0.00303296 6.99224 -0.13559 5.63437 0.134506C4.2765 0.404603 3.02922 1.07129 2.05026 2.05026C1.07129 3.02922 0.404603 4.2765 0.134506 5.63437C-0.13559 6.99224 0.00303296 8.3997 0.532846 9.67879C1.06266 10.9579 1.95987 12.0511 3.11101 12.8203ZM3.75918 2.14976C4.71846 1.50879 5.84628 1.16667 7 1.16667C8.5471 1.16667 10.0308 1.78125 11.1248 2.87521C12.2188 3.96918 12.8333 5.45291 12.8333 7C12.8333 8.15373 12.4912 9.28154 11.8502 10.2408C11.2093 11.2001 10.2982 11.9478 9.23232 12.3893C8.16642 12.8308 6.99353 12.9463 5.86198 12.7212C4.73042 12.4962 3.69102 11.9406 2.87521 11.1248C2.05941 10.309 1.50384 9.26958 1.27876 8.13803C1.05367 7.00647 1.16919 5.83358 1.61071 4.76768C2.05222 3.70178 2.79989 2.79074 3.75918 2.14976ZM7.00002 4.8611C6.84594 4.85908 6.69873 4.79698 6.58977 4.68801C6.48081 4.57905 6.4187 4.43185 6.41669 4.27776V3.88888C6.41669 3.73417 6.47815 3.58579 6.58754 3.4764C6.69694 3.367 6.84531 3.30554 7.00002 3.30554C7.15473 3.30554 7.3031 3.367 7.4125 3.4764C7.52189 3.58579 7.58335 3.73417 7.58335 3.88888V4.27776C7.58134 4.43185 7.51923 4.57905 7.41027 4.68801C7.30131 4.79698 7.1541 4.85908 7.00002 4.8611ZM7.00002 10.6945C6.84594 10.6925 6.69873 10.6304 6.58977 10.5214C6.48081 10.4124 6.4187 10.2652 6.41669 10.1111V6.22225C6.41669 6.06754 6.47815 5.91917 6.58754 5.80977C6.69694 5.70037 6.84531 5.63892 7.00002 5.63892C7.15473 5.63892 7.3031 5.70037 7.4125 5.80977C7.52189 5.91917 7.58335 6.06754 7.58335 6.22225V10.1111C7.58134 10.2652 7.51923 10.4124 7.41027 10.5214C7.30131 10.6304 7.1541 10.6925 7.00002 10.6945Z",
fill: "currentColor"
}));
}));
InfoCircleIcon.displayName = 'InfoCircleIcon';
function ownKeys$14(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$14(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$14(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$14(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var UIMessage = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (props, ref) {
var mergeProps = useMergeProps();
var messageInfo = props.message,
parentMetaData = props.metaData,
_props$ptCallbacks = props.ptCallbacks,
ptm = _props$ptCallbacks.ptm,
ptmo = _props$ptCallbacks.ptmo,
cx = _props$ptCallbacks.cx,
index = props.index;
var _messageInfo$message = messageInfo.message,
severity = _messageInfo$message.severity,
content = _messageInfo$message.content,
summary = _messageInfo$message.summary,
detail = _messageInfo$message.detail,
closable = _messageInfo$message.closable,
life = _messageInfo$message.life,
sticky = _messageInfo$message.sticky,
_className = _messageInfo$message.className,
style = _messageInfo$message.style,
_contentClassName = _messageInfo$message.contentClassName,
contentStyle = _messageInfo$message.contentStyle,
_icon = _messageInfo$message.icon,
_closeIcon = _messageInfo$message.closeIcon,
pt = _messageInfo$message.pt;
var params = {
index: index
};
var parentParams = _objectSpread$14(_objectSpread$14({}, parentMetaData), params);
var _useTimeout = useTimeout(function () {
onClose(null);
}, life || 3000, !sticky),
_useTimeout2 = _slicedToArray(_useTimeout, 1),
clearTimer = _useTimeout2[0];
var getPTOptions = function getPTOptions(key, options) {
return ptm(key, _objectSpread$14({
hostName: props.hostName
}, options));
};
var onClose = function onClose(event) {
clearTimer();
props.onClose && props.onClose(props.message);
if (event) {
event.preventDefault();
event.stopPropagation();
}
};
var onClick = function onClick() {
props.onClick && props.onClick(props.message);
};
var createCloseIcon = function createCloseIcon() {
if (closable !== false) {
var buttonIconProps = mergeProps({
className: cx('uimessage.buttonicon')
}, getPTOptions('buttonicon', parentParams), ptmo(pt, 'buttonicon', _objectSpread$14(_objectSpread$14({}, params), {}, {
hostName: props.hostName
})));
var icon = _closeIcon || /*#__PURE__*/React.createElement(TimesIcon, buttonIconProps);
var _closeIcon2 = IconUtils.getJSXIcon(icon, _objectSpread$14({}, buttonIconProps), {
props: props
});
var buttonProps = mergeProps({
type: 'button',
className: cx('uimessage.button'),
'aria-label': ariaLabel('close'),
onClick: onClose
}, getPTOptions('button', parentParams), ptmo(pt, 'button', _objectSpread$14(_objectSpread$14({}, params), {}, {
hostName: props.hostName
})));
return /*#__PURE__*/React.createElement("button", buttonProps, _closeIcon2, /*#__PURE__*/React.createElement(Ripple, null));
}
return null;
};
var createMessage = function createMessage() {
if (props.message) {
var iconProps = mergeProps({
className: cx('uimessage.icon')
}, getPTOptions('icon', parentParams), ptmo(pt, 'icon', _objectSpread$14(_objectSpread$14({}, params), {}, {
hostName: props.hostName
})));
var icon = _icon;
if (!_icon) {
switch (severity) {
case 'info':
icon = /*#__PURE__*/React.createElement(InfoCircleIcon, iconProps);
break;
case 'warn':
icon = /*#__PURE__*/React.createElement(ExclamationTriangleIcon, iconProps);
break;
case 'error':
icon = /*#__PURE__*/React.createElement(TimesCircleIcon, iconProps);
break;
case 'success':
icon = /*#__PURE__*/React.createElement(CheckIcon, iconProps);
break;
}
}
var iconContent = IconUtils.getJSXIcon(icon, _objectSpread$14({}, iconProps), {
props: props
});
var summaryProps = mergeProps({
className: cx('uimessage.summary')
}, getPTOptions('summary', parentParams), ptmo(pt, 'summary', _objectSpread$14(_objectSpread$14({}, params), {}, {
hostName: props.hostName
})));
var detailProps = mergeProps({
className: cx('uimessage.detail')
}, getPTOptions('detail', parentParams), ptmo(pt, 'detail', _objectSpread$14(_objectSpread$14({}, params), {}, {
hostName: props.hostName
})));
return content || /*#__PURE__*/React.createElement(React.Fragment, null, iconContent, /*#__PURE__*/React.createElement("span", summaryProps, summary), /*#__PURE__*/React.createElement("span", detailProps, detail));
}
return null;
};
var closeIcon = createCloseIcon();
var message = createMessage();
var wrapperProps = mergeProps({
className: classNames(_contentClassName, cx('uimessage.wrapper')),
style: contentStyle
}, getPTOptions('wrapper', parentParams), ptmo(pt, 'wrapper', _objectSpread$14(_objectSpread$14({}, params), {}, {
hostName: props.hostName
})));
var rootProps = mergeProps({
ref: ref,
className: classNames(_className, cx('uimessage.root', {
severity: severity
})),
style: style,
role: 'alert',
'aria-live': 'assertive',
'aria-atomic': 'true',
onClick: onClick
}, getPTOptions('root', parentParams), ptmo(pt, 'root', _objectSpread$14(_objectSpread$14({}, params), {}, {
hostName: props.hostName
})));
return /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement("div", wrapperProps, message, closeIcon));
}));
UIMessage.displayName = 'UIMessage';
function ownKeys$13(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$13(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$13(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$13(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var messageIdx$1 = 0;
var Messages = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = MessagesBase.getProps(inProps, context);
var _React$useState = React.useState([]),
_React$useState2 = _slicedToArray(_React$useState, 2),
messagesState = _React$useState2[0],
setMessagesState = _React$useState2[1];
var elementRef = React.useRef(null);
var metaData = _objectSpread$13(_objectSpread$13({
props: props
}, props.__parentMetadata), {}, {
state: {
messages: messagesState
}
});
var ptCallbacks = MessagesBase.setMetaData(metaData);
useHandleStyle(MessagesBase.css.styles, ptCallbacks.isUnstyled, {
name: 'messages'
});
var show = function show(messageInfo) {
if (messageInfo) {
setMessagesState(function (prev) {
return assignIdentifiers(prev, messageInfo, true);
});
}
};
var assignIdentifiers = function assignIdentifiers(currentState, messageInfo, copy) {
var messages;
if (Array.isArray(messageInfo)) {
var multipleMessages = messageInfo.reduce(function (acc, message) {
acc.push({
_pId: messageIdx$1++,
message: message
});
return acc;
}, []);
if (copy) {
messages = currentState ? [].concat(_toConsumableArray(currentState), _toConsumableArray(multipleMessages)) : multipleMessages;
} else {
messages = multipleMessages;
}
} else {
var message = {
_pId: messageIdx$1++,
message: messageInfo
};
if (copy) {
messages = currentState ? [].concat(_toConsumableArray(currentState), [message]) : [message];
} else {
messages = [message];
}
}
return messages;
};
var clear = function clear() {
setMessagesState([]);
};
var replace = function replace(messageInfo) {
setMessagesState(function (prev) {
return assignIdentifiers(prev, messageInfo, false);
});
};
var remove = function remove(messageInfo) {
// allow removal by ID or by message equality
var removeMessage = ObjectUtils.isNotEmpty(messageInfo._pId) ? messageInfo._pId : messageInfo.message || messageInfo;
setMessagesState(function (prev) {
return prev.filter(function (msg) {
return msg._pId !== messageInfo._pId && !ObjectUtils.deepEquals(msg.message, removeMessage);
});
});
props.onRemove && props.onRemove(messageInfo.message || removeMessage);
};
var onClose = function onClose(messageInfo) {
remove(messageInfo);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
show: show,
replace: replace,
remove: remove,
clear: clear,
getElement: function getElement() {
return elementRef.current;
}
};
});
var rootProps = mergeProps({
id: props.id,
className: props.className,
style: props.style
}, MessagesBase.getOtherProps(props), ptCallbacks.ptm('root'));
var transitionProps = mergeProps({
classNames: ptCallbacks.cx('uimessage.transition'),
unmountOnExit: true,
timeout: {
enter: 300,
exit: 300
},
options: props.transitionOptions
}, ptCallbacks.ptm('transition'));
return /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef
}, rootProps), /*#__PURE__*/React.createElement(TransitionGroup, null, messagesState && messagesState.map(function (message, index) {
var messageRef = /*#__PURE__*/React.createRef();
return /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: messageRef,
key: message._pId
}, transitionProps), /*#__PURE__*/React.createElement(UIMessage, {
hostName: "Messages",
ref: messageRef,
message: message,
onClick: props.onClick,
onClose: onClose,
ptCallbacks: ptCallbacks,
metaData: metaData,
index: index
}));
})));
}));
Messages.displayName = 'Messages';
var classes$M = {
root: function root(_ref) {
var props = _ref.props;
return props.mode === 'indeterminate' ? classNames('p-progressbar p-component p-progressbar-indeterminate') : classNames('p-progressbar p-component p-progressbar-determinate');
},
value: 'p-progressbar-value p-progressbar-value-animate',
label: 'p-progressbar-label',
container: 'p-progressbar-indeterminate-container'
};
var styles$C = "\n@layer primereact {\n .p-progressbar {\n position: relative;\n overflow: hidden;\n }\n \n .p-progressbar-determinate .p-progressbar-value {\n height: 100%;\n width: 0%;\n position: absolute;\n display: none;\n border: 0 none;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n }\n \n .p-progressbar-determinate .p-progressbar-label {\n display: inline-flex;\n }\n \n .p-progressbar-determinate .p-progressbar-value-animate {\n transition: width 1s ease-in-out;\n }\n \n .p-progressbar-indeterminate .p-progressbar-value::before {\n content: '';\n position: absolute;\n background-color: inherit;\n top: 0;\n left: 0;\n bottom: 0;\n will-change: left, right;\n -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n }\n \n .p-progressbar-indeterminate .p-progressbar-value::after {\n content: '';\n position: absolute;\n background-color: inherit;\n top: 0;\n left: 0;\n bottom: 0;\n will-change: left, right;\n -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n -webkit-animation-delay: 1.15s;\n animation-delay: 1.15s;\n }\n}\n\n@-webkit-keyframes p-progressbar-indeterminate-anim {\n 0% {\n left: -35%;\n right: 100%; }\n 60% {\n left: 100%;\n right: -90%; }\n 100% {\n left: 100%;\n right: -90%; }\n}\n@keyframes p-progressbar-indeterminate-anim {\n 0% {\n left: -35%;\n right: 100%; }\n 60% {\n left: 100%;\n right: -90%; }\n 100% {\n left: 100%;\n right: -90%; }\n}\n\n@-webkit-keyframes p-progressbar-indeterminate-anim-short {\n 0% {\n left: -200%;\n right: 100%; }\n 60% {\n left: 107%;\n right: -8%; }\n 100% {\n left: 107%;\n right: -8%; }\n}\n@keyframes p-progressbar-indeterminate-anim-short {\n 0% {\n left: -200%;\n right: 100%; }\n 60% {\n left: 107%;\n right: -8%; }\n 100% {\n left: 107%;\n right: -8%; }\n}\n";
var inlineStyles$f = {
value: function value(_ref2) {
var props = _ref2.props;
var valueWidth = Math.max(props.value, 2); // min 2 to display full label of 0% and 1%
var valueColor = props.value ? props.color : 'transparent';
return props.mode === 'indeterminate' ? {
backgroundColor: props.color
} : {
width: valueWidth + '%',
display: 'flex',
backgroundColor: valueColor
};
}
};
var ProgressBarBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'ProgressBar',
__parentMetadata: null,
id: null,
value: null,
showValue: true,
unit: '%',
style: null,
className: null,
mode: 'determinate',
displayValueTemplate: null,
color: null,
children: undefined
},
css: {
classes: classes$M,
styles: styles$C,
inlineStyles: inlineStyles$f
}
});
function ownKeys$12(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$12(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$12(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$12(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var ProgressBar = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = ProgressBarBase.getProps(inProps, context);
var _ProgressBarBase$setM = ProgressBarBase.setMetaData(_objectSpread$12({
props: props
}, props.__parentMetadata)),
ptm = _ProgressBarBase$setM.ptm,
cx = _ProgressBarBase$setM.cx,
isUnstyled = _ProgressBarBase$setM.isUnstyled;
useHandleStyle(ProgressBarBase.css.styles, isUnstyled, {
name: 'progressbar'
});
var elementRef = React.useRef(null);
var createLabel = function createLabel() {
if (props.showValue && props.value != null) {
var label = props.displayValueTemplate ? props.displayValueTemplate(props.value) : props.value + props.unit;
return label;
}
return null;
};
var createDeterminate = function createDeterminate() {
var label = createLabel();
var rootProps = mergeProps({
className: classNames(props.className, cx('root')),
style: props.style,
role: 'progressbar',
'aria-valuemin': '0',
'aria-valuenow': props.value,
'aria-valuemax': '100'
}, ProgressBarBase.getOtherProps(props), ptm('root'));
var valueProps = mergeProps({
className: cx('value'),
style: {
width: props.value + '%',
display: 'flex',
backgroundColor: props.color
}
}, ptm('value'));
var labelProps = mergeProps({
className: cx('label')
}, ptm('label'));
return /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
ref: elementRef
}, rootProps), /*#__PURE__*/React.createElement("div", valueProps, label != null && /*#__PURE__*/React.createElement("div", labelProps, label)));
};
var createIndeterminate = function createIndeterminate() {
var rootProps = mergeProps({
className: classNames(props.className, cx('root')),
style: props.style,
role: 'progressbar',
'aria-valuemin': '0',
'aria-valuenow': props.value,
'aria-valuemax': '100'
}, ProgressBarBase.getOtherProps(props), ptm('root'));
var containerProps = mergeProps({
className: cx('container')
}, ptm('container'));
var valueProps = mergeProps({
className: cx('value'),
style: {
backgroundColor: props.color
}
}, ptm('value'));
return /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
ref: elementRef
}, rootProps), /*#__PURE__*/React.createElement("div", containerProps, /*#__PURE__*/React.createElement("div", valueProps)));
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
if (props.mode === 'determinate') {
return createDeterminate();
} else if (props.mode === 'indeterminate') {
return createIndeterminate();
}
throw new Error(props.mode + " is not a valid mode for the ProgressBar. Valid values are 'determinate' and 'indeterminate'");
}));
ProgressBar.displayName = 'ProgressBar';
var classes$L = {
root: function root(_ref) {
var props = _ref.props;
return classNames("p-fileupload p-fileupload-".concat(props.mode, " p-component"));
},
buttonbar: 'p-fileupload-buttonbar',
content: 'p-fileupload-content',
chooseButton: function chooseButton(_ref2) {
var iconOnly = _ref2.iconOnly,
disabled = _ref2.disabled,
focusedState = _ref2.focusedState;
return classNames('p-button p-fileupload-choose p-component', {
'p-disabled': disabled,
'p-focus': focusedState,
'p-button-icon-only': iconOnly
});
},
label: 'p-button-label p-clickable',
file: 'p-fileupload-row',
fileName: 'p-fileupload-filename',
thumbnail: 'p-fileupload-file-thumbnail',
chooseButtonLabel: 'p-button-label p-clickable',
basicButton: function basicButton(_ref3) {
var disabled = _ref3.disabled,
focusedState = _ref3.focusedState,
hasFiles = _ref3.hasFiles;
return classNames('p-button p-component p-fileupload-choose', {
'p-fileupload-choose-selected': hasFiles,
'p-disabled': disabled,
'p-focus': focusedState
});
},
chooseIcon: function chooseIcon(_ref4) {
var props = _ref4.props,
iconOnly = _ref4.iconOnly;
return props.mode === 'basic' ? classNames('p-button-icon', {
'p-button-icon-left': !iconOnly
}) : classNames('p-button-icon p-clickable', {
'p-button-icon-left': !iconOnly
});
},
uploadIcon: function uploadIcon(_ref5) {
var iconOnly = _ref5.iconOnly;
return classNames('p-button-icon p-c', {
'p-button-icon-left': !iconOnly
});
},
cancelIcon: function cancelIcon(_ref6) {
var iconOnly = _ref6.iconOnly;
return classNames('p-button-icon p-c', {
'p-button-icon-left': !iconOnly
});
}
};
var styles$B = "\n@layer primereact {\n .p-fileupload-content {\n position: relative;\n }\n \n .p-fileupload-row {\n display: flex;\n align-items: center;\n }\n \n .p-fileupload-row > div {\n flex: 1 1 auto;\n width: 25%;\n }\n \n .p-fileupload-row > div:last-child {\n text-align: right;\n }\n \n .p-fileupload-content > .p-progressbar {\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n }\n \n .p-button.p-fileupload-choose {\n position: relative;\n overflow: hidden;\n }\n \n .p-fileupload-buttonbar {\n display: flex;\n flex-wrap: wrap;\n }\n \n .p-button.p-fileupload-choose input[type='file'] {\n display: none;\n }\n \n .p-fileupload-choose.p-fileupload-choose-selected input[type='file'] {\n display: none;\n }\n \n .p-fileupload-filename {\n word-break: break-all;\n }\n \n .p-fileupload-file-thumbnail {\n flex-shrink: 0;\n }\n \n .p-fileupload-file-badge {\n margin: 0.5rem;\n }\n \n .p-fluid .p-fileupload .p-button {\n width: auto;\n }\n}\n";
var FileUploadBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'FileUpload',
id: null,
name: null,
url: null,
mode: 'advanced',
multiple: false,
accept: null,
removeIcon: null,
disabled: false,
auto: false,
maxFileSize: null,
invalidFileSizeMessageSummary: '{0}: Invalid file size, ',
invalidFileSizeMessageDetail: 'maximum upload size is {0}.',
style: null,
className: null,
withCredentials: false,
previewWidth: 50,
chooseLabel: null,
selectedFileLabel: null,
uploadLabel: null,
cancelLabel: null,
chooseOptions: {
label: null,
icon: null,
iconOnly: false,
className: null,
style: null
},
uploadOptions: {
label: null,
icon: null,
iconOnly: false,
className: null,
style: null
},
cancelOptions: {
label: null,
icon: null,
iconOnly: false,
className: null,
style: null
},
customUpload: false,
headerClassName: null,
headerStyle: null,
contentClassName: null,
contentStyle: null,
headerTemplate: null,
itemTemplate: null,
emptyTemplate: null,
progressBarTemplate: null,
onBeforeUpload: null,
onBeforeSend: null,
onBeforeDrop: null,
onBeforeSelect: null,
onUpload: null,
onError: null,
onClear: null,
onSelect: null,
onProgress: null,
onValidationFail: null,
uploadHandler: null,
onRemove: null,
children: undefined
},
css: {
classes: classes$L,
styles: styles$B
}
});
function ownKeys$11(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$11(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$11(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$11(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _createForOfIteratorHelper$9(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$9(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray$9(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$9(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$9(r, a) : void 0; } }
function _arrayLikeToArray$9(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; }
var FileUpload = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = FileUploadBase.getProps(inProps, context);
var _React$useState = React.useState([]),
_React$useState2 = _slicedToArray(_React$useState, 2),
uploadedFilesState = _React$useState2[0],
setUploadedFilesState = _React$useState2[1];
var _React$useState3 = React.useState([]),
_React$useState4 = _slicedToArray(_React$useState3, 2),
filesState = _React$useState4[0],
setFilesState = _React$useState4[1];
var _React$useState5 = React.useState(0),
_React$useState6 = _slicedToArray(_React$useState5, 2),
progressState = _React$useState6[0],
setProgressState = _React$useState6[1];
var _React$useState7 = React.useState(false),
_React$useState8 = _slicedToArray(_React$useState7, 2),
focusedState = _React$useState8[0],
setFocusedState = _React$useState8[1];
var _React$useState9 = React.useState(false),
_React$useState10 = _slicedToArray(_React$useState9, 2),
uploadingState = _React$useState10[0],
setUploadingState = _React$useState10[1];
var metaData = {
props: props,
state: {
progress: progressState,
uploading: uploadingState,
uploadedFiles: uploadedFilesState,
files: filesState,
focused: focusedState
}
};
var _FileUploadBase$setMe = FileUploadBase.setMetaData(metaData),
ptm = _FileUploadBase$setMe.ptm,
cx = _FileUploadBase$setMe.cx,
isUnstyled = _FileUploadBase$setMe.isUnstyled;
useHandleStyle(FileUploadBase.css.styles, isUnstyled, {
name: 'fileupload'
});
var fileInputRef = React.useRef(null);
var messagesRef = React.useRef(null);
var contentRef = React.useRef(null);
var uploadedFileCount = React.useRef(0);
var hasFiles = ObjectUtils.isNotEmpty(filesState);
var hasUploadedFiles = ObjectUtils.isNotEmpty(uploadedFilesState);
var disabled = props.disabled || uploadingState;
var chooseButtonLabel = props.chooseLabel || props.chooseOptions.label || localeOption('choose');
var uploadButtonLabel = props.uploadLabel || props.uploadOptions.label || localeOption('upload');
var cancelButtonLabel = props.cancelLabel || props.cancelOptions.label || localeOption('cancel');
var chooseDisabled = disabled || props.fileLimit && props.fileLimit <= filesState.length + uploadedFileCount;
var uploadDisabled = disabled || !hasFiles;
var cancelDisabled = disabled || !hasFiles;
var isImage = function isImage(file) {
return /^image\//.test(file.type);
};
var remove = function remove(event, index) {
clearInput();
var currentFiles = _toConsumableArray(filesState);
var removedFile = filesState[index];
currentFiles.splice(index, 1);
setFilesState(currentFiles);
if (props.onRemove) {
props.onRemove({
originalEvent: event,
file: removedFile
});
}
};
var removeUploadedFiles = function removeUploadedFiles(event, index) {
clearInput();
var currentUploadedFiles = _toConsumableArray(uploadedFilesState);
var removedFile = filesState[index];
currentUploadedFiles.splice(index, 1);
setUploadedFilesState(currentUploadedFiles);
if (props.onRemove) {
props.onRemove({
originalEvent: event,
file: removedFile
});
}
};
var clearInput = function clearInput() {
if (fileInputRef.current) {
fileInputRef.current.value = '';
}
};
var formatSize = function formatSize(bytes) {
var k = 1024;
var dm = 3;
var sizes = localeOption('fileSizeTypes');
if (bytes <= 0) {
return "0 ".concat(sizes[0]);
}
var i = Math.floor(Math.log(bytes) / Math.log(k));
var formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
return "".concat(formattedSize, " ").concat(sizes[i]);
};
var onFileSelect = function onFileSelect(event) {
// give caller a chance to stop the selection
if (props.onBeforeSelect && props.onBeforeSelect({
originalEvent: event,
files: filesState
}) === false) {
return;
}
var currentFiles = [];
if (props.multiple) {
currentFiles = filesState ? _toConsumableArray(filesState) : [];
}
var selectedFiles = event.dataTransfer ? event.dataTransfer.files : event.target.files;
for (var i = 0; i < selectedFiles.length; i++) {
var file = selectedFiles[i];
var shouldAddFile = props.multiple ? !isFileSelected(file) && validate(file) : validate(file);
if (shouldAddFile) {
file.objectURL = window.URL.createObjectURL(file);
currentFiles.push(file);
}
}
setFilesState(currentFiles);
if (ObjectUtils.isNotEmpty(currentFiles) && props.auto) {
upload(currentFiles);
}
if (props.onSelect) {
props.onSelect({
originalEvent: event,
files: currentFiles
});
}
clearInput();
setFocusedState(false);
if (props.mode === 'basic' && currentFiles.length > 0) {
fileInputRef.current.style.display = 'none';
}
};
var isFileSelected = function isFileSelected(file) {
return filesState.some(function (f) {
return f.name + f.type + f.size === file.name + file.type + file.size;
});
};
var validate = function validate(file) {
if (props.maxFileSize && file.size > props.maxFileSize) {
var message = {
severity: 'error',
summary: props.invalidFileSizeMessageSummary.replace('{0}', file.name),
detail: props.invalidFileSizeMessageDetail.replace('{0}', formatSize(props.maxFileSize)),
sticky: true
};
if (props.mode === 'advanced') {
messagesRef.current.show(message);
}
props.onValidationFail && props.onValidationFail(file);
return false;
}
return true;
};
var upload = function upload(files) {
files = files || filesState;
if (files && files.nativeEvent) {
files = filesState;
}
if (props.customUpload) {
if (props.fileLimit) {
uploadedFileCount + files.length, _readOnlyError("uploadedFileCount");
}
if (props.uploadHandler) {
props.uploadHandler({
files: files,
options: {
clear: clear,
props: props
}
});
}
} else {
setUploadingState(true);
var xhr = new XMLHttpRequest();
var formData = new FormData();
if (props.onBeforeUpload) {
props.onBeforeUpload({
xhr: xhr,
formData: formData
});
}
var _iterator = _createForOfIteratorHelper$9(files),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var file = _step.value;
formData.append(props.name, file, file.name);
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
xhr.upload.addEventListener('progress', function (event) {
if (event.lengthComputable) {
var progress = Math.round(event.loaded * 100 / event.total);
setProgressState(progress);
if (props.onProgress) {
props.onProgress({
originalEvent: event,
progress: progress
});
}
}
});
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
setProgressState(0);
setUploadingState(false);
if (xhr.status >= 200 && xhr.status < 300) {
if (props.fileLimit) {
uploadedFileCount + files.length, _readOnlyError("uploadedFileCount");
}
if (props.onUpload) {
props.onUpload({
xhr: xhr,
files: files
});
}
} else if (props.onError) {
props.onError({
xhr: xhr,
files: files
});
}
clear();
setUploadedFilesState(function (prevUploadedFiles) {
return [].concat(_toConsumableArray(prevUploadedFiles), _toConsumableArray(files));
});
}
};
xhr.open('POST', props.url, true);
if (props.onBeforeSend) {
props.onBeforeSend({
xhr: xhr,
formData: formData
});
}
xhr.withCredentials = props.withCredentials;
xhr.send(formData);
}
};
var clear = function clear() {
setFilesState([]);
setUploadedFilesState([]);
setUploadingState(false);
props.onClear && props.onClear();
clearInput();
};
var choose = function choose() {
fileInputRef.current.click();
};
var onFocus = function onFocus() {
setFocusedState(true);
};
var onBlur = function onBlur() {
setFocusedState(false);
};
var _onKeyDown = function onKeyDown(event) {
if (event.code === 'Enter' || event.code === 'NumpadEnter') {
choose();
}
};
var _onDragEnter = function onDragEnter(event) {
if (!disabled) {
event.dataTransfer.dropEffect = 'copy';
event.stopPropagation();
event.preventDefault();
}
};
var _onDragOver = function onDragOver(event) {
if (!disabled) {
event.dataTransfer.dropEffect = 'copy';
!isUnstyled() && DomHandler.addClass(contentRef.current, 'p-fileupload-highlight');
contentRef.current.setAttribute('data-p-highlight', true);
event.stopPropagation();
event.preventDefault();
}
};
var _onDragLeave = function onDragLeave(event) {
if (!disabled) {
event.dataTransfer.dropEffect = 'copy';
!isUnstyled() && DomHandler.removeClass(contentRef.current, 'p-fileupload-highlight');
contentRef.current.setAttribute('data-p-highlight', false);
}
};
var _onDrop = function onDrop(event) {
if (props.disabled) {
return;
}
!isUnstyled() && DomHandler.removeClass(contentRef.current, 'p-fileupload-highlight');
contentRef.current.setAttribute('data-p-highlight', false);
event.stopPropagation();
event.preventDefault();
// give caller a chance to stop the drop
if (props.onBeforeDrop && props.onBeforeDrop(event) === false) {
return;
}
var files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
var allowDrop = props.multiple || ObjectUtils.isEmpty(filesState) && files && files.length === 1;
allowDrop && onFileSelect(event);
};
var onSimpleUploaderClick = function onSimpleUploaderClick() {
!disabled && hasFiles ? upload() : fileInputRef.current.click();
};
React.useImperativeHandle(ref, function () {
return {
props: props,
upload: upload,
clear: clear,
formatSize: formatSize,
onFileSelect: onFileSelect,
getInput: function getInput() {
return fileInputRef.current;
},
getContent: function getContent() {
return contentRef.current;
},
getFiles: function getFiles() {
return filesState;
},
setFiles: function setFiles(files) {
return setFilesState(files || []);
},
getUploadedFiles: function getUploadedFiles() {
return uploadedFilesState;
},
setUploadedFiles: function setUploadedFiles(files) {
return setUploadedFilesState(files || []);
}
};
});
var createChooseButton = function createChooseButton() {
var _props$chooseOptions = props.chooseOptions,
className = _props$chooseOptions.className,
style = _props$chooseOptions.style,
_icon = _props$chooseOptions.icon,
iconOnly = _props$chooseOptions.iconOnly;
var chooseButtonLabelProps = mergeProps({
className: cx('chooseButtonLabel')
}, ptm('chooseButtonLabel'));
var label = iconOnly ? /*#__PURE__*/React.createElement("span", _extends({}, chooseButtonLabelProps, {
dangerouslySetInnerHTML: {
__html: ' '
}
})) : /*#__PURE__*/React.createElement("span", chooseButtonLabelProps, chooseButtonLabel);
var inputProps = mergeProps({
ref: fileInputRef,
type: 'file',
onChange: function onChange(e) {
return onFileSelect(e);
},
multiple: props.multiple,
accept: props.accept,
disabled: chooseDisabled
}, ptm('input'));
var input = /*#__PURE__*/React.createElement("input", inputProps);
var chooseIconProps = mergeProps({
className: cx('chooseIcon', {
iconOnly: iconOnly
}),
'aria-hidden': 'true'
}, ptm('chooseIcon'));
var icon = _icon || /*#__PURE__*/React.createElement(PlusIcon, chooseIconProps);
var chooseIcon = IconUtils.getJSXIcon(icon, _objectSpread$11({}, chooseIconProps), {
props: props
});
var chooseButtonProps = mergeProps({
className: classNames(className, cx('chooseButton', {
iconOnly: iconOnly,
disabled: disabled,
className: className,
focusedState: focusedState
})),
style: style,
onClick: choose,
onKeyDown: function onKeyDown(e) {
return _onKeyDown(e);
},
onFocus: onFocus,
onBlur: onBlur,
tabIndex: 0,
'data-p-disabled': disabled,
'data-p-focus': focusedState
}, ptm('chooseButton'));
return /*#__PURE__*/React.createElement("span", chooseButtonProps, input, chooseIcon, label, /*#__PURE__*/React.createElement(Ripple, null));
};
var onRemoveClick = function onRemoveClick(e, badgeOptions, index) {
if (badgeOptions.severity === 'warning') {
remove(e, index);
} else {
removeUploadedFiles(e, index);
}
};
var createFile = function createFile(file, index, badgeOptions) {
var key = file.name + file.type + file.size;
var thumbnailProps = mergeProps({
role: 'presentation',
className: cx('thumbnail'),
src: file.objectURL,
width: props.previewWidth
}, ptm('thumbnail'));
var preview = isImage(file) ? /*#__PURE__*/React.createElement("img", _extends({}, thumbnailProps, {
alt: file.name
})) : null;
var detailsProps = mergeProps(ptm('details'));
var fileSizeProps = mergeProps(ptm('fileSize'));
var fileNameProps = mergeProps({
className: cx('fileName')
}, ptm('fileName'));
var actionsProps = mergeProps(ptm('actions'));
var fileName = /*#__PURE__*/React.createElement("div", fileNameProps, file.name);
var size = /*#__PURE__*/React.createElement("div", fileSizeProps, formatSize(file.size));
var contentBody = /*#__PURE__*/React.createElement("div", detailsProps, /*#__PURE__*/React.createElement("div", fileNameProps, " ", file.name), /*#__PURE__*/React.createElement("span", fileSizeProps, formatSize(file.size)), /*#__PURE__*/React.createElement(Badge, {
className: "p-fileupload-file-badge",
value: badgeOptions.value,
severity: badgeOptions.severity,
pt: ptm('badge'),
__parentMetadata: {
parent: metaData
}
}));
var removeButton = /*#__PURE__*/React.createElement("div", actionsProps, /*#__PURE__*/React.createElement(Button, {
type: "button",
icon: props.removeIcon || /*#__PURE__*/React.createElement(TimesIcon, null),
text: true,
rounded: true,
severity: "danger",
onClick: function onClick(e) {
return onRemoveClick(e, badgeOptions, index);
},
disabled: disabled,
pt: ptm('removeButton'),
__parentMetadata: {
parent: metaData
},
unstyled: isUnstyled()
}));
var content = /*#__PURE__*/React.createElement(React.Fragment, null, preview, contentBody, removeButton);
if (props.itemTemplate) {
var defaultContentOptions = {
onRemove: function onRemove(event) {
return remove(event, index);
},
previewElement: preview,
fileNameElement: fileName,
sizeElement: size,
removeElement: removeButton,
formatSize: formatSize(file.size),
element: content,
index: index,
props: props
};
content = ObjectUtils.getJSXElement(props.itemTemplate, file, defaultContentOptions);
}
var fileProps = mergeProps({
key: key,
className: cx('file')
}, ptm('file'));
return /*#__PURE__*/React.createElement("div", fileProps, content);
};
var createFiles = function createFiles() {
var badgeOptions = {
severity: 'warning',
value: localeOption('pending') || 'Pending'
};
var content = filesState.map(function (file, index) {
return createFile(file, index, badgeOptions);
});
return /*#__PURE__*/React.createElement("div", null, content);
};
var createUploadedFiles = function createUploadedFiles() {
var badgeOptions = {
severity: 'success',
value: localeOption('completed') || 'Completed'
};
var content = uploadedFilesState && uploadedFilesState.map(function (file, index) {
return createFile(file, index, badgeOptions);
});
return /*#__PURE__*/React.createElement("div", null, content);
};
var createEmptyContent = function createEmptyContent() {
return props.emptyTemplate && !hasFiles && !hasUploadedFiles ? ObjectUtils.getJSXElement(props.emptyTemplate, props) : null;
};
var createProgressBarContent = function createProgressBarContent() {
if (props.progressBarTemplate) {
var defaultProgressBarTemplateOptions = {
progress: progressState,
props: props
};
return ObjectUtils.getJSXElement(props.progressBarTemplate, defaultProgressBarTemplateOptions);
}
return /*#__PURE__*/React.createElement(ProgressBar, {
value: progressState,
showValue: false,
pt: ptm('progressbar'),
__parentMetadata: {
parent: metaData
}
});
};
var createAdvanced = function createAdvanced() {
var chooseButton = createChooseButton();
var emptyContent = createEmptyContent();
var uploadButton;
var cancelButton;
var filesList;
var uplaodedFilesList;
var progressBar;
if (!props.auto) {
var uploadOptions = props.uploadOptions;
var cancelOptions = props.cancelOptions;
var uploadLabel = !uploadOptions.iconOnly ? uploadButtonLabel : '';
var cancelLabel = !cancelOptions.iconOnly ? cancelButtonLabel : '';
var uploadIconProps = mergeProps({
className: cx('uploadIcon', {
iconOnly: uploadOptions.iconOnly
}),
'aria-hidden': 'true'
}, ptm('uploadIcon'));
var uploadIcon = IconUtils.getJSXIcon(uploadOptions.icon || /*#__PURE__*/React.createElement(UploadIcon, uploadIconProps), _objectSpread$11({}, uploadIconProps), {
props: props
});
var cancelIconProps = mergeProps({
className: cx('cancelIcon', {
iconOnly: cancelOptions.iconOnly
}),
'aria-hidden': 'true'
}, ptm('cancelIcon'));
var cancelIcon = IconUtils.getJSXIcon(cancelOptions.icon || /*#__PURE__*/React.createElement(TimesIcon, cancelIconProps), _objectSpread$11({}, cancelIconProps), {
props: props
});
uploadButton = /*#__PURE__*/React.createElement(Button, {
type: "button",
label: uploadLabel,
"aria-hidden": "true",
icon: uploadIcon,
onClick: upload,
disabled: uploadDisabled,
style: uploadOptions.style,
className: uploadOptions.className,
pt: ptm('uploadButton'),
__parentMetadata: {
parent: metaData
},
unstyled: isUnstyled()
});
cancelButton = /*#__PURE__*/React.createElement(Button, {
type: "button",
label: cancelLabel,
"aria-hidden": "true",
icon: cancelIcon,
onClick: clear,
disabled: cancelDisabled,
style: cancelOptions.style,
className: cancelOptions.className,
pt: ptm('cancelButton'),
__parentMetadata: {
parent: metaData
},
unstyled: isUnstyled()
});
}
if (hasFiles) {
filesList = createFiles();
progressBar = createProgressBarContent();
}
if (hasUploadedFiles) {
uplaodedFilesList = createUploadedFiles();
}
var buttonbarProps = mergeProps({
className: classNames(props.headerClassName, cx('buttonbar')),
style: props.headerStyle
}, ptm('buttonbar'));
var header = /*#__PURE__*/React.createElement("div", buttonbarProps, chooseButton, uploadButton, cancelButton);
if (props.headerTemplate) {
var defaultContentOptions = {
className: classNames('p-fileupload-buttonbar', props.headerClassName),
chooseButton: chooseButton,
uploadButton: uploadButton,
cancelButton: cancelButton,
element: header,
props: props
};
header = ObjectUtils.getJSXElement(props.headerTemplate, defaultContentOptions);
}
var rootProps = mergeProps({
id: props.id,
className: classNames(props.className, cx('root')),
style: props.style
}, FileUploadBase.getOtherProps(props), ptm('root'));
var contentProps = mergeProps({
ref: contentRef,
className: classNames(props.contentClassName, cx('content')),
style: props.contentStyle,
onDragEnter: function onDragEnter(e) {
return _onDragEnter(e);
},
onDragOver: function onDragOver(e) {
return _onDragOver(e);
},
onDragLeave: function onDragLeave(e) {
return _onDragLeave(e);
},
onDrop: function onDrop(e) {
return _onDrop(e);
},
'data-p-highlight': false
}, ptm('content'));
return /*#__PURE__*/React.createElement("div", rootProps, header, /*#__PURE__*/React.createElement("div", contentProps, progressBar, /*#__PURE__*/React.createElement(Messages, {
ref: messagesRef,
__parentMetadata: {
parent: metaData
}
}), hasFiles ? filesList : null, hasUploadedFiles ? uplaodedFilesList : null, emptyContent));
};
var createBasic = function createBasic() {
var chooseOptions = props.chooseOptions;
var labelProps = mergeProps({
className: cx('label')
}, ptm('label'));
var chooseLabel = chooseOptions.iconOnly ? /*#__PURE__*/React.createElement("span", _extends({}, labelProps, {
dangerouslySetInnerHTML: {
__html: ' '
}
})) : /*#__PURE__*/React.createElement("span", labelProps, chooseButtonLabel);
var label = props.auto ? chooseLabel : /*#__PURE__*/React.createElement("span", labelProps, hasFiles ? props.selectedFileLabel || filesState[0].name : chooseLabel);
var chooseIconProps = mergeProps({
className: cx('chooseIcon', {
iconOnly: chooseOptions.iconOnly
})
}, ptm('chooseIcon'));
var icon = chooseOptions.icon ? chooseOptions.icon : !chooseOptions.icon && (!hasFiles || props.auto) ? /*#__PURE__*/React.createElement(PlusIcon, chooseIconProps) : !chooseOptions.icon && hasFiles && !props.auto && /*#__PURE__*/React.createElement(UploadIcon, chooseIconProps);
var chooseIcon = IconUtils.getJSXIcon(icon, _objectSpread$11({}, chooseIconProps), {
props: props,
hasFiles: hasFiles
});
var inputProps = mergeProps({
ref: fileInputRef,
type: 'file',
onChange: function onChange(e) {
return onFileSelect(e);
},
multiple: props.multiple,
accept: props.accept,
disabled: disabled
}, ptm('input'));
var input = !hasFiles && /*#__PURE__*/React.createElement("input", inputProps);
var rootProps = mergeProps({
className: classNames(props.className, cx('root')),
style: props.style
}, FileUploadBase.getOtherProps(props), ptm('root'));
var basicButtonProps = mergeProps({
className: classNames(chooseOptions.className, cx('basicButton', {
hasFiles: hasFiles,
disabled: disabled,
focusedState: focusedState
})),
style: chooseOptions.style,
tabIndex: 0,
onClick: onSimpleUploaderClick,
onKeyDown: function onKeyDown(e) {
return _onKeyDown(e);
},
onFocus: onFocus,
onBlur: onBlur
}, FileUploadBase.getOtherProps(props), ptm('basicButton'));
return /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement(Messages, {
ref: messagesRef,
pt: ptm('message'),
__parentMetadata: {
parent: metaData
}
}), /*#__PURE__*/React.createElement("span", basicButtonProps, chooseIcon, label, input, /*#__PURE__*/React.createElement(Ripple, null)));
};
if (props.mode === 'advanced') {
return createAdvanced();
} else if (props.mode === 'basic') {
return createBasic();
}
}));
FileUpload.displayName = 'FileUpload';
var classes$K = {
root: 'p-float-label'
};
var styles$A = "\n@layer primereact {\n .p-float-label {\n display: block;\n position: relative;\n }\n \n .p-float-label label {\n position: absolute;\n pointer-events: none;\n top: 50%;\n margin-top: -.5rem;\n transition-property: all;\n transition-timing-function: ease;\n line-height: 1;\n }\n \n .p-float-label:has(textarea) label {\n top: 1rem;\n }\n \n .p-float-label:has(input:focus) label,\n .p-float-label:has(input.p-filled) label,\n .p-float-label:has(input:-webkit-autofill) label,\n .p-float-label:has(textarea:focus) label,\n .p-float-label:has(textarea.p-filled) label,\n .p-float-label:has(.p-inputwrapper-focus) label,\n .p-float-label:has(.p-inputwrapper-filled) label {\n top: -.75rem;\n font-size: 12px;\n }\n \n .p-float-label .p-placeholder,\n .p-float-label input::placeholder,\n .p-float-label .p-inputtext::placeholder {\n opacity: 0;\n transition-property: all;\n transition-timing-function: ease;\n }\n \n .p-float-label .p-focus .p-placeholder,\n .p-float-label input:focus::placeholder,\n .p-float-label .p-inputtext:focus::placeholder {\n opacity: 1;\n transition-property: all;\n transition-timing-function: ease;\n }\n}";
var FloatLabelBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'FloatLabel',
children: undefined
},
css: {
classes: classes$K,
styles: styles$A
}
});
var FloatLabel = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = FloatLabelBase.getProps(inProps, context);
var elementRef = React.useRef(ref);
var _FloatLabelBase$setMe = FloatLabelBase.setMetaData({
props: props
}),
ptm = _FloatLabelBase$setMe.ptm,
cx = _FloatLabelBase$setMe.cx,
isUnstyled = _FloatLabelBase$setMe.isUnstyled;
useHandleStyle(FloatLabelBase.css.styles, isUnstyled, {
name: 'floatlabel'
});
React.useEffect(function () {
ObjectUtils.combinedRefs(elementRef, ref);
}, [elementRef, ref]);
var rootProps = mergeProps({
ref: elementRef,
className: classNames(cx('root'))
}, FloatLabelBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("span", rootProps, props.children);
}));
FloatLabel.displayName = 'FloatLabel';
var classes$J = {
header: 'p-galleria-header',
footer: 'p-galleria-footer',
closeIcon: 'p-galleria-close-icon',
closeButton: 'p-galleria-close p-link',
root: function root(_ref) {
var props = _ref.props,
context = _ref.context,
thumbnailsPosClassName = _ref.thumbnailsPosClassName,
indicatorPosClassName = _ref.indicatorPosClassName;
return classNames('p-galleria p-component', {
'p-galleria-fullscreen': props.fullScreen,
'p-galleria-indicator-onitem': props.showIndicatorsOnItem,
'p-galleria-item-nav-onhover': props.showItemNavigatorsOnHover && !props.fullScreen,
'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
}, thumbnailsPosClassName, indicatorPosClassName);
},
content: 'p-galleria-content',
mask: function mask(_ref2) {
var visibleState = _ref2.visibleState;
return classNames('p-galleria-mask', {
'p-galleria-visible': visibleState
});
},
thumbnailItem: function thumbnailItem(_ref3) {
var subProps = _ref3.subProps;
return classNames('p-galleria-thumbnail-item', {
'p-galleria-thumbnail-item-current': subProps.current,
'p-galleria-thumbnail-item-active': subProps.active,
'p-galleria-thumbnail-item-start': subProps.start,
'p-galleria-thumbnail-item-end': subProps.end
});
},
thumbnailItemContent: 'p-galleria-thumbnail-item-content',
previousThumbnailIcon: 'p-galleria-thumbnail-prev-icon',
previousThumbnailButton: function previousThumbnailButton(_ref4) {
var isDisabled = _ref4.isDisabled;
return classNames('p-galleria-thumbnail-prev p-link', {
'p-disabled': isDisabled
});
},
nextThumbnailIcon: 'p-galleria-thumbnail-next-icon',
nextThumbnailButton: function nextThumbnailButton(_ref5) {
var isDisabled = _ref5.isDisabled;
return classNames('p-galleria-thumbnail-next p-link', {
'p-disabled': isDisabled
});
},
thumbnailContainer: 'p-galleria-thumbnail-container',
thumbnailItemsContainer: 'p-galleria-thumbnail-items-container',
thumbnailItems: 'p-galleria-thumbnail-items',
thumbnailWrapper: 'p-galleria-thumbnail-wrapper',
previousItemIcon: 'p-galleria-item-prev-icon',
previousItemButton: function previousItemButton(_ref6) {
var isDisabled = _ref6.isDisabled;
return classNames('p-galleria-item-prev p-galleria-item-nav p-link', {
'p-disabled': isDisabled
});
},
nextItemIcon: 'p-galleria-item-next-icon',
nextItemButton: function nextItemButton(_ref7) {
var isDisabled = _ref7.isDisabled;
return classNames('p-galleria-item-next p-galleria-item-nav p-link', {
'p-disabled': isDisabled
});
},
caption: 'p-galleria-caption',
indicator: function indicator(_ref8) {
var isActive = _ref8.isActive;
return classNames('p-galleria-indicator', {
'p-highlight': isActive
});
},
indicators: 'p-galleria-indicators p-reset',
itemWrapper: 'p-galleria-item-wrapper',
itemContainer: 'p-galleria-item-container',
item: 'p-galleria-item',
transition: 'p-galleria'
};
var styles$z = "\n@layer primereact {\n .p-galleria-content {\n display: flex;\n flex-direction: column;\n }\n \n .p-galleria-item-wrapper {\n display: flex;\n flex-direction: column;\n position: relative;\n }\n \n .p-galleria-item-container {\n position: relative;\n display: flex;\n height: 100%;\n }\n \n .p-galleria-item-nav {\n position: absolute;\n top: 50%;\n margin-top: -.5rem;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n }\n \n .p-galleria-item-prev {\n left: 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n \n .p-galleria-item-next {\n right: 0;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n \n .p-galleria-item {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n width: 100%;\n }\n \n .p-galleria-item-nav-onhover .p-galleria-item-nav {\n pointer-events: none;\n opacity: 0;\n transition: opacity .2s ease-in-out;\n }\n \n .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {\n pointer-events: all;\n opacity: 1;\n }\n \n .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled {\n pointer-events: none;\n }\n \n .p-galleria-caption {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n }\n \n /* Thumbnails */\n .p-galleria-thumbnail-wrapper {\n display: flex;\n flex-direction: column;\n overflow: auto;\n flex-shrink: 0;\n }\n \n .p-galleria-thumbnail-prev,\n .p-galleria-thumbnail-next {\n align-self: center;\n flex: 0 0 auto;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n position: relative;\n }\n \n .p-galleria-thumbnail-prev span,\n .p-galleria-thumbnail-next span {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n \n .p-galleria-thumbnail-container {\n display: flex;\n flex-direction: row;\n }\n \n .p-galleria-thumbnail-items-container {\n overflow: hidden;\n width: 100%;\n }\n \n .p-galleria-thumbnail-items {\n display: flex;\n }\n \n .p-galleria-thumbnail-item {\n overflow: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n opacity: .5;\n }\n \n .p-galleria-thumbnail-item:hover {\n opacity: 1;\n transition: opacity .3s;\n }\n \n .p-galleria-thumbnail-item-current {\n opacity: 1;\n }\n \n /* Positions */\n /* Thumbnails */\n .p-galleria-thumbnails-left .p-galleria-content,\n .p-galleria-thumbnails-right .p-galleria-content {\n flex-direction: row;\n }\n \n .p-galleria-thumbnails-left .p-galleria-item-wrapper,\n .p-galleria-thumbnails-right .p-galleria-item-wrapper {\n flex-direction: row;\n }\n \n .p-galleria-thumbnails-left .p-galleria-item-wrapper,\n .p-galleria-thumbnails-top .p-galleria-item-wrapper {\n order: 2;\n }\n \n .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,\n .p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper {\n order: 1;\n }\n \n .p-galleria-thumbnails-left .p-galleria-thumbnail-container,\n .p-galleria-thumbnails-right .p-galleria-thumbnail-container {\n flex-direction: column;\n flex-grow: 1;\n }\n \n .p-galleria-thumbnails-left .p-galleria-thumbnail-items,\n .p-galleria-thumbnails-right .p-galleria-thumbnail-items {\n flex-direction: column;\n height: 100%;\n }\n \n /* Indicators */\n .p-galleria-indicators {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .p-galleria-indicator > button {\n display: inline-flex;\n align-items: center;\n }\n \n .p-galleria-indicators-left .p-galleria-item-wrapper,\n .p-galleria-indicators-right .p-galleria-item-wrapper {\n flex-direction: row;\n align-items: center;\n }\n \n .p-galleria-indicators-left .p-galleria-item-container,\n .p-galleria-indicators-top .p-galleria-item-container {\n order: 2;\n }\n \n .p-galleria-indicators-left .p-galleria-indicators,\n .p-galleria-indicators-top .p-galleria-indicators {\n order: 1;\n }\n \n .p-galleria-indicators-left .p-galleria-indicators,\n .p-galleria-indicators-right .p-galleria-indicators {\n flex-direction: column;\n }\n \n .p-galleria-indicator-onitem .p-galleria-indicators {\n position: absolute;\n display: flex;\n z-index: 1;\n }\n \n .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators {\n top: 0;\n left: 0;\n width: 100%;\n align-items: flex-start;\n }\n \n .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators {\n right: 0;\n top: 0;\n height: 100%;\n align-items: flex-end;\n }\n \n .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators {\n bottom: 0;\n left: 0;\n width: 100%;\n align-items: flex-end;\n }\n \n .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators {\n left: 0;\n top: 0;\n height: 100%;\n align-items: flex-start;\n }\n \n /* FullScreen */\n .p-galleria-mask {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n }\n \n .p-galleria-mask.p-component-overlay {\n pointer-events: auto;\n }\n \n .p-galleria-close {\n position: absolute;\n top: 0;\n right: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n }\n \n .p-galleria-mask .p-galleria-item-nav {\n position: fixed;\n top: 50%;\n margin-top: -.5rem;\n }\n \n /* Animation */\n .p-galleria-enter {\n opacity: 0;\n transform: scale(0.7);\n }\n \n .p-galleria-enter-active {\n opacity: 1;\n transform: scale(1);\n transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n }\n \n .p-galleria-enter-done {\n transform: none;\n }\n \n .p-galleria-exit {\n opacity: 1;\n }\n \n .p-galleria-exit-active {\n opacity: 0;\n transform: scale(0.7);\n transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);\n }\n \n .p-galleria-enter-active .p-galleria-item-nav {\n opacity: 0;\n }\n \n /* Keyboard Support */\n .p-items-hidden .p-galleria-thumbnail-item {\n visibility: hidden;\n }\n \n .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {\n visibility: visible;\n }\n}\n";
var inlineStyles$e = {
thumbnailItemsContainer: function thumbnailItemsContainer(_ref9) {
var height = _ref9.height;
return {
height: height
};
}
};
var GalleriaBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Galleria',
activeIndex: 0,
autoPlay: false,
baseZIndex: 0,
caption: null,
changeItemOnIndicatorHover: false,
children: undefined,
circular: false,
className: null,
closeIcon: null,
footer: null,
fullScreen: false,
header: null,
id: null,
indicator: null,
indicatorsPosition: 'bottom',
item: null,
itemNextIcon: null,
itemPrevIcon: null,
nextThumbnailIcon: null,
numVisible: 3,
onHide: null,
onItemChange: null,
onShow: null,
prevThumbnailIcon: null,
responsiveOptions: null,
showIndicators: false,
showIndicatorsOnItem: false,
showItemNavigators: false,
showItemNavigatorsOnHover: false,
showThumbnailNavigators: true,
showThumbnails: true,
style: null,
thumbnail: null,
thumbnailsPosition: 'bottom',
transitionInterval: 4000,
transitionOptions: null,
value: null,
verticalThumbnailViewPortHeight: '300px'
},
css: {
classes: classes$J,
styles: styles$z,
inlineStyles: inlineStyles$e
}
});
function ownKeys$10(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$10(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$10(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$10(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var GalleriaItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (props, ref) {
var mergeProps = useMergeProps();
var indicatorContent = React.useRef(null);
var ptm = props.ptm,
cx = props.cx;
var getPTOptions = function getPTOptions(key, options) {
return ptm(key, _objectSpread$10({
hostName: props.hostName
}, options));
};
var ariaSlideNumber = function ariaSlideNumber(value) {
return ariaLabel('slideNumber', {
slideNumber: value
});
};
var ariaPageLabel = function ariaPageLabel(value) {
return ariaLabel('pageLabel', {
page: value
});
};
var next = function next() {
var nextItemIndex = props.activeItemIndex + 1;
props.onActiveItemChange({
index: props.circular && props.value.length - 1 === props.activeItemIndex ? 0 : nextItemIndex
});
};
var prev = function prev() {
var prevItemIndex = props.activeItemIndex !== 0 ? props.activeItemIndex - 1 : 0;
props.onActiveItemChange({
index: props.circular && props.activeItemIndex === 0 ? props.value.length - 1 : prevItemIndex
});
};
var stopSlideShow = function stopSlideShow() {
if (props.slideShowActive && props.stopSlideShow) {
props.stopSlideShow();
}
};
var navBackward = function navBackward(e) {
stopSlideShow();
prev();
if (e && e.cancelable) {
e.preventDefault();
}
};
var navForward = function navForward(e) {
stopSlideShow();
next();
if (e && e.cancelable) {
e.preventDefault();
}
};
var onIndicatorClick = function onIndicatorClick(index) {
stopSlideShow();
props.onActiveItemChange({
index: index
});
};
var onIndicatorMouseEnter = function onIndicatorMouseEnter(index) {
if (props.changeItemOnIndicatorHover) {
stopSlideShow();
props.onActiveItemChange({
index: index
});
}
};
var onIndicatorKeyDown = function onIndicatorKeyDown(event, index) {
switch (event.code) {
case 'Enter':
case 'NumpadEnter':
case 'Space':
stopSlideShow();
props.onActiveItemChange({
index: index
});
event.preventDefault();
break;
case 'ArrowRight':
onRightKey();
break;
case 'ArrowLeft':
onLeftKey();
break;
case 'Home':
onHomeKey();
event.preventDefault();
break;
case 'End':
onEndKey();
event.preventDefault();
break;
case 'Tab':
onTabKey();
break;
case 'ArrowDown':
case 'ArrowUp':
case 'PageUp':
case 'PageDown':
event.preventDefault();
break;
}
};
var onRightKey = function onRightKey() {
var indicators = _toConsumableArray(DomHandler.find(indicatorContent.current, '[data-pc-section="indicator"]'));
var activeIndex = findFocusedIndicatorIndex();
changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1);
};
var onLeftKey = function onLeftKey() {
var activeIndex = findFocusedIndicatorIndex();
changedFocusedIndicator(activeIndex, activeIndex - 1 <= 0 ? 0 : activeIndex - 1);
};
var onHomeKey = function onHomeKey() {
var activeIndex = findFocusedIndicatorIndex();
changedFocusedIndicator(activeIndex, 0);
};
var onEndKey = function onEndKey() {
var indicators = _toConsumableArray(DomHandler.find(indicatorContent.current, '[data-pc-section="indicator"]'));
var activeIndex = findFocusedIndicatorIndex();
changedFocusedIndicator(activeIndex, indicators.length - 1);
};
var onTabKey = function onTabKey() {
var indicators = _toConsumableArray(DomHandler.find(indicatorContent.current, '[data-pc-section="indicator"]'));
var highlightedIndex = indicators.findIndex(function (ind) {
return DomHandler.getAttribute(ind, 'data-p-highlight') === true;
});
var activeIndicator = DomHandler.findSingle(indicatorContent.current, '[data-pc-section="indicator"] > button[tabindex="0"]');
var activeIndex = indicators.findIndex(function (ind) {
return ind === activeIndicator.parentElement;
});
indicators[activeIndex].children[0].tabIndex = '-1';
indicators[highlightedIndex].children[0].tabIndex = '0';
};
var findFocusedIndicatorIndex = function findFocusedIndicatorIndex() {
var indicators = _toConsumableArray(DomHandler.find(indicatorContent.current, '[data-pc-section="indicator"]'));
var activeIndicator = DomHandler.findSingle(indicatorContent.current, '[data-pc-section="indicator"] > button[tabindex="0"]');
return indicators.findIndex(function (ind) {
return ind === activeIndicator.parentElement;
});
};
var changedFocusedIndicator = function changedFocusedIndicator(prevInd, nextInd) {
var indicators = _toConsumableArray(DomHandler.find(indicatorContent.current, '[data-pc-section="indicator"]'));
indicators[prevInd].children[0].tabIndex = '-1';
indicators[nextInd].children[0].tabIndex = '0';
indicators[nextInd].children[0].focus();
};
useMountEffect(function () {
if (props.autoPlay) {
props.startSlideShow();
}
});
var createBackwardNavigator = function createBackwardNavigator() {
if (props.showItemNavigators) {
var isDisabled = !props.circular && props.activeItemIndex === 0;
var previousItemIconProps = mergeProps({
className: cx('previousItemIcon')
}, getPTOptions('previousItemIcon'));
var icon = props.itemPrevIcon || /*#__PURE__*/React.createElement(ChevronLeftIcon, previousItemIconProps);
var itemPrevIcon = IconUtils.getJSXIcon(icon, _objectSpread$10({}, previousItemIconProps), {
props: props
});
var previousItemButtonProps = mergeProps({
type: 'button',
className: cx('previousItemButton', {
isDisabled: isDisabled
}),
onClick: navBackward,
disabled: isDisabled,
'data-p-disabled': isDisabled,
'data-pc-group-section': 'itemnavigator'
}, getPTOptions('previousItemButton'));
return /*#__PURE__*/React.createElement("button", previousItemButtonProps, itemPrevIcon, /*#__PURE__*/React.createElement(Ripple, null));
}
return null;
};
var createForwardNavigator = function createForwardNavigator() {
if (props.showItemNavigators) {
var isDisabled = !props.circular && props.activeItemIndex === props.value.length - 1;
var nextItemIconProps = mergeProps({
className: cx('nextItemIcon')
}, getPTOptions('nextItemIcon'));
var icon = props.itemNextIcon || /*#__PURE__*/React.createElement(ChevronRightIcon, nextItemIconProps);
var itemNextIcon = IconUtils.getJSXIcon(icon, _objectSpread$10({}, nextItemIconProps), {
props: props
});
var nextItemButtonProps = mergeProps({
type: 'button',
className: cx('nextItemButton', {
isDisabled: isDisabled
}),
onClick: navForward,
disabled: isDisabled,
'data-p-disabled': isDisabled,
'data-pc-group-section': 'itemnavigator'
}, getPTOptions('nextItemButton'));
return /*#__PURE__*/React.createElement("button", nextItemButtonProps, itemNextIcon, /*#__PURE__*/React.createElement(Ripple, null));
}
return null;
};
var createCaption = function createCaption() {
var captionProps = mergeProps({
className: cx('caption')
}, getPTOptions('caption'));
if (props.caption) {
var _content = props.caption(props.value[props.activeItemIndex]);
return /*#__PURE__*/React.createElement("div", captionProps, _content);
}
return null;
};
var createIndicator = function createIndicator(index) {
var key = 'p-galleria-indicator-' + index;
var isActive = props.activeItemIndex === index;
var indicator = props.indicator && props.indicator(index);
var indicatorProps = mergeProps({
className: cx('indicator', {
isActive: isActive
}),
tabIndex: 0,
'aria-label': ariaPageLabel(index + 1),
'aria-selected': props.activeIndex === index,
'aria-controls': props.id + '_item_' + index,
'data-p-highlight': isActive,
onClick: function onClick() {
return onIndicatorClick(index);
},
onMouseEnter: function onMouseEnter() {
return onIndicatorMouseEnter(index);
},
onKeyDown: function onKeyDown(e) {
return onIndicatorKeyDown(e, index);
}
}, getPTOptions('indicator'));
if (!indicator) {
indicator = /*#__PURE__*/React.createElement("button", {
tabIndex: props.activeIndex === index ? '0' : '-1',
type: "button",
className: "p-link"
}, /*#__PURE__*/React.createElement(Ripple, null));
}
return /*#__PURE__*/React.createElement("li", _extends({}, indicatorProps, {
key: key
}), indicator);
};
var createIndicators = function createIndicators() {
if (props.showIndicators) {
var _indicators = [];
var indicatorsProps = mergeProps({
className: classNames(props.indicatorsContentClassName, cx('indicators'))
}, getPTOptions('indicators'));
for (var i = 0; i < props.value.length; i++) {
_indicators.push(createIndicator(i));
}
return /*#__PURE__*/React.createElement("ul", _extends({
ref: indicatorContent
}, indicatorsProps), _indicators);
}
return null;
};
var content = props.itemTemplate && props.itemTemplate(props.value[props.activeItemIndex]);
var backwardNavigator = createBackwardNavigator();
var forwardNavigator = createForwardNavigator();
var caption = createCaption();
var indicators = createIndicators();
var itemWrapperProps = mergeProps({
ref: ref,
className: cx('itemWrapper')
}, getPTOptions('itemWrapper'));
var itemContainerProps = mergeProps({
className: cx('itemContainer')
}, getPTOptions('itemContainer'));
var itemProps = mergeProps({
className: cx('item'),
id: props.id + '_item_' + props.activeItemIndex,
role: 'group',
'aria-label': ariaSlideNumber(props.activeItemIndex + 1),
'aria-roledescription': localeOption('aria') ? localeOption('aria').slide : undefined
}, getPTOptions('item'));
return /*#__PURE__*/React.createElement("div", itemWrapperProps, /*#__PURE__*/React.createElement("div", itemContainerProps, backwardNavigator, /*#__PURE__*/React.createElement("div", itemProps, content), forwardNavigator, caption), indicators);
}));
GalleriaItem.displayName = 'GalleriaItem';
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; }
var GalleriaThumbnailItem = /*#__PURE__*/React.memo(function (props) {
var mergeProps = useMergeProps();
var ptm = props.ptm,
cx = props.cx;
var getPTOptions = function getPTOptions(key, options) {
return ptm(key, _objectSpread$$({
hostName: props.hostName
}, options));
};
var onItemClick = function onItemClick(event) {
props.onItemClick({
originalEvent: event,
index: props.index
});
};
var ariaPageLabel = function ariaPageLabel(value) {
return ariaLabel('pageLabel', {
page: value
});
};
var onThumbnailKeydown = function onThumbnailKeydown(event) {
if (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') {
props.onItemClick({
originalEvent: event,
index: props.index
});
event.preventDefault();
}
switch (event.code) {
case 'ArrowRight':
onRightKey();
break;
case 'ArrowLeft':
onLeftKey();
break;
case 'Home':
onHomeKey();
event.preventDefault();
break;
case 'End':
onEndKey();
event.preventDefault();
break;
case 'ArrowUp':
case 'ArrowDown':
event.preventDefault();
break;
case 'Tab':
onTabKey();
break;
}
};
var onRightKey = function onRightKey() {
var indicators = DomHandler.find(props.itemsContainerRef.current, '[data-pc-section="thumbnailitem"]');
var activeIndex = findFocusedIndicatorIndex();
changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1);
};
var onLeftKey = function onLeftKey() {
var activeIndex = findFocusedIndicatorIndex();
changedFocusedIndicator(activeIndex, activeIndex - 1 <= 0 ? 0 : activeIndex - 1);
};
var onHomeKey = function onHomeKey() {
var activeIndex = findFocusedIndicatorIndex();
changedFocusedIndicator(activeIndex, 0);
};
var onEndKey = function onEndKey() {
var indicators = DomHandler.find(props.itemsContainerRef.current, '[data-pc-section="thumbnailitem"]');
var activeIndex = findFocusedIndicatorIndex();
changedFocusedIndicator(activeIndex, indicators.length - 1);
};
var onTabKey = function onTabKey() {
var indicators = _toConsumableArray(DomHandler.find(props.itemsContainerRef.current, '[data-pc-section="thumbnailitem"]'));
var highlightedIndex = indicators.findIndex(function (ind) {
return DomHandler.getAttribute(ind, 'data-p-active') === true;
});
var activeIndicator = DomHandler.findSingle(props.itemsContainerRef.current, '[tabindex="0"]');
var activeIndex = indicators.findIndex(function (ind) {
return ind === activeIndicator.parentElement;
});
indicators[activeIndex].children[0].tabIndex = '-1';
indicators[highlightedIndex].children[0].tabIndex = '0';
};
var findFocusedIndicatorIndex = function findFocusedIndicatorIndex() {
var indicators = _toConsumableArray(DomHandler.find(props.itemsContainerRef.current, '[data-pc-section="thumbnailitem"]'));
var activeIndicator = DomHandler.findSingle(props.itemsContainerRef.current, '[data-pc-section="thumbnailitem"] > [tabindex="0"]');
return indicators.findIndex(function (ind) {
return ind === activeIndicator.parentElement;
});
};
var changedFocusedIndicator = function changedFocusedIndicator(prevInd, nextInd) {
var indicators = DomHandler.find(props.itemsContainerRef.current, '[data-pc-section="thumbnailitem"]');
indicators[prevInd].children[0].tabIndex = '-1';
indicators[nextInd].children[0].tabIndex = '0';
indicators[nextInd].children[0].focus();
};
var content = props.template && props.template(props.item);
var thumbnailItemProps = mergeProps({
className: classNames(props.className, cx('thumbnailItem', {
subProps: props
})),
role: 'tab',
'data-p-active': props.current,
'aria-selected': props.current,
'aria-controls': props.containerId + '_item_' + props.index,
onKeyDown: onThumbnailKeydown,
'data-p-galleria-thumbnail-item-current': props.current,
'data-p-galleria-thumbnail-item-active': props.active,
'data-p-galleria-thumbnail-item-start': props.start,
'data-p-galleria-thumbnail-item-end': props.end
}, getPTOptions('thumbnailItem'));
var thumbnailItemContentProps = mergeProps({
className: cx('thumbnailItemContent'),
tabIndex: props.current ? '0' : '-1',
'aria-label': ariaPageLabel(props.index + 1),
'aria-current': props.current ? 'page' : undefined,
onClick: onItemClick
}, getPTOptions('thumbnailItemContent'));
return /*#__PURE__*/React.createElement("div", _extends({}, thumbnailItemProps, {
key: props.index + '_galleriathumbnailitem'
}), /*#__PURE__*/React.createElement("div", thumbnailItemContentProps, content));
});
var GalleriaThumbnails = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (props, ref) {
var mergeProps = useMergeProps();
var _React$useState = React.useState(props.numVisible),
_React$useState2 = _slicedToArray(_React$useState, 2),
numVisibleState = _React$useState2[0],
setNumVisibleState = _React$useState2[1];
var _React$useState3 = React.useState(0),
_React$useState4 = _slicedToArray(_React$useState3, 2),
totalShiftedItemsState = _React$useState4[0],
setTotalShiftedItemsState = _React$useState4[1];
var itemsContainerRef = React.useRef(null);
var startPos = React.useRef(null);
var attributeSelector = React.useRef('');
var thumbnailsStyle = React.useRef(null);
var responsiveOptions = React.useRef(null);
var prevNumVisible = usePrevious(numVisibleState);
var prevActiveItemIndex = usePrevious(props.activeItemIndex);
var context = React.useContext(PrimeReactContext);
var ptm = props.ptm,
cx = props.cx,
sx = props.sx;
var getPTOptions = function getPTOptions(key, options) {
return ptm(key, _objectSpread$$({
hostName: props.hostName
}, options));
};
var _useResizeListener = useResizeListener({
listener: function listener() {
calculatePosition();
},
when: props.responsiveOptions
}),
_useResizeListener2 = _slicedToArray(_useResizeListener, 1),
bindWindowResizeListener = _useResizeListener2[0];
var step = function step(dir) {
var totalShiftedItems = totalShiftedItemsState + dir;
if (dir < 0 && -1 * totalShiftedItems + numVisibleState > props.value.length - 1) {
totalShiftedItems = numVisibleState - props.value.length;
} else if (dir > 0 && totalShiftedItems > 0) {
totalShiftedItems = 0;
}
if (props.circular) {
if (dir < 0 && props.value.length - 1 === props.activeItemIndex) {
totalShiftedItems = 0;
} else if (dir > 0 && props.activeItemIndex === 0) {
totalShiftedItems = numVisibleState - props.value.length;
}
}
if (itemsContainerRef.current) {
DomHandler.removeClass(itemsContainerRef.current, 'p-items-hidden');
itemsContainerRef.current.style.transform = props.isVertical ? "translate3d(0, ".concat(totalShiftedItems * (100 / numVisibleState), "%, 0)") : "translate3d(".concat(totalShiftedItems * (100 / numVisibleState), "%, 0, 0)");
itemsContainerRef.current.style.transition = 'transform 500ms ease 0s';
}
setTotalShiftedItemsState(totalShiftedItems);
};
var stopSlideShow = function stopSlideShow() {
if (props.slideShowActive && props.stopSlideShow) {
props.stopSlideShow();
}
};
var getMedianItemIndex = function getMedianItemIndex() {
var index = Math.floor(numVisibleState / 2);
return numVisibleState % 2 ? index : index - 1;
};
var navBackward = function navBackward(e) {
stopSlideShow();
var prevItemIndex = props.activeItemIndex !== 0 ? props.activeItemIndex - 1 : 0;
var diff = prevItemIndex + totalShiftedItemsState;
if (numVisibleState - diff - 1 > getMedianItemIndex() && (-1 * totalShiftedItemsState !== 0 || props.circular)) {
step(1);
}
props.onActiveItemChange({
index: props.circular && props.activeItemIndex === 0 ? props.value.length - 1 : prevItemIndex
});
if (e.cancelable) {
e.preventDefault();
}
};
var navForward = function navForward(e) {
stopSlideShow();
var nextItemIndex = props.activeItemIndex + 1;
if (nextItemIndex + totalShiftedItemsState > getMedianItemIndex() && (-1 * totalShiftedItemsState < getTotalPageNumber() - 1 || props.circular)) {
step(-1);
}
props.onActiveItemChange({
index: props.circular && props.value.length - 1 === props.activeItemIndex ? 0 : nextItemIndex
});
if (e.cancelable) {
e.preventDefault();
}
};
var onItemClick = function onItemClick(event) {
stopSlideShow();
var selectedItemIndex = event.index;
if (selectedItemIndex !== props.activeItemIndex) {
var diff = selectedItemIndex + totalShiftedItemsState;
var dir = 0;
if (selectedItemIndex < props.activeItemIndex) {
dir = numVisibleState - diff - 1 - getMedianItemIndex();
if (dir > 0 && -1 * totalShiftedItemsState !== 0) {
step(dir);
}
} else {
dir = getMedianItemIndex() - diff;
if (dir < 0 && -1 * totalShiftedItemsState < getTotalPageNumber() - 1) {
step(dir);
}
}
props.onActiveItemChange({
index: selectedItemIndex
});
}
};
var onTransitionEnd = function onTransitionEnd(e) {
if (itemsContainerRef.current && e.propertyName === 'transform') {
document.body.setAttribute('data-p-items-hidden', 'false');
!props.isUnstyled() && DomHandler.addClass(itemsContainerRef.current, 'p-items-hidden');
itemsContainerRef.current.style.transition = '';
}
};
var onTouchStart = function onTouchStart(e) {
var touchobj = e.changedTouches[0];
startPos.current = {
x: touchobj.pageX,
y: touchobj.pageY
};
};
var onTouchMove = function onTouchMove(e) {
if (e.cancelable) {
e.preventDefault();
}
};
var onTouchEnd = function onTouchEnd(e) {
var touchobj = e.changedTouches[0];
if (props.isVertical) {
changePageOnTouch(e, touchobj.pageY - startPos.current.y);
} else {
changePageOnTouch(e, touchobj.pageX - startPos.current.x);
}
};
var changePageOnTouch = function changePageOnTouch(e, diff) {
if (diff < 0) {
// left
navForward(e);
} else {
// right
navBackward(e);
}
};
var getTotalPageNumber = function getTotalPageNumber() {
return props.value.length > numVisibleState ? props.value.length - numVisibleState + 1 : 0;
};
var createStyle = function createStyle() {
if (!thumbnailsStyle.current) {
thumbnailsStyle.current = DomHandler.createInlineStyle(context && context.nonce || PrimeReact.nonce, context && context.styleContainer);
}
var innerHTML = "\n [data-pc-section=\"thumbnailitems\"][".concat(attributeSelector.current, "] {\n [data-pc-section=\"thumbnailitem\"] {\n flex: 1 0 ").concat(100 / numVisibleState, "%\n }\n } \n ");
if (props.responsiveOptions) {
var comparator = ObjectUtils.localeComparator(context && context.locale || PrimeReact.locale);
responsiveOptions.current = _toConsumableArray(props.responsiveOptions);
responsiveOptions.current.sort(function (data1, data2) {
var value1 = data1.breakpoint;
var value2 = data2.breakpoint;
return ObjectUtils.sort(value1, value2, -1, comparator, context && context.nullSortOrder || PrimeReact.nullSortOrder);
});
for (var i = 0; i < responsiveOptions.current.length; i++) {
var res = responsiveOptions.current[i];
innerHTML = innerHTML + "\n @media screen and (max-width: ".concat(res.breakpoint, ") {\n [data-pc-section=\"thumbnailitems\"][").concat(attributeSelector.current, "] {\n [data-pc-section=\"thumbnailitem\"] {\n flex: 1 0 ").concat(100 / res.numVisible, "%\n }\n } \n }\n ");
}
}
thumbnailsStyle.current.innerHTML = innerHTML;
};
var calculatePosition = function calculatePosition() {
if (itemsContainerRef.current && responsiveOptions.current) {
var windowWidth = window.innerWidth;
var matchedResponsiveData = {
numVisible: props.numVisible
};
for (var i = 0; i < responsiveOptions.current.length; i++) {
var res = responsiveOptions.current[i];
if (parseInt(res.breakpoint, 10) >= windowWidth) {
matchedResponsiveData = res;
}
}
if (numVisibleState !== matchedResponsiveData.numVisible) {
setNumVisibleState(matchedResponsiveData.numVisible);
}
}
};
useMountEffect(function () {
if (itemsContainerRef.current) {
attributeSelector.current = UniqueComponentId();
itemsContainerRef.current.setAttribute(attributeSelector.current, '');
}
createStyle();
calculatePosition();
bindWindowResizeListener();
});
useUpdateEffect(function () {
var totalShiftedItems = totalShiftedItemsState;
if (prevNumVisible !== numVisibleState || prevActiveItemIndex !== props.activeItemIndex) {
if (props.activeItemIndex <= getMedianItemIndex()) {
totalShiftedItems = 0;
} else if (props.value.length - numVisibleState + getMedianItemIndex() < props.activeItemIndex) {
totalShiftedItems = numVisibleState - props.value.length;
} else if (props.value.length - numVisibleState < props.activeItemIndex && numVisibleState % 2 === 0) {
totalShiftedItems = props.activeItemIndex * -1 + getMedianItemIndex() + 1;
} else {
totalShiftedItems = props.activeItemIndex * -1 + getMedianItemIndex();
}
if (totalShiftedItems !== totalShiftedItemsState) {
setTotalShiftedItemsState(totalShiftedItems);
}
itemsContainerRef.current.style.transform = props.isVertical ? "translate3d(0, ".concat(totalShiftedItems * (100 / numVisibleState), "%, 0)") : "translate3d(".concat(totalShiftedItems * (100 / numVisibleState), "%, 0, 0)");
if (prevActiveItemIndex !== props.activeItemIndex) {
document.body.setAttribute('data-p-items-hidden', 'false');
!props.isUnstyled() && DomHandler.removeClass(itemsContainerRef.current, 'p-items-hidden');
itemsContainerRef.current.style.transition = 'transform 500ms ease 0s';
}
}
});
var createItems = function createItems() {
return props.value.map(function (item, index) {
var firstIndex = totalShiftedItemsState * -1;
var lastIndex = firstIndex + numVisibleState - 1;
var isActive = firstIndex <= index && lastIndex >= index;
var start = firstIndex === index;
var end = lastIndex === index;
var current = props.activeItemIndex === index;
return /*#__PURE__*/React.createElement(GalleriaThumbnailItem, {
key: index,
index: index,
containerId: props.containerId,
itemsContainerRef: itemsContainerRef,
template: props.itemTemplate,
item: item,
active: isActive,
start: start,
end: end,
onItemClick: onItemClick,
current: current,
ptm: ptm,
cx: cx,
sx: sx
});
});
};
var createBackwardNavigator = function createBackwardNavigator() {
if (props.showThumbnailNavigators) {
var isDisabled = !props.circular && props.activeItemIndex === 0 || props.value.length <= numVisibleState;
var previousThumbnailIconProps = mergeProps({
className: cx('previousThumbnailIcon')
}, getPTOptions('previousThumbnailIcon'));
var icon = props.isVertical ? props.prevThumbnailIcon || /*#__PURE__*/React.createElement(ChevronUpIcon, previousThumbnailIconProps) : props.prevThumbnailIcon || /*#__PURE__*/React.createElement(ChevronLeftIcon, previousThumbnailIconProps);
var prevThumbnailIcon = IconUtils.getJSXIcon(icon, _objectSpread$$({}, previousThumbnailIconProps), {
props: props
});
var previousThumbnailButtonProps = mergeProps({
className: cx('previousThumbnailButton', {
isDisabled: isDisabled
}),
onClick: navBackward,
type: 'button',
disabled: isDisabled,
'data-p-disabled': isDisabled,
'aria-label': localeOption('aria') ? localeOption('aria').prevPageLabel : undefined,
'data-pc-group-section': 'thumbnailnavigator'
}, getPTOptions('previousThumbnailButton'));
return /*#__PURE__*/React.createElement("button", previousThumbnailButtonProps, prevThumbnailIcon, /*#__PURE__*/React.createElement(Ripple, null));
}
return null;
};
var createForwardNavigator = function createForwardNavigator() {
if (props.showThumbnailNavigators) {
var isDisabled = !props.circular && props.activeItemIndex === props.value.length - 1 || props.value.length <= numVisibleState;
var nextThumbnailIconProps = mergeProps({
className: cx('nextThumbnailIcon')
}, getPTOptions('nextThumbnailIcon'));
var icon = props.isVertical ? props.nextThumbnailIcon || /*#__PURE__*/React.createElement(ChevronDownIcon, nextThumbnailIconProps) : props.nextThumbnailIcon || /*#__PURE__*/React.createElement(ChevronRightIcon, nextThumbnailIconProps);
var nextThumbnailIcon = IconUtils.getJSXIcon(icon, _objectSpread$$({}, nextThumbnailIconProps), {
props: props
});
var nextThumbnailButtonProps = mergeProps({
className: cx('nextThumbnailButton', {
isDisabled: isDisabled
}),
disabled: isDisabled,
type: 'button',
'aria-label': localeOption('aria') ? localeOption('aria').nextPageLabel : undefined,
onClick: navForward,
'data-p-disabled': isDisabled,
'data-pc-group-section': 'thumbnailnavigator'
}, getPTOptions('nextThumbnailButton'));
return /*#__PURE__*/React.createElement("button", nextThumbnailButtonProps, nextThumbnailIcon, /*#__PURE__*/React.createElement(Ripple, null));
}
return null;
};
var createContent = function createContent() {
var items = createItems();
var height = props.isVertical ? props.contentHeight : '';
var backwardNavigator = createBackwardNavigator();
var forwardNavigator = createForwardNavigator();
var thumbnailContainerProps = mergeProps({
className: cx('thumbnailContainer')
}, getPTOptions('thumbnailContainer'));
var thumbnailItemsContainerProps = mergeProps({
className: cx('thumbnailItemsContainer'),
style: sx('thumbnailItemsContainer', {
height: height
})
}, getPTOptions('thumbnailItemsContainer'));
var thumbnailItemsProps = mergeProps({
ref: itemsContainerRef,
className: cx('thumbnailItems'),
role: 'tablist',
onTransitionEnd: onTransitionEnd,
onTouchStart: onTouchStart,
onTouchMove: onTouchMove,
onTouchEnd: onTouchEnd
}, getPTOptions('thumbnailItems'));
return /*#__PURE__*/React.createElement("div", thumbnailContainerProps, backwardNavigator, /*#__PURE__*/React.createElement("div", thumbnailItemsContainerProps, /*#__PURE__*/React.createElement("div", thumbnailItemsProps, items)), forwardNavigator);
};
var content = createContent();
var thumbnailWrapperProps = mergeProps({
className: cx('thumbnailWrapper')
}, getPTOptions('thumbnailWrapper'));
return /*#__PURE__*/React.createElement("div", thumbnailWrapperProps, content);
}));
GalleriaThumbnailItem.displayName = 'GalleriaThumbnailItem';
GalleriaThumbnails.displayName = 'GalleriaThumbnails';
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; }
var Galleria = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = GalleriaBase.getProps(inProps, context);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
visibleState = _React$useState2[0],
setVisibleState = _React$useState2[1];
var _React$useState3 = React.useState(props.numVisible),
_React$useState4 = _slicedToArray(_React$useState3, 2),
numVisibleState = _React$useState4[0],
setNumVisibleState = _React$useState4[1];
var _React$useState5 = React.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
slideShowActiveState = _React$useState6[0],
setSlideShowActiveState = _React$useState6[1];
var _React$useState7 = React.useState(props.activeIndex),
_React$useState8 = _slicedToArray(_React$useState7, 2),
activeIndexState = _React$useState8[0],
setActiveIndexState = _React$useState8[1];
var elementRef = React.useRef(null);
var previewContentRef = React.useRef(null);
var maskRef = React.useRef(null);
var activeItemIndex = props.onItemChange ? props.activeIndex : activeIndexState;
var isVertical = props.thumbnailsPosition === 'left' || props.thumbnailsPosition === 'right';
var id = props.id || UniqueComponentId();
var _GalleriaBase$setMeta = GalleriaBase.setMetaData({
props: props,
state: {
visible: visibleState,
numVisible: numVisibleState,
slideShowActive: slideShowActiveState,
activeIndex: activeIndexState
}
}),
ptm = _GalleriaBase$setMeta.ptm,
cx = _GalleriaBase$setMeta.cx,
sx = _GalleriaBase$setMeta.sx,
isUnstyled = _GalleriaBase$setMeta.isUnstyled;
useHandleStyle(GalleriaBase.css.styles, isUnstyled, {
name: 'galleria'
});
useGlobalOnEscapeKey({
callback: function callback() {
hide();
},
when: props.closeOnEscape && props.fullScreen,
priority: [ESC_KEY_HANDLING_PRIORITIES.IMAGE, 0]
});
useInterval(function () {
onActiveItemChange({
index: props.circular && props.value.length - 1 === activeItemIndex ? 0 : activeItemIndex + 1
});
}, props.transitionInterval, slideShowActiveState);
var onActiveItemChange = function onActiveItemChange(event) {
if (event.index >= props.value.length) {
// #3973 AutoPlay without circular should stop the slideshow when it reaches the end
stopSlideShow();
return;
}
if (props.onItemChange) {
props.onItemChange(event);
} else {
setActiveIndexState(event.index);
}
};
var show = function show() {
setVisibleState(true);
};
var hide = function hide() {
setVisibleState(false);
};
var onEnter = function onEnter() {
DomHandler.blockBodyScroll();
};
var onEntering = function onEntering() {
ZIndexUtils.set('modal', maskRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, props.baseZIndex || context && context.zIndex.modal || PrimeReact.zIndex.modal);
!isUnstyled() && DomHandler.addMultipleClasses(maskRef.current, 'p-component-overlay p-component-overlay-enter');
};
var onEntered = function onEntered() {
props.onShow && props.onShow();
};
var onExit = function onExit() {
DomHandler.unblockBodyScroll();
!isUnstyled() && DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
};
var onExited = function onExited() {
ZIndexUtils.clear(maskRef.current);
props.onHide && props.onHide();
};
var isAutoPlayActive = function isAutoPlayActive() {
return slideShowActiveState;
};
var startSlideShow = function startSlideShow() {
setSlideShowActiveState(true);
};
var stopSlideShow = function stopSlideShow() {
setSlideShowActiveState(false);
};
var getPositionClassName = function getPositionClassName(preClassName, position) {
var positions = ['top', 'left', 'bottom', 'right'];
var pos = positions.find(function (item) {
return item === position;
});
return pos ? "".concat(preClassName, "-").concat(pos) : '';
};
React.useEffect(function () {
if (props.value && props.value.length < numVisibleState) {
setNumVisibleState(props.value.length);
}
}, [props.value, numVisibleState]);
React.useEffect(function () {
setNumVisibleState(props.numVisible);
}, [props.numVisible]);
useUnmountEffect(function () {
if (slideShowActiveState) {
stopSlideShow();
}
ZIndexUtils.clear(maskRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
show: show,
hide: hide,
isAutoPlayActive: isAutoPlayActive,
startSlideShow: startSlideShow,
stopSlideShow: stopSlideShow,
getElement: function getElement() {
return elementRef.current;
},
getPreviewContent: function getPreviewContent() {
return previewContentRef.current;
}
};
});
var createHeader = function createHeader() {
var headerProps = mergeProps({
className: cx('header')
}, ptm('header'));
if (props.header) {
return /*#__PURE__*/React.createElement("div", headerProps, props.header);
}
return null;
};
var createFooter = function createFooter() {
var footerProps = mergeProps({
className: cx('footer')
}, ptm('footer'));
if (props.footer) {
return /*#__PURE__*/React.createElement("div", footerProps, props.footer);
}
return null;
};
var createElement = function createElement() {
var thumbnailsPosClassName = props.showThumbnails && getPositionClassName('p-galleria-thumbnails', props.thumbnailsPosition);
var indicatorPosClassName = props.showIndicators && getPositionClassName('p-galleria-indicators', props.indicatorsPosition);
var closeIconProps = mergeProps({
className: cx('closeIcon'),
'aria-hidden': true
}, ptm('closeIcon'));
var icon = props.closeIcon || /*#__PURE__*/React.createElement(TimesIcon, closeIconProps);
var closeIcon = IconUtils.getJSXIcon(icon, _objectSpread$_({}, closeIconProps), {
props: props
});
var closeButtonProps = mergeProps({
type: 'button',
className: cx('closeButton'),
'aria-label': localeOption('aria') ? localeOption('aria').close : undefined,
onClick: hide
}, ptm('closeButton'));
var closeButton = props.fullScreen && /*#__PURE__*/React.createElement("button", closeButtonProps, closeIcon, /*#__PURE__*/React.createElement(Ripple, null));
var header = createHeader();
var footer = createFooter();
var rootProps = mergeProps({
ref: elementRef,
id: id,
className: classNames(props.className, cx('root', {
context: context,
thumbnailsPosClassName: thumbnailsPosClassName,
indicatorPosClassName: indicatorPosClassName
})),
style: props.style,
role: 'region'
}, GalleriaBase.getOtherProps(props), ptm('root'));
var contentProps = mergeProps({
className: cx('content'),
'aria-live': props.autoPlay ? 'polite' : 'off'
}, ptm('content'));
var element = /*#__PURE__*/React.createElement("div", rootProps, closeButton, header, /*#__PURE__*/React.createElement("div", contentProps, /*#__PURE__*/React.createElement(GalleriaItem, {
hostName: "Galleria",
ref: previewContentRef,
id: id,
value: props.value,
activeItemIndex: activeItemIndex,
onActiveItemChange: onActiveItemChange,
itemTemplate: props.item,
circular: props.circular,
caption: props.caption,
showIndicators: props.showIndicators,
itemPrevIcon: props.itemPrevIcon,
itemNextIcon: props.itemNextIcon,
changeItemOnIndicatorHover: props.changeItemOnIndicatorHover,
indicator: props.indicator,
showItemNavigators: props.showItemNavigators,
autoPlay: props.autoPlay,
slideShowActive: slideShowActiveState,
startSlideShow: startSlideShow,
stopSlideShow: stopSlideShow,
ptm: ptm,
cx: cx
}), props.showThumbnails && /*#__PURE__*/React.createElement(GalleriaThumbnails, {
hostName: "Galleria",
value: props.value,
containerId: id,
activeItemIndex: activeItemIndex,
onActiveItemChange: onActiveItemChange,
itemTemplate: props.thumbnail,
numVisible: numVisibleState,
nextThumbnailIcon: props.nextThumbnailIcon,
prevThumbnailIcon: props.prevThumbnailIcon,
responsiveOptions: props.responsiveOptions,
circular: props.circular,
isVertical: isVertical,
contentHeight: props.verticalThumbnailViewPortHeight,
showThumbnailNavigators: props.showThumbnailNavigators,
autoPlay: props.autoPlay,
slideShowActive: slideShowActiveState,
stopSlideShow: stopSlideShow,
isUnstyled: isUnstyled,
ptm: ptm,
cx: cx,
sx: sx
})), footer);
return element;
};
var createGalleria = function createGalleria() {
var element = createElement();
if (props.fullScreen) {
var maskProps = mergeProps({
className: cx('mask', {
visibleState: visibleState
}),
role: 'dialog',
'aria-modal': 'true'
}, ptm('mask'));
var transitionProps = mergeProps({
classNames: cx('transition'),
"in": visibleState,
timeout: {
enter: 150,
exit: 150
},
options: props.transitionOptions,
unmountOnExit: true,
appear: true,
onEnter: onEnter,
onEntering: onEntering,
onEntered: onEntered,
onExit: onExit,
onExited: onExited
}, ptm('transition'));
var galleriaWrapper = /*#__PURE__*/React.createElement("div", _extends({
ref: maskRef
}, maskProps), /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: elementRef
}, transitionProps), element));
return /*#__PURE__*/React.createElement(Portal, {
element: galleriaWrapper
});
}
return element;
};
return ObjectUtils.isNotEmpty(props.value) && createGalleria();
}));
Galleria.displayName = 'Galleria';
var classes$I = {
root: function root(_ref) {
var props = _ref.props;
return classNames('p-icon-field', {
'p-icon-field-right': props.iconPosition === 'right',
'p-icon-field-left': props.iconPosition === 'left'
});
}
};
var IconFieldBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'IconField',
__parentMetadata: null,
children: undefined,
className: null,
iconPosition: 'right'
},
css: {
classes: classes$I
}
});
function ownKeys$Z(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$Z(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$Z(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$Z(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var IconField = /*#__PURE__*/React__default.memo(/*#__PURE__*/React__default.forwardRef(function (inProps, ref) {
var elementRef = useRef(ref);
var mergeProps = useMergeProps();
var context = useContext(PrimeReactContext);
var props = IconFieldBase.getProps(inProps, context);
var _IconFieldBase$setMet = IconFieldBase.setMetaData(_objectSpread$Z(_objectSpread$Z({
props: props
}, props.__parentMetadata), {}, {
context: {
iconPosition: props.iconPosition
}
})),
ptm = _IconFieldBase$setMet.ptm,
cx = _IconFieldBase$setMet.cx;
var rootProps = mergeProps({
className: classNames(props.className, cx('root', {
iconPosition: props.iconPosition
}))
}, IconFieldBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React__default.createElement("div", _extends({}, rootProps, {
ref: elementRef
}), Children.map(props.children, function (child, index) {
return /*#__PURE__*/cloneElement(child, {
iconPosition: props.iconPosition
});
}));
}));
IconField.displayName = 'IconField';
var AngleDoubleDownIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M6.70786 6.59831C6.80043 6.63674 6.89974 6.65629 6.99997 6.65581C7.19621 6.64081 7.37877 6.54953 7.50853 6.40153L11.0685 2.8416C11.1364 2.69925 11.1586 2.53932 11.132 2.38384C11.1053 2.22837 11.0311 2.08498 10.9195 1.97343C10.808 1.86188 10.6646 1.78766 10.5091 1.76099C10.3536 1.73431 10.1937 1.75649 10.0513 1.82448L6.99997 4.87585L3.9486 1.82448C3.80625 1.75649 3.64632 1.73431 3.49084 1.76099C3.33536 1.78766 3.19197 1.86188 3.08043 1.97343C2.96888 2.08498 2.89466 2.22837 2.86798 2.38384C2.84131 2.53932 2.86349 2.69925 2.93147 2.8416L6.46089 6.43205C6.53132 6.50336 6.61528 6.55989 6.70786 6.59831ZM6.70786 12.1925C6.80043 12.2309 6.89974 12.2505 6.99997 12.25C7.10241 12.2465 7.20306 12.2222 7.29575 12.1785C7.38845 12.1348 7.47124 12.0726 7.53905 11.9957L11.0685 8.46629C11.1614 8.32292 11.2036 8.15249 11.1881 7.98233C11.1727 7.81216 11.1005 7.6521 10.9833 7.52781C10.866 7.40353 10.7104 7.3222 10.5415 7.29688C10.3725 7.27155 10.1999 7.30369 10.0513 7.38814L6.99997 10.4395L3.9486 7.38814C3.80006 7.30369 3.62747 7.27155 3.45849 7.29688C3.28951 7.3222 3.13393 7.40353 3.01667 7.52781C2.89942 7.6521 2.82729 7.81216 2.81184 7.98233C2.79639 8.15249 2.83852 8.32292 2.93148 8.46629L6.4609 12.0262C6.53133 12.0975 6.61529 12.1541 6.70786 12.1925Z",
fill: "currentColor"
}));
}));
AngleDoubleDownIcon.displayName = 'AngleDoubleDownIcon';
var AngleDoubleUpIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M10.1504 6.67719C10.2417 6.71508 10.3396 6.73436 10.4385 6.73389C10.6338 6.74289 10.8249 6.67441 10.97 6.54334C11.1109 6.4023 11.19 6.21112 11.19 6.01178C11.19 5.81245 11.1109 5.62127 10.97 5.48023L7.45977 1.96998C7.31873 1.82912 7.12755 1.75 6.92821 1.75C6.72888 1.75 6.5377 1.82912 6.39666 1.96998L2.9165 5.45014C2.83353 5.58905 2.79755 5.751 2.81392 5.91196C2.83028 6.07293 2.89811 6.22433 3.00734 6.34369C3.11656 6.46306 3.26137 6.54402 3.42025 6.57456C3.57914 6.60511 3.74364 6.5836 3.88934 6.51325L6.89813 3.50446L9.90691 6.51325C9.97636 6.58357 10.0592 6.6393 10.1504 6.67719ZM9.93702 11.9993C10.065 12.1452 10.245 12.2352 10.4385 12.25C10.632 12.2352 10.812 12.1452 10.9399 11.9993C11.0633 11.8614 11.1315 11.6828 11.1315 11.4978C11.1315 11.3128 11.0633 11.1342 10.9399 10.9963L7.48987 7.48609C7.34883 7.34523 7.15765 7.26611 6.95832 7.26611C6.75899 7.26611 6.5678 7.34523 6.42677 7.48609L2.91652 10.9963C2.84948 11.1367 2.82761 11.2944 2.85391 11.4477C2.88022 11.601 2.9534 11.7424 3.06339 11.8524C3.17338 11.9624 3.31477 12.0356 3.46808 12.0619C3.62139 12.0882 3.77908 12.0663 3.91945 11.9993L6.92823 8.99048L9.93702 11.9993Z",
fill: "currentColor"
}));
}));
AngleDoubleUpIcon.displayName = 'AngleDoubleUpIcon';
var BanIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
d: "M7 0C5.61553 0 4.26215 0.410543 3.11101 1.17971C1.95987 1.94888 1.06266 3.04213 0.532846 4.32122C0.00303296 5.6003 -0.13559 7.00776 0.134506 8.36563C0.404603 9.7235 1.07129 10.9708 2.05026 11.9497C3.02922 12.9287 4.2765 13.5954 5.63437 13.8655C6.99224 14.1356 8.3997 13.997 9.67879 13.4672C10.9579 12.9373 12.0511 12.0401 12.8203 10.889C13.5895 9.73785 14 8.38447 14 7C14 5.14348 13.2625 3.36301 11.9497 2.05025C10.637 0.737498 8.85652 0 7 0ZM1.16667 7C1.16549 5.65478 1.63303 4.35118 2.48889 3.31333L10.6867 11.5111C9.83309 12.2112 8.79816 12.6544 7.70243 12.789C6.60669 12.9236 5.49527 12.744 4.49764 12.2713C3.50001 11.7986 2.65724 11.0521 2.06751 10.1188C1.47778 9.18558 1.16537 8.10397 1.16667 7ZM11.5111 10.6867L3.31334 2.48889C4.43144 1.57388 5.84966 1.10701 7.29265 1.1789C8.73565 1.2508 10.1004 1.85633 11.1221 2.87795C12.1437 3.89956 12.7492 5.26435 12.8211 6.70735C12.893 8.15034 12.4261 9.56856 11.5111 10.6867Z",
fill: "currentColor"
}));
}));
BanIcon.displayName = 'BanIcon';
var EyeIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M0.0535499 7.25213C0.208567 7.59162 2.40413 12.4 7 12.4C11.5959 12.4 13.7914 7.59162 13.9465 7.25213C13.9487 7.2471 13.9506 7.24304 13.952 7.24001C13.9837 7.16396 14 7.08239 14 7.00001C14 6.91762 13.9837 6.83605 13.952 6.76001C13.9506 6.75697 13.9487 6.75292 13.9465 6.74788C13.7914 6.4084 11.5959 1.60001 7 1.60001C2.40413 1.60001 0.208567 6.40839 0.0535499 6.74788C0.0512519 6.75292 0.0494023 6.75697 0.048 6.76001C0.0163137 6.83605 0 6.91762 0 7.00001C0 7.08239 0.0163137 7.16396 0.048 7.24001C0.0494023 7.24304 0.0512519 7.2471 0.0535499 7.25213ZM7 11.2C3.664 11.2 1.736 7.92001 1.264 7.00001C1.736 6.08001 3.664 2.80001 7 2.80001C10.336 2.80001 12.264 6.08001 12.736 7.00001C12.264 7.92001 10.336 11.2 7 11.2ZM5.55551 9.16182C5.98308 9.44751 6.48576 9.6 7 9.6C7.68891 9.59789 8.349 9.32328 8.83614 8.83614C9.32328 8.349 9.59789 7.68891 9.59999 7C9.59999 6.48576 9.44751 5.98308 9.16182 5.55551C8.87612 5.12794 8.47006 4.7947 7.99497 4.59791C7.51988 4.40112 6.99711 4.34963 6.49276 4.44995C5.98841 4.55027 5.52513 4.7979 5.16152 5.16152C4.7979 5.52513 4.55027 5.98841 4.44995 6.49276C4.34963 6.99711 4.40112 7.51988 4.59791 7.99497C4.7947 8.47006 5.12794 8.87612 5.55551 9.16182ZM6.2222 5.83594C6.45243 5.6821 6.7231 5.6 7 5.6C7.37065 5.6021 7.72553 5.75027 7.98762 6.01237C8.24972 6.27446 8.39789 6.62934 8.4 7C8.4 7.27689 8.31789 7.54756 8.16405 7.77779C8.01022 8.00802 7.79157 8.18746 7.53575 8.29343C7.27994 8.39939 6.99844 8.42711 6.72687 8.37309C6.4553 8.31908 6.20584 8.18574 6.01005 7.98994C5.81425 7.79415 5.68091 7.54469 5.6269 7.27312C5.57288 7.00155 5.6006 6.72006 5.70656 6.46424C5.81253 6.20842 5.99197 5.98977 6.2222 5.83594Z",
fill: "currentColor"
}));
}));
EyeIcon.displayName = 'EyeIcon';
var EyeSlashIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M13.9414 6.74792C13.9437 6.75295 13.9455 6.757 13.9469 6.76003C13.982 6.8394 14.0001 6.9252 14.0001 7.01195C14.0001 7.0987 13.982 7.1845 13.9469 7.26386C13.6004 8.00059 13.1711 8.69549 12.6674 9.33515C12.6115 9.4071 12.54 9.46538 12.4582 9.50556C12.3765 9.54574 12.2866 9.56678 12.1955 9.56707C12.0834 9.56671 11.9737 9.53496 11.8788 9.47541C11.7838 9.41586 11.7074 9.3309 11.6583 9.23015C11.6092 9.12941 11.5893 9.01691 11.6008 8.90543C11.6124 8.79394 11.6549 8.68793 11.7237 8.5994C12.1065 8.09726 12.4437 7.56199 12.7313 6.99995C12.2595 6.08027 10.3402 2.8014 6.99732 2.8014C6.63723 2.80218 6.27816 2.83969 5.92569 2.91336C5.77666 2.93304 5.62568 2.89606 5.50263 2.80972C5.37958 2.72337 5.29344 2.59398 5.26125 2.44714C5.22907 2.30031 5.2532 2.14674 5.32885 2.01685C5.40451 1.88696 5.52618 1.79021 5.66978 1.74576C6.10574 1.64961 6.55089 1.60134 6.99732 1.60181C11.5916 1.60181 13.7864 6.40856 13.9414 6.74792ZM2.20333 1.61685C2.35871 1.61411 2.5091 1.67179 2.6228 1.77774L12.2195 11.3744C12.3318 11.4869 12.3949 11.6393 12.3949 11.7983C12.3949 11.9572 12.3318 12.1097 12.2195 12.2221C12.107 12.3345 11.9546 12.3976 11.7956 12.3976C11.6367 12.3976 11.4842 12.3345 11.3718 12.2221L10.5081 11.3584C9.46549 12.0426 8.24432 12.4042 6.99729 12.3981C2.403 12.3981 0.208197 7.59135 0.0532336 7.25198C0.0509364 7.24694 0.0490875 7.2429 0.0476856 7.23986C0.0162332 7.16518 3.05176e-05 7.08497 3.05176e-05 7.00394C3.05176e-05 6.92291 0.0162332 6.8427 0.0476856 6.76802C0.631261 5.47831 1.46902 4.31959 2.51084 3.36119L1.77509 2.62545C1.66914 2.51175 1.61146 2.36136 1.61421 2.20597C1.61695 2.05059 1.6799 1.90233 1.78979 1.79244C1.89968 1.68254 2.04794 1.6196 2.20333 1.61685ZM7.45314 8.35147L5.68574 6.57609V6.5361C5.5872 6.78938 5.56498 7.06597 5.62183 7.33173C5.67868 7.59749 5.8121 7.84078 6.00563 8.03158C6.19567 8.21043 6.43052 8.33458 6.68533 8.39089C6.94014 8.44721 7.20543 8.43359 7.45314 8.35147ZM1.26327 6.99994C1.7351 7.91163 3.64645 11.1985 6.99729 11.1985C7.9267 11.2048 8.8408 10.9618 9.64438 10.4947L8.35682 9.20718C7.86027 9.51441 7.27449 9.64491 6.69448 9.57752C6.11446 9.51014 5.57421 9.24881 5.16131 8.83592C4.74842 8.42303 4.4871 7.88277 4.41971 7.30276C4.35232 6.72274 4.48282 6.13697 4.79005 5.64041L3.35855 4.2089C2.4954 5.00336 1.78523 5.94935 1.26327 6.99994Z",
fill: "currentColor"
}));
}));
EyeSlashIcon.displayName = 'EyeSlashIcon';
var RefreshIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M6.77051 5.96336C6.84324 5.99355 6.92127 6.00891 7.00002 6.00854C7.07877 6.00891 7.1568 5.99355 7.22953 5.96336C7.30226 5.93317 7.36823 5.88876 7.42357 5.83273L9.82101 3.43529C9.93325 3.32291 9.99629 3.17058 9.99629 3.01175C9.99629 2.85292 9.93325 2.70058 9.82101 2.5882L7.42357 0.190763C7.3687 0.131876 7.30253 0.0846451 7.22901 0.0518865C7.15549 0.019128 7.07612 0.00151319 6.99564 9.32772e-05C6.91517 -0.00132663 6.83523 0.0134773 6.7606 0.0436218C6.68597 0.0737664 6.61817 0.118634 6.56126 0.175548C6.50435 0.232462 6.45948 0.300257 6.42933 0.374888C6.39919 0.449519 6.38439 0.529456 6.38581 0.609933C6.38722 0.690409 6.40484 0.769775 6.4376 0.843296C6.47036 0.916817 6.51759 0.982986 6.57647 1.03786L7.95103 2.41241H6.99998C5.46337 2.41241 3.98969 3.02283 2.90314 4.10938C1.81659 5.19593 1.20618 6.66961 1.20618 8.20622C1.20618 9.74283 1.81659 11.2165 2.90314 12.3031C3.98969 13.3896 5.46337 14 6.99998 14C8.53595 13.9979 10.0084 13.3868 11.0945 12.3007C12.1806 11.2146 12.7917 9.74218 12.7938 8.20622C12.7938 8.04726 12.7306 7.89481 12.6182 7.78241C12.5058 7.67001 12.3534 7.60686 12.1944 7.60686C12.0355 7.60686 11.883 7.67001 11.7706 7.78241C11.6582 7.89481 11.5951 8.04726 11.5951 8.20622C11.5951 9.11504 11.3256 10.0035 10.8207 10.7591C10.3157 11.5148 9.59809 12.1037 8.75845 12.4515C7.9188 12.7993 6.99489 12.8903 6.10353 12.713C5.21217 12.5357 4.3934 12.0981 3.75077 11.4554C3.10813 10.8128 2.67049 9.99404 2.49319 9.10268C2.31589 8.21132 2.40688 7.2874 2.75468 6.44776C3.10247 5.60811 3.69143 4.89046 4.44709 4.38554C5.20275 3.88063 6.09116 3.61113 6.99998 3.61113H7.95098L6.57647 4.98564C6.46423 5.09802 6.40119 5.25035 6.40119 5.40918C6.40119 5.56801 6.46423 5.72035 6.57647 5.83273C6.63181 5.88876 6.69778 5.93317 6.77051 5.96336Z",
fill: "currentColor"
}));
}));
RefreshIcon.displayName = 'RefreshIcon';
var SearchMinusIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M6.0208 12.0411C4.83005 12.0411 3.66604 11.688 2.67596 11.0265C1.68589 10.3649 0.914216 9.42464 0.458534 8.32452C0.00285271 7.22441 -0.116374 6.01388 0.11593 4.84601C0.348235 3.67813 0.921637 2.60537 1.76363 1.76338C2.60562 0.921393 3.67838 0.34799 4.84625 0.115686C6.01412 -0.116618 7.22466 0.00260857 8.32477 0.45829C9.42488 0.913972 10.3652 1.68564 11.0267 2.67572C11.6883 3.66579 12.0414 4.8298 12.0414 6.02056C12.0395 7.41563 11.5542 8.76029 10.6783 9.8305L13.8244 12.9765C13.9367 13.089 13.9997 13.2414 13.9997 13.4003C13.9997 13.5592 13.9367 13.7116 13.8244 13.8241C13.769 13.8801 13.703 13.9245 13.6302 13.9548C13.5575 13.985 13.4794 14.0003 13.4006 14C13.3218 14.0003 13.2437 13.985 13.171 13.9548C13.0982 13.9245 13.0322 13.8801 12.9768 13.8241L9.83082 10.678C8.76059 11.5539 7.4159 12.0393 6.0208 12.0411ZM6.0208 1.20731C5.07199 1.20731 4.14449 1.48867 3.35559 2.0158C2.56669 2.54292 1.95181 3.29215 1.58872 4.16874C1.22562 5.04532 1.13062 6.00989 1.31572 6.94046C1.50083 7.87104 1.95772 8.72583 2.62863 9.39674C3.29954 10.0676 4.15433 10.5245 5.0849 10.7096C6.01548 10.8947 6.98005 10.7997 7.85663 10.4367C8.73322 10.0736 9.48244 9.45868 10.0096 8.66978C10.5367 7.88088 10.8181 6.95337 10.8181 6.00457C10.8181 4.73226 10.3126 3.51206 9.41297 2.6124C8.51331 1.71274 7.29311 1.20731 6.0208 1.20731ZM4.00591 6.60422H8.00362C8.16266 6.60422 8.31518 6.54104 8.42764 6.42859C8.5401 6.31613 8.60328 6.1636 8.60328 6.00456C8.60328 5.84553 8.5401 5.693 8.42764 5.58054C8.31518 5.46809 8.16266 5.40491 8.00362 5.40491H4.00591C3.84687 5.40491 3.69434 5.46809 3.58189 5.58054C3.46943 5.693 3.40625 5.84553 3.40625 6.00456C3.40625 6.1636 3.46943 6.31613 3.58189 6.42859C3.69434 6.54104 3.84687 6.60422 4.00591 6.60422Z",
fill: "currentColor"
}));
}));
SearchMinusIcon.displayName = 'SearchMinusIcon';
var SearchPlusIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M2.67596 11.0265C3.66604 11.688 4.83005 12.0411 6.0208 12.0411C6.81143 12.0411 7.59432 11.8854 8.32477 11.5828C8.86999 11.357 9.37802 11.0526 9.83311 10.6803L12.9768 13.8241C13.0322 13.8801 13.0982 13.9245 13.171 13.9548C13.2437 13.985 13.3218 14.0003 13.4006 14C13.4794 14.0003 13.5575 13.985 13.6302 13.9548C13.703 13.9245 13.769 13.8801 13.8244 13.8241C13.9367 13.7116 13.9997 13.5592 13.9997 13.4003C13.9997 13.2414 13.9367 13.089 13.8244 12.9765L10.6806 9.8328C11.0529 9.37773 11.3572 8.86972 11.5831 8.32452C11.8856 7.59408 12.0414 6.81119 12.0414 6.02056C12.0414 4.8298 11.6883 3.66579 11.0267 2.67572C10.3652 1.68564 9.42488 0.913972 8.32477 0.45829C7.22466 0.00260857 6.01412 -0.116618 4.84625 0.115686C3.67838 0.34799 2.60562 0.921393 1.76363 1.76338C0.921637 2.60537 0.348235 3.67813 0.11593 4.84601C-0.116374 6.01388 0.00285271 7.22441 0.458534 8.32452C0.914216 9.42464 1.68589 10.3649 2.67596 11.0265ZM3.35559 2.0158C4.14449 1.48867 5.07199 1.20731 6.0208 1.20731C7.29311 1.20731 8.51331 1.71274 9.41297 2.6124C10.3126 3.51206 10.8181 4.73226 10.8181 6.00457C10.8181 6.95337 10.5367 7.88088 10.0096 8.66978C9.48244 9.45868 8.73322 10.0736 7.85663 10.4367C6.98005 10.7997 6.01548 10.8947 5.0849 10.7096C4.15433 10.5245 3.29954 10.0676 2.62863 9.39674C1.95772 8.72583 1.50083 7.87104 1.31572 6.94046C1.13062 6.00989 1.22562 5.04532 1.58872 4.16874C1.95181 3.29215 2.56669 2.54292 3.35559 2.0158ZM6.00481 8.60309C5.84641 8.60102 5.69509 8.53718 5.58308 8.42517C5.47107 8.31316 5.40722 8.16183 5.40515 8.00344V6.60422H4.00591C3.84687 6.60422 3.69434 6.54104 3.58189 6.42859C3.46943 6.31613 3.40625 6.1636 3.40625 6.00456C3.40625 5.84553 3.46943 5.693 3.58189 5.58054C3.69434 5.46809 3.84687 5.40491 4.00591 5.40491H5.40515V4.00572C5.40515 3.84668 5.46833 3.69416 5.58079 3.5817C5.69324 3.46924 5.84577 3.40607 6.00481 3.40607C6.16385 3.40607 6.31637 3.46924 6.42883 3.5817C6.54129 3.69416 6.60447 3.84668 6.60447 4.00572V5.40491H8.00362C8.16266 5.40491 8.31518 5.46809 8.42764 5.58054C8.5401 5.693 8.60328 5.84553 8.60328 6.00456C8.60328 6.1636 8.5401 6.31613 8.42764 6.42859C8.31518 6.54104 8.16266 6.60422 8.00362 6.60422H6.60447V8.00344C6.60239 8.16183 6.53855 8.31316 6.42654 8.42517C6.31453 8.53718 6.1632 8.60102 6.00481 8.60309Z",
fill: "currentColor"
}));
}));
SearchPlusIcon.displayName = 'SearchPlusIcon';
var StarIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
d: "M10.9741 13.6721C10.8806 13.6719 10.7886 13.6483 10.7066 13.6033L7.00002 11.6545L3.29345 13.6033C3.19926 13.6539 3.09281 13.6771 2.98612 13.6703C2.87943 13.6636 2.77676 13.6271 2.6897 13.5651C2.60277 13.5014 2.53529 13.4147 2.4948 13.3148C2.45431 13.215 2.44241 13.1058 2.46042 12.9995L3.17881 8.87264L0.167699 5.95324C0.0922333 5.8777 0.039368 5.78258 0.0150625 5.67861C-0.00924303 5.57463 -0.00402231 5.46594 0.030136 5.36477C0.0621323 5.26323 0.122141 5.17278 0.203259 5.10383C0.284377 5.03488 0.383311 4.99023 0.488681 4.97501L4.63087 4.37126L6.48797 0.618832C6.54083 0.530159 6.61581 0.456732 6.70556 0.405741C6.79532 0.35475 6.89678 0.327942 7.00002 0.327942C7.10325 0.327942 7.20471 0.35475 7.29447 0.405741C7.38422 0.456732 7.4592 0.530159 7.51206 0.618832L9.36916 4.37126L13.5114 4.97501C13.6167 4.99023 13.7157 5.03488 13.7968 5.10383C13.8779 5.17278 13.9379 5.26323 13.9699 5.36477C14.0041 5.46594 14.0093 5.57463 13.985 5.67861C13.9607 5.78258 13.9078 5.8777 13.8323 5.95324L10.8212 8.87264L11.532 12.9995C11.55 13.1058 11.5381 13.215 11.4976 13.3148C11.4571 13.4147 11.3896 13.5014 11.3027 13.5651C11.2059 13.632 11.0917 13.6692 10.9741 13.6721ZM7.00002 10.4393C7.09251 10.4404 7.18371 10.4613 7.2675 10.5005L10.2098 12.029L9.65193 8.75036C9.6368 8.6584 9.64343 8.56418 9.6713 8.47526C9.69918 8.38633 9.74751 8.30518 9.81242 8.23832L12.1969 5.94559L8.90298 5.45648C8.81188 5.44198 8.72555 5.406 8.65113 5.35152C8.57671 5.29703 8.51633 5.2256 8.475 5.14314L7.00002 2.1626L5.52503 5.15078C5.4837 5.23324 5.42332 5.30467 5.3489 5.35916C5.27448 5.41365 5.18815 5.44963 5.09705 5.46412L1.80318 5.94559L4.18761 8.23832C4.25252 8.30518 4.30085 8.38633 4.32873 8.47526C4.3566 8.56418 4.36323 8.6584 4.3481 8.75036L3.7902 12.0519L6.73253 10.5234C6.81451 10.4762 6.9058 10.4475 7.00002 10.4393Z",
fill: "currentColor"
}));
}));
StarIcon.displayName = 'StarIcon';
var StarFillIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
d: "M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z",
fill: "currentColor"
}));
}));
StarFillIcon.displayName = 'StarFillIcon';
var UndoIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M6.77042 5.96336C6.84315 5.99355 6.92118 6.00891 6.99993 6.00854C7.07868 6.00891 7.15671 5.99355 7.22944 5.96336C7.30217 5.93317 7.36814 5.88876 7.42348 5.83273C7.53572 5.72035 7.59876 5.56801 7.59876 5.40918C7.59876 5.25035 7.53572 5.09802 7.42348 4.98564L6.04897 3.61113H6.99998C7.9088 3.61113 8.79722 3.88063 9.55288 4.38554C10.3085 4.89046 10.8975 5.60811 11.2453 6.44776C11.5931 7.2874 11.6841 8.21132 11.5068 9.10268C11.3295 9.99404 10.8918 10.8128 10.2492 11.4554C9.60657 12.0981 8.7878 12.5357 7.89644 12.713C7.00508 12.8903 6.08116 12.7993 5.24152 12.4515C4.40188 12.1037 3.68422 11.5148 3.17931 10.7591C2.67439 10.0035 2.4049 9.11504 2.4049 8.20622C2.4049 8.04726 2.34175 7.89481 2.22935 7.78241C2.11695 7.67001 1.9645 7.60686 1.80554 7.60686C1.64658 7.60686 1.49413 7.67001 1.38172 7.78241C1.26932 7.89481 1.20618 8.04726 1.20618 8.20622C1.20829 9.74218 1.81939 11.2146 2.90548 12.3007C3.99157 13.3868 5.46402 13.9979 6.99998 14C8.5366 14 10.0103 13.3896 11.0968 12.3031C12.1834 11.2165 12.7938 9.74283 12.7938 8.20622C12.7938 6.66961 12.1834 5.19593 11.0968 4.10938C10.0103 3.02283 8.5366 2.41241 6.99998 2.41241H6.04892L7.42348 1.03786C7.48236 0.982986 7.5296 0.916817 7.56235 0.843296C7.59511 0.769775 7.61273 0.690409 7.61415 0.609933C7.61557 0.529456 7.60076 0.449519 7.57062 0.374888C7.54047 0.300257 7.49561 0.232462 7.43869 0.175548C7.38178 0.118634 7.31398 0.0737664 7.23935 0.0436218C7.16472 0.0134773 7.08478 -0.00132663 7.00431 9.32772e-05C6.92383 0.00151319 6.84447 0.019128 6.77095 0.0518865C6.69742 0.0846451 6.63126 0.131876 6.57638 0.190763L4.17895 2.5882C4.06671 2.70058 4.00366 2.85292 4.00366 3.01175C4.00366 3.17058 4.06671 3.32291 4.17895 3.43529L6.57638 5.83273C6.63172 5.88876 6.69769 5.93317 6.77042 5.96336Z",
fill: "currentColor"
}));
}));
UndoIcon.displayName = 'UndoIcon';
var DownloadIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var pti = IconBase.getPTI(inProps);
return /*#__PURE__*/React.createElement("svg", _extends({
ref: ref,
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, pti), /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M7.0118 10C6.93296 10.0003 6.85484 9.98495 6.78202 9.95477C6.7091 9.92454 6.64297 9.88008 6.58749 9.82399L3.38288 6.62399C3.27675 6.51025 3.21897 6.35982 3.22171 6.20438C3.22446 6.04893 3.28752 5.90063 3.39761 5.7907C3.5077 5.68077 3.65622 5.6178 3.81188 5.61505C3.96755 5.61231 4.1182 5.67001 4.23211 5.77599L6.41125 7.95201V0.6C6.41125 0.44087 6.47456 0.288258 6.58724 0.175736C6.69993 0.063214 6.85276 0 7.01212 0C7.17148 0 7.32431 0.063214 7.43699 0.175736C7.54968 0.288258 7.61298 0.44087 7.61298 0.6V7.95198L9.7921 5.77599C9.90601 5.67001 10.0567 5.61231 10.2123 5.61505C10.368 5.6178 10.5165 5.68077 10.6266 5.7907C10.7367 5.90063 10.7997 6.04893 10.8025 6.20438C10.8052 6.35982 10.7475 6.51025 10.6413 6.62399L7.43671 9.82399C7.38124 9.88008 7.3151 9.92454 7.24219 9.95477C7.16938 9.98495 7.09127 10.0003 7.01244 10C7.01233 10 7.01223 10 7.01212 10C7.01201 10 7.0119 10 7.0118 10ZM13.45 13.3115C13.0749 13.7235 12.5521 13.971 11.9952 14H2.02889C1.75106 13.9887 1.47819 13.9228 1.2259 13.806C0.973606 13.6893 0.74684 13.524 0.558578 13.3197C0.370316 13.1153 0.224251 12.8759 0.128742 12.6152C0.0332333 12.3544 -0.00984502 12.0774 0.00197194 11.8V9.39999C0.00197194 9.24086 0.065277 9.08825 0.177961 8.97572C0.290645 8.8632 0.443477 8.79999 0.602836 8.79999C0.762195 8.79999 0.915027 8.8632 1.02771 8.97572C1.1404 9.08825 1.2037 9.24086 1.2037 9.39999V11.8C1.18301 12.0375 1.25469 12.2739 1.40385 12.4601C1.55302 12.6463 1.76823 12.768 2.00485 12.8H11.9952C12.2318 12.768 12.4471 12.6463 12.5962 12.4601C12.7454 12.2739 12.8171 12.0375 12.7964 11.8V9.39999C12.7964 9.24086 12.8597 9.08825 12.9724 8.97572C13.085 8.8632 13.2379 8.79999 13.3972 8.79999C13.5566 8.79999 13.7094 8.8632 13.8221 8.97572C13.9348 9.08825 13.9981 9.24086 13.9981 9.39999V11.8C14.0221 12.3563 13.8251 12.8995 13.45 13.3115Z",
fill: "currentColor"
}));
}));
DownloadIcon.displayName = 'DownloadIcon';
var classes$H = {
button: 'p-image-preview-indicator',
mask: 'p-image-mask p-component-overlay p-component-overlay-enter',
toolbar: 'p-image-toolbar',
downloadButton: 'p-image-action p-link',
rotateRightButton: 'p-image-action p-link',
rotateLeftButton: 'p-image-action p-link',
zoomOutButton: 'p-image-action p-link',
zoomInButton: 'p-image-action p-link',
closeButton: 'p-image-action p-link',
preview: 'p-image-preview',
icon: 'p-image-preview-icon',
root: function root(_ref) {
var props = _ref.props;
return classNames('p-image p-component', {
'p-image-preview-container': props.preview
});
},
transition: 'p-image-preview'
};
var styles$y = "\n@layer primereact {\n .p-image-mask {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .p-image-preview-container {\n position: relative;\n display: inline-block;\n line-height: 0;\n }\n \n .p-image-preview-indicator {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n transition: opacity .3s;\n border: none;\n padding: 0;\n }\n \n .p-image-preview-icon {\n font-size: 1.5rem;\n }\n \n .p-image-preview-container:hover > .p-image-preview-indicator {\n opacity: 1;\n cursor: pointer;\n }\n \n .p-image-preview-container > img {\n cursor: pointer;\n }\n \n .p-image-toolbar {\n position: absolute;\n top: 0;\n right: 0;\n display: flex;\n z-index: 1;\n }\n \n .p-image-action.p-link {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n \n .p-image-preview {\n transition: transform .15s;\n max-width: 100vw;\n max-height: 100vh;\n width: 100%;\n height: 100%;\n }\n \n .p-image-preview-enter {\n opacity: 0;\n transform: scale(0.7);\n }\n \n .p-image-preview-enter-active {\n opacity: 1;\n transform: scale(1);\n transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n }\n \n .p-image-preview-enter-done {\n transform: none;\n }\n \n .p-image-preview-exit {\n opacity: 1;\n }\n \n .p-image-preview-exit-active {\n opacity: 0;\n transform: scale(0.7);\n transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);\n }\n}\n";
var inlineStyles$d = {
preview: function preview(_ref2) {
var rotateState = _ref2.rotateState,
scaleState = _ref2.scaleState;
return {
transform: 'rotate(' + rotateState + 'deg) scale(' + scaleState + ')'
};
}
};
var ImageBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Image',
alt: null,
className: null,
closeIcon: null,
crossOrigin: null,
decoding: null,
downloadIcon: null,
downloadable: false,
height: null,
imageClassName: null,
imageStyle: null,
indicatorIcon: null,
loading: null,
onError: null,
onHide: null,
onShow: null,
preview: false,
referrerPolicy: null,
rotateLeftIcon: null,
rotateRightIcon: null,
src: null,
template: null,
useMap: null,
width: null,
zoomInIcon: null,
zoomOutIcon: null,
zoomSrc: null,
children: undefined,
closeOnEscape: true
},
css: {
classes: classes$H,
styles: styles$y,
inlineStyles: inlineStyles$d
}
});
function ownKeys$Y(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$Y(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$Y(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$Y(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Image = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = ImageBase.getProps(inProps, context);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
maskVisibleState = _React$useState2[0],
setMaskVisibleState = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
previewVisibleState = _React$useState4[0],
setPreviewVisibleState = _React$useState4[1];
var _React$useState5 = React.useState(0),
_React$useState6 = _slicedToArray(_React$useState5, 2),
rotateState = _React$useState6[0],
setRotateState = _React$useState6[1];
var _React$useState7 = React.useState(1),
_React$useState8 = _slicedToArray(_React$useState7, 2),
scaleState = _React$useState8[0],
setScaleState = _React$useState8[1];
var elementRef = React.useRef(null);
var imageRef = React.useRef(null);
var maskRef = React.useRef(null);
var previewRef = React.useRef(null);
var previewButton = React.useRef(null);
var zoomOutDisabled = scaleState <= 0.5;
var zoomInDisabled = scaleState >= 1.5;
var _ImageBase$setMetaDat = ImageBase.setMetaData({
props: props,
state: {
maskVisible: maskVisibleState,
previewVisible: previewVisibleState,
rotate: rotateState,
scale: scaleState
}
}),
ptm = _ImageBase$setMetaDat.ptm,
cx = _ImageBase$setMetaDat.cx,
sx = _ImageBase$setMetaDat.sx,
isUnstyled = _ImageBase$setMetaDat.isUnstyled;
useGlobalOnEscapeKey({
callback: function callback() {
hide();
},
when: props.closeOnEscape && maskVisibleState,
priority: [ESC_KEY_HANDLING_PRIORITIES.IMAGE,
// Assume that there could be only one image mask activated, so it's safe
// to provide one and the same priority all the time:
0]
});
useHandleStyle(ImageBase.css.styles, isUnstyled, {
name: 'image'
});
var show = function show() {
if (props.preview) {
setMaskVisibleState(true);
DomHandler.blockBodyScroll();
setTimeout(function () {
setPreviewVisibleState(true);
}, 25);
}
};
var hide = function hide() {
setPreviewVisibleState(false);
DomHandler.unblockBodyScroll();
setRotateState(0);
setScaleState(1);
};
var onMaskClick = function onMaskClick(event) {
var isActionbarTarget = [event.target.classList].includes('p-image-action') || event.target.closest('.p-image-action');
if (isActionbarTarget) {
return;
}
hide();
};
var onMaskKeydown = function onMaskKeydown(event) {
switch (event.code) {
case 'Escape':
hide();
setTimeout(function () {
DomHandler.focus(previewButton.current);
}, 200);
event.preventDefault();
break;
}
};
var onDownload = function onDownload() {
var name = props.alt,
src = props.src;
DomHandler.saveAs({
name: name,
src: src
});
};
var rotateRight = function rotateRight(event) {
event.stopPropagation();
setRotateState(function (prevRotate) {
return prevRotate + 90;
});
};
var rotateLeft = function rotateLeft(event) {
event.stopPropagation();
setRotateState(function (prevRotate) {
return prevRotate - 90;
});
};
var zoomIn = function zoomIn(event) {
event.stopPropagation();
setScaleState(function (prevScale) {
if (zoomInDisabled) {
return prevScale;
}
return prevScale + 0.1;
});
};
var zoomOut = function zoomOut(event) {
event.stopPropagation();
setScaleState(function (prevScale) {
if (zoomOutDisabled) {
return prevScale;
}
return prevScale - 0.1;
});
};
var onEntering = function onEntering() {
ZIndexUtils.set('modal', maskRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, context && context.zIndex.modal || PrimeReact.zIndex.modal);
};
var onEntered = function onEntered() {
props.onShow && props.onShow();
};
var onExit = function onExit() {
!isUnstyled() && DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
};
var onExiting = function onExiting() {
props.onHide && props.onHide();
};
var onExited = function onExited() {
ZIndexUtils.clear(maskRef.current);
setMaskVisibleState(false);
};
useUnmountEffect(function () {
maskRef.current && ZIndexUtils.clear(maskRef.current);
});
var createPreview = function createPreview() {
var ariaLabel = localeOption('aria') ? localeOption('aria').zoomImage : undefined;
var buttonProps = mergeProps({
ref: previewButton,
className: cx('button'),
onClick: show,
type: 'button',
'aria-label': ariaLabel
}, ptm('button'));
if (props.preview) {
return /*#__PURE__*/React.createElement("button", buttonProps, content);
}
return null;
};
var createElement = function createElement() {
var downloadable = props.downloadable,
alt = props.alt,
crossOrigin = props.crossOrigin,
referrerPolicy = props.referrerPolicy,
useMap = props.useMap,
loading = props.loading;
var downloadIconProps = mergeProps(ptm('downloadIcon'));
var rotateRightIconProps = mergeProps(ptm('rotateRightIcon'));
var rotateLeftIconProps = mergeProps(ptm('rotateLeftIcon'));
var zoomOutIconProps = mergeProps(ptm('zoomOutIcon'));
var zoomInIconProps = mergeProps(ptm('zoomInIcon'));
var closeIconProps = mergeProps(ptm('closeIcon'));
var downloadIcon = IconUtils.getJSXIcon(props.downloadIcon || /*#__PURE__*/React.createElement(DownloadIcon, null), _objectSpread$Y({}, downloadIconProps), {
props: props
});
var rotateRightIcon = IconUtils.getJSXIcon(props.rotateRightIcon || /*#__PURE__*/React.createElement(RefreshIcon, null), _objectSpread$Y({}, rotateRightIconProps), {
props: props
});
var rotateLeftIcon = IconUtils.getJSXIcon(props.rotateLeftIcon || /*#__PURE__*/React.createElement(UndoIcon, null), _objectSpread$Y({}, rotateLeftIconProps), {
props: props
});
var zoomOutIcon = IconUtils.getJSXIcon(props.zoomOutIcon || /*#__PURE__*/React.createElement(SearchMinusIcon, null), _objectSpread$Y({}, zoomOutIconProps), {
props: props
});
var zoomInIcon = IconUtils.getJSXIcon(props.zoomInIcon || /*#__PURE__*/React.createElement(SearchPlusIcon, null), _objectSpread$Y({}, zoomInIconProps), {
props: props
});
var closeIcon = IconUtils.getJSXIcon(props.closeIcon || /*#__PURE__*/React.createElement(TimesIcon, null), _objectSpread$Y({}, closeIconProps), {
props: props
});
var maskProps = mergeProps({
ref: maskRef,
role: 'dialog',
className: cx('mask'),
'aria-modal': maskVisibleState,
onClick: onMaskClick,
onKeyDown: onMaskKeydown
}, ptm('mask'));
var toolbarProps = mergeProps({
className: cx('toolbar')
}, ptm('toolbar'));
var downloadButtonProps = mergeProps({
className: cx('downloadButton'),
onPointerUp: onDownload,
type: 'button'
}, ptm('downloadButton'));
var rotateRightButtonProps = mergeProps({
className: cx('rotateRightButton'),
onClick: rotateRight,
type: 'button',
'aria-label': localeOption('aria') ? localeOption('aria').rotateRight : undefined,
'data-pc-group-section': 'action'
}, ptm('rotateRightButton'));
var rotateLeftButtonProps = mergeProps({
className: cx('rotateLeftButton'),
onClick: rotateLeft,
type: 'button',
'aria-label': localeOption('aria') ? localeOption('aria').rotateLeft : undefined,
'data-pc-group-section': 'action'
}, ptm('rotateLeftButton'));
var zoomOutButtonProps = mergeProps({
className: classNames(cx('zoomOutButton'), {
'p-disabled': zoomOutDisabled
}),
style: {
pointerEvents: 'auto'
},
onClick: zoomOut,
type: 'button',
disabled: zoomOutDisabled,
'aria-label': localeOption('aria') ? localeOption('aria').zoomOut : undefined,
'data-pc-group-section': 'action'
}, ptm('zoomOutButton'));
var zoomInButtonProps = mergeProps({
className: classNames(cx('zoomInButton'), {
'p-disabled': zoomInDisabled
}),
style: {
pointerEvents: 'auto'
},
onClick: zoomIn,
type: 'button',
disabled: zoomInDisabled,
'aria-label': localeOption('aria') ? localeOption('aria').zoomIn : undefined,
'data-pc-group-section': 'action'
}, ptm('zoomInButton'));
var closeButtonProps = mergeProps({
className: cx('closeButton'),
type: 'button',
onClick: hide,
'aria-label': localeOption('aria') ? localeOption('aria').close : undefined,
autoFocus: true,
'data-pc-group-section': 'action'
}, ptm('closeButton'));
var previewProps = mergeProps({
src: props.zoomSrc || props.src,
className: cx('preview'),
style: sx('preview', {
rotateState: rotateState,
scaleState: scaleState
}),
crossOrigin: crossOrigin,
referrerPolicy: referrerPolicy,
useMap: useMap,
loading: loading
}, ptm('preview'));
var previewContainerProps = mergeProps({
ref: previewRef
}, ptm('previewContainer'));
var transitionProps = mergeProps({
classNames: cx('transition'),
"in": previewVisibleState,
timeout: {
enter: 150,
exit: 150
},
unmountOnExit: true,
onEntering: onEntering,
onEntered: onEntered,
onExit: onExit,
onExiting: onExiting,
onExited: onExited
}, ptm('transition'));
return /*#__PURE__*/React.createElement("div", maskProps, /*#__PURE__*/React.createElement("div", toolbarProps, downloadable && /*#__PURE__*/React.createElement("button", downloadButtonProps, downloadIcon), /*#__PURE__*/React.createElement("button", rotateRightButtonProps, rotateRightIcon), /*#__PURE__*/React.createElement("button", rotateLeftButtonProps, rotateLeftIcon), /*#__PURE__*/React.createElement("button", zoomOutButtonProps, zoomOutIcon), /*#__PURE__*/React.createElement("button", zoomInButtonProps, zoomInIcon), /*#__PURE__*/React.createElement("button", closeButtonProps, closeIcon)), /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: previewRef
}, transitionProps), /*#__PURE__*/React.createElement("div", previewContainerProps, /*#__PURE__*/React.createElement("img", _extends({
alt: alt
}, previewProps)))));
};
React.useImperativeHandle(ref, function () {
return {
props: props,
show: show,
hide: hide,
getElement: function getElement() {
return elementRef.current;
},
getImage: function getImage() {
return imageRef.current;
}
};
});
var src = props.src,
alt = props.alt,
width = props.width,
height = props.height,
crossOrigin = props.crossOrigin,
referrerPolicy = props.referrerPolicy,
useMap = props.useMap,
loading = props.loading;
var element = createElement();
var iconProp = mergeProps({
className: cx('icon')
}, ptm('icon'));
var icon = props.indicatorIcon || /*#__PURE__*/React.createElement(EyeIcon, iconProp);
var indicatorIcon = IconUtils.getJSXIcon(icon, _objectSpread$Y({}, iconProp), {
props: props
});
var content = props.template ? ObjectUtils.getJSXElement(props.template, props) : indicatorIcon;
var preview = createPreview();
var imageProp = mergeProps({
ref: imageRef,
src: src,
className: props.imageClassName,
width: width,
height: height,
crossOrigin: crossOrigin,
referrerPolicy: referrerPolicy,
useMap: useMap,
loading: loading,
style: props.imageStyle,
onError: props.onError
}, ptm('image'));
var image = props.src && /*#__PURE__*/React.createElement("img", _extends({}, imageProp, {
alt: alt
}));
var rootProps = mergeProps({
ref: elementRef,
className: classNames(props.className, cx('root'))
}, ImageBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("span", rootProps, image, preview, maskVisibleState && /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: document.body
}));
}));
Image.displayName = 'Image';
var classes$G = {
display: function display(_ref) {
var props = _ref.props;
return classNames('p-inplace-display', {
'p-disabled': props.disabled
});
},
root: function root(_ref2) {
var props = _ref2.props;
return classNames('p-inplace p-component', {
'p-inplace-closable': props.closable
});
},
closeButton: 'p-inplace-content-close',
content: 'p-inplace-content'
};
var styles$x = "\n@layer primereact {\n .p-inplace .p-inplace-display {\n display: inline;\n cursor: pointer;\n }\n \n .p-inplace .p-inplace-content {\n display: inline;\n }\n \n .p-fluid .p-inplace.p-inplace-closable .p-inplace-content {\n display: flex;\n }\n \n .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {\n flex: 1 1 auto;\n width: 1%;\n }\n \n .p-inplace-content-close {\n margin-left: .25rem;\n }\n}\n";
ComponentBase.extend({
defaultProps: {
__TYPE: 'InplaceDisplay',
children: undefined
}
});
ComponentBase.extend({
defaultProps: {
__TYPE: 'InplaceContent',
children: undefined
}
});
var InplaceBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Inplace',
style: null,
className: null,
active: false,
closable: false,
closeIcon: null,
disabled: false,
tabIndex: 0,
ariaLabel: null,
onOpen: null,
onClose: null,
onToggle: null,
children: undefined
},
css: {
classes: classes$G,
styles: styles$x
}
});
var InplaceDisplay = function InplaceDisplay(props) {
return props.children;
};
var InplaceContent = function InplaceContent(props) {
return props.children;
};
var Inplace = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = InplaceBase.getProps(inProps, context);
var _React$useState = React.useState(props.active),
_React$useState2 = _slicedToArray(_React$useState, 2),
activeState = _React$useState2[0],
setActiveState = _React$useState2[1];
var elementRef = React.useRef(null);
var active = props.onToggle ? props.active : activeState;
var metaData = {
props: props,
state: {
active: activeState
}
};
var _InplaceBase$setMetaD = InplaceBase.setMetaData(metaData),
ptm = _InplaceBase$setMetaD.ptm,
cx = _InplaceBase$setMetaD.cx,
isUnstyled = _InplaceBase$setMetaD.isUnstyled;
useHandleStyle(InplaceBase.css.styles, isUnstyled, {
name: 'inplace'
});
var open = function open(event) {
if (props.disabled) {
return;
}
props.onOpen && props.onOpen(event);
if (props.onToggle) {
props.onToggle({
originalEvent: event,
value: true
});
} else {
setActiveState(true);
}
};
var close = function close(event) {
if (props.disabled) {
return;
}
props.onClose && props.onClose(event);
if (props.onToggle) {
props.onToggle({
originalEvent: event,
value: false
});
} else {
setActiveState(false);
}
};
var onDisplayKeyDown = function onDisplayKeyDown(event) {
if (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') {
open(event);
event.preventDefault();
}
};
var createDisplay = function createDisplay(content) {
var displayProps = mergeProps({
onClick: open,
className: cx('display'),
onKeyDown: onDisplayKeyDown,
tabIndex: props.tabIndex || '0',
role: 'button',
'aria-label': props.ariaLabel
}, ptm('display'));
return /*#__PURE__*/React.createElement("div", displayProps, content);
};
var createCloseButton = function createCloseButton() {
var icon = props.closeIcon || /*#__PURE__*/React.createElement(TimesIcon, null);
var closeIcon = IconUtils.getJSXIcon(icon, undefined, {
props: props
});
var closeAriaLabel = localeOption('aria') ? localeOption('aria').close : undefined;
if (props.closable) {
var closeButtonProps = mergeProps({
className: cx('closeButton'),
icon: closeIcon,
type: 'button',
onClick: close,
'aria-label': closeAriaLabel,
pt: ptm('closeButton'),
__parentMetadata: {
parent: metaData
}
});
return /*#__PURE__*/React.createElement(Button, closeButtonProps);
}
return null;
};
var createContent = function createContent(content) {
var closeButton = createCloseButton();
var contentProps = mergeProps({
className: cx('content')
}, ptm('content'));
return /*#__PURE__*/React.createElement("div", contentProps, content, closeButton);
};
var createChildren = function createChildren() {
var validChildTypes = ['InplaceContent', 'InplaceDisplay'];
return React.Children.map(props.children, function (child) {
if (active && ObjectUtils.isValidChild(child, 'InplaceContent', validChildTypes)) {
return createContent(child);
} else if (!active && ObjectUtils.isValidChild(child, 'InplaceDisplay', validChildTypes)) {
return createDisplay(child);
}
});
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
useUpdateEffect(function () {
props.active ? open(null) : close(null);
}, [props.active]);
var children = createChildren();
var rootProps = mergeProps({
ref: elementRef,
className: classNames(props.className, cx('root')),
'aria-live': 'polite'
}, InplaceBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("div", rootProps, children);
});
InplaceDisplay.displayName = 'InplaceDisplay';
InplaceContent.displayName = 'InplaceContent';
Inplace.displayName = 'Inplace';
var classes$F = {
root: function root(_ref) {
var props = _ref.props,
context = _ref.context;
return classNames('p-inputmask', {
'p-filled': props.filled,
'p-invalid': props.invalid,
'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
});
}
};
var InputMaskBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'InputMask',
autoClear: true,
autoFocus: false,
className: null,
disabled: false,
id: null,
mask: null,
maxLength: null,
invalid: false,
variant: null,
name: null,
onBlur: null,
onChange: null,
onComplete: null,
onFocus: null,
placeholder: null,
readOnly: false,
required: false,
size: null,
slotChar: '_',
style: null,
tabIndex: null,
tooltip: null,
tooltipOptions: null,
type: 'text',
unmask: false,
value: null,
children: undefined
},
css: {
classes: classes$F
}
});
var InputMask = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var context = React.useContext(PrimeReactContext);
var props = InputMaskBase.getProps(inProps, context);
var elementRef = React.useRef(null);
var firstNonMaskPos = React.useRef(null);
var lastRequiredNonMaskPos = React.useRef(0);
var tests = React.useRef([]);
var buffer = React.useRef([]);
var len = React.useRef(0);
var oldVal = React.useRef(null);
var focus = React.useRef(false);
var focusText = React.useRef(null);
var isValueChecked = React.useRef(null);
var partialPosition = React.useRef(null);
var defaultBuffer = React.useRef(null);
var caretTimeoutId = React.useRef(null);
var androidChrome = React.useRef(false);
var metaData = {
props: props
};
var _InputMaskBase$setMet = InputMaskBase.setMetaData(metaData),
cx = _InputMaskBase$setMet.cx;
var caret = function caret(first, last) {
var range;
var begin;
var end;
var inputEl = elementRef.current;
if (!inputEl || !inputEl.offsetParent || inputEl !== document.activeElement) {
return null;
}
if (typeof first === 'number') {
begin = first;
end = typeof last === 'number' ? last : begin;
if (inputEl.setSelectionRange) {
inputEl.setSelectionRange(begin, end);
} else if (inputEl.createTextRange) {
range = inputEl.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', begin);
range.select();
}
} else if (inputEl.setSelectionRange) {
begin = inputEl.selectionStart;
end = inputEl.selectionEnd;
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
begin = 0 - range.duplicate().moveStart('character', -100000);
end = begin + range.text.length;
}
return {
begin: begin,
end: end
};
};
var isCompleted = function isCompleted() {
for (var i = firstNonMaskPos.current; i <= lastRequiredNonMaskPos.current; i++) {
if (tests.current[i] && buffer.current[i] === getPlaceholder(i)) {
return false;
}
}
return true;
};
var getPlaceholder = React.useCallback(function (i) {
if (i < props.slotChar.length) {
return props.slotChar.charAt(i);
}
return props.slotChar.charAt(0);
}, [props.slotChar]);
var getValue = function getValue() {
return props.unmask ? getUnmaskedValue() : elementRef.current && elementRef.current.value;
};
var seekNext = function seekNext(pos) {
while (++pos < len.current && !tests.current[pos]) {}
return pos;
};
var seekPrev = function seekPrev(pos) {
while (--pos >= 0 && !tests.current[pos]) {}
return pos;
};
var shiftL = function shiftL(begin, end) {
var i;
var j;
if (begin < 0) {
return;
}
for (i = begin, j = seekNext(end); i < len.current; i++) {
if (tests.current[i]) {
if (j < len.current && tests.current[i].test(buffer.current[j])) {
buffer.current[i] = buffer.current[j];
buffer.current[j] = getPlaceholder(j);
} else {
break;
}
j = seekNext(j);
}
}
writeBuffer();
caret(Math.max(firstNonMaskPos.current, begin));
};
var shiftR = function shiftR(pos) {
var i;
var c;
var j;
var t;
for (i = pos, c = getPlaceholder(pos); i < len.current; i++) {
if (tests.current[i]) {
j = seekNext(i);
t = buffer.current[i];
buffer.current[i] = c;
if (j < len.current && tests.current[j].test(t)) {
c = t;
} else {
break;
}
}
}
};
var handleAndroidInput = function handleAndroidInput(e) {
var curVal = elementRef.current.value;
var pos = caret();
if (!pos) {
return;
}
if (oldVal.current.length && oldVal.current.length > curVal.length) {
// a deletion or backspace happened
checkVal(true);
while (pos.begin > 0 && !tests.current[pos.begin - 1]) {
pos.begin--;
}
if (pos.begin === 0) {
while (pos.begin < firstNonMaskPos.current && !tests.current[pos.begin]) {
pos.begin++;
}
}
caret(pos.begin, pos.begin);
} else {
checkVal(true);
while (pos.begin < len.current && !tests.current[pos.begin]) {
pos.begin++;
}
caret(pos.begin, pos.begin);
}
if (props.onComplete && isCompleted()) {
props.onComplete({
originalEvent: e,
value: getValue()
});
}
updateModel(e);
};
var onBlur = function onBlur(e) {
focus.current = false;
checkVal();
updateModel(e);
updateFilledState();
props.onBlur && props.onBlur(e);
if (elementRef.current.value !== focusText.current) {
var event = document.createEvent('HTMLEvents');
event.initEvent('change', true, false);
elementRef.current.dispatchEvent(event);
}
};
var onKeyDown = function onKeyDown(e) {
if (props.readOnly) {
return;
}
var k = e.which || e.keyCode;
var pos;
var begin;
var end;
oldVal.current = elementRef.current.value;
//backspace, delete, and escape get special treatment
if (k === 8 || k === 46 || DomHandler.isIOS() && k === 127) {
pos = caret();
if (!pos) {
return;
}
begin = pos.begin;
end = pos.end;
if (end - begin === 0) {
begin = k !== 46 ? seekPrev(begin) : end = seekNext(begin - 1);
end = k === 46 ? seekNext(end) : end;
}
clearBuffer(begin, end);
shiftL(begin, end - 1);
updateModel(e);
e.preventDefault();
} else if (k === 13) {
// enter
onBlur(e);
updateModel(e);
} else if (k === 27) {
// escape
elementRef.current.value = focusText.current;
caret(0, checkVal());
updateModel(e);
e.preventDefault();
}
};
var onKeyPress = function onKeyPress(e) {
if (props.readOnly) {
return;
}
var pos = caret();
if (!pos) {
return;
}
var k = e.which || e.keyCode;
var p;
var c;
var next;
var completed;
if (e.ctrlKey || e.altKey || e.metaKey || k < 32) {
//Ignore
return;
} else if (k && k !== 13) {
if (pos.end - pos.begin !== 0) {
clearBuffer(pos.begin, pos.end);
shiftL(pos.begin, pos.end - 1);
}
p = seekNext(pos.begin - 1);
if (p < len.current) {
c = String.fromCharCode(k);
if (tests.current[p].test(c)) {
shiftR(p);
buffer.current[p] = c;
writeBuffer();
next = seekNext(p);
if (DomHandler.isAndroid()) {
//Path for CSP Violation on FireFox OS 1.1
var proxy = function proxy() {
caret(next);
};
setTimeout(proxy, 0);
} else {
caret(next);
}
if (pos.begin <= lastRequiredNonMaskPos.current) {
completed = isCompleted();
}
}
}
e.preventDefault();
}
updateModel(e);
if (props.onComplete && completed) {
props.onComplete({
originalEvent: e,
value: getValue()
});
}
};
var clearBuffer = function clearBuffer(start, end) {
var i;
for (i = start; i < end && i < len.current; i++) {
if (tests.current[i]) {
buffer.current[i] = getPlaceholder(i);
}
}
};
var writeBuffer = function writeBuffer() {
if (elementRef.current) {
elementRef.current.value = buffer.current.join('');
}
};
var checkVal = function checkVal(allow) {
isValueChecked.current = true;
//try to place characters where they belong
var test = elementRef.current && elementRef.current.value;
var lastMatch = -1;
var i;
var c;
var pos;
for (i = 0, pos = 0; i < len.current; i++) {
if (tests.current[i]) {
buffer.current[i] = getPlaceholder(i);
while (pos++ < test.length) {
c = test.charAt(pos - 1);
if (tests.current[i].test(c)) {
buffer.current[i] = c;
lastMatch = i;
break;
}
}
if (pos > test.length) {
clearBuffer(i + 1, len.current);
break;
}
} else {
if (buffer.current[i] === test.charAt(pos)) {
pos++;
}
if (i < partialPosition.current) {
lastMatch = i;
}
}
}
if (allow) {
writeBuffer();
} else if (lastMatch + 1 < partialPosition.current) {
if (props.autoClear || buffer.current.join('') === defaultBuffer.current) {
// Invalid value. Remove it and replace it with the
// mask, which is the default behavior.
if (elementRef.current && elementRef.current.value) {
elementRef.current.value = '';
}
clearBuffer(0, len.current);
} else {
// Invalid value, but we opt to show the value to the
// user and allow them to correct their mistake.
writeBuffer();
}
} else {
writeBuffer();
if (elementRef.current) {
elementRef.current.value = elementRef.current.value.substring(0, lastMatch + 1);
}
}
return partialPosition.current ? i : firstNonMaskPos.current;
};
var onFocus = function onFocus(e) {
if (props.readOnly) {
return;
}
focus.current = true;
clearTimeout(caretTimeoutId.current);
var pos;
if (elementRef.current) {
focusText.current = elementRef.current.value;
} else {
focusText.current = '';
}
pos = checkVal() || 0;
caretTimeoutId.current = setTimeout(function () {
if (elementRef.current !== document.activeElement) {
return;
}
writeBuffer();
if (pos === props.mask.replace('?', '').length) {
caret(0, pos);
} else {
caret(pos);
}
updateFilledState();
}, 100);
props.onFocus && props.onFocus(e);
};
var onInput = function onInput(event) {
androidChrome.current ? handleAndroidInput(event) : handleInputChange(event);
};
var handleInputChange = function handleInputChange(e) {
var isOnPaste = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
if (props.readOnly) {
return;
}
if (!isOnPaste) {
var pos = checkVal(true);
caret(pos);
}
updateModel(e);
if (props.onComplete && isCompleted()) {
props.onComplete({
originalEvent: e,
value: getValue()
});
}
};
var getUnmaskedValue = React.useCallback(function () {
var unmaskedBuffer = [];
for (var i = 0; i < buffer.current.length; i++) {
var c = buffer.current[i];
if (tests.current[i] && c !== getPlaceholder(i)) {
unmaskedBuffer.push(c);
}
}
return unmaskedBuffer.join('');
}, [getPlaceholder]);
var updateModel = function updateModel(e) {
if (props.onChange) {
var val = props.unmask ? getUnmaskedValue() : e && e.target.value;
props.onChange({
originalEvent: e,
value: defaultBuffer.current !== val ? val : '',
stopPropagation: function stopPropagation() {
e.stopPropagation();
},
preventDefault: function preventDefault() {
e.preventDefault();
},
target: {
name: props.name,
id: props.id,
value: defaultBuffer.current !== val ? val : ''
}
});
}
};
var updateFilledState = function updateFilledState() {
if (elementRef.current && elementRef.current.value && elementRef.current.value.length > 0) {
DomHandler.addClass(elementRef.current, 'p-filled');
} else {
DomHandler.removeClass(elementRef.current, 'p-filled');
}
};
var updateValue = function updateValue(allow) {
var pos;
if (elementRef.current) {
if (ObjectUtils.isEmpty(props.value)) {
elementRef.current.value = '';
} else {
elementRef.current.value = props.value;
pos = checkVal(allow);
setTimeout(function () {
if (elementRef.current) {
writeBuffer();
return checkVal(allow);
}
}, 10);
}
focusText.current = elementRef.current.value;
}
updateFilledState();
return pos;
};
var isValueUpdated = React.useCallback(function () {
return props.unmask ? props.value !== getUnmaskedValue() : defaultBuffer.current !== elementRef.current.value && elementRef.current.value !== props.value;
}, [props.unmask, props.value, getUnmaskedValue]);
var init = function init() {
if (props.mask) {
tests.current = [];
partialPosition.current = props.mask.length;
len.current = props.mask.length;
firstNonMaskPos.current = null;
var defs = {
9: '[0-9]',
a: '[A-Za-z]',
'*': '[A-Za-z0-9]'
};
androidChrome.current = DomHandler.isChrome() && DomHandler.isAndroid();
var maskTokens = props.mask.split('');
for (var i = 0; i < maskTokens.length; i++) {
var c = maskTokens[i];
if (c === '?') {
len.current--;
partialPosition.current = i;
} else if (defs[c]) {
tests.current.push(new RegExp(defs[c]));
if (firstNonMaskPos.current === null) {
firstNonMaskPos.current = tests.current.length - 1;
}
if (i < partialPosition.current) {
lastRequiredNonMaskPos.current = tests.current.length - 1;
}
} else {
tests.current.push(null);
}
}
buffer.current = [];
for (var _i = 0; _i < maskTokens.length; _i++) {
var _c = maskTokens[_i];
if (_c !== '?') {
if (defs[_c]) {
buffer.current.push(getPlaceholder(_i));
} else {
buffer.current.push(_c);
}
}
}
defaultBuffer.current = buffer.current.join('');
}
};
React.useImperativeHandle(ref, function () {
return {
props: props,
focus: function focus() {
return DomHandler.focus(elementRef.current);
},
getElement: function getElement() {
return elementRef.current;
}
};
});
React.useEffect(function () {
ObjectUtils.combinedRefs(elementRef, ref);
}, [elementRef, ref]);
useMountEffect(function () {
init();
updateValue();
});
useUpdateEffect(function () {
init();
caret(updateValue(true));
if (props.unmask) {
updateModel();
}
}, [props.mask]);
useUpdateEffect(function () {
if (isValueUpdated()) {
updateValue();
}
}, [isValueUpdated]);
useUpdateEffect(function () {
updateFilledState();
}, [props.disabled]);
var otherProps = InputMaskBase.getOtherProps(props);
var className = classNames(props.className, cx('root', {
context: context
}));
return /*#__PURE__*/React.createElement(InputText, _extends({
ref: elementRef,
autoFocus: props.autoFocus,
id: props.id,
type: props.type,
name: props.name,
style: props.style,
className: className
}, otherProps, {
placeholder: props.placeholder,
size: props.size,
maxLength: props.maxLength,
tabIndex: props.tabIndex,
disabled: props.disabled,
invalid: props.invalid,
readOnly: props.readOnly,
onFocus: onFocus,
onBlur: onBlur,
onKeyDown: onKeyDown,
onKeyPress: onKeyPress,
onInput: onInput,
onPaste: function onPaste(e) {
return handleInputChange(e, true);
},
required: props.required,
tooltip: props.tooltip,
tooltipOptions: props.tooltipOptions,
pt: props.pt,
unstyled: props.unstyled,
__parentMetadata: {
parent: metaData
}
}));
}));
InputMask.displayName = 'InputMask';
var classes$E = {
root: function root(_ref) {
var props = _ref.props,
checked = _ref.checked;
return classNames('p-inputswitch p-component', {
'p-highlight': checked,
'p-disabled': props.disabled,
'p-invalid': props.invalid
});
},
input: 'p-inputswitch-input',
slider: 'p-inputswitch-slider'
};
var InputSwitchBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'InputSwitch',
autoFocus: false,
checked: false,
className: null,
disabled: false,
falseValue: false,
id: null,
inputId: null,
inputRef: null,
invalid: false,
name: null,
onBlur: null,
onChange: null,
onFocus: null,
style: null,
tabIndex: null,
tooltip: null,
tooltipOptions: null,
trueValue: true,
children: undefined
},
css: {
classes: classes$E
}
});
function ownKeys$X(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$X(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$X(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$X(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var InputSwitch = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = InputSwitchBase.getProps(inProps, context);
var _InputSwitchBase$setM = InputSwitchBase.setMetaData({
props: props
}),
ptm = _InputSwitchBase$setM.ptm,
cx = _InputSwitchBase$setM.cx,
isUnstyled = _InputSwitchBase$setM.isUnstyled;
useHandleStyle(InputSwitchBase.css.styles, isUnstyled, {
name: 'inputswitch'
});
var elementRef = React.useRef(null);
var inputRef = React.useRef(props.inputRef);
var checked = props.checked === props.trueValue;
var onChange = function onChange(event) {
if (props.onChange) {
var value = checked ? props.falseValue : props.trueValue;
props.onChange({
originalEvent: event,
value: value,
stopPropagation: function stopPropagation() {
event === null || event === void 0 || event.stopPropagation();
},
preventDefault: function preventDefault() {
event === null || event === void 0 || event.preventDefault();
},
target: {
name: props.name,
id: props.id,
value: value
}
});
}
};
var onFocus = function onFocus(event) {
var _props$onFocus;
props === null || props === void 0 || (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, event);
};
var onBlur = function onBlur(event) {
var _props$onBlur;
props === null || props === void 0 || (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, event);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
focus: function focus() {
return DomHandler.focus(inputRef.current);
},
getElement: function getElement() {
return elementRef.current;
},
getInput: function getInput() {
return inputRef.current;
}
};
});
React.useEffect(function () {
ObjectUtils.combinedRefs(inputRef, props.inputRef);
}, [inputRef, props.inputRef]);
useMountEffect(function () {
if (props.autoFocus) {
DomHandler.focus(inputRef.current, props.autoFocus);
}
});
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = InputSwitchBase.getOtherProps(props);
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var rootProps = mergeProps({
className: classNames(props.className, cx('root', {
checked: checked
})),
style: props.style,
role: 'checkbox',
'aria-checked': checked,
'data-p-highlight': checked,
'data-p-disabled': props.disabled
}, otherProps, ptm('root'));
var inputProps = mergeProps(_objectSpread$X({
type: 'checkbox',
id: props.inputId,
name: props.name,
checked: checked,
onChange: onChange,
onFocus: onFocus,
onBlur: onBlur,
disabled: props.disabled,
role: 'switch',
tabIndex: props.tabIndex,
'aria-checked': checked,
className: cx('input')
}, ariaProps), ptm('input'));
var sliderProps = mergeProps({
className: cx('slider')
}, ptm('slider'));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
ref: elementRef
}, rootProps), /*#__PURE__*/React.createElement("input", _extends({
ref: inputRef
}, inputProps)), /*#__PURE__*/React.createElement("span", sliderProps)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip,
pt: ptm('tooltip')
}, props.tooltipOptions)));
}));
InputSwitch.displayName = 'InputSwitch';
var classes$D = {
root: function root(_ref) {
var props = _ref.props,
context = _ref.context,
isFilled = _ref.isFilled;
return classNames('p-inputtextarea p-inputtext p-component', {
'p-disabled': props.disabled,
'p-filled': isFilled,
'p-inputtextarea-resizable': props.autoResize,
'p-invalid': props.invalid,
'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
});
}
};
var styles$w = "\n@layer primereact {\n .p-inputtextarea-resizable {\n overflow: hidden;\n resize: none;\n }\n \n .p-fluid .p-inputtextarea {\n width: 100%;\n }\n}\n";
var InputTextareaBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'InputTextarea',
__parentMetadata: null,
autoResize: false,
invalid: false,
variant: null,
keyfilter: null,
onBlur: null,
onFocus: null,
onBeforeInput: null,
onInput: null,
onKeyDown: null,
onKeyUp: null,
onPaste: null,
tooltip: null,
tooltipOptions: null,
validateOnly: false,
children: undefined,
className: null
},
css: {
classes: classes$D,
styles: styles$w
}
});
function ownKeys$W(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$W(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$W(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$W(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var InputTextarea = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = InputTextareaBase.getProps(inProps, context);
var elementRef = React.useRef(ref);
var cachedScrollHeight = React.useRef(0);
var _InputTextareaBase$se = InputTextareaBase.setMetaData(_objectSpread$W(_objectSpread$W({
props: props
}, props.__parentMetadata), {}, {
context: {
disabled: props.disabled
}
})),
ptm = _InputTextareaBase$se.ptm,
cx = _InputTextareaBase$se.cx,
isUnstyled = _InputTextareaBase$se.isUnstyled;
useHandleStyle(InputTextareaBase.css.styles, isUnstyled, {
name: 'inputtextarea'
});
var onFocus = function onFocus(event) {
if (props.autoResize) {
resize();
}
props.onFocus && props.onFocus(event);
};
var onBlur = function onBlur(event) {
if (props.autoResize) {
resize();
}
props.onBlur && props.onBlur(event);
};
var onKeyUp = function onKeyUp(event) {
if (props.autoResize) {
resize();
}
props.onKeyUp && props.onKeyUp(event);
};
var onKeyDown = function onKeyDown(event) {
props.onKeyDown && props.onKeyDown(event);
if (props.keyfilter) {
KeyFilter.onKeyPress(event, props.keyfilter, props.validateOnly);
}
};
var onBeforeInput = function onBeforeInput(event) {
props.onBeforeInput && props.onBeforeInput(event);
if (props.keyfilter) {
KeyFilter.onBeforeInput(event, props.keyfilter, props.validateOnly);
}
};
var onPaste = function onPaste(event) {
props.onPaste && props.onPaste(event);
if (props.keyfilter) {
KeyFilter.onPaste(event, props.keyfilter, props.validateOnly);
}
};
var onInput = function onInput(event) {
var target = event.target;
if (props.autoResize) {
resize(ObjectUtils.isEmpty(target.value));
}
props.onInput && props.onInput(event);
ObjectUtils.isNotEmpty(target.value) ? DomHandler.addClass(target, 'p-filled') : DomHandler.removeClass(target, 'p-filled');
};
var resize = function resize(initial) {
var inputEl = elementRef.current;
if (inputEl && isVisible()) {
if (!cachedScrollHeight.current) {
cachedScrollHeight.current = inputEl.scrollHeight;
inputEl.style.overflow = 'hidden';
}
if (cachedScrollHeight.current !== inputEl.scrollHeight || initial) {
inputEl.style.height = '';
inputEl.style.height = inputEl.scrollHeight + 'px';
if (parseFloat(inputEl.style.height) >= parseFloat(inputEl.style.maxHeight)) {
inputEl.style.overflowY = 'scroll';
inputEl.style.height = inputEl.style.maxHeight;
} else {
inputEl.style.overflow = 'hidden';
}
cachedScrollHeight.current = inputEl.scrollHeight;
}
}
};
var isVisible = function isVisible() {
if (DomHandler.isVisible(elementRef.current)) {
var rect = elementRef.current.getBoundingClientRect();
return rect.width > 0 && rect.height > 0;
}
return false;
};
React.useEffect(function () {
ObjectUtils.combinedRefs(elementRef, ref);
}, [elementRef, ref]);
React.useEffect(function () {
if (props.autoResize) {
resize(true);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.autoResize, props.value]);
var isFilled = React.useMemo(function () {
return ObjectUtils.isNotEmpty(props.value) || ObjectUtils.isNotEmpty(props.defaultValue);
}, [props.value, props.defaultValue]);
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var rootProps = mergeProps({
ref: elementRef,
className: classNames(props.className, cx('root', {
context: context,
isFilled: isFilled
})),
onFocus: onFocus,
onBlur: onBlur,
onKeyUp: onKeyUp,
onKeyDown: onKeyDown,
onBeforeInput: onBeforeInput,
onInput: onInput,
onPaste: onPaste
}, InputTextareaBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("textarea", rootProps), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip,
pt: ptm('tooltip')
}, props.tooltipOptions)));
}));
InputTextarea.displayName = 'InputTextarea';
var KnobBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Knob',
id: null,
style: null,
className: null,
value: null,
size: 100,
disabled: false,
readOnly: false,
showValue: true,
tabIndex: 0,
step: 1,
min: 0,
max: 100,
strokeWidth: 14,
name: null,
valueColor: 'var(--primary-color, Black)',
rangeColor: 'var(--surface-border, LightGray)',
textColor: 'var(--text-color-secondary, Black)',
valueTemplate: '{value}',
onChange: null,
children: undefined
},
css: {
classes: {
range: 'p-knob-range',
value: 'p-knob-value',
label: 'p-knob-text',
root: function root(_ref) {
var props = _ref.props;
return classNames('p-knob p-component', {
'p-disabled': props.disabled
});
}
},
styles: "\n @keyframes dash-frame {\n 100% {\n stroke-dashoffset: 0;\n }\n }\n @layer primereact {\n .p-knob-range {\n fill: none;\n transition: stroke .1s ease-in;\n cursor: pointer;\n }\n .p-knob-value {\n animation-name: dash-frame;\n animation-fill-mode: forwards;\n fill: none;\n }\n .p-knob-text {\n font-size: 1.3rem;\n text-align: center;\n }\n }\n "
}
});
var radius = 40;
var midX = 50;
var midY = 50;
var minRadians = 4 * Math.PI / 3;
var maxRadians = -Math.PI / 3;
var Knob = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = KnobBase.getProps(inProps, context);
var _KnobBase$setMetaData = KnobBase.setMetaData({
props: props
}),
ptm = _KnobBase$setMetaData.ptm,
cx = _KnobBase$setMetaData.cx,
isUnstyled = _KnobBase$setMetaData.isUnstyled;
useHandleStyle(KnobBase.css.styles, isUnstyled, {
name: 'knob'
});
var elementRef = React.useRef(null);
var enabled = !props.disabled && !props.readOnly;
var _useEventListener = useEventListener({
target: 'window',
type: 'mousemove',
listener: function listener(event) {
updateValue(event.offsetX, event.offsetY);
event.preventDefault();
},
when: enabled
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindWindowMouseMoveListener = _useEventListener2[0],
unbindWindowMouseMoveListener = _useEventListener2[1];
var _useEventListener3 = useEventListener({
target: 'window',
type: 'mouseup',
listener: function listener(event) {
unbindWindowMouseMoveListener();
unbindWindowMouseUpListener();
event.preventDefault();
},
when: enabled
}),
_useEventListener4 = _slicedToArray(_useEventListener3, 2),
bindWindowMouseUpListener = _useEventListener4[0],
unbindWindowMouseUpListener = _useEventListener4[1];
var _useEventListener5 = useEventListener({
target: 'window',
type: 'touchmove',
listener: function listener(event) {
if (event.touches.length === 1) {
var rect = elementRef.current.getBoundingClientRect();
var touch = event.targetTouches.item(0);
var offsetX = touch.clientX - rect.left;
var offsetY = touch.clientY - rect.top;
updateValue(offsetX, offsetY);
event.preventDefault();
}
},
when: enabled
}),
_useEventListener6 = _slicedToArray(_useEventListener5, 2),
bindWindowTouchMoveListener = _useEventListener6[0],
unbindWindowTouchMoveListener = _useEventListener6[1];
var _useEventListener7 = useEventListener({
target: 'window',
type: 'touchend',
listener: function listener() {
unbindWindowTouchMoveListener();
unbindWindowTouchEndListener();
},
when: enabled
}),
_useEventListener8 = _slicedToArray(_useEventListener7, 2),
bindWindowTouchEndListener = _useEventListener8[0],
unbindWindowTouchEndListener = _useEventListener8[1];
var mapRange = function mapRange(x, inMin, inMax, outMin, outMax) {
return (x - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
};
var zeroRadians = function zeroRadians() {
return mapRange(props.min > 0 && props.max > 0 ? props.min : 0, props.min, props.max, minRadians, maxRadians);
};
var valueRadians = function valueRadians() {
return mapRange(props.value, props.min, props.max, minRadians, maxRadians);
};
var minX = function minX() {
return midX + Math.cos(minRadians) * radius;
};
var minY = function minY() {
return midY - Math.sin(minRadians) * radius;
};
var maxX = function maxX() {
return midX + Math.cos(maxRadians) * radius;
};
var maxY = function maxY() {
return midY - Math.sin(maxRadians) * radius;
};
var zeroX = function zeroX() {
return midX + Math.cos(zeroRadians()) * radius;
};
var zeroY = function zeroY() {
return midY - Math.sin(zeroRadians()) * radius;
};
var valueX = function valueX() {
return midX + Math.cos(valueRadians()) * radius;
};
var valueY = function valueY() {
return midY - Math.sin(valueRadians()) * radius;
};
var largeArc = function largeArc() {
return Math.abs(zeroRadians() - valueRadians()) < Math.PI ? 0 : 1;
};
var sweep = function sweep() {
return valueRadians() > zeroRadians() ? 0 : 1;
};
var rangePath = "M ".concat(minX(), " ").concat(minY(), " A ").concat(radius, " ").concat(radius, " 0 1 1 ").concat(maxX(), " ").concat(maxY());
var valuePath = "M ".concat(zeroX(), " ").concat(zeroY(), " A ").concat(radius, " ").concat(radius, " 0 ").concat(largeArc(), " ").concat(sweep(), " ").concat(valueX(), " ").concat(valueY());
var valueToDisplay = function valueToDisplay() {
return props.valueTemplate.replace('{value}', props.value.toString());
};
var updateValue = function updateValue(offsetX, offsetY) {
var dx = offsetX - props.size / 2;
var dy = props.size / 2 - offsetY;
var angle = Math.atan2(dy, dx);
var start = -Math.PI / 2 - Math.PI / 6;
updateModel(angle, start);
};
var updateModel = function updateModel(angle, start) {
var mappedValue;
if (angle > maxRadians) {
mappedValue = mapRange(angle, minRadians, maxRadians, props.min, props.max);
} else if (angle < start) {
mappedValue = mapRange(angle + 2 * Math.PI, minRadians, maxRadians, props.min, props.max);
} else {
return;
}
if (props.onChange) {
props.onChange({
value: Math.round((mappedValue - props.min) / props.step) * props.step + props.min
});
}
};
var updateModelValue = function updateModelValue(newValue) {
var currentValue;
if (newValue > props.max) {
currentValue = props.max;
} else if (newValue < props.min) {
currentValue = props.min;
} else {
currentValue = newValue;
}
if (props.onChange) {
props.onChange({
value: currentValue
});
}
};
var _onClick = function onClick(event) {
if (!props.disabled && !props.readOnly) {
updateValue(event.nativeEvent.offsetX, event.nativeEvent.offsetY);
}
};
var _onMouseDown = function onMouseDown(event) {
bindWindowMouseMoveListener();
bindWindowMouseUpListener();
event.preventDefault();
};
var _onMouseUp = function onMouseUp() {
unbindWindowMouseMoveListener();
unbindWindowMouseUpListener();
};
var _onTouchStart = function onTouchStart() {
bindWindowTouchMoveListener();
bindWindowTouchEndListener();
};
var _onTouchEnd = function onTouchEnd() {
unbindWindowTouchMoveListener();
unbindWindowTouchEndListener();
};
var _onKeyDown = function onKeyDown(event) {
if (!props.disabled && !props.readonly) {
switch (event.code) {
case 'ArrowRight':
case 'ArrowUp':
event.preventDefault();
updateModelValue(props.value + 1);
break;
case 'ArrowLeft':
case 'ArrowDown':
{
event.preventDefault();
updateModelValue(props.value - 1);
break;
}
case 'Home':
{
event.preventDefault();
updateModelValue(props.min);
break;
}
case 'End':
{
event.preventDefault();
updateModelValue(props.max);
break;
}
case 'PageUp':
{
event.preventDefault();
updateModelValue(props.value + 10);
break;
}
case 'PageDown':
{
event.preventDefault();
updateModelValue(props.value - 10);
break;
}
}
}
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var labelProps = mergeProps({
x: 50,
y: 57,
textAnchor: 'middle',
fill: props.textColor,
className: cx('label'),
name: props.name
}, ptm('label'));
var text = props.showValue && /*#__PURE__*/React.createElement("text", labelProps, valueToDisplay());
var rootProps = mergeProps({
ref: elementRef,
id: props.id,
className: classNames(props.className, cx('root')),
style: props.style
}, ptm('root'));
var svgProps = mergeProps({
viewBox: '0 0 100 100',
width: props.size,
height: props.size,
'aria-valuemin': props.min,
'aria-valuemax': props.max,
'aria-valuenow': props.value,
'aria-labelledby': props.ariaLabelledby,
'aria-label': props.ariaLabel,
role: 'slider',
tabIndex: props.readonly || props.disabled ? -1 : props.tabIndex,
onClick: function onClick(e) {
return _onClick(e);
},
onMouseDown: function onMouseDown(e) {
return _onMouseDown(e);
},
onMouseUp: function onMouseUp(e) {
return _onMouseUp();
},
onTouchStart: function onTouchStart(e) {
return _onTouchStart();
},
onTouchEnd: function onTouchEnd(e) {
return _onTouchEnd();
},
onKeyDown: function onKeyDown(e) {
return _onKeyDown(e);
}
}, ptm('svg'));
var rangeProps = mergeProps({
d: rangePath,
strokeWidth: props.strokeWidth,
stroke: props.rangeColor,
className: cx('range')
}, ptm('range'));
var valueProps = mergeProps({
d: valuePath,
strokeWidth: props.strokeWidth,
stroke: props.valueColor,
className: cx('value')
}, ptm('value'));
return /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement("svg", svgProps, /*#__PURE__*/React.createElement("path", rangeProps), /*#__PURE__*/React.createElement("path", valueProps), text));
}));
Knob.displayName = 'Knob';
var classes$C = {
itemGroup: 'p-listbox-item-group',
emptyMessage: 'p-listbox-empty-message',
list: 'p-listbox-list',
wrapper: function wrapper(_ref) {
var props = _ref.props;
return classNames('p-listbox-list-wrapper', props.listClassName);
},
root: function root(_ref2) {
var props = _ref2.props;
return classNames('p-listbox p-component', {
'p-disabled': props.disabled,
'p-invalid': props.invalid
}, props.className);
},
item: function item(_ref3) {
var props = _ref3.props;
return classNames('p-listbox-item', {
'p-highlight': props.selected,
'p-focus': props.focusedOptionIndex === props.index,
'p-disabled': props.disabled
}, props.option.className);
},
filterContainer: 'p-listbox-filter-container',
filterIcon: 'p-listbox-filter-icon',
filterInput: 'p-listbox-filter',
header: 'p-listbox-header'
};
var styles$v = "\n@layer primereact {\n .p-listbox-list-wrapper {\n overflow: auto;\n }\n \n .p-listbox-list {\n list-style-type: none;\n margin: 0;\n padding: 0;\n }\n \n .p-listbox-item {\n cursor: pointer;\n position: relative;\n overflow: hidden;\n outline: none;\n }\n \n .p-listbox-filter-container {\n position: relative;\n }\n \n .p-listbox-filter-icon {\n position: absolute;\n top: 50%;\n margin-top: -.5rem;\n }\n \n .p-listbox-filter {\n width: 100%;\n }\n}\n";
var inlineStyles$c = {
itemGroup: function itemGroup(_ref4) {
var scrollerOptions = _ref4.scrollerOptions;
return {
height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined
};
},
list: function list(_ref5) {
var options = _ref5.options,
props = _ref5.props;
return props.virtualScrollerOptions ? options.style : undefined;
}
};
var ListBoxBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'ListBox',
className: null,
dataKey: null,
disabled: null,
emptyFilterMessage: null,
emptyMessage: null,
filter: false,
filterIcon: null,
filterBy: null,
filterInputProps: null,
filterLocale: undefined,
filterMatchMode: 'contains',
filterPlaceholder: null,
filterTemplate: null,
filterValue: null,
focusOnHover: true,
id: null,
itemTemplate: null,
invalid: false,
listClassName: null,
listStyle: null,
metaKeySelection: false,
selectOnFocus: false,
autoOptionFocus: false,
multiple: false,
onChange: null,
onFilterValueChange: null,
optionDisabled: null,
optionGroupChildren: null,
optionGroupLabel: null,
optionGroupTemplate: null,
optionLabel: null,
optionValue: null,
options: null,
style: null,
tabIndex: 0,
tooltip: null,
tooltipOptions: null,
value: null,
virtualScrollerOptions: null,
children: undefined
},
css: {
classes: classes$C,
styles: styles$v,
inlineStyles: inlineStyles$c
}
});
function ownKeys$V(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$V(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$V(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$V(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var ListBoxHeader = /*#__PURE__*/React.memo(function (props) {
var mergeProps = useMergeProps();
var _props$ptCallbacks = props.ptCallbacks,
ptm = _props$ptCallbacks.ptm,
cx = _props$ptCallbacks.cx;
var getPTOptions = function getPTOptions(key, options) {
return ptm(key, _objectSpread$V({
hostName: props.hostName
}, options));
};
var filterOptions = {
filter: function filter(e) {
return onFilter(e);
},
reset: function reset() {
return props.resetFilter();
}
};
var onFilter = function onFilter(event) {
if (props.onFilter) {
props.onFilter({
originalEvent: event,
value: event.target.value
});
}
};
var createHeader = function createHeader() {
var filterIconProps = mergeProps({
className: cx('filterIcon')
}, getPTOptions('filterIcon'));
var icon = props.filterIcon || /*#__PURE__*/React.createElement(SearchIcon, filterIconProps);
var filterIcon = IconUtils.getJSXIcon(icon, _objectSpread$V({}, filterIconProps), {
props: props
});
var headerProps = mergeProps({
className: cx('header')
}, getPTOptions('header'));
var filterContainerProps = mergeProps({
className: cx('filterContainer')
}, getPTOptions('filterContainer'));
var content = /*#__PURE__*/React.createElement("div", filterContainerProps, /*#__PURE__*/React.createElement(InputText, _extends({
type: "text",
value: props.filter,
onChange: onFilter,
className: cx('filterInput'),
disabled: props.disabled,
placeholder: props.filterPlaceholder
}, props.filterInputProps, {
pt: ptm('filterInput'),
unstyled: props.unstyled,
__parentMetadata: {
parent: props.metaData
}
})), filterIcon);
if (props.filterTemplate) {
var defaultContentOptions = {
className: 'p-listbox-filter-container',
element: content,
filterOptions: filterOptions,
filterInputChange: onFilter,
filterIconClassName: 'p-dropdown-filter-icon',
props: props
};
content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
}
return /*#__PURE__*/React.createElement("div", headerProps, content);
};
var content = createHeader();
return /*#__PURE__*/React.createElement(React.Fragment, null, content);
});
ListBoxHeader.displayName = 'ListBoxHeader';
var ListBoxItem = /*#__PURE__*/React.memo(function (props) {
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var mergeProps = useMergeProps();
var _props$ptCallbacks = props.ptCallbacks,
ptm = _props$ptCallbacks.ptm,
cx = _props$ptCallbacks.cx;
var getPTOptions = function getPTOptions(key) {
return ptm(key, {
hostName: props.hostName,
context: {
selected: props.selected,
disabled: props.disabled,
focused: focusedState,
focusedOptionIndex: props.focusedOptionIndex
}
});
};
var onFocus = function onFocus(event) {
setFocusedState(true);
};
var onBlur = function onBlur(event) {
setFocusedState(false);
};
var onTouchEnd = function onTouchEnd(event) {
if (props.onTouchEnd) {
props.onTouchEnd({
originalEvent: event,
option: props.option
});
}
};
var content = props.template ? ObjectUtils.getJSXElement(props.template, props.option) : props.label;
var itemProps = mergeProps({
id: props.id,
className: cx('item', {
props: props
}),
style: props.style,
onClick: function onClick(event) {
return props.onClick(event, props.option, props.index);
},
onTouchEnd: onTouchEnd,
onFocus: onFocus,
onBlur: onBlur,
tabIndex: '-1',
onMouseDown: function onMouseDown(event) {
return props.onOptionMouseDown(event, props.index);
},
onMouseMove: function onMouseMove(event) {
return props.onOptionMouseMove(event, props.index);
},
'aria-label': props.label,
role: 'option',
'aria-selected': props.selected,
'aria-disabled': props.disabled,
'data-p-disabled': props.disabled
}, getPTOptions('item'));
return /*#__PURE__*/React.createElement("li", _extends({}, itemProps, {
key: props.optionKey
}), content, /*#__PURE__*/React.createElement(Ripple, null));
});
ListBoxItem.displayName = 'ListBoxItem';
function ownKeys$U(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$U(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$U(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$U(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _createForOfIteratorHelper$8(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$8(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray$8(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$8(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$8(r, a) : void 0; } }
function _arrayLikeToArray$8(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; }
var ListBox = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = ListBoxBase.getProps(inProps, context);
var _React$useState = React.useState(null),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedOptionIndex = _React$useState2[0],
setFocusedOptionIndex = _React$useState2[1];
var searchTimeout = React.useRef(null);
var firstHiddenFocusableElement = React.useRef(null);
var lastHiddenFocusableElement = React.useRef(null);
var _React$useState3 = React.useState(-1),
_React$useState4 = _slicedToArray(_React$useState3, 2),
startRangeIndex = _React$useState4[0],
setStartRangeIndex = _React$useState4[1];
var _React$useState5 = React.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
focused = _React$useState6[0],
setFocused = _React$useState6[1];
var _React$useState7 = React.useState(''),
_React$useState8 = _slicedToArray(_React$useState7, 2),
filterValueState = _React$useState8[0],
setFilterValueState = _React$useState8[1];
var _React$useState9 = React.useState(''),
_React$useState10 = _slicedToArray(_React$useState9, 2),
searchValue = _React$useState10[0],
setSearchValue = _React$useState10[1];
var elementRef = React.useRef(null);
var virtualScrollerRef = React.useRef(null);
var id = React.useRef(null);
var listRef = React.useRef(null);
var optionTouched = React.useRef(false);
var filteredValue = (props.onFilterValueChange ? props.filterValue : filterValueState) || '';
var hasFilter = filteredValue && filteredValue.trim().length > 0;
var metaData = {
props: props,
state: {
filterValue: filteredValue
}
};
var ptCallbacks = ListBoxBase.setMetaData(metaData);
useHandleStyle(ListBoxBase.css.styles, ptCallbacks.isUnstyled, {
name: 'listbox'
});
var onOptionSelect = function onOptionSelect(event, option) {
var index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : -1;
if (props.disabled || isOptionDisabled(option)) {
return;
}
props.multiple ? onOptionSelectMultiple(event.originalEvent, option) : onOptionSelectSingle(event.originalEvent, option);
optionTouched.current = false;
index !== -1 && setFocusedOptionIndex(index);
};
var onOptionMouseDown = function onOptionMouseDown(event, index) {
changeFocusedOptionIndex(event, index);
};
var onOptionMouseMove = function onOptionMouseMove(event, index) {
if (props.focusOnHover && focused) {
changeFocusedOptionIndex(event, index);
}
};
var onOptionTouchEnd = function onOptionTouchEnd() {
if (props.disabled) {
return;
}
optionTouched.current = true;
};
var onOptionSelectSingle = function onOptionSelectSingle(event, option) {
var selected = isSelected(option);
var valueChanged = false;
var value = null;
var metaSelection = optionTouched.current ? false : props.metaKeySelection;
if (metaSelection) {
var metaKey = event.metaKey || event.ctrlKey;
if (selected) {
if (metaKey) {
value = null;
valueChanged = true;
}
} else {
value = getOptionValue(option);
valueChanged = true;
}
} else {
value = selected ? null : getOptionValue(option);
valueChanged = true;
}
if (valueChanged) {
updateModel(event, value);
}
};
var onOptionSelectMultiple = function onOptionSelectMultiple(event, option) {
var selected = isSelected(option);
var valueChanged = false;
var value = null;
var metaSelection = optionTouched ? false : props.metaKeySelection;
if (metaSelection) {
var metaKey = event.metaKey || event.ctrlKey;
if (selected) {
if (metaKey) {
value = removeOption(option);
} else {
value = [getOptionValue(option)];
}
valueChanged = true;
} else {
value = metaKey ? props.value || [] : [];
value = [].concat(_toConsumableArray(value), [getOptionValue(option)]);
valueChanged = true;
}
} else {
if (selected) {
value = removeOption(option);
} else {
value = [].concat(_toConsumableArray(props.value || []), [getOptionValue(option)]);
}
valueChanged = true;
}
if (valueChanged) {
props.onChange({
originalEvent: event,
value: value,
stopPropagation: function stopPropagation() {
event === null || event === void 0 || event.stopPropagation();
},
preventDefault: function preventDefault() {
event === null || event === void 0 || event.preventDefault();
},
target: {
name: props.name,
id: props.id,
value: value
}
});
}
};
var hasSelectedOption = function hasSelectedOption() {
return ObjectUtils.isNotEmpty(props.value);
};
var isOptionGroup = function isOptionGroup(option) {
return props.optionGroupLabel && option.optionGroup && option.group;
};
var isValidOption = function isValidOption(option) {
return ObjectUtils.isNotEmpty(option) && !(isOptionDisabled(option) || isOptionGroup(option));
};
var isValidSelectedOption = function isValidSelectedOption(option) {
return isValidOption(option) && isSelected(option);
};
var findFirstOptionIndex = function findFirstOptionIndex() {
return visibleOptions.findIndex(function (option) {
return isValidOption(option);
});
};
var findLastSelectedOptionIndex = function findLastSelectedOptionIndex() {
return hasSelectedOption() ? ObjectUtils.findLastIndex(visibleOptions, function (option) {
return isValidSelectedOption(option);
}) : -1;
};
var findSelectedOptionIndex = function findSelectedOptionIndex() {
if (hasSelectedOption()) {
if (props.multiple) {
var _loop = function _loop() {
var value = props.value[index];
var matchedOptionIndex = visibleOptions.findIndex(function (option) {
return isValidSelectedOption(option) && isEquals(value, getOptionValue(option));
});
if (matchedOptionIndex > -1) {
return {
v: matchedOptionIndex
};
}
},
_ret;
for (var index = props.value.length - 1; index >= 0; index--) {
_ret = _loop();
if (_ret) return _ret.v;
}
} else {
return visibleOptions.findIndex(function (option) {
return isValidSelectedOption(option);
});
}
}
return -1;
};
var findFirstSelectedOptionIndex = function findFirstSelectedOptionIndex() {
return hasSelectedOption() ? visibleOptions.findIndex(function (option) {
return isValidSelectedOption(option);
}) : -1;
};
var findLastOptionIndex = function findLastOptionIndex() {
return ObjectUtils.findLastIndex(visibleOptions, function (option) {
return isValidOption(option);
});
};
var findNextOptionIndex = function findNextOptionIndex(index) {
var matchedOptionIndex = index < visibleOptions.length - 1 ? visibleOptions.slice(index + 1).findIndex(function (option) {
return isValidOption(option);
}) : -1;
return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
};
var findPrevOptionIndex = function findPrevOptionIndex(index) {
var matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(visibleOptions.slice(0, index), function (option) {
return isValidOption(option);
}) : -1;
return matchedOptionIndex > -1 ? matchedOptionIndex : index;
};
var focusedOptionId = function focusedOptionId() {
return focusedOptionIndex !== -1 ? "".concat(id.current, "_").concat(focusedOptionIndex) : null;
};
var findNearestSelectedOptionIndex = function findNearestSelectedOptionIndex(index) {
var firstCheckUp = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var matchedOptionIndex = -1;
if (hasSelectedOption()) {
if (firstCheckUp) {
matchedOptionIndex = findPrevSelectedOptionIndex(index);
matchedOptionIndex = matchedOptionIndex === -1 ? findNextSelectedOptionIndex(index) : matchedOptionIndex;
} else {
matchedOptionIndex = findNextSelectedOptionIndex(index);
matchedOptionIndex = matchedOptionIndex === -1 ? findPrevSelectedOptionIndex(index) : matchedOptionIndex;
}
}
return matchedOptionIndex > -1 ? matchedOptionIndex : index;
};
var isOptionMatched = function isOptionMatched(option) {
var _getOptionLabel;
return isValidOption(option) && ((_getOptionLabel = getOptionLabel(option)) === null || _getOptionLabel === void 0 ? void 0 : _getOptionLabel.toLocaleLowerCase(props.filterLocale).startsWith(searchValue.toLocaleLowerCase(props.filterLocale)));
};
var searchOptions = function searchOptions(event, _char) {
setSearchValue((searchValue || '') + _char);
var optionIndex = -1;
if (ObjectUtils.isNotEmpty(searchValue)) {
if (focusedOptionIndex !== -1) {
optionIndex = visibleOptions.slice(focusedOptionIndex).findIndex(function (option) {
return isOptionMatched(option);
});
optionIndex = optionIndex === -1 ? visibleOptions.slice(0, focusedOptionIndex).findIndex(function (option) {
return isOptionMatched(option);
}) : optionIndex + focusedOptionIndex;
} else {
optionIndex = visibleOptions.findIndex(function (option) {
return isOptionMatched(option);
});
}
if (optionIndex === -1 && focusedOptionIndex === -1) {
optionIndex = findFirstFocusedOptionIndex();
}
if (optionIndex !== -1) {
changeFocusedOptionIndex(event, optionIndex);
}
}
if (searchTimeout.current) {
clearTimeout(searchTimeout.current);
}
searchTimeout.current = setTimeout(function () {
setSearchValue('');
searchTimeout.current = null;
}, 500);
};
var findNextSelectedOptionIndex = function findNextSelectedOptionIndex(index) {
var matchedOptionIndex = hasSelectedOption() && index < visibleOptions.length - 1 ? visibleOptions.slice(index + 1).findIndex(function (option) {
return isValidSelectedOption(option);
}) : -1;
return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : -1;
};
var findPrevSelectedOptionIndex = function findPrevSelectedOptionIndex(index) {
var matchedOptionIndex = hasSelectedOption() && index > 0 ? ObjectUtils.findLastIndex(visibleOptions.slice(0, index), function (option) {
return isValidSelectedOption(option);
}) : -1;
return matchedOptionIndex > -1 ? matchedOptionIndex : -1;
};
var onOptionSelectRange = function onOptionSelectRange(event) {
var start = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
var end = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : -1;
start === -1 && (start = findNearestSelectedOptionIndex(end, true));
end === -1 && (end = findNearestSelectedOptionIndex(start));
if (start !== -1 && end !== -1) {
var rangeStart = Math.min(start, end);
var rangeEnd = Math.max(start, end);
var value = visibleOptions.slice(rangeStart, rangeEnd + 1).filter(function (option) {
return isValidOption(option);
}).map(function (option) {
return getOptionValue(option);
});
updateModel(event, value);
}
};
var findFirstFocusedOptionIndex = function findFirstFocusedOptionIndex() {
var selectedIndex = findFirstSelectedOptionIndex();
return selectedIndex < 0 ? findFirstOptionIndex() : selectedIndex;
};
var findLastFocusedOptionIndex = function findLastFocusedOptionIndex() {
var selectedIndex = findLastSelectedOptionIndex();
return selectedIndex < 0 ? findLastOptionIndex() : selectedIndex;
};
var changeFocusedOptionIndex = function changeFocusedOptionIndex(event, index) {
if (focusedOptionIndex !== index) {
setFocusedOptionIndex(index);
scrollInView();
if (event && props.selectOnFocus && !props.multiple) {
onOptionSelect(event, visibleOptions[index]);
}
}
};
var onArrowDownKey = function onArrowDownKey(event) {
var optionIndex = focusedOptionIndex !== -1 ? findNextOptionIndex(focusedOptionIndex) : findFirstFocusedOptionIndex();
if (props.multiple && event.shiftKey) {
onOptionSelectRange(event, startRangeIndex, optionIndex);
}
changeFocusedOptionIndex(event, optionIndex);
event.preventDefault();
};
var onArrowUpKey = function onArrowUpKey(event) {
var optionIndex = focusedOptionIndex !== -1 ? findPrevOptionIndex(focusedOptionIndex) : findLastFocusedOptionIndex();
if (props.multiple && event.shiftKey) {
onOptionSelectRange(event, optionIndex, startRangeIndex);
}
changeFocusedOptionIndex(event, optionIndex);
event.preventDefault();
};
var onEnterKey = function onEnterKey(event) {
if (focusedOptionIndex !== -1) {
if (props.multiple && event.shiftKey) {
onOptionSelectRange(event, focusedOptionIndex);
} else {
onOptionSelect(event, visibleOptions[focusedOptionIndex]);
}
}
event.preventDefault();
};
var onSpaceKey = function onSpaceKey(event) {
onEnterKey(event);
};
var onShiftKey = function onShiftKey() {
setStartRangeIndex(focusedOptionIndex);
};
var onHomeKey = function onHomeKey(event) {
var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
if (pressedInInputText) {
event.currentTarget.setSelectionRange(0, 0);
setFocusedOptionIndex(-1);
} else {
var metaKey = event.metaKey || event.ctrlKey;
var optionIndex = findFirstOptionIndex();
if (props.multiple && event.shiftKey && metaKey) {
onOptionSelectRange(event, optionIndex, startRangeIndex);
}
changeFocusedOptionIndex(event, optionIndex);
}
event.preventDefault();
};
var onEndKey = function onEndKey(event) {
var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
if (pressedInInputText) {
var target = event.currentTarget;
var len = target.value.length;
target.setSelectionRange(len, len);
setFocusedOptionIndex(-1);
} else {
var metaKey = event.metaKey || event.ctrlKey;
var optionIndex = findLastOptionIndex();
if (props.multiple && event.shiftKey && metaKey) {
onOptionSelectRange(event, startRangeIndex, optionIndex);
}
changeFocusedOptionIndex(event, optionIndex);
}
event.preventDefault();
};
var onPageUpKey = function onPageUpKey(event) {
scrollInView(0);
event.preventDefault();
};
var onPageDownKey = function onPageDownKey(event) {
scrollInView(visibleOptions.length - 1);
event.preventDefault();
};
var onListKeyDown = function onListKeyDown(event) {
var metaKey = event.metaKey || event.ctrlKey;
switch (event.code) {
case 'ArrowDown':
onArrowDownKey(event);
break;
case 'ArrowUp':
onArrowUpKey(event);
break;
case 'Home':
onHomeKey(event);
break;
case 'End':
onEndKey(event);
break;
case 'PageDown':
onPageDownKey(event);
break;
case 'PageUp':
onPageUpKey(event);
break;
case 'Enter':
case 'NumpadEnter':
case 'Space':
onSpaceKey(event);
event.preventDefault();
break;
case 'Tab':
// NOOP
break;
case 'ShiftLeft':
case 'ShiftRight':
onShiftKey();
break;
default:
if (props.multiple && event.key === 'a' && metaKey) {
var value = visibleOptions.filter(function (option) {
return isValidOption(option);
}).map(function (option) {
return getOptionValue(option);
});
updateModel(event, value);
event.preventDefault();
break;
}
if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
searchOptions(event, event.key);
event.preventDefault();
}
break;
}
};
var scrollInView = function scrollInView() {
var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
setTimeout(function () {
// As long as this is a timeout - there is not guarantee that listRef will still
// exist by the moment of calling that function. So, if list is already destroyed
// by this moment - do nothing:
if (!listRef.current) return;
var idx = index !== -1 ? "".concat(id.current, "_").concat(index) : focusedOptionId();
var element = listRef.current.querySelector("li[id=\"".concat(idx, "\"]"));
if (element) {
element.scrollIntoView({
block: 'nearest',
inline: 'nearest',
behavior: 'smooth'
});
} else if (props.virtualScrollerOptions) {
virtualScrollerRef.current && virtualScrollerRef.current.scrollToIndex(index !== -1 ? index : focusedOptionIndex);
}
}, 0);
};
var onFilter = function onFilter(event) {
virtualScrollerRef.current && virtualScrollerRef.current.scrollToIndex(0);
var originalEvent = event.originalEvent,
value = event.value;
if (props.onFilterValueChange) {
props.onFilterValueChange({
originalEvent: originalEvent,
value: value
});
} else {
setFilterValueState(value);
}
};
var resetFilter = function resetFilter() {
setFilterValueState('');
props.onFilter && props.onFilter({
filter: ''
});
};
var autoUpdateModel = function autoUpdateModel() {
var isFocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : focused;
if (props.selectOnFocus && props.autoOptionFocus && !hasSelectedOption() && !props.multiple && isFocus) {
var currentFocusOptionIndex = findFirstFocusedOptionIndex();
onOptionSelect(null, visibleOptions[currentFocusOptionIndex]);
setFocusedOptionIndex(currentFocusOptionIndex);
}
};
var updateModel = function updateModel(event, value) {
if (props.onChange) {
props.onChange({
originalEvent: event,
value: value,
stopPropagation: function stopPropagation() {
event === null || event === void 0 || event.stopPropagation();
},
preventDefault: function preventDefault() {
event === null || event === void 0 || event.preventDefault();
},
target: {
name: props.name,
id: props.id,
value: value
}
});
}
};
var removeOption = function removeOption(option) {
return props.value.filter(function (val) {
return !ObjectUtils.equals(val, getOptionValue(option), props.dataKey);
});
};
var getSelectedOptionIndex = function getSelectedOptionIndex() {
if (props.value != null && visibleOptions) {
if (props.optionGroupLabel) {
for (var i = 0; i < visibleOptions.length; i++) {
var selectedOptionIndex = findOptionIndexInList(props.value, getOptionGroupChildren(visibleOptions[i]));
if (selectedOptionIndex !== -1) {
return {
group: i,
option: selectedOptionIndex
};
}
}
} else {
return findOptionIndexInList(props.value, visibleOptions);
}
}
return -1;
};
var equalityKey = function equalityKey() {
return props.optionValue ? null : props.dataKey;
};
var findOptionIndexInList = function findOptionIndexInList(value, list) {
var key = equalityKey();
return list.findIndex(function (item) {
return ObjectUtils.equals(value, getOptionValue(item), key);
});
};
var isEquals = function isEquals(value1, value2) {
return ObjectUtils.equals(value1, value2, equalityKey());
};
var isSelected = function isSelected(option) {
var optionValue = getOptionValue(option);
if (props.multiple) {
return (props.value || []).some(function (value) {
return isEquals(value, optionValue);
});
}
return isEquals(props.value, optionValue);
};
var getOptionLabel = function getOptionLabel(option) {
return props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option && option.label !== undefined ? option.label : option;
};
var getOptionValue = function getOptionValue(option) {
return props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option && option.value !== undefined ? option.value : option;
};
var getOptionRenderKey = function getOptionRenderKey(option) {
return props.dataKey ? ObjectUtils.resolveFieldData(option, props.dataKey) : getOptionLabel(option);
};
var isOptionDisabled = function isOptionDisabled(option) {
if (props.optionDisabled) {
return ObjectUtils.isFunction(props.optionDisabled) ? props.optionDisabled(option) : ObjectUtils.resolveFieldData(option, props.optionDisabled);
}
return option && option.disabled !== undefined ? option.disabled : false;
};
var onFirstHiddenFocus = function onFirstHiddenFocus() {
DomHandler.focus(listRef.current);
var firstFocusableEl = DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-p-hidden-focusable="true"])');
lastHiddenFocusableElement.current.tabIndex = DomHandler.isElement(firstFocusableEl) ? undefined : -1;
firstHiddenFocusableElement.current.tabIndex = -1;
changeFocusedOptionIndex(null, 0);
};
var onLastHiddenFocus = function onLastHiddenFocus(event) {
var relatedTarget = event.relatedTarget;
if (relatedTarget === listRef.current) {
var firstFocusableEl = DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-p-hidden-focusable="true"])');
DomHandler.focus(firstFocusableEl);
firstHiddenFocusableElement.current.tabIndex = undefined;
} else {
DomHandler.focus(firstHiddenFocusableElement.current);
}
lastHiddenFocusableElement.current.tabIndex = -1;
};
var onListFocus = function onListFocus() {
setFocused(true);
setFocusedOptionIndex(focusedOptionIndex !== -1 ? focusedOptionIndex : props.autoOptionFocus ? findFirstFocusedOptionIndex() : findSelectedOptionIndex());
autoUpdateModel(true);
};
var onListBlur = function onListBlur() {
setFocused(false);
setFocusedOptionIndex(-1);
setStartRangeIndex(-1);
setSearchValue('');
};
var getOptionGroupRenderKey = function getOptionGroupRenderKey(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
};
var getOptionGroupLabel = function getOptionGroupLabel(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
};
var getOptionGroupChildren = function getOptionGroupChildren(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupChildren);
};
var flatOptions = function flatOptions(options) {
return (options || []).reduce(function (result, option, index) {
result.push({
optionGroup: option,
group: true,
index: index,
code: option.code,
label: option.label
});
var optionGroupChildren = getOptionGroupChildren(option);
optionGroupChildren && optionGroupChildren.forEach(function (o) {
return result.push(o);
});
return result;
}, []);
};
var getVisibleOptions = function getVisibleOptions() {
var options = props.optionGroupLabel ? flatOptions(props.options) : props.options;
if (hasFilter) {
var filterValue = filteredValue.trim().toLocaleLowerCase(props.filterLocale);
var searchFields = props.filterBy ? props.filterBy.split(',') : [props.optionLabel || 'label'];
if (props.optionGroupLabel) {
var filteredGroups = [];
var _iterator = _createForOfIteratorHelper$8(props.options),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var optgroup = _step.value;
var filteredSubOptions = FilterService.filter(getOptionGroupChildren(optgroup), searchFields, filterValue, props.filterMatchMode, props.filterLocale);
if (filteredSubOptions && filteredSubOptions.length) {
filteredGroups.push(_objectSpread$U(_objectSpread$U({}, optgroup), {
items: filteredSubOptions
}));
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return flatOptions(filteredGroups);
}
return FilterService.filter(options, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
}
return options;
};
var scrollToSelectedIndex = function scrollToSelectedIndex() {
if (virtualScrollerRef.current) {
var selectedIndex = getSelectedOptionIndex();
if (selectedIndex !== -1) {
setTimeout(function () {
return virtualScrollerRef.current.scrollToIndex(selectedIndex);
}, 0);
}
}
};
React.useImperativeHandle(ref, function () {
return {
props: props,
focus: function focus() {
return DomHandler.focusFirstElement(elementRef.current);
},
getElement: function getElement() {
return elementRef.current;
},
getVirtualScroller: function getVirtualScroller() {
return virtualScrollerRef.current;
}
};
});
useMountEffect(function () {
scrollToSelectedIndex();
id.current = UniqueComponentId();
});
var createHeader = function createHeader() {
return props.filter ? /*#__PURE__*/React.createElement(ListBoxHeader, {
hostName: "ListBox",
filter: filteredValue,
filterIcon: props.filterIcon,
onFilter: onFilter,
resetFilter: resetFilter,
filterTemplate: props.filterTemplate,
disabled: props.disabled,
filterPlaceholder: props.filterPlaceholder,
filterInputProps: props.filterInputProps,
ptCallbacks: ptCallbacks,
metaData: metaData
}) : null;
};
var createItem = function createItem(option, index) {
var scrollerOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var style = {
height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined
};
if (option.group && option.optionGroup && props.optionGroupLabel) {
var groupContent = props.optionGroupTemplate ? ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : getOptionGroupLabel(option);
var key = index + '_' + getOptionGroupRenderKey(option);
var itemGroupProps = mergeProps({
className: ptCallbacks.cx('itemGroup'),
style: ptCallbacks.sx('itemGroup', {
scrollerOptions: scrollerOptions
}),
role: 'group'
}, ptCallbacks.ptm('itemGroup'));
return /*#__PURE__*/React.createElement("li", _extends({}, itemGroupProps, {
key: key
}), groupContent);
}
var optionLabel = getOptionLabel(option);
var optionKey = index + '_' + getOptionRenderKey(option);
var disabled = isOptionDisabled(option);
return /*#__PURE__*/React.createElement(ListBoxItem, {
id: id.current + '_' + index,
hostName: "ListBox",
optionKey: optionKey,
key: optionKey,
label: optionLabel,
index: index,
onOptionMouseDown: onOptionMouseDown,
onOptionMouseMove: onOptionMouseMove,
focusedOptionIndex: focusedOptionIndex,
option: option,
style: style,
template: props.itemTemplate,
selected: isSelected(option),
onClick: onOptionSelect,
onTouchEnd: onOptionTouchEnd,
disabled: disabled,
ptCallbacks: ptCallbacks,
metaData: metaData
});
};
var createItems = function createItems() {
if (ObjectUtils.isNotEmpty(visibleOptions)) {
return visibleOptions.map(createItem);
} else if (hasFilter) {
return createEmptyMessage(props.emptyFilterMessage, true);
}
return createEmptyMessage(props.emptyMessage);
};
var createEmptyMessage = function createEmptyMessage(emptyMessage, isFilter) {
var emptyMessageProps = mergeProps({
className: ptCallbacks.cx('emptyMessage')
}, ptCallbacks.ptm('emptyMessage'));
var message = ObjectUtils.getJSXElement(emptyMessage, props) || localeOption(isFilter ? 'emptyFilterMessage' : 'emptyMessage');
return /*#__PURE__*/React.createElement("li", emptyMessageProps, message);
};
var createList = function createList() {
if (props.virtualScrollerOptions) {
var virtualScrollerProps = _objectSpread$U(_objectSpread$U({}, props.virtualScrollerOptions), {
items: visibleOptions,
onLazyLoad: function onLazyLoad(event) {
return props.virtualScrollerOptions.onLazyLoad(_objectSpread$U(_objectSpread$U({}, event), {
filter: visibleOptions
}));
},
itemTemplate: function itemTemplate(item, options) {
return item && createItem(item, options.index, options);
},
contentTemplate: function contentTemplate(options) {
var listProps = mergeProps(_objectSpread$U({
ref: listRef,
style: ptCallbacks.sx('list', {
options: options
}),
className: ptCallbacks.cx('list', {
options: options
}),
role: 'listbox',
tabIndex: '-1',
'aria-multiselectable': props.multiple,
onFocus: onListFocus,
onBlur: onListBlur,
onKeyDown: onListKeyDown
}, ariaProps), ptCallbacks.ptm('list'));
return /*#__PURE__*/React.createElement("ul", listProps, options.children);
}
});
return /*#__PURE__*/React.createElement(VirtualScroller, _extends({
ref: virtualScrollerRef
}, virtualScrollerProps, {
pt: ptCallbacks.ptm('virtualScroller')
}));
}
var items = createItems();
var listProps = mergeProps(_objectSpread$U({
ref: listRef,
className: ptCallbacks.cx('list'),
role: 'listbox',
'aria-multiselectable': props.multiple,
tabIndex: '-1',
onFocus: onListFocus,
onBlur: onListBlur,
onKeyDown: onListKeyDown
}, ariaProps), ptCallbacks.ptm('list'));
return /*#__PURE__*/React.createElement("ul", listProps, items);
};
var visibleOptions = getVisibleOptions();
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = ListBoxBase.getOtherProps(props);
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var list = createList();
var header = createHeader();
var wrapperProps = mergeProps({
className: ptCallbacks.cx('wrapper'),
style: props.listStyle
}, ptCallbacks.ptm('wrapper'));
var rootProps = mergeProps({
ref: elementRef,
id: props.id,
className: ptCallbacks.cx('root'),
style: props.style
}, ListBoxBase.getOtherProps(props), ptCallbacks.ptm('root'));
var hiddenFirstElement = mergeProps({
ref: firstHiddenFocusableElement,
role: 'presentation',
'aria-hidden': 'true',
className: 'p-hidden-accessible p-hidden-focusable',
tabIndex: !props.disabled ? props.tabIndex : -1,
onFocus: onFirstHiddenFocus,
'data-p-hidden-accessible': true,
'data-p-hidden-focusable': true
}, ptCallbacks.ptm('hiddenFirstFocusableEl'));
var hiddenLastElement = mergeProps({
ref: lastHiddenFocusableElement,
role: 'presentation',
'aria-hidden': 'true',
className: 'p-hidden-accessible p-hidden-focusable',
tabIndex: !props.disabled ? props.tabIndex : -1,
onFocus: onLastHiddenFocus,
'data-p-hidden-accessible': true,
'data-p-hidden-focusable': true
}, ptCallbacks.ptm('hiddenLastFocusableEl'));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement("span", hiddenFirstElement), header, /*#__PURE__*/React.createElement("div", wrapperProps, list), /*#__PURE__*/React.createElement("span", hiddenLastElement)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip,
pt: ptCallbacks.ptm('tooltip')
}, props.tooltipOptions)));
}));
ListBox.displayName = 'ListBox';
var classes$B = {
root: function root(_ref) {
var props = _ref.props,
mobileActiveState = _ref.mobileActiveState;
return classNames('p-megamenu p-component', {
'p-megamenu-horizontal': props.orientation === 'horizontal',
'p-megamenu-vertical': props.orientation === 'vertical',
'p-megamenu-mobile-active': mobileActiveState
});
},
content: 'p-menuitem-content',
separator: 'p-menuitem-separator',
submenuIcon: 'p-submenu-icon',
action: function action(_ref2) {
var item = _ref2.item;
return classNames('p-menuitem-link', {
'p-disabled': item.disabled
});
},
submenuItem: function submenuItem(_ref3) {
var focused = _ref3.focused,
disabled = _ref3.disabled,
active = _ref3.active;
return classNames('p-menuitem', {
'p-menuitem-active': active,
'p-focus': focused,
'p-disabled': disabled
});
},
submenuHeader: function submenuHeader(_ref4) {
var disabled = _ref4.disabled;
return classNames('p-megamenu-submenu-header p-submenu-header', {
'p-disabled': disabled
});
},
submenu: 'p-submenu-list p-megamenu-submenu',
panel: 'p-megamenu-panel',
grid: 'p-megamenu-grid',
icon: 'p-menuitem-icon',
label: 'p-menuitem-text',
column: function column(_ref5) {
var category = _ref5.category;
var length = category.items ? category.items.length : 0;
var columnClass;
switch (length) {
case 2:
columnClass = 'p-megamenu-col-6';
break;
case 3:
columnClass = 'p-megamenu-col-4';
break;
case 4:
columnClass = 'p-megamenu-col-3';
break;
case 6:
columnClass = 'p-megamenu-col-2';
break;
default:
columnClass = 'p-megamenu-col-12';
break;
}
return columnClass;
},
menuButton: 'p-megamenu-button',
menuitem: function menuitem(_ref6) {
var category = _ref6.category,
activeItemState = _ref6.activeItemState,
focused = _ref6.focused,
disabled = _ref6.disabled;
return classNames('p-menuitem', {
'p-menuitem-active p-highlight': activeItemState && activeItemState.item === category,
'p-focus': focused,
'p-disabled': disabled
});
},
menubar: 'p-megamenu-root-list',
menu: 'p-megamenu-root-list',
start: 'p-megamenu-start',
end: 'p-megamenu-end'
};
var styles$u = "\n@layer primereact {\n .p-megamenu {\n display: flex;\n }\n\n .p-megamenu-root-list {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n .p-megamenu-root-list > .p-menuitem {\n position: relative;\n }\n\n .p-megamenu .p-menuitem-link {\n cursor: pointer;\n display: flex;\n align-items: center;\n text-decoration: none;\n overflow: hidden;\n position: relative;\n }\n\n .p-megamenu .p-menuitem-text {\n line-height: 1;\n }\n\n .p-megamenu-panel {\n display: none;\n position: absolute;\n width: auto;\n z-index: 1;\n }\n\n .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {\n display: block;\n }\n\n .p-megamenu-submenu {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n /* Horizontal */\n .p-megamenu-horizontal {\n align-items: center;\n }\n\n .p-megamenu-horizontal .p-megamenu-root-list {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n }\n\n .p-megamenu-horizontal .p-megamenu-custom,\n .p-megamenu-horizontal .p-megamenu-end {\n margin-left: auto;\n align-self: center;\n }\n\n /* Vertical */\n .p-megamenu-vertical {\n flex-direction: column;\n }\n\n .p-megamenu-vertical .p-megamenu-root-list {\n flex-direction: column;\n }\n\n .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {\n left: 100%;\n top: 0;\n }\n\n .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {\n margin-left: auto;\n }\n\n .p-megamenu-grid {\n display: flex;\n }\n\n .p-megamenu-col-2,\n .p-megamenu-col-3,\n .p-megamenu-col-4,\n .p-megamenu-col-6,\n .p-megamenu-col-12 {\n flex: 0 0 auto;\n padding: 0.5rem;\n }\n\n .p-megamenu-col-2 {\n width: 16.6667%;\n }\n\n .p-megamenu-col-3 {\n width: 25%;\n }\n\n .p-megamenu-col-4 {\n width: 33.3333%;\n }\n\n .p-megamenu-col-6 {\n width: 50%;\n }\n\n .p-megamenu-col-12 {\n width: 100%;\n }\n\n .p-megamenu-button {\n display: none;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n }\n}\n";
var MegaMenuBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'MegaMenu',
id: null,
model: null,
style: null,
className: null,
orientation: 'horizontal',
breakpoint: undefined,
scrollHeight: '400px',
start: null,
submenuIcon: null,
onFocus: null,
onBlur: null,
tabIndex: 0,
menuIcon: null,
end: null,
children: undefined
},
css: {
classes: classes$B,
styles: styles$u
}
});
function ownKeys$T(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$T(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$T(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$T(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var MegaMenu = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = MegaMenuBase.getProps(inProps, context);
var _React$useState = React.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var _React$useState3 = React.useState(null),
_React$useState4 = _slicedToArray(_React$useState3, 2),
activeItemState = _React$useState4[0],
setActiveItemState = _React$useState4[1];
var _React$useState5 = React.useState(null),
_React$useState6 = _slicedToArray(_React$useState5, 2),
focused = _React$useState6[0],
setFocused = _React$useState6[1];
var _React$useState7 = React.useState({
index: -1,
key: '',
parentKey: ''
}),
_React$useState8 = _slicedToArray(_React$useState7, 2),
focusedItemInfo = _React$useState8[0],
setFocusedItemInfo = _React$useState8[1];
var _React$useState9 = React.useState(null),
_React$useState10 = _slicedToArray(_React$useState9, 2),
focusedItemId = _React$useState10[0],
setFocusedItemId = _React$useState10[1];
var _React$useState11 = React.useState(false),
_React$useState12 = _slicedToArray(_React$useState11, 2),
dirty = _React$useState12[0],
setDirty = _React$useState12[1];
var _React$useState13 = React.useState(null),
_React$useState14 = _slicedToArray(_React$useState13, 2),
processedItems = _React$useState14[0],
setProcessedItems = _React$useState14[1];
var _React$useState15 = React.useState([]),
_React$useState16 = _slicedToArray(_React$useState15, 2),
visibleItems = _React$useState16[0],
setVisibleItems = _React$useState16[1];
var _React$useState17 = React.useState(null),
_React$useState18 = _slicedToArray(_React$useState17, 2),
attributeSelectorState = _React$useState18[0],
setAttributeSelectorState = _React$useState18[1];
var _React$useState19 = React.useState(false),
_React$useState20 = _slicedToArray(_React$useState19, 2),
mobileActiveState = _React$useState20[0],
setMobileActiveState = _React$useState20[1];
var _React$useState21 = React.useState(false),
_React$useState22 = _slicedToArray(_React$useState21, 2),
focusTrigger = _React$useState22[0],
setFocusTrigger = _React$useState22[1];
var searchValue = React.useRef('');
var searchTimeout = React.useRef(null);
var elementRef = React.useRef(null);
var menubarRef = React.useRef(null);
var styleElementRef = React.useRef(null);
var menuButtonRef = React.useRef(null);
var horizontal = props.orientation === 'horizontal';
var vertical = props.orientation === 'vertical';
var isMobileMode = useMatchMedia("screen and (max-width: ".concat(props.breakpoint, ")"), !!props.breakpoint);
var _MegaMenuBase$setMeta = MegaMenuBase.setMetaData({
props: props,
state: {
id: idState,
activeItem: activeItemState && activeItemState.item,
attributeSelector: attributeSelectorState,
mobileActive: mobileActiveState
}
}),
ptm = _MegaMenuBase$setMeta.ptm,
cx = _MegaMenuBase$setMeta.cx,
isUnstyled = _MegaMenuBase$setMeta.isUnstyled;
useHandleStyle(MegaMenuBase.css.styles, isUnstyled, {
name: 'megamenu'
});
var getPTOptions = function getPTOptions(processedItem, key, index) {
return ptm(key, {
context: {
active: isItemActive(processedItem),
focused: isItemFocused(processedItem),
disabled: isItemDisabled(processedItem),
item: processedItem,
index: index
}
});
};
var _useEventListener = useEventListener({
type: 'click',
listener: function listener(event) {
if (isOutsideClicked(event)) {
hide();
}
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentClickListener = _useEventListener2[0],
unbindDocumentClickListener = _useEventListener2[1];
var _useResizeListener = useResizeListener({
type: 'resize',
listener: function listener() {
hide();
}
}),
_useResizeListener2 = _slicedToArray(_useResizeListener, 2),
bindDocumentResizeListener = _useResizeListener2[0],
unbindDocumentResizeListener = _useResizeListener2[1];
var bindListeners = function bindListeners() {
bindDocumentClickListener();
bindDocumentResizeListener();
};
var unbindListeners = function unbindListeners() {
unbindDocumentClickListener();
unbindDocumentResizeListener();
};
var onLeafClick = function onLeafClick(event) {
var originalEvent = event.originalEvent,
processedItem = event.processedItem;
var item = processedItem.item;
if (item.disabled) {
originalEvent.preventDefault();
return;
}
if (!item.url) {
originalEvent.preventDefault();
}
if (item.command) {
item.command({
originalEvent: originalEvent,
item: item
});
}
var grouped = isProccessedItemGroup(processedItem);
var selected = isSelected(processedItem);
if (selected) {
var index = processedItem.index,
key = processedItem.key,
parentKey = processedItem.parentKey;
setActiveItemState(null);
setFocusedItemInfo({
index: index,
key: key,
parentKey: parentKey
});
} else if (grouped) {
onItemChange(event);
} else {
var rootProcessedItemIndex = activeItemState ? activeItemState.index : -1;
var rootProcessedItemKey = activeItemState ? activeItemState.key : '';
hide(originalEvent);
setFocusedItemInfo({
index: rootProcessedItemIndex,
key: rootProcessedItemKey,
parentKey: ''
});
setMobileActiveState(false);
}
};
var onItemChange = function onItemChange(event) {
var processedItem = event.processedItem,
isFocus = event.isFocus;
if (ObjectUtils.isEmpty(processedItem)) {
return;
}
var index = processedItem.index,
key = processedItem.key,
parentKey = processedItem.parentKey,
items = processedItem.items;
var grouped = ObjectUtils.isNotEmpty(items);
grouped && setActiveItemState(processedItem);
setFocusedItemInfo({
index: index,
key: key,
parentKey: parentKey
});
grouped && setDirty(true);
isFocus && DomHandler.focus(menubarRef.current);
};
var onCategoryMouseEnter = function onCategoryMouseEnter(event) {
if (!mobileActiveState && dirty) {
onItemChange(event);
}
};
var onCategoryClick = function onCategoryClick(event) {
var originalEvent = event.originalEvent,
processedItem = event.processedItem;
var item = processedItem.item;
if (item.disabled) {
originalEvent.preventDefault();
return;
}
if (item.command) {
item.command({
originalEvent: originalEvent,
item: props.item
});
}
if (!item.url) {
originalEvent.preventDefault();
originalEvent.stopPropagation();
}
var grouped = isProccessedItemGroup(processedItem);
var root = ObjectUtils.isEmpty(processedItem.parent);
var selected = isSelected(processedItem);
if (selected) {
var index = processedItem.index,
key = processedItem.key,
parentKey = processedItem.parentKey;
setActiveItemState(null);
setFocusedItemInfo({
index: index,
key: key,
parentKey: parentKey
});
setDirty(!root);
} else if (grouped) {
onItemChange(event);
} else {
var rootProcessedItem = root ? processedItem : activeItemState;
hide();
changeFocusedItemInfo(originalEvent, rootProcessedItem ? rootProcessedItem.index : -1);
setMobileActiveState(false);
DomHandler.focus(menubarRef.current);
}
};
var show = function show() {
setFocusedItemInfo({
index: findFirstFocusedItemIndex(),
level: 0,
parentKey: ''
});
};
var hide = function hide(isFocus) {
if (mobileActiveState) {
setMobileActiveState(false);
setTimeout(function () {
DomHandler.focus(menuButtonRef.current);
}, 0);
}
setActiveItemState(null);
if (isFocus) {
setFocusedItemInfo({
index: -1,
key: '',
parentKey: ''
});
DomHandler.focus(menubarRef.current);
}
setDirty(false);
};
var toggle = function toggle(event) {
event.preventDefault();
if (mobileActiveState) {
setMobileActiveState(false);
ZIndexUtils.clear(menubarRef.current);
hide();
} else {
setMobileActiveState(true);
ZIndexUtils.set('menu', menubarRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, context && context.zIndex.menu || PrimeReact.zIndex.menu);
setTimeout(function () {
show();
}, 1);
}
};
var isOutsideClicked = function isOutsideClicked(event) {
return elementRef.current && !(elementRef.current.isSameNode(event.target) || elementRef.current.contains(event.target) || menuButtonRef.current && menuButtonRef.current.contains(event.target));
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
useMountEffect(function () {
var uniqueId = UniqueComponentId();
!idState && setIdState(uniqueId);
if (props.breakpoint) {
!attributeSelectorState && setAttributeSelectorState(uniqueId);
}
});
useUpdateEffect(function () {
if (attributeSelectorState && elementRef.current) {
elementRef.current.setAttribute(attributeSelectorState, '');
createStyle();
}
return function () {
destroyStyle();
};
}, [attributeSelectorState, props.breakpoint]);
useUpdateEffect(function () {
if (mobileActiveState) {
bindListeners();
} else {
unbindListeners();
}
}, [mobileActiveState]);
useUpdateEffect(function () {
if (focusTrigger) {
var itemIndex = focusedItemInfo.index !== -1 ? findNextItemIndex(focusedItemInfo.index) : findFirstFocusedItemIndex();
changeFocusedItemInfo(itemIndex);
setFocusTrigger(false);
}
}, [focusTrigger]);
useUpdateEffect(function () {
var currentPanel = DomHandler.findSingle(elementRef.current, '.p-menuitem-active > .p-megamenu-panel');
if (activeItemState) {
bindListeners();
if (!isMobileMode) {
ZIndexUtils.set('menu', currentPanel, context && context.autoZIndex || PrimeReact.autoZIndex, context && context.zIndex.menu || PrimeReact.zIndex.menu);
}
} else {
unbindListeners();
}
if (isMobileMode) {
currentPanel && currentPanel.previousElementSibling.scrollIntoView({
block: 'nearest',
inline: 'nearest'
});
}
return function () {
unbindListeners();
ZIndexUtils.clear(currentPanel);
};
}, [activeItemState, isMobileMode]);
useUpdateEffect(function () {
var _focusedItemId = ObjectUtils.isNotEmpty(focusedItemInfo.key) ? "".concat(idState, "_").concat(focusedItemInfo.key) : null;
setFocusedItemId(_focusedItemId);
}, [focusedItemInfo]);
React.useEffect(function () {
var itemsToProcess = props.model || [];
var processed = _createProcessedItems(itemsToProcess, 0, null, '');
setProcessedItems(processed);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.model]);
useUpdateEffect(function () {
var processedItem = ObjectUtils.isNotEmpty(activeItemState) ? activeItemState : null;
var _visibleItems = processedItem && processedItem.key === focusedItemInfo.parentKey ? processedItem.items.reduce(function (items, col) {
col.forEach(function (submenu) {
submenu.items.forEach(function (a) {
items.push(a);
});
});
return items;
}, []) : processedItems;
setVisibleItems(_visibleItems);
}, [focusedItemInfo, activeItemState, processedItems]);
var onFocus = function onFocus(event) {
setFocused(true);
if (focusedItemInfo.index === -1) {
var index = findFirstFocusedItemIndex();
var processedItem = findVisibleItem(index);
setFocusedItemInfo({
index: index,
key: processedItem.key,
parentKey: processedItem.parentKey
});
}
props.onFocus && props.onFocus(event);
};
var onBlur = function onBlur(event) {
setFocused(false);
setFocusedItemInfo({
index: -1,
key: '',
parentKey: ''
});
searchValue.current = '';
setDirty(false);
props.onBlur && props.onBlur(event);
};
var onKeyDown = function onKeyDown(event) {
var metaKey = event.metaKey || event.ctrlKey;
switch (event.code) {
case 'ArrowDown':
onArrowDownKey(event);
break;
case 'ArrowUp':
onArrowUpKey(event);
break;
case 'ArrowLeft':
onArrowLeftKey(event);
break;
case 'ArrowRight':
onArrowRightKey(event);
break;
case 'Home':
onHomeKey(event);
break;
case 'End':
onEndKey(event);
break;
case 'Space':
onSpaceKey(event);
break;
case 'Enter':
case 'NumpadEnter':
onEnterKey(event);
break;
case 'Escape':
onEscapeKey(event);
break;
case 'Tab':
onTabKey(event);
break;
case 'PageDown':
case 'PageUp':
case 'Backspace':
case 'ShiftLeft':
case 'ShiftRight':
//NOOP
break;
default:
if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
searchItems(event, event.key);
}
break;
}
};
var onArrowDownKey = function onArrowDownKey(event) {
event.preventDefault();
if (horizontal) {
var _focusedItemInfo = focusedItemInfo;
if (ObjectUtils.isNotEmpty(activeItemState) && activeItemState.key === focusedItemInfo.key) {
_focusedItemInfo = {
index: -1,
key: '',
parentKey: activeItemState.key
};
setFocusedItemInfo(_focusedItemInfo);
} else {
var processedItem = findVisibleItem(focusedItemInfo.index);
var grouped = isProccessedItemGroup(processedItem);
if (grouped) {
onItemChange({
originalEvent: event,
processedItem: processedItem
});
_focusedItemInfo = {
index: -1,
key: processedItem.key,
parentKey: processedItem.parentKey
};
setFocusedItemInfo(_focusedItemInfo);
searchValue.current = '';
}
}
setTimeout(function () {
return setFocusTrigger(true);
}, 0);
} else {
var itemIndex = focusedItemInfo.index !== -1 ? findNextItemIndex(focusedItemInfo.index) : findFirstFocusedItemIndex();
changeFocusedItemInfo(itemIndex);
}
};
var onArrowUpKey = function onArrowUpKey(event) {
var processedItem = findVisibleItem(focusedItemInfo.index);
var grouped = isProccessedItemGroup(processedItem);
if (event.altKey && horizontal) {
if (focusedItemInfo.index !== -1) {
if (!grouped && ObjectUtils.isNotEmpty(activeItemState)) {
if (focusedItemInfo.index === 0) {
setFocusedItemInfo({
index: activeItemState.index,
key: activeItemState.key,
parentKey: activeItemState.parentKey
});
setActiveItemState(null);
} else {
changeFocusedItemInfo(findFirstItemIndex());
}
}
}
} else {
var itemIndex = focusedItemInfo.index !== -1 ? findPrevItemIndex(focusedItemInfo.index) : findLastFocusedItemIndex();
changeFocusedItemInfo(itemIndex);
}
event.preventDefault();
};
var onArrowLeftKey = function onArrowLeftKey(event) {
var processedItem = findVisibleItem(focusedItemInfo.index);
var grouped = isProccessedItemGroup(processedItem);
if (grouped) {
if (horizontal) {
var itemIndex = focusedItemInfo.index !== -1 ? findPrevItemIndex(focusedItemInfo.index) : findLastFocusedItemIndex();
changeFocusedItemInfo(itemIndex);
}
} else {
if (vertical && ObjectUtils.isNotEmpty(activeItemState)) {
if (processedItem.columnIndex === 0) {
setFocusedItemInfo({
index: activeItemState.index,
key: activeItemState.key,
parentKey: activeItemState.parentKey
});
setActiveItemState(null);
}
}
var columnIndex = processedItem.columnIndex - 1;
var _itemIndex = visibleItems.findIndex(function (item) {
return item.columnIndex === columnIndex;
});
_itemIndex !== -1 && changeFocusedItemInfo(_itemIndex);
}
event.preventDefault();
};
var onArrowRightKey = function onArrowRightKey(event) {
event.preventDefault();
var processedItem = findVisibleItem(focusedItemInfo.index);
var grouped = isProccessedItemGroup(processedItem);
if (grouped) {
if (vertical) {
if (ObjectUtils.isNotEmpty(activeItemState) && activeItemState.key === processedItem.key) {
setFocusedItemInfo({
index: -1,
key: '',
parentKey: activeItemState.key
});
} else {
var _processedItem = findVisibleItem(focusedItemInfo.index);
var _grouped = isProccessedItemGroup(_processedItem);
if (_grouped) {
onItemChange({
originalEvent: event,
processedItem: _processedItem
});
setFocusedItemInfo({
index: -1,
key: _processedItem.key,
parentKey: _processedItem.parentKey
});
searchValue.current = '';
}
}
}
setTimeout(function () {
return setFocusTrigger(true);
}, 0);
} else {
var columnIndex = processedItem.columnIndex + 1;
var itemIndex = visibleItems.findIndex(function (item) {
return item.columnIndex === columnIndex;
});
itemIndex !== -1 && changeFocusedItemInfo(itemIndex);
}
};
var onHomeKey = function onHomeKey(event) {
changeFocusedItemInfo(findFirstItemIndex());
event.preventDefault();
};
var onEndKey = function onEndKey(event) {
changeFocusedItemInfo(findLastItemIndex());
event.preventDefault();
};
var onEnterKey = function onEnterKey(event) {
if (focusedItemInfo.index !== -1) {
var element = DomHandler.findSingle(menubarRef.current, "li[id=\"".concat(focusedItemId, "\"]"));
var anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]');
anchorElement ? anchorElement.click() : element && element.click();
}
event.preventDefault();
};
var onSpaceKey = function onSpaceKey(event) {
onEnterKey(event);
};
var onEscapeKey = function onEscapeKey(event) {
if (ObjectUtils.isNotEmpty(activeItemState)) {
setFocusedItemInfo({
index: activeItemState.index,
key: activeItemState.key
});
setActiveItemState(null);
}
event.preventDefault();
};
var onTabKey = function onTabKey(event) {
if (focusedItemInfo.index !== -1) {
var processedItem = findVisibleItem(focusedItemInfo.index);
var grouped = isProccessedItemGroup(processedItem);
!grouped && onItemChange({
originalEvent: event,
processedItem: processedItem
});
}
hide();
};
var isItemMatched = function isItemMatched(processedItem) {
var label = getProccessedItemLabel(processedItem);
return isValidItem(processedItem) && label && label.toLocaleLowerCase().startsWith(searchValue.current.toLocaleLowerCase());
};
var isValidItem = function isValidItem(processedItem) {
return !!processedItem && !isItemDisabled(processedItem.item) && !isItemSeparator(processedItem.item);
};
var isValidSelectedItem = function isValidSelectedItem(processedItem) {
return isValidItem(processedItem) && isSelected(processedItem);
};
var isSelected = function isSelected(processedItem) {
return ObjectUtils.isNotEmpty(activeItemState) ? activeItemState.key === processedItem.key : false;
};
var findFirstItemIndex = function findFirstItemIndex() {
return visibleItems.findIndex(function (processedItem) {
return isValidItem(processedItem);
});
};
var findLastItemIndex = function findLastItemIndex() {
return ObjectUtils.findLastIndex(visibleItems, function (processedItem) {
return isValidItem(processedItem);
});
};
var findNextItemIndex = function findNextItemIndex(index) {
var matchedItemIndex = index < visibleItems.length - 1 ? visibleItems.slice(index + 1).findIndex(function (processedItem) {
return isValidItem(processedItem);
}) : -1;
return matchedItemIndex > -1 ? matchedItemIndex + index + 1 : index;
};
var findPrevItemIndex = function findPrevItemIndex(index) {
var matchedItemIndex = index > 0 ? ObjectUtils.findLastIndex(visibleItems.slice(0, index), function (processedItem) {
return isValidItem(processedItem);
}) : -1;
return matchedItemIndex > -1 ? matchedItemIndex : index;
};
var findSelectedItemIndex = function findSelectedItemIndex() {
return visibleItems && visibleItems.findIndex(function (processedItem) {
return isValidSelectedItem(processedItem);
});
};
var findFirstFocusedItemIndex = function findFirstFocusedItemIndex() {
var selectedIndex = findSelectedItemIndex();
return selectedIndex < 0 ? findFirstItemIndex() : selectedIndex;
};
var findLastFocusedItemIndex = function findLastFocusedItemIndex() {
var selectedIndex = findSelectedItemIndex();
return selectedIndex < 0 ? findLastItemIndex() : selectedIndex;
};
var findVisibleItem = function findVisibleItem(index) {
return ObjectUtils.isNotEmpty(visibleItems) ? visibleItems[index] : null;
};
var getProccessedItemLabel = function getProccessedItemLabel(processedItem) {
return processedItem && processedItem.item ? getItemLabel(processedItem) : undefined;
};
var searchItems = function searchItems(event, _char) {
searchValue.current = (searchValue.current || '') + _char;
var itemIndex = -1;
var matched = false;
if (focusedItemInfo.index !== -1) {
itemIndex = visibleItems.slice(focusedItemInfo.index).findIndex(function (processedItem) {
return isItemMatched(processedItem);
});
itemIndex = itemIndex === -1 ? visibleItems.slice(0, focusedItemInfo.index).findIndex(function (processedItem) {
return isItemMatched(processedItem);
}) : itemIndex + focusedItemInfo.index;
} else {
itemIndex = visibleItems.findIndex(function (processedItem) {
return isItemMatched(processedItem);
});
}
if (itemIndex !== -1) {
matched = true;
}
if (itemIndex === -1 && focusedItemInfo.index === -1) {
itemIndex = findFirstFocusedItemIndex();
}
if (itemIndex !== -1) {
changeFocusedItemInfo(itemIndex);
}
if (searchTimeout) {
clearTimeout(searchTimeout);
}
searchTimeout.current = setTimeout(function () {
searchValue.current = '';
searchTimeout.current = null;
}, 500);
return matched;
};
var changeFocusedItemInfo = function changeFocusedItemInfo(index) {
var processedItem = findVisibleItem(index);
var key = ObjectUtils.isNotEmpty(processedItem) ? processedItem.key : '';
setFocusedItemInfo(_objectSpread$T(_objectSpread$T({}, focusedItemInfo), {}, {
index: index,
key: key
}));
scrollInView();
};
var scrollInView = function scrollInView() {
var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
var id = index !== -1 ? "".concat(idState, "_").concat(index) : focusedItemId;
var element = DomHandler.findSingle(menubarRef.current, "li[id=\"".concat(id, "\"]"));
if (element) {
element.scrollIntoView && element.scrollIntoView({
block: 'nearest',
inline: 'start'
});
}
};
var getItemId = function getItemId(processedItem) {
return "".concat(idState, "_").concat(processedItem.key);
};
var getItemProp = function getItemProp(processedItem, name, params) {
return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name], params) : undefined;
};
var getItemLabel = function getItemLabel(processedItem) {
return getItemProp(processedItem, 'label');
};
var isItemActive = function isItemActive(processedItem) {
return ObjectUtils.isNotEmpty(activeItemState) ? activeItemState.key === processedItem.key : false;
};
var isItemVisible = function isItemVisible(processedItem) {
return getItemProp(processedItem, 'visible') !== false;
};
var isItemDisabled = function isItemDisabled(processedItem) {
return getItemProp(processedItem, 'disabled');
};
var isItemFocused = function isItemFocused(processedItem) {
return focusedItemId === getItemId(processedItem);
};
var isItemGroup = function isItemGroup(processedItem) {
return ObjectUtils.isNotEmpty(processedItem.items);
};
var isItemSeparator = function isItemSeparator(item) {
return getItemProp(item, 'separator');
};
var isProccessedItemGroup = function isProccessedItemGroup(processedItem) {
return processedItem && ObjectUtils.isNotEmpty(processedItem.items);
};
var getAriaSetSize = function getAriaSetSize() {
return props.model.filter(function (processedItem) {
return isItemVisible(processedItem) && !getItemProp(processedItem, 'separator');
}).length;
};
var getAriaPosInset = function getAriaPosInset(index) {
return index - props.model.slice(0, index).filter(function (processedItem) {
return isItemVisible(processedItem) && getItemProp(processedItem, 'separator');
}).length + 1;
};
var _createProcessedItems = function createProcessedItems(items) {
var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var parentKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
var columnIndex = arguments.length > 4 ? arguments[4] : undefined;
if (!items) return [];
// #6415 if passed a single array[] instead of a matrix [][]
if (!Array.isArray(items)) {
items = [items];
}
return items.map(function (item, index) {
var key = "".concat(parentKey !== '' ? parentKey + '_' : '').concat(columnIndex !== undefined ? columnIndex + '_' : '').concat(index);
var newItem = {
item: item,
index: index,
level: level,
key: key,
parent: parent,
parentKey: parentKey,
columnIndex: columnIndex !== undefined ? columnIndex : parent && parent.columnIndex !== undefined ? parent.columnIndex : index
};
newItem.items = level === 0 && item.items && item.items.length > 0 ? item.items.map(function (_items, _index) {
return _createProcessedItems(_items, level + 1, newItem, key, _index);
}) : _createProcessedItems(item.items, level + 1, newItem, key);
return newItem;
});
};
var createSeparator = function createSeparator(index) {
var key = idState + '_separator__' + index;
var separatorProps = mergeProps({
id: key,
className: cx('separator'),
role: 'separator'
}, ptm('separator'));
return /*#__PURE__*/React.createElement("li", _extends({}, separatorProps, {
key: key
}));
};
var createSubmenuIcon = function createSubmenuIcon(item) {
if (item.items) {
var submenuIconProps = mergeProps({
className: cx('submenuIcon')
}, ptm('submenuIcon'));
var icon = vertical ? props.submenuIcon || /*#__PURE__*/React.createElement(AngleRightIcon, submenuIconProps) : props.submenuIcon || /*#__PURE__*/React.createElement(AngleDownIcon, submenuIconProps);
var submenuIcon = IconUtils.getJSXIcon(icon, _objectSpread$T({}, submenuIconProps), {
props: props
});
return submenuIcon;
}
return null;
};
var createSubmenuItem = function createSubmenuItem(processedItem, index) {
var item = processedItem.item;
if (item.visible === false) {
return null;
}
if (item.separator) {
return createSeparator(index);
}
var key = getItemId(processedItem);
var linkClassName = classNames('p-menuitem-link', {
'p-disabled': item.disabled
});
var iconProps = mergeProps({
className: classNames(item.icon, cx('icon'))
}, ptm('icon'));
var labelProps = mergeProps({
className: cx('label')
}, ptm('label'));
var iconClassName = classNames(item.icon, 'p-menuitem-icon');
var icon = IconUtils.getJSXIcon(item.icon, _objectSpread$T({}, iconProps), {
props: props
});
var label = item.label && /*#__PURE__*/React.createElement("span", labelProps, item.label);
var actionProps = mergeProps({
href: item.url || '#',
className: cx('action', {
item: item
}),
target: item.target,
tabIndex: '-1'
}, getPTOptions(processedItem, 'action', index));
var isFocused = isItemFocused(processedItem);
var isDisabled = isItemDisabled(processedItem);
var isGroup = isItemGroup(processedItem);
var isActive = isItemActive(processedItem);
var submenuItemProps = mergeProps({
id: key,
'aria-label': getItemLabel(processedItem),
'aria-disabled': isDisabled,
'aria-haspopup': isGroup ? 'menu' : undefined,
'aria-level': '2',
'aria-expanded': isGroup ? isActive : undefined,
'aria-setsize': getAriaSetSize(),
'aria-posinset': getAriaPosInset(index),
'data-p-highlight': isActive,
'data-p-disabled': isDisabled,
'data-p-focused': isFocused,
className: classNames(item.className, cx('submenuItem', {
focused: isFocused,
disabled: isDisabled,
active: isActive
})),
style: item.style,
role: 'menuitem'
}, getPTOptions(processedItem, 'submenuItem', index));
var contentProps = mergeProps({
onClick: function onClick(event) {
return onLeafClick({
originalEvent: event,
processedItem: processedItem
});
},
className: cx('content')
}, getPTOptions(processedItem, 'content', index));
var content = /*#__PURE__*/React.createElement("a", actionProps, icon, label, /*#__PURE__*/React.createElement(Ripple, null));
if (item.template) {
var defaultContentOptions = {
className: linkClassName,
labelClassName: 'p-menuitem-text',
iconClassName: iconClassName,
element: content,
props: props
};
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
}
return /*#__PURE__*/React.createElement("li", _extends({}, submenuItemProps, {
key: key
}), /*#__PURE__*/React.createElement("div", contentProps, content));
};
var createSubmenu = function createSubmenu(submenu, index) {
if (!isItemVisible(submenu)) {
return null;
}
var items = submenu.items.map(createSubmenuItem);
var key = submenu.id || idState + '_sub_' + index;
var label = getItemLabel(submenu);
var isDisabled = isItemDisabled(submenu);
var submenuHeaderProps = mergeProps({
id: key,
className: classNames(submenu.className, cx('submenuHeader', {
disabled: isDisabled
})),
style: submenu.style,
role: 'presentation',
'data-p-disabled': isDisabled
}, ptm('submenuHeader'));
return /*#__PURE__*/React.createElement(React.Fragment, {
key: key
}, /*#__PURE__*/React.createElement("li", submenuHeaderProps, label), items);
};
var createSubmenus = function createSubmenus(column, index) {
return column.map(createSubmenu);
};
var createColumn = function createColumn(processedItem, processedColumn, index) {
var category = processedItem.item;
var key = category.label + '_column_' + index;
var submenus = createSubmenus(processedColumn);
var columnProps = mergeProps({
className: cx('column', {
category: category
})
}, ptm('column'));
var display = activeItemState && activeItemState.item === category ? 'block' : 'none';
var submenuProps = mergeProps({
role: 'menu',
tabIndex: props.disabled ? null : props.tabIndex || '0',
className: cx('submenu'),
style: {
display: display
}
}, ptm('submenu'));
return /*#__PURE__*/React.createElement("div", _extends({}, columnProps, {
key: key
}), /*#__PURE__*/React.createElement("ul", submenuProps, submenus));
};
var createColumns = function createColumns(category) {
if (category.items) {
return category.items.map(function (column, index) {
return /*#__PURE__*/React.createElement(React.Fragment, {
key: index
}, createColumn(category, column, index));
});
}
return null;
};
var createCategoryPanel = function createCategoryPanel(processedItem) {
var category = processedItem.item;
if (category.items) {
var columns = createColumns(processedItem);
var panelProps = mergeProps({
className: cx('panel')
}, ptm('panel'));
var gridProps = mergeProps({
className: cx('grid')
}, ptm('grid'));
return /*#__PURE__*/React.createElement("div", panelProps, /*#__PURE__*/React.createElement("div", gridProps, columns));
}
return null;
};
var createStyle = function createStyle() {
if (!styleElementRef.current) {
styleElementRef.current = DomHandler.createInlineStyle(context && context.nonce || PrimeReact.nonce, context && context.styleContainer);
var selector = "".concat(attributeSelectorState);
var innerHTML = "\n @media screen and (max-width: ".concat(props.breakpoint, ") {\n .p-megamenu[").concat(selector, "] > .p-megamenu-root-list .p-menuitem-active .p-megamenu-panel {\n position: relative;\n left: 0;\n box-shadow: none;\n border-radius: 0;\n background: inherit;\n }\n\n .p-megamenu[").concat(selector, "] {\n width: 100%;\n position: relative;\n padding: 0.5rem;\n }\n\n .p-megamenu[").concat(selector, "] .p-megamenu-grid {\n flex-wrap: wrap;\n }\n\n .p-megamenu[").concat(selector, "] .p-megamenu-button {\n display: flex;\n }\n\n .p-megamenu[").concat(selector, "] .p-megamenu-root-list {\n display: none;\n }\n\n .p-megamenu[").concat(selector, "] div[class*=\"p-megamenu-col-\"] {\n width: 100%;\n }\n\n .p-megamenu[").concat(selector, "].p-megamenu-mobile-active .p-megamenu-root-list {\n left: 0;\n top: 100%;\n z-index: 1;\n width: 100%;\n display: flex;\n padding: 0.5rem 0;\n position: absolute;\n flex-direction: column;\n }\n\n .p-megamenu[").concat(selector, "] .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {\n margin-left: auto;\n }\n\n .p-megamenu[").concat(selector, "] .p-submenu-list .p-menuitem-content .p-menuitem-link {\n padding-left: 2.25rem;\n }\n\n ").concat(horizontal ? "\n .p-megamenu[".concat(selector, "] .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {\n transform: rotate(-180deg);\n }\n ") : '', "\n\n ").concat(vertical ? "\n .p-megamenu[".concat(selector, "] .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {\n transform: rotate(90deg);\n }\n\n .p-megamenu[").concat(selector, "] .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {\n transform: rotate(-90deg);\n }\n ") : '', "\n }\n ");
styleElementRef.current.innerHTML = innerHTML;
}
};
var destroyStyle = function destroyStyle() {
styleElementRef.current = DomHandler.removeInlineStyle(styleElementRef.current);
};
var createCategory = function createCategory(processedItem, index) {
var category = processedItem.item;
var iconProps = mergeProps({
className: cx('icon')
}, getPTOptions(processedItem, 'icon', index));
var icon = IconUtils.getJSXIcon(category.icon, _objectSpread$T({}, iconProps), {
props: props
});
var labelProps = mergeProps({
className: cx('label')
}, getPTOptions(processedItem, 'label', index));
var label = category.label && /*#__PURE__*/React.createElement("span", labelProps, category.label);
var submenuIcon = createSubmenuIcon(category);
var panel = createCategoryPanel(processedItem);
var headerActionProps = mergeProps({
href: category.url || '#',
className: cx('action', {
item: category
}),
target: category.target,
onFocus: function onFocus(event) {
return event.stopPropagation();
},
tabIndex: '-1',
'aria-hidden': true
}, getPTOptions(processedItem, 'action', index));
var itemContent = category.template ? ObjectUtils.getJSXElement(category.template, category, headerActionProps) : /*#__PURE__*/React.createElement("a", headerActionProps, icon, label, submenuIcon, /*#__PURE__*/React.createElement(Ripple, null));
var key = getItemId(processedItem);
var isFocused = isItemFocused(processedItem);
var isDisabled = isItemDisabled(processedItem);
var menuItemProps = mergeProps(_defineProperty({
id: key,
className: classNames(category.className, cx('menuitem', {
category: category,
activeItemState: activeItemState,
focused: isFocused,
disabled: isDisabled
})),
'aria-label': getItemLabel(category),
'aria-level': '1',
'aria-setsize': getAriaSetSize(),
'aria-posinset': getAriaPosInset(index),
'aria-expanded': isItemGroup(processedItem) ? isItemActive(processedItem) : undefined,
'aria-haspopup': isItemGroup(processedItem) ? 'menu' : undefined,
'aria-disabled': isItemDisabled(processedItem),
'data-p-highlight': isItemActive(category),
'data-p-disabled': isDisabled,
'data-p-focused': isFocused,
style: category.style,
role: 'menuitem'
}, "data-p-disabled", category.disabled || false), getPTOptions(processedItem, 'menuitem', index));
var contentProps = mergeProps({
onClick: function onClick(event) {
return onCategoryClick({
originalEvent: event,
processedItem: processedItem
});
},
onMouseEnter: function onMouseEnter(e) {
return onCategoryMouseEnter({
originalEvent: e,
processedItem: processedItem
});
},
className: cx('content')
}, getPTOptions(processedItem, 'content', index));
return /*#__PURE__*/React.createElement("li", _extends({}, menuItemProps, {
key: key
}), /*#__PURE__*/React.createElement("div", contentProps, itemContent), panel);
};
var createMenu = function createMenu() {
var menuProps = mergeProps({
ref: menubarRef,
tabIndex: props.disabled ? null : props.tabIndex || '0',
className: cx('menu'),
onFocus: onFocus,
onBlur: onBlur,
onKeyDown: onKeyDown,
'aria-label': props.ariaLabel,
'aria-labelledby': props.ariaLabelledBy,
'aria-orientation': vertical ? 'vertical' : 'horizontal',
'aria-activedescendant': focused ? focusedItemId : null,
id: idState + '_list',
role: 'menubar'
}, ptm('menu'));
if (processedItems) {
return /*#__PURE__*/React.createElement("ul", menuProps, processedItems.map(function (item, index) {
return /*#__PURE__*/React.createElement(React.Fragment, {
key: index
}, createCategory(item, index));
}));
}
return null;
};
var createStartContent = function createStartContent() {
var startProps = mergeProps({
className: cx('start')
}, ptm('start'));
if (props.start) {
var _start = ObjectUtils.getJSXElement(props.start, props);
return /*#__PURE__*/React.createElement("div", startProps, _start);
}
return null;
};
var createEndContent = function createEndContent() {
var endProps = mergeProps({
className: cx('end')
}, ptm('end'));
if (props.end) {
var _end = ObjectUtils.getJSXElement(props.end, props);
return /*#__PURE__*/React.createElement("div", endProps, _end);
}
return null;
};
var createMenuButton = function createMenuButton() {
if (props.model && props.model.length < 1) {
return null;
}
var menuButtonProps = mergeProps({
className: cx('menuButton'),
href: '#',
role: 'button',
'aria-haspopup': props.model && props.model.length > 0 ? true : false,
'aria-expanded': mobileActiveState,
'aria-controls': idState,
'aria-label': ariaLabel('navigation'),
tabIndex: 0,
onClick: function onClick(e) {
return toggle(e);
}
}, ptm('menuButton'));
var menuButtonIconProps = mergeProps(ptm('menuButtonIcon'));
var icon = props.menuIcon || /*#__PURE__*/React.createElement(BarsIcon, menuButtonIconProps);
var menuIcon = IconUtils.getJSXIcon(icon, _objectSpread$T({}, menuButtonIconProps), {
props: props
});
/* eslint-disable */
var button = /*#__PURE__*/React.createElement("a", _extends({
ref: menuButtonRef
}, menuButtonProps), menuIcon);
/* eslint-enable */
return button;
};
var rootProps = mergeProps({
className: classNames(props.className, cx('root', {
mobileActiveState: mobileActiveState
})),
id: idState,
style: props.style
}, MegaMenuBase.getOtherProps(props), ptm('root'));
var menu = createMenu();
var start = createStartContent();
var end = createEndContent();
var menuButton = createMenuButton();
return /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
ref: elementRef
}, rootProps), start, menuButton, menu, end);
}));
MegaMenu.displayName = 'MegaMenu';
var classes$A = {
item: function item(_ref) {
var isSelected = _ref.isSelected;
return classNames('p-mention-item', {
'p-highlight': isSelected
});
},
items: 'p-mention-items',
panel: function panel(_ref2) {
var props = _ref2.props;
return classNames('p-mention-panel p-component', props.panelClassName);
},
input: function input(_ref3) {
var props = _ref3.props;
return classNames('p-mention-input', props.inputClassName);
},
root: function root(_ref4) {
_ref4.props;
var isFilled = _ref4.isFilled,
focusedState = _ref4.focusedState;
return classNames('p-mention p-component p-inputwrapper', {
'p-inputwrapper-filled': isFilled,
'p-inputwrapper-focus': focusedState
});
},
transition: 'p-connected-overlay'
};
var styles$t = "\n@layer primereact {\n .p-mention {\n display: inline-flex;\n position: relative;\n }\n \n .p-autocomplete-loader {\n position: absolute;\n top: 50%;\n margin-top: -.5rem;\n }\n \n .p-mention .p-mention-panel {\n min-width: 100%;\n }\n \n .p-mention-panel {\n position: absolute;\n top: 0;\n left: 0;\n overflow: auto;\n }\n \n .p-mention-items {\n margin: 0;\n padding: 0;\n list-style-type: none;\n }\n \n .p-mention-item {\n cursor: pointer;\n white-space: nowrap;\n position: relative;\n overflow: hidden;\n }\n \n .p-fluid .p-mention {\n display: flex;\n }\n}\n";
var MentionBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Mention',
autoHighlight: true,
autoResize: false,
className: null,
delay: 0,
field: null,
footerTemplate: null,
headerTemplate: null,
id: null,
inputClassName: null,
inputId: null,
inputRef: null,
inputStyle: null,
itemTemplate: null,
onBlur: null,
onChange: null,
onFocus: null,
onHide: null,
onInput: null,
onSearch: null,
onSelect: null,
onShow: null,
panelClassName: null,
panelStyle: null,
scrollHeight: '200px',
style: null,
suggestions: null,
transitionOptions: null,
trigger: '@',
variant: null,
children: undefined
},
css: {
classes: classes$A,
styles: styles$t
}
});
function ownKeys$S(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$S(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$S(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$S(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Mention = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = MentionBase.getProps(inProps, context);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
overlayVisibleState = _React$useState2[0],
setOverlayVisibleState = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
focusedState = _React$useState4[0],
setFocusedState = _React$useState4[1];
var _React$useState5 = React.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
searchingState = _React$useState6[0],
setSearchingState = _React$useState6[1];
var _React$useState7 = React.useState(null),
_React$useState8 = _slicedToArray(_React$useState7, 2),
triggerState = _React$useState8[0],
setTriggerState = _React$useState8[1];
var _React$useState9 = React.useState([]),
_React$useState10 = _slicedToArray(_React$useState9, 2),
highlightState = _React$useState10[0],
setHighlightState = _React$useState10[1];
var elementRef = React.useRef(null);
var overlayRef = React.useRef(null);
var inputRef = React.useRef(props.inputRef);
var listRef = React.useRef(null);
var timeout = React.useRef(null);
var metaData = {
props: props,
state: {
overlayVisible: overlayVisibleState,
focused: focusedState,
searching: searchingState,
trigger: triggerState
}
};
var _MentionBase$setMetaD = MentionBase.setMetaData(metaData),
ptm = _MentionBase$setMetaD.ptm,
cx = _MentionBase$setMetaD.cx;
_MentionBase$setMetaD.sx;
var isUnstyled = _MentionBase$setMetaD.isUnstyled;
useHandleStyle(MentionBase.css.styles, isUnstyled, {
name: 'mention'
});
var getPTOptions = function getPTOptions(item, suggestion, options) {
return ptm(suggestion, {
context: {
trigger: triggerState ? triggerState.key : ''
},
state: _objectSpread$S({}, options)
});
};
var _useOverlayListener = useOverlayListener({
target: elementRef,
overlay: overlayRef,
listener: function listener(event, _ref) {
var valid = _ref.valid,
type = _ref.type;
if (valid) {
if (context.hideOverlaysOnDocumentScrolling || type === 'outside') {
hide();
} else if (!DomHandler.isDocument(event.target)) {
alignOverlay();
}
}
},
when: overlayVisibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var show = function show() {
setOverlayVisibleState(true);
};
var hide = function hide() {
setOverlayVisibleState(false);
setSearchingState(false);
setTriggerState(null);
};
var onOverlayEnter = function onOverlayEnter() {
ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, context && context.zIndex.overlay || PrimeReact.zIndex.overlay);
DomHandler.addStyles(overlayRef.current, {
position: 'absolute',
top: '0',
left: '0'
});
alignOverlay();
};
var onOverlayEntering = function onOverlayEntering() {
if (props.autoHighlight && props.suggestions && props.suggestions.length) {
setHighlightState(function (prevState) {
var newState = _toConsumableArray(prevState);
newState[0] = true;
return newState;
});
}
};
var onOverlayEntered = function onOverlayEntered() {
bindOverlayListener();
props.onShow && props.onShow();
};
var onOverlayExit = function onOverlayExit() {
unbindOverlayListener();
};
var onOverlayExited = function onOverlayExited() {
ZIndexUtils.clear(overlayRef.current);
props.onHide && props.onHide();
};
var alignOverlay = function alignOverlay() {
if (triggerState) {
var key = triggerState.key,
index = triggerState.index;
var value = inputRef.current.value;
var position = DomHandler.getCursorOffset(inputRef.current, value.substring(0, index - 1), value.substring(index), key);
overlayRef.current.style.transformOrigin = 'top';
overlayRef.current.style.left = "calc(".concat(position.left, "px + 1rem)");
overlayRef.current.style.top = "calc(".concat(position.top, "px + 1.2rem)");
}
};
var onPanelClick = function onPanelClick(event) {
OverlayService.emit('overlay-click', {
originalEvent: event,
target: elementRef.current
});
};
var getTrigger = function getTrigger(value, key, start) {
if (!triggerState) {
var triggerKey = Array.isArray(props.trigger) ? props.trigger.find(function (t) {
return t === key;
}) : props.trigger === key ? props.trigger : null;
if (triggerKey) {
return {
key: triggerKey,
index: start
};
}
var latestSpaceIndex = value.substring(0, start).lastIndexOf(' ');
var latestTrigger = getLatestTrigger(value, start);
if (latestTrigger.index > latestSpaceIndex) {
return latestTrigger;
}
}
return triggerState;
};
var getLatestTrigger = function getLatestTrigger(value, start) {
if (Array.isArray(props.trigger)) {
var latestTrigger = {};
props.trigger.forEach(function (t) {
var index = value.substring(0, start).lastIndexOf(t);
if (index !== -1 && (index > latestTrigger.index || !latestTrigger.index)) {
latestTrigger = {
key: t,
index: index !== -1 ? index + 1 : -1
};
}
});
return latestTrigger;
}
var index = value.substring(0, start).lastIndexOf(props.trigger);
return {
key: props.trigger,
index: index !== -1 ? index + 1 : -1
};
};
var onSearch = function onSearch(event) {
if (timeout.current) {
clearTimeout(timeout.current);
}
var _event$target = event.target,
value = _event$target.value,
selectionStart = _event$target.selectionStart;
var key = value.substring(selectionStart - 1, selectionStart);
if (key === ' ') {
hide();
return;
}
var currentTrigger = getTrigger(value, key, selectionStart);
if (currentTrigger && currentTrigger.index > -1) {
var query = value.substring(currentTrigger.index, selectionStart);
timeout.current = setTimeout(function () {
search(event, query, currentTrigger);
}, props.delay);
}
};
var search = function search(event, query, trigger) {
if (props.onSearch) {
setSearchingState(true);
setTriggerState(trigger);
props.onSearch({
originalEvent: event,
trigger: trigger.key,
query: query
});
}
};
var selectItem = function selectItem(event, suggestion) {
var input = inputRef.current;
var value = input.value;
var selectionStart = input.selectionStart;
var spaceIndex = value.indexOf(' ', triggerState.index);
var currentText = value.substring(triggerState.index, spaceIndex > -1 ? spaceIndex : selectionStart);
var selectedText = formatValue(suggestion).replace(/\s+/g, '');
if (currentText.trim() !== selectedText) {
var prevText = value.substring(0, triggerState.index);
var nextText = value.substring(spaceIndex > -1 ? selectionStart : triggerState.index + currentText.length);
inputRef.current.value = nextText[0] === ' ' ? "".concat(prevText).concat(selectedText).concat(nextText) : "".concat(prevText).concat(selectedText, " ").concat(nextText);
event.target = inputRef.current;
props.onChange && props.onChange(event);
}
var cursorStart = triggerState.index + selectedText.length + 1;
inputRef.current.setSelectionRange(cursorStart, cursorStart);
hide();
props.onSelect && props.onSelect({
originalEvent: event,
suggestion: suggestion
});
};
var formatValue = function formatValue(value) {
if (value) {
var field = Array.isArray(props.field) ? props.field[props.trigger.findIndex(function (f) {
return f === triggerState.key;
})] : props.field;
return field ? ObjectUtils.resolveFieldData(value, field) : value;
}
return '';
};
var onItemClick = function onItemClick(event, suggestion) {
DomHandler.focus(inputRef.current);
selectItem(event, suggestion);
};
var onFocus = function onFocus(event) {
setFocusedState(true);
props.onFocus && props.onFocus(event);
};
var onBlur = function onBlur(event) {
setFocusedState(false);
props.onBlur && props.onBlur(event);
};
var onInput = function onInput(event) {
props.onInput && props.onInput(event);
var isFilled = event.target.value.length > 0;
if (isUnstyled()) {
DomHandler.setAttributes(elementRef.current, {
'data-p-inputwrapper-filled': isFilled
});
} else if (isFilled) {
DomHandler.addClass(elementRef.current, 'p-inputwrapper-filled');
} else {
DomHandler.removeClass(elementRef.current, 'p-inputwrapper-filled');
}
};
var onKeyUp = function onKeyUp(event) {
if (event.which === 37 || event.which === 39) {
onSearch(event);
}
};
var onChange = function onChange(event) {
props.onChange && props.onChange(event);
onSearch(event);
};
var onKeyDown = function onKeyDown(event) {
if (overlayVisibleState) {
var highlightItem = DomHandler.findSingle(overlayRef.current, 'li[data-p-highlight="true"]');
switch (event.which) {
//down
case 40:
if (highlightItem) {
var nextElement = highlightItem.nextElementSibling;
if (nextElement) {
var nextElementIndex = DomHandler.index(nextElement);
var highlightItemIndex = DomHandler.index(highlightItem);
setHighlightState(function (prevState) {
var newState = _toConsumableArray(prevState);
newState[nextElementIndex] = true;
newState[highlightItemIndex] = false;
return newState;
});
DomHandler.scrollInView(overlayRef.current, nextElement);
}
} else {
highlightItem = DomHandler.findSingle(overlayRef.current, 'li');
if (highlightItem) {
var _highlightItemIndex = DomHandler.index(highlightItem);
setHighlightState(function (prevState) {
var newState = _toConsumableArray(prevState);
newState[_highlightItemIndex] = true;
return newState;
});
}
}
event.preventDefault();
break;
//up
case 38:
if (highlightItem) {
var previousElement = highlightItem.previousElementSibling;
if (previousElement) {
var previousElementIndex = DomHandler.index(previousElement);
var _highlightItemIndex2 = DomHandler.index(highlightItem);
setHighlightState(function (prevState) {
var newState = _toConsumableArray(prevState);
newState[previousElementIndex] = true;
newState[_highlightItemIndex2] = false;
return newState;
});
DomHandler.scrollInView(overlayRef.current, previousElement);
}
}
event.preventDefault();
break;
//backspace
case 8:
var _event$target2 = event.target,
value = _event$target2.value,
selectionStart = _event$target2.selectionStart;
var key = value.substring(selectionStart - 1, selectionStart);
if (key === triggerState.key) {
hide();
}
break;
//enter
case 13:
if (highlightItem) {
selectItem(event, props.suggestions[DomHandler.index(highlightItem)]);
}
event.preventDefault();
break;
//escape
case 27:
hide();
event.preventDefault();
break;
}
}
};
var currentValue = inputRef.current && inputRef.current.value;
var isFilled = React.useMemo(function () {
return ObjectUtils.isNotEmpty(props.value) || ObjectUtils.isNotEmpty(props.defaultValue) || ObjectUtils.isNotEmpty(currentValue);
}, [props.value, props.defaultValue, currentValue]);
React.useImperativeHandle(ref, function () {
return {
props: props,
show: show,
hide: hide,
focus: function focus() {
return DomHandler.focus(inputRef.current);
},
getElement: function getElement() {
return elementRef.current;
},
getOverlay: function getOverlay() {
return overlayRef.current;
},
getInput: function getInput() {
return inputRef.current;
}
};
});
React.useEffect(function () {
ObjectUtils.combinedRefs(inputRef, props.inputRef);
}, [inputRef, props.inputRef]);
useUpdateEffect(function () {
var hasSuggestions = props.suggestions && props.suggestions.length;
if (hasSuggestions) {
var newState = props.suggestions.map(function () {
return false;
});
setHighlightState(newState);
}
if (searchingState) {
hasSuggestions ? show() : hide();
overlayVisibleState && alignOverlay();
setSearchingState(false);
}
}, [props.suggestions]);
useUpdateEffect(function () {
var _isUnstyled = isUnstyled();
var isInputWrapperFilled = _isUnstyled ? DomHandler.isAttributeEquals(elementRef.current, 'data-p-inputwrapper-filled', true) : DomHandler.hasClass(elementRef.current, 'p-inputwrapper-filled');
if (!isFilled && isInputWrapperFilled) {
_isUnstyled ? DomHandler.setAttributes(elementRef.current, {
'data-p-inputwrapper-filled': false
}) : DomHandler.removeClass(elementRef.current, 'p-inputwrapper-filled');
}
}, [isFilled]);
useUnmountEffect(function () {
ZIndexUtils.clear(overlayRef.current);
});
var createItem = function createItem(suggestion, index) {
var key = index + '_item';
var content = props.itemTemplate ? ObjectUtils.getJSXElement(props.itemTemplate, suggestion, {
trigger: triggerState ? triggerState.key : '',
index: index
}) : formatValue(suggestion);
var isSelected = highlightState[index];
var itemProps = mergeProps({
className: cx('item', {
isSelected: isSelected
}),
onClick: function onClick(e) {
return onItemClick(e, suggestion);
},
'data-p-highlight': isSelected
}, getPTOptions(suggestion, 'item', {
selected: isSelected
}));
return /*#__PURE__*/React.createElement("li", _extends({}, itemProps, {
key: key
}), content, /*#__PURE__*/React.createElement(Ripple, null));
};
var createList = function createList() {
var itemsProps = mergeProps({
ref: listRef,
className: cx('items')
}, ptm('items'));
if (props.suggestions) {
var items = props.suggestions.map(createItem);
return /*#__PURE__*/React.createElement("ul", itemsProps, items);
}
return null;
};
var createPanel = function createPanel() {
var header = ObjectUtils.getJSXElement(props.headerTemplate, props);
var footer = ObjectUtils.getJSXElement(props.footerTemplate, props);
var list = createList();
var panelProps = mergeProps({
ref: overlayRef,
className: cx('panel'),
style: _objectSpread$S({
maxHeight: props.scrollHeight
}, props.panelStyle),
onClick: onPanelClick
}, ptm('panel'));
var transitionProps = mergeProps({
classNames: cx('transition'),
"in": overlayVisibleState,
timeout: {
enter: 120,
exit: 100
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: onOverlayEnter,
onEntering: onOverlayEntering,
onEntered: onOverlayEntered,
onExit: onOverlayExit,
onExited: onOverlayExited
}, ptm('transition'));
var panel = /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: overlayRef
}, transitionProps), /*#__PURE__*/React.createElement("div", panelProps, header, list, footer));
return /*#__PURE__*/React.createElement(Portal, {
element: panel,
appendTo: "self"
});
};
var inputProps = MentionBase.getOtherProps(props);
var panel = createPanel();
var inputMentionProps = mergeProps(_objectSpread$S(_objectSpread$S({
ref: inputRef,
id: props.inputId,
className: cx('input'),
style: props.inputStyle
}, inputProps), {}, {
unstyled: props.unstyled,
variant: props.variant,
autoResize: props.autoResize,
onFocus: onFocus,
onBlur: onBlur,
onKeyDown: onKeyDown,
onInput: onInput,
onKeyUp: onKeyUp,
onChange: onChange,
__parentMetadata: {
parent: metaData
}
}), ptm('input'));
var rootProps = mergeProps({
ref: elementRef,
id: props.id,
className: classNames(props.className, cx('root', {
focusedState: focusedState,
isFilled: isFilled
})),
style: props.style
}, MentionBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement(InputTextarea, inputMentionProps), panel);
}));
Mention.displayName = 'Mention';
var styles$s = "\n@layer primereact {\n .p-menu-overlay {\n position: absolute;\n /* Github #3122: Prevent animation flickering */\n top: -9999px;\n left: -9999px;\n }\n\n .p-menu ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n .p-menu .p-menuitem-link {\n cursor: pointer;\n display: flex;\n align-items: center;\n text-decoration: none;\n overflow: hidden;\n position: relative;\n }\n\n .p-menu .p-menuitem-text {\n line-height: 1;\n }\n}\n";
var classes$z = {
root: function root(_ref) {
var props = _ref.props,
context = _ref.context;
return classNames('p-menu p-component', {
'p-menu-overlay': props.popup,
'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
});
},
menu: 'p-menu-list p-reset',
content: function content(_ref2) {
var item = _ref2.item;
return classNames('p-menuitem-content', {
'p-disabled': item.disabled
});
},
action: function action(_ref3) {
var item = _ref3.item;
return classNames('p-menuitem-link', {
'p-disabled': item.disabled
});
},
menuitem: function menuitem(_ref4) {
var focused = _ref4.focused;
return classNames('p-menuitem', {
'p-focus': focused
});
},
submenuHeader: function submenuHeader(_ref5) {
var submenu = _ref5.submenu;
return classNames('p-submenu-header', {
'p-disabled': submenu.disabled
});
},
separator: 'p-menu-separator',
label: 'p-menuitem-text',
icon: 'p-menuitem-icon',
transition: 'p-connected-overlay'
};
var inlineStyles$b = {
submenuHeader: function submenuHeader(_ref6) {
var submenu = _ref6.submenu;
return submenu.style;
},
menuitem: function menuitem(_ref7) {
var item = _ref7.item;
return item.style;
}
};
var MenuBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Menu',
id: null,
ariaLabel: null,
ariaLabelledBy: null,
tabIndex: 0,
model: null,
popup: false,
popupAlignment: 'left',
style: null,
className: null,
autoZIndex: true,
baseZIndex: 0,
appendTo: null,
onFocus: null,
onBlur: null,
transitionOptions: null,
onShow: null,
onHide: null,
children: undefined,
closeOnEscape: true
},
css: {
classes: classes$z,
styles: styles$s,
inlineStyles: inlineStyles$b
}
});
function ownKeys$R(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$R(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$R(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$R(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Menu = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = MenuBase.getProps(inProps, context);
var _React$useState = React.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var _React$useState3 = React.useState(!props.popup),
_React$useState4 = _slicedToArray(_React$useState3, 2),
visibleState = _React$useState4[0],
setVisibleState = _React$useState4[1];
var _React$useState5 = React.useState(-1),
_React$useState6 = _slicedToArray(_React$useState5, 2),
focusedOptionIndex = _React$useState6[0],
setFocusedOptionIndex = _React$useState6[1];
var _React$useState7 = React.useState(-1),
_React$useState8 = _slicedToArray(_React$useState7, 2),
selectedOptionIndex = _React$useState8[0],
setSelectedOptionIndex = _React$useState8[1];
var _React$useState9 = React.useState(false),
_React$useState10 = _slicedToArray(_React$useState9, 2),
focused = _React$useState10[0],
setFocused = _React$useState10[1];
var _MenuBase$setMetaData = MenuBase.setMetaData({
props: props,
state: {
id: idState,
visible: visibleState,
focused: focused
}
}),
ptm = _MenuBase$setMetaData.ptm,
cx = _MenuBase$setMetaData.cx,
sx = _MenuBase$setMetaData.sx,
isUnstyled = _MenuBase$setMetaData.isUnstyled;
var getMenuItemPTOptions = function getMenuItemPTOptions(key, menuContext) {
return ptm(key, {
context: menuContext
});
};
useHandleStyle(MenuBase.css.styles, isUnstyled, {
name: 'menu'
});
var menuRef = React.useRef(null);
var listRef = React.useRef(null);
var targetRef = React.useRef(null);
var isCloseOnEscape = !!(visibleState && props.popup && props.closeOnEscape);
var popupMenuDisplayOrder = useDisplayOrder('menu', isCloseOnEscape);
useGlobalOnEscapeKey({
callback: function callback(event) {
hide(event);
},
when: isCloseOnEscape && popupMenuDisplayOrder,
priority: [ESC_KEY_HANDLING_PRIORITIES.MENU, popupMenuDisplayOrder]
});
var _useOverlayListener = useOverlayListener({
target: targetRef,
overlay: menuRef,
listener: function listener(event, _ref) {
var valid = _ref.valid,
type = _ref.type;
if (valid) {
if (context.hideOverlaysOnDocumentScrolling || type === 'outside') {
hide(event);
setFocusedOptionIndex(-1);
} else if (!DomHandler.isDocument(event.target)) {
DomHandler.absolutePosition(menuRef.current, targetRef.current, props.popupAlignment);
}
}
},
when: visibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var onPanelClick = function onPanelClick(event) {
if (props.popup) {
OverlayService.emit('overlay-click', {
originalEvent: event,
target: targetRef.current
});
}
};
var onItemClick = function onItemClick(event, item, key) {
if (item.disabled) {
event.preventDefault();
return;
}
if (item.command) {
item.command({
originalEvent: event,
item: item
});
}
if (props.popup) {
hide(event);
}
if (!props.popup && focusedOptionIndex !== key) {
setFocusedOptionIndex(key);
}
if (!item.url) {
event.preventDefault();
event.stopPropagation();
}
};
var onItemMouseMove = function onItemMouseMove(event, key) {
if (event && props.popup && focusedOptionIndex !== key) {
setFocusedOptionIndex(key);
}
};
var onListFocus = function onListFocus(event) {
setFocused(true);
if (!props.popup) {
if (selectedOptionIndex !== -1) {
changeFocusedOptionIndex(selectedOptionIndex);
setSelectedOptionIndex(-1);
} else {
changeFocusedOptionIndex(0);
}
}
props.onFocus && props.onFocus(event);
};
var onListBlur = function onListBlur(event) {
var currentTarget = event.currentTarget,
relatedTarget = event.relatedTarget;
if (relatedTarget && currentTarget.contains(relatedTarget)) return;
setFocused(false);
setFocusedOptionIndex(-1);
props.onBlur && props.onBlur(event);
};
var onListKeyDown = function onListKeyDown(event) {
switch (event.code) {
case 'ArrowDown':
onArrowDownKey(event);
break;
case 'ArrowUp':
onArrowUpKey(event);
break;
case 'Home':
onHomeKey(event);
break;
case 'End':
onEndKey(event);
break;
case 'Enter':
case 'NumpadEnter':
onEnterKey(event);
break;
case 'Space':
onSpaceKey(event);
break;
case 'Escape':
if (props.popup) {
DomHandler.focus(targetRef.current);
hide(event);
}
case 'Tab':
props.popup && visibleState && hide(event);
break;
}
};
var onArrowDownKey = function onArrowDownKey(event) {
var optionIndex = findNextOptionIndex(focusedOptionIndex);
changeFocusedOptionIndex(optionIndex);
event.preventDefault();
};
var onArrowUpKey = function onArrowUpKey(event) {
if (event.altKey && props.popup) {
DomHandler.focus(targetRef.current);
hide(event);
event.preventDefault();
} else {
var optionIndex = findPrevOptionIndex(focusedOptionIndex);
changeFocusedOptionIndex(optionIndex);
event.preventDefault();
}
};
var onHomeKey = function onHomeKey(event) {
changeFocusedOptionIndex(0);
event.preventDefault();
};
var onEndKey = function onEndKey(event) {
changeFocusedOptionIndex(DomHandler.find(menuRef.current, 'li[data-pc-section="menuitem"][data-p-disabled="false"]').length - 1);
event.preventDefault();
};
var onEnterKey = function onEnterKey(event) {
var element = DomHandler.findSingle(menuRef.current, "li[id=\"".concat("".concat(focusedOptionIndex), "\"]"));
var anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]');
props.popup && DomHandler.focus(targetRef.current);
anchorElement ? anchorElement.click() : element && element.click();
event.preventDefault();
};
var onSpaceKey = function onSpaceKey(event) {
onEnterKey(event);
};
var findNextOptionIndex = function findNextOptionIndex(index) {
var links = DomHandler.find(menuRef.current, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
var matchedOptionIndex = _toConsumableArray(links).findIndex(function (link) {
return link.id === index;
});
return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
};
var findPrevOptionIndex = function findPrevOptionIndex(index) {
var links = DomHandler.find(menuRef.current, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
var matchedOptionIndex = _toConsumableArray(links).findIndex(function (link) {
return link.id === index;
});
return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
};
var changeFocusedOptionIndex = function changeFocusedOptionIndex(index) {
var links = DomHandler.find(menuRef.current, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
var order = index >= links.length ? links.length - 1 : index < 0 ? 0 : index;
order > -1 && setFocusedOptionIndex(links[order].getAttribute('id'));
};
var focusedOptionId = function focusedOptionId() {
return focusedOptionIndex !== -1 ? focusedOptionIndex : null;
};
var toggle = function toggle(event) {
if (props.popup) {
visibleState ? hide(event) : show(event);
}
};
var show = function show(event) {
targetRef.current = event.currentTarget;
setVisibleState(true);
props.onShow && props.onShow(event);
};
var hide = function hide(event) {
targetRef.current = event.currentTarget;
setVisibleState(false);
props.onHide && props.onHide(event);
};
var onEnter = function onEnter() {
DomHandler.addStyles(menuRef.current, {
position: 'absolute',
top: '0',
left: '0'
});
ZIndexUtils.set('menu', menuRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, props.baseZIndex || context && context.zIndex.menu || PrimeReact.zIndex.menu);
DomHandler.absolutePosition(menuRef.current, targetRef.current, props.popupAlignment);
if (props.popup) {
DomHandler.focus(listRef.current);
changeFocusedOptionIndex(0);
}
};
var onEntered = function onEntered() {
bindOverlayListener();
};
var onExit = function onExit() {
targetRef.current = null;
unbindOverlayListener();
};
var onExited = function onExited() {
ZIndexUtils.clear(menuRef.current);
};
useMountEffect(function () {
if (!idState) {
setIdState(UniqueComponentId());
}
});
useUnmountEffect(function () {
ZIndexUtils.clear(menuRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
toggle: toggle,
show: show,
hide: hide,
getElement: function getElement() {
return menuRef.current;
},
getTarget: function getTarget() {
return targetRef.current;
}
};
});
var createSubmenu = function createSubmenu(submenu, index) {
var key = idState + '_sub_' + index;
var items = submenu.items.map(function (item, index) {
return createMenuItem(item, index, key);
});
var submenuHeaderProps = mergeProps({
id: key,
role: 'none',
className: classNames(submenu.className, cx('submenuHeader', {
submenu: submenu
})),
style: sx('submenuHeader', {
submenu: submenu
}),
'data-p-disabled': submenu.disabled
}, ptm('submenuHeader'));
return /*#__PURE__*/React.createElement(React.Fragment, {
key: key
}, /*#__PURE__*/React.createElement("li", _extends({}, submenuHeaderProps, {
key: key
}), submenu.label), items);
};
var createSeparator = function createSeparator(item, index) {
if (item.visible === false) {
return null;
}
var key = idState + '_separator_' + index;
var separatorProps = mergeProps({
id: key,
className: classNames(item.className, cx('separator')),
role: 'separator'
}, ptm('separator'));
return /*#__PURE__*/React.createElement("li", _extends({}, separatorProps, {
key: key
}));
};
var createMenuItem = function createMenuItem(item, index) {
var parentId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
if (item.visible === false) {
return null;
}
var menuContext = {
item: item,
index: index,
parentId: parentId
};
var linkClassName = classNames('p-menuitem-link', {
'p-disabled': item.disabled
});
var iconClassName = classNames('p-menuitem-icon', item.icon);
var iconProps = mergeProps({
className: cx('icon')
}, getMenuItemPTOptions('icon', menuContext));
var icon = IconUtils.getJSXIcon(item.icon, _objectSpread$R({}, iconProps), {
props: props
});
var labelProps = mergeProps({
className: cx('label')
}, getMenuItemPTOptions('label', menuContext));
var label = item.label && /*#__PURE__*/React.createElement("span", labelProps, item.label);
var key = item.id || (parentId || idState) + '_' + index;
var contentProps = mergeProps({
onClick: function onClick(event) {
return onItemClick(event, item, key);
},
onMouseMove: function onMouseMove(event) {
return onItemMouseMove(event, key);
},
className: cx('content', {
item: item
})
}, getMenuItemPTOptions('content', menuContext));
var actionProps = mergeProps({
href: item.url || '#',
className: cx('action', {
item: item
}),
onFocus: function onFocus(event) {
return event.stopPropagation();
},
target: item.target,
tabIndex: '-1',
'aria-label': item.label,
'aria-disabled': item.disabled,
'data-p-disabled': item.disabled
}, getMenuItemPTOptions('action', menuContext));
var content = /*#__PURE__*/React.createElement("div", contentProps, /*#__PURE__*/React.createElement("a", actionProps, icon, label, /*#__PURE__*/React.createElement(Ripple, null)));
if (item.template) {
var defaultContentOptions = {
onClick: function onClick(event) {
return onItemClick(event, item, key);
},
onMouseMove: function onMouseMove(event) {
return onItemMouseMove(event, key);
},
className: linkClassName,
tabIndex: '-1',
labelClassName: 'p-menuitem-text',
iconClassName: iconClassName,
element: content,
props: props
};
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
}
var menuitemProps = mergeProps({
id: key,
className: classNames(item.className, cx('menuitem', {
focused: focusedOptionIndex === key
})),
onClick: function onClick(event) {
return onItemClick(event, item, key);
},
style: sx('menuitem', {
item: item
}),
role: 'menuitem',
'aria-label': item.label,
'aria-disabled': item.disabled,
'data-p-focused': focusedOptionId() === key,
'data-p-disabled': item.disabled || false
}, getMenuItemPTOptions('menuitem', menuContext));
return /*#__PURE__*/React.createElement("li", _extends({}, menuitemProps, {
key: key
}), content);
};
var createItem = function createItem(item, index) {
if (item.visible === false) {
return null;
}
return item.separator ? createSeparator(item, index) : item.items ? createSubmenu(item, index) : createMenuItem(item, index);
};
var createMenu = function createMenu() {
return props.model.map(createItem);
};
var createElement = function createElement() {
if (props.model) {
var menuitems = createMenu();
var rootProps = mergeProps({
className: classNames(props.className, cx('root', {
context: context
})),
style: props.style,
onClick: function onClick(e) {
return onPanelClick(e);
}
}, MenuBase.getOtherProps(props), ptm('root'));
var menuProps = mergeProps({
ref: listRef,
className: cx('menu'),
id: idState + '_list',
tabIndex: props.tabIndex || '0',
role: 'menu',
'aria-label': props.ariaLabel,
'aria-labelledby': props.ariaLabelledBy,
'aria-activedescendant': focused ? focusedOptionId() : undefined,
onFocus: onListFocus,
onKeyDown: onListKeyDown,
onBlur: onListBlur
}, ptm('menu'));
var transitionProps = mergeProps({
classNames: cx('transition'),
"in": visibleState,
timeout: {
enter: 120,
exit: 100
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: onEnter,
onEntered: onEntered,
onExit: onExit,
onExited: onExited
}, ptm('transition'));
return /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: menuRef
}, transitionProps), /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
ref: menuRef
}, rootProps), /*#__PURE__*/React.createElement("ul", menuProps, menuitems)));
}
return null;
};
var element = createElement();
return props.popup ? /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo
}) : element;
}));
Menu.displayName = 'Menu';
var classes$y = {
start: 'p-menubar-start',
end: 'p-menubar-end',
button: 'p-menubar-button',
root: function root(_ref) {
var mobileActiveState = _ref.mobileActiveState;
return classNames('p-menubar p-component', {
'p-menubar-mobile-active': mobileActiveState
});
},
separator: 'p-menuitem-separator',
icon: 'p-menuitem-icon',
label: 'p-menuitem-text',
submenuIcon: 'p-submenu-icon',
menuitem: function menuitem(_ref2) {
var active = _ref2.active,
focused = _ref2.focused,
disabled = _ref2.disabled;
return classNames('p-menuitem', {
'p-menuitem-active p-highlight': active,
'p-focus': focused,
'p-disabled': disabled
});
},
menu: 'p-menubar-root-list',
content: 'p-menuitem-content',
submenu: 'p-submenu-list',
action: function action(_ref3) {
var disabled = _ref3.disabled;
return classNames('p-menuitem-link', {
'p-disabled': disabled
});
}
};
var styles$r = "\n@layer primereact {\n .p-menubar {\n display: flex;\n align-items: center;\n }\n\n .p-menubar ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n .p-menubar .p-menuitem-link {\n cursor: pointer;\n display: flex;\n align-items: center;\n text-decoration: none;\n overflow: hidden;\n position: relative;\n }\n\n .p-menubar .p-menuitem-text {\n line-height: 1;\n }\n\n .p-menubar .p-menuitem {\n position: relative;\n }\n\n .p-menubar-root-list {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n }\n\n .p-menubar-root-list > li ul {\n display: none;\n z-index: 1;\n }\n\n .p-menubar-root-list > .p-menuitem-active > .p-submenu-list {\n display: block;\n }\n\n .p-menubar .p-submenu-list {\n display: none;\n position: absolute;\n z-index: 5;\n }\n\n .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list {\n display: block;\n left: 100%;\n top: 0;\n }\n\n .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {\n margin-left: auto;\n }\n\n .p-menubar .p-menubar-end {\n margin-left: auto;\n align-self: center;\n }\n\n .p-menubar-button {\n display: none;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n }\n}\n";
var MenubarBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Menubar',
id: null,
model: null,
style: null,
className: null,
start: null,
ariaLabel: null,
ariaLabelledBy: null,
onFocus: null,
onBlur: null,
submenuIcon: null,
menuIcon: null,
end: null,
children: undefined
},
css: {
classes: classes$y,
styles: styles$r
}
});
function ownKeys$Q(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$Q(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$Q(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$Q(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var MenubarSub = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (props, ref) {
var mergeProps = useMergeProps();
var ptm = props.ptm,
cx = props.cx;
var getPTOptions = function getPTOptions(processedItem, key, index) {
return ptm(key, {
props: props,
hostName: props.hostName,
context: {
item: processedItem,
index: index,
active: isItemActive(processedItem),
focused: isItemFocused(processedItem),
disabled: isItemDisabled(processedItem),
level: props.level
}
});
};
var onItemMouseEnter = function onItemMouseEnter(event, item) {
if (isItemDisabled(item) || props.mobileActive) {
event.preventDefault();
return;
}
props.onItemMouseEnter && props.onItemMouseEnter({
originalEvent: event,
processedItem: item
});
};
var onItemClick = function onItemClick(event, processedItem) {
var item = processedItem.item;
if (isItemDisabled(processedItem)) {
event.preventDefault();
return;
}
if (item.command) {
item.command({
originalEvent: event,
item: item
});
}
onLeafClick({
originalEvent: event,
processedItem: processedItem,
isFocus: true
});
if (!item.url) {
event.preventDefault();
event.stopPropagation();
}
};
var onLeafClick = function onLeafClick(event) {
props.onLeafClick && props.onLeafClick(event);
};
var getItemId = function getItemId(processedItem) {
var _processedItem$item;
return (_processedItem$item = processedItem.item) === null || _processedItem$item === void 0 ? void 0 : _processedItem$item.id;
};
var getItemDataId = function getItemDataId(processedItem) {
return "".concat(props.id, "_").concat(processedItem.key);
};
var getItemProp = function getItemProp(processedItem, name, params) {
return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name], params) : undefined;
};
var isItemActive = function isItemActive(processedItem) {
return props.activeItemPath.some(function (path) {
return path.key === processedItem.key;
});
};
var isItemVisible = function isItemVisible(processedItem) {
return getItemProp(processedItem, 'visible') !== false;
};
var isItemDisabled = function isItemDisabled(processedItem) {
return getItemProp(processedItem, 'disabled');
};
var isItemFocused = function isItemFocused(processedItem) {
return props.focusedItemId === getItemDataId(processedItem);
};
var isItemGroup = function isItemGroup(processedItem) {
return ObjectUtils.isNotEmpty(processedItem.items);
};
var getAriaSetSize = function getAriaSetSize() {
return props.model.filter(function (processedItem) {
return isItemVisible(processedItem) && !getItemProp(processedItem, 'separator');
}).length;
};
var getAriaPosInset = function getAriaPosInset(index) {
return index - props.model.slice(0, index).filter(function (processedItem) {
return isItemVisible(processedItem) && getItemProp(processedItem, 'separator');
}).length + 1;
};
var createSeparator = function createSeparator(processedItem, index) {
var key = props.id + '_separator_' + index + '_' + processedItem.key;
var separatorProps = mergeProps({
'data-id': key,
className: cx('separator'),
role: 'separator'
}, ptm('separator', {
hostName: props.hostName
}));
return /*#__PURE__*/React.createElement("li", _extends({}, separatorProps, {
key: key
}));
};
var createSubmenu = function createSubmenu(processedItem) {
var items = processedItem && processedItem.items;
if (items) {
return /*#__PURE__*/React.createElement(MenubarSub, {
id: props.id,
hostName: props.hostName,
menuProps: props.menuProps,
level: props.level + 1,
model: items,
activeItemPath: props.activeItemPath,
focusedItemId: props.focusedItemId,
onLeafClick: onLeafClick,
onItemMouseEnter: props.onItemMouseEnter,
submenuIcon: props.submenuIcon,
ptm: ptm,
style: {
display: isItemActive(processedItem) ? 'block' : 'none'
},
cx: cx
});
}
return null;
};
var createMenuitem = function createMenuitem(processedItem, index) {
var item = processedItem.item;
if (!isItemVisible(processedItem)) {
return null;
}
var id = getItemId(processedItem);
var dataId = getItemDataId(processedItem);
var active = isItemActive(processedItem);
var focused = isItemFocused(processedItem);
var disabled = isItemDisabled(processedItem) || false;
var group = isItemGroup(processedItem);
var linkClassName = classNames('p-menuitem-link', {
'p-disabled': disabled
});
var iconClassName = classNames('p-menuitem-icon', getItemProp(processedItem, 'icon'));
var iconProps = mergeProps({
className: cx('icon')
}, getPTOptions(processedItem, 'icon', index));
var icon = IconUtils.getJSXIcon(item.icon, _objectSpread$Q({}, iconProps), {
props: props.menuProps
});
var labelProps = mergeProps({
className: cx('label')
}, getPTOptions(processedItem, 'label', index));
var label = item.label && /*#__PURE__*/React.createElement("span", labelProps, item.label);
var items = getItemProp(processedItem, 'items');
var submenuIconClassName = 'p-submenu-icon';
var submenuIconProps = mergeProps({
className: cx('submenuIcon')
}, getPTOptions(processedItem, 'submenuIcon', index));
var submenuIcon = items && IconUtils.getJSXIcon(!props.root ? props.submenuIcon || /*#__PURE__*/React.createElement(AngleRightIcon, submenuIconProps) : props.submenuIcon || /*#__PURE__*/React.createElement(AngleDownIcon, submenuIconProps), _objectSpread$Q({}, submenuIconProps), {
props: _objectSpread$Q({
menuProps: props.menuProps
}, props)
});
var submenu = createSubmenu(processedItem);
var actionProps = mergeProps({
href: item.url || '#',
tabIndex: '-1',
className: cx('action', {
disabled: disabled
}),
onFocus: function onFocus(event) {
return event.stopPropagation();
},
target: getItemProp(processedItem, 'target'),
'aria-haspopup': items != null
}, getPTOptions(processedItem, 'action', index));
var content = /*#__PURE__*/React.createElement("a", actionProps, icon, label, submenuIcon, /*#__PURE__*/React.createElement(Ripple, null));
if (item.template) {
var defaultContentOptions = {
className: linkClassName,
labelClassName: 'p-menuitem-text',
iconClassName: iconClassName,
submenuIconClassName: submenuIconClassName,
element: content,
props: props
};
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
}
var contentProps = mergeProps({
onClick: function onClick(event) {
return onItemClick(event, processedItem);
},
onMouseEnter: function onMouseEnter(event) {
return onItemMouseEnter(event, processedItem);
},
className: cx('content')
}, getPTOptions(processedItem, 'content', index));
var itemClassName = getItemProp(processedItem, 'className');
var menuitemProps = mergeProps(_defineProperty({
id: id,
'data-id': dataId,
role: 'menuitem',
'aria-label': item.label,
'aria-disabled': disabled,
'aria-expanded': group ? active : undefined,
'aria-haspopup': group && !item.url ? 'menu' : undefined,
'aria-setsize': getAriaSetSize(),
'aria-posinset': getAriaPosInset(index),
'data-p-highlight': active,
'data-p-focused': focused,
'data-p-disabled': disabled,
className: classNames(itemClassName, cx('menuitem', {
active: active,
focused: focused,
disabled: disabled
}))
}, "data-p-disabled", disabled || false), getPTOptions(processedItem, 'menuitem', index));
return /*#__PURE__*/React.createElement("li", _extends({}, menuitemProps, {
key: "".concat(dataId)
}), /*#__PURE__*/React.createElement("div", contentProps, content), submenu);
};
var createItem = function createItem(processedItem, index) {
if (processedItem.visible === false) {
return null;
}
return getItemProp(processedItem, 'separator') ? createSeparator(processedItem, index) : createMenuitem(processedItem, index);
};
var createMenu = function createMenu() {
return props.model ? props.model.map(createItem) : null;
};
var role = props.root ? 'menubar' : 'menu';
var ptKey = props.root ? 'menu' : 'submenu';
var tabIndex = props.root ? '0' : null;
var submenu = createMenu();
var menuProps = mergeProps({
ref: ref,
className: cx(ptKey),
level: props.level,
onFocus: props.onFocus,
onBlur: props.onBlur,
onKeyDown: props.onKeyDown,
'data-id': props.id,
tabIndex: tabIndex,
'aria-activedescendant': props.ariaActivedescendant,
style: props.style,
role: role
}, ptm(ptKey));
return /*#__PURE__*/React.createElement("ul", menuProps, submenu);
}));
MenubarSub.displayName = 'MenubarSub';
function ownKeys$P(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$P(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$P(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$P(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Menubar = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = MenubarBase.getProps(inProps, context);
var _React$useState = React.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
mobileActiveState = _React$useState4[0],
setMobileActiveState = _React$useState4[1];
var _React$useState5 = React.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
focused = _React$useState6[0],
setFocused = _React$useState6[1];
var _React$useState7 = React.useState({
index: -1,
level: 0,
parentKey: ''
}),
_React$useState8 = _slicedToArray(_React$useState7, 2),
focusedItemInfo = _React$useState8[0],
setFocusedItemInfo = _React$useState8[1];
var _React$useState9 = React.useState(null),
_React$useState10 = _slicedToArray(_React$useState9, 2),
focusedItemId = _React$useState10[0],
setFocusedItemId = _React$useState10[1];
var _React$useState11 = React.useState([]),
_React$useState12 = _slicedToArray(_React$useState11, 2),
activeItemPath = _React$useState12[0],
setActiveItemPath = _React$useState12[1];
var _React$useState13 = React.useState([]),
_React$useState14 = _slicedToArray(_React$useState13, 2),
visibleItems = _React$useState14[0],
setVisibleItems = _React$useState14[1];
var _React$useState15 = React.useState([]),
_React$useState16 = _slicedToArray(_React$useState15, 2),
processedItems = _React$useState16[0],
setProcessedItems = _React$useState16[1];
var _React$useState17 = React.useState(false),
_React$useState18 = _slicedToArray(_React$useState17, 2),
focusTrigger = _React$useState18[0],
setFocusTrigger = _React$useState18[1];
var _React$useState19 = React.useState(false),
_React$useState20 = _slicedToArray(_React$useState19, 2),
dirty = _React$useState20[0],
setDirty = _React$useState20[1];
var elementRef = React.useRef(null);
var rootMenuRef = React.useRef(null);
var menuButtonRef = React.useRef(null);
var searchValue = React.useRef('');
var searchTimeout = React.useRef(null);
var reverseTrigger = React.useRef(false);
var _MenubarBase$setMetaD = MenubarBase.setMetaData({
props: props,
state: {
id: idState,
mobileActive: mobileActiveState
}
}),
ptm = _MenubarBase$setMetaD.ptm,
cx = _MenubarBase$setMetaD.cx,
isUnstyled = _MenubarBase$setMetaD.isUnstyled;
useHandleStyle(MenubarBase.css.styles, isUnstyled, {
name: 'menubar'
});
var _useEventListener = useEventListener({
type: 'click',
listener: function listener(event) {
if (isOutsideClicked(event)) {
var isOutsideContainer = elementRef.current && !elementRef.current.contains(event.target);
if (isOutsideContainer) {
hide();
}
}
},
options: {
capture: true
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindOutsideClickListener = _useEventListener2[0],
unbindOutsideClickListener = _useEventListener2[1];
var _useResizeListener = useResizeListener({
listener: function listener(event) {
if (!DomHandler.isTouchDevice()) {
hide(event);
}
}
}),
_useResizeListener2 = _slicedToArray(_useResizeListener, 2),
bindResizeListener = _useResizeListener2[0],
unbindResizeListener = _useResizeListener2[1];
var toggle = function toggle(event) {
if (mobileActiveState) {
setMobileActiveState(false);
hide();
} else {
setMobileActiveState(true);
setTimeout(function () {
show();
}, 1);
}
event.preventDefault();
};
var show = function show() {
setFocusedItemInfo({
index: findFirstFocusedItemIndex(),
level: 0,
parentKey: ''
});
DomHandler.focus(rootMenuRef.current);
};
var hide = function hide(isFocus) {
if (mobileActiveState) {
setMobileActiveState(false);
setTimeout(function () {
DomHandler.focus(menuButtonRef.current);
}, 0);
}
setActiveItemPath([]);
setFocusedItemInfo({
index: -1,
level: 0,
parentKey: ''
});
isFocus && DomHandler.focus(rootMenuRef.current);
setDirty(false);
};
var menuButtonKeydown = function menuButtonKeydown(event) {
(event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') && toggle(event);
};
var isOutsideClicked = function isOutsideClicked(event) {
return rootMenuRef.current !== event.target && !rootMenuRef.current.contains(event.target) && menuButtonRef.current !== event.target && !menuButtonRef.current.contains(event.target);
};
var getItemProp = function getItemProp(item, name) {
return item ? ObjectUtils.getItemValue(item[name]) : undefined;
};
var getItemLabel = function getItemLabel(item) {
return getItemProp(item, 'label');
};
var isItemDisabled = function isItemDisabled(item) {
return getItemProp(item, 'disabled');
};
var isItemSeparator = function isItemSeparator(item) {
return getItemProp(item, 'separator');
};
var getProccessedItemLabel = function getProccessedItemLabel(processedItem) {
return processedItem ? getItemLabel(processedItem.item) : undefined;
};
var isProccessedItemGroup = function isProccessedItemGroup(processedItem) {
return processedItem && ObjectUtils.isNotEmpty(processedItem.items);
};
var onFocus = function onFocus(event) {
setFocused(true);
setFocusedItemInfo(focusedItemInfo.index !== -1 ? focusedItemInfo : {
index: findFirstFocusedItemIndex(),
level: 0,
parentKey: ''
});
props.onFocus && props.onFocus(event);
};
var onBlur = function onBlur(event) {
setFocused(false);
setFocusedItemInfo({
index: -1,
level: 0,
parentKey: ''
});
searchValue.current = '';
setDirty(false);
props.onBlur && props.onBlur(event);
};
var onKeyDown = function onKeyDown(event) {
var metaKey = event.metaKey || event.ctrlKey;
var code = event.code;
switch (code) {
case 'ArrowDown':
onArrowDownKey(event);
break;
case 'ArrowUp':
onArrowUpKey(event);
break;
case 'ArrowLeft':
onArrowLeftKey(event);
break;
case 'ArrowRight':
onArrowRightKey(event);
break;
case 'Home':
onHomeKey(event);
break;
case 'End':
onEndKey(event);
break;
case 'Space':
onSpaceKey(event);
break;
case 'Enter':
case 'NumpadEnter':
onEnterKey(event);
break;
case 'Escape':
onEscapeKey();
break;
case 'Tab':
onTabKey(event);
break;
case 'PageDown':
case 'PageUp':
case 'Backspace':
case 'ShiftLeft':
case 'ShiftRight':
break;
default:
if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
searchItems(event, event.key);
}
break;
}
};
var onItemChange = function onItemChange(event) {
var processedItem = event.processedItem,
isFocus = event.isFocus;
if (ObjectUtils.isEmpty(processedItem)) {
return;
}
var index = processedItem.index,
key = processedItem.key,
level = processedItem.level,
parentKey = processedItem.parentKey,
items = processedItem.items;
var grouped = ObjectUtils.isNotEmpty(items);
var _activeItemPath = activeItemPath.filter(function (p) {
return p.parentKey !== parentKey && p.parentKey !== key;
});
grouped && _activeItemPath.push(processedItem);
setFocusedItemInfo({
index: index,
level: level,
parentKey: parentKey
});
setActiveItemPath(_activeItemPath);
grouped && setDirty(true);
isFocus && DomHandler.focus(rootMenuRef.current);
};
var onItemClick = function onItemClick(event) {
var originalEvent = event.originalEvent,
processedItem = event.processedItem;
var grouped = isProccessedItemGroup(processedItem);
var root = ObjectUtils.isEmpty(processedItem.parent);
var selected = isSelected(processedItem);
if (selected) {
var index = processedItem.index,
key = processedItem.key,
level = processedItem.level,
parentKey = processedItem.parentKey;
setActiveItemPath(activeItemPath.filter(function (p) {
return key !== p.key && key.startsWith(p.key);
}));
setFocusedItemInfo({
index: index,
level: level,
parentKey: parentKey
});
if (!grouped) {
setDirty(!root);
}
setTimeout(function () {
DomHandler.focus(rootMenuRef.current);
if (grouped) {
setDirty(true);
}
}, 0);
} else if (grouped) {
DomHandler.focus(rootMenuRef.current);
onItemChange({
originalEvent: originalEvent,
processedItem: processedItem
});
} else {
var rootProcessedItem = root ? processedItem : activeItemPath.find(function (p) {
return p.parentKey === '';
});
var rootProcessedItemIndex = rootProcessedItem ? rootProcessedItem.index : -1;
hide(originalEvent);
setFocusedItemInfo({
index: rootProcessedItemIndex,
parentKey: rootProcessedItem ? rootProcessedItem.parentKey : ''
});
setMobileActiveState(false);
}
};
var onItemMouseEnter = function onItemMouseEnter(event) {
if (!mobileActiveState && dirty) {
onItemChange(event);
}
};
var onArrowDownKey = function onArrowDownKey(event) {
var processedItem = visibleItems[focusedItemInfo.index];
var root = processedItem ? ObjectUtils.isEmpty(processedItem.parent) : null;
if (root) {
var grouped = isProccessedItemGroup(processedItem);
if (grouped) {
onItemChange({
originalEvent: event,
processedItem: processedItem
});
setFocusedItemInfo({
index: -1,
parentKey: processedItem.key
});
setTimeout(function () {
return setFocusTrigger(true);
}, 0);
}
} else {
var itemIndex = focusedItemInfo.index !== -1 ? findNextItemIndex(focusedItemInfo.index) : findFirstFocusedItemIndex();
changeFocusedItemIndex(itemIndex);
}
event.preventDefault();
};
var onArrowUpKey = function onArrowUpKey(event) {
var processedItem = visibleItems[focusedItemInfo.index];
var root = ObjectUtils.isEmpty(processedItem.parent);
if (root) {
var grouped = isProccessedItemGroup(processedItem);
if (grouped) {
onItemChange({
originalEvent: event,
processedItem: processedItem
});
setFocusedItemInfo({
index: -1,
parentKey: processedItem.key
});
reverseTrigger.current = true;
setTimeout(function () {
return setFocusTrigger(true);
}, 0);
}
} else {
var parentItem = activeItemPath.find(function (p) {
return p.key === processedItem.parentKey;
});
if (focusedItemInfo.index === 0 && parentItem && parentItem.parentKey === '') {
setFocusedItemInfo({
index: -1,
parentKey: parentItem ? parentItem.parentKey : ''
});
searchValue.current = '';
onArrowLeftKey(event);
} else {
var itemIndex = focusedItemInfo.index !== -1 ? findPrevItemIndex(focusedItemInfo.index) : findLastFocusedItemIndex();
changeFocusedItemIndex(itemIndex);
}
}
event.preventDefault();
};
var onArrowLeftKey = function onArrowLeftKey(event) {
var processedItem = visibleItems[focusedItemInfo.index];
var parentItem = processedItem ? activeItemPath.find(function (p) {
return p.key === processedItem.parentKey;
}) : null;
if (parentItem) {
onItemChange({
originalEvent: event,
processedItem: parentItem
});
setActiveItemPath(activeItemPath.filter(function (p) {
return p.key !== parentItem.key;
}));
} else {
var itemIndex = focusedItemInfo.index !== -1 ? findPrevItemIndex(focusedItemInfo.index) : findLastFocusedItemIndex();
changeFocusedItemIndex(itemIndex);
}
event.preventDefault();
};
var onArrowRightKey = function onArrowRightKey(event) {
var processedItem = visibleItems[focusedItemInfo.index];
var parentItem = processedItem ? activeItemPath.find(function (p) {
return p.key === processedItem.parentKey;
}) : null;
if (parentItem) {
var grouped = isProccessedItemGroup(processedItem);
if (grouped) {
onItemChange({
originalEvent: event,
processedItem: processedItem
});
setFocusedItemInfo({
index: -1,
parentKey: processedItem.key
});
setTimeout(function () {
return setFocusTrigger(true);
}, 0);
}
} else {
var itemIndex = focusedItemInfo.index !== -1 ? findNextItemIndex(focusedItemInfo.index) : findFirstFocusedItemIndex();
changeFocusedItemIndex(itemIndex);
}
event.preventDefault();
};
var onHomeKey = function onHomeKey(event) {
changeFocusedItemIndex(findFirstItemIndex());
event.preventDefault();
};
var onEndKey = function onEndKey(event) {
changeFocusedItemIndex(findLastItemIndex());
event.preventDefault();
};
var onEnterKey = function onEnterKey(event) {
if (focusedItemInfo.index !== -1) {
var element = DomHandler.findSingle(rootMenuRef.current, "li[data-id=\"".concat("".concat(focusedItemId), "\"]"));
var anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]');
anchorElement ? anchorElement.click() : element && element.click();
}
event.preventDefault();
};
var onSpaceKey = function onSpaceKey(event) {
onEnterKey(event);
};
var onEscapeKey = function onEscapeKey(event) {
hide(true);
setFocusedItemInfo({
focusedItemInfo: focusedItemInfo,
index: findFirstFocusedItemIndex()
});
};
var onTabKey = function onTabKey(event) {
if (focusedItemInfo.index !== -1) {
var processedItem = visibleItems[focusedItemInfo.index];
var grouped = isProccessedItemGroup(processedItem);
!grouped && onItemChange({
originalEvent: event,
processedItem: processedItem
});
}
hide();
};
var isItemMatched = function isItemMatched(processedItem) {
return isValidItem(processedItem) && getProccessedItemLabel(processedItem).toLocaleLowerCase().startsWith(searchValue.current.toLocaleLowerCase());
};
var isValidItem = function isValidItem(processedItem) {
return !!processedItem && !isItemDisabled(processedItem.item) && !isItemSeparator(processedItem.item);
};
var isValidSelectedItem = function isValidSelectedItem(processedItem) {
return isValidItem(processedItem) && isSelected(processedItem);
};
var isSelected = function isSelected(processedItem) {
return activeItemPath.some(function (p) {
return p.key === processedItem.key;
});
};
var findFirstItemIndex = function findFirstItemIndex() {
return visibleItems.findIndex(function (processedItem) {
return isValidItem(processedItem);
});
};
var findLastItemIndex = function findLastItemIndex() {
return ObjectUtils.findLastIndex(visibleItems, function (processedItem) {
return isValidItem(processedItem);
});
};
var findNextItemIndex = function findNextItemIndex(index) {
var matchedItemIndex = index < visibleItems.length - 1 ? visibleItems.slice(index + 1).findIndex(function (processedItem) {
return isValidItem(processedItem);
}) : -1;
return matchedItemIndex > -1 ? matchedItemIndex + index + 1 : index;
};
var findPrevItemIndex = function findPrevItemIndex(index) {
var matchedItemIndex = index > 0 ? ObjectUtils.findLastIndex(visibleItems.slice(0, index), function (processedItem) {
return isValidItem(processedItem);
}) : -1;
return matchedItemIndex > -1 ? matchedItemIndex : index;
};
var findSelectedItemIndex = function findSelectedItemIndex() {
return visibleItems.findIndex(function (processedItem) {
return isValidSelectedItem(processedItem);
});
};
var findFirstFocusedItemIndex = function findFirstFocusedItemIndex() {
var selectedIndex = findSelectedItemIndex();
return selectedIndex;
};
var findLastFocusedItemIndex = function findLastFocusedItemIndex() {
var selectedIndex = findSelectedItemIndex();
return selectedIndex;
};
var searchItems = function searchItems(event, _char) {
searchValue.current = (searchValue.current || '') + _char;
var itemIndex = -1;
var matched = false;
if (focusedItemInfo.index !== -1) {
itemIndex = visibleItems.slice(focusedItemInfo.index).findIndex(function (processedItem) {
return isItemMatched(processedItem);
});
itemIndex = itemIndex === -1 ? visibleItems.slice(0, focusedItemInfo.index).findIndex(function (processedItem) {
return isItemMatched(processedItem);
}) : itemIndex + focusedItemInfo.index;
} else {
itemIndex = visibleItems.findIndex(function (processedItem) {
return isItemMatched(processedItem);
});
}
if (itemIndex !== -1) {
matched = true;
}
if (itemIndex === -1 && focusedItemInfo.index === -1) {
itemIndex = findFirstFocusedItemIndex();
}
if (itemIndex !== -1) {
changeFocusedItemIndex(itemIndex);
}
if (searchTimeout.current) {
clearTimeout(searchTimeout.current);
}
searchTimeout.current = setTimeout(function () {
searchValue.current = '';
searchTimeout.current = null;
}, 500);
return matched;
};
var changeFocusedItemIndex = function changeFocusedItemIndex(index) {
if (focusedItemInfo.index !== index) {
setFocusedItemInfo(_objectSpread$P(_objectSpread$P({}, focusedItemInfo), {}, {
index: index
}));
scrollInView();
}
};
var scrollInView = function scrollInView() {
var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
var id = index !== -1 ? "".concat(idState, "_").concat(index) : focusedItemId;
var element = DomHandler.findSingle(rootMenuRef.current, "li[data-id=\"".concat(id, "\"]"));
if (element) {
element.scrollIntoView && element.scrollIntoView({
block: 'nearest',
inline: 'start'
});
}
};
var _createProcessedItems = function createProcessedItems(items) {
var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var parentKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
var _processedItems = [];
items && items.forEach(function (item, index) {
var key = (parentKey !== '' ? parentKey + '_' : '') + index;
var newItem = {
item: item,
index: index,
level: level,
key: key,
parent: parent,
parentKey: parentKey
};
newItem.items = _createProcessedItems(item.items, level + 1, newItem, key);
_processedItems.push(newItem);
});
return _processedItems;
};
useMountEffect(function () {
if (!idState) {
setIdState(UniqueComponentId());
}
});
useUpdateEffect(function () {
if (mobileActiveState) {
bindOutsideClickListener();
bindResizeListener();
ZIndexUtils.set('menu', rootMenuRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, context && context.zIndex.menu || PrimeReact.zIndex.menu);
} else {
unbindResizeListener();
unbindOutsideClickListener();
ZIndexUtils.clear(rootMenuRef.current);
}
}, [mobileActiveState]);
React.useEffect(function () {
var itemsToProcess = props.model || [];
var processed = _createProcessedItems(itemsToProcess, 0, null, '');
setProcessedItems(processed);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.model]);
useUpdateEffect(function () {
var processedItem = activeItemPath.find(function (p) {
return p.key === focusedItemInfo.parentKey;
});
var _processedItems = processedItem ? processedItem.items : processedItems;
setVisibleItems(_processedItems);
}, [activeItemPath, focusedItemInfo, processedItems]);
useUpdateEffect(function () {
if (ObjectUtils.isNotEmpty(activeItemPath)) {
bindOutsideClickListener();
bindResizeListener();
} else {
unbindOutsideClickListener();
unbindResizeListener();
}
}, [activeItemPath]);
useUpdateEffect(function () {
if (focusTrigger) {
var itemIndex = focusedItemInfo.index !== -1 ? findNextItemIndex(focusedItemInfo.index) : reverseTrigger.current ? findLastItemIndex() : findFirstFocusedItemIndex();
changeFocusedItemIndex(itemIndex);
reverseTrigger.current = false;
setFocusTrigger(false);
}
}, [focusTrigger]);
useUpdateEffect(function () {
setFocusedItemId(focusedItemInfo.index !== -1 ? "".concat(idState).concat(ObjectUtils.isNotEmpty(focusedItemInfo.parentKey) ? '_' + focusedItemInfo.parentKey : '', "_").concat(focusedItemInfo.index) : null);
}, [focusedItemInfo]);
useUnmountEffect(function () {
ZIndexUtils.clear(rootMenuRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
toggle: toggle,
getElement: function getElement() {
return elementRef.current;
},
getRootMenu: function getRootMenu() {
return rootMenuRef.current;
},
getMenuButton: function getMenuButton() {
return menuButtonRef.current;
}
};
});
var createStartContent = function createStartContent() {
if (props.start) {
var _start = ObjectUtils.getJSXElement(props.start, props);
var startProps = mergeProps({
className: cx('start')
}, ptm('start'));
return /*#__PURE__*/React.createElement("div", startProps, _start);
}
return null;
};
var createEndContent = function createEndContent() {
if (props.end) {
var _end = ObjectUtils.getJSXElement(props.end, props);
var endProps = mergeProps({
className: cx('end')
}, ptm('end'));
return /*#__PURE__*/React.createElement("div", endProps, _end);
}
return null;
};
var createMenuButton = function createMenuButton() {
if (props.model && props.model.length < 1) {
return null;
}
var buttonProps = mergeProps(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
ref: menuButtonRef,
href: '#',
tabIndex: '0',
'aria-haspopup': mobileActiveState && props.model && props.model.length > 0 ? true : false,
'aria-expanded': mobileActiveState,
'aria-label': ariaLabel('navigation'),
'aria-controls': idState,
role: 'button'
}, "tabIndex", 0), "className", cx('button')), "onKeyDown", function onKeyDown(e) {
return menuButtonKeydown(e);
}), "onClick", function onClick(e) {
return toggle(e);
}), ptm('button'));
var popupIconProps = mergeProps(ptm('popupIcon'));
var icon = props.menuIcon || /*#__PURE__*/React.createElement(BarsIcon, popupIconProps);
var menuIcon = IconUtils.getJSXIcon(icon, _objectSpread$P({}, popupIconProps), {
props: props
});
/* eslint-disable */
var button = /*#__PURE__*/React.createElement("a", buttonProps, menuIcon);
/* eslint-enable */
return button;
};
var start = createStartContent();
var end = createEndContent();
var menuButton = createMenuButton();
var submenu = /*#__PURE__*/React.createElement(MenubarSub, {
hostName: "Menubar",
ariaActivedescendant: focused ? focusedItemId : undefined,
level: 0,
id: idState,
ref: rootMenuRef,
menuProps: props,
model: processedItems,
onLeafClick: onItemClick,
onItemMouseEnter: onItemMouseEnter,
onFocus: onFocus,
onBlur: onBlur,
onKeyDown: onKeyDown,
root: true,
activeItemPath: activeItemPath,
focusedItemId: focused ? focusedItemId : undefined,
submenuIcon: props.submenuIcon,
ptm: ptm,
cx: cx
});
var rootProps = mergeProps({
id: props.id,
ref: elementRef,
className: classNames(props.className, cx('root', {
mobileActiveState: mobileActiveState
})),
style: props.style
}, MenubarBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("div", rootProps, start, menuButton, submenu, end);
}));
Menubar.displayName = 'Menubar';
var MessageBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Message',
id: null,
className: null,
style: null,
text: null,
icon: null,
severity: 'info',
content: null,
children: undefined
},
css: {
classes: {
root: function root(_ref) {
var severity = _ref.props.severity;
return classNames('p-inline-message p-component', _defineProperty({}, "p-inline-message-".concat(severity), severity));
},
icon: 'p-inline-message-icon',
text: 'p-inline-message-text'
},
styles: "\n @layer primereact {\n .p-inline-message {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n vertical-align: top;\n }\n\n .p-inline-message-icon {\n flex-shrink: 0;\n }\n \n .p-inline-message-icon-only .p-inline-message-text {\n visibility: hidden;\n width: 0;\n }\n \n .p-fluid .p-inline-message {\n display: flex;\n } \n }\n "
}
});
function ownKeys$O(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$O(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$O(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$O(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Message = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = MessageBase.getProps(inProps, context);
var elementRef = React.useRef(null);
var _MessageBase$setMetaD = MessageBase.setMetaData({
props: props
}),
ptm = _MessageBase$setMetaD.ptm,
cx = _MessageBase$setMetaD.cx,
isUnstyled = _MessageBase$setMetaD.isUnstyled;
useHandleStyle(MessageBase.css.styles, isUnstyled, {
name: 'message'
});
var createContent = function createContent() {
if (props.content) {
return ObjectUtils.getJSXElement(props.content, props);
}
var text = ObjectUtils.getJSXElement(props.text, props);
var iconProps = mergeProps({
className: cx('icon')
}, ptm('icon'));
var icon = props.icon;
if (!icon) {
switch (props.severity) {
case 'info':
icon = /*#__PURE__*/React.createElement(InfoCircleIcon, iconProps);
break;
case 'warn':
icon = /*#__PURE__*/React.createElement(ExclamationTriangleIcon, iconProps);
break;
case 'error':
icon = /*#__PURE__*/React.createElement(TimesCircleIcon, iconProps);
break;
case 'success':
icon = /*#__PURE__*/React.createElement(CheckIcon, iconProps);
break;
}
}
var messageIcon = IconUtils.getJSXIcon(icon, _objectSpread$O({}, iconProps), {
props: props
});
var textProps = mergeProps({
className: cx('text')
}, ptm('text'));
return /*#__PURE__*/React.createElement(React.Fragment, null, messageIcon, /*#__PURE__*/React.createElement("span", textProps, text));
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var content = createContent();
var rootProps = mergeProps({
className: classNames(props.className, cx('root')),
style: props.style,
role: 'alert',
'aria-live': 'polite',
'aria-atomic': 'true'
}, MessageBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
ref: elementRef
}, rootProps), content);
}));
Message.displayName = 'Message';
var classes$x = {
root: function root(_ref) {
var props = _ref.props;
return [classNames('p-metergroup p-component', {
'p-metergroup-horizontal': props.orientation === 'horizontal',
'p-metergroup-vertical': props.orientation === 'vertical'
})];
},
metercontainer: 'p-metergroup-meter-container',
meter: 'p-metergroup-meter',
labellist: function labellist(_ref2) {
var props = _ref2.props;
return classNames('p-metergroup-label-list', {
'p-metergroup-label-list-start': props.labelPosition === 'start',
'p-metergroup-label-list-end': props.labelPosition === 'end',
'p-metergroup-label-list-vertical': props.labelOrientation === 'vertical',
'p-metergroup-label-list-horizontal': props.labelOrientation === 'horizontal'
});
},
labellistitem: 'p-metergroup-label-list-item',
labelicon: 'p-metergroup-label-icon',
labellisttype: 'p-metergroup-label-type',
label: 'p-metergroup-label'
};
var styles$q = "\n@layer primereact {\n .p-metergroup {\n position: relative;\n overflow: hidden;\n }\n\n .p-metergroup-vertical.p-metergroup {\n display: flex;\n }\n\n .p-metergroup-vertical .p-metergroup-meter-container {\n flex-direction: column;\n }\n\n .p-metergroup-meter-container {\n display: flex;\n }\n\n .p-metergroup-label-list {\n display: flex;\n margin: 0;\n padding: 0;\n list-style-type: none;\n }\n\n .p-metergroup-vertical .p-metergroup-label-list {\n align-items: start;\n }\n\n .p-metergroup-label-list-vertical {\n flex-direction: column;\n }\n\n .p-metergroup-label-list-horizontal {\n flex-direction: row;\n }\n\n .p-metergroup-label-list-item {\n display: inline-flex;\n align-items: center;\n }\n\n .p-metergroup-label-type {\n display: inline-block;\n }\n}\n";
var MeterGroupBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'MeterGroup',
__parentMetadata: null,
children: undefined,
className: null,
values: null,
min: 0,
max: 100,
orientation: 'horizontal',
labelPosition: 'end',
labelOrientation: 'horizontal',
start: null,
end: null,
meter: null,
labelList: null
},
css: {
classes: classes$x,
styles: styles$q
}
});
function ownKeys$N(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$N(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$N(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$N(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var MeterGroup = function MeterGroup(inProps) {
var context = React.useContext(PrimeReactContext);
var props = MeterGroupBase.getProps(inProps, context);
var values = props.values,
min = props.min,
max = props.max,
orientation = props.orientation,
labelPosition = props.labelPosition,
start = props.start,
end = props.end,
meter = props.meter,
labelList = props.labelList;
var mergeProps = useMergeProps();
var _MeterGroupBase$setMe = MeterGroupBase.setMetaData(_objectSpread$N(_objectSpread$N({
props: props
}, props.__parentMetadata), {}, {
context: {
disabled: props.disabled
}
})),
ptm = _MeterGroupBase$setMe.ptm,
cx = _MeterGroupBase$setMe.cx,
isUnstyled = _MeterGroupBase$setMe.isUnstyled;
useHandleStyle(MeterGroupBase.css.styles, isUnstyled, {
name: 'metergroup'
});
var totalPercent = 0;
var percentages = [];
values.map(function (item) {
totalPercent = totalPercent + item.value;
percentages.push(Math.round(item.value / totalPercent * 100));
});
var calculatePercentage = function calculatePercentage() {
var meterValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var percentageOfItem = (meterValue - min) / (max - min) * 100;
return Math.round(Math.max(0, Math.min(100, percentageOfItem)));
};
var rootProps = mergeProps({
className: classNames(props.className, cx('root', {
orientation: orientation
}))
}, MeterGroupBase.getOtherProps(props), ptm('root'));
var createMeters = function createMeters() {
var meters = values.map(function (item, index) {
var calculatedPercantage = calculatePercentage(item.value);
var meterInlineStyles = {
backgroundColor: item.color,
width: orientation === 'horizontal' ? calculatedPercantage + '%' : 'auto',
height: orientation === 'vertical' ? calculatedPercantage + '%' : 'auto'
};
var meterProps = mergeProps({
className: cx('meter'),
style: meterInlineStyles
}, ptm('meter'));
if (meter || item.meterTemplate) {
var meterTemplateProps = mergeProps({
className: cx('meter')
}, ptm('meter'));
return ObjectUtils.getJSXElement(item.meterTemplate || meter, _objectSpread$N(_objectSpread$N({}, item), {}, {
percentage: calculatedPercantage,
index: index
}), meterTemplateProps);
}
return /*#__PURE__*/React.createElement("span", _extends({
key: index
}, meterProps));
});
var meterContainerProps = mergeProps({
className: cx('metercontainer')
}, ptm('metercontainer'));
return /*#__PURE__*/React.createElement("div", meterContainerProps, meters);
};
var createLabelList = function createLabelList() {
var labelListProps = mergeProps({
className: cx('labellist')
}, ptm('labellist'));
var labelItemProps = mergeProps({
className: cx('labellistitem')
}, ptm('labellistitem'));
var labelProps = mergeProps({
className: cx('label')
}, ptm('label'));
return /*#__PURE__*/React.createElement("ol", labelListProps, values.map(function (item, index) {
var labelIconProps = mergeProps({
className: classNames(cx('labelicon'), item.icon),
style: {
color: item.color
}
}, ptm('labelicon'));
var labelListIconProps = mergeProps({
className: cx('labellisttype'),
style: {
backgroundColor: item.color
}
}, ptm('labellisttype'));
var labelIcon = item.icon ? /*#__PURE__*/React.createElement("i", labelIconProps) : /*#__PURE__*/React.createElement("span", labelListIconProps);
var itemPercentage = calculatePercentage(item.value);
return /*#__PURE__*/React.createElement("li", _extends({
key: index
}, labelItemProps), labelIcon, /*#__PURE__*/React.createElement("span", labelProps, item === null || item === void 0 ? void 0 : item.label, " ", "(".concat(itemPercentage, "%)")));
}));
};
var templateProps = {
totalPercent: totalPercent,
percentages: percentages,
values: values
};
var labelListContent = labelList || createLabelList();
var labelElement = ObjectUtils.getJSXElement(labelListContent, {
values: values,
totalPercent: totalPercent
});
return /*#__PURE__*/React.createElement("div", _extends({}, rootProps, {
role: "meter",
"aria-valuemin": min,
"aria-valuemax": max,
"aria-valuenow": totalPercent
}), labelPosition === 'start' && labelElement, start && ObjectUtils.getJSXElement(start, templateProps), createMeters(), end && ObjectUtils.getJSXElement(end, templateProps), labelPosition === 'end' && labelElement);
};
var classes$w = {
root: function root(_ref) {
var _props$value;
var props = _ref.props,
context = _ref.context,
focusedState = _ref.focusedState,
overlayVisibleState = _ref.overlayVisibleState;
return classNames('p-multiselect p-component p-inputwrapper', {
'p-multiselect-chip': props.display === 'chip' && (props.maxSelectedLabels == null ? true : ((_props$value = props.value) === null || _props$value === void 0 ? void 0 : _props$value.length) <= props.maxSelectedLabels),
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled',
'p-multiselect-clearable': props.showClear && !props.disabled,
'p-focus': focusedState,
'p-inputwrapper-filled': ObjectUtils.isNotEmpty(props.value),
'p-inputwrapper-focus': focusedState || overlayVisibleState
});
},
label: function label(_ref2) {
var _props$value2;
var props = _ref2.props,
empty = _ref2.empty;
return classNames('p-multiselect-label', {
'p-placeholder': empty && props.placeholder,
'p-multiselect-label-empty': empty && !props.placeholder && !props.selectedItemTemplate,
'p-multiselect-items-label': !empty && props.display !== 'chip' && ((_props$value2 = props.value) === null || _props$value2 === void 0 ? void 0 : _props$value2.length) > props.maxSelectedLabels
});
},
panel: function panel(_ref3) {
var props = _ref3.panelProps,
context = _ref3.context,
allowOptionSelect = _ref3.allowOptionSelect;
return classNames('p-multiselect-panel p-component', {
'p-multiselect-inline': props.inline,
'p-multiselect-flex': props.flex,
'p-multiselect-limited': !allowOptionSelect,
'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
});
},
list: function list(_ref4) {
var virtualScrollerOptions = _ref4.virtualScrollerOptions;
return virtualScrollerOptions ? 'p-multiselect-items p-component' : 'p-multiselect-items p-component';
},
labelContainer: 'p-multiselect-label-container',
triggerIcon: 'p-multiselect-trigger-icon p-c',
trigger: 'p-multiselect-trigger',
clearIcon: 'p-multiselect-clear-icon',
tokenLabel: 'p-multiselect-token-label',
token: 'p-multiselect-token',
removeTokenIcon: 'p-multiselect-token-icon',
wrapper: 'p-multiselect-items-wrapper',
emptyMessage: 'p-multiselect-empty-message',
itemGroup: 'p-multiselect-item-group',
closeButton: 'p-multiselect-close p-link',
header: 'p-multiselect-header',
closeIcon: 'p-multiselect-close-icon',
headerCheckboxContainer: 'p-multiselect-select-all',
headerCheckboxIcon: 'p-multiselect-select-all p-checkbox-icon p-c',
headerSelectAllLabel: 'p-multiselect-select-all-label',
filterContainer: 'p-multiselect-filter-container',
filterIcon: 'p-multiselect-filter-icon',
item: function item(_ref5) {
var props = _ref5.itemProps;
return classNames('p-multiselect-item', {
'p-highlight': props.selected,
'p-disabled': props.disabled,
'p-focus': props.focusedOptionIndex === props.index
});
},
checkboxContainer: 'p-multiselect-checkbox',
checkboxIcon: 'p-checkbox-icon p-c',
transition: 'p-connected-overlay'
};
var styles$p = "\n@layer primereact {\n .p-multiselect {\n display: inline-flex;\n user-select: none;\n cursor: pointer;\n }\n \n .p-multiselect-trigger {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n cursor: pointer;\n }\n \n .p-multiselect-label-container {\n overflow: hidden;\n flex: 1 1 auto;\n cursor: pointer;\n }\n \n .p-multiselect-label {\n display: block;\n white-space: nowrap;\n cursor: pointer;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n \n .p-multiselect-label-empty {\n overflow: hidden;\n visibility: hidden;\n }\n \n .p-multiselect-token {\n cursor: default;\n display: inline-flex;\n align-items: center;\n flex: 0 0 auto;\n }\n \n .p-multiselect-token-icon {\n cursor: pointer;\n }\n \n .p-multiselect .p-multiselect-panel {\n min-width: 100%;\n }\n \n .p-multiselect-inline.p-multiselect-panel {\n border: none;\n position: initial;\n background: none;\n box-shadow: none;\n }\n \n .p-multiselect-inline.p-multiselect-panel .p-multiselect-items {\n padding: 0;\n }\n \n .p-multiselect-flex.p-multiselect-panel .p-multiselect-items {\n display: flex;\n flex-wrap: wrap;\n }\n \n .p-multiselect-items-wrapper {\n overflow: auto;\n }\n \n .p-multiselect-items {\n margin: 0;\n padding: 0;\n list-style-type: none;\n }\n \n .p-multiselect-item {\n cursor: pointer;\n display: flex;\n align-items: center;\n font-weight: normal;\n white-space: nowrap;\n position: relative;\n overflow: hidden;\n outline: none;\n }\n \n .p-multiselect-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n \n .p-multiselect-select-all-label {\n margin-left: 0.5rem;\n }\n \n .p-multiselect-filter-container {\n position: relative;\n flex: 1 1 auto;\n }\n \n .p-multiselect-filter-icon {\n position: absolute;\n top: 50%;\n margin-top: -.5rem;\n }\n \n .p-multiselect-filter-container .p-inputtext {\n width: 100%;\n }\n \n .p-multiselect-close {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n overflow: hidden;\n position: relative;\n margin-left: auto;\n }\n \n .p-multiselect-clear-icon {\n position: absolute;\n top: 50%;\n margin-top: -.5rem;\n right: 3rem;\n }\n \n .p-fluid .p-multiselect {\n display: flex;\n }\n}\n";
var inlineStyles$a = {
root: function root(_ref6) {
var props = _ref6.props;
return props.showClear && !props.disabled && {
position: 'relative'
};
},
itemGroup: function itemGroup(_ref7) {
var scrollerOptions = _ref7.scrollerOptions;
return {
height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined
};
}
};
var MultiSelectBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'MultiSelect',
appendTo: null,
ariaLabelledBy: null,
checkboxIcon: null,
className: null,
clearIcon: null,
closeIcon: null,
dataKey: null,
disabled: false,
display: 'comma',
dropdownIcon: null,
emptyFilterMessage: null,
emptyMessage: null,
filter: false,
filterBy: null,
filterDelay: 300,
filterInputAutoFocus: true,
filterLocale: undefined,
selectOnFocus: false,
focusOnHover: true,
autoOptionFocus: false,
filterMatchMode: 'contains',
filterPlaceholder: null,
filterTemplate: null,
fixedPlaceholder: false,
flex: false,
id: null,
inline: false,
inputId: null,
inputRef: null,
invalid: false,
variant: null,
itemCheckboxIcon: null,
itemClassName: null,
itemTemplate: null,
loading: false,
loadingIcon: null,
maxSelectedLabels: null,
name: null,
onBlur: null,
onChange: null,
onClick: null,
onFilter: null,
onFocus: null,
onHide: null,
onRemove: null,
onSelectAll: null,
onShow: null,
optionDisabled: null,
optionGroupChildren: null,
optionGroupLabel: null,
optionGroupTemplate: null,
optionLabel: null,
optionValue: null,
options: null,
overlayVisible: false,
panelClassName: null,
panelFooterTemplate: null,
panelHeaderTemplate: null,
panelStyle: null,
placeholder: null,
removeIcon: null,
resetFilterOnHide: false,
scrollHeight: '200px',
selectAll: false,
selectAllLabel: null,
selectedItemTemplate: null,
selectedItemsLabel: undefined,
selectionLimit: null,
showClear: false,
showSelectAll: true,
style: null,
tabIndex: 0,
tooltip: null,
tooltipOptions: null,
transitionOptions: null,
useOptionAsValue: false,
value: null,
virtualScrollerOptions: null,
children: undefined
},
css: {
classes: classes$w,
styles: styles$p,
inlineStyles: inlineStyles$a
}
});
function ownKeys$M(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$M(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$M(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$M(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var MultiSelectHeader = /*#__PURE__*/React.memo(function (props) {
var mergeProps = useMergeProps();
var ptm = props.ptm,
cx = props.cx,
isUnstyled = props.isUnstyled;
var filterOptions = {
filter: function filter(e) {
return onFilter(e);
},
reset: function reset() {
return props.resetFilter();
}
};
var getPTOptions = function getPTOptions(key, options) {
return ptm(key, _objectSpread$M({
hostName: props.hostName
}, options));
};
var onFilter = function onFilter(event) {
if (props.onFilter) {
props.onFilter({
originalEvent: event,
query: event.target.value
});
}
};
var onToggleAll = function onToggleAll(event) {
if (props.onSelectAll) {
props.onSelectAll({
originalEvent: event,
checked: props.selectAll
});
} else {
var value = props.isAllSelected() ? [] : props.visibleOptions.filter(function (option) {
return props.isValidOption(option);
}).map(function (option) {
return props.getOptionValue(option);
});
props.updateModel(event, value, value);
}
};
var createFilterElement = function createFilterElement() {
var filterIconProps = mergeProps({
className: cx('filterIcon')
}, getPTOptions('filterIcon'));
var icon = props.filterIcon || /*#__PURE__*/React.createElement(SearchIcon, filterIconProps);
var filterIcon = IconUtils.getJSXIcon(icon, _objectSpread$M({}, filterIconProps), {
props: props
});
if (props.filter) {
var filterContainerProps = mergeProps({
className: cx('filterContainer')
}, getPTOptions('filterContainer'));
var content = /*#__PURE__*/React.createElement("div", filterContainerProps, /*#__PURE__*/React.createElement(InputText, {
ref: props.filterRef,
type: "text",
role: "searchbox",
value: props.filterValue,
onChange: onFilter,
onKeyDown: props.onFilterKeyDown,
className: "p-multiselect-filter",
placeholder: props.filterPlaceholder,
pt: ptm('filterInput'),
unstyled: props.unstyled,
__parentMetadata: {
parent: props.metaData
}
}), filterIcon);
if (props.filterTemplate) {
var defaultContentOptions = {
className: filterContainerProps.className,
element: content,
filterOptions: filterOptions,
onFilter: onFilter,
filterInputKeyDown: props.onFilterKeyDown,
filterIconClassName: props.filterIconClassName,
props: props
};
content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
}
return /*#__PURE__*/React.createElement(React.Fragment, null, content);
}
return null;
};
var filterElement = createFilterElement();
var selectAllId = props.id ? props.id + '_selectall' : UniqueComponentId();
var headerSelectAllLabelProps = mergeProps({
htmlFor: selectAllId,
className: cx('headerSelectAllLabel')
}, getPTOptions('headerSelectAllLabel'));
var headerCheckboxIconProps = mergeProps({
className: cx('headerCheckboxIcon')
}, getPTOptions('headerCheckbox.icon'));
var headerCheckboxContainerProps = mergeProps({
className: cx('headerCheckboxContainer')
}, getPTOptions('headerCheckboxContainer'));
var checkedIcon = props.itemCheckboxIcon || /*#__PURE__*/React.createElement(CheckIcon, headerCheckboxIconProps);
var itemCheckboxIcon = IconUtils.getJSXIcon(checkedIcon, _objectSpread$M({}, headerCheckboxIconProps), {
selected: props.selected
});
var checkboxElement = props.showSelectAll && /*#__PURE__*/React.createElement("div", headerCheckboxContainerProps, /*#__PURE__*/React.createElement(Checkbox, {
id: selectAllId,
checked: props.selectAll,
onChange: onToggleAll,
role: "checkbox",
"aria-checked": props.selectAll,
icon: itemCheckboxIcon,
pt: ptm('headerCheckbox'),
unstyled: isUnstyled()
}), !props.filter && /*#__PURE__*/React.createElement("label", headerSelectAllLabelProps, props.selectAllLabel));
var iconProps = mergeProps({
className: cx('closeIcon'),
'aria-hidden': true
}, getPTOptions('closeIcon'));
var icon = props.closeIcon || /*#__PURE__*/React.createElement(TimesIcon, iconProps);
var closeIcon = IconUtils.getJSXIcon(icon, _objectSpread$M({}, iconProps), {
props: props
});
var headerProps = mergeProps({
className: cx('header')
}, getPTOptions('header'));
var closeButtonProps = mergeProps({
type: 'button',
className: cx('closeButton'),
'aria-label': ariaLabel('close'),
onClick: props.onClose
}, getPTOptions('closeButton'));
var closeElement = /*#__PURE__*/React.createElement("button", closeButtonProps, closeIcon, /*#__PURE__*/React.createElement(Ripple, null));
var element = /*#__PURE__*/React.createElement("div", headerProps, checkboxElement, filterElement, closeElement);
if (props.template) {
var defaultOptions = {
className: 'p-multiselect-header',
checkboxElement: checkboxElement,
checked: props.selectAll,
onChange: onToggleAll,
filterElement: filterElement,
closeElement: closeElement,
closeElementClassName: 'p-multiselect-close p-link',
closeIconClassName: 'p-multiselect-close-icon',
onCloseClick: props.onClose,
element: element,
itemCheckboxIcon: itemCheckboxIcon,
props: props
};
return ObjectUtils.getJSXElement(props.template, defaultOptions);
}
return element;
});
MultiSelectHeader.displayName = 'MultiSelectHeader';
function ownKeys$L(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$L(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$L(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$L(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var MultiSelectItem = /*#__PURE__*/React.memo(function (props) {
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var checkboxRef = React.useRef(null);
var mergeProps = useMergeProps();
var ptm = props.ptm,
cx = props.cx,
isUnstyled = props.isUnstyled;
var getPTOptions = function getPTOptions(key) {
return ptm(key, {
hostName: props.hostName,
context: {
selected: props.selected,
disabled: props.disabled,
focused: focusedState,
focusedIndex: props.focusedIndex,
index: props.index
}
});
};
var onFocus = function onFocus(event) {
var _checkboxRef$current;
setFocusedState(true);
checkboxRef === null || checkboxRef === void 0 || (_checkboxRef$current = checkboxRef.current) === null || _checkboxRef$current === void 0 || _checkboxRef$current.getInput().focus();
};
var onBlur = function onBlur(event) {
setFocusedState(false);
};
var onClick = function onClick(event) {
if (props.onClick) {
props.onClick(event, props.option);
}
event.preventDefault();
event.stopPropagation();
};
var checkboxIconProps = mergeProps({
className: cx('checkboxIcon')
}, getPTOptions('checkbox.icon'));
var icon = props.checkboxIcon || /*#__PURE__*/React.createElement(CheckIcon, checkboxIconProps);
var checkboxIcon = props.selected ? IconUtils.getJSXIcon(icon, _objectSpread$L({}, checkboxIconProps), {
selected: props.selected
}) : null;
var content = props.template ? ObjectUtils.getJSXElement(props.template, props.option) : props.label;
var checkboxContainerProps = mergeProps({
className: cx('checkboxContainer')
}, getPTOptions('checkboxContainer'));
var itemProps = mergeProps({
className: classNames(props.className, props.option.className, cx('item', {
itemProps: props
})),
style: props.style,
onClick: onClick,
onFocus: onFocus,
onBlur: onBlur,
onMouseMove: function onMouseMove(e) {
return props === null || props === void 0 ? void 0 : props.onMouseMove(e, props.index);
},
role: 'option',
'aria-selected': props.selected,
'data-p-highlight': props.selected,
'data-p-disabled': props.disabled
}, getPTOptions('item'));
return /*#__PURE__*/React.createElement("li", itemProps, /*#__PURE__*/React.createElement("div", checkboxContainerProps, /*#__PURE__*/React.createElement(Checkbox, {
ref: checkboxRef,
checked: props.selected,
icon: checkboxIcon,
pt: ptm('checkbox'),
unstyled: isUnstyled(),
tabIndex: -1
})), /*#__PURE__*/React.createElement("span", null, content), /*#__PURE__*/React.createElement(Ripple, null));
});
MultiSelectItem.displayName = 'MultiSelectItem';
function ownKeys$K(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$K(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$K(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$K(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var MultiSelectPanel = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (props, ref) {
var virtualScrollerRef = React.useRef(null);
var filterInputRef = React.useRef(null);
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var ptm = props.ptm,
cx = props.cx,
sx = props.sx,
isUnstyled = props.isUnstyled;
var getPTOptions = function getPTOptions(key, options) {
return ptm(key, _objectSpread$K({
hostName: props.hostName
}, options));
};
var onEnter = function onEnter() {
props.onEnter(function () {
if (virtualScrollerRef.current) {
var selectedIndex = props.getSelectedOptionIndex();
if (selectedIndex !== -1) {
setTimeout(function () {
return virtualScrollerRef.current.scrollToIndex(selectedIndex);
}, 0);
}
}
});
};
var onEntered = function onEntered() {
props.onEntered(function () {
if (props.filter && props.filterInputAutoFocus && filterInputRef.current) {
DomHandler.focus(filterInputRef.current, false);
}
});
};
var onFilterInputChange = function onFilterInputChange(event) {
if (virtualScrollerRef.current) {
virtualScrollerRef.current.scrollToIndex(0);
}
props.onFilterInputChange && props.onFilterInputChange(event);
};
var isEmptyFilter = function isEmptyFilter() {
return !(props.visibleOptions && props.visibleOptions.length) && props.hasFilter;
};
var createHeader = function createHeader() {
return /*#__PURE__*/React.createElement(MultiSelectHeader, {
hostName: props.hostName,
id: props.id,
filter: props.filter,
filterRef: filterInputRef,
filterValue: props.filterValue,
filterTemplate: props.filterTemplate,
visibleOptions: props.visibleOptions,
isValidOption: props.isValidOption,
getOptionValue: props.getOptionValue,
updateModel: props.updateModel,
onFilter: onFilterInputChange,
onFilterKeyDown: props.onFilterKeyDown,
filterPlaceholder: props.filterPlaceholder,
onClose: props.onCloseClick,
showSelectAll: props.showSelectAll,
selectAll: props.isAllSelected(),
selectAllLabel: props.selectAllLabel,
onSelectAll: props.onSelectAll,
template: props.panelHeaderTemplate,
resetFilter: props.resetFilter,
closeIcon: props.closeIcon,
filterIcon: props.filterIcon,
itemCheckboxIcon: props.itemCheckboxIcon,
ptm: ptm,
cx: cx,
isUnstyled: isUnstyled,
metaData: props.metaData
});
};
var createFooter = function createFooter() {
if (props.panelFooterTemplate) {
var content = ObjectUtils.getJSXElement(props.panelFooterTemplate, props, props.onOverlayHide);
return /*#__PURE__*/React.createElement("div", {
className: "p-multiselect-footer"
}, content);
}
return null;
};
var changeFocusedItemOnHover = function changeFocusedItemOnHover(event, index) {
if (props.focusOnHover) {
var _props$changeFocusedO;
props === null || props === void 0 || (_props$changeFocusedO = props.changeFocusedOptionIndex) === null || _props$changeFocusedO === void 0 || _props$changeFocusedO.call(props, event, index);
}
};
var createEmptyFilter = function createEmptyFilter() {
var emptyFilterMessage = ObjectUtils.getJSXElement(props.emptyFilterMessage, props) || localeOption('emptyFilterMessage');
var emptyMessageProps = mergeProps({
className: cx('emptyMessage')
}, getPTOptions('emptyMessage'));
return /*#__PURE__*/React.createElement("li", _extends({}, emptyMessageProps, {
key: "emptyFilterMessage"
}), emptyFilterMessage);
};
var createEmptyContent = function createEmptyContent() {
var emptyMessage = ObjectUtils.getJSXElement(props.emptyMessage, props) || localeOption('emptyMessage');
var emptyMessageProps = mergeProps({
className: cx('emptyMessage')
}, getPTOptions('emptyMessage'));
return /*#__PURE__*/React.createElement("li", _extends({}, emptyMessageProps, {
key: "emptyMessage"
}), emptyMessage);
};
var createItem = function createItem(option, index) {
var scrollerOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var style = {
height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined
};
var isItemGroup = option.group === true && props.optionGroupLabel;
if (isItemGroup) {
var groupContent = props.optionGroupTemplate ? ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : props.getOptionGroupLabel(option);
var key = index + '_' + props.getOptionGroupRenderKey(option);
var itemGroupProps = mergeProps({
className: cx('itemGroup'),
style: sx('itemGroup', {
scrollerOptions: scrollerOptions
})
}, getPTOptions('itemGroup'));
return /*#__PURE__*/React.createElement("li", _extends({
key: key
}, itemGroupProps), groupContent);
}
var optionLabel = props.getOptionLabel(option);
var optionKey = index + '_' + props.getOptionRenderKey(option);
var disabled = props.isOptionDisabled(option);
var selected = props.isSelected(option);
return /*#__PURE__*/React.createElement(MultiSelectItem, {
hostName: props.hostName,
key: optionKey,
focusedOptionIndex: props.focusedOptionIndex,
label: optionLabel,
option: option,
style: style,
index: index,
template: props.itemTemplate,
selected: selected,
onClick: props.onOptionSelect,
onMouseMove: changeFocusedItemOnHover,
disabled: disabled,
className: props.itemClassName,
checkboxIcon: props.checkboxIcon,
isUnstyled: isUnstyled,
ptm: ptm,
cx: cx
});
};
var createItems = function createItems() {
if (ObjectUtils.isNotEmpty(props.visibleOptions)) {
return props.visibleOptions.map(createItem);
}
return props.hasFilter ? createEmptyFilter() : createEmptyContent();
};
var createContent = function createContent() {
if (props.virtualScrollerOptions) {
var virtualScrollerProps = _objectSpread$K(_objectSpread$K({}, props.virtualScrollerOptions), {
style: _objectSpread$K(_objectSpread$K({}, props.virtualScrollerOptions.style), {
height: props.scrollHeight
}),
className: classNames('p-multiselect-items-wrapper', props.virtualScrollerOptions.className),
items: props.visibleOptions,
autoSize: true,
onLazyLoad: function onLazyLoad(event) {
return props.virtualScrollerOptions.onLazyLoad(_objectSpread$K(_objectSpread$K({}, event), {
filter: props.filterValue
}));
},
itemTemplate: function itemTemplate(item, options) {
return item && createItem(item, options.index, options);
},
contentTemplate: function contentTemplate(options) {
var content = isEmptyFilter() ? createEmptyFilter() : options.children;
var listProps = mergeProps({
ref: options.contentRef,
style: options.style,
className: classNames(options.className, cx('list', {
virtualScrollerProps: props.virtualScrollerOptions
})),
role: 'listbox',
'aria-multiselectable': true
}, getPTOptions('list'));
return /*#__PURE__*/React.createElement("ul", listProps, content);
}
});
return /*#__PURE__*/React.createElement(VirtualScroller, _extends({
ref: virtualScrollerRef
}, virtualScrollerProps, {
pt: ptm('virtualScroller'),
__parentMetadata: {
parent: props.metaData
}
}));
}
var items = createItems();
var wrapperProps = mergeProps({
className: cx('wrapper'),
style: {
maxHeight: props.scrollHeight
}
}, getPTOptions('wrapper'));
var listProps = mergeProps({
className: cx('list'),
role: 'listbox',
'aria-multiselectable': true
}, getPTOptions('list'));
return /*#__PURE__*/React.createElement("div", wrapperProps, /*#__PURE__*/React.createElement("ul", listProps, items));
};
var createElement = function createElement() {
var allowOptionSelect = props.allowOptionSelect();
var header = createHeader();
var content = createContent();
var footer = createFooter();
var panelProps = mergeProps({
className: classNames(props.panelClassName, cx('panel', {
panelProps: props,
context: context,
allowOptionSelect: allowOptionSelect
})),
style: props.panelStyle,
onClick: props.onClick,
'data-pr-is-overlay': true
}, getPTOptions('panel'));
if (props.inline) {
return /*#__PURE__*/React.createElement("div", _extends({
ref: ref
}, panelProps), content, footer);
}
var transitionProps = mergeProps({
classNames: cx('transition'),
"in": props["in"],
timeout: {
enter: 120,
exit: 100
},
options: props.transitionOptions,
appear: true,
unmountOnExit: true,
onEnter: onEnter,
onEntered: onEntered,
onExit: props.onExit,
onExited: props.onExited
}, getPTOptions('transition'));
var firstHiddenElementProps = mergeProps({
ref: props.firstHiddenFocusableElementOnOverlay,
role: 'presentation',
className: 'p-hidden-accessible p-hidden-focusable',
tabIndex: '0',
onFocus: props.onFirstHiddenFocus,
'data-p-hidden-accessible': true,
'data-p-hidden-focusable': true
}, ptm('hiddenFirstFocusableEl'));
var lastHiddenElementProps = mergeProps({
ref: props.lastHiddenFocusableElementOnOverlay,
role: 'presentation',
className: 'p-hidden-accessible p-hidden-focusable',
tabIndex: '0',
onFocus: props.onLastHiddenFocus,
'data-p-hidden-accessible': true,
'data-p-hidden-focusable': true
}, ptm('hiddenLastFocusableEl'));
return /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: ref
}, transitionProps), /*#__PURE__*/React.createElement("div", _extends({
ref: ref
}, panelProps), /*#__PURE__*/React.createElement("span", firstHiddenElementProps), header, content, footer, /*#__PURE__*/React.createElement("span", lastHiddenElementProps)));
};
var element = createElement();
if (props.inline) {
return element;
}
return /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo
});
}));
MultiSelectPanel.displayName = 'MultiSelectPanel';
function ownKeys$J(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$J(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$J(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$J(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _createForOfIteratorHelper$7(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$7(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray$7(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$7(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$7(r, a) : void 0; } }
function _arrayLikeToArray$7(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; }
var MultiSelect = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = MultiSelectBase.getProps(inProps, context);
var _React$useState = React.useState(null),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedOptionIndex = _React$useState2[0],
setFocusedOptionIndex = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
clicked = _React$useState4[0],
setClicked = _React$useState4[1];
var _useDebounce = useDebounce('', props.filterDelay || 0),
_useDebounce2 = _slicedToArray(_useDebounce, 3),
filterValue = _useDebounce2[0],
filterState = _useDebounce2[1],
setFilterState = _useDebounce2[2];
var _React$useState5 = React.useState(-1),
_React$useState6 = _slicedToArray(_React$useState5, 2),
startRangeIndex = _React$useState6[0],
setStartRangeIndex = _React$useState6[1];
var _React$useState7 = React.useState(false),
_React$useState8 = _slicedToArray(_React$useState7, 2),
focusedState = _React$useState8[0],
setFocusedState = _React$useState8[1];
var _React$useState9 = React.useState(props.inline),
_React$useState10 = _slicedToArray(_React$useState9, 2),
overlayVisibleState = _React$useState10[0],
setOverlayVisibleState = _React$useState10[1];
var elementRef = React.useRef(null);
var searchValue = React.useRef(null);
var searchTimeout = React.useRef(null);
var firstHiddenFocusableElementOnOverlay = React.useRef(null);
var lastHiddenFocusableElementOnOverlay = React.useRef(null);
var inputRef = React.useRef(props.inputRef);
var labelContainerRef = React.useRef(null);
var overlayRef = React.useRef(null);
var labelRef = React.useRef(null);
var hasFilter = filterState && filterState.trim().length > 0;
var empty = ObjectUtils.isEmpty(props.value);
var equalityKey = props.optionValue ? null : props.dataKey;
var metaData = {
props: props,
state: {
filterState: filterState,
focused: focusedState,
overlayVisible: overlayVisibleState
}
};
var _MultiSelectBase$setM = MultiSelectBase.setMetaData(metaData),
ptm = _MultiSelectBase$setM.ptm,
cx = _MultiSelectBase$setM.cx,
sx = _MultiSelectBase$setM.sx,
isUnstyled = _MultiSelectBase$setM.isUnstyled;
useHandleStyle(MultiSelectBase.css.styles, isUnstyled, {
name: 'multiselect'
});
var _useOverlayListener = useOverlayListener({
target: elementRef,
overlay: overlayRef,
listener: function listener(event, _ref) {
var type = _ref.type,
valid = _ref.valid;
if (valid) {
if (type === 'outside') {
if (!isClearClicked(event) && !isSelectAllClicked(event)) {
hide();
}
} else if (context.hideOverlaysOnDocumentScrolling) {
hide();
} else if (!DomHandler.isDocument(event.target)) {
alignOverlay();
}
}
},
when: overlayVisibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var onFirstHiddenFocus = function onFirstHiddenFocus(event) {
var focusableEl = event.relatedTarget === inputRef.current ? DomHandler.getFirstFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : inputRef.current;
DomHandler.focus(focusableEl);
};
var onLastHiddenFocus = function onLastHiddenFocus(event) {
var focusableEl = event.relatedTarget === inputRef.current ? DomHandler.getLastFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : inputRef.current;
DomHandler.focus(focusableEl);
};
var onPanelClick = function onPanelClick(event) {
OverlayService.emit('overlay-click', {
originalEvent: event,
target: elementRef.current
});
};
var allowOptionSelect = function allowOptionSelect() {
return !props.selectionLimit || !props.value || props.value && props.value.length < props.selectionLimit;
};
var findNextSelectedOptionIndex = function findNextSelectedOptionIndex(index) {
var matchedOptionIndex = hasSelectedOption() && index < visibleOptions.length - 1 ? visibleOptions.slice(index + 1).findIndex(function (option) {
return isValidSelectedOption(option);
}) : -1;
return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : -1;
};
var findPrevSelectedOptionIndex = function findPrevSelectedOptionIndex(index) {
var matchedOptionIndex = hasSelectedOption() && index > 0 ? ObjectUtils.findLastIndex(visibleOptions.slice(0, index), function (option) {
return isValidSelectedOption(option);
}) : -1;
return matchedOptionIndex > -1 ? matchedOptionIndex : -1;
};
var findNearestSelectedOptionIndex = function findNearestSelectedOptionIndex(index) {
var firstCheckUp = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var matchedOptionIndex = -1;
if (hasSelectedOption()) {
if (firstCheckUp) {
matchedOptionIndex = findPrevSelectedOptionIndex(index);
matchedOptionIndex = matchedOptionIndex === -1 ? findNextSelectedOptionIndex(index) : matchedOptionIndex;
} else {
matchedOptionIndex = findNextSelectedOptionIndex(index);
matchedOptionIndex = matchedOptionIndex === -1 ? findPrevSelectedOptionIndex(index) : matchedOptionIndex;
}
}
return matchedOptionIndex > -1 ? matchedOptionIndex : index;
};
var onOptionSelectRange = function onOptionSelectRange(event) {
var start = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
var end = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : -1;
start === -1 && (start = findNearestSelectedOptionIndex(end, true));
end === -1 && (end = findNearestSelectedOptionIndex(start));
if (start !== -1 && end !== -1) {
var rangeStart = Math.min(start, end);
var rangeEnd = Math.max(start, end);
var value = visibleOptions.slice(rangeStart, rangeEnd + 1).filter(function (option) {
return isValidOption(option);
}).map(function (option) {
return getOptionValue(option);
});
updateModel(event, value, value);
}
};
var onOptionSelect = function onOptionSelect(event, option) {
var index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : -1;
if (props.disabled || isOptionDisabled(option)) {
return;
}
var selected = isSelected(option);
var value = null;
if (selected) {
value = props.value.filter(function (val) {
return !ObjectUtils.equals(val, getOptionValue(option), equalityKey);
});
} else {
value = [].concat(_toConsumableArray(props.value || []), [getOptionValue(option)]);
}
updateModel(event, value, option);
index !== -1 && setFocusedOptionIndex(index);
};
var onClick = function onClick(event) {
if (!props.inline && !props.disabled && !props.loading && !isPanelClicked(event) && !isClearClicked(event)) {
overlayVisibleState ? hide() : show();
DomHandler.focus(inputRef.current);
event.preventDefault();
}
setClicked(true);
};
var onArrowDownKey = function onArrowDownKey(event) {
if (!overlayVisibleState) {
show();
props.editable && changeFocusedOptionIndex(event, findSelectedOptionIndex());
} else {
var optionIndex = focusedOptionIndex !== -1 ? findNextOptionIndex(focusedOptionIndex) : clicked ? findFirstOptionIndex() : findFirstFocusedOptionIndex();
if (event.shiftKey) {
onOptionSelectRange(event, startRangeIndex, optionIndex);
}
changeFocusedOptionIndex(event, optionIndex);
}
event.preventDefault();
};
var onArrowUpKey = function onArrowUpKey(event) {
var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
if (event.altKey && !pressedInInputText) {
if (focusedOptionIndex !== -1) {
onOptionSelect(event, visibleOptions[focusedOptionIndex]);
}
overlayVisibleState && hide();
event.preventDefault();
} else {
var optionIndex = focusedOptionIndex !== -1 ? findPrevOptionIndex(focusedOptionIndex) : clicked ? findLastOptionIndex() : findLastFocusedOptionIndex();
changeFocusedOptionIndex(event, optionIndex);
!overlayVisibleState && show();
event.preventDefault();
}
};
var onEnterKey = function onEnterKey(event) {
if (!overlayVisibleState) {
setFocusedOptionIndex(-1);
onArrowDownKey(event);
} else if (focusedOptionIndex !== -1) {
if (event.shiftKey) {
onOptionSelectRange(event, focusedOptionIndex);
} else {
onOptionSelect(event, visibleOptions[focusedOptionIndex]);
}
}
event.preventDefault();
};
var onHomeKey = function onHomeKey(event) {
var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var currentTarget = event.currentTarget;
if (pressedInInputText) {
var len = currentTarget.value.length;
currentTarget.setSelectionRange(0, event.shiftKey ? len : 0);
setFocusedOptionIndex(-1);
} else {
var metaKey = event.metaKey || event.ctrlKey;
var optionIndex = findFirstOptionIndex();
if (event.shiftKey && metaKey) {
onOptionSelectRange(event, optionIndex, startRangeIndex);
}
changeFocusedOptionIndex(event, optionIndex);
!overlayVisibleState && show();
}
event.preventDefault();
};
var onEndKey = function onEndKey(event) {
var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var currentTarget = event.currentTarget;
if (pressedInInputText) {
var len = currentTarget.value.length;
currentTarget.setSelectionRange(event.shiftKey ? 0 : len, len);
_readOnlyError("focusedOptionIndex");
} else {
var metaKey = event.metaKey || event.ctrlKey;
var optionIndex = findLastOptionIndex();
if (event.shiftKey && metaKey) {
onOptionSelectRange(event, startRangeIndex, optionIndex);
}
changeFocusedOptionIndex(event, optionIndex);
!overlayVisibleState && show();
}
event.preventDefault();
};
var onPageUpKey = function onPageUpKey(event) {
event.preventDefault();
};
var onPageDownKey = function onPageDownKey(event) {
event.preventDefault();
};
var onTabKey = function onTabKey(event) {
var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
if (!pressedInInputText) {
if (overlayVisibleState && hasFocusableElements()) {
DomHandler.focus(event.shiftKey ? lastHiddenFocusableElementOnOverlay.current : firstHiddenFocusableElementOnOverlay.current);
event.preventDefault();
} else {
if (focusedOptionIndex !== -1) {
onOptionSelect(event, visibleOptions[focusedOptionIndex]);
}
overlayVisibleState && hide(filter);
}
}
};
var onShiftKey = function onShiftKey() {
setStartRangeIndex(focusedOptionIndex);
};
var onKeyDown = function onKeyDown(event) {
var metaKey = event.metaKey || event.ctrlKey;
switch (event.code) {
case 'ArrowUp':
if (props.inline) {
break;
}
onArrowUpKey(event);
break;
case 'ArrowDown':
if (props.inline) {
break;
}
onArrowDownKey(event);
break;
case 'Space':
case 'NumpadEnter':
case 'Enter':
if (props.inline) {
break;
}
onEnterKey(event);
break;
case 'Home':
if (props.inline) {
break;
}
onHomeKey(event);
event.preventDefault();
break;
case 'End':
if (props.inline) {
break;
}
onEndKey(event);
event.preventDefault();
break;
case 'PageDown':
onPageDownKey(event);
break;
case 'PageUp':
onPageUpKey(event);
break;
case 'Escape':
if (props.inline) {
break;
}
hide();
break;
case 'Tab':
onTabKey(event);
break;
case 'ShiftLeft':
case 'ShiftRight':
onShiftKey();
break;
default:
if (event.key === 'a' && metaKey) {
var value = visibleOptions.filter(function (option) {
return isValidOption(option);
}).map(function (option) {
return getOptionValue(option);
});
updateModel(event, value, value);
event.preventDefault();
break;
}
if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
!overlayVisibleState && show();
searchOptions(event);
event.preventDefault();
}
break;
}
setClicked(false);
};
var onFilterKeyDown = function onFilterKeyDown(event) {
switch (event.code) {
case 'ArrowUp':
if (props.inline) {
break;
}
onArrowUpKey(event);
break;
case 'ArrowDown':
if (props.inline) {
break;
}
onArrowDownKey(event);
break;
case 'NumpadEnter':
case 'Enter':
if (props.inline) {
break;
}
onEnterKey(event);
break;
case 'Home':
if (props.inline) {
break;
}
onHomeKey(event);
event.preventDefault();
break;
case 'End':
if (props.inline) {
break;
}
onEndKey(event);
event.preventDefault();
break;
case 'Escape':
if (props.inline) {
break;
}
hide();
break;
case 'Tab':
onTabKey(event);
break;
}
};
var onSelectAll = function onSelectAll(event) {
if (props.onSelectAll) {
props.onSelectAll(event);
} else {
var value = null;
if (event.checked) {
value = [];
} else {
var validOptions = visibleOptions.filter(function (option) {
return isValidOption(option) && !isOptionDisabled(option);
});
if (validOptions) {
value = validOptions.map(function (option) {
return getOptionValue(option);
});
}
}
// make sure not to exceed the selection limit
if (props.selectionLimit && value && value.length) {
value = value.slice(0, props.selectionLimit);
}
updateModel(event.originalEvent, value, value);
}
};
var updateModel = function updateModel(event, value, selectedOption) {
if (props.onChange) {
props.onChange({
originalEvent: event,
value: value,
selectedOption: selectedOption,
stopPropagation: function stopPropagation() {
event === null || event === void 0 || event.stopPropagation();
},
preventDefault: function preventDefault() {
event === null || event === void 0 || event.preventDefault();
},
target: {
name: props.name,
id: props.id,
value: value
}
});
DomHandler.focus(inputRef.current);
}
};
var onFilterInputChange = function onFilterInputChange(event) {
var filter = event.query;
setFilterState(filter);
if (props.onFilter) {
props.onFilter({
originalEvent: event,
filter: filter
});
}
};
var resetFilter = function resetFilter() {
setFilterState('');
props.onFilter && props.onFilter({
filter: ''
});
};
var scrollInView = function scrollInView(event) {
if (!overlayVisibleState) {
return;
}
var focusedItem;
if (event) {
focusedItem = event.currentTarget;
} else {
focusedItem = DomHandler.findSingle(overlayRef.current, 'li[data-p-highlight="true"]');
}
if (focusedItem && focusedItem.scrollIntoView) {
focusedItem.scrollIntoView({
block: 'nearest',
inline: 'nearest'
});
}
};
var show = function show() {
setOverlayVisibleState(true);
setFocusedOptionIndex(focusedOptionIndex !== -1 ? focusedOptionIndex : props.autoOptionFocus ? findFirstFocusedOptionIndex() : findSelectedOptionIndex());
DomHandler.focus(inputRef.current);
};
var hide = function hide() {
setFocusedOptionIndex(-1);
setOverlayVisibleState(false);
setClicked(false);
};
var onOverlayEnter = function onOverlayEnter(callback) {
ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, context && context.zIndex.overlay || PrimeReact.zIndex.overlay);
DomHandler.addStyles(overlayRef.current, {
position: 'absolute',
top: '0',
left: '0'
});
alignOverlay();
scrollInView();
callback && callback();
};
var onOverlayEntered = function onOverlayEntered(callback) {
callback && callback();
bindOverlayListener();
props.onShow && props.onShow();
};
var onOverlayExit = function onOverlayExit() {
unbindOverlayListener();
};
var onOverlayExited = function onOverlayExited() {
if (props.filter && props.resetFilterOnHide) {
resetFilter();
}
ZIndexUtils.clear(overlayRef.current);
props.onHide && props.onHide();
};
var alignOverlay = function alignOverlay() {
!props.inline && DomHandler.alignOverlay(overlayRef.current, labelContainerRef.current.parentElement, props.appendTo || context && context.appendTo || PrimeReact.appendTo);
};
var isClearClicked = function isClearClicked(event) {
return DomHandler.getAttribute(event.target, 'data-pc-section') === 'clearicon';
};
var isSelectAllClicked = function isSelectAllClicked(event) {
return DomHandler.getAttribute(event.target, 'data-pc-section') === 'headercheckboxcontainer';
};
var isPanelClicked = function isPanelClicked(event) {
return overlayRef.current && overlayRef.current.contains(event.target);
};
var onCloseClick = function onCloseClick(event) {
hide();
DomHandler.focus(inputRef.current);
event.preventDefault();
event.stopPropagation();
};
var getSelectedOptionIndex = function getSelectedOptionIndex() {
if (props.value != null && props.options) {
if (props.optionGroupLabel) {
var groupIndex = 0;
var optionIndex = props.options.findIndex(function (optionGroup, i) {
return (groupIndex = i) && findOptionIndexInList(props.value, getOptionGroupChildren(optionGroup)) !== -1;
});
return optionIndex !== -1 ? {
group: groupIndex,
option: optionIndex
} : -1;
}
return findOptionIndexInList(props.value, props.options);
}
return -1;
};
var findOptionIndexInList = function findOptionIndexInList(value, list) {
return list.findIndex(function (item) {
return value.some(function (val) {
return ObjectUtils.equals(val, getOptionValue(item), equalityKey);
});
});
};
var isEquals = function isEquals(value1, value2) {
return ObjectUtils.equals(value1, value2, equalityKey);
};
var isSelected = function isSelected(option) {
if (props.value) {
var optionValue = getOptionValue(option);
var isUsed = isOptionValueUsed(option);
return props.value.some(function (val) {
return ObjectUtils.equals(isUsed ? val : getOptionValue(val), optionValue, equalityKey);
});
}
return false;
};
var getLabelByValue = function getLabelByValue(val) {
var option;
if (props.options) {
if (props.optionGroupLabel) {
var _iterator = _createForOfIteratorHelper$7(props.options),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var optionGroup = _step.value;
option = findOptionByValue(val, getOptionGroupChildren(optionGroup));
if (option) {
break;
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
} else {
option = findOptionByValue(val, props.options);
if (ObjectUtils.isEmpty(option)) {
option = findOptionByValue(val, props.value);
}
}
}
return option ? getOptionLabel(option) : null;
};
var findOptionByValue = function findOptionByValue(val, list) {
return list.find(function (option) {
return ObjectUtils.equals(getOptionValue(option), val, equalityKey);
});
};
var onFocus = function onFocus(event) {
setFocusedState(true);
props.onFocus && props.onFocus(event);
};
var onBlur = function onBlur(event) {
setFocusedState(false);
props.onBlur && props.onBlur(event);
};
var isAllSelected = function isAllSelected() {
if (props.onSelectAll) {
return props.selectAll;
}
if (ObjectUtils.isEmpty(visibleOptions)) {
return false;
}
var options = visibleOptions.filter(function (option) {
return !isOptionDisabled(option) && isValidOption(option);
});
return !options.some(function (option) {
return !isSelected(option);
});
};
var getOptionLabel = function getOptionLabel(option) {
return props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option && option.label !== undefined ? option.label : option;
};
var getOptionValue = function getOptionValue(option) {
if (props.useOptionAsValue) {
return option;
}
if (props.optionValue) {
return ObjectUtils.resolveFieldData(option, props.optionValue);
}
return option && option.value !== undefined ? option.value : option;
};
var getOptionRenderKey = function getOptionRenderKey(option) {
return props.dataKey ? ObjectUtils.resolveFieldData(option, props.dataKey) : getOptionLabel(option);
};
var getOptionGroupRenderKey = function getOptionGroupRenderKey(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
};
var getOptionGroupLabel = function getOptionGroupLabel(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
};
var getOptionGroupChildren = function getOptionGroupChildren(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupChildren);
};
var isOptionDisabled = function isOptionDisabled(option) {
var _option$disabled;
// disable if we have hit our selection limit
if (!allowOptionSelect() && !isSelected(option)) {
return true;
}
// check if custom optionDisabled function is being used
var optionDisabled = props.optionDisabled;
if (optionDisabled) {
return ObjectUtils.isFunction(optionDisabled) ? optionDisabled(option) : ObjectUtils.resolveFieldData(option, optionDisabled);
}
// fallback to the option itself disabled value
return option && ((_option$disabled = option.disabled) !== null && _option$disabled !== void 0 ? _option$disabled : false);
};
var isOptionValueUsed = function isOptionValueUsed(option) {
return !props.useOptionAsValue && props.optionValue || option && option.value !== undefined;
};
var isOptionGroup = function isOptionGroup(option) {
return props.optionGroupLabel && option.group;
};
var hasSelectedOption = function hasSelectedOption() {
return ObjectUtils.isNotEmpty(props.value);
};
var hasFocusableElements = function hasFocusableElements() {
return DomHandler.getFocusableElements(overlayRef.current, ':not([data-p-hidden-focusable="true"])').length > 0;
};
var isOptionMatched = function isOptionMatched(option) {
var _getOptionLabel;
return isValidOption(option) && ((_getOptionLabel = getOptionLabel(option)) === null || _getOptionLabel === void 0 ? void 0 : _getOptionLabel.toLocaleLowerCase(props.filterLocale).startsWith(searchValue.current.toLocaleLowerCase(props.filterLocale)));
};
var isValidOption = function isValidOption(option) {
return ObjectUtils.isNotEmpty(option) && !(isOptionDisabled(option) || isOptionGroup(option));
};
var isValidSelectedOption = function isValidSelectedOption(option) {
return isValidOption(option) && isSelected(option);
};
var findSelectedOptionIndex = function findSelectedOptionIndex() {
if (hasSelectedOption()) {
var _loop = function _loop() {
var value = props.value[index];
var matchedOptionIndex = visibleOptions.findIndex(function (option) {
return isValidSelectedOption(option) && isEquals(value, getOptionValue(option));
});
if (matchedOptionIndex > -1) {
return {
v: matchedOptionIndex
};
}
},
_ret;
for (var index = props.value.length - 1; index >= 0; index--) {
_ret = _loop();
if (_ret) return _ret.v;
}
}
return -1;
};
var findFirstFocusedOptionIndex = function findFirstFocusedOptionIndex() {
var selectedIndex = findSelectedOptionIndex();
return selectedIndex < 0 ? findFirstOptionIndex() : selectedIndex;
};
var findLastFocusedOptionIndex = function findLastFocusedOptionIndex() {
var selectedIndex = findSelectedOptionIndex();
return selectedIndex < 0 ? findLastOptionIndex() : selectedIndex;
};
var findFirstOptionIndex = function findFirstOptionIndex() {
return visibleOptions.findIndex(function (option) {
return isValidOption(option);
});
};
var findLastOptionIndex = function findLastOptionIndex() {
return ObjectUtils.findLastIndex(visibleOptions, function (option) {
return isValidOption(option);
});
};
var findNextOptionIndex = function findNextOptionIndex(index) {
var matchedOptionIndex = index < visibleOptions.length - 1 ? visibleOptions.slice(index + 1).findIndex(function (option) {
return isValidOption(option);
}) : -1;
return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
};
var findPrevOptionIndex = function findPrevOptionIndex(index) {
var matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(visibleOptions.slice(0, index), function (option) {
return isValidOption(option);
}) : -1;
return matchedOptionIndex > -1 ? matchedOptionIndex : index;
};
var searchOptions = function searchOptions(event) {
searchValue.current = (searchValue.current || '') + event.key;
var optionIndex = -1;
if (ObjectUtils.isNotEmpty(searchValue.current)) {
if (focusedOptionIndex !== -1) {
optionIndex = visibleOptions.slice(focusedOptionIndex).findIndex(function (option) {
return isOptionMatched(option);
});
optionIndex = optionIndex === -1 ? visibleOptions.slice(0, focusedOptionIndex).findIndex(function (option) {
return isOptionMatched(option);
}) : optionIndex + focusedOptionIndex;
} else {
optionIndex = visibleOptions.findIndex(function (option) {
return isOptionMatched(option);
});
}
if (optionIndex === -1 && focusedOptionIndex === -1) {
optionIndex = findFirstFocusedOptionIndex();
}
if (optionIndex !== -1) {
changeFocusedOptionIndex(event, optionIndex);
}
}
if (searchTimeout.current) {
clearTimeout(searchTimeout.current);
}
searchTimeout.current = setTimeout(function () {
searchValue.current = '';
searchTimeout.current = null;
}, 500);
};
var changeFocusedOptionIndex = function changeFocusedOptionIndex(event, index) {
if (focusedOptionIndex !== index) {
setFocusedOptionIndex(index);
scrollInView(event);
if (props.selectOnFocus) {
onOptionSelect(event, visibleOptions[index], false);
}
}
};
var removeChip = function removeChip(event, item) {
event.stopPropagation();
if (!isVisible(event.currentTarget)) return;
var value = props.value.filter(function (val) {
return !ObjectUtils.equals(val, item, equalityKey);
});
if (props.onRemove) {
props.onRemove({
originalEvent: event,
value: value
});
}
updateModel(event, value, item);
};
var isVisible = function isVisible(element) {
var parentElement = labelRef.current;
var isOverflow = parentElement.clientWidth < parentElement.scrollWidth;
if (!isOverflow) return true;
var target = element.closest('[data-pc-section="token"]');
var parentStyles = window.getComputedStyle(parentElement);
var targetStyles = window.getComputedStyle(target);
var parentWidth = parentElement.clientWidth - parseFloat(parentStyles.paddingLeft) - parseFloat(parentStyles.paddingRight);
var targetRight = target.getBoundingClientRect().right + parseFloat(targetStyles.marginRight) - parentElement.getBoundingClientRect().left;
return targetRight <= parentWidth;
};
var getSelectedItemsLabel = function getSelectedItemsLabel() {
var pattern = /{(.*?)}/;
var selectedItemsLabel = props.selectedItemsLabel || localeOption('selectionMessage');
var valueLength = props.value ? props.value.length : 0;
if (pattern.test(selectedItemsLabel)) {
return selectedItemsLabel.replace(selectedItemsLabel.match(pattern)[0], valueLength + '');
}
return selectedItemsLabel;
};
var getLabel = function getLabel() {
var _props$value;
if (empty || props.fixedPlaceholder) {
return '';
}
if (ObjectUtils.isNotEmpty(props.maxSelectedLabels) && ((_props$value = props.value) === null || _props$value === void 0 ? void 0 : _props$value.length) > props.maxSelectedLabels) {
return getSelectedItemsLabel();
}
if (ObjectUtils.isArray(props.value)) {
return props.value.reduce(function (acc, value, index) {
return acc + (index !== 0 ? ', ' : '') + getLabelByValue(value);
}, '');
}
return '';
};
var getLabelContent = function getLabelContent() {
var valueLength = props.value ? props.value.length : 0;
if (ObjectUtils.isNotEmpty(props.maxSelectedLabels) && valueLength > props.maxSelectedLabels) {
return getSelectedItemsLabel();
}
if (props.selectedItemTemplate) {
if (!empty) {
return props.value.map(function (val, index) {
var item = ObjectUtils.getJSXElement(props.selectedItemTemplate, val);
return /*#__PURE__*/React.createElement(React.Fragment, {
key: index
}, item);
});
}
return ObjectUtils.getJSXElement(props.selectedItemTemplate);
}
if (props.display === 'chip' && !empty) {
var value = props.value.slice(0, props.maxSelectedLabels || valueLength);
return value.map(function (val, i) {
var context = {
context: {
value: val,
index: i
}
};
var label = getLabelByValue(val);
var labelKey = label + '_' + i;
var iconProps = mergeProps({
'aria-label': localeOption('removeTokenIcon'),
className: cx('removeTokenIcon'),
onClick: function onClick(e) {
return removeChip(e, val);
},
onKeyDown: function onKeyDown(e) {
return onRemoveTokenIconKeyDown(e, val);
},
tabIndex: props.tabIndex || '0'
}, ptm('removeTokenIcon', context));
var icon = !props.disabled && (props.removeIcon ? IconUtils.getJSXIcon(props.removeIcon, _objectSpread$J({}, iconProps), {
props: props
}) : /*#__PURE__*/React.createElement(TimesCircleIcon, iconProps));
var tokenProps = mergeProps({
className: cx('token')
}, ptm('token', context));
var tokenLabelProps = mergeProps({
className: cx('tokenLabel')
}, ptm('tokenLabel', context));
return /*#__PURE__*/React.createElement("div", _extends({}, tokenProps, {
key: labelKey
}), /*#__PURE__*/React.createElement("span", tokenLabelProps, label), icon);
});
}
return getLabel();
};
var getVisibleOptions = function getVisibleOptions() {
var options = props.optionGroupLabel ? flatOptions(props.options) : props.options;
if (hasFilter) {
var _filterValue = filterState.trim().toLocaleLowerCase(props.filterLocale);
var searchFields = props.filterBy ? props.filterBy.split(',') : [props.optionLabel || 'label'];
if (props.optionGroupLabel) {
var filteredGroups = [];
var _iterator2 = _createForOfIteratorHelper$7(props.options),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var optgroup = _step2.value;
var filteredSubOptions = FilterService.filter(getOptionGroupChildren(optgroup), searchFields, _filterValue, props.filterMatchMode, props.filterLocale);
if (filteredSubOptions && filteredSubOptions.length) {
filteredGroups.push(_objectSpread$J(_objectSpread$J({}, optgroup), _defineProperty({}, props.optionGroupChildren, filteredSubOptions)));
}
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
return flatOptions(filteredGroups);
}
return FilterService.filter(options, searchFields, _filterValue, props.filterMatchMode, props.filterLocale);
}
return options;
};
var flatOptions = function flatOptions(options) {
return (options || []).reduce(function (result, option, index) {
result.push(_objectSpread$J(_objectSpread$J({}, option), {}, {
group: true,
index: index
}));
var optionGroupChildren = getOptionGroupChildren(option);
optionGroupChildren && optionGroupChildren.forEach(function (o) {
return result.push(o);
});
return result;
}, []);
};
var onClearIconKeyDown = function onClearIconKeyDown(event) {
switch (event.code) {
case 'Space':
case 'NumpadEnter':
case 'Enter':
if (props.inline) {
break;
}
updateModel(event, [], []);
event.preventDefault();
event.stopPropagation();
break;
}
};
var onRemoveTokenIconKeyDown = function onRemoveTokenIconKeyDown(event, val) {
switch (event.code) {
case 'Space':
case 'NumpadEnter':
case 'Enter':
if (props.inline) {
break;
}
removeChip(event, val);
event.preventDefault();
event.stopPropagation();
break;
}
};
React.useImperativeHandle(ref, function () {
return {
props: props,
show: show,
hide: hide,
focus: function focus() {
return DomHandler.focus(inputRef.current);
},
getElement: function getElement() {
return elementRef.current;
},
getOverlay: function getOverlay() {
return overlayRef.current;
},
getInput: function getInput() {
return inputRef.current;
}
};
});
useMountEffect(function () {
alignOverlay();
});
React.useEffect(function () {
ObjectUtils.combinedRefs(inputRef, props.inputRef);
}, [inputRef, props.inputRef]);
React.useEffect(function () {
if (props.overlayVisible === true) {
show();
} else if (props.overlayVisible === false) {
hide();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.overlayVisible]);
useUpdateEffect(function () {
if (overlayVisibleState && filterState && hasFilter) {
alignOverlay();
}
}, [overlayVisibleState, filterState, hasFilter]);
useUnmountEffect(function () {
ZIndexUtils.clear(overlayRef.current);
});
var createClearIcon = function createClearIcon() {
var clearIconProps = mergeProps({
className: cx('clearIcon'),
'aria-label': localeOption('clear'),
onClick: function onClick(e) {
return updateModel(e, [], []);
},
onKeyDown: function onKeyDown(e) {
return onClearIconKeyDown(e);
},
tabIndex: props.tabIndex || '0'
}, ptm('clearIcon'));
var icon = props.clearIcon || /*#__PURE__*/React.createElement(TimesIcon, clearIconProps);
var clearIcon = IconUtils.getJSXIcon(icon, _objectSpread$J({}, clearIconProps), {
props: props
});
if (!empty && props.showClear && !props.disabled) {
return clearIcon;
}
return null;
};
var createLabel = function createLabel() {
var content = getLabelContent();
var labelContainerProps = mergeProps({
ref: labelContainerRef,
className: cx('labelContainer')
}, ptm('labelContainer'));
var labelProps = mergeProps({
ref: labelRef,
className: cx('label', {
empty: empty
})
}, ptm('label'));
return /*#__PURE__*/React.createElement("div", labelContainerProps, /*#__PURE__*/React.createElement("div", labelProps, content || props.placeholder || props.emptyMessage || 'empty'));
};
var visibleOptions = getVisibleOptions();
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = MultiSelectBase.getOtherProps(props);
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var triggerIconProps = mergeProps({
className: cx('triggerIcon')
}, ptm('triggerIcon'));
var triggerProps = mergeProps({
className: cx('trigger')
}, ptm('trigger'));
var loadingIcon = props.loadingIcon ? IconUtils.getJSXIcon(props.loadingIcon, _objectSpread$J({}, triggerIconProps), {
props: props
}) : /*#__PURE__*/React.createElement(SpinnerIcon, _extends({
spin: true
}, triggerIconProps));
var dropdownIcon = props.dropdownIcon ? IconUtils.getJSXIcon(props.dropdownIcon, _objectSpread$J({}, triggerIconProps), {
props: props
}) : /*#__PURE__*/React.createElement(ChevronDownIcon, triggerIconProps);
var triggerIcon = /*#__PURE__*/React.createElement("div", triggerProps, props.loading ? loadingIcon : dropdownIcon);
var label = !props.inline && createLabel();
var clearIcon = !props.inline && createClearIcon();
var rootProps = mergeProps(_objectSpread$J(_objectSpread$J({
ref: elementRef,
id: props.id,
style: _objectSpread$J(_objectSpread$J({}, props.style), sx('root')),
className: classNames(props.className, cx('root', {
focusedState: focusedState,
context: context,
overlayVisibleState: overlayVisibleState
}))
}, otherProps), {}, {
onClick: onClick
}), MultiSelectBase.getOtherProps(props), ptm('root'));
var hiddenInputWrapperProps = mergeProps({
className: 'p-hidden-accessible',
'data-p-hidden-accessible': true
}, ptm('hiddenInputWrapper'));
var inputProps = mergeProps(_objectSpread$J({
ref: inputRef,
id: props.inputId,
name: props.name,
type: 'text',
onFocus: onFocus,
onBlur: onBlur,
onKeyDown: onKeyDown,
role: 'combobox',
'aria-expanded': overlayVisibleState,
disabled: props.disabled,
tabIndex: !props.disabled ? props.tabIndex : -1,
value: getLabel()
}, ariaProps), ptm('input'));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
readOnly: true
}))), !props.inline && /*#__PURE__*/React.createElement(React.Fragment, null, label, clearIcon, triggerIcon), /*#__PURE__*/React.createElement(MultiSelectPanel, _extends({
hostName: "MultiSelect",
ref: overlayRef,
visibleOptions: visibleOptions
}, props, {
onClick: onPanelClick,
onOverlayHide: hide,
filterValue: filterValue,
focusedOptionIndex: focusedOptionIndex,
onFirstHiddenFocus: onFirstHiddenFocus,
onLastHiddenFocus: onLastHiddenFocus,
firstHiddenFocusableElementOnOverlay: firstHiddenFocusableElementOnOverlay,
lastHiddenFocusableElementOnOverlay: lastHiddenFocusableElementOnOverlay,
setFocusedOptionIndex: setFocusedOptionIndex,
hasFilter: hasFilter,
isValidOption: isValidOption,
getOptionValue: getOptionValue,
updateModel: updateModel,
onFilterInputChange: onFilterInputChange,
onFilterKeyDown: onFilterKeyDown,
resetFilter: resetFilter,
onCloseClick: onCloseClick,
onSelectAll: onSelectAll,
getOptionLabel: getOptionLabel,
getOptionRenderKey: getOptionRenderKey,
isOptionDisabled: isOptionDisabled,
getOptionGroupChildren: getOptionGroupChildren,
getOptionGroupLabel: getOptionGroupLabel,
getOptionGroupRenderKey: getOptionGroupRenderKey,
isSelected: isSelected,
getSelectedOptionIndex: getSelectedOptionIndex,
isAllSelected: isAllSelected,
onOptionSelect: onOptionSelect,
allowOptionSelect: allowOptionSelect,
"in": overlayVisibleState,
onEnter: onOverlayEnter,
onEntered: onOverlayEntered,
onExit: onOverlayExit,
onExited: onOverlayExited,
ptm: ptm,
cx: cx,
sx: sx,
isUnstyled: isUnstyled,
metaData: metaData,
changeFocusedOptionIndex: changeFocusedOptionIndex
}))), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip,
pt: ptm('tooltip')
}, props.tooltipOptions)));
}));
MultiSelect.displayName = 'MultiSelect';
var classes$v = {
icon: function icon(_ref) {
var _icon = _ref.icon;
return classNames('p-checkbox-icon p-c', _defineProperty({}, "".concat(_icon), true));
},
root: function root(_ref2) {
var props = _ref2.props;
return classNames('p-multistatecheckbox p-checkbox p-component', props.classNames, {
'p-variant-filled': props.variant === 'filled'
});
},
checkbox: function checkbox(_ref3) {
var props = _ref3.props;
return classNames(props.className, {
'p-invalid': props.invalid
});
}
};
var inlineStyles$9 = {
checkbox: function checkbox(_ref4) {
var selectedOption = _ref4.selectedOption;
return selectedOption && selectedOption.style;
}
};
var MultiStateCheckboxBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'MultiStateCheckbox',
autoFocus: false,
className: null,
dataKey: null,
disabled: false,
empty: true,
iconTemplate: null,
id: null,
onChange: null,
optionIcon: null,
optionLabel: null,
optionValue: null,
options: null,
readOnly: false,
style: null,
tabIndex: '0',
tooltip: null,
tooltipOptions: null,
value: null,
children: undefined,
invalid: false,
variant: null
},
css: {
classes: classes$v,
inlineStyles: inlineStyles$9
}
});
function ownKeys$I(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$I(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$I(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$I(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var MultiStateCheckbox = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = MultiStateCheckboxBase.getProps(inProps, context);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var elementRef = React.useRef(null);
var equalityKey = props.optionValue ? null : props.dataKey;
var _MultiStateCheckboxBa = MultiStateCheckboxBase.setMetaData({
props: props,
state: {
focused: focusedState
}
}),
ptm = _MultiStateCheckboxBa.ptm,
cx = _MultiStateCheckboxBa.cx,
sx = _MultiStateCheckboxBa.sx,
isUnstyled = _MultiStateCheckboxBa.isUnstyled;
useHandleStyle(MultiStateCheckboxBase.css.styles, isUnstyled, {
name: 'multistatecheckbox'
});
var onClick = function onClick(event) {
if (!props.disabled && !props.readOnly) {
toggle(event);
}
};
var getOptionValue = function getOptionValue(option) {
return props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option;
};
var getOptionIcon = function getOptionIcon(option) {
return ObjectUtils.resolveFieldData(option, props.optionIcon || 'icon');
};
var getOptionAriaLabel = function getOptionAriaLabel(option) {
var ariaField = props.optionLabel || props.optionValue;
return ariaField ? ObjectUtils.resolveFieldData(option, ariaField) : option;
};
var findNextOption = function findNextOption() {
if (props.options) {
return selectedOptionIndex === props.options.length - 1 ? props.empty ? null : props.options[0] : props.options[selectedOptionIndex + 1];
}
return null;
};
var toggle = function toggle(event) {
if (props.onChange) {
var newValue = getOptionValue(findNextOption());
props.onChange({
originalEvent: event,
value: newValue,
stopPropagation: function stopPropagation() {
event === null || event === void 0 || event.stopPropagation();
},
preventDefault: function preventDefault() {
event === null || event === void 0 || event.preventDefault();
},
target: {
name: props.name,
id: props.id,
value: newValue
}
});
}
};
var onFocus = function onFocus() {
setFocusedState(true);
};
var onBlur = function onBlur() {
setFocusedState(false);
};
var onKeyDown = function onKeyDown(e) {
if (e.keyCode === 32) {
toggle(e);
e.preventDefault();
}
};
var getSelectedOptionMap = function getSelectedOptionMap() {
var option;
var index;
if (props.options) {
index = props.options.findIndex(function (option) {
return ObjectUtils.equals(props.value, getOptionValue(option), equalityKey);
});
option = props.options[index];
}
return {
option: option,
index: index
};
};
React.useImperativeHandle(ref, function () {
return {
props: props,
focus: function focus() {
return DomHandler.focusFirstElement(elementRef.current);
},
getElement: function getElement() {
return elementRef.current;
}
};
});
useMountEffect(function () {
if (!props.empty && props.value === null) {
toggle();
}
if (props.autoFocus) {
DomHandler.focusFirstElement(elementRef.current);
}
});
var createIcon = function createIcon() {
var icon = selectedOption && getOptionIcon(selectedOption) || '';
var className = classNames('p-checkbox-icon p-c', _defineProperty({}, "".concat(icon), true));
var iconProps = mergeProps({
className: cx('icon', {
icon: icon
})
}, ptm('icon'));
var content = IconUtils.getJSXIcon(icon, _objectSpread$I({}, iconProps), {
props: props
});
if (props.iconTemplate) {
var defaultOptions = {
option: selectedOption,
className: className,
element: content,
props: props
};
return ObjectUtils.getJSXElement(props.iconTemplate, defaultOptions);
}
return content;
};
var _getSelectedOptionMap = getSelectedOptionMap(),
selectedOption = _getSelectedOptionMap.option,
selectedOptionIndex = _getSelectedOptionMap.index;
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = MultiStateCheckboxBase.getOtherProps(props);
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var icon = createIcon();
var ariaValueLabel = selectedOption ? getOptionAriaLabel(selectedOption) : ariaLabel('nullLabel');
var rootProps = mergeProps({
ref: elementRef,
id: props.id,
className: classNames(props.className, cx('root')),
style: props.style,
onClick: onClick
}, MultiStateCheckboxBase.getOtherProps(props), ptm('root'));
var checkboxProps = mergeProps(_objectSpread$I({
id: props.id + '_checkbox',
className: cx('checkbox'),
style: sx('checkbox', {
selectedOption: selectedOption
}),
tabIndex: props.tabIndex,
onFocus: onFocus,
onBlur: onBlur,
onKeyDown: onKeyDown,
onChange: onClick,
checked: !!selectedOption,
disabled: props === null || props === void 0 ? void 0 : props.disabled,
icon: icon
}, ariaProps), ptm('checkbox'));
var srOnlyAriaProps = mergeProps({
className: 'p-hidden-accessible',
'aria-live': 'polite'
}, ptm('srOnlyAria'));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement(Checkbox, checkboxProps), focusedState && /*#__PURE__*/React.createElement("span", srOnlyAriaProps, ariaValueLabel)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip,
pt: ptm('tooltip')
}, props.tooltipOptions)));
}));
MultiStateCheckbox.displayName = 'MultiStateCheckbox';
var classes$u = {
root: 'p-orderlist p-component',
controls: 'p-orderlist-controls',
droppoint: 'p-orderlist-droppoint',
header: 'p-orderlist-header',
list: 'p-orderlist-list',
icon: 'p-orderlist-filter',
filter: 'p-orderlist-filter',
filterInput: 'p-orderlist-filter-input p-inputtext p-component',
filterIcon: 'p-orderlist-filter-icon',
filterContainer: 'p-orderlist-filter-container',
container: 'p-orderlist-list-container',
item: function item(_ref) {
var selected = _ref.selected,
focused = _ref.focused;
return classNames('p-orderlist-item', {
'p-highlight': selected,
'p-focus': focused
});
}
};
var styles$o = "\n@layer primereact {\n .p-orderlist {\n display: flex;\n }\n\n .p-orderlist-controls {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n .p-orderlist-list-container {\n flex: 1 1 auto;\n }\n\n .p-orderlist-list {\n list-style-type: none;\n margin: 0;\n padding: 0;\n overflow: auto;\n min-height: 12rem;\n max-height: 24rem;\n }\n\n .p-orderlist-item {\n cursor: pointer;\n overflow: hidden;\n position: relative;\n }\n\n .p-orderlist-item .p-ink {\n pointer-events: none;\n }\n\n .p-orderlist-filter {\n position: relative;\n }\n\n .p-orderlist-filter-icon {\n position: absolute;\n top: 50%;\n margin-top: -.5rem;\n }\n\n .p-orderlist-filter-input {\n width: 100%;\n }\n\n .p-orderlist.p-state-disabled .p-orderlist-item,\n .p-orderlist.p-state-disabled .p-button {\n cursor: default;\n }\n\n .p-orderlist.p-state-disabled .p-orderlist-list {\n overflow: hidden;\n }\n\n .p-orderlist .p-orderlist-droppoint {\n height: 0.5rem;\n }\n\n .p-orderlist .p-orderlist-droppoint.p-orderlist-droppoint-highlight {\n background: var(--primary-color);\n }\n}\n";
var OrderListBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'OrderList',
id: null,
ariaLabel: null,
ariaLabelledBy: null,
value: null,
header: null,
style: null,
className: null,
listStyle: null,
dragdrop: false,
tabIndex: 0,
filterIcon: null,
moveUpIcon: null,
moveTopIcon: null,
moveDownIcon: null,
moveBottomIcon: null,
dataKey: null,
autoOptionFocus: true,
focusOnHover: true,
breakpoint: '960px',
onChange: null,
itemTemplate: null,
filter: false,
filterBy: null,
filterMatchMode: 'contains',
filterLocale: undefined,
filterPlaceholder: null,
filterTemplate: null,
onFilter: null,
children: undefined
},
css: {
classes: classes$u,
styles: styles$o
}
});
var OrderListControls = /*#__PURE__*/React.memo(function (props) {
var mergeProps = useMergeProps();
var moveUpIcon = props.moveUpIcon || /*#__PURE__*/React.createElement(AngleUpIcon, null);
var moveTopIcon = props.moveTopIcon || /*#__PURE__*/React.createElement(AngleDoubleUpIcon, null);
var moveDownIcon = props.moveDownIcon || /*#__PURE__*/React.createElement(AngleDownIcon, null);
var moveBottomIcon = props.moveBottomIcon || /*#__PURE__*/React.createElement(AngleDoubleDownIcon, null);
var ptm = props.ptm,
cx = props.cx,
unstyled = props.unstyled;
var moveUp = function moveUp(event) {
if (props.selection) {
var value = _toConsumableArray(props.value);
for (var i = 0; i < props.selection.length; i++) {
var selectedItem = props.selection[i];
var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value, props.dataKey);
if (selectedItemIndex !== 0) {
var movedItem = value[selectedItemIndex];
var temp = value[selectedItemIndex - 1];
value[selectedItemIndex - 1] = movedItem;
value[selectedItemIndex] = temp;
} else {
break;
}
}
if (props.onReorder) {
props.onReorder({
originalEvent: event,
value: value,
direction: 'up'
});
}
}
};
var moveTop = function moveTop(event) {
if (props.selection) {
var value = _toConsumableArray(props.value);
for (var i = props.selection.length - 1; i >= 0; i--) {
var selectedItem = props.selection[i];
var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value, props.dataKey);
if (selectedItemIndex !== 0) {
var movedItem = value.splice(selectedItemIndex, 1)[0];
value.unshift(movedItem);
} else {
break;
}
}
if (props.onReorder) {
props.onReorder({
originalEvent: event,
value: value,
direction: 'top'
});
}
}
};
var moveDown = function moveDown(event) {
if (props.selection) {
var value = _toConsumableArray(props.value);
for (var i = props.selection.length - 1; i >= 0; i--) {
var selectedItem = props.selection[i];
var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value, props.dataKey);
if (selectedItemIndex !== value.length - 1) {
var movedItem = value[selectedItemIndex];
var temp = value[selectedItemIndex + 1];
value[selectedItemIndex + 1] = movedItem;
value[selectedItemIndex] = temp;
} else {
break;
}
}
if (props.onReorder) {
props.onReorder({
originalEvent: event,
value: value,
direction: 'down'
});
}
}
};
var moveBottom = function moveBottom(event) {
if (props.selection) {
var value = _toConsumableArray(props.value);
for (var i = 0; i < props.selection.length; i++) {
var selectedItem = props.selection[i];
var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value, props.dataKey);
if (selectedItemIndex !== value.length - 1) {
var movedItem = value.splice(selectedItemIndex, 1)[0];
value.push(movedItem);
} else {
break;
}
}
if (props.onReorder) {
props.onReorder({
originalEvent: event,
value: value,
direction: 'bottom'
});
}
}
};
var isMoveDisabled = ObjectUtils.isEmpty(props.value) || ObjectUtils.isEmpty(props.selection);
var controlsProps = mergeProps({
className: cx('controls')
}, ptm('controls', {
hostName: props.hostName
}));
var moveUpButtonProps = mergeProps({
type: 'button',
unstyled: unstyled,
icon: moveUpIcon,
onClick: moveUp,
disabled: isMoveDisabled,
'aria-label': ariaLabel('moveUp'),
__parentMetadata: {
parent: props.metaData
}
}, ptm('moveUpButton'));
var moveTopButtonProps = mergeProps({
type: 'button',
unstyled: unstyled,
icon: moveTopIcon,
onClick: moveTop,
disabled: isMoveDisabled,
'aria-label': ariaLabel('moveTop'),
__parentMetadata: {
parent: props.metaData
}
}, ptm('moveTopButton'));
var moveDownButtonProps = mergeProps({
type: 'button',
unstyled: unstyled,
icon: moveDownIcon,
onClick: moveDown,
disabled: isMoveDisabled,
'aria-label': ariaLabel('moveDown'),
__parentMetadata: {
parent: props.metaData
}
}, ptm('moveDownButton'));
var moveBottomButtonProps = mergeProps({
type: 'button',
unstyled: unstyled,
icon: moveBottomIcon,
onClick: moveBottom,
disabled: isMoveDisabled,
'aria-label': ariaLabel('moveBottom'),
__parentMetadata: {
parent: props.metaData
}
}, ptm('moveBottomButton'));
return /*#__PURE__*/React.createElement("div", controlsProps, /*#__PURE__*/React.createElement(Button, _extends({
pt: ptm('moveUpButton')
}, moveUpButtonProps)), /*#__PURE__*/React.createElement(Button, _extends({
pt: ptm('moveTopButton')
}, moveTopButtonProps)), /*#__PURE__*/React.createElement(Button, _extends({
pt: ptm('moveDownButton')
}, moveDownButtonProps)), /*#__PURE__*/React.createElement(Button, _extends({
pt: ptm('moveBottomButton')
}, moveBottomButtonProps)));
});
OrderListControls.displayName = 'OrderListControls';
function ownKeys$H(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$H(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$H(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$H(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var OrderListSubList = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (props, ref) {
var mergeProps = useMergeProps();
var ptm = props.ptm,
cx = props.cx;
var _ptm = function _ptm(key, options) {
return ptm(key, _objectSpread$H({
hostName: props.hostName
}, options));
};
var getPTOptions = function getPTOptions(item, key) {
return _ptm(key, {
context: {
selected: isSelected(item)
}
});
};
var dragging = React.useRef(null);
var draggedItemIndex = React.useRef(null);
var dragOverItemIndex = React.useRef(null);
var listElementRef = React.useRef(null);
var filterOptions = {
filter: function filter(e) {
return props.onFilterInputChange(e);
},
reset: function reset() {
return props.resetFilter();
}
};
var isSelected = function isSelected(item) {
return ObjectUtils.findIndexInList(item, props.selection, props.dataKey) !== -1;
};
var _onDragStart = function onDragStart(event, index) {
event.dataTransfer.setData('text', 'orderlist');
dragging.current = true;
draggedItemIndex.current = index;
};
var _onDragOver = function onDragOver(event, index) {
if (draggedItemIndex.current !== index && draggedItemIndex.current + 1 !== index) {
dragOverItemIndex.current = index;
!props.isUnstyled() && DomHandler.addClass(event.target, 'p-orderlist-droppoint-highlight');
event.target.setAttribute('data-p-orderlist-droppoint-highlight', true);
event.preventDefault();
}
};
var onDragLeave = function onDragLeave(event) {
dragOverItemIndex.current = null;
!props.isUnstyled() && DomHandler.removeClass(event.target, 'p-orderlist-droppoint-highlight');
event.target.setAttribute('data-p-orderlist-droppoint-highlight', false);
};
var onDrop = function onDrop(event) {
var dropIndex = draggedItemIndex.current > dragOverItemIndex.current ? dragOverItemIndex.current : dragOverItemIndex.current === 0 ? 0 : dragOverItemIndex.current - 1;
var value = _toConsumableArray(props.value);
ObjectUtils.reorderArray(value, draggedItemIndex.current, dropIndex);
dragOverItemIndex.current = null;
!props.isUnstyled() && DomHandler.removeClass(event.target, 'p-orderlist-droppoint-highlight');
event.target.setAttribute('data-p-orderlist-droppoint-highlight', false);
if (props.onChange) {
props.onChange({
originalEvent: event,
value: value
});
}
};
var onDragEnd = function onDragEnd(event) {
dragging.current = false;
};
var onListMouseMove = function onListMouseMove(event) {
if (dragging.current) {
var offsetY = listElementRef.current.getBoundingClientRect().top + DomHandler.getWindowScrollTop();
var bottomDiff = offsetY + listElementRef.current.clientHeight - event.pageY;
var topDiff = event.pageY - offsetY;
if (bottomDiff < 25 && bottomDiff > 0) {
listElementRef.current.scrollTop += 15;
} else if (topDiff < 25 && topDiff > 0) {
listElementRef.current.scrollTop -= 15;
}
}
};
var onFilterInputKeyDown = function onFilterInputKeyDown(event) {
//enter
if (event.which === 13) {
event.preventDefault();
}
};
var changeFocusedItemOnHover = function changeFocusedItemOnHover(event, index) {
if (props.focusOnHover && props.focused) {
var _props$changeFocusedO;
props === null || props === void 0 || (_props$changeFocusedO = props.changeFocusedOptionIndex) === null || _props$changeFocusedO === void 0 || _props$changeFocusedO.call(props, index);
}
};
var createDropPoint = function createDropPoint(index, key) {
var droppointProps = mergeProps({
className: cx('droppoint'),
onDragOver: function onDragOver(e) {
return _onDragOver(e, index + 1);
},
onDragLeave: onDragLeave,
onDrop: onDrop
}, _ptm('droppoint'));
return /*#__PURE__*/React.createElement("li", _extends({
key: key
}, droppointProps));
};
var createHeader = function createHeader() {
var headerProps = mergeProps({
className: cx('header')
}, _ptm('header'));
return props.header ? /*#__PURE__*/React.createElement("div", headerProps, props.header) : null;
};
React.useImperativeHandle(ref, function () {
return {
getElement: function getElement() {
return listElementRef.current;
}
};
});
var createItems = function createItems() {
if (props.value) {
return props.value.map(function (item, i) {
var content = props.itemTemplate ? props.itemTemplate(item) : item;
var key = props.parentId + '_' + i;
var focused = props.focused && props.focusedOptionId === key;
var selected = isSelected(item);
if (props.dragdrop) {
var _itemProps = mergeProps({
id: key,
role: 'option',
draggable: 'true',
onClick: function onClick(e) {
return props.onItemClick({
originalEvent: e,
value: item,
index: i
});
},
onMouseDown: props.onOptionMouseDown,
onMouseMove: function onMouseMove(e) {
return changeFocusedItemOnHover(e, i);
},
onDragStart: function onDragStart(e) {
return _onDragStart(e, i);
},
onDragEnd: onDragEnd,
className: classNames(props.className, cx('item', {
selected: selected,
focused: focused
})),
'aria-selected': selected,
'data-p-highlight': selected,
'data-p-focused': focused
}, getPTOptions(item, 'item'));
var items = [];
if (i === 0) {
items.push(createDropPoint(item, i));
}
items.push(/*#__PURE__*/React.createElement("li", _extends({
key: key
}, _itemProps), content));
items.push(createDropPoint(i, key + '_droppoint'));
return items;
}
var itemProps = mergeProps({
id: key,
role: 'option',
onClick: function onClick(e) {
return props.onItemClick({
originalEvent: e,
value: item,
index: i
});
},
onMouseDown: props.onOptionMouseDown,
onMouseMove: function onMouseMove(e) {
return changeFocusedItemOnHover(e, i);
},
className: classNames(props.className, cx('item', {
selected: selected,
focused: focused
})),
'aria-selected': selected,
'data-p-highlight': selected,
'data-p-focused': focused
}, getPTOptions(item, 'item'));
return /*#__PURE__*/React.createElement("li", _extends({
key: key
}, itemProps), content, /*#__PURE__*/React.createElement(Ripple, null));
});
}
return null;
};
var createList = function createList() {
var items = createItems();
var listProps = mergeProps({
ref: listElementRef,
className: cx('list'),
style: props.listStyle,
onDragOver: onListMouseMove,
role: 'listbox',
onFocus: props.onListFocus,
onBlur: props.onListBlur,
onKeyDown: props.onListKeyDown,
tabIndex: props.tabIndex,
'aria-activedescendant': props.focused ? props.focusedOptionId : null,
'aria-label': props.ariaLabel,
'aria-labelledby': props.ariaLabelledBy,
'aria-multiselectable': true
}, _ptm('list'));
return /*#__PURE__*/React.createElement("ul", listProps, items);
};
var createFilter = function createFilter() {
var searchIconProps = mergeProps({
className: cx('icon')
}, _ptm('icon'));
var icon = props.filterIcon || /*#__PURE__*/React.createElement(SearchIcon, searchIconProps);
var filterIcon = IconUtils.getJSXIcon(icon, _objectSpread$H({}, searchIconProps), {
props: props
});
if (props.filter) {
var filterProps = mergeProps({
className: cx('filter')
}, _ptm('filter'));
var filterInputProps = mergeProps({
type: 'text',
value: props.filterValue,
onChange: props.onFilter,
onKeyDown: onFilterInputKeyDown,
placeholder: props.filterPlaceholder,
className: cx('filterInput')
}, _ptm('filterInput'));
var filterIconProps = mergeProps({
className: cx('filterIcon')
}, _ptm('filterIcon'));
var content = /*#__PURE__*/React.createElement("div", filterProps, /*#__PURE__*/React.createElement("input", filterInputProps), /*#__PURE__*/React.createElement("span", filterIconProps, filterIcon));
if (props.filterTemplate) {
var defaultContentOptions = {
className: 'p-orderlist-filter',
inputProps: {
inputClassName: 'p-orderlist-filter-input p-inputtext p-component',
onChange: props.onFilter,
onKeyDown: onFilterInputKeyDown
},
filterOptions: filterOptions,
iconClassName: 'p-orderlist-filter-icon',
element: content,
props: props
};
content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
}
var filterContainerProps = mergeProps({
className: cx('filterContainer')
}, _ptm('filterContainer'));
return /*#__PURE__*/React.createElement("div", filterContainerProps, content);
}
return null;
};
var header = createHeader();
var filter = createFilter();
var list = createList();
var containerProps = mergeProps({
className: cx('container')
}, _ptm('container'));
return /*#__PURE__*/React.createElement("div", containerProps, header, filter, list);
}));
OrderListSubList.displayName = 'OrderListSubList';
var OrderList = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = OrderListBase.getProps(inProps, context);
var _React$useState = React.useState([]),
_React$useState2 = _slicedToArray(_React$useState, 2),
selectionState = _React$useState2[0],
setSelectionState = _React$useState2[1];
var _React$useState3 = React.useState(''),
_React$useState4 = _slicedToArray(_React$useState3, 2),
filterValueState = _React$useState4[0],
setFilterValueState = _React$useState4[1];
var _React$useState5 = React.useState(null),
_React$useState6 = _slicedToArray(_React$useState5, 2),
attributeSelectorState = _React$useState6[0],
setAttributeSelectorState = _React$useState6[1];
var _React$useState7 = React.useState(false),
_React$useState8 = _slicedToArray(_React$useState7, 2),
focused = _React$useState8[0],
setFocused = _React$useState8[1];
var _React$useState9 = React.useState(null),
_React$useState10 = _slicedToArray(_React$useState9, 2),
focusedOptionId = _React$useState10[0],
setFocusedOptionId = _React$useState10[1];
var _React$useState11 = React.useState(-1),
_React$useState12 = _slicedToArray(_React$useState11, 2),
focusedOptionIndex = _React$useState12[0],
setFocusedOptionIndex = _React$useState12[1];
var hasFilter = ObjectUtils.isNotEmpty(filterValueState);
var elementRef = React.useRef(null);
var styleElementRef = React.useRef(null);
var reorderDirection = React.useRef(null);
var listElementRef = React.useRef(null);
var reorderedListElementRef = React.useRef(null);
var metaData = {
props: props,
state: {
selection: selectionState,
filterValue: filterValueState,
attributeSelector: attributeSelectorState
}
};
var _OrderListBase$setMet = OrderListBase.setMetaData(metaData),
ptm = _OrderListBase$setMet.ptm,
cx = _OrderListBase$setMet.cx,
isUnstyled = _OrderListBase$setMet.isUnstyled;
useHandleStyle(OrderListBase.css.styles, isUnstyled, {
name: 'orderlist'
});
var getVisibleList = function getVisibleList() {
if (hasFilter) {
var filterValue = filterValueState.trim().toLocaleLowerCase(props.filterLocale);
var searchFields = props.filterBy ? props.filterBy.split(',') : [];
return FilterService.filter(props.value, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
}
return props.value;
};
var visibleList = getVisibleList();
var getListElement = function getListElement() {
return listElementRef.current && listElementRef.current.getElement();
};
var onItemClick = function onItemClick(event) {
var originalEvent = event.originalEvent,
value = event.value,
index = event.index;
var selectedIndex = ObjectUtils.findIndexInList(value, selectionState);
var listElement = getListElement();
var selectedId = DomHandler.find(listElement, '[data-pc-section="item"]')[index].getAttribute('id');
setFocusedOptionIndex(selectedId);
var metaKey = originalEvent.metaKey || originalEvent.ctrlKey;
var selected = selectedIndex !== -1;
var newSelection;
if (selected) {
newSelection = metaKey ? selectionState.filter(function (_, i) {
return i !== selectedIndex;
}) : [value];
} else {
newSelection = metaKey ? [].concat(_toConsumableArray(selectionState), [value]) : [value];
}
setSelectionState(newSelection);
};
var setSelectionStateWithIndex = function setSelectionStateWithIndex(index) {
var item = visibleList[index];
var selected = ObjectUtils.findIndexInList(item, selectionState) !== -1;
if (selected) {
setSelectionState(selectionState.filter(function (selectedItem) {
return selectedItem !== item;
}));
} else {
setSelectionState([].concat(_toConsumableArray(selectionState), [item]));
}
};
var findCurrentFocusedIndex = function findCurrentFocusedIndex(listElement) {
if (focusedOptionIndex === -1) {
var itemList = listElement && listElement.children ? _toConsumableArray(listElement.children) : [];
var selectedOptionIndex = findFirstSelectedOptionIndex(listElement, itemList);
if (props.autoOptionFocus && selectedOptionIndex === -1) {
selectedOptionIndex = findFirstFocusedOptionIndex(listElement, itemList);
}
return selectedOptionIndex;
}
return -1;
};
var findFirstSelectedOptionIndex = function findFirstSelectedOptionIndex(listElement, itemList) {
if (selectionState.length) {
var selectedFirstItem = DomHandler.findSingle(listElement, '[data-p-highlight="true"]');
return ObjectUtils.findIndexInList(selectedFirstItem, itemList);
}
return -1;
};
var findFirstFocusedOptionIndex = function findFirstFocusedOptionIndex(listElement, itemList) {
var firstFocusableItem = DomHandler.findSingle(listElement, '[data-pc-section="item"]');
return ObjectUtils.findIndexInList(firstFocusableItem, itemList);
};
var onListFocus = function onListFocus(event) {
setFocused(true);
var listElement = getListElement();
var currentFocusedIndex = findCurrentFocusedIndex(listElement);
changeFocusedOptionIndex(currentFocusedIndex);
props.onFocus && props.onFocus(event);
};
var onListBlur = function onListBlur(event) {
setFocused(false);
setFocusedOptionIndex(-1);
props.onBlur && props.onBlur(event);
};
var onListKeyDown = function onListKeyDown(event) {
switch (event.code) {
case 'ArrowDown':
onArrowDownKey(event);
break;
case 'ArrowUp':
onArrowUpKey(event);
break;
case 'Home':
onHomeKey(event);
break;
case 'End':
onEndKey(event);
break;
case 'Enter':
case 'NumpadEnter':
onEnterKey(event);
break;
case 'Space':
onSpaceKey(event);
break;
case 'KeyA':
if (event.ctrlKey) {
setSelectionState(visibleList);
event.preventDefault();
}
}
};
var onOptionMouseDown = function onOptionMouseDown(index) {
setFocusedOptionIndex(index);
};
var onArrowDownKey = function onArrowDownKey(event) {
var optionIndex = findNextOptionIndex(focusedOptionIndex);
changeFocusedOptionIndex(optionIndex);
if (event.shiftKey) {
setSelectionStateWithIndex(optionIndex);
}
event.preventDefault();
};
var onArrowUpKey = function onArrowUpKey(event) {
var optionIndex = findPrevOptionIndex(focusedOptionIndex);
changeFocusedOptionIndex(optionIndex);
if (event.shiftKey) {
setSelectionStateWithIndex(optionIndex);
}
event.preventDefault();
};
var onHomeKey = function onHomeKey(event) {
if (event.ctrlKey && event.shiftKey) {
var listElement = getListElement();
var items = DomHandler.find(listElement, '[data-pc-section="item"]');
var focusedItem = DomHandler.findSingle(listElement, "[data-pc-section=\"item\"][id=".concat(focusedOptionIndex, "]"));
var matchedOptionIndex = _toConsumableArray(items).findIndex(function (item) {
return item === focusedItem;
});
setSelectionState(_toConsumableArray(visibleList).slice(0, matchedOptionIndex + 1));
} else {
changeFocusedOptionIndex(0);
}
event.preventDefault();
};
var onEndKey = function onEndKey(event) {
var listElement = getListElement();
if (event.ctrlKey && event.shiftKey) {
var items = DomHandler.find(listElement, '[data-pc-section="item"]');
var focusedItem = DomHandler.findSingle(listElement, "[data-pc-section=\"item\"][id=".concat(focusedOptionIndex, "]"));
var matchedOptionIndex = _toConsumableArray(items).findIndex(function (item) {
return item === focusedItem;
});
setSelectionState(_toConsumableArray(visibleList).slice(matchedOptionIndex, items.length));
} else {
changeFocusedOptionIndex(DomHandler.find(listElement, '[data-pc-section="item"]').length - 1);
}
event.preventDefault();
};
var onEnterKey = function onEnterKey(event) {
var listElement = getListElement();
var items = DomHandler.find(listElement, '[data-pc-section="item"]');
var focusedItem = DomHandler.findSingle(listElement, "[data-pc-section=\"item\"][id=".concat(focusedOptionIndex, "]"));
var matchedOptionIndex = _toConsumableArray(items).findIndex(function (item) {
return item === focusedItem;
});
onItemClick({
originalEvent: event,
value: visibleList[matchedOptionIndex],
index: matchedOptionIndex
});
event.preventDefault();
};
var onSpaceKey = function onSpaceKey(event) {
event.preventDefault();
var listElement = getListElement();
if (event.shiftKey && selectionState && selectionState.length > 0) {
var items = DomHandler.find(listElement, '[data-pc-section="item"]');
var selectedItemIndex = ObjectUtils.findIndexInList(selectionState[0], _toConsumableArray(visibleList));
var focusedItem = DomHandler.findSingle(listElement, "[data-pc-section=\"item\"][id=".concat(focusedOptionIndex, "]"));
var matchedOptionIndex = _toConsumableArray(items).findIndex(function (item) {
return item === focusedItem;
});
setSelectionState(_toConsumableArray(visibleList).slice(Math.min(selectedItemIndex, matchedOptionIndex), Math.max(selectedItemIndex, matchedOptionIndex) + 1));
} else {
onEnterKey(event);
}
};
var findNextOptionIndex = function findNextOptionIndex(index) {
var listElement = getListElement();
var items = DomHandler.find(listElement, '[data-pc-section="item"]');
var matchedOptionIndex = _toConsumableArray(items).findIndex(function (link) {
return link.id === index;
});
return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
};
var findPrevOptionIndex = function findPrevOptionIndex(index) {
var listElement = getListElement();
var items = DomHandler.find(listElement, '[data-pc-section="item"]');
var matchedOptionIndex = _toConsumableArray(items).findIndex(function (link) {
return link.id === index;
});
return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
};
var changeFocusedOptionIndex = function changeFocusedOptionIndex(index) {
var listElement = getListElement();
var items = DomHandler.find(listElement, '[data-pc-section="item"]');
var order;
if (index >= items.length) {
order = items.length - 1;
} else if (index < 0) {
return;
} else {
order = index;
}
var _focusedOptionIndex = items[order] ? items[order].getAttribute('id') : -1;
setFocusedOptionIndex(_focusedOptionIndex);
scrollInViewWithFocus(_focusedOptionIndex);
};
var scrollInViewWithFocus = function scrollInViewWithFocus(id) {
var listElement = getListElement();
var element = DomHandler.findSingle(listElement, "[data-pc-section=\"item\"][id=\"".concat(id, "\"]"));
if (element) {
element.scrollIntoView && element.scrollIntoView({
block: 'nearest',
inline: 'start'
});
}
};
var scrollInView = function scrollInView(listContainer) {
var direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
var selectedItems = listContainer.getElementsByClassName('p-highlight');
if (ObjectUtils.isNotEmpty(selectedItems)) {
DomHandler.scrollInView(listContainer, direction === -1 ? selectedItems[0] : selectedItems[selectedItems.length - 1]);
}
};
var handleScrollPosition = function handleScrollPosition(listElement, direction) {
if (listElement) {
switch (direction) {
case 'up':
scrollInView(listElement, -1);
break;
case 'top':
listElement.scrollTop = 0;
break;
case 'down':
scrollInView(listElement, 1);
break;
case 'bottom':
setTimeout(function () {
return listElement.scrollTop = listElement.scrollHeight;
}, 100);
break;
}
}
};
var onFilter = function onFilter(event) {
var _filterValue = event.target.value;
setFilterValueState(_filterValue);
if (props.onFilter) {
props.onFilter({
originalEvent: event,
value: _filterValue
});
}
};
var resetFilter = function resetFilter() {
setFilterValueState('');
props.onFilter && props.onFilter({
filter: ''
});
};
var onFilterInputChange = function onFilterInputChange(event) {
var filter = event.target.value;
setFilterValueState(filter);
if (props.onFilter) {
props.onFilter({
originalEvent: event,
filter: filter
});
}
};
var onReorder = function onReorder(event) {
if (props.onChange) {
props.onChange({
event: event.originalEvent,
value: event.value
});
}
reorderDirection.current = event.direction;
reorderedListElementRef.current = getListElement();
};
var createStyle = function createStyle() {
if (!styleElementRef.current) {
styleElementRef.current = DomHandler.createInlineStyle(context && context.nonce || PrimeReact.nonce, context && context.styleContainer);
var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n .p-orderlist[").concat(attributeSelectorState, "] {\n flex-direction: column;\n }\n\n .p-orderlist[").concat(attributeSelectorState, "] .p-orderlist-controls {\n padding: var(--content-padding);\n flex-direction: row;\n }\n\n .p-orderlist[").concat(attributeSelectorState, "] .p-orderlist-controls .p-button {\n margin-right: var(--inline-spacing);\n margin-bottom: 0;\n }\n\n .p-orderlist[").concat(attributeSelectorState, "] .p-orderlist-controls .p-button:last-child {\n margin-right: 0;\n }\n}\n");
styleElementRef.current.innerHTML = innerHTML;
}
};
var destroyStyle = function destroyStyle() {
styleElementRef.current = DomHandler.removeInlineStyle(styleElementRef.current);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
useMountEffect(function () {
!attributeSelectorState && setAttributeSelectorState(UniqueComponentId());
});
useUpdateEffect(function () {
if (attributeSelectorState) {
elementRef.current.setAttribute(attributeSelectorState, '');
createStyle();
}
return function () {
destroyStyle();
};
}, [attributeSelectorState, props.breakpoint]);
useUpdateEffect(function () {
var _focusedOptionId = focusedOptionIndex !== -1 ? focusedOptionIndex : null;
setFocusedOptionId(_focusedOptionId);
}, [focusedOptionIndex]);
useUpdateEffect(function () {
if (reorderedListElementRef.current) {
handleScrollPosition(reorderedListElementRef.current, reorderDirection.current);
reorderedListElementRef.current = null;
reorderDirection.current = null;
}
});
var rootProps = mergeProps({
ref: elementRef,
id: props.id,
className: classNames(props.className, cx('root')),
style: props.style
}, OrderListBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement(OrderListControls, {
hostName: "OrderList",
value: visibleList,
selection: selectionState,
onReorder: onReorder,
dataKey: props.dataKey,
moveUpIcon: props.moveUpIcon,
moveTopIcon: props.moveTopIcon,
moveDownIcon: props.moveDownIcon,
moveBottomIcon: props.moveBottomIcon,
ptm: ptm,
cx: cx,
unstyled: props.unstyled,
metaData: metaData
}), /*#__PURE__*/React.createElement(OrderListSubList, _extends({
ref: listElementRef,
hostName: "OrderList"
}, props, {
ariaLabel: props.ariaLabel,
ariaLabelledBy: props.ariaLabelledBy,
changeFocusedOptionIndex: changeFocusedOptionIndex,
cx: cx,
dataKey: props.dataKey,
dragdrop: props.dragdrop,
filter: props.filter,
filterIcon: props.filterIcon,
filterPlaceholder: props.filterPlaceholder,
filterTemplate: props.filterTemplate,
focused: focused,
focusedOptionId: focusedOptionId,
header: props.header,
isUnstyled: isUnstyled,
itemTemplate: props.itemTemplate,
listStyle: props.listStyle,
onChange: props.onChange,
onFilter: onFilter,
onFilterInputChange: onFilterInputChange,
onItemClick: onItemClick,
onListBlur: onListBlur,
onListFocus: onListFocus,
onListKeyDown: onListKeyDown,
onOptionMouseDown: onOptionMouseDown,
parentId: attributeSelectorState,
ptm: ptm,
resetFilter: resetFilter,
selection: selectionState,
tabIndex: props.tabIndex,
value: visibleList
})));
}));
OrderList.displayName = 'OrderList';
var styles$n = "\n@layer primereact {\n .p-organizationchart-table {\n border-spacing: 0;\n border-collapse: separate;\n margin: 0 auto;\n }\n \n .p-organizationchart-table > tbody > tr > td {\n text-align: center;\n vertical-align: top;\n padding: 0 .75rem;\n }\n \n .p-organizationchart-node-content {\n display: inline-block;\n position: relative;\n }\n \n .p-organizationchart-node-content .p-node-toggler {\n position: absolute;\n bottom: -.75rem;\n margin-left: -.75rem;\n z-index: 2;\n left: 50%;\n user-select: none;\n cursor: pointer;\n width: 1.5rem;\n height: 1.5rem;\n text-decoration: none;\n }\n \n .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {\n position: relative;\n top: .25rem;\n }\n \n .p-organizationchart-line-down {\n margin: 0 auto;\n height: 20px;\n width: 1px;\n }\n \n .p-organizationchart-line-right {\n border-radius: 0px;\n }\n \n .p-organizationchart-line-left {\n border-radius: 0;\n }\n \n .p-organizationchart-selectable-node {\n cursor: pointer;\n }\n}\n";
var classes$t = {
root: 'p-organizationchart p-component',
table: 'p-organizationchart-table',
node: function node(_ref) {
var props = _ref.nodeProps,
_node = _ref.node,
selected = _ref.selected;
return classNames('p-organizationchart-node-content', {
'p-organizationchart-selectable-node': props.selectionMode && _node.selectable !== false,
'p-highlight': selected
}, _node.className);
},
nodes: 'p-organizationchart-nodes',
lines: 'p-organizationchart-lines',
lineLeft: function lineLeft(_ref2) {
var index = _ref2.index;
return classNames('p-organizationchart-line-left', {
'p-organizationchart-line-top': index !== 0
});
},
lineRight: function lineRight(_ref3) {
var index = _ref3.index,
nodeChildLength = _ref3.nodeChildLength;
return classNames('p-organizationchart-line-right', {
'p-organizationchart-line-top': index !== nodeChildLength - 1
});
},
lineDown: 'p-organizationchart-line-down',
nodeTogglerIcon: 'p-node-toggler-icon',
nodeToggler: 'p-node-toggler'
};
var OrganizationChartBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'OrganizationChart',
id: null,
value: null,
style: null,
className: null,
selectionMode: null,
selection: null,
nodeTemplate: null,
onSelectionChange: null,
onNodeSelect: null,
onNodeUnselect: null,
togglerIcon: null,
children: undefined
},
css: {
classes: classes$t,
styles: styles$n
}
});
function ownKeys$G(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$G(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$G(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$G(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var OrganizationChartNode = /*#__PURE__*/React.memo(function (props) {
var mergeProps = useMergeProps();
var node = props.node;
var _React$useState = React.useState(node.expanded),
_React$useState2 = _slicedToArray(_React$useState, 2),
expandedState = _React$useState2[0],
setExpandedState = _React$useState2[1];
var leaf = node.leaf === false ? false : !(node.children && node.children.length);
var colspan = node.children && node.children.length ? node.children.length * 2 : null;
var selected = props.isSelected(node);
var visibility = !leaf && expandedState ? 'inherit' : 'hidden';
var ptm = props.ptm,
cx = props.cx,
sx = props.sx;
var _ptm = function _ptm(key, options) {
return ptm(key, _objectSpread$G({
hostName: props.hostName
}, options));
};
var getPTOptions = function getPTOptions(key) {
return _ptm(key, {
state: {
expanded: expandedState
},
context: {
selected: props.isSelected(node)
}
});
};
var getNodePTOptions = function getNodePTOptions(lineTop, key) {
return _ptm(key, {
context: {
lineTop: lineTop
}
});
};
var onNodeClick = function onNodeClick(event, node) {
props.onNodeClick(event, node);
};
var toggleNode = function toggleNode(event, node) {
setExpandedState(function (prevExpanded) {
return !prevExpanded;
});
event.preventDefault();
};
var _onKeyDown = function onKeyDown(event, node) {
if (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') {
toggleNode(event);
event.preventDefault();
}
};
var createChildNodes = function createChildNodes() {
var nodesProps = mergeProps({
className: cx('nodes'),
style: {
visibility: visibility
}
}, _ptm('nodes'));
var nodeCellProps = mergeProps({
colSpan: '2'
}, _ptm('nodeCell'));
return /*#__PURE__*/React.createElement("tr", nodesProps, node.children && node.children.map(function (child, index) {
return /*#__PURE__*/React.createElement("td", _extends({
key: index
}, nodeCellProps), /*#__PURE__*/React.createElement(OrganizationChartNode, {
node: child,
nodeTemplate: props.nodeTemplate,
selectionMode: props.selectionMode,
onNodeClick: props.onNodeClick,
isSelected: props.isSelected,
togglerIcon: props.togglerIcon,
ptm: ptm,
cx: cx,
sx: sx
}));
}));
};
var createLinesMiddle = function createLinesMiddle() {
var nodeChildLength = node.children && node.children.length;
var linesProps = mergeProps({
className: cx('lines'),
style: {
visibility: visibility
}
}, _ptm('lines'));
var lineCellProps = mergeProps({
colSpan: colspan
}, _ptm('lineCell'));
var lineDownProps = mergeProps({
className: cx('lineDown')
}, _ptm('lineDown'));
return /*#__PURE__*/React.createElement("tr", linesProps, node.children && node.children.length === 1 && /*#__PURE__*/React.createElement("td", lineCellProps, /*#__PURE__*/React.createElement("div", lineDownProps)), node.children && node.children.length > 1 && node.children.map(function (_, index) {
var lineLeftProps = mergeProps({
className: cx('lineLeft', {
index: index
})
}, getNodePTOptions(index !== 0, 'lineLeft'));
var lineRightProps = mergeProps({
className: cx('lineRight', {
index: index,
nodeChildLength: nodeChildLength
})
}, getNodePTOptions(index !== nodeChildLength - 1, 'lineRight'));
return [/*#__PURE__*/React.createElement("td", _extends({
key: index + '_lineleft'
}, lineLeftProps), "\xA0"), /*#__PURE__*/React.createElement("td", _extends({
key: index + '_lineright'
}, lineRightProps), "\xA0")];
}));
};
var createLinesDown = function createLinesDown() {
var linesProps = mergeProps({
className: cx('lines'),
style: {
visibility: visibility
}
}, _ptm('lines'));
var lineCellProps = mergeProps({
colSpan: colspan
}, _ptm('lineCell'));
var lineDownProps = mergeProps({
className: cx('lineDown')
}, _ptm('lineDown'));
return /*#__PURE__*/React.createElement("tr", linesProps, /*#__PURE__*/React.createElement("td", lineCellProps, /*#__PURE__*/React.createElement("div", lineDownProps)));
};
var createToggler = function createToggler() {
if (!leaf) {
var nodeTogglerIconProps = mergeProps({
className: cx('nodeTogglerIcon')
}, _ptm('nodeTogglerIcon'));
var icon;
if (expandedState) {
icon = props.togglerIcon || /*#__PURE__*/React.createElement(ChevronDownIcon, nodeTogglerIconProps);
} else {
icon = props.togglerIcon || /*#__PURE__*/React.createElement(ChevronUpIcon, nodeTogglerIconProps);
}
var togglerIcon = IconUtils.getJSXIcon(icon, _objectSpread$G({}, nodeTogglerIconProps), {
props: props
});
var nodeTogglerProps = mergeProps({
className: cx('nodeToggler'),
tabIndex: 0,
onKeyDown: function onKeyDown(e) {
return _onKeyDown(e);
},
onClick: function onClick(e) {
return toggleNode(e);
},
href: '#'
}, getPTOptions('nodeToggler'));
return /*#__PURE__*/ /* eslint-disable */React.createElement("a", nodeTogglerProps, /*#__PURE__*/React.createElement("i", null, " ", togglerIcon, " "))
/* eslint-enable */;
}
return null;
};
var createNodeLabel = function createNodeLabel() {
var label = props.nodeTemplate && ObjectUtils.getJSXElement(props.nodeTemplate, node) || node.label;
return /*#__PURE__*/React.createElement("div", null, label);
};
var createNodeContent = function createNodeContent() {
var label = createNodeLabel();
var toggler = createToggler();
var cellProps = mergeProps({
colSpan: colspan
}, _ptm('cell'));
var nodeProps = mergeProps({
className: cx('node', {
selected: selected,
node: node,
nodeProps: props
}),
style: node.style,
onClick: function onClick(e) {
return onNodeClick(e, node);
}
}, getPTOptions('node'));
var rowProps = mergeProps(_ptm('row'));
return /*#__PURE__*/React.createElement("tr", rowProps, /*#__PURE__*/React.createElement("td", cellProps, /*#__PURE__*/React.createElement("div", nodeProps, label, toggler)));
};
var nodeContent = createNodeContent();
var linesDown = createLinesDown();
var linesMiddle = createLinesMiddle();
var childNodes = createChildNodes();
var tableProps = mergeProps({
className: cx('table')
}, _ptm('table'));
return /*#__PURE__*/React.createElement("table", tableProps, /*#__PURE__*/React.createElement("tbody", null, nodeContent, linesDown, linesMiddle, childNodes));
});
OrganizationChartNode.displayName = 'OrganizationChartNode';
var OrganizationChart = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = OrganizationChartBase.getProps(inProps, context);
var _OrganizationChartBas = OrganizationChartBase.setMetaData({
props: props
}),
ptm = _OrganizationChartBas.ptm,
cx = _OrganizationChartBas.cx,
sx = _OrganizationChartBas.sx,
isUnstyled = _OrganizationChartBas.isUnstyled;
useHandleStyle(OrganizationChartBase.css.styles, isUnstyled, {
name: 'orgchart'
});
var elementRef = React.useRef(null);
var root = props.value && props.value.length ? props.value[0] : null;
var onNodeClick = function onNodeClick(event, node) {
if (props.selectionMode) {
var target = event.target;
if (node.selectable === false || DomHandler.hasClass(target, 'p-node-toggler') || DomHandler.hasClass(target, 'p-node-toggler-icon')) {
return;
}
var index = findIndexInSelection(node);
var selected = index >= 0;
var selection;
if (props.selectionMode === 'single') {
if (selected) {
selection = null;
props.onNodeUnselect && props.onNodeUnselect({
originalEvent: event,
node: node
});
} else {
selection = node;
props.onNodeSelect && props.onNodeSelect({
originalEvent: event,
node: node
});
}
} else if (props.selectionMode === 'multiple') {
if (selected) {
selection = props.selection.filter(function (_, i) {
return i !== index;
});
props.onNodeUnselect && props.onNodeUnselect({
originalEvent: event,
node: node
});
} else {
selection = [].concat(_toConsumableArray(props.selection || []), [node]);
props.onNodeSelect && props.onNodeSelect({
originalEvent: event,
node: node
});
}
}
if (props.onSelectionChange) {
props.onSelectionChange({
originalEvent: event,
data: selection
});
}
}
};
var findIndexInSelection = function findIndexInSelection(node) {
if (props.selectionMode && props.selection) {
if (props.selectionMode === 'single') {
return props.selection === node ? 0 : -1;
} else if (props.selectionMode === 'multiple') {
return props.selection.findIndex(function (selectedNode) {
return selectedNode === node;
});
}
}
return -1;
};
var isSelected = function isSelected(node) {
return findIndexInSelection(node) !== -1;
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var rootProps = mergeProps({
id: props.id,
ref: elementRef,
style: props.style,
className: classNames(props.className, cx('root'))
}, OrganizationChartBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement(OrganizationChartNode, {
hostName: "OrganizationChart",
node: root,
nodeTemplate: props.nodeTemplate,
selectionMode: props.selectionMode,
onNodeClick: onNodeClick,
isSelected: isSelected,
togglerIcon: props.togglerIcon,
ptm: ptm,
cx: cx,
sx: sx
}));
}));
OrganizationChart.displayName = 'OrganizationChart';
var classes$s = {
root: function root(_ref) {
_ref.props;
var context = _ref.context;
return classNames('p-overlaypanel p-component', {
'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
});
},
closeIcon: 'p-overlaypanel-close-icon',
closeButton: 'p-overlaypanel-close p-link',
content: 'p-overlaypanel-content',
transition: 'p-overlaypanel'
};
var styles$m = "\n@layer primereact {\n .p-overlaypanel {\n position: absolute;\n margin-top: 10px;\n /* Github #3122: Prevent animation flickering */\n top: -9999px;\n left: -9999px;\n }\n \n .p-overlaypanel-flipped {\n margin-top: -10px;\n margin-bottom: 10px;\n }\n \n .p-overlaypanel-close {\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n position: relative;\n }\n \n /* Animation */\n .p-overlaypanel-enter {\n opacity: 0;\n transform: scaleY(0.8);\n }\n \n .p-overlaypanel-enter-active {\n opacity: 1;\n transform: scaleY(1);\n transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);\n }\n \n .p-overlaypanel-enter-done {\n transform: none;\n }\n \n .p-overlaypanel-exit {\n opacity: 1;\n }\n \n .p-overlaypanel-exit-active {\n opacity: 0;\n transition: opacity .1s linear;\n }\n \n .p-overlaypanel:after, .p-overlaypanel:before {\n bottom: 100%;\n left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n content: \" \";\n height: 0;\n width: 0;\n position: absolute;\n pointer-events: none;\n }\n \n .p-overlaypanel:after {\n border-width: 8px;\n margin-left: -8px;\n }\n \n .p-overlaypanel:before {\n border-width: 10px;\n margin-left: -10px;\n }\n \n .p-overlaypanel-flipped:after, .p-overlaypanel-flipped:before {\n bottom: auto;\n top: 100%;\n }\n \n .p-overlaypanel.p-overlaypanel-flipped:after {\n border-bottom-color: transparent;\n }\n \n .p-overlaypanel.p-overlaypanel-flipped:before {\n border-bottom-color: transparent\n }\n}\n";
var OverlayPanelBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'OverlayPanel',
id: null,
dismissable: true,
showCloseIcon: false,
closeIcon: null,
style: null,
className: null,
appendTo: null,
breakpoints: null,
ariaCloseLabel: null,
transitionOptions: null,
onShow: null,
onHide: null,
children: undefined,
closeOnEscape: true
},
css: {
classes: classes$s,
styles: styles$m
}
});
function ownKeys$F(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$F(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$F(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$F(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var OverlayPanel = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = OverlayPanelBase.getProps(inProps, context);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
visibleState = _React$useState2[0],
setVisibleState = _React$useState2[1];
var _OverlayPanelBase$set = OverlayPanelBase.setMetaData({
props: props,
state: {
visible: visibleState
}
}),
ptm = _OverlayPanelBase$set.ptm,
cx = _OverlayPanelBase$set.cx;
_OverlayPanelBase$set.sx;
var isUnstyled = _OverlayPanelBase$set.isUnstyled;
useHandleStyle(OverlayPanelBase.css.styles, isUnstyled, {
name: 'overlaypanel'
});
var attributeSelector = React.useRef('');
var overlayRef = React.useRef(null);
var currentTargetRef = React.useRef(null);
var isPanelClicked = React.useRef(false);
var styleElement = React.useRef(null);
var overlayEventListener = React.useRef(null);
var _useOverlayListener = useOverlayListener({
target: currentTargetRef,
overlay: overlayRef,
listener: function listener(event, _ref) {
var type = _ref.type,
valid = _ref.valid;
if (valid) {
if (type === 'outside') {
if (props.dismissable && !isPanelClicked.current) {
hide();
}
isPanelClicked.current = false;
} else if (context.hideOverlaysOnDocumentScrolling) {
hide();
} else if (!DomHandler.isDocument(event.target)) {
align();
}
}
},
when: visibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var isCloseOnEscape = visibleState && props.closeOnEscape;
var overlayPanelDisplayOrder = useDisplayOrder('overlay-panel', isCloseOnEscape);
useGlobalOnEscapeKey({
callback: function callback() {
hide();
},
when: isCloseOnEscape && overlayPanelDisplayOrder,
priority: [ESC_KEY_HANDLING_PRIORITIES.OVERLAY_PANEL, overlayPanelDisplayOrder]
});
var isOutsideClicked = function isOutsideClicked(target) {
return overlayRef && overlayRef.current && !(overlayRef.current.isSameNode(target) || overlayRef.current.contains(target));
};
var hasTargetChanged = function hasTargetChanged(event, target) {
return currentTargetRef.current != null && currentTargetRef.current !== (target || event.currentTarget || event.target);
};
var onCloseClick = function onCloseClick(event) {
hide();
event.preventDefault();
};
var onPanelClick = function onPanelClick(event) {
isPanelClicked.current = true;
OverlayService.emit('overlay-click', {
originalEvent: event,
target: currentTargetRef.current
});
};
var onContentClick = function onContentClick() {
isPanelClicked.current = true;
};
var toggle = function toggle(event, target) {
if (visibleState) {
hide();
if (hasTargetChanged(event, target)) {
currentTargetRef.current = target || event.currentTarget || event.target;
setTimeout(function () {
show(event, currentTargetRef.current);
}, 200);
}
} else {
show(event, target);
}
};
var show = function show(event, target) {
currentTargetRef.current = target || event.currentTarget || event.target;
if (visibleState) {
align();
} else {
setVisibleState(true);
overlayEventListener.current = function (e) {
!isOutsideClicked(e.target) && (isPanelClicked.current = true);
};
OverlayService.on('overlay-click', overlayEventListener.current);
}
};
var hide = function hide() {
setVisibleState(false);
OverlayService.off('overlay-click', overlayEventListener.current);
overlayEventListener.current = null;
};
var onEnter = function onEnter() {
overlayRef.current.setAttribute(attributeSelector.current, '');
ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, context && context.zIndex.overlay || PrimeReact.zIndex.overlay);
DomHandler.addStyles(overlayRef.current, {
position: 'absolute',
top: '0',
left: '0'
});
align();
};
var onEntered = function onEntered() {
bindOverlayListener();
props.onShow && props.onShow();
};
var onExit = function onExit() {
unbindOverlayListener();
};
var onExited = function onExited() {
ZIndexUtils.clear(overlayRef.current);
props.onHide && props.onHide();
};
var align = function align() {
if (currentTargetRef.current && overlayRef.current) {
DomHandler.absolutePosition(overlayRef.current, currentTargetRef.current);
var containerOffset = DomHandler.getOffset(overlayRef.current);
var targetOffset = DomHandler.getOffset(currentTargetRef.current);
var arrowLeft = 0;
if (containerOffset.left < targetOffset.left) {
arrowLeft = targetOffset.left - containerOffset.left;
}
overlayRef.current.style.setProperty('--overlayArrowLeft', "".concat(arrowLeft, "px"));
if (containerOffset.top < targetOffset.top) {
overlayRef.current.setAttribute('data-p-overlaypanel-flipped', 'true');
isUnstyled && DomHandler.addClass(overlayRef.current, 'p-overlaypanel-flipped');
} else {
overlayRef.current.setAttribute('data-p-overlaypanel-flipped', 'false');
isUnstyled && DomHandler.removeClass(overlayRef.current, 'p-overlaypanel-flipped');
}
}
};
var createStyle = function createStyle() {
if (!styleElement.current) {
styleElement.current = DomHandler.createInlineStyle(context && context.nonce || PrimeReact.nonce, context && context.styleContainer);
var innerHTML = '';
for (var breakpoint in props.breakpoints) {
innerHTML = innerHTML + "\n @media screen and (max-width: ".concat(breakpoint, ") {\n .p-overlaypanel[").concat(attributeSelector.current, "] {\n width: ").concat(props.breakpoints[breakpoint], ";\n }\n }\n ");
}
styleElement.current.innerHTML = innerHTML;
}
};
useMountEffect(function () {
attributeSelector.current = UniqueComponentId();
if (props.breakpoints) {
createStyle();
}
});
useUnmountEffect(function () {
styleElement.current = DomHandler.removeInlineStyle(styleElement.current);
if (overlayEventListener.current) {
OverlayService.off('overlay-click', overlayEventListener.current);
overlayEventListener.current = null;
}
ZIndexUtils.clear(overlayRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
toggle: toggle,
show: show,
hide: hide,
align: align,
isVisible: function isVisible() {
return visibleState;
},
getElement: function getElement() {
return overlayRef.current;
}
};
});
var createCloseIcon = function createCloseIcon() {
var closeIconProps = mergeProps({
className: cx('closeIcon'),
'aria-hidden': true
}, ptm('closeIcon'));
var icon = props.closeIcon || /*#__PURE__*/React.createElement(TimesIcon, closeIconProps);
var closeIcon = IconUtils.getJSXIcon(icon, _objectSpread$F({}, closeIconProps), {
props: props
});
var closeButtonProps = mergeProps({
type: 'button',
className: cx('closeButton'),
onClick: function onClick(e) {
return onCloseClick(e);
},
'aria-label': props.ariaCloseLabel || ariaLabel('close')
}, ptm('closeButton'));
if (props.showCloseIcon) {
return /*#__PURE__*/React.createElement("button", closeButtonProps, closeIcon, /*#__PURE__*/React.createElement(Ripple, null));
}
return null;
};
var createElement = function createElement() {
var closeIcon = createCloseIcon();
var rootProps = mergeProps({
id: props.id,
className: classNames(props.className, cx('root', {
context: context
})),
style: props.style,
onClick: function onClick(e) {
return onPanelClick(e);
}
}, OverlayPanelBase.getOtherProps(props), ptm('root'));
var contentProps = mergeProps({
className: cx('content'),
onClick: function onClick(e) {
return onContentClick();
},
onMouseDown: onContentClick
}, OverlayPanelBase.getOtherProps(props), ptm('content'));
var transitionProps = mergeProps({
classNames: cx('transition'),
"in": visibleState,
timeout: {
enter: 120,
exit: 100
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: onEnter,
onEntered: onEntered,
onExit: onExit,
onExited: onExited
}, ptm('transition'));
return /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: overlayRef
}, transitionProps), /*#__PURE__*/React.createElement("div", _extends({
ref: overlayRef
}, rootProps), /*#__PURE__*/React.createElement("div", contentProps, props.children), closeIcon));
};
var element = createElement();
return /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo
});
});
OverlayPanel.displayName = 'OverlayPanel';
var PanelBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Panel',
id: null,
header: null,
headerTemplate: null,
footer: null,
footerTemplate: null,
toggleable: null,
style: null,
className: null,
collapsed: null,
expandIcon: null,
collapseIcon: null,
icons: null,
transitionOptions: null,
onExpand: null,
onCollapse: null,
onToggle: null,
children: undefined
},
css: {
classes: {
root: function root(_ref) {
var props = _ref.props;
return classNames('p-panel p-component', {
'p-panel-toggleable': props.toggleable
});
},
header: 'p-panel-header',
title: 'p-panel-title',
icons: 'p-panel-icons',
toggler: 'p-panel-header-icon p-panel-toggler p-link',
togglerIcon: 'p-panel-header-icon p-panel-toggler p-link',
toggleableContent: 'p-toggleable-content',
content: 'p-panel-content',
footer: 'p-panel-footer',
transition: 'p-toggleable-content'
},
styles: "\n @layer primereact {\n .p-panel-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n \n .p-panel-title {\n line-height: 1;\n }\n \n .p-panel-header-icon {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n overflow: hidden;\n position: relative;\n }\n }\n "
}
});
var Panel = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = PanelBase.getProps(inProps, context);
var _React$useState = React.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var _React$useState3 = React.useState(props.collapsed),
_React$useState4 = _slicedToArray(_React$useState3, 2),
collapsedState = _React$useState4[0],
setCollapsedState = _React$useState4[1];
var elementRef = React.useRef(null);
var contentRef = React.useRef(null);
var collapsed = props.toggleable ? props.onToggle ? props.collapsed : collapsedState : false;
var headerId = idState + '_header';
var contentId = idState + '_content';
var _PanelBase$setMetaDat = PanelBase.setMetaData({
props: props,
state: {
id: idState,
collapsed: collapsed
}
}),
ptm = _PanelBase$setMetaDat.ptm,
cx = _PanelBase$setMetaDat.cx,
isUnstyled = _PanelBase$setMetaDat.isUnstyled;
useHandleStyle(PanelBase.css.styles, isUnstyled, {
name: 'panel'
});
var toggle = function toggle(event) {
if (!props.toggleable) {
return;
}
collapsed ? expand(event) : collapse(event);
if (event) {
if (props.onToggle) {
props.onToggle({
originalEvent: event,
value: !collapsed
});
}
event.preventDefault();
}
};
var expand = function expand(event) {
if (!props.onToggle) {
setCollapsedState(false);
}
props.onExpand && event && props.onExpand(event);
};
var collapse = function collapse(event) {
if (!props.onToggle) {
setCollapsedState(true);
}
props.onCollapse && event && props.onCollapse(event);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
toggle: toggle,
expand: expand,
collapse: collapse,
getElement: function getElement() {
return elementRef.current;
},
getContent: function getContent() {
return contentRef.current;
}
};
});
useMountEffect(function () {
if (!idState) {
setIdState(UniqueComponentId());
}
});
var createToggleIcon = function createToggleIcon() {
if (props.toggleable) {
var buttonId = idState + '_label';
var togglerProps = mergeProps({
className: cx('toggler'),
onClick: toggle,
id: buttonId,
'aria-controls': contentId,
'aria-expanded': !collapsed,
type: 'button',
role: 'button',
'aria-label': props.header
}, ptm('toggler'));
var togglerIconProps = mergeProps(ptm('togglericon'));
var icon = collapsed ? props.expandIcon || /*#__PURE__*/React.createElement(PlusIcon, togglerIconProps) : props.collapseIcon || /*#__PURE__*/React.createElement(MinusIcon, togglerIconProps);
var toggleIcon = IconUtils.getJSXIcon(icon, togglerIconProps, {
props: props,
collapsed: collapsed
});
return /*#__PURE__*/React.createElement("button", togglerProps, toggleIcon, /*#__PURE__*/React.createElement(Ripple, null));
}
return null;
};
var createHeader = function createHeader() {
var header = ObjectUtils.getJSXElement(props.header, props);
var icons = ObjectUtils.getJSXElement(props.icons, props);
var togglerElement = createToggleIcon();
var titleProps = mergeProps({
id: headerId,
className: cx('title')
}, ptm('title'));
var titleElement = /*#__PURE__*/React.createElement("span", titleProps, header);
var iconsProps = mergeProps({
className: cx('icons')
}, ptm('icons'));
var iconsElement = /*#__PURE__*/React.createElement("div", iconsProps, icons, togglerElement);
var headerProps = mergeProps({
className: cx('header')
}, ptm('header'));
var content = /*#__PURE__*/React.createElement("div", headerProps, titleElement, iconsElement);
if (props.headerTemplate) {
var defaultContentOptions = {
className: 'p-panel-header',
titleClassName: 'p-panel-title',
iconsClassName: 'p-panel-icons',
togglerClassName: 'p-panel-header-icon p-panel-toggler p-link',
onTogglerClick: toggle,
titleElement: titleElement,
iconsElement: iconsElement,
togglerElement: togglerElement,
element: content,
id: idState + '_header',
props: props,
collapsed: collapsed
};
return ObjectUtils.getJSXElement(props.headerTemplate, defaultContentOptions);
} else if (props.header || props.toggleable) {
return content;
}
return null;
};
var createFooter = function createFooter() {
var footer = ObjectUtils.getJSXElement(props.footer, props);
var footerProps = mergeProps({
className: cx('footer')
}, ptm('footer'));
var content = /*#__PURE__*/React.createElement("div", footerProps, footer);
if (props.footerTemplate) {
var defaultContentOptions = {
className: cx('footer'),
element: content,
props: props
};
return ObjectUtils.getJSXElement(props.footerTemplate, defaultContentOptions);
} else if (props.footer) {
return content;
}
return null;
};
var createContent = function createContent() {
var toggleableContentProps = mergeProps({
ref: contentRef,
className: cx('toggleableContent'),
'aria-hidden': collapsed,
role: 'region',
id: contentId,
'aria-labelledby': headerId
}, ptm('toggleablecontent'));
var contentProps = mergeProps({
className: cx('content')
}, ptm('content'));
var transitionProps = mergeProps({
classNames: cx('transition'),
timeout: {
enter: 1000,
exit: 450
},
"in": !collapsed,
unmountOnExit: true,
options: props.transitionOptions
}, ptm('transition'));
return /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: contentRef
}, transitionProps), /*#__PURE__*/React.createElement("div", toggleableContentProps, /*#__PURE__*/React.createElement("div", contentProps, props.children)));
};
var rootProps = mergeProps({
id: idState,
ref: elementRef,
style: props.style,
className: classNames(props.className, cx('root'))
}, PanelBase.getOtherProps(props), ptm('root'));
var header = createHeader();
var content = createContent();
var footer = createFooter();
return /*#__PURE__*/React.createElement("div", rootProps, header, content, footer);
});
Panel.displayName = 'Panel';
var classes$r = {
headerIcon: function headerIcon(_ref) {
var item = _ref.item;
return classNames('p-menuitem-icon', item.icon);
},
headerSubmenuIcon: 'p-submenu-icon',
headerLabel: 'p-menuitem-text',
headerAction: 'p-panelmenu-header-link',
panel: function panel(_ref2) {
var item = _ref2.item;
return classNames('p-panelmenu-panel', item.className);
},
header: function header(_ref3) {
var active = _ref3.active,
item = _ref3.item;
return classNames('p-component p-panelmenu-header', {
'p-highlight': active && !!item.items,
'p-disabled': item.disabled
});
},
headerContent: 'p-panelmenu-header-content',
menuContent: 'p-panelmenu-content',
root: 'p-panelmenu p-component',
separator: 'p-menuitem-separator',
toggleableContent: function toggleableContent(_ref4) {
var active = _ref4.active;
return classNames('p-toggleable-content', {
'p-toggleable-content-collapsed': !active
});
},
icon: function icon(_ref5) {
var item = _ref5.item;
return classNames('p-menuitem-icon', item.icon);
},
label: 'p-menuitem-text',
submenuicon: 'p-submenu-icon',
content: 'p-menuitem-content',
action: function action(_ref6) {
var item = _ref6.item;
return classNames('p-menuitem-link', {
'p-disabled': item.disabled
});
},
menuitem: function menuitem(_ref7) {
var item = _ref7.item,
focused = _ref7.focused,
disabled = _ref7.disabled;
return classNames('p-menuitem', item.className, {
'p-focus': focused,
'p-disabled': disabled
});
},
menu: 'p-panelmenu-root-list',
submenu: 'p-submenu-list',
transition: 'p-toggleable-content'
};
var styles$l = "\n@layer primereact {\n .p-panelmenu .p-panelmenu-header-link {\n display: flex;\n align-items: center;\n user-select: none;\n cursor: pointer;\n position: relative;\n text-decoration: none;\n }\n\n .p-panelmenu .p-panelmenu-header-link:focus {\n z-index: 1;\n }\n\n .p-panelmenu .p-submenu-list {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n .p-panelmenu .p-menuitem-link {\n display: flex;\n align-items: center;\n user-select: none;\n cursor: pointer;\n text-decoration: none;\n text-decoration: none;\n position: relative;\n overflow: hidden;\n }\n\n .p-panelmenu .p-menuitem-text {\n line-height: 1;\n }\n}\n";
var PanelMenuBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'PanelMenu',
id: null,
model: null,
style: null,
expandedKeys: null,
className: null,
onExpandedKeysChange: null,
onOpen: null,
onClose: null,
multiple: false,
transitionOptions: null,
expandIcon: null,
collapseIcon: null,
children: undefined
},
css: {
classes: classes$r,
styles: styles$l
}
});
function ownKeys$E(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$E(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$E(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var PanelMenuSub = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (props, ref) {
var mergeProps = useMergeProps();
var ptm = props.ptm,
cx = props.cx;
var elementRef = React.useRef(null);
var _ptm = function _ptm(key, options) {
return ptm(key, _objectSpread$E({
hostName: props.hostName
}, options));
};
var getPTOptions = function getPTOptions(processedItem, key, index) {
return _ptm(key, {
context: {
item: processedItem,
index: index,
active: isItemActive(processedItem),
focused: isItemFocused(processedItem),
disabled: isItemDisabled(processedItem)
}
});
};
var getItemId = function getItemId(processedItem) {
return "".concat(props.panelId, "_").concat(processedItem.key);
};
var getItemProp = function getItemProp(processedItem, name, params) {
return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name], params) : undefined;
};
var isItemActive = function isItemActive(processedItem) {
var _processedItem$item;
return props.activeItemPath && props.activeItemPath.some(function (path) {
return path.key === processedItem.key;
}) || !!((_processedItem$item = processedItem.item) !== null && _processedItem$item !== void 0 && _processedItem$item.expanded);
};
var isItemVisible = function isItemVisible(processedItem) {
return getItemProp(processedItem, 'visible') !== false;
};
var isItemDisabled = function isItemDisabled(processedItem) {
return getItemProp(processedItem, 'disabled');
};
var isItemFocused = function isItemFocused(processedItem) {
return props.focusedItemId === getItemId(processedItem);
};
var isItemGroup = function isItemGroup(processedItem) {
return ObjectUtils.isNotEmpty(processedItem.items);
};
var onItemClick = function onItemClick(event, processedItem) {
if (!getItemProp(processedItem, 'url')) {
event.preventDefault();
}
getItemProp(processedItem, 'command', {
originalEvent: event,
item: processedItem.item
});
onItemToggle({
processedItem: processedItem,
expanded: !isItemActive(processedItem)
});
};
var onItemToggle = function onItemToggle(event) {
props.onItemToggle(event);
};
var getAriaSetSize = function getAriaSetSize() {
return props.model.filter(function (processedItem) {
return isItemVisible(processedItem) && !getItemProp(processedItem, 'separator');
}).length;
};
var getAriaPosInset = function getAriaPosInset(index) {
return index - props.model.slice(0, index).filter(function (processedItem) {
return isItemVisible(processedItem) && getItemProp(processedItem, 'separator');
}).length + 1;
};
React.useImperativeHandle(ref, function () {
return {
getElement: function getElement() {
return elementRef.current;
}
};
});
var createSeparator = function createSeparator(index) {
var key = props.id + '_sep_' + index;
var separatorProps = mergeProps({
id: key,
className: cx('separator'),
role: 'separator'
}, _ptm('separator'));
return /*#__PURE__*/React.createElement("li", _extends({}, separatorProps, {
key: key
}));
};
var createSubmenu = function createSubmenu(processedItem, active) {
var submenuRef = /*#__PURE__*/React.createRef();
var toggleableContentProps = mergeProps({
className: cx('toggleableContent', {
active: active
})
}, _ptm('toggleableContent'));
if (isItemVisible(processedItem) && isItemGroup(processedItem)) {
var transitionProps = mergeProps({
classNames: cx('transition'),
timeout: {
enter: 1000,
exit: 450
},
"in": active,
unmountOnExit: true
}, _ptm('transition'));
return /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: submenuRef
}, transitionProps), /*#__PURE__*/React.createElement("div", _extends({
ref: submenuRef
}, toggleableContentProps), /*#__PURE__*/React.createElement(PanelMenuSub, {
id: getItemId(processedItem) + '_list',
role: "group",
panelId: props.panelId,
level: props.level + 1,
focusedItemId: props.focusedItemId,
activeItemPath: props.activeItemPath,
onItemToggle: onItemToggle,
menuProps: props.menuProps,
model: processedItem.items,
expandIcon: props.expandIcon,
collapseIcon: props.collapseIcon,
ptm: ptm,
cx: cx
})));
}
return null;
};
var createMenuItem = function createMenuItem(processedItem, index) {
var item = processedItem.item;
if (isItemVisible(processedItem) === false) {
return null;
}
var key = getItemId(processedItem);
var active = isItemActive(processedItem);
var itemFocused = isItemFocused(processedItem);
var disabled = isItemDisabled(item);
var linkClassName = classNames('p-menuitem-link', {
'p-disabled': item.disabled
});
var iconClassName = classNames('p-menuitem-icon', item.icon);
var iconProps = mergeProps({
className: cx('icon', {
item: item
})
}, getPTOptions(processedItem, 'icon', index));
var icon = IconUtils.getJSXIcon(item.icon, _objectSpread$E({}, iconProps), {
props: props.menuProps
});
var labelProps = mergeProps({
className: cx('label')
}, getPTOptions(processedItem, 'label', index));
var label = item.label && /*#__PURE__*/React.createElement("span", labelProps, item.label);
var submenuIconClassName = 'p-panelmenu-icon';
var submenuIconProps = mergeProps({
className: cx('submenuicon')
}, getPTOptions(processedItem, 'submenuicon', index));
var submenuIcon = item.items && IconUtils.getJSXIcon(active ? props.collapseIcon || /*#__PURE__*/React.createElement(ChevronDownIcon, submenuIconProps) : props.expandIcon || /*#__PURE__*/React.createElement(ChevronRightIcon, submenuIconProps));
var submenu = createSubmenu(processedItem, active);
var actionProps = mergeProps({
href: item.url || '#',
className: cx('action', {
item: item
}),
target: item.target,
onFocus: function onFocus(event) {
return event.stopPropagation();
},
tabIndex: '-1'
}, getPTOptions(processedItem, 'action', index));
var content = /*#__PURE__*/React.createElement("a", actionProps, submenuIcon, icon, label, /*#__PURE__*/React.createElement(Ripple, null));
if (item.template) {
var defaultContentOptions = {
className: linkClassName,
labelClassName: 'p-menuitem-text',
iconClassName: iconClassName,
submenuIconClassName: submenuIconClassName,
element: content,
props: props,
leaf: !item.items,
active: active
};
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
}
var contentProps = mergeProps({
onClick: function onClick(event) {
return onItemClick(event, processedItem);
},
className: cx('content')
}, getPTOptions(processedItem, 'content', index));
var menuitemProps = mergeProps({
id: key,
className: cx('menuitem', {
item: item,
focused: itemFocused,
disabled: disabled
}),
style: item.style,
role: 'treeitem',
'aria-label': item.label,
'aria-expanded': isItemGroup(item) ? active : undefined,
'aria-level': props.level + 1,
'aria-setsize': getAriaSetSize(),
'aria-posinset': getAriaPosInset(index),
'data-p-focused': itemFocused,
'data-p-disabled': disabled
}, getPTOptions(processedItem, 'menuitem', index));
return /*#__PURE__*/React.createElement("li", _extends({}, menuitemProps, {
key: key
}), /*#__PURE__*/React.createElement("div", contentProps, content), submenu);
};
var createItem = function createItem(item, index) {
if (item.visible === false) {
return null;
}
return getItemProp(item, 'separator') ? createSeparator(index) : createMenuItem(item, index);
};
var createMenu = function createMenu() {
return props.model ? props.model.map(createItem) : null;
};
var menu = createMenu();
var ptKey = props.root ? 'menu' : 'submenu';
var menuProps = mergeProps({
id: props.id,
ref: elementRef,
tabIndex: props.tabIndex,
onFocus: props.onFocus,
onBlur: props.onBlur,
onKeyDown: props.onKeyDown,
'aria-activedescendant': props.ariaActivedescendant,
role: props.role,
className: classNames(cx(ptKey), props.className)
}, ptm(ptKey));
return /*#__PURE__*/React.createElement("ul", menuProps, menu);
}));
PanelMenuSub.displayName = 'PanelMenuSub';
function ownKeys$D(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$D(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$D(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$D(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var PanelMenuList = /*#__PURE__*/React.memo(function (props) {
var ptm = props.ptm,
cx = props.cx;
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focused = _React$useState2[0],
setFocused = _React$useState2[1];
var _React$useState3 = React.useState(null),
_React$useState4 = _slicedToArray(_React$useState3, 2),
focusedItem = _React$useState4[0],
setFocusedItem = _React$useState4[1];
var _React$useState5 = React.useState(null),
_React$useState6 = _slicedToArray(_React$useState5, 2),
focusedItemId = _React$useState6[0],
setFocusedItemId = _React$useState6[1];
var _React$useState7 = React.useState([]),
_React$useState8 = _slicedToArray(_React$useState7, 2),
activeItemPath = _React$useState8[0],
setActiveItemPath = _React$useState8[1];
var _React$useState9 = React.useState(null),
_React$useState10 = _slicedToArray(_React$useState9, 2),
processedItems = _React$useState10[0],
setProcessedItems = _React$useState10[1];
var _React$useState11 = React.useState([]),
_React$useState12 = _slicedToArray(_React$useState11, 2),
visibleItems = _React$useState12[0],
setVisibleItems = _React$useState12[1];
var searchValue = React.useRef(null);
var searchTimeout = React.useRef(null);
var elementRef = React.useRef(null);
var getItemProp = function getItemProp(processedItem, name) {
return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name]) : undefined;
};
var getItemLabel = function getItemLabel(processedItem) {
return getItemProp(processedItem, 'label');
};
var isItemVisible = function isItemVisible(processedItem) {
return getItemProp(processedItem, 'visible') !== false;
};
var isItemDisabled = function isItemDisabled(processedItem) {
return getItemProp(processedItem, 'disabled');
};
var isItemActive = function isItemActive(processedItem) {
return activeItemPath && activeItemPath.some(function (path) {
return path.key === processedItem.parentKey;
});
};
var isItemGroup = function isItemGroup(processedItem) {
return ObjectUtils.isNotEmpty(processedItem.items);
};
var getListElement = function getListElement() {
return elementRef.current && elementRef.current.getElement();
};
var onFocus = function onFocus(event) {
setFocused(true);
};
var onBlur = function onBlur() {
setFocused(false);
setFocusedItem(null);
searchValue.current = '';
};
var onKeyDown = function onKeyDown(event) {
var metaKey = event.metaKey || event.ctrlKey;
switch (event.code) {
case 'ArrowDown':
onArrowDownKey(event);
break;
case 'ArrowUp':
onArrowUpKey(event);
break;
case 'ArrowLeft':
onArrowLeftKey(event);
break;
case 'ArrowRight':
onArrowRightKey(event);
break;
case 'Home':
onHomeKey(event);
break;
case 'End':
onEndKey(event);
break;
case 'Space':
onSpaceKey(event);
break;
case 'Enter':
case 'NumpadEnter':
onEnterKey(event);
break;
case 'Escape':
case 'Tab':
case 'PageDown':
case 'PageUp':
case 'Backspace':
case 'ShiftLeft':
case 'ShiftRight':
//NOOP
break;
default:
if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
searchItems(event, event.key);
}
break;
}
};
var onArrowDownKey = function onArrowDownKey(event) {
var processedItem = ObjectUtils.isNotEmpty(focusedItem) ? findNextItem(focusedItem) : findFirstItem();
changeFocusedItem({
originalEvent: event,
processedItem: processedItem,
focusOnNext: true
});
event.preventDefault();
};
var onArrowUpKey = function onArrowUpKey(event) {
var processedItem = ObjectUtils.isNotEmpty(focusedItem) ? findPrevItem(focusedItem) : findLastItem();
changeFocusedItem({
originalEvent: event,
processedItem: processedItem,
selfCheck: true
});
event.preventDefault();
};
var onArrowLeftKey = function onArrowLeftKey(event) {
if (ObjectUtils.isNotEmpty(focusedItem)) {
var matched = activeItemPath.some(function (p) {
return p.key === focusedItem.key;
});
if (matched) {
setActiveItemPath(activeItemPath.filter(function (p) {
return p.key !== focusedItem.key;
}));
} else {
setFocusedItem(ObjectUtils.isNotEmpty(focusedItem.parent) ? focusedItem.parent : focusedItem);
}
event.preventDefault();
}
};
var onArrowRightKey = function onArrowRightKey(event) {
if (ObjectUtils.isNotEmpty(focusedItem)) {
var grouped = isItemGroup(focusedItem);
if (grouped) {
var matched = activeItemPath.some(function (p) {
return p.key === focusedItem.key;
});
if (matched) {
onArrowDownKey(event);
} else {
var _activeItemPath = activeItemPath.filter(function (p) {
return p.parentKey !== focusedItem.parentKey;
});
_activeItemPath.push(focusedItem);
setActiveItemPath(_activeItemPath);
}
}
event.preventDefault();
}
};
var onHomeKey = function onHomeKey(event) {
changeFocusedItem({
originalEvent: event,
processedItem: findFirstItem(),
allowHeaderFocus: false
});
event.preventDefault();
};
var onEndKey = function onEndKey(event) {
changeFocusedItem({
originalEvent: event,
processedItem: findLastItem(),
focusOnNext: true,
allowHeaderFocus: false
});
event.preventDefault();
};
var onEnterKey = function onEnterKey(event) {
if (ObjectUtils.isNotEmpty(focusedItem)) {
var element = DomHandler.findSingle(getListElement(), "li[id=\"".concat("".concat(focusedItemId), "\"]"));
var anchorElement = element && (DomHandler.findSingle(element, '[data-pc-section="action"]') || DomHandler.findSingle(element, 'a,button'));
anchorElement ? anchorElement.click() : element && element.click();
}
event.preventDefault();
};
var onSpaceKey = function onSpaceKey(event) {
onEnterKey(event);
};
var onItemToggle = function onItemToggle(event) {
var processedItem = event.processedItem,
expanded = event.expanded;
if (props.expandedKeys) {
props.onToggle && props.onToggle({
item: processedItem.item,
expanded: expanded
});
} else {
var _activeItemPath = activeItemPath.filter(function (p) {
return p.parentKey !== processedItem.parentKey;
});
expanded && _activeItemPath.push(processedItem);
setActiveItemPath(_activeItemPath);
}
if (processedItem.item) {
processedItem.item = _objectSpread$D(_objectSpread$D({}, processedItem.item), {}, {
expanded: expanded
});
}
DomHandler.focus(getListElement());
setFocusedItem(processedItem);
};
var isItemMatched = function isItemMatched(processedItem) {
return isValidItem(processedItem) && getItemLabel(processedItem).toLocaleLowerCase().startsWith(searchValue.current.toLocaleLowerCase());
};
var isVisibleItem = function isVisibleItem(processedItem) {
return !!processedItem && (processedItem.level === 0 || isItemActive(processedItem)) && isItemVisible(processedItem);
};
var isValidItem = function isValidItem(processedItem) {
return !!processedItem && !isItemDisabled(processedItem) && !getItemProp(processedItem, 'separator');
};
var findFirstItem = function findFirstItem() {
return visibleItems.find(function (processedItem) {
return isValidItem(processedItem);
});
};
var findLastItem = function findLastItem() {
return ObjectUtils.findLast(visibleItems, function (processedItem) {
return isValidItem(processedItem);
});
};
var findNextItem = function findNextItem(processedItem) {
var index = visibleItems.findIndex(function (item) {
return item.key === processedItem.key;
});
var matchedItem = index < visibleItems.length - 1 ? visibleItems.slice(index + 1).find(function (pItem) {
return isValidItem(pItem);
}) : undefined;
return matchedItem || processedItem;
};
var findPrevItem = function findPrevItem(processedItem) {
var index = visibleItems.findIndex(function (item) {
return item.key === processedItem.key;
});
var matchedItem = index > 0 ? ObjectUtils.findLast(visibleItems.slice(0, index), function (pItem) {
return isValidItem(pItem);
}) : undefined;
return matchedItem || processedItem;
};
var searchItems = function searchItems(event, _char) {
searchValue.current = (searchValue.current || '') + _char;
var matchedItem = null;
var matched = false;
if (ObjectUtils.isNotEmpty(focusedItem)) {
var focusedItemIndex = visibleItems.findIndex(function (processedItem) {
return processedItem.key === focusedItem.key;
});
matchedItem = visibleItems.slice(focusedItemIndex).find(function (processedItem) {
return isItemMatched(processedItem);
});
matchedItem = ObjectUtils.isEmpty(matchedItem) ? visibleItems.slice(0, focusedItemIndex).find(function (processedItem) {
return isItemMatched(processedItem);
}) : matchedItem;
} else {
matchedItem = visibleItems.find(function (processedItem) {
return isItemMatched(processedItem);
});
}
if (ObjectUtils.isNotEmpty(matchedItem)) {
matched = true;
}
if (ObjectUtils.isEmpty(matchedItem) && ObjectUtils.isEmpty(focusedItem)) {
matchedItem = findFirstItem();
}
if (ObjectUtils.isNotEmpty(matchedItem)) {
changeFocusedItem({
originalEvent: event,
processedItem: matchedItem,
allowHeaderFocus: false
});
}
if (searchTimeout) {
clearTimeout(searchTimeout.current);
}
searchTimeout.current = setTimeout(function () {
searchValue.current = '';
searchTimeout.currentt = null;
}, 500);
return matched;
};
var changeFocusedItem = function changeFocusedItem(event) {
var originalEvent = event.originalEvent,
processedItem = event.processedItem,
focusOnNext = event.focusOnNext,
selfCheck = event.selfCheck,
_event$allowHeaderFoc = event.allowHeaderFocus,
allowHeaderFocus = _event$allowHeaderFoc === void 0 ? true : _event$allowHeaderFoc;
if (ObjectUtils.isNotEmpty(focusedItem) && focusedItem.key !== processedItem.key) {
setFocusedItem(processedItem);
scrollInView();
} else if (allowHeaderFocus) {
props.onHeaderFocus && props.onHeaderFocus({
originalEvent: originalEvent,
focusOnNext: focusOnNext,
selfCheck: selfCheck
});
}
};
var scrollInView = function scrollInView() {
var element = DomHandler.findSingle(getListElement(), "li[id=\"".concat("".concat(focusedItemId), "\"]"));
if (element) {
element.scrollIntoView && element.scrollIntoView({
block: 'nearest',
inline: 'start'
});
}
};
var autoUpdateActiveItemPath = function autoUpdateActiveItemPath(expandedKeys) {
var _activeItemPath = Object.entries(expandedKeys || {}).reduce(function (acc, _ref) {
var _ref2 = _slicedToArray(_ref, 2),
key = _ref2[0],
val = _ref2[1];
if (val) {
var processedItem = _findProcessedItemByItemKey(key);
processedItem && acc.push(processedItem);
}
return acc;
}, []);
setActiveItemPath(_activeItemPath);
};
var _findProcessedItemByItemKey = function findProcessedItemByItemKey(key, processed) {
var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
var _processedItems = processed ? processed : level === 0 && props.model;
if (!_processedItems) {
return null;
}
for (var i = 0; i < _processedItems.length; i++) {
var processedItem = _processedItems[i];
var processedKey = getItemProp(processedItem, 'key') || processedItem.key;
if (processedKey === key) {
return processedItem;
}
var matchedItem = _findProcessedItemByItemKey(key, processedItem.items, level + 1);
if (matchedItem) {
return matchedItem;
}
}
};
var _createProcessedItems = function createProcessedItems(items) {
var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var parentKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
var processedItems = [];
items && items.forEach(function (item, index) {
var key = item.key ? item.key : (parentKey !== '' ? parentKey + '_' : '') + index;
var newItem = {
item: item,
index: index,
level: level,
key: key,
parent: parent,
parentKey: parentKey
};
newItem.items = _createProcessedItems(item.items, level + 1, newItem, key);
processedItems.push(newItem);
});
return processedItems;
};
var _flatItems = function flatItems(processedItems) {
var processedFlattenItems = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
processedItems && processedItems.forEach(function (processedItem) {
if (isVisibleItem(processedItem)) {
processedFlattenItems.push(processedItem);
_flatItems(processedItem.items, processedFlattenItems);
}
});
return processedFlattenItems;
};
React.useEffect(function () {
var processed = _createProcessedItems(props.model);
setProcessedItems(processed);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.model]);
React.useEffect(function () {
var _visibleItems = _flatItems(processedItems);
setVisibleItems(_visibleItems);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [processedItems, activeItemPath]);
React.useEffect(function () {
autoUpdateActiveItemPath(props.expandedKeys);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.expandedKeys]);
useUpdateEffect(function () {
var _id = ObjectUtils.isNotEmpty(focusedItem) ? "".concat(props.panelId, "_").concat(focusedItem.key) : null;
setFocusedItemId(_id);
}, [props.panelId, focusedItem]);
return /*#__PURE__*/React.createElement(PanelMenuSub, {
hostName: "PanelMenu",
id: props.panelId + '_list',
ref: elementRef,
role: "tree",
tabIndex: -1,
ariaActivedescendant: focused ? focusedItemId : undefined,
panelId: props.panelId,
focusedItemId: focused ? focusedItemId : undefined,
model: processedItems,
activeItemPath: activeItemPath,
menuProps: props.menuProps,
onFocus: onFocus,
onBlur: onBlur,
onKeyDown: onKeyDown,
onItemToggle: onItemToggle,
level: 0,
className: cx('submenu'),
expandIcon: props.expandIcon,
collapseIcon: props.collapseIcon,
root: true,
ptm: ptm,
cx: cx
});
});
PanelMenuList.displayName = 'PanelMenuList';
function ownKeys$C(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$C(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$C(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$C(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var PanelMenu = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = PanelMenuBase.getProps(inProps, context);
var _React$useState = React.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var _React$useState3 = React.useState(null),
_React$useState4 = _slicedToArray(_React$useState3, 2),
activeItemState = _React$useState4[0],
setActiveItemState = _React$useState4[1];
var _React$useState5 = React.useState([]),
_React$useState6 = _slicedToArray(_React$useState5, 2),
activeItemsState = _React$useState6[0],
setActiveItemsState = _React$useState6[1];
var _React$useState7 = React.useState(false),
_React$useState8 = _slicedToArray(_React$useState7, 2);
_React$useState8[0];
var setAnimationDisabled = _React$useState8[1];
var elementRef = React.useRef(null);
var _PanelMenuBase$setMet = PanelMenuBase.setMetaData({
props: props,
state: {
id: idState,
activeItem: activeItemState
}
}),
ptm = _PanelMenuBase$setMet.ptm,
cx = _PanelMenuBase$setMet.cx,
isUnstyled = _PanelMenuBase$setMet.isUnstyled;
useHandleStyle(PanelMenuBase.css.styles, isUnstyled, {
name: 'panelmenu'
});
var onItemClick = function onItemClick(event, item) {
if (item.disabled) {
event.preventDefault();
return;
}
if (item.command) {
item.command({
originalEvent: event,
item: item
});
}
if (item.items) {
changeActiveItem(event, item);
}
if (!item.url) {
event.preventDefault();
event.stopPropagation();
}
};
var getItemProp = function getItemProp(item, name) {
return item ? ObjectUtils.getItemValue(item[name]) : undefined;
};
var isItemActive = function isItemActive(item) {
if (props.expandedKeys) {
return props.expandedKeys[getItemProp(item, 'key')];
}
return props.multiple ? activeItemsState.some(function (subItem) {
return ObjectUtils.equals(item, subItem);
}) : ObjectUtils.equals(item, activeItemState);
};
var isItemVisible = function isItemVisible(item) {
return getItemProp(item, 'visible') !== false;
};
var isItemDisabled = function isItemDisabled(item) {
return getItemProp(item, 'disabled');
};
var isItemFocused = function isItemFocused(item) {
return ObjectUtils.equals(item, activeItemState);
};
var generatePanelId = function generatePanelId(index) {
return "".concat(idState, "_").concat(index);
};
var generateHeaderId = function generateHeaderId(itemId, index) {
return "".concat(itemId || generatePanelId(index), "_header");
};
var generateContentId = function generateContentId(itemId, index) {
return "".concat(itemId || generatePanelId(index), "_content");
};
var onHeaderKeyDown = function onHeaderKeyDown(event, item) {
switch (event.code) {
case 'ArrowDown':
onHeaderArrowDownKey(event);
break;
case 'ArrowUp':
onHeaderArrowUpKey(event);
break;
case 'Home':
onHeaderHomeKey(event);
break;
case 'End':
onHeaderEndKey(event);
break;
case 'Enter':
case 'NumpadEnter':
case 'Space':
onHeaderEnterKey(event, item);
break;
}
};
var onHeaderArrowDownKey = function onHeaderArrowDownKey(event) {
var rootList = DomHandler.getAttribute(event.currentTarget, 'data-p-highlight') === true ? DomHandler.findSingle(event.currentTarget.nextElementSibling, '[data-pc-section="menu"]') : null;
rootList ? DomHandler.focus(rootList) : updateFocusedHeader({
originalEvent: event,
focusOnNext: true
});
event.preventDefault();
};
var onHeaderArrowUpKey = function onHeaderArrowUpKey(event) {
var prevHeader = _findPrevHeader(event.currentTarget.parentElement) || findLastHeader();
var rootList = DomHandler.getAttribute(prevHeader, 'data-p-highlight') === true ? DomHandler.findSingle(prevHeader.nextElementSibling, '[data-pc-section="menu"]') : null;
rootList ? DomHandler.focus(rootList) : updateFocusedHeader({
originalEvent: event,
focusOnNext: false
});
event.preventDefault();
};
var onHeaderHomeKey = function onHeaderHomeKey(event) {
changeFocusedHeader(event, findFirstHeader());
event.preventDefault();
};
var onHeaderEndKey = function onHeaderEndKey(event) {
changeFocusedHeader(event, findLastHeader());
event.preventDefault();
};
var onHeaderEnterKey = function onHeaderEnterKey(event, item) {
var headerAction = DomHandler.findSingle(event.currentTarget, '[data-pc-section="headeraction"]');
headerAction ? headerAction.click() : onItemClick(event, item);
event.preventDefault();
};
var _findNextHeader = function findNextHeader(panelElement) {
var selfCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var nextPanelElement = selfCheck ? panelElement : panelElement.nextElementSibling;
var headerElement = DomHandler.findSingle(nextPanelElement, '[data-pc-section="header"]');
return headerElement ? DomHandler.getAttribute(headerElement, 'data-p-disabled') ? _findNextHeader(headerElement.parentElement) : headerElement : null;
};
var _findPrevHeader = function findPrevHeader(panelElement) {
var selfCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var prevPanelElement = selfCheck ? panelElement : panelElement.previousElementSibling;
var headerElement = DomHandler.findSingle(prevPanelElement, '[data-pc-section="header"]');
return headerElement ? DomHandler.getAttribute(headerElement, 'data-p-disabled') ? _findPrevHeader(headerElement.parentElement) : headerElement : null;
};
var findFirstHeader = function findFirstHeader() {
return _findNextHeader(elementRef.current.firstElementChild, true);
};
var findLastHeader = function findLastHeader() {
return _findPrevHeader(elementRef.current.lastElementChild, true);
};
var updateFocusedHeader = function updateFocusedHeader(event) {
var originalEvent = event.originalEvent,
focusOnNext = event.focusOnNext,
selfCheck = event.selfCheck;
var panelElement = originalEvent.currentTarget.closest('[data-pc-section="panel"]');
var header = selfCheck ? DomHandler.findSingle(panelElement, '[data-pc-section="header"]') : focusOnNext ? _findNextHeader(panelElement) : _findPrevHeader(panelElement);
header ? changeFocusedHeader(originalEvent, header) : focusOnNext ? onHeaderHomeKey(originalEvent) : onHeaderEndKey(originalEvent);
};
var changeActiveItem = function changeActiveItem(event, item) {
if (!isItemDisabled(item)) {
var active = isItemActive(item);
var isExpanded = !active;
var _activeItemState = activeItemState && ObjectUtils.equals(item, activeItemState) ? null : item;
setActiveItemState(_activeItemState);
if (props.multiple) {
var activeItems = activeItemsState;
if (activeItemsState.some(function (subItem) {
return ObjectUtils.equals(item, subItem);
})) {
activeItems = activeItemsState.filter(function (subItem) {
return !ObjectUtils.equals(item, subItem);
});
} else {
activeItems.push(item);
}
setActiveItemsState(activeItems);
}
changeExpandedKeys({
item: item,
expanded: isExpanded
});
isExpanded && event ? props.onOpen && props.onOpen({
originalEvent: event,
item: item
}) : props.onClose && props.onClose({
originalEvent: event,
item: item
});
}
};
var changeExpandedKeys = function changeExpandedKeys(_ref) {
var item = _ref.item,
_ref$expanded = _ref.expanded,
expanded = _ref$expanded === void 0 ? false : _ref$expanded;
if (props.expandedKeys) {
var _keys = _objectSpread$C({}, props.expandedKeys);
if (expanded) {
_keys[item.key] = true;
} else {
delete _keys[item.key];
}
props.onExpandedKeysChange && props.onExpandedKeysChange(_keys);
}
};
var changeFocusedHeader = function changeFocusedHeader(event, element) {
element && DomHandler.focus(element);
};
var getPTOptions = function getPTOptions(item, key, index) {
return ptm(key, {
context: {
active: isItemActive(item),
focused: isItemFocused(item),
disabled: isItemDisabled(item),
index: index
}
});
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
useMountEffect(function () {
!idState && setIdState(UniqueComponentId());
});
React.useEffect(function () {
setAnimationDisabled(true);
props.model && props.model.forEach(function (item) {
if (item.expanded) {
changeActiveItem(null, item);
}
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.model]);
var onEnter = function onEnter() {
setAnimationDisabled(false);
};
var createPanel = function createPanel(item, index) {
if (!isItemVisible(item)) {
return null;
}
var key = item.id || idState + '_' + index;
var active = isItemActive(item);
var iconClassName = classNames('p-menuitem-icon', item.icon);
var headerIconProps = mergeProps({
className: cx('headerIcon', {
item: item
})
}, getPTOptions(item, 'headerIcon', index));
var icon = IconUtils.getJSXIcon(item.icon, _objectSpread$C({}, headerIconProps), {
props: props
});
var submenuIconClassName = 'p-panelmenu-icon';
var headerSubmenuIconProps = mergeProps({
className: cx('headerSubmenuIcon')
}, getPTOptions(item, 'headerSubmenuIcon', index));
var submenuIcon = item.items && IconUtils.getJSXIcon(active ? props.collapseIcon || /*#__PURE__*/React.createElement(ChevronDownIcon, headerSubmenuIconProps) : props.expandIcon || /*#__PURE__*/React.createElement(ChevronRightIcon, headerSubmenuIconProps));
var headerLabelProps = mergeProps({
className: cx('headerLabel')
}, getPTOptions(item, 'headerLabel', index));
var label = item.label && /*#__PURE__*/React.createElement("span", headerLabelProps, item.label);
var menuContentRef = /*#__PURE__*/React.createRef();
var headerActionProps = mergeProps({
href: item.url || '#',
tabIndex: '-1',
className: cx('headerAction')
}, getPTOptions(item, 'headerAction', index));
var content = /*#__PURE__*/React.createElement("a", headerActionProps, submenuIcon, icon, label);
if (item.template) {
var defaultContentOptions = {
onClick: function onClick(event) {
return onItemClick(event, item);
},
className: 'p-panelmenu-header-link',
labelClassName: 'p-menuitem-text',
submenuIconClassName: submenuIconClassName,
iconClassName: iconClassName,
element: content,
props: props,
leaf: !item.items,
active: active
};
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
}
var panelProps = mergeProps({
id: (item === null || item === void 0 ? void 0 : item.id) || generatePanelId(index),
className: cx('panel', {
item: item
}),
style: item.style
}, getPTOptions(item, 'panel', index));
var headerProps = mergeProps({
id: generateHeaderId(item === null || item === void 0 ? void 0 : item.id, index),
className: cx('header', {
active: active,
item: item
}),
'aria-label': item.label,
'aria-expanded': active,
'aria-disabled': item.disabled,
'aria-controls': generateContentId(item === null || item === void 0 ? void 0 : item.id, index),
tabIndex: item.disabled ? null : '0',
onClick: function onClick(event) {
return onItemClick(event, item);
},
onKeyDown: function onKeyDown(event) {
return onHeaderKeyDown(event, item);
},
'data-p-disabled': item.disabled,
'data-p-highlight': active,
role: 'button',
style: item.style
}, getPTOptions(item, 'header', index));
var headerContentProps = mergeProps({
className: cx('headerContent')
}, getPTOptions(item, 'headerContent', index));
var menuContentProps = mergeProps({
className: cx('menuContent')
}, getPTOptions(item, 'menuContent', index));
var toggleableContentProps = mergeProps({
className: cx('toggleableContent', {
active: active
}),
role: 'region',
'aria-labelledby': generateHeaderId(item === null || item === void 0 ? void 0 : item.id, index)
}, getPTOptions(item, 'toggleableContent', index));
var transitionProps = mergeProps({
classNames: cx('transition'),
timeout: {
enter: 1000,
exit: 450
},
onEnter: onEnter,
"in": active,
unmountOnExit: true,
options: props.transitionOptions
}, getPTOptions(item, 'transition', index));
return /*#__PURE__*/React.createElement("div", _extends({}, panelProps, {
key: key
}), /*#__PURE__*/React.createElement("div", headerProps, /*#__PURE__*/React.createElement("div", headerContentProps, content)), /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: menuContentRef
}, transitionProps), /*#__PURE__*/React.createElement("div", _extends({
id: generateContentId(item === null || item === void 0 ? void 0 : item.id, index),
ref: menuContentRef
}, toggleableContentProps), /*#__PURE__*/React.createElement("div", menuContentProps, /*#__PURE__*/React.createElement(PanelMenuList, {
panelId: (item === null || item === void 0 ? void 0 : item.id) || generatePanelId(index),
menuProps: props,
onToggle: changeExpandedKeys,
onHeaderFocus: updateFocusedHeader,
level: 0,
model: item.items,
expandedKeys: props.expandedKeys,
className: "p-panelmenu-root-submenu",
submenuIcon: props.submenuIcon,
ptm: ptm,
cx: cx
})))));
};
var createPanels = function createPanels() {
return props.model ? props.model.map(createPanel) : null;
};
var panels = createPanels();
var rootProps = mergeProps({
ref: elementRef,
className: classNames(props.className, cx('root')),
id: props.id,
style: props.style
}, PanelMenuBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("div", rootProps, panels);
}));
PanelMenu.displayName = 'PanelMenu';
var classes$q = {
root: 'p-input-icon'
};
var InputIconBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'InputIcon',
__parentMetadata: null,
className: null,
iconPosition: null
},
css: {
classes: classes$q
}
});
function ownKeys$B(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$B(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$B(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$B(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var InputIcon = /*#__PURE__*/React__default.memo(/*#__PURE__*/React__default.forwardRef(function (inProps, ref) {
var elementRef = useRef(ref);
var mergeProps = useMergeProps();
var context = useContext(PrimeReactContext);
var props = InputIconBase.getProps(inProps, context);
var _InputIconBase$setMet = InputIconBase.setMetaData(_objectSpread$B(_objectSpread$B({
props: props
}, props.__parentMetadata), {}, {
context: {
iconPosition: props.iconPosition
}
})),
ptm = _InputIconBase$setMet.ptm,
cx = _InputIconBase$setMet.cx;
var rootProps = mergeProps({
className: classNames(props.className, cx('root'))
}, InputIconBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", _extends({}, rootProps, {
ref: elementRef
}), props.children));
}));
InputIcon.displayName = 'InputIcon';
var classes$p = {
root: function root(_ref) {
var props = _ref.props,
isFilled = _ref.isFilled,
focusedState = _ref.focusedState;
return classNames('p-password p-component p-inputwrapper', {
'p-inputwrapper-filled': isFilled,
'p-inputwrapper-focus': focusedState,
'p-input-icon-right': props.toggleMask
});
},
input: function input(_ref2) {
var props = _ref2.props;
return classNames('p-password-input', props.inputClassName);
},
panel: function panel(_ref3) {
var props = _ref3.props,
context = _ref3.context;
return classNames('p-password-panel p-component', props.panelClassName, {
'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
});
},
meter: 'p-password-meter',
meterLabel: function meterLabel(_ref4) {
var strength = _ref4.strength;
return classNames('p-password-strength', strength);
},
info: function info(_ref5) {
var strength = _ref5.strength;
return classNames('p-password-info', strength);
},
showIcon: 'p-password-show-icon',
hideIcon: 'p-password-hide-icon',
transition: 'p-connected-overlay'
};
var styles$k = "\n@layer primereact {\n .p-password {\n position: relative;\n display: inline-flex;\n }\n \n .p-password-panel {\n position: absolute;\n top: 0;\n left: 0;\n }\n \n .p-password .p-password-panel {\n min-width: 100%;\n }\n \n .p-password-meter {\n height: 10px;\n }\n \n .p-password-strength {\n height: 100%;\n width: 0%;\n transition: width 1s ease-in-out;\n }\n \n .p-fluid .p-password {\n display: flex;\n }\n \n .p-password-input::-ms-reveal,\n .p-password-input::-ms-clear {\n display: none;\n }\n\n .p-password .p-password-show-icon,\n .p-password .p-password-hide-icon {\n line-height: 1.5;\n cursor: pointer;\n }\n}\n";
var PasswordBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Password',
id: null,
inputId: null,
inputRef: null,
promptLabel: null,
weakLabel: null,
mediumLabel: null,
strongLabel: null,
mediumRegex: '^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})',
strongRegex: '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})',
feedback: true,
toggleMask: false,
appendTo: null,
header: null,
content: null,
footer: null,
showIcon: null,
hideIcon: null,
icon: null,
tooltip: null,
tooltipOptions: null,
style: null,
className: null,
inputStyle: null,
inputClassName: null,
invalid: false,
variant: null,
panelStyle: null,
panelClassName: null,
transitionOptions: null,
tabIndex: null,
value: undefined,
onInput: null,
onShow: null,
onHide: null,
children: undefined
},
css: {
classes: classes$p,
styles: styles$k
}
});
function ownKeys$A(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$A(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$A(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$A(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Password = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = PasswordBase.getProps(inProps, context);
var promptLabel = props.promptLabel || localeOption('passwordPrompt');
var weakLabel = props.weakLabel || localeOption('weak');
var mediumLabel = props.mediumLabel || localeOption('medium');
var strongLabel = props.strongLabel || localeOption('strong');
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
overlayVisibleState = _React$useState2[0],
setOverlayVisibleState = _React$useState2[1];
var _React$useState3 = React.useState(null),
_React$useState4 = _slicedToArray(_React$useState3, 2),
meterState = _React$useState4[0],
setMeterState = _React$useState4[1];
var _React$useState5 = React.useState(promptLabel),
_React$useState6 = _slicedToArray(_React$useState5, 2),
infoTextState = _React$useState6[0],
setInfoTextState = _React$useState6[1];
var _React$useState7 = React.useState(false),
_React$useState8 = _slicedToArray(_React$useState7, 2),
focusedState = _React$useState8[0],
setFocusedState = _React$useState8[1];
var _React$useState9 = React.useState(false),
_React$useState10 = _slicedToArray(_React$useState9, 2),
unmaskedState = _React$useState10[0],
setUnmaskedState = _React$useState10[1];
var elementRef = React.useRef(null);
var overlayRef = React.useRef(null);
var inputRef = React.useRef(props.inputRef);
var mediumCheckRegExp = React.useRef(new RegExp(props.mediumRegex));
var strongCheckRegExp = React.useRef(new RegExp(props.strongRegex));
var type = unmaskedState ? 'text' : 'password';
var metaData = {
props: props,
state: {
overlayVisible: overlayVisibleState,
meter: meterState,
infoText: infoTextState,
focused: focusedState,
unmasked: unmaskedState
}
};
var _PasswordBase$setMeta = PasswordBase.setMetaData(metaData),
ptm = _PasswordBase$setMeta.ptm,
cx = _PasswordBase$setMeta.cx,
isUnstyled = _PasswordBase$setMeta.isUnstyled;
useHandleStyle(PasswordBase.css.styles, isUnstyled, {
name: 'password'
});
var passwordDisplayOrder = useDisplayOrder('password', overlayVisibleState);
useGlobalOnEscapeKey({
callback: function callback() {
hide();
},
when: overlayVisibleState && props.feedback && passwordDisplayOrder,
priority: [ESC_KEY_HANDLING_PRIORITIES.PASSWORD, passwordDisplayOrder]
});
var _useOverlayListener = useOverlayListener({
target: elementRef,
overlay: overlayRef,
listener: function listener(event, _ref) {
var valid = _ref.valid,
type = _ref.type;
if (valid) {
if (type === 'outside' || context.hideOverlaysOnDocumentScrolling) {
hide();
} else if (!DomHandler.isDocument(event.target)) {
alignOverlay();
}
}
},
when: overlayVisibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var currentValue = inputRef.current && inputRef.current.value;
var isFilled = React.useMemo(function () {
return ObjectUtils.isNotEmpty(props.value) || ObjectUtils.isNotEmpty(props.defaultValue) || ObjectUtils.isNotEmpty(currentValue);
}, [props.value, props.defaultValue, currentValue]);
var updateLabels = function updateLabels() {
if (meterState) {
var label = null;
switch (meterState.strength) {
case 'weak':
label = weakLabel;
break;
case 'medium':
label = mediumLabel;
break;
case 'strong':
label = strongLabel;
break;
}
if (label && infoTextState !== label) {
setInfoTextState(label);
}
} else if (infoTextState !== promptLabel) {
setInfoTextState(promptLabel);
}
};
var updateFeedback = function updateFeedback(value) {
if (!props.feedback) {
return false;
}
var label = null;
var meter = null;
switch (testStrength(value)) {
case 1:
label = weakLabel;
meter = {
strength: 'weak',
width: '33.33%'
};
break;
case 2:
label = mediumLabel;
meter = {
strength: 'medium',
width: '66.66%'
};
break;
case 3:
label = strongLabel;
meter = {
strength: 'strong',
width: '100%'
};
break;
default:
label = promptLabel;
meter = null;
break;
}
setMeterState(meter);
setInfoTextState(label);
return true;
};
var onPanelClick = function onPanelClick(event) {
if (props.feedback) {
OverlayService.emit('overlay-click', {
originalEvent: event,
target: elementRef.current
});
}
};
var toggleMask = function toggleMask() {
setUnmaskedState(function (prevUnmasked) {
return !prevUnmasked;
});
};
var show = function show() {
updateLabels();
setOverlayVisibleState(true);
};
var hide = function hide() {
setOverlayVisibleState(false);
};
var alignOverlay = function alignOverlay() {
if (inputRef.current) {
DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || context && context.appendTo || PrimeReact.appendTo);
}
};
var onOverlayEnter = function onOverlayEnter() {
ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, context && context.zIndex.overlay || PrimeReact.zIndex.overlay);
DomHandler.addStyles(overlayRef.current, {
position: 'absolute',
top: '0',
left: '0'
});
alignOverlay();
};
var onOverlayEntered = function onOverlayEntered() {
bindOverlayListener();
props.onShow && props.onShow();
};
var onOverlayExit = function onOverlayExit() {
unbindOverlayListener();
};
var onOverlayExited = function onOverlayExited() {
ZIndexUtils.clear(overlayRef.current);
props.onHide && props.onHide();
};
var onFocus = function onFocus(event) {
setFocusedState(true);
if (props.feedback) {
show();
}
props.onFocus && props.onFocus(event);
};
var onBlur = function onBlur(event) {
setFocusedState(false);
if (props.feedback) {
hide();
}
props.onBlur && props.onBlur(event);
};
var onKeyup = function onKeyup(e) {
var keyCode = e.code;
if (props.feedback) {
if (!!keyCode && keyCode !== 'Escape' && !overlayVisibleState) {
show();
}
}
props.onKeyUp && props.onKeyUp(e);
};
var onInput = function onInput(event, validatePattern) {
if (props.onInput) {
props.onInput(event, validatePattern);
}
if (!props.onChange) {
ObjectUtils.isNotEmpty(event.target.value) ? DomHandler.addClass(elementRef.current, 'p-inputwrapper-filled') : DomHandler.removeClass(elementRef.current, 'p-inputwrapper-filled');
}
};
var testStrength = function testStrength(str) {
if (!str || str.length === 0) {
return 0;
}
if (strongCheckRegExp.current.test(str)) {
return 3;
} else if (mediumCheckRegExp.current.test(str)) {
return 2;
} else if (str.length > 0) {
return 1;
}
return 0;
};
React.useImperativeHandle(ref, function () {
return {
props: props,
toggleMask: toggleMask,
focus: function focus() {
return DomHandler.focus(inputRef.current);
},
getElement: function getElement() {
return elementRef.current;
},
getOverlay: function getOverlay() {
return overlayRef.current;
},
getInput: function getInput() {
return inputRef.current;
}
};
});
React.useEffect(function () {
ObjectUtils.combinedRefs(inputRef, props.inputRef);
}, [inputRef, props.inputRef]);
React.useEffect(function () {
mediumCheckRegExp.current = new RegExp(props.mediumRegex);
}, [props.mediumRegex]);
React.useEffect(function () {
strongCheckRegExp.current = new RegExp(props.strongRegex);
}, [props.strongRegex]);
React.useEffect(function () {
if (!isFilled && DomHandler.hasClass(elementRef.current, 'p-inputwrapper-filled')) {
DomHandler.removeClass(elementRef.current, 'p-inputwrapper-filled');
}
}, [isFilled]);
useUpdateEffect(function () {
updateFeedback(props.value);
}, [props.value]);
useMountEffect(function () {
alignOverlay();
});
useUnmountEffect(function () {
ZIndexUtils.clear(overlayRef.current);
});
var onToggleMaskKeyDown = function onToggleMaskKeyDown(event) {
if (event.key === 'Enter' || event.code === 'Space') {
toggleMask();
event.preventDefault();
}
};
var createIcon = function createIcon() {
if (!props.toggleMask) {
return null;
}
var icon;
var hideIconProps = mergeProps({
role: 'switch',
tabIndex: props.tabIndex || '0',
className: cx('hideIcon'),
onClick: toggleMask,
onKeyDown: onToggleMaskKeyDown,
'aria-label': ariaLabel('passwordHide') || 'Hide Password',
'aria-checked': 'false'
}, ptm('hideIcon'));
var showIconProps = mergeProps({
role: 'switch',
tabIndex: props.tabIndex || '0',
className: cx('showIcon'),
onClick: toggleMask,
onKeyDown: onToggleMaskKeyDown,
'aria-label': ariaLabel('passwordShow') || 'Show Password',
'aria-checked': 'true'
}, ptm('showIcon'));
if (unmaskedState) {
icon = props.hideIcon || /*#__PURE__*/React.createElement(EyeSlashIcon, hideIconProps);
} else {
icon = props.showIcon || /*#__PURE__*/React.createElement(EyeIcon, showIconProps);
}
var eyeIcon = IconUtils.getJSXIcon(icon, unmaskedState ? _objectSpread$A({}, hideIconProps) : _objectSpread$A({}, showIconProps), {
props: props
});
var content = eyeIcon;
if (props.icon) {
var defaultIconOptions = {
onClick: toggleMask,
className: className,
element: content,
props: props
};
content = ObjectUtils.getJSXElement(props.icon, defaultIconOptions);
}
return content;
};
var createPanel = function createPanel() {
var _ref2 = meterState || {
strength: '',
width: '0%'
},
strength = _ref2.strength,
width = _ref2.width;
var header = ObjectUtils.getJSXElement(props.header, props);
var footer = ObjectUtils.getJSXElement(props.footer, props);
var panelProps = mergeProps({
className: cx('panel', {
context: context
}),
style: props.panelStyle,
onClick: onPanelClick
}, ptm('panel'));
var meterProps = mergeProps({
className: cx('meter')
}, ptm('meter'));
var meterLabelProps = mergeProps({
className: cx('meterLabel', {
strength: strength
}),
style: {
width: width
}
}, ptm('meterLabel'));
var infoProps = mergeProps({
className: cx('info', {
strength: strength
})
}, ptm('info'));
var content = props.content ? ObjectUtils.getJSXElement(props.content, props) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", meterProps, /*#__PURE__*/React.createElement("div", meterLabelProps)), /*#__PURE__*/React.createElement("div", infoProps, infoTextState));
var transitionProps = mergeProps({
classNames: cx('transition'),
"in": overlayVisibleState,
timeout: {
enter: 120,
exit: 100
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: onOverlayEnter,
onEntered: onOverlayEntered,
onExit: onOverlayExit,
onExited: onOverlayExited
}, ptm('transition'));
var panel = /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: overlayRef
}, transitionProps), /*#__PURE__*/React.createElement("div", _extends({
ref: overlayRef
}, panelProps), header, content, footer));
return /*#__PURE__*/React.createElement(Portal, {
element: panel,
appendTo: props.appendTo
});
};
var className = classNames('p-password p-component p-inputwrapper', {
'p-inputwrapper-filled': isFilled,
'p-inputwrapper-focus': focusedState,
'p-input-icon-right': props.toggleMask
}, props.className);
var inputProps = PasswordBase.getOtherProps(props);
var icon = createIcon();
var panel = createPanel();
var rootProps = mergeProps({
ref: elementRef,
id: props.id,
className: classNames(props.className, cx('root', {
isFilled: isFilled,
focusedState: focusedState
})),
style: props.style
}, ptm('root'));
var inputTextProps = mergeProps(_objectSpread$A(_objectSpread$A({
ref: inputRef,
id: props.inputId
}, inputProps), {}, {
className: classNames(props.inputClassName, cx('input')),
onBlur: onBlur,
onFocus: onFocus,
onInput: onInput,
onKeyUp: onKeyup,
invalid: props.invalid,
variant: props.variant,
style: props.inputStyle,
unstyled: props.unstyled,
tabIndex: props.tabIndex || '0',
tooltip: props.tooltip,
tooltipOptions: props.tooltipOptions,
type: type,
value: props.value,
__parentMetadata: {
parent: metaData
}
}), ptm('input'));
var input = /*#__PURE__*/React.createElement(InputText, inputTextProps);
if (icon) {
input = /*#__PURE__*/React.createElement(IconField, {
className: cx('iconField'),
pt: ptm('iconField'),
__parentMetadata: {
parent: metaData
}
}, input, /*#__PURE__*/React.createElement(InputIcon, {
className: cx('inputIcon'),
pt: ptm('inputIcon'),
__parentMetadata: {
parent: metaData
}
}, icon));
}
return /*#__PURE__*/React.createElement("div", rootProps, input, panel);
}));
Password.displayName = 'Password';
var classes$o = {
root: 'p-picklist p-component',
buttons: 'p-picklist-buttons p-picklist-transfer-buttons',
header: 'p-picklist-header',
filterIcon: 'p-picklist-filter-icon',
filter: 'p-picklist-filter',
filterInput: 'p-picklist-filter-input p-inputtext p-component',
filterContainer: 'p-picklist-filter-container',
list: 'p-picklist-list',
listWrapper: 'p-picklist-list-wrapper',
listSourceWrapper: 'p-picklist-list-wrapper p-picklist-source-wrapper',
listTargetWrapper: 'p-picklist-list-wrapper p-picklist-target-wrapper',
listSource: 'p-picklist-list p-picklist-source',
listTarget: 'p-picklist-list p-picklist-target',
item: function item(_ref) {
var selected = _ref.selected,
focused = _ref.focused;
return classNames('p-picklist-item', {
'p-highlight': selected,
'p-focus': focused
});
},
sourceControls: 'p-picklist-source-controls p-picklist-buttons',
targetControls: 'p-picklist-target-controls p-picklist-buttons'
};
var styles$j = "\n@layer primereact {\n .p-picklist {\n display: flex;\n }\n\n .p-picklist-buttons {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n .p-picklist-list-wrapper {\n flex: 1 1 50%;\n }\n\n .p-picklist-list {\n list-style-type: none;\n margin: 0;\n padding: 0;\n overflow: auto;\n min-height: 12rem;\n max-height: 24rem;\n }\n\n .p-picklist-item {\n cursor: pointer;\n overflow: hidden;\n position: relative;\n }\n\n .p-picklist-item .p-ink {\n pointer-events: none;\n }\n\n .p-picklist-filter {\n position: relative;\n }\n\n .p-picklist-filter-icon {\n position: absolute;\n top: 50%;\n margin-top: -.5rem;\n }\n\n .p-picklist-filter-input {\n width: 100%;\n }\n}\n";
var PickListBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'PickList',
id: null,
source: null,
target: null,
sourceHeader: null,
targetHeader: null,
style: null,
className: null,
sourceStyle: null,
targetStyle: null,
sourceSelection: null,
targetSelection: null,
showSourceControls: true,
showTargetControls: true,
metaKeySelection: false,
onFocus: null,
onBlur: null,
filter: false,
filterBy: null,
filterMatchMode: 'contains',
targetFilterIcon: null,
sourceFilterIcon: null,
moveAllToSourceIcon: null,
moveToSourceIcon: null,
moveAllToTargetIcon: null,
moveToTargetIcon: null,
moveBottomIcon: null,
moveUpIcon: null,
moveTopIcon: null,
moveDownIcon: null,
filterLocale: undefined,
sourceFilterValue: null,
targetFilterValue: null,
showSourceFilter: true,
showTargetFilter: true,
sourceFilterPlaceholder: null,
targetFilterPlaceholder: null,
sourceFilterTemplate: null,
targetFilterTemplate: null,
tabIndex: 0,
dataKey: null,
autoOptionFocus: true,
focusOnHover: true,
breakpoint: '960px',
itemTemplate: null,
sourceItemTemplate: null,
targetItemTemplate: null,
onChange: null,
onMoveToSource: null,
onMoveAllToSource: null,
onMoveToTarget: null,
onMoveAllToTarget: null,
onSourceSelectionChange: null,
onTargetSelectionChange: null,
onSourceFilterChange: null,
onTargetFilterChange: null,
children: undefined
},
css: {
classes: classes$o,
styles: styles$j
}
});
var PickListControls = /*#__PURE__*/React.memo(function (props) {
var mergeProps = useMergeProps();
var ptm = props.ptm,
cx = props.cx,
unstyled = props.unstyled;
var moveUpIcon = props.moveUpIcon || /*#__PURE__*/React.createElement(AngleUpIcon, null);
var moveTopIcon = props.moveTopIcon || /*#__PURE__*/React.createElement(AngleDoubleUpIcon, null);
var moveDownIcon = props.moveDownIcon || /*#__PURE__*/React.createElement(AngleDownIcon, null);
var moveBottomIcon = props.moveBottomIcon || /*#__PURE__*/React.createElement(AngleDoubleDownIcon, null);
var moveDisabled = !props.selection || !props.selection.length;
var moveUp = function moveUp(event) {
var selectedItems = props.selection;
if (selectedItems && selectedItems.length) {
var list = _toConsumableArray(props.list);
for (var i = 0; i < selectedItems.length; i++) {
var selectedItem = selectedItems[i];
var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list, props.dataKey);
if (selectedItemIndex !== 0) {
var movedItem = list[selectedItemIndex];
var temp = list[selectedItemIndex - 1];
list[selectedItemIndex - 1] = movedItem;
list[selectedItemIndex] = temp;
} else {
break;
}
}
if (props.onReorder) {
props.onReorder({
originalEvent: event,
value: list,
direction: 'up'
});
}
}
};
var moveTop = function moveTop(event) {
var selectedItems = props.selection;
if (selectedItems && selectedItems.length) {
var list = _toConsumableArray(props.list);
for (var i = 0; i < selectedItems.length; i++) {
var selectedItem = selectedItems[i];
var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list, props.dataKey);
if (selectedItemIndex !== 0) {
var movedItem = list.splice(selectedItemIndex, 1)[0];
list.unshift(movedItem);
} else {
break;
}
}
if (props.onReorder) {
props.onReorder({
originalEvent: event,
value: list,
direction: 'top'
});
}
}
};
var moveDown = function moveDown(event) {
var selectedItems = props.selection;
if (selectedItems && selectedItems.length) {
var list = _toConsumableArray(props.list);
for (var i = selectedItems.length - 1; i >= 0; i--) {
var selectedItem = selectedItems[i];
var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list, props.dataKey);
if (selectedItemIndex !== list.length - 1) {
var movedItem = list[selectedItemIndex];
var temp = list[selectedItemIndex + 1];
list[selectedItemIndex + 1] = movedItem;
list[selectedItemIndex] = temp;
} else {
break;
}
}
if (props.onReorder) {
props.onReorder({
originalEvent: event,
value: list,
direction: 'down'
});
}
}
};
var moveBottom = function moveBottom(event) {
var selectedItems = props.selection;
if (selectedItems && selectedItems.length) {
var list = _toConsumableArray(props.list);
for (var i = selectedItems.length - 1; i >= 0; i--) {
var selectedItem = selectedItems[i];
var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list, props.dataKey);
if (selectedItemIndex !== list.length - 1) {
var movedItem = list.splice(selectedItemIndex, 1)[0];
list.push(movedItem);
} else {
break;
}
}
if (props.onReorder) {
props.onReorder({
originalEvent: event,
value: list,
direction: 'bottom'
});
}
}
};
var controlsProps = mergeProps({
className: classNames(props.className, cx('controls'))
}, ptm('controls', {
hostName: props.hostName
}));
return /*#__PURE__*/React.createElement("div", controlsProps, /*#__PURE__*/React.createElement(Button, {
disabled: moveDisabled,
type: "button",
icon: moveUpIcon,
onClick: moveUp,
pt: ptm('moveUpButton'),
unstyled: unstyled,
"aria-label": ariaLabel('moveUp'),
__parentMetadata: {
parent: props.metaData
}
}), /*#__PURE__*/React.createElement(Button, {
disabled: moveDisabled,
type: "button",
icon: moveTopIcon,
onClick: moveTop,
pt: ptm('moveTopButton'),
unstyled: unstyled,
"aria-label": ariaLabel('moveTop'),
__parentMetadata: {
parent: props.metaData
}
}), /*#__PURE__*/React.createElement(Button, {
disabled: moveDisabled,
type: "button",
icon: moveDownIcon,
onClick: moveDown,
pt: ptm('moveDownButton'),
unstyled: unstyled,
"aria-label": ariaLabel('moveDown'),
__parentMetadata: {
parent: props.metaData
}
}), /*#__PURE__*/React.createElement(Button, {
disabled: moveDisabled,
type: "button",
icon: moveBottomIcon,
onClick: moveBottom,
pt: ptm('moveBottomButton'),
unstyled: unstyled,
"aria-label": ariaLabel('moveBottom'),
__parentMetadata: {
parent: props.metaData
}
}));
});
PickListControls.displayName = 'PickListControls';
var PickListItem = /*#__PURE__*/React.memo(function (props) {
var mergeProps = useMergeProps();
var ptm = props.ptm,
cx = props.cx;
var getPTOptions = function getPTOptions(key) {
return ptm(key, {
hostName: props.hostName,
context: {
selected: props.selected
}
});
};
var onClick = function onClick(event) {
if (props.onClick) {
props.onClick({
originalEvent: event,
value: props.value,
id: props.id
});
}
};
var onKeyDown = function onKeyDown(event) {
if (props.onKeyDown) {
props.onKeyDown({
originalEvent: event,
value: props.value
});
}
};
var onMouseDown = function onMouseDown(event) {
if (props.onMouseDown) {
props.onMouseDown(event);
}
};
var onFocus = function onFocus(event) {
if (props.onFocus) {
props.onFocus(event);
}
};
var content = props.template ? props.template(props.value) : props.value;
var itemProps = mergeProps({
className: classNames(props.className, cx('item', {
selected: props.selected,
focused: props.focused
})),
id: props.id,
onClick: onClick,
onKeyDown: onKeyDown,
onFocus: onFocus,
onMouseDown: onMouseDown,
onMouseMove: props.onMouseMove,
role: 'option',
'aria-selected': props.selected,
'data-p-highlight': props.selected,
'data-p-focused': props.focused
}, getPTOptions('item'));
return /*#__PURE__*/React.createElement("li", itemProps, content, /*#__PURE__*/React.createElement(Ripple, null));
});
PickListItem.displayName = 'PickListItem';
function ownKeys$z(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$z(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$z(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$z(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var PickListSubList = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (props, ref) {
var mergeProps = useMergeProps();
var listElementRef = React.useRef(null);
var ptm = props.ptm,
cx = props.cx;
var getPTOptions = function getPTOptions(key, options) {
return ptm(key, _objectSpread$z({
hostName: props.hostName
}, options));
};
var isSelected = function isSelected(item) {
return ObjectUtils.findIndexInList(item, props.selection, props.dataKey) !== -1;
};
var onFilter = function onFilter(event) {
if (props.onFilter) {
props.onFilter({
originalEvent: event,
value: event.target.value,
type: props.type
});
}
};
var onFilterInputKeyDown = function onFilterInputKeyDown(event) {
//enter
if (event.which === 13) {
event.preventDefault();
}
};
React.useImperativeHandle(ref, function () {
return {
getElement: function getElement() {
return listElementRef.current;
}
};
});
var createHeader = function createHeader() {
var headerProps = mergeProps({
className: cx('header')
}, getPTOptions('header'));
if (props.header) {
return /*#__PURE__*/React.createElement("div", headerProps, ObjectUtils.getJSXElement(props.header, props));
}
return null;
};
var changeFocusedItemOnHover = function changeFocusedItemOnHover(index) {
if (props.focusOnHover && props.focusedList[props.type]) {
var _props$changeFocusedO;
props === null || props === void 0 || (_props$changeFocusedO = props.changeFocusedOptionIndex) === null || _props$changeFocusedO === void 0 || _props$changeFocusedO.call(props, index, props.type);
}
};
var createItems = function createItems() {
if (props.list) {
return props.list.map(function (item, index) {
var key = props.parentId + '_' + props.type + '_' + index;
var selected = isSelected(item);
return /*#__PURE__*/React.createElement(PickListItem, {
hostName: props.hostName,
key: key,
id: key,
index: index,
focused: key === props.focusedOptionId,
value: item,
template: props.itemTemplate,
selected: selected,
onClick: props.onItemClick,
onKeyDown: props.onItemKeyDown,
onMouseDown: function onMouseDown(event) {
return props.onOptionMouseDown(_objectSpread$z(_objectSpread$z({}, event), {}, {
index: index,
type: props.type
}));
},
onMouseMove: function onMouseMove() {
return changeFocusedItemOnHover(index);
},
ptm: ptm,
cx: cx
});
});
}
return null;
};
var createFilter = function createFilter() {
var iconClassName = 'p-picklist-filter-icon';
var filterIconProps = mergeProps({
className: cx('filterIcon')
}, getPTOptions('filterIcon'));
var icon = props.type === 'source' ? props.sourceFilterIcon || /*#__PURE__*/React.createElement(SearchIcon, filterIconProps) : props.targetFilterIcon || /*#__PURE__*/React.createElement(SearchIcon, filterIconProps);
var filterIcon = IconUtils.getJSXIcon(icon, _objectSpread$z({}, filterIconProps), {
props: props
});
if (props.showFilter) {
var filterProps = mergeProps({
className: cx('filter')
}, getPTOptions('filter'));
var filterInputProps = mergeProps({
type: 'text',
value: props.filterValue,
onChange: onFilter,
onKeyDown: onFilterInputKeyDown,
placeholder: props.placeholder,
className: cx('filterInput')
}, getPTOptions('filterInput'));
var content = /*#__PURE__*/React.createElement("div", filterProps, /*#__PURE__*/React.createElement("input", filterInputProps), /*#__PURE__*/React.createElement("span", null, " ", filterIcon, " "));
if (props.filterTemplate) {
var defaultContentOptions = {
className: 'p-picklist-filter',
inputProps: {
className: 'p-picklist-filter-input p-inputtext p-component',
onChange: onFilter,
onKeyDown: onFilterInputKeyDown
},
iconClassName: iconClassName,
element: content,
props: props
};
content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
}
var filterContainerProps = mergeProps({
className: cx('filterContainer')
}, getPTOptions('filterContainer'));
return /*#__PURE__*/React.createElement("div", filterContainerProps, content);
}
return null;
};
var createList = function createList() {
var items = createItems();
var listProps = mergeProps({
ref: listElementRef,
className: classNames(props.listClassName, cx('list')),
role: 'listbox',
id: props.parentId + '_' + props.type + '_list',
'aria-multiselectable': true,
'aria-activedescendant': props.ariaActivedescendant,
tabIndex: props.list && props.list.length > 0 ? props.tabIndex : -1,
onKeyDown: props.onListKeyDown,
onFocus: function onFocus(event) {
props.onListFocus(event, props.type);
},
onBlur: props.onListBlur,
style: props.style
}, getPTOptions('list'));
return /*#__PURE__*/React.createElement("ul", listProps, items);
};
var header = createHeader();
var filter = createFilter();
var list = createList();
var listWrapperProps = mergeProps({
className: classNames(props.className, cx('listWrapper'))
}, getPTOptions('listWrapper'));
return /*#__PURE__*/React.createElement("div", listWrapperProps, header, filter, list);
}));
PickListSubList.displayName = 'PickListSubList';
var PickListTransferControls = /*#__PURE__*/React.memo(function (props) {
var mergeProps = useMergeProps();
var viewChanged = useMatchMedia("(max-width: ".concat(props.breakpoint, ")"), props.breakpoint);
var ptm = props.ptm,
cx = props.cx,
unstyled = props.unstyled;
function getIconComponent(iconType) {
switch (iconType) {
case 'moveToTargetIcon':
return props.moveToTargetIcon || viewChanged ? props.moveToTargetIcon || /*#__PURE__*/React.createElement(AngleDownIcon, null) : props.moveToTargetIcon || /*#__PURE__*/React.createElement(AngleRightIcon, null);
case 'moveAllToTargetIcon':
return props.moveAllToTargetIcon || viewChanged ? props.moveAllToTargetIcon || /*#__PURE__*/React.createElement(AngleDoubleDownIcon, null) : props.moveAllToTargetIcon || /*#__PURE__*/React.createElement(AngleDoubleRightIcon, null);
case 'moveToSourceIcon':
return props.moveToSourceIcon || viewChanged ? props.moveToSourceIcon || /*#__PURE__*/React.createElement(AngleUpIcon, null) : props.moveToSourceIcon || /*#__PURE__*/React.createElement(AngleLeftIcon, null);
case 'moveAllToSourceIcon':
return props.moveAllToSourceIcon || viewChanged ? props.moveAllToSourceIcon || /*#__PURE__*/React.createElement(AngleDoubleUpIcon, null) : props.moveAllToSourceIcon || /*#__PURE__*/React.createElement(AngleDoubleLeftIcon, null);
default:
return null;
}
}
var moveToTargetIcon = IconUtils.getJSXIcon(getIconComponent('moveToTargetIcon'), undefined, {
props: props,
viewChanged: viewChanged
});
var moveAllToTargetIcon = IconUtils.getJSXIcon(getIconComponent('moveAllToTargetIcon'), undefined, {
props: props,
viewChanged: viewChanged
});
var moveToSourceIcon = IconUtils.getJSXIcon(getIconComponent('moveToSourceIcon'), undefined, {
props: props,
viewChanged: viewChanged
});
var moveAllToSourceIcon = IconUtils.getJSXIcon(getIconComponent('moveAllToSourceIcon'), undefined, {
props: props,
viewChanged: viewChanged
});
var moveRightDisabled = ObjectUtils.isEmpty(props.sourceSelection) || ObjectUtils.isEmpty(props.visibleSourceList);
var moveLeftDisabled = ObjectUtils.isEmpty(props.targetSelection) || ObjectUtils.isEmpty(props.visibleTargetList);
var moveAllRightDisabled = ObjectUtils.isEmpty(props.visibleSourceList);
var moveAllLeftDisabled = ObjectUtils.isEmpty(props.visibleTargetList);
var moveRight = function moveRight(event) {
var selection = props.sourceSelection;
if (ObjectUtils.isNotEmpty(selection)) {
var targetList = _toConsumableArray(props.target);
var sourceList = _toConsumableArray(props.source);
for (var i = 0; i < selection.length; i++) {
var selectedItem = selection[i];
if (ObjectUtils.findIndexInList(selectedItem, targetList, props.dataKey) === -1) {
targetList.push(sourceList.splice(ObjectUtils.findIndexInList(selectedItem, sourceList, props.dataKey), 1)[0]);
}
}
if (props.onTransfer) {
props.onTransfer({
originalEvent: event,
source: sourceList,
target: targetList,
direction: 'toTarget'
});
}
}
};
var moveAllRight = function moveAllRight(event) {
if (props.source) {
var targetList = [].concat(_toConsumableArray(props.target), _toConsumableArray(props.visibleSourceList));
var sourceList = props.source.filter(function (s) {
return !props.visibleSourceList.some(function (vs) {
return vs === s;
});
});
if (props.onTransfer) {
props.onTransfer({
originalEvent: event,
source: sourceList,
target: targetList,
direction: 'allToTarget'
});
}
}
};
var moveLeft = function moveLeft(event) {
var selection = props.targetSelection;
if (ObjectUtils.isNotEmpty(selection)) {
var targetList = _toConsumableArray(props.target);
var sourceList = _toConsumableArray(props.source);
for (var i = 0; i < selection.length; i++) {
var selectedItem = selection[i];
if (ObjectUtils.findIndexInList(selectedItem, sourceList, props.dataKey) === -1) {
sourceList.push(targetList.splice(ObjectUtils.findIndexInList(selectedItem, targetList, props.dataKey), 1)[0]);
}
}
if (props.onTransfer) {
props.onTransfer({
originalEvent: event,
source: sourceList,
target: targetList,
direction: 'toSource'
});
}
}
};
var moveAllLeft = function moveAllLeft(event) {
if (props.source) {
var sourceList = [].concat(_toConsumableArray(props.source), _toConsumableArray(props.visibleTargetList));
var targetList = props.target.filter(function (t) {
return !props.visibleTargetList.some(function (vt) {
return vt === t;
});
});
if (props.onTransfer) {
props.onTransfer({
originalEvent: event,
source: sourceList,
target: targetList,
direction: 'allToSource'
});
}
}
};
var buttonsProps = mergeProps({
className: classNames(props.className, cx('buttons'))
}, ptm('buttons', {
hostName: props.hostName
}));
return /*#__PURE__*/React.createElement("div", buttonsProps, /*#__PURE__*/React.createElement(Button, {
disabled: moveRightDisabled,
type: "button",
icon: moveToTargetIcon,
onClick: moveRight,
pt: ptm('moveToTargetButton'),
unstyled: unstyled,
"aria-label": ariaLabel('moveToTarget'),
__parentMetadata: {
parent: props.metaData
}
}), /*#__PURE__*/React.createElement(Button, {
disabled: moveAllRightDisabled,
type: "button",
icon: moveAllToTargetIcon,
onClick: moveAllRight,
pt: ptm('moveAllToTargetButton'),
unstyled: unstyled,
"aria-label": ariaLabel('moveAllToTarget'),
__parentMetadata: {
parent: props.metaData
}
}), /*#__PURE__*/React.createElement(Button, {
disabled: moveLeftDisabled,
type: "button",
icon: moveToSourceIcon,
onClick: moveLeft,
pt: ptm('moveToSourceButton'),
unstyled: unstyled,
"aria-label": ariaLabel('moveToSource'),
__parentMetadata: {
parent: props.metaData
}
}), /*#__PURE__*/React.createElement(Button, {
disabled: moveAllLeftDisabled,
type: "button",
icon: moveAllToSourceIcon,
onClick: moveAllLeft,
pt: ptm('moveAllToSourceButton'),
unstyled: unstyled,
"aria-label": ariaLabel('moveAllToSource'),
__parentMetadata: {
parent: props.metaData
}
}));
});
PickListTransferControls.displayName = 'PickListTransferControls';
function ownKeys$y(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$y(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$y(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$y(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var PickList = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = PickListBase.getProps(inProps, context);
var _React$useState = React.useState([]),
_React$useState2 = _slicedToArray(_React$useState, 2),
sourceSelectionState = _React$useState2[0],
setSourceSelectionState = _React$useState2[1];
var _React$useState3 = React.useState([]),
_React$useState4 = _slicedToArray(_React$useState3, 2),
targetSelectionState = _React$useState4[0],
setTargetSelectionState = _React$useState4[1];
var _React$useState5 = React.useState(''),
_React$useState6 = _slicedToArray(_React$useState5, 2),
sourceFilterValueState = _React$useState6[0],
setSourceFilterValueState = _React$useState6[1];
var _React$useState7 = React.useState(''),
_React$useState8 = _slicedToArray(_React$useState7, 2),
targetFilterValueState = _React$useState8[0],
setTargetFilterValueState = _React$useState8[1];
var _React$useState9 = React.useState(props.id),
_React$useState10 = _slicedToArray(_React$useState9, 2),
attributeSelectorState = _React$useState10[0],
setAttributeSelectorState = _React$useState10[1];
var _React$useState11 = React.useState(-1),
_React$useState12 = _slicedToArray(_React$useState11, 2),
focusedOptionIndex = _React$useState12[0],
setFocusedOptionIndex = _React$useState12[1];
var _React$useState13 = React.useState(null),
_React$useState14 = _slicedToArray(_React$useState13, 2),
focusedOptionId = _React$useState14[0],
setFocusedOptionId = _React$useState14[1];
var _React$useState15 = React.useState({
source: false,
target: false
}),
_React$useState16 = _slicedToArray(_React$useState15, 2),
focused = _React$useState16[0],
setFocused = _React$useState16[1];
var metaData = {
props: props,
state: {
sourceSelection: sourceSelectionState,
targetSelection: targetSelectionState,
sourceFilterValue: sourceFilterValueState,
targetFilterValue: targetFilterValueState,
attributeSelector: attributeSelectorState
}
};
var _PickListBase$setMeta = PickListBase.setMetaData(metaData),
ptm = _PickListBase$setMeta.ptm,
cx = _PickListBase$setMeta.cx,
isUnstyled = _PickListBase$setMeta.isUnstyled;
useHandleStyle(PickListBase.css.styles, isUnstyled, {
name: 'picklist'
});
var elementRef = React.useRef(null);
var sourceListElementRef = React.useRef(null);
var targetListElementRef = React.useRef(null);
var reorderedListElementRef = React.useRef(null);
var reorderDirection = React.useRef(null);
var styleElementRef = React.useRef(null);
var sourceSelection = props.sourceSelection ? props.sourceSelection : sourceSelectionState;
var targetSelection = props.targetSelection ? props.targetSelection : targetSelectionState;
var sourceFilteredValue = props.onSourceFilterChange ? props.sourceFilterValue : sourceFilterValueState;
var targetFilteredValue = props.onTargetFilterChange ? props.targetFilterValue : targetFilterValueState;
var hasFilterBy = ObjectUtils.isNotEmpty(props.filterBy);
var showSourceFilter = hasFilterBy && props.showSourceFilter;
var showTargetFilter = hasFilterBy && props.showTargetFilter;
var onSourceReorder = function onSourceReorder(event) {
handleChange(event, event.value, props.target);
reorderedListElementRef.current = getListElement('source');
reorderDirection.current = event.direction;
};
var onTargetReorder = function onTargetReorder(event) {
handleChange(event, props.source, event.value);
reorderedListElementRef.current = getListElement('target');
reorderDirection.current = event.direction;
};
var handleScrollPosition = function handleScrollPosition(listElement, direction) {
if (listElement) {
switch (direction) {
case 'up':
scrollInView(listElement, -1);
break;
case 'top':
listElement.scrollTop = 0;
break;
case 'down':
scrollInView(listElement, 1);
break;
case 'bottom':
/* TODO: improve this code block */
setTimeout(function () {
return listElement.scrollTop = listElement.scrollHeight;
}, 100);
break;
}
}
};
var handleChange = function handleChange(event, source, target) {
if (props.onChange) {
props.onChange({
originalEvent: event.originalEvent,
source: source,
target: target
});
}
};
var onTransfer = function onTransfer(event) {
var originalEvent = event.originalEvent,
source = event.source,
target = event.target,
direction = event.direction;
var selectedValue = [];
switch (direction) {
case 'toTarget':
selectedValue = sourceSelection;
if (props.onMoveToTarget) {
props.onMoveToTarget({
originalEvent: originalEvent,
value: selectedValue
});
}
break;
case 'allToTarget':
selectedValue = props.source;
if (props.onMoveAllToTarget) {
props.onMoveAllToTarget({
originalEvent: originalEvent,
value: selectedValue
});
}
selectedValue = [];
break;
case 'toSource':
selectedValue = targetSelection;
if (props.onMoveToSource) {
props.onMoveToSource({
originalEvent: originalEvent,
value: selectedValue
});
}
break;
case 'allToSource':
selectedValue = props.target;
if (props.onMoveAllToSource) {
props.onMoveAllToSource({
originalEvent: originalEvent,
value: selectedValue
});
}
selectedValue = [];
break;
}
_onSelectionChange({
originalEvent: originalEvent,
value: selectedValue
}, 'sourceSelection', props.onSourceSelectionChange);
_onSelectionChange({
originalEvent: originalEvent,
value: selectedValue
}, 'targetSelection', props.onTargetSelectionChange);
setTargetSelectionState([]);
setSourceSelectionState([]);
handleChange(event, source, target);
};
var scrollInView = function scrollInView(listContainer) {
var direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
var selectedItems = listContainer.getElementsByClassName('p-highlight');
if (ObjectUtils.isNotEmpty(selectedItems)) {
DomHandler.scrollInView(listContainer, direction === -1 ? selectedItems[0] : selectedItems[selectedItems.length - 1]);
}
};
var _onSelectionChange = function onSelectionChange(e, stateKey, callback) {
if (stateKey === 'sourceSelection') {
setSourceSelectionState(e.value);
} else {
setTargetSelectionState(e.value);
}
if (callback) {
callback(e);
}
};
var onFilter = function onFilter(event) {
var originalEvent = event.originalEvent,
value = event.value,
type = event.type;
var _ref = type === 'source' ? [setSourceFilterValueState, props.onSourceFilterChange] : [setTargetFilterValueState, props.onTargetFilterChange],
_ref2 = _slicedToArray(_ref, 2),
setFilterState = _ref2[0],
onFilterChange = _ref2[1];
if (onFilterChange) {
onFilterChange({
originalEvent: originalEvent,
value: value
});
} else {
setFilterState(value);
}
};
var filterSource = function filterSource() {
var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var filteredValue = value.trim().toLocaleLowerCase(props.filterLocale);
return filter(props.source, filteredValue);
};
var filterTarget = function filterTarget() {
var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var filteredValue = value.trim().toLocaleLowerCase(props.filterLocale);
return filter(props.target, filteredValue);
};
var filter = function filter(list, filterValue) {
var searchFields = hasFilterBy ? props.filterBy.split(',') : [];
return FilterService.filter(list, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
};
var getVisibleList = function getVisibleList(list, type) {
var _ref3 = type === 'source' ? [sourceFilteredValue, filterSource] : [targetFilteredValue, filterTarget],
_ref4 = _slicedToArray(_ref3, 2),
filteredValue = _ref4[0],
filterCallback = _ref4[1];
return hasFilterBy && ObjectUtils.isNotEmpty(filteredValue) ? filterCallback(filteredValue) : list;
};
var sourceList = getVisibleList(props.source, 'source');
var targetList = getVisibleList(props.target, 'target');
var findCurrentFocusedIndex = function findCurrentFocusedIndex(listElement) {
if (focusedOptionIndex === -1) {
var itemList = listElement && listElement.children ? _toConsumableArray(listElement.children) : [];
var selectedOptionIndex = findFirstSelectedOptionIndex(listElement, itemList);
if (props.autoOptionFocus && selectedOptionIndex === -1) {
selectedOptionIndex = findFirstFocusedOptionIndex(listElement, itemList);
}
return selectedOptionIndex;
}
return -1;
};
var findFirstSelectedOptionIndex = function findFirstSelectedOptionIndex(listElement, itemList) {
if (sourceSelectionState.length || targetSelectionState.length) {
var selectedFirstItem = DomHandler.findSingle(listElement, '[data-p-highlight="true"]');
return ObjectUtils.findIndexInList(selectedFirstItem, itemList);
}
return -1;
};
var findFirstFocusedOptionIndex = function findFirstFocusedOptionIndex(listElement, itemList) {
var firstFocusableItem = DomHandler.findSingle(listElement, '[data-pc-section="item"]');
return ObjectUtils.findIndexInList(firstFocusableItem, itemList);
};
var _onListFocus = function onListFocus(event, type) {
setFocused(_objectSpread$y(_objectSpread$y({}, focused), {}, _defineProperty({}, type, true)));
var listElement = getListElement(type);
var currentFocusedIndex = findCurrentFocusedIndex(listElement);
changeFocusedOptionIndex(currentFocusedIndex, type);
props.onFocus && props.onFocus(event);
};
var _onListBlur = function onListBlur(event, type) {
setFocused(_objectSpread$y(_objectSpread$y({}, focused), {}, _defineProperty({}, type, false)));
setFocusedOptionIndex(-1);
props.onBlur && props.onBlur(event);
};
var _onItemClick = function onItemClick(event, type) {
var arrowKeyClick = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var originalEvent = event.originalEvent;
var item = event.value;
var selectedId = event.id;
var isSource = type === 'source';
var selection = _toConsumableArray(isSource ? sourceSelection : targetSelection);
var index = ObjectUtils.findIndexInList(item, selection, props.dataKey);
var selected = index !== -1;
var metaSelection = props.metaKeySelection;
if (!arrowKeyClick) {
setFocusedOptionIndex(selectedId);
}
if (metaSelection) {
var metaKey = originalEvent.metaKey || originalEvent.ctrlKey || originalEvent.shiftKey;
if (selected && metaKey) {
selection.splice(index, 1);
} else {
if (!metaKey) {
selection.length = 0;
}
selection.push(item);
}
} else if (selected) {
selection.splice(index, 1);
} else {
selection.push(item);
}
if (isSource) {
_onSelectionChange({
originalEvent: originalEvent,
value: selection
}, 'sourceSelection', props.onSourceSelectionChange);
} else {
_onSelectionChange({
originalEvent: originalEvent,
value: selection
}, 'targetSelection', props.onTargetSelectionChange);
}
};
var _onOptionMouseDown = function onOptionMouseDown(_ref5) {
var index = _ref5.index,
type = _ref5.type;
setFocused(_objectSpread$y(_objectSpread$y({}, focused), {}, _defineProperty({}, type, true)));
setFocusedOptionIndex(index);
};
var _onListKeyDown = function onListKeyDown(event, type) {
switch (event.code) {
case 'ArrowDown':
onArrowDownKey(event, type);
break;
case 'ArrowUp':
onArrowUpKey(event, type);
break;
case 'Home':
onHomeKey(event, type);
break;
case 'End':
onEndKey(event, type);
break;
case 'Enter':
case 'NumpadEnter':
onEnterKey(event, type);
break;
case 'Space':
onSpaceKey(event, type);
break;
case 'KeyA':
if (event.ctrlKey) {
var isSource = type === 'source';
if (isSource) {
setSourceSelectionState(_toConsumableArray(sourceList));
} else {
setTargetSelectionState(_toConsumableArray(targetList));
}
_onSelectionChange({
originalEvent: event,
value: isSource ? _toConsumableArray(sourceList) : _toConsumableArray(targetList)
}, isSource ? 'sourceSelection' : 'targetSelection', isSource ? props.onSourceSelectionChange : props.onTargetSelectionChange);
event.preventDefault();
}
break;
case 'KeyD':
if (event.ctrlKey) {
var _isSource = type === 'source';
if (_isSource) {
setSourceSelectionState([]);
} else {
setTargetSelectionState([]);
}
_onSelectionChange({
originalEvent: event,
value: []
}, _isSource ? 'sourceSelection' : 'targetSelection', _isSource ? props.onSourceSelectionChange : props.onTargetSelectionChange);
event.preventDefault();
}
break;
}
};
var onArrowDownKey = function onArrowDownKey(event, type) {
var optionIndex = findNextOptionIndex(focusedOptionIndex, type);
var visibleList = getVisibleList(type === 'source' ? props.source : props.target, type);
changeFocusedOptionIndex(optionIndex, type);
if (visibleList && visibleList.length > 0 && event.shiftKey) {
_onItemClick({
originalEvent: event,
value: visibleList[optionIndex]
}, type, true);
}
event.preventDefault();
};
var onArrowUpKey = function onArrowUpKey(event, type) {
var optionIndex = findPrevOptionIndex(focusedOptionIndex, type);
var visibleList = getVisibleList(type === 'source' ? props.source : props.target, type);
changeFocusedOptionIndex(optionIndex, type);
if (visibleList && visibleList.length > 0 && event.shiftKey) {
_onItemClick({
originalEvent: event,
value: visibleList[optionIndex]
}, type, true);
}
event.preventDefault();
};
var onEnterKey = function onEnterKey(event, type) {
var listElement = getListElement(type);
var visibleList = getVisibleList(type === 'source' ? props.source : props.target, type);
var items = DomHandler.find(listElement, '[data-pc-section="item"]');
var focusedItem = DomHandler.findSingle(listElement, "[data-pc-section=\"item\"][id=".concat(focusedOptionIndex, "]"));
var id = focusedItem && focusedItem.getAttribute('id');
var matchedOptionIndex = _toConsumableArray(items).findIndex(function (item) {
return item === focusedItem;
});
if (visibleList && visibleList.length > 0) {
_onItemClick({
originalEvent: event,
value: visibleList[matchedOptionIndex],
id: id
}, type);
}
event.preventDefault();
};
var onSpaceKey = function onSpaceKey(event, type) {
event.preventDefault();
var isSource = type === 'source';
var selection = isSource ? sourceSelectionState : targetSelectionState;
if (event.shiftKey && selection && selection.length > 0) {
var listItems = isSource ? sourceList : targetList;
var listElement = getListElement(type);
var items = DomHandler.find(listElement, '[data-pc-section="item"]');
var selectedItemIndex = ObjectUtils.findIndexInList(selection[0], _toConsumableArray(listItems));
var focusedItem = DomHandler.findSingle(listElement, "[data-pc-section=\"item\"][id=".concat(focusedOptionIndex, "]"));
var matchedOptionIndex = _toConsumableArray(items).findIndex(function (item) {
return item === focusedItem;
});
_toConsumableArray(listItems).slice(Math.min(selectedItemIndex, matchedOptionIndex), Math.max(selectedItemIndex, matchedOptionIndex) + 1), _readOnlyError("selection");
if (isSource) {
_onSelectionChange({
originalEvent: event,
value: selection
}, 'sourceSelection', props.onSourceSelectionChange);
} else {
_onSelectionChange({
originalEvent: event,
value: selection
}, 'targetSelection', props.onTargetSelectionChange);
}
} else {
onEnterKey(event, type);
}
};
var onHomeKey = function onHomeKey(event, type) {
if (event.ctrlKey && event.shiftKey) {
var isSource = type === 'source';
var listItems = isSource ? sourceList : targetList;
var listElement = getListElement(type);
var items = DomHandler.find(listElement, '[data-pc-section="item"]');
var focusedItem = DomHandler.findSingle(listElement, "[data-pc-section=\"item\"][id=".concat(focusedOptionIndex, "]"));
var matchedOptionIndex = _toConsumableArray(items).findIndex(function (item) {
return item === focusedItem;
});
var selection = _toConsumableArray(listItems).slice(0, matchedOptionIndex + 1);
if (isSource) {
_onSelectionChange({
originalEvent: event,
value: selection
}, 'sourceSelection', props.onSourceSelectionChange);
} else {
_onSelectionChange({
originalEvent: event,
value: selection
}, 'targetSelection', props.onTargetSelectionChange);
}
} else {
changeFocusedOptionIndex(0, type);
}
event.preventDefault();
};
var onEndKey = function onEndKey(event, type) {
var listElement = getListElement(type);
var items = DomHandler.find(listElement, '[data-pc-section="item"]');
if (event.ctrlKey && event.shiftKey) {
var isSource = type === 'source';
var listItems = isSource ? sourceList : targetList;
var focusedItem = DomHandler.findSingle(listElement, "[data-pc-section=\"item\"][id=".concat(focusedOptionIndex, "]"));
var matchedOptionIndex = _toConsumableArray(items).findIndex(function (item) {
return item === focusedItem;
});
var selection = _toConsumableArray(listItems).slice(matchedOptionIndex, items.length);
if (isSource) {
_onSelectionChange({
originalEvent: event,
value: selection
}, 'sourceSelection', props.onSourceSelectionChange);
} else {
_onSelectionChange({
originalEvent: event,
value: selection
}, 'targetSelection', props.onTargetSelectionChange);
}
} else {
changeFocusedOptionIndex(items.length - 1, type);
}
event.preventDefault();
};
var findNextOptionIndex = function findNextOptionIndex(index, type) {
var listElement = getListElement(type);
var items = DomHandler.find(listElement, '[data-pc-section="item"]');
var matchedOptionIndex = _toConsumableArray(items).findIndex(function (link) {
return link.id === index;
});
return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
};
var findPrevOptionIndex = function findPrevOptionIndex(index, type) {
var listElement = getListElement(type);
var items = DomHandler.find(listElement, '[data-pc-section="item"]');
var matchedOptionIndex = _toConsumableArray(items).findIndex(function (link) {
return link.id === index;
});
return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
};
var changeFocusedOptionIndex = function changeFocusedOptionIndex(index, type) {
var listElement = getListElement(type);
var items = DomHandler.find(listElement, '[data-pc-section="item"]');
var order;
if (index >= items.length) {
order = items.length - 1;
} else if (index < 0) {
return;
} else {
order = index;
}
setFocusedOptionIndex(items[order].getAttribute('id'));
scrollInViewWithFocus(items[order].getAttribute('id'), type);
};
var scrollInViewWithFocus = function scrollInViewWithFocus(id, type) {
var listElement = getListElement(type);
var element = DomHandler.findSingle(listElement, "[data-pc-section=\"item\"][id=\"".concat(id, "\"]"));
if (element) {
element.scrollIntoView && element.scrollIntoView({
block: 'nearest',
inline: 'start'
});
}
};
var getListElement = function getListElement(type) {
return type === 'source' ? sourceListElementRef.current.getElement() : targetListElementRef.current.getElement();
};
var createStyle = function createStyle() {
if (!styleElementRef.current) {
styleElementRef.current = DomHandler.createInlineStyle(context && context.nonce || PrimeReact.nonce, context && context.styleContainer);
var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n .p-picklist[").concat(attributeSelectorState, "] {\n flex-direction: column;\n }\n\n .p-picklist[").concat(attributeSelectorState, "] .p-picklist-buttons {\n padding: var(--content-padding);\n flex-direction: row;\n }\n\n .p-picklist[").concat(attributeSelectorState, "] .p-picklist-buttons .p-button {\n margin-right: var(--inline-spacing);\n margin-bottom: 0;\n }\n\n .p-picklist[").concat(attributeSelectorState, "] .p-picklist-buttons .p-button:last-child {\n margin-right: 0;\n }\n}\n");
styleElementRef.current.innerHTML = innerHTML;
}
};
var destroyStyle = function destroyStyle() {
styleElementRef.current = DomHandler.removeInlineStyle(styleElementRef.current);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
useUpdateEffect(function () {
if (attributeSelectorState) {
elementRef.current.setAttribute(attributeSelectorState, '');
createStyle();
}
return function () {
destroyStyle();
};
}, [attributeSelectorState, props.breakpoint]);
useUpdateEffect(function () {
if (!props.id && !attributeSelectorState) {
setAttributeSelectorState(UniqueComponentId());
}
if (reorderedListElementRef.current) {
handleScrollPosition(reorderedListElementRef.current, reorderDirection.current);
reorderedListElementRef.current = null;
reorderDirection.current = null;
}
});
useUpdateEffect(function () {
var _focusedOptionId = focusedOptionIndex !== -1 ? focusedOptionIndex : null;
setFocusedOptionId(_focusedOptionId);
}, [focusedOptionIndex]);
var sourceItemTemplate = props.sourceItemTemplate ? props.sourceItemTemplate : props.itemTemplate;
var targetItemTemplate = props.targetItemTemplate ? props.targetItemTemplate : props.itemTemplate;
var rootProps = mergeProps({
id: attributeSelectorState,
ref: elementRef,
className: classNames(props.className, cx('root')),
style: props.style
}, PickListBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("div", rootProps, props.showSourceControls && /*#__PURE__*/React.createElement(PickListControls, {
hostName: "PickList",
list: props.source,
selection: sourceSelection,
onReorder: onSourceReorder,
className: cx('sourceControls'),
dataKey: props.dataKey,
moveUpIcon: props.moveUpIcon,
moveTopIcon: props.moveTopIcon,
moveDownIcon: props.moveDownIcon,
moveBottomIcon: props.moveBottomIcon,
ptm: ptm,
cx: cx,
unstyled: props.unstyled,
metaData: metaData
}), /*#__PURE__*/React.createElement(PickListSubList, {
hostName: "PickList",
ref: sourceListElementRef,
type: "source",
list: sourceList,
parentId: attributeSelectorState,
selection: sourceSelection,
onSelectionChange: function onSelectionChange(e) {
return _onSelectionChange(e, 'sourceSelection', props.onSourceSelectionChange);
},
onListKeyDown: function onListKeyDown(e) {
return _onListKeyDown(e, 'source');
},
onListFocus: function onListFocus(e) {
return _onListFocus(e, 'source');
},
onListBlur: function onListBlur(e) {
return _onListBlur(e, 'source');
},
onOptionMouseDown: function onOptionMouseDown(index) {
return _onOptionMouseDown(index);
},
onItemClick: function onItemClick(e) {
return _onItemClick(e, 'source');
},
focusedOptionId: focused.source ? focusedOptionId : null,
ariaActivedescendant: focused.source ? focusedOptionId : null,
itemTemplate: sourceItemTemplate,
header: props.sourceHeader,
style: props.sourceStyle,
className: cx('listSourceWrapper'),
listClassName: cx('listSource'),
metaKeySelection: props.metaKeySelection,
tabIndex: props.tabIndex,
dataKey: props.dataKey,
filterValue: sourceFilteredValue,
onFilter: onFilter,
showFilter: showSourceFilter,
placeholder: props.sourceFilterPlaceholder,
filterTemplate: props.sourceFilterTemplate,
sourceFilterIcon: props.sourceFilterIcon,
ptm: ptm,
cx: cx,
focusedList: focused,
changeFocusedOptionIndex: changeFocusedOptionIndex,
focusOnHover: props.focusOnHover
}), /*#__PURE__*/React.createElement(PickListTransferControls, {
hostName: "PickList",
onTransfer: onTransfer,
source: props.source,
visibleSourceList: sourceList,
target: props.target,
breakpoint: props.breakpoint,
visibleTargetList: targetList,
sourceSelection: sourceSelection,
targetSelection: targetSelection,
dataKey: props.dataKey,
moveToTargetIcon: props.moveToTargetIcon,
moveAllToTargetIcon: props.moveAllToTargetIcon,
moveToSourceIcon: props.moveToSourceIcon,
moveAllToSourceIcon: props.moveAllToSourceIcon,
ptm: ptm,
cx: cx,
unstyled: props.unstyled,
metaData: metaData
}), /*#__PURE__*/React.createElement(PickListSubList, {
hostName: "PickList",
ref: targetListElementRef,
type: "target",
list: targetList,
selection: targetSelection,
parentId: attributeSelectorState,
onSelectionChange: function onSelectionChange(e) {
return _onSelectionChange(e, 'targetSelection', props.onTargetSelectionChange);
},
onListKeyDown: function onListKeyDown(e) {
return _onListKeyDown(e, 'target');
},
onListFocus: function onListFocus(e) {
return _onListFocus(e, 'target');
},
onListBlur: function onListBlur(e) {
return _onListBlur(e, 'target');
},
onOptionMouseDown: function onOptionMouseDown(index) {
return _onOptionMouseDown(index);
},
onItemClick: function onItemClick(e) {
return _onItemClick(e, 'target');
},
focusedOptionId: focused.target ? focusedOptionId : null,
ariaActivedescendant: focused.target ? focusedOptionId : null,
itemTemplate: targetItemTemplate,
header: props.targetHeader,
style: props.targetStyle,
className: cx('listTargetWrapper'),
listClassName: cx('listWrapper'),
metaKeySelection: props.metaKeySelection,
tabIndex: props.tabIndex,
dataKey: props.dataKey,
filterValue: targetFilteredValue,
onFilter: onFilter,
showFilter: showTargetFilter,
placeholder: props.targetFilterPlaceholder,
filterTemplate: props.targetFilterTemplate,
targetFilterIcon: props.targetFilterIcon,
ptm: ptm,
cx: cx,
focusedList: focused,
changeFocusedOptionIndex: changeFocusedOptionIndex,
focusOnHover: props.focusOnHover
}), props.showTargetControls && /*#__PURE__*/React.createElement(PickListControls, {
hostName: "PickList",
list: props.target,
selection: targetSelection,
onReorder: onTargetReorder,
className: cx('targetControls'),
dataKey: props.dataKey,
moveUpIcon: props.moveUpIcon,
moveTopIcon: props.moveTopIcon,
moveDownIcon: props.moveDownIcon,
moveBottomIcon: props.moveBottomIcon,
ptm: ptm,
cx: cx,
unstyled: props.unstyled,
metaData: metaData
}));
}));
PickList.displayName = 'PickList';
var classes$n = {
root: 'p-progress-spinner',
spinner: 'p-progress-spinner-svg',
circle: 'p-progress-spinner-circle'
};
var styles$i = "\n@layer primereact {\n .p-progress-spinner {\n position: relative;\n margin: 0 auto;\n width: 100px;\n height: 100px;\n display: inline-block;\n }\n \n .p-progress-spinner::before {\n content: '';\n display: block;\n padding-top: 100%;\n }\n \n .p-progress-spinner-svg {\n animation: p-progress-spinner-rotate 2s linear infinite;\n height: 100%;\n transform-origin: center center;\n width: 100%;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: auto;\n }\n \n .p-progress-spinner-circle {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: 0;\n stroke: #d62d20;\n animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;\n stroke-linecap: round;\n }\n}\n\n@keyframes p-progress-spinner-rotate {\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes p-progress-spinner-dash {\n 0% {\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -35px;\n }\n 100% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -124px;\n }\n}\n\n@keyframes p-progress-spinner-color {\n 100%,\n 0% {\n stroke: #d62d20;\n }\n 40% {\n stroke: #0057e7;\n }\n 66% {\n stroke: #008744;\n }\n 80%,\n 90% {\n stroke: #ffa700;\n }\n}\n";
var inlineStyles$8 = {
spinner: function spinner(_ref) {
var props = _ref.props;
return {
animationDuration: props.animationDuration
};
}
};
var ProgressSpinnerBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'ProgressSpinner',
id: null,
style: null,
className: null,
strokeWidth: '2',
fill: 'none',
animationDuration: '2s',
children: undefined
},
css: {
classes: classes$n,
styles: styles$i,
inlineStyles: inlineStyles$8
}
});
var ProgressSpinner = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = ProgressSpinnerBase.getProps(inProps, context);
var elementRef = React.useRef(null);
var _ProgressSpinnerBase$ = ProgressSpinnerBase.setMetaData({
props: props
}),
ptm = _ProgressSpinnerBase$.ptm,
cx = _ProgressSpinnerBase$.cx,
sx = _ProgressSpinnerBase$.sx,
isUnstyled = _ProgressSpinnerBase$.isUnstyled;
useHandleStyle(ProgressSpinnerBase.css.styles, isUnstyled, {
name: 'progressspinner'
});
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var rootProps = mergeProps({
id: props.id,
ref: elementRef,
style: props.style,
className: classNames(props.className, cx('root')),
role: 'progressbar',
'aria-busy': true
}, ProgressSpinnerBase.getOtherProps(props), ptm('root'));
var spinnerProps = mergeProps({
className: cx('spinner'),
viewBox: '25 25 50 50',
style: sx('spinner')
}, ptm('spinner'));
var circleProps = mergeProps({
className: cx('circle'),
cx: '50',
cy: '50',
r: '20',
fill: props.fill,
strokeWidth: props.strokeWidth,
strokeMiterlimit: '10'
}, ptm('circle'));
return /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement("svg", spinnerProps, /*#__PURE__*/React.createElement("circle", circleProps)));
}));
ProgressSpinner.displayName = 'ProgressSpinner';
var classes$m = {
onIcon: 'p-rating-icon',
item: function item(_ref) {
var active = _ref.active,
value = _ref.value,
isFocusVisibleItem = _ref.isFocusVisibleItem,
focusedOptionIndex = _ref.focusedOptionIndex;
return classNames('p-rating-item', {
'p-rating-item-active': active
}, {
'p-focus': value === focusedOptionIndex && isFocusVisibleItem
});
},
cancelIcon: 'p-rating-icon p-rating-cancel',
cancelItem: 'p-rating-item p-rating-cancel-item',
root: function root(_ref2) {
var props = _ref2.props;
return classNames('p-rating', {
'p-disabled': props.disabled,
'p-readonly': props.readOnly
});
}
};
var styles$h = "\n@layer primereact {\n .p-rating {\n display: flex;\n align-items: center;\n }\n \n .p-rating-item {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n }\n \n .p-rating.p-readonly .p-rating-item {\n cursor: default;\n }\n}\n";
var RatingBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Rating',
id: null,
value: null,
disabled: false,
readOnly: false,
stars: 5,
cancel: true,
style: null,
className: null,
tooltip: null,
tooltipOptions: null,
onChange: null,
onIcon: null,
offIcon: null,
cancelIcon: null,
cancelIconProps: null,
onIconProps: null,
offIconProps: null,
children: undefined
},
css: {
classes: classes$m,
styles: styles$h
}
});
function ownKeys$x(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$x(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$x(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$x(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Rating = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = RatingBase.getProps(inProps, context);
var _React$useState = React.useState(-1),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedOptionIndex = _React$useState2[0],
setFocusedOptionIndex = _React$useState2[1];
var _React$useState3 = React.useState(true),
_React$useState4 = _slicedToArray(_React$useState3, 2),
isFocusVisibleItem = _React$useState4[0];
_React$useState4[1];
var elementRef = React.useRef(null);
var _RatingBase$setMetaDa = RatingBase.setMetaData({
props: props
}),
ptm = _RatingBase$setMetaDa.ptm,
cx = _RatingBase$setMetaDa.cx,
isUnstyled = _RatingBase$setMetaDa.isUnstyled;
useHandleStyle(RatingBase.css.styles, isUnstyled, {
name: 'rating'
});
var getPTOptions = function getPTOptions(value, key) {
return ptm(key, {
context: {
active: value <= props.value
}
});
};
var enabled = !props.disabled && !props.readOnly;
var tabIndex = enabled ? 0 : null;
var rate = function rate(event, i) {
if (enabled && props.onChange) {
props.onChange({
originalEvent: event,
value: i,
stopPropagation: function stopPropagation() {
event === null || event === void 0 || event.stopPropagation();
},
preventDefault: function preventDefault() {
event === null || event === void 0 || event.preventDefault();
},
target: {
name: props.name,
id: props.id,
value: i
}
});
}
setFocusedOptionIndex(i);
event.preventDefault();
};
var clear = function clear(event) {
if (enabled && props.onChange) {
props.onChange({
originalEvent: event,
value: null,
stopPropagation: function stopPropagation() {
event === null || event === void 0 || event.stopPropagation();
},
preventDefault: function preventDefault() {
event === null || event === void 0 || event.preventDefault();
},
target: {
name: props.name,
id: props.id,
value: null
}
});
}
event.preventDefault();
};
var onStarKeyDown = function onStarKeyDown(event, value) {
switch (event.key) {
case 'Enter':
case 'Space':
rate(event, value);
event.preventDefault();
break;
case 'ArrowLeft':
case 'ArrowUp':
event.preventDefault();
rate(event, props.value - 1 < 1 ? props.stars : props.value - 1);
break;
case 'ArrowRight':
case 'ArrowDown':
event.preventDefault();
rate(event, props.value + 1 > props.stars ? 1 : props.value + 1);
break;
}
};
var _onFocus = function onFocus(event, value) {
setFocusedOptionIndex(value);
};
var _onBlur = function onBlur(event) {
setFocusedOptionIndex(-1);
};
var onCancelKeyDown = function onCancelKeyDown(event) {
if (event.key === 'Enter') {
clear(event);
}
};
var createIcons = function createIcons() {
return Array.from({
length: props.stars
}, function (_, i) {
return i + 1;
}).map(function (value) {
var active = value <= props.value;
var onIconProps = mergeProps({
className: cx('onIcon')
}, getPTOptions(props.value, 'onIcon'));
var offIconProps = mergeProps({
className: cx('onIcon')
}, getPTOptions(props.value, 'offIcon'));
var icon = active ? {
type: props.onIcon || /*#__PURE__*/React.createElement(StarFillIcon, onIconProps)
} : {
type: props.offIcon || /*#__PURE__*/React.createElement(StarIcon, offIconProps)
};
var content = IconUtils.getJSXIcon(icon.type, active ? _objectSpread$x({}, onIconProps) : _objectSpread$x({}, offIconProps), {
props: props
});
var itemProps = mergeProps({
className: cx('item', {
active: active,
focusedOptionIndex: focusedOptionIndex,
isFocusVisibleItem: isFocusVisibleItem,
value: value
}),
'data-p-focused': value === focusedOptionIndex,
tabIndex: tabIndex,
onClick: function onClick(e) {
return rate(e, value);
},
onKeyDown: function onKeyDown(e) {
return onStarKeyDown(e, value);
},
onFocus: function onFocus(e) {
return _onFocus(e, value);
},
onBlur: function onBlur(e) {
return _onBlur();
}
}, getPTOptions(props.value, 'item'));
return /*#__PURE__*/React.createElement("div", _extends({}, itemProps, {
key: value
}), content);
});
};
var createCancelIcon = function createCancelIcon() {
if (props.cancel) {
var cancelIconProps = mergeProps({
className: cx('cancelIcon')
}, ptm('cancelIcon'));
var icon = props.cancelIcon || /*#__PURE__*/React.createElement(BanIcon, cancelIconProps);
var content = IconUtils.getJSXIcon(icon, _objectSpread$x(_objectSpread$x({}, cancelIconProps), props.cancelIconProps), {
props: props
});
var cancelItemProps = mergeProps({
className: cx('cancelItem'),
onClick: clear,
tabIndex: tabIndex,
onKeyDown: onCancelKeyDown
}, ptm('cancelItem'));
return /*#__PURE__*/React.createElement("div", cancelItemProps, content);
}
return null;
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var rootProps = mergeProps({
ref: elementRef,
id: props.id,
className: classNames(props.className, cx('root')),
style: props.style
}, RatingBase.getOtherProps(props), ptm('root'));
var cancelIcon = createCancelIcon();
var icons = createIcons();
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, cancelIcon, icons), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip,
pt: ptm('tooltip')
}, props.tooltipOptions)));
}));
Rating.displayName = 'Rating';
var Row = function Row(inProps) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = RowBase.getProps(inProps, context);
//@todo Pass Parent MetaData
var _RowBase$setMetaData = RowBase.setMetaData({
props: props
}),
ptm = _RowBase$setMetaData.ptm;
var rootProps = mergeProps({
className: props.className,
style: props.style
}, RowBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("tr", rootProps, props.children);
};
Row.displayName = 'Row';
var ScrollPanelBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'ScrollPanel',
id: null,
style: null,
className: null,
children: undefined,
step: 5
},
css: {
classes: {
root: 'p-scrollpanel p-component',
wrapper: 'p-scrollpanel-wrapper',
content: 'p-scrollpanel-content',
barx: 'p-scrollpanel-bar p-scrollpanel-bar-x',
bary: 'p-scrollpanel-bar p-scrollpanel-bar-y'
},
styles: "\n @layer primereact {\n .p-scrollpanel-wrapper {\n overflow: hidden;\n width: 100%;\n height: 100%;\n position: relative;\n z-index: 1;\n float: left;\n }\n\n .p-scrollpanel-content {\n height: calc(100% + 18px);\n width: calc(100% + 18px);\n padding: 0 18px 18px 0;\n position: relative;\n overflow: auto;\n box-sizing: border-box;\n }\n\n .p-scrollpanel-bar {\n position: relative;\n background: #c1c1c1;\n border-radius: 3px;\n z-index: 2;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.25s linear;\n }\n\n .p-scrollpanel-bar-y {\n width: 9px;\n top: 0;\n }\n\n .p-scrollpanel-bar-x {\n height: 9px;\n bottom: 0;\n }\n\n .p-scrollpanel-hidden {\n visibility: hidden;\n }\n\n .p-scrollpanel:hover .p-scrollpanel-bar,\n .p-scrollpanel:active .p-scrollpanel-bar {\n opacity: 1;\n }\n\n .p-scrollpanel-grabbed {\n user-select: none;\n }\n }\n "
}
});
var ScrollPanel = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = ScrollPanelBase.getProps(inProps, context);
var _React$useState = React.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var _React$useState3 = React.useState('vertical'),
_React$useState4 = _slicedToArray(_React$useState3, 2),
orientationState = _React$useState4[0],
setOrientationState = _React$useState4[1];
var _ScrollPanelBase$setM = ScrollPanelBase.setMetaData({
props: props
}),
ptm = _ScrollPanelBase$setM.ptm,
cx = _ScrollPanelBase$setM.cx,
isUnstyled = _ScrollPanelBase$setM.isUnstyled;
useHandleStyle(ScrollPanelBase.css.styles, isUnstyled, {
name: 'scrollpanel'
});
var containerRef = React.useRef(null);
var contentRef = React.useRef(null);
var xBarRef = React.useRef(null);
var yBarRef = React.useRef(null);
var _React$useState5 = React.useState(0),
_React$useState6 = _slicedToArray(_React$useState5, 2),
lastScrollLeft = _React$useState6[0],
setLastScrollLeft = _React$useState6[1];
var _React$useState7 = React.useState(0),
_React$useState8 = _slicedToArray(_React$useState7, 2),
lastScrollTop = _React$useState8[0],
setLastScrollTop = _React$useState8[1];
var isXBarClicked = React.useRef(false);
var isYBarClicked = React.useRef(false);
var lastPageX = React.useRef(null);
var lastPageY = React.useRef(null);
var scrollXRatio = React.useRef(null);
var scrollYRatio = React.useRef(null);
var frame = React.useRef(null);
var initialized = React.useRef(false);
var timer = React.useRef(null);
var contentId = idState + '_content';
var calculateContainerHeight = function calculateContainerHeight() {
var containerStyles = getComputedStyle(containerRef.current);
var xBarStyles = getComputedStyle(xBarRef.current);
var pureContainerHeight = DomHandler.getHeight(containerRef.current) - parseInt(xBarStyles.height, 10);
if (containerStyles['max-height'] !== 'none' && pureContainerHeight === 0) {
if (contentRef.current.offsetHeight + parseInt(xBarStyles.height, 10) > parseInt(containerStyles['max-height'], 10)) {
containerRef.current.style.height = containerStyles['max-height'];
} else {
containerRef.current.style.height = contentRef.current.offsetHeight + parseFloat(containerStyles.paddingTop) + parseFloat(containerStyles.paddingBottom) + parseFloat(containerStyles.borderTopWidth) + parseFloat(containerStyles.borderBottomWidth) + 'px';
}
}
};
var moveBar = function moveBar() {
if (!contentRef.current) return;
// horizontal scroll
var totalWidth = contentRef.current.scrollWidth;
var ownWidth = contentRef.current.clientWidth;
var bottom = (containerRef.current.clientHeight - xBarRef.current.clientHeight) * -1;
scrollXRatio.current = ownWidth / totalWidth;
// vertical scroll
var totalHeight = contentRef.current.scrollHeight;
var ownHeight = contentRef.current.clientHeight;
var right = (containerRef.current.clientWidth - yBarRef.current.clientWidth) * -1;
scrollYRatio.current = ownHeight / totalHeight;
frame.current = window.requestAnimationFrame(function () {
if (scrollXRatio.current >= 1) {
DomHandler.addClass(xBarRef.current, 'p-scrollpanel-hidden');
} else {
DomHandler.removeClass(xBarRef.current, 'p-scrollpanel-hidden');
DomHandler.applyStyle(xBarRef.current, {
width: Math.max(scrollXRatio.current * 100, 10) + '%',
left: contentRef.current.scrollLeft / totalWidth * 100 + '%',
bottom: bottom + 'px'
});
}
if (scrollYRatio.current >= 1) {
DomHandler.addClass(yBarRef.current, 'p-scrollpanel-hidden');
} else {
DomHandler.removeClass(yBarRef.current, 'p-scrollpanel-hidden');
DomHandler.applyStyle(yBarRef.current, {
height: Math.max(scrollYRatio.current * 100, 10) + '%',
top: 'calc(' + contentRef.current.scrollTop / totalHeight * 100 + '% - ' + xBarRef.current.clientHeight + 'px)',
right: right + 'px'
});
}
});
};
var onFocus = function onFocus(event) {
if (xBarRef.current.isSameNode(event.target)) {
setOrientationState('horizontal');
} else if (yBarRef.current.isSameNode(event.target)) {
setOrientationState('vertical');
}
};
var onBlur = function onBlur() {
if (orientationState === 'horizontal') {
setOrientationState('vertical');
}
};
var onScroll = function onScroll(event) {
if (lastScrollLeft !== event.target.scrollLeft) {
setLastScrollLeft(event.target.scrollLeft);
setOrientationState('horizontal');
} else if (lastScrollTop !== event.target.scrollTop) {
setLastScrollTop(event.target.scrollTop);
setOrientationState('vertical');
}
moveBar();
};
var onYBarMouseDown = function onYBarMouseDown(event) {
isYBarClicked.current = true;
lastPageY.current = event.pageY;
DomHandler.addClass(yBarRef.current, 'p-scrollpanel-grabbed');
DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
document.addEventListener('mousemove', onDocumentMouseMove);
document.addEventListener('mouseup', _onDocumentMouseUp);
event.preventDefault();
};
var onXBarMouseDown = function onXBarMouseDown(event) {
isXBarClicked.current = true;
lastPageX.current = event.pageX;
DomHandler.addClass(xBarRef.current, 'p-scrollpanel-grabbed');
DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
document.addEventListener('mousemove', onDocumentMouseMove);
document.addEventListener('mouseup', _onDocumentMouseUp);
event.preventDefault();
};
var onDocumentMouseMove = function onDocumentMouseMove(event) {
if (isXBarClicked.current) {
onMouseMoveForXBar(event);
} else if (isYBarClicked.current) {
onMouseMoveForYBar(event);
} else {
onMouseMoveForXBar(event);
onMouseMoveForYBar(event);
}
};
var onMouseMoveForXBar = function onMouseMoveForXBar(event) {
var deltaX = event.pageX - lastPageX.current;
lastPageX.current = event.pageX;
frame.current = window.requestAnimationFrame(function () {
contentRef.current.scrollLeft += deltaX / scrollXRatio.current;
});
};
var onMouseMoveForYBar = function onMouseMoveForYBar(event) {
var deltaY = event.pageY - lastPageY.current;
lastPageY.current = event.pageY;
frame.current = window.requestAnimationFrame(function () {
contentRef.current.scrollTop += deltaY / scrollYRatio.current;
});
};
var _onDocumentMouseUp = function onDocumentMouseUp(event) {
DomHandler.removeClass(yBarRef.current, 'p-scrollpanel-grabbed');
DomHandler.removeClass(xBarRef.current, 'p-scrollpanel-grabbed');
DomHandler.removeClass(document.body, 'p-scrollpanel-grabbed');
document.removeEventListener('mousemove', onDocumentMouseMove);
document.removeEventListener('mouseup', _onDocumentMouseUp);
isXBarClicked.current = false;
isYBarClicked.current = false;
};
var onKeyDown = function onKeyDown(event) {
if (orientationState === 'vertical') {
switch (event.code) {
case 'ArrowDown':
{
setTimer('scrollTop', props.step);
event.preventDefault();
break;
}
case 'ArrowUp':
{
setTimer('scrollTop', props.step * -1);
event.preventDefault();
break;
}
case 'ArrowLeft':
case 'ArrowRight':
{
event.preventDefault();
break;
}
}
} else if (orientationState === 'horizontal') {
switch (event.code) {
case 'ArrowRight':
{
setTimer('scrollLeft', props.step);
event.preventDefault();
break;
}
case 'ArrowLeft':
{
setTimer('scrollLeft', props.step * -1);
event.preventDefault();
break;
}
case 'ArrowDown':
case 'ArrowUp':
{
event.preventDefault();
break;
}
}
}
};
var onKeyUp = function onKeyUp() {
clearTimer();
};
var repeat = function repeat(bar, step) {
contentRef.current[bar] += step;
moveBar();
};
var setTimer = function setTimer(bar, step) {
clearTimer();
timer.current = setTimeout(function () {
repeat(bar, step);
}, 40);
};
var clearTimer = function clearTimer() {
if (timer.current) {
clearTimeout(timer.current);
}
};
var refresh = function refresh() {
moveBar();
};
useMountEffect(function () {
if (!props.id) {
setIdState(UniqueComponentId());
}
moveBar();
window.addEventListener('resize', moveBar);
calculateContainerHeight();
initialized.current = true;
});
useUnmountEffect(function () {
if (initialized.current) {
window.removeEventListener('resize', moveBar);
}
if (frame.current) {
window.cancelAnimationFrame(frame.current);
}
});
React.useImperativeHandle(ref, function () {
return {
props: props,
refresh: refresh,
getElement: function getElement() {
return containerRef.current;
},
getContent: function getContent() {
return contentRef.current;
},
getXBar: function getXBar() {
return xBarRef.current;
},
getYBar: function getYBar() {
return yBarRef.current;
}
};
});
var rootProps = mergeProps({
id: props.id,
ref: containerRef,
style: props.style,
className: classNames(props.className, cx('root'))
}, ScrollPanelBase.getOtherProps(props), ptm('root'));
var wrapperProps = mergeProps({
className: cx('wrapper')
}, ptm('wrapper'));
var contentProps = mergeProps({
className: cx('content'),
onScroll: onScroll,
onMouseEnter: moveBar
}, ptm('content'));
var barXProps = mergeProps({
ref: xBarRef,
role: 'scrollbar',
className: cx('barx'),
tabIndex: 0,
'aria-valuenow': lastScrollTop,
'aria-controls': contentId,
'aria-orientation': 'horizontal',
onFocus: onFocus,
onBlur: onBlur,
onKeyDown: onKeyDown,
onKeyUp: onKeyUp,
onMouseDown: onXBarMouseDown
}, ptm('barx'));
var barYProps = mergeProps({
ref: yBarRef,
role: 'scrollbar',
className: cx('bary'),
tabIndex: 0,
'aria-valuenow': lastScrollLeft,
'aria-controls': contentId,
'aria-orientation': 'vertical',
onFocus: onFocus,
onBlur: onBlur,
onKeyDown: onKeyDown,
onKeyUp: onKeyUp,
onMouseDown: onYBarMouseDown
}, ptm('bary'));
return /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement("div", wrapperProps, /*#__PURE__*/React.createElement("div", _extends({
ref: contentRef
}, contentProps), props.children)), /*#__PURE__*/React.createElement("div", barXProps), /*#__PURE__*/React.createElement("div", barYProps));
});
ScrollPanel.displayName = 'ScrollPanel';
var classes$l = {
root: function root(_ref) {
var props = _ref.props;
return classNames('p-scrolltop p-link p-component', {
'p-scrolltop-sticky': props.target !== 'window'
});
},
icon: 'p-scrolltop-icon',
transition: 'p-scrolltop'
};
var styles$g = "\n@layer primereact {\n .p-scrolltop {\n position: fixed;\n bottom: 20px;\n right: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .p-scrolltop-sticky {\n position: sticky;\n }\n \n .p-scrolltop-sticky.p-link {\n margin-left: auto;\n }\n \n .p-scrolltop-helper {\n display: none;\n }\n \n .p-scrolltop-enter {\n opacity: 0;\n }\n \n .p-scrolltop-enter-active {\n opacity: 1;\n transition: opacity .15s;\n }\n \n .p-scrolltop-exit {\n opacity: 1;\n }\n \n .p-scrolltop-exit-active {\n opacity: 0;\n transition: opacity .15s;\n }\n}\n";
var ScrollTopBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'ScrollTop',
target: 'window',
threshold: 400,
icon: null,
behavior: 'smooth',
className: null,
style: null,
transitionOptions: null,
onShow: null,
onHide: null,
children: undefined
},
css: {
classes: classes$l,
styles: styles$g
}
});
function ownKeys$w(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$w(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$w(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$w(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var ScrollTop = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
visibleState = _React$useState2[0],
setVisibleState = _React$useState2[1];
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = ScrollTopBase.getProps(inProps, context);
var _ScrollTopBase$setMet = ScrollTopBase.setMetaData({
props: props,
state: {
visible: visibleState
}
}),
ptm = _ScrollTopBase$setMet.ptm,
cx = _ScrollTopBase$setMet.cx,
isUnstyled = _ScrollTopBase$setMet.isUnstyled;
useHandleStyle(ScrollTopBase.css.styles, isUnstyled, {
name: 'scrolltop'
});
var scrollElementRef = React.useRef(null);
var helperRef = React.useRef(null);
var isTargetParent = props.target === 'parent';
var _useEventListener = useEventListener({
target: function target() {
return helperRef.current && helperRef.current.parentElement;
},
type: 'scroll',
listener: function listener(event) {
checkVisibility(event.currentTarget.scrollTop);
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 1),
bindParentScrollListener = _useEventListener2[0];
var _useEventListener3 = useEventListener({
target: 'window',
type: 'scroll',
listener: function listener(event) {
event && checkVisibility(DomHandler.getWindowScrollTop());
}
}),
_useEventListener4 = _slicedToArray(_useEventListener3, 1),
bindDocumentScrollListener = _useEventListener4[0];
var onClick = function onClick() {
var scrollElement = props.target === 'window' ? window : helperRef.current.parentElement;
scrollElement.scroll({
top: 0,
behavior: props.behavior
});
};
var checkVisibility = function checkVisibility(scrollY) {
setVisibleState(scrollY > props.threshold);
};
var onEnter = function onEnter() {
ZIndexUtils.set('overlay', scrollElementRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, context && context.zIndex.overlay || PrimeReact.zIndex.overlay);
};
var onEntered = function onEntered() {
props.onShow && props.onShow();
};
var onExited = function onExited() {
ZIndexUtils.clear(scrollElementRef.current);
props.onHide && props.onHide();
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
React.useEffect(function () {
if (props.target === 'window') {
bindDocumentScrollListener();
} else if (props.target === 'parent') {
bindParentScrollListener();
}
}, []); // eslint-disable-line react-hooks/exhaustive-deps
useUnmountEffect(function () {
ZIndexUtils.clear(scrollElementRef.current);
});
var iconProps = mergeProps({
className: cx('icon')
}, ptm('icon'));
var icon = props.icon || /*#__PURE__*/React.createElement(ChevronUpIcon, iconProps);
var scrollIcon = IconUtils.getJSXIcon(icon, _objectSpread$w({}, iconProps), {
props: props
});
var scrollTopAriaLabel = localeOption('aria') ? localeOption('aria').scrollTop : undefined;
var rootProps = mergeProps({
ref: scrollElementRef,
type: 'button',
className: classNames(props.className, cx('root')),
style: props.style,
onClick: onClick,
'aria-label': scrollTopAriaLabel
}, ScrollTopBase.getOtherProps(props), ptm('root'));
var transitionProps = mergeProps({
classNames: cx('transition'),
"in": visibleState,
timeout: {
enter: 150,
exit: 150
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: onEnter,
onEntered: onEntered,
onExited: onExited
}, ptm('transition'));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: scrollElementRef
}, transitionProps), /*#__PURE__*/React.createElement("button", rootProps, scrollIcon, /*#__PURE__*/React.createElement(Ripple, null))), isTargetParent && /*#__PURE__*/React.createElement("span", {
ref: helperRef,
className: "p-scrolltop-helper"
}));
}));
ScrollTop.displayName = 'ScrollTop';
var classes$k = {
root: function root(_ref) {
var props = _ref.props;
return classNames('p-selectbutton p-button-group p-component', {
'p-invalid': props.invalid
});
},
button: function button(_ref2) {
var props = _ref2.itemProps,
focusedState = _ref2.focusedState;
return classNames('p-button p-component', {
'p-highlight': props.selected,
'p-disabled': props.disabled,
'p-focus': focusedState
});
},
label: 'p-button-label p-c'
};
var SelectButtonBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'SelectButton',
id: null,
value: null,
options: null,
optionLabel: null,
optionValue: null,
optionDisabled: null,
tabIndex: null,
multiple: false,
invalid: false,
unselectable: true,
allowEmpty: true,
disabled: false,
style: null,
className: null,
dataKey: null,
tooltip: null,
tooltipOptions: null,
itemTemplate: null,
onChange: null,
children: undefined
},
css: {
classes: classes$k
}
});
var SelectButtonItem = /*#__PURE__*/React.memo(function (props) {
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var mergeProps = useMergeProps();
var ptm = props.ptm,
cx = props.cx;
var getPTOptions = function getPTOptions(key) {
return ptm(key, {
hostName: props.hostName,
context: {
selected: props.selected,
disabled: props.disabled,
option: props.option
}
});
};
var _onClick = function onClick(event, index) {
props.setFocusedIndex(index);
if (props.onClick) {
props.onClick({
originalEvent: event,
option: props.option
});
}
};
var onFocus = function onFocus() {
setFocusedState(true);
};
var onBlur = function onBlur() {
setFocusedState(false);
};
var _onKeyDown = function onKeyDown(event, index) {
switch (event.code) {
case 'Space':
{
_onClick(event, index);
event.preventDefault();
break;
}
case 'ArrowDown':
case 'ArrowRight':
{
changeTabIndexes(event, 'next');
event.preventDefault();
break;
}
case 'ArrowUp':
case 'ArrowLeft':
{
changeTabIndexes(event, 'prev');
event.preventDefault();
break;
}
}
};
var changeTabIndexes = function changeTabIndexes(event, direction) {
var firstTabableChild;
var index;
for (var i = 0; i <= props.elementRef.current.children.length - 1; i++) {
if (props.elementRef.current.children[i].getAttribute('tabindex') === '0') {
firstTabableChild = {
elem: props.elementRef.current.children[i],
index: i
};
}
}
if (direction === 'prev') {
if (firstTabableChild.index === 0) {
index = props.elementRef.current.children.length - 1;
} else {
index = firstTabableChild.index - 1;
}
} else if (firstTabableChild.index === props.elementRef.current.children.length - 1) {
index = 0;
} else {
index = firstTabableChild.index + 1;
}
props.setFocusedIndex(index);
props.elementRef.current.children[index].focus();
};
var createContent = function createContent() {
var labelProps = mergeProps({
className: cx('label')
}, getPTOptions('label'));
return props.template ? ObjectUtils.getJSXElement(props.template, props.option) : /*#__PURE__*/React.createElement("span", labelProps, props.label);
};
var content = createContent();
var buttonProps = mergeProps({
className: classNames(props.className, cx('button', {
itemProps: props,
focusedState: focusedState
})),
role: 'button',
'aria-label': props.label,
'aria-pressed': props.selected,
onClick: function onClick(event) {
return _onClick(event, props.index);
},
onKeyDown: function onKeyDown(event) {
return _onKeyDown(event, props.index);
},
tabIndex: props.tabIndex,
'aria-disabled': props.disabled,
onFocus: onFocus,
onBlur: onBlur
}, getPTOptions('button'));
return /*#__PURE__*/React.createElement("div", buttonProps, content, !props.disabled && /*#__PURE__*/React.createElement(Ripple, null));
});
SelectButtonItem.displayName = 'SelectButtonItem';
var SelectButton = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = SelectButtonBase.getProps(inProps, context);
var _React$useState = React.useState(0),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedIndex = _React$useState2[0],
setFocusedIndex = _React$useState2[1];
var elementRef = React.useRef(null);
var _SelectButtonBase$set = SelectButtonBase.setMetaData({
props: props
}),
ptm = _SelectButtonBase$set.ptm,
cx = _SelectButtonBase$set.cx,
isUnstyled = _SelectButtonBase$set.isUnstyled;
useHandleStyle(SelectButtonBase.css.styles, isUnstyled, {
name: 'selectbutton',
styled: true
});
var onOptionClick = function onOptionClick(event) {
if (props.disabled || isOptionDisabled(event.option)) {
return;
}
var selected = isSelected(event.option);
if (selected && !(props.unselectable && props.allowEmpty)) {
return;
}
var optionValue = getOptionValue(event.option);
var newValue;
if (props.multiple) {
var currentValue = props.value ? _toConsumableArray(props.value) : [];
newValue = selected ? currentValue.filter(function (val) {
return !ObjectUtils.equals(val, optionValue, props.dataKey);
}) : [].concat(_toConsumableArray(currentValue), [optionValue]);
} else {
newValue = selected ? null : optionValue;
}
if (props.onChange) {
props.onChange({
originalEvent: event.originalEvent,
value: newValue,
stopPropagation: function stopPropagation() {
event.originalEvent.stopPropagation();
},
preventDefault: function preventDefault() {
event.originalEvent.preventDefault();
},
target: {
name: props.name,
id: props.id,
value: newValue
}
});
}
};
var getOptionLabel = function getOptionLabel(option) {
return props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option && option.label !== undefined ? option.label : option;
};
var getOptionValue = function getOptionValue(option) {
return props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option && option.value !== undefined ? option.value : option;
};
var isOptionDisabled = function isOptionDisabled(option) {
if (props.optionDisabled) {
return ObjectUtils.isFunction(props.optionDisabled) ? props.optionDisabled(option) : ObjectUtils.resolveFieldData(option, props.optionDisabled);
}
return option && option.disabled !== undefined ? option.disabled : false;
};
var isSelected = function isSelected(option) {
var optionValue = getOptionValue(option);
if (props.multiple) {
if (props.value && props.value.length) {
return props.value.some(function (val) {
return ObjectUtils.equals(val, optionValue, props.dataKey);
});
}
} else {
return ObjectUtils.equals(props.value, optionValue, props.dataKey);
}
return false;
};
var createItems = function createItems() {
if (props.options && props.options.length) {
return props.options.map(function (option, index) {
var isDisabled = props.disabled || isOptionDisabled(option);
var optionLabel = getOptionLabel(option);
var tabIndex = props.disabled || index !== focusedIndex ? '-1' : '0';
var selected = isSelected(option);
var key = optionLabel + '_' + index;
return /*#__PURE__*/React.createElement(SelectButtonItem, {
hostName: "SelectButton",
key: key,
label: optionLabel,
className: option.className,
option: option,
setFocusedIndex: setFocusedIndex,
onClick: onOptionClick,
template: props.itemTemplate,
selected: selected,
tabIndex: tabIndex,
index: index,
disabled: isDisabled,
ptm: ptm,
cx: cx,
elementRef: elementRef
});
});
}
return null;
};
React.useImperativeHandle(ref, function () {
return {
props: props,
focus: function focus() {
return DomHandler.focusFirstElement(elementRef.current);
},
getElement: function getElement() {
return elementRef.current;
}
};
});
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var items = createItems();
var rootProps = mergeProps({
ref: elementRef,
id: props.id,
className: classNames(props.className, cx('root')),
style: props.style,
role: 'group'
}, SelectButtonBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, items, props.children), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip,
pt: ptm('tooltip')
}, props.tooltipOptions)));
}));
SelectButton.displayName = 'SelectButton';
var classes$j = {
closeButton: 'p-sidebar-close p-sidebar-icon p-link',
closeIcon: 'p-sidebar-close-icon',
mask: function mask(_ref) {
var props = _ref.props,
maskVisibleState = _ref.maskVisibleState;
var positions = ['left', 'right', 'top', 'bottom'];
var pos = positions.find(function (item) {
return item === props.position;
});
return classNames('p-sidebar-mask', pos && !props.fullScreen ? "p-sidebar-".concat(pos) : '', {
'p-component-overlay p-component-overlay-enter': props.modal,
'p-sidebar-mask-scrollblocker': props.blockScroll,
'p-sidebar-visible': maskVisibleState,
'p-sidebar-full': props.fullScreen
}, props.maskClassName);
},
header: function header(_ref2) {
var props = _ref2.props;
return classNames('p-sidebar-header', {
'p-sidebar-custom-header': props.header
});
},
content: 'p-sidebar-content',
icons: 'p-sidebar-icons',
root: function root(_ref3) {
_ref3.props;
var context = _ref3.context;
return classNames('p-sidebar p-component', {
'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
});
},
transition: 'p-sidebar'
};
var styles$f = "\n@layer primereact {\n .p-sidebar-mask {\n display: none;\n justify-content: center;\n align-items: center;\n pointer-events: none;\n background-color: transparent;\n transition-property: background-color;\n }\n \n .p-sidebar-visible {\n display: flex;\n }\n \n .p-sidebar-mask.p-component-overlay {\n pointer-events: auto;\n }\n \n .p-sidebar {\n display: flex;\n flex-direction: column;\n pointer-events: auto;\n transform: translate3d(0px, 0px, 0px);\n position: relative;\n }\n \n .p-sidebar-content {\n overflow-y: auto;\n flex-grow: 1;\n }\n \n .p-sidebar-header {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n }\n \n .p-sidebar-custom-header {\n justify-content: space-between;\n }\n \n .p-sidebar-icons {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n }\n \n .p-sidebar-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n }\n \n .p-sidebar-full .p-sidebar {\n transition: none;\n transform: none;\n width: 100vw;\n height: 100vh;\n max-height: 100%;\n top: 0px;\n left: 0px;\n }\n \n /* Animation */\n /* Top, Bottom, Left and Right */\n .p-sidebar-top .p-sidebar-enter,\n .p-sidebar-top .p-sidebar-exit-active {\n transform: translate3d(0px, -100%, 0px);\n }\n \n .p-sidebar-bottom .p-sidebar-enter,\n .p-sidebar-bottom .p-sidebar-exit-active {\n transform: translate3d(0px, 100%, 0px);\n }\n \n .p-sidebar-left .p-sidebar-enter,\n .p-sidebar-left .p-sidebar-exit-active {\n transform: translate3d(-100%, 0px, 0px);\n }\n \n .p-sidebar-right .p-sidebar-enter,\n .p-sidebar-right .p-sidebar-exit-active {\n transform: translate3d(100%, 0px, 0px);\n }\n \n .p-sidebar-top .p-sidebar-enter-active,\n .p-sidebar-bottom .p-sidebar-enter-active,\n .p-sidebar-left .p-sidebar-enter-active,\n .p-sidebar-right .p-sidebar-enter-active {\n transform: translate3d(0px, 0px, 0px);\n transition: all 0.3s;\n }\n \n .p-sidebar-top .p-sidebar-enter-done,\n .p-sidebar-bottom .p-sidebar-enter-done,\n .p-sidebar-left .p-sidebar-enter-done,\n .p-sidebar-right .p-sidebar-enter-done {\n transform: none;\n }\n \n .p-sidebar-top .p-sidebar-exit-active,\n .p-sidebar-bottom .p-sidebar-exit-active,\n .p-sidebar-left .p-sidebar-exit-active,\n .p-sidebar-right .p-sidebar-exit-active {\n transition: all 0.3s;\n }\n \n /* Full */\n .p-sidebar-full .p-sidebar-enter {\n opacity: 0;\n transform: scale(0.5);\n }\n \n .p-sidebar-full .p-sidebar-enter-active {\n opacity: 1;\n transform: scale(1);\n transition: all 0.15s cubic-bezier(0, 0, 0.2, 1);\n }\n \n .p-sidebar-full .p-sidebar-enter-done {\n transform: none;\n }\n \n .p-sidebar-full .p-sidebar-exit-active {\n opacity: 0;\n transform: scale(0.5);\n transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n }\n \n /* Size */\n .p-sidebar-left .p-sidebar {\n width: 20rem;\n height: 100%;\n }\n \n .p-sidebar-right .p-sidebar {\n width: 20rem;\n height: 100%;\n }\n \n .p-sidebar-top .p-sidebar {\n height: 10rem;\n width: 100%;\n }\n \n .p-sidebar-bottom .p-sidebar {\n height: 10rem;\n width: 100%;\n }\n \n .p-sidebar-left .p-sidebar-sm,\n .p-sidebar-right .p-sidebar-sm {\n width: 20rem;\n }\n \n .p-sidebar-left .p-sidebar-md,\n .p-sidebar-right .p-sidebar-md {\n width: 40rem;\n }\n \n .p-sidebar-left .p-sidebar-lg,\n .p-sidebar-right .p-sidebar-lg {\n width: 60rem;\n }\n \n .p-sidebar-top .p-sidebar-sm,\n .p-sidebar-bottom .p-sidebar-sm {\n height: 10rem;\n }\n \n .p-sidebar-top .p-sidebar-md,\n .p-sidebar-bottom .p-sidebar-md {\n height: 20rem;\n }\n \n .p-sidebar-top .p-sidebar-lg,\n .p-sidebar-bottom .p-sidebar-lg {\n height: 30rem;\n }\n \n .p-sidebar-left .p-sidebar-view,\n .p-sidebar-right .p-sidebar-view,\n .p-sidebar-top .p-sidebar-view,\n .p-sidebar-bottom .p-sidebar-view {\n width: 100%;\n height: 100%;\n }\n \n .p-sidebar-left .p-sidebar-content,\n .p-sidebar-right .p-sidebar-content,\n .p-sidebar-top .p-sidebar-content,\n .p-sidebar-bottom .p-sidebar-content {\n width: 100%;\n height: 100%;\n }\n \n @media screen and (max-width: 64em) {\n .p-sidebar-left .p-sidebar-lg,\n .p-sidebar-left .p-sidebar-md,\n .p-sidebar-right .p-sidebar-lg,\n .p-sidebar-right .p-sidebar-md {\n width: 20rem;\n }\n } \n}\n";
var inlineStyles$7 = {
mask: function mask(_ref4) {
var props = _ref4.props;
return {
position: 'fixed',
height: '100%',
width: '100%',
left: 0,
top: 0,
display: 'flex',
justifyContent: props.position === 'left' ? 'flex-start' : props.position === 'right' ? 'flex-end' : 'center',
alignItems: props.position === 'top' ? 'flex-start' : props.position === 'bottom' ? 'flex-end' : 'center'
};
}
};
var SidebarBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Sidebar',
appendTo: null,
ariaCloseLabel: null,
baseZIndex: 0,
blockScroll: false,
children: undefined,
className: null,
closeIcon: null,
closeOnEscape: true,
content: null,
dismissable: true,
fullScreen: false,
header: null,
icons: null,
id: null,
maskClassName: null,
maskStyle: null,
modal: true,
onHide: null,
onShow: null,
position: 'left',
showCloseIcon: true,
style: null,
transitionOptions: null,
visible: false
},
css: {
classes: classes$j,
styles: styles$f,
inlineStyles: inlineStyles$7
}
});
function ownKeys$v(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$v(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$v(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$v(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Sidebar = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = SidebarBase.getProps(inProps, context);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
maskVisibleState = _React$useState2[0],
setMaskVisibleState = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
visibleState = _React$useState4[0],
setVisibleState = _React$useState4[1];
var _SidebarBase$setMetaD = SidebarBase.setMetaData({
props: props,
state: {
containerVisible: maskVisibleState
}
}),
ptm = _SidebarBase$setMetaD.ptm,
cx = _SidebarBase$setMetaD.cx,
sx = _SidebarBase$setMetaD.sx,
isUnstyled = _SidebarBase$setMetaD.isUnstyled;
useHandleStyle(SidebarBase.css.styles, isUnstyled, {
name: 'sidebar'
});
var sidebarRef = React.useRef(null);
var maskRef = React.useRef(null);
var closeIconRef = React.useRef(null);
var isCloseOnEscape = visibleState && props.closeOnEscape;
var sidebarDisplayOrder = useDisplayOrder('sidebar', isCloseOnEscape);
useGlobalOnEscapeKey({
callback: function callback(event) {
onClose(event);
},
when: isCloseOnEscape && sidebarDisplayOrder,
priority: [ESC_KEY_HANDLING_PRIORITIES.SIDEBAR, sidebarDisplayOrder]
});
var _useEventListener = useEventListener({
type: 'click',
listener: function listener(event) {
if (event.button !== 0) {
// ignore anything other than left click
return;
}
if (isOutsideClicked(event)) {
onClose(event);
}
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentClickListener = _useEventListener2[0],
unbindDocumentClickListener = _useEventListener2[1];
var isOutsideClicked = function isOutsideClicked(event) {
return sidebarRef && sidebarRef.current && !sidebarRef.current.contains(event.target);
};
var focus = function focus() {
var activeElement = document.activeElement;
var isActiveElementInDialog = activeElement && sidebarRef && sidebarRef.current.contains(activeElement);
if (!isActiveElementInDialog && props.showCloseIcon && closeIconRef.current) {
closeIconRef.current.focus();
}
};
var onMaskClick = function onMaskClick(event) {
if (props.dismissable && props.modal && maskRef.current === event.target) {
onClose(event);
}
};
var onClose = function onClose(event) {
props.onHide();
event.preventDefault();
};
var onEntered = function onEntered() {
props.onShow && props.onShow();
focus();
enableDocumentSettings();
};
var onExiting = function onExiting() {
if (props.modal) {
!isUnstyled() && DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
}
};
var onExited = function onExited() {
ZIndexUtils.clear(maskRef.current);
setMaskVisibleState(false);
disableDocumentSettings();
};
var enableDocumentSettings = function enableDocumentSettings() {
if (props.dismissable && !props.modal) {
bindDocumentClickListener();
}
if (props.blockScroll) {
DomHandler.blockBodyScroll();
}
};
var disableDocumentSettings = function disableDocumentSettings() {
unbindDocumentClickListener();
if (props.blockScroll) {
DomHandler.unblockBodyScroll();
}
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return sidebarRef.current;
},
getMask: function getMask() {
return maskRef.current;
},
getCloseIcon: function getCloseIcon() {
return closeIconRef.current;
}
};
});
useMountEffect(function () {
if (props.visible) {
setMaskVisibleState(true);
}
});
useUpdateEffect(function () {
if (props.visible && !maskVisibleState) {
setMaskVisibleState(true);
}
if (props.visible !== visibleState && maskVisibleState) {
setVisibleState(props.visible);
}
}, [props.visible, maskVisibleState, visibleState]);
useUpdateEffect(function () {
if (maskVisibleState) {
ZIndexUtils.set('modal', maskRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, props.baseZIndex || context && context.zIndex.modal || PrimeReact.zIndex.modal);
setVisibleState(true);
}
}, [maskVisibleState]);
useUpdateEffect(function () {
// #3811 if dismissible state is toggled while open we must unregister and re-regisetr
if (visibleState) {
unbindDocumentClickListener();
if (props.dismissable && !props.modal) {
bindDocumentClickListener();
}
}
}, [props.dismissable, props.modal, visibleState]);
useUnmountEffect(function () {
disableDocumentSettings();
maskRef.current && ZIndexUtils.clear(maskRef.current);
});
var createCloseIcon = function createCloseIcon() {
var closeButtonProps = mergeProps({
type: 'button',
ref: closeIconRef,
className: cx('closeButton'),
onClick: function onClick(e) {
return onClose(e);
},
'aria-label': props.ariaCloseLabel || ariaLabel('close')
}, ptm('closeButton'));
var closeIconProps = mergeProps({
className: cx('closeIcon')
}, ptm('closeIcon'));
var icon = props.closeIcon || /*#__PURE__*/React.createElement(TimesIcon, closeIconProps);
var closeIcon = IconUtils.getJSXIcon(icon, _objectSpread$v({}, closeIconProps), {
props: props
});
if (props.showCloseIcon) {
return /*#__PURE__*/React.createElement("button", closeButtonProps, closeIcon, /*#__PURE__*/React.createElement(Ripple, null));
}
return null;
};
var createHeader = function createHeader() {
return props.header ? ObjectUtils.getJSXElement(props.header, props) : null;
};
var createIcons = function createIcons() {
return props.icons ? ObjectUtils.getJSXElement(props.icons, props) : null;
};
var maskProps = mergeProps({
ref: maskRef,
style: sx('mask'),
className: cx('mask', {
maskVisibleState: maskVisibleState
}),
onMouseDown: function onMouseDown(e) {
return onMaskClick(e);
}
}, ptm('mask'));
var rootProps = mergeProps({
id: props.id,
className: classNames(props.className, cx('root', {
context: context
})),
style: props.style,
role: 'complementary'
}, SidebarBase.getOtherProps(props), ptm('root'));
var headerProps = mergeProps({
className: cx('header')
}, ptm('header'));
var contentProps = mergeProps({
className: cx('content')
}, ptm('content'));
var iconsProps = mergeProps({
className: cx('icons')
}, ptm('icons'));
var transitionTimeout = {
enter: props.fullScreen ? 150 : 300,
exit: props.fullScreen ? 150 : 300
};
var transitionProps = mergeProps({
classNames: cx('transition'),
"in": visibleState,
timeout: transitionTimeout,
options: props.transitionOptions,
unmountOnExit: true,
onEntered: onEntered,
onExiting: onExiting,
onExited: onExited
}, ptm('transition'));
var createTemplateElement = function createTemplateElement() {
var templateElementProps = {
closeIconRef: closeIconRef,
hide: onClose
};
return /*#__PURE__*/React.createElement("div", maskProps, /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: sidebarRef
}, transitionProps), /*#__PURE__*/React.createElement("div", _extends({
ref: sidebarRef
}, rootProps), ObjectUtils.getJSXElement(inProps.content, templateElementProps))));
};
var createElement = function createElement() {
var closeIcon = createCloseIcon();
var icons = createIcons();
var header = createHeader();
return /*#__PURE__*/React.createElement("div", maskProps, /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: sidebarRef
}, transitionProps), /*#__PURE__*/React.createElement("div", _extends({
ref: sidebarRef
}, rootProps), /*#__PURE__*/React.createElement("div", headerProps, header, /*#__PURE__*/React.createElement("div", iconsProps, icons, closeIcon)), /*#__PURE__*/React.createElement("div", contentProps, props.children))));
};
var createSidebar = function createSidebar() {
var element = inProps !== null && inProps !== void 0 && inProps.content ? createTemplateElement() : createElement();
return /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo,
visible: true
});
};
return maskVisibleState && createSidebar();
});
Sidebar.displayName = 'Sidebar';
var classes$i = {
root: function root(_ref) {
var props = _ref.props;
return classNames('p-skeleton p-component', {
'p-skeleton-circle': props.shape === 'circle',
'p-skeleton-none': props.animation === 'none'
});
}
};
var styles$e = "\n@layer primereact {\n .p-skeleton {\n position: relative;\n overflow: hidden;\n }\n \n .p-skeleton::after {\n content: \"\";\n animation: p-skeleton-animation 1.2s infinite;\n height: 100%;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n transform: translateX(-100%);\n z-index: 1;\n }\n \n .p-skeleton-circle {\n border-radius: 50%;\n }\n \n .p-skeleton-none::after {\n animation: none;\n }\n}\n\n@keyframes p-skeleton-animation {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(100%);\n }\n}\n";
var inlineStyles$6 = {
root: {
position: 'relative'
}
};
var SkeletonBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Skeleton',
shape: 'rectangle',
size: null,
width: '100%',
height: '1rem',
borderRadius: null,
animation: 'wave',
style: null,
className: null
},
css: {
classes: classes$i,
inlineStyles: inlineStyles$6,
styles: styles$e
}
});
function ownKeys$u(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$u(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$u(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$u(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Skeleton = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = SkeletonBase.getProps(inProps, context);
var _SkeletonBase$setMeta = SkeletonBase.setMetaData({
props: props
}),
ptm = _SkeletonBase$setMeta.ptm,
cx = _SkeletonBase$setMeta.cx,
sx = _SkeletonBase$setMeta.sx,
isUnstyled = _SkeletonBase$setMeta.isUnstyled;
useHandleStyle(SkeletonBase.css.styles, isUnstyled, {
name: 'skeleton'
});
var elementRef = React.useRef(null);
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var style = props.size ? {
width: props.size,
height: props.size,
borderRadius: props.borderRadius
} : {
width: props.width,
height: props.height,
borderRadius: props.borderRadius
};
var rootProps = mergeProps({
ref: elementRef,
className: classNames(props.className, cx('root')),
style: _objectSpread$u(_objectSpread$u({}, style), sx('root')),
'aria-hidden': true
}, SkeletonBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("div", rootProps);
}));
Skeleton.displayName = 'Skeleton';
var classes$h = {
previousIcon: 'p-slidemenu-backward-icon',
previous: function previous(_ref) {
var levelState = _ref.levelState;
return classNames('p-slidemenu-backward', {
'p-hidden-space': levelState === 0,
'p-slidemenu-separator': levelState > 0
});
},
root: function root(_ref2) {
var props = _ref2.props;
return classNames('p-slidemenu p-component', {
'p-slidemenu-overlay': props.popup
});
},
wrapper: 'p-slidemenu-wrapper',
content: 'p-slidemenu-content',
separator: 'p-slidemenu-separator',
icon: 'p-menuitem-icon',
submenuIcon: 'p-submenu-icon',
label: 'p-menuitem-text',
action: 'p-menuitem-link',
menu: function menu(_ref3) {
var props = _ref3.subProps;
return classNames({
'p-slidemenu-rootlist': props.root,
'p-submenu-list': !props.root,
'p-active-submenu': props.parentActive
});
},
menuitem: function menuitem(_ref4) {
var item = _ref4.item,
active = _ref4.active;
return classNames('p-menuitem', {
'p-menuitem-active': active,
'p-disabled': item.disabled
}, item.className);
},
transition: 'p-connected-overlay'
};
var styles$d = "\n@layer primereact {\n .p-slidemenu {\n width: 12.5em;\n }\n \n .p-slidemenu.p-slidemenu-overlay {\n position: absolute;\n }\n \n .p-slidemenu .p-menu-separator {\n border-width: 1px 0 0 0;\n }\n \n .p-slidemenu ul {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n \n .p-slidemenu .p-slidemenu-rootlist {\n position: absolute;\n top: 0;\n }\n \n .p-slidemenu .p-submenu-list {\n display: none;\n position: absolute;\n top: 0;\n width: 12.5em;\n }\n \n .p-slidemenu .p-menuitem-link {\n cursor: pointer;\n display: flex;\n align-items: center;\n text-decoration: none;\n overflow: hidden;\n }\n \n .p-slidemenu .p-menuitem-icon {\n vertical-align: middle;\n }\n \n .p-slidemenu .p-menuitem-text {\n vertical-align: middle;\n }\n \n .p-slidemenu .p-menuitem {\n position: relative;\n }\n \n .p-slidemenu .p-menuitem-link .p-submenu-icon {\n margin-left: auto;\n }\n \n .p-slidemenu .p-slidemenu-wrapper {\n position: relative;\n }\n \n .p-slidemenu .p-slidemenu-content {\n overflow-x: hidden;\n overflow-y: auto;\n position: relative;\n height: 100%;\n }\n \n .p-slidemenu-backward {\n bottom: 0;\n width: 100%;\n padding: 0.25em;\n cursor: pointer;\n }\n \n .p-slidemenu-backward .p-slidemenu-backward-icon {\n vertical-align: middle;\n }\n \n .p-slidemenu-backward span {\n vertical-align: middle;\n }\n \n .p-slidemenu .p-menuitem-active {\n position: static;\n }\n \n .p-slidemenu .p-menuitem-active > .p-submenu-list {\n display: block;\n }\n}\n";
var inlineStyles$5 = {
menu: function menu(_ref5) {
var props = _ref5.subProps;
return {
width: props.menuWidth + 'px',
left: props.root ? -1 * props.level * props.menuWidth + 'px' : props.menuWidth + 'px',
transitionProperty: props.root ? 'left' : 'none',
transitionDuration: props.effectDuration + 'ms',
transitionTimingFunction: props.easing
};
}
};
var SlideMenuBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'SlideMenu',
appendTo: null,
autoZIndex: true,
backIcon: null,
backLabel: 'Back',
baseZIndex: 0,
className: null,
easing: 'ease-out',
effectDuration: 250,
id: null,
menuWidth: 190,
model: null,
onHide: null,
onShow: null,
onNavigate: null,
popup: false,
style: null,
submenuIcon: null,
transitionOptions: null,
viewportHeight: 175,
children: undefined,
closeOnEscape: true
},
css: {
classes: classes$h,
styles: styles$d,
inlineStyles: inlineStyles$5
}
});
function ownKeys$t(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$t(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$t(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$t(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var SlideMenuSub = /*#__PURE__*/React.memo(function (props) {
var _React$useState = React.useState(null),
_React$useState2 = _slicedToArray(_React$useState, 2),
activeItemState = _React$useState2[0],
setActiveItemState = _React$useState2[1];
var _React$useState3 = React.useState({}),
_React$useState4 = _slicedToArray(_React$useState3, 2),
renderSubMenu = _React$useState4[0],
setRenderSubMenu = _React$useState4[1];
var mergeProps = useMergeProps();
var ptm = props.ptm,
cx = props.cx,
sx = props.sx;
var getPTOptions = function getPTOptions(item, key) {
return ptm(key, {
hostName: props.hostName,
context: {
active: activeItemState === item
}
});
};
var onItemClick = function onItemClick(event, item, index) {
if (item.disabled) {
event.preventDefault();
return;
}
if (item.command) {
item.command({
originalEvent: event,
item: item
});
}
if (item.items) {
var key = createKey(item, index);
setRenderSubMenu(_objectSpread$t(_objectSpread$t({}, renderSubMenu), {}, _defineProperty({}, key, true)));
setActiveItemState(item);
props.onForward();
}
if (!item.url) {
event.preventDefault();
event.stopPropagation();
}
};
var createSeparator = function createSeparator(index) {
var key = props.id + '_sep_' + index;
var separatorProps = mergeProps({
id: key,
className: cx('separator'),
role: 'separator'
}, ptm('separator', {
hostName: props.hostName
}));
return /*#__PURE__*/React.createElement("li", _extends({}, separatorProps, {
key: key
}));
};
var createSubmenu = function createSubmenu(item, index) {
var shouldRender = renderSubMenu[createKey(item, index)];
if (item.items && shouldRender) {
return /*#__PURE__*/React.createElement(SlideMenuSub, {
id: props.id + '_' + index,
menuProps: props.menuProps,
model: item.items,
index: props.index + 1,
menuWidth: props.menuWidth,
effectDuration: props.effectDuration,
onForward: props.onForward,
parentActive: item === activeItemState,
submenuIcon: props.submenuIcon,
ptm: ptm,
cx: cx,
sx: sx
});
}
return null;
};
var createKey = function createKey(item, index) {
return item.id || props.id + '_' + index;
};
var createMenuitem = function createMenuitem(item, index) {
if (item.visible === false) {
return null;
}
var key = createKey(item, index);
var active = activeItemState === item;
var iconClassName = classNames('p-menuitem-icon', item.icon);
var iconProps = mergeProps({
className: cx('icon')
}, getPTOptions(item, 'icon'));
var icon = IconUtils.getJSXIcon(item.icon, _objectSpread$t({}, iconProps), {
props: props.menuProps
});
var submenuIconProps = mergeProps({
className: cx('submenuIcon')
}, getPTOptions(item, 'submenuIcon'));
var labelProps = mergeProps({
className: cx('label')
}, getPTOptions(item, 'label'));
var submenuIcon = item.items && IconUtils.getJSXIcon(props.submenuIcon || /*#__PURE__*/React.createElement(AngleRightIcon, submenuIconProps), _objectSpread$t({}, submenuIconProps), {
props: props
});
var label = item.label && /*#__PURE__*/React.createElement("span", labelProps, item.label);
var submenu = createSubmenu(item, index);
var actionProps = mergeProps({
href: item.url || '#',
className: cx('action'),
target: item.target,
onClick: function onClick(event) {
return onItemClick(event, item, index);
},
'aria-disabled': item.disabled
}, getPTOptions(item, 'action'));
var content = /*#__PURE__*/React.createElement("a", actionProps, icon, label, submenuIcon);
if (item.template) {
var defaultContentOptions = {
onClick: function onClick(event) {
return onItemClick(event, item, index);
},
className: 'p-menuitem-link',
labelClassName: 'p-menuitem-text',
iconClassName: iconClassName,
submenuIconClassName: 'p-submenu-icon',
element: content,
props: props,
active: active
};
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
}
var menuitemProps = mergeProps({
id: key,
className: cx('menuitem', {
active: active,
item: item
}),
style: item.style
}, getPTOptions(item, 'menuitem'));
return /*#__PURE__*/React.createElement("li", _extends({}, menuitemProps, {
key: key
}), content, submenu);
};
var createItem = function createItem(item, index) {
if (item.visible === false) {
return null;
}
return item.separator ? createSeparator(index) : createMenuitem(item, index);
};
var createItems = function createItems() {
return props.model ? props.model.map(createItem) : null;
};
var items = createItems();
var menuProps = mergeProps({
className: cx('menu', {
subProps: props
}),
style: sx('menu', {
subProps: props
})
}, ptm('menu', {
hostName: props.hostName
}));
return /*#__PURE__*/React.createElement("ul", menuProps, items);
});
SlideMenuSub.displayName = 'SlideMenuSub';
function ownKeys$s(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$s(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$s(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$s(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var SlideMenu = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = SlideMenuBase.getProps(inProps, context);
var _React$useState = React.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var _React$useState3 = React.useState(0),
_React$useState4 = _slicedToArray(_React$useState3, 2),
levelState = _React$useState4[0],
setLevelState = _React$useState4[1];
var _React$useState5 = React.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
visibleState = _React$useState6[0],
setVisibleState = _React$useState6[1];
var _SlideMenuBase$setMet = SlideMenuBase.setMetaData({
props: props,
state: {
id: idState,
visible: visibleState,
level: levelState
}
}),
ptm = _SlideMenuBase$setMet.ptm,
cx = _SlideMenuBase$setMet.cx,
sx = _SlideMenuBase$setMet.sx,
isUnstyled = _SlideMenuBase$setMet.isUnstyled;
useHandleStyle(SlideMenuBase.css.styles, isUnstyled, {
name: 'slidemenu'
});
var menuRef = React.useRef(null);
var targetRef = React.useRef(null);
var backward = React.useRef(null);
var slideMenuContent = React.useRef(null);
var isCloseOnEscape = visibleState && props.popup && props.closeOnEscape;
var slideMenuDisplayOrder = useDisplayOrder('slide-menu', isCloseOnEscape);
useGlobalOnEscapeKey({
callback: function callback(event) {
hide(event);
},
when: isCloseOnEscape && slideMenuDisplayOrder,
priority: [ESC_KEY_HANDLING_PRIORITIES.SLIDE_MENU, slideMenuDisplayOrder]
});
var _useOverlayListener = useOverlayListener({
target: targetRef,
overlay: menuRef,
listener: function listener(event, _ref) {
var valid = _ref.valid,
type = _ref.type;
if (valid) {
if (type === 'outside' || context.hideOverlaysOnDocumentScrolling) {
hide(event);
} else if (!DomHandler.isDocument(event.target)) {
DomHandler.absolutePosition(menuRef.current, targetRef.current);
}
}
},
when: visibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var onPanelClick = function onPanelClick(event) {
if (props.popup) {
OverlayService.emit('overlay-click', {
originalEvent: event,
target: targetRef.current
});
}
};
var navigateForward = function navigateForward() {
setLevelState(function (prevLevel) {
return prevLevel + 1;
});
};
var navigateBack = function navigateBack() {
setLevelState(function (prevLevel) {
return prevLevel - 1;
});
};
var toggle = function toggle(event) {
if (props.popup) {
visibleState ? hide(event) : show(event);
}
};
var show = function show(event) {
targetRef.current = event.currentTarget;
setVisibleState(true);
props.onShow && props.onShow(event);
};
var hide = function hide(event) {
targetRef.current = event.currentTarget;
setVisibleState(false);
props.onHide && props.onHide(event);
};
var onEnter = function onEnter() {
if (props.autoZIndex) {
ZIndexUtils.set('menu', menuRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, props.baseZIndex || context && context.zIndex.menu || PrimeReact.zIndex.menu);
}
DomHandler.addStyles(menuRef.current, {
position: 'absolute',
top: '0',
left: '0'
});
DomHandler.absolutePosition(menuRef.current, targetRef.current);
};
var onEntered = function onEntered() {
bindOverlayListener();
};
var onExit = function onExit() {
targetRef.current = null;
unbindOverlayListener();
};
var onExited = function onExited() {
ZIndexUtils.clear(menuRef.current);
setLevelState(0);
};
useMountEffect(function () {
if (!idState) {
setIdState(UniqueComponentId());
}
});
useUpdateEffect(function () {
setLevelState(0);
}, [props.model]);
useUpdateEffect(function () {
props.onNavigate && props.onNavigate({
level: levelState
});
}, [levelState]);
useUnmountEffect(function () {
ZIndexUtils.clear(menuRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
toggle: toggle,
show: show,
hide: hide,
navigateForward: navigateForward,
navigateBack: navigateBack,
setLevelState: setLevelState,
getElement: function getElement() {
return menuRef.current;
}
};
});
var createBackward = function createBackward() {
var previousIconProps = mergeProps({
className: cx('previousIcon')
}, ptm('previousIcon'));
var icon = props.backIcon || /*#__PURE__*/React.createElement(ChevronLeftIcon, previousIconProps);
var backIcon = IconUtils.getJSXIcon(icon, _objectSpread$s({}, previousIconProps), {
props: props
});
var previousLabelProps = mergeProps(ptm('previousLabel'));
var previousProps = mergeProps({
ref: backward,
className: cx('previous', {
levelState: levelState
}),
onClick: function onClick(e) {
return navigateBack();
}
}, ptm('previous'));
return /*#__PURE__*/React.createElement("div", previousProps, backIcon, /*#__PURE__*/React.createElement("span", previousLabelProps, props.backLabel));
};
var createElement = function createElement() {
var wrapperStyle = {
height: props.viewportHeight + 'px'
};
var backward = createBackward();
var rootProps = mergeProps({
ref: menuRef,
id: props.id,
className: classNames(props.className, cx('root')),
style: props.style,
onClick: function onClick(e) {
return onPanelClick(e);
}
}, SlideMenuBase.getOtherProps(props), ptm('root'));
var wrapperProps = mergeProps({
className: cx('wrapper'),
style: wrapperStyle
}, ptm('wrapper'));
var contentProps = mergeProps({
ref: slideMenuContent,
className: cx('content')
}, ptm('content'));
var transitionProps = mergeProps({
classNames: cx('transition'),
"in": !props.popup || visibleState,
timeout: {
enter: 120,
exit: 100
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: onEnter,
onEntered: onEntered,
onExit: onExit,
onExited: onExited
}, ptm('transition'));
return /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: menuRef
}, transitionProps), /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement("div", wrapperProps, /*#__PURE__*/React.createElement("div", contentProps, /*#__PURE__*/React.createElement(SlideMenuSub, {
id: idState,
hostName: "SlideMenu",
menuProps: props,
model: props.model,
root: true,
index: 0,
menuWidth: props.menuWidth,
effectDuration: props.effectDuration,
level: levelState,
parentActive: levelState === 0,
onForward: navigateForward,
submenuIcon: props.submenuIcon,
ptm: ptm,
cx: cx,
sx: sx
}))), backward));
};
var element = createElement();
return props.popup ? /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo
}) : element;
}));
SlideMenu.displayName = 'SlideMenu';
var classes$g = {
handle: function handle(_ref) {
var index = _ref.index,
handleIndex = _ref.handleIndex;
return classNames('p-slider-handle', {
'p-slider-handle-start': index === 0,
'p-slider-handle-end': index === 1,
'p-slider-handle-active': handleIndex.current === index
});
},
range: 'p-slider-range',
root: function root(_ref2) {
var props = _ref2.props,
vertical = _ref2.vertical,
horizontal = _ref2.horizontal;
return classNames('p-slider p-component', {
'p-disabled': props.disabled,
'p-slider-horizontal': horizontal,
'p-slider-vertical': vertical
});
}
};
var styles$c = "\n@layer primereact {\n .p-slider {\n position: relative;\n }\n \n .p-slider .p-slider-handle {\n position: absolute;\n cursor: grab;\n touch-action: none;\n display: block;\n z-index: 1;\n }\n \n .p-slider .p-slider-handle.p-slider-handle-active {\n z-index: 2;\n }\n \n .p-slider-range {\n position: absolute;\n display: block;\n }\n \n .p-slider-horizontal .p-slider-range {\n top: 0;\n left: 0;\n height: 100%;\n }\n \n .p-slider-horizontal .p-slider-handle {\n top: 50%;\n }\n \n .p-slider-vertical {\n height: 100px;\n }\n \n .p-slider-vertical .p-slider-handle {\n left: 50%;\n }\n \n .p-slider-vertical .p-slider-range {\n bottom: 0;\n left: 0;\n width: 100%;\n }\n}\n";
var inlineStyles$4 = {
handle: {
position: 'absolute'
},
range: {
position: 'absolute'
}
};
var SliderBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Slider',
id: null,
value: null,
min: 0,
max: 100,
orientation: 'horizontal',
step: null,
range: false,
style: null,
className: null,
disabled: false,
tabIndex: 0,
onChange: null,
onSlideEnd: null,
children: undefined
},
css: {
classes: classes$g,
styles: styles$c,
inlineStyles: inlineStyles$4
}
});
function ownKeys$r(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$r(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$r(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$r(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Slider = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var _props$value, _ref, _props$value2;
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = SliderBase.getProps(inProps, context);
var elementRef = React.useRef(null);
var handleIndex = React.useRef(0);
var sliderHandleClick = React.useRef(false);
var dragging = React.useRef(false);
var initX = React.useRef(0);
var initY = React.useRef(0);
var barWidth = React.useRef(0);
var barHeight = React.useRef(0);
var touchId = React.useRef();
var value = props.range ? (_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : [props.min, props.max] : (_ref = (_props$value2 = props.value) !== null && _props$value2 !== void 0 ? _props$value2 : props.min) !== null && _ref !== void 0 ? _ref : 0;
var horizontal = props.orientation === 'horizontal';
var vertical = props.orientation === 'vertical';
var _useEventListener = useEventListener({
type: 'mousemove',
listener: function listener(event) {
return onDrag(event);
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentMouseMoveListener = _useEventListener2[0],
unbindDocumentMouseMoveListener = _useEventListener2[1];
var _useEventListener3 = useEventListener({
type: 'mouseup',
listener: function listener(event) {
return onDragEnd(event);
}
}),
_useEventListener4 = _slicedToArray(_useEventListener3, 2),
bindDocumentMouseUpListener = _useEventListener4[0],
unbindDocumentMouseUpListener = _useEventListener4[1];
var _useEventListener5 = useEventListener({
type: 'touchmove',
listener: function listener(event) {
return onDrag(event);
}
}),
_useEventListener6 = _slicedToArray(_useEventListener5, 2),
bindDocumentTouchMoveListener = _useEventListener6[0],
unbindDocumentTouchMoveListener = _useEventListener6[1];
var _useEventListener7 = useEventListener({
type: 'touchend',
listener: function listener(event) {
return onDragEnd(event);
}
}),
_useEventListener8 = _slicedToArray(_useEventListener7, 2),
bindDocumentTouchEndListener = _useEventListener8[0],
unbindDocumentTouchEndListener = _useEventListener8[1];
var _SliderBase$setMetaDa = SliderBase.setMetaData({
props: props
}),
ptm = _SliderBase$setMetaDa.ptm,
cx = _SliderBase$setMetaDa.cx,
sx = _SliderBase$setMetaDa.sx,
isUnstyled = _SliderBase$setMetaDa.isUnstyled;
useHandleStyle(SliderBase.css.styles, isUnstyled, {
name: 'slider'
});
var spin = function spin(event, dir) {
var val = props.range ? value[handleIndex.current] : value;
var step = (props.step || 1) * dir;
updateValue(event, val + step);
event.preventDefault();
};
var onDragStart = function onDragStart(event, index) {
if (props.disabled) {
return;
}
dragging.current = true;
updateDomData();
sliderHandleClick.current = true;
if (props.range && value[0] === props.max) {
handleIndex.current = 0;
} else {
handleIndex.current = index;
}
event.preventDefault();
};
var onDrag = function onDrag(event) {
if (dragging.current) {
setValue(event);
event.preventDefault();
}
};
var onDragEnd = function onDragEnd(event) {
if (dragging.current) {
dragging.current = false;
var newValue = setValue(event);
props.onSlideEnd && props.onSlideEnd({
originalEvent: event,
value: newValue
});
touchId.current = undefined;
unbindDocumentMouseMoveListener();
unbindDocumentMouseUpListener();
unbindDocumentTouchMoveListener();
unbindDocumentTouchEndListener();
}
};
var _onMouseDown = function onMouseDown(event, index) {
bindDocumentMouseMoveListener();
bindDocumentMouseUpListener();
onDragStart(event, index);
};
var _onTouchStart = function onTouchStart(event, index) {
if (event.changedTouches && event.changedTouches[0]) {
touchId.current = event.changedTouches[0].identifier;
}
bindDocumentTouchMoveListener();
bindDocumentTouchEndListener();
onDragStart(event, index);
};
var _onKeyDown = function onKeyDown(event, index) {
if (props.disabled) {
return;
}
handleIndex.current = index;
var key = event.key;
switch (key) {
case 'ArrowRight':
case 'ArrowUp':
spin(event, 1);
break;
case 'ArrowLeft':
case 'ArrowDown':
spin(event, -1);
break;
case 'PageUp':
spin(event, 10);
event.preventDefault();
break;
case 'PageDown':
spin(event, -10);
event.preventDefault();
break;
case 'Home':
spin(event, -value);
event.preventDefault();
break;
case 'End':
spin(event, props.max);
event.preventDefault();
break;
}
};
var onBarClick = function onBarClick(event) {
if (props.disabled) {
return;
}
if (!sliderHandleClick.current) {
updateDomData();
var _value = setValue(event);
props.onSlideEnd && props.onSlideEnd({
originalEvent: event,
value: _value
});
}
sliderHandleClick.current = false;
};
var updateDomData = function updateDomData() {
var rect = elementRef.current.getBoundingClientRect();
initX.current = rect.left + DomHandler.getWindowScrollLeft();
initY.current = rect.top + DomHandler.getWindowScrollTop();
barWidth.current = elementRef.current.offsetWidth;
barHeight.current = elementRef.current.offsetHeight;
};
var trackTouch = function trackTouch(event) {
var _event$changedTouches;
var _event = Array.from((_event$changedTouches = event.changedTouches) !== null && _event$changedTouches !== void 0 ? _event$changedTouches : []).find(function (t) {
return t.identifier === touchId.current;
}) || event;
return {
pageX: _event.pageX,
pageY: _event.pageY
};
};
var setValue = function setValue(event) {
var handleValue;
var _trackTouch = trackTouch(event),
pageX = _trackTouch.pageX,
pageY = _trackTouch.pageY;
if (!pageX || !pageY) {
return;
}
if (horizontal) {
handleValue = (pageX - initX.current) * 100 / barWidth.current;
} else {
handleValue = (initY.current + barHeight.current - pageY) * 100 / barHeight.current;
}
var newValue = (props.max - props.min) * (handleValue / 100) + props.min;
if (props.step) {
var oldValue = props.range ? value[handleIndex.current] : value;
var diff = newValue - oldValue;
if (diff < 0) {
newValue = oldValue + Math.ceil(newValue / props.step - oldValue / props.step) * props.step;
} else if (diff > 0) {
newValue = oldValue + Math.floor(newValue / props.step - oldValue / props.step) * props.step;
}
} else {
newValue = Math.floor(newValue);
}
return updateValue(event, newValue);
};
var updateValue = function updateValue(event, val) {
var parsedValue = parseFloat(val.toFixed(10));
var newValue = parsedValue;
if (props.range) {
if (handleIndex.current === 0) {
if (parsedValue < props.min) {
parsedValue = props.min;
} else if (parsedValue > props.max) {
parsedValue = props.max;
}
} else if (parsedValue > props.max) {
parsedValue = props.max;
} else if (parsedValue < props.min) {
parsedValue = props.min;
}
newValue = _toConsumableArray(value);
newValue[handleIndex.current] = parsedValue;
if (props.onChange) {
props.onChange({
originalEvent: event,
value: newValue
});
}
} else {
if (parsedValue < props.min) {
parsedValue = props.min;
} else if (parsedValue > props.max) {
parsedValue = props.max;
}
newValue = parsedValue;
if (props.onChange) {
props.onChange({
originalEvent: event,
value: newValue
});
}
}
return newValue;
};
var createHandle = function createHandle(leftValue, bottomValue, index) {
leftValue = ObjectUtils.isEmpty(leftValue) ? null : leftValue;
bottomValue = ObjectUtils.isEmpty(bottomValue) ? null : bottomValue;
var style = {
transition: dragging.current ? 'none' : null,
left: leftValue != null ? leftValue + '%' : null,
bottom: bottomValue != null ? bottomValue + '%' : null
};
var handleProps = mergeProps(_objectSpread$r({
className: cx('handle', {
index: index,
handleIndex: handleIndex
}),
style: _objectSpread$r(_objectSpread$r({}, sx('handle', {
dragging: dragging,
leftValue: leftValue,
bottomValue: bottomValue
})), style),
tabIndex: props.tabIndex,
role: 'slider',
onMouseDown: function onMouseDown(event) {
return _onMouseDown(event, index);
},
onTouchStart: function onTouchStart(event) {
return _onTouchStart(event, index);
},
onKeyDown: function onKeyDown(event) {
return _onKeyDown(event, index);
},
'aria-valuemin': props.min,
'aria-valuemax': props.max,
'aria-valuenow': leftValue || bottomValue || 0,
'aria-orientation': props.orientation
}, ariaProps), ptm('handle'));
return /*#__PURE__*/React.createElement("span", handleProps);
};
var createRangeSlider = function createRangeSlider() {
var handleValueStart = (value[0] < props.min ? props.min : value[0] - props.min) * 100 / (props.max - props.min);
var handleValueEnd = (value[1] > props.max ? props.max : value[1] - props.min) * 100 / (props.max - props.min);
var rangeStartHandle = horizontal ? createHandle(handleValueStart, null, 0) : createHandle(null, handleValueStart, 0);
var rangeEndHandle = horizontal ? createHandle(handleValueEnd, null, 1) : createHandle(null, handleValueEnd, 1);
var rangeSliderWidth = handleValueEnd > handleValueStart ? handleValueEnd - handleValueStart : handleValueStart - handleValueEnd;
var rangeSliderPosition = handleValueEnd > handleValueStart ? handleValueStart : handleValueEnd;
var rangeStyle = horizontal ? {
left: rangeSliderPosition + '%',
width: rangeSliderWidth + '%'
} : {
bottom: rangeSliderPosition + '%',
height: rangeSliderWidth + '%'
};
var rangeProps = mergeProps({
className: cx('range'),
style: _objectSpread$r(_objectSpread$r({}, sx('range')), rangeStyle)
}, ptm('range'));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", rangeProps), rangeStartHandle, rangeEndHandle);
};
var createSingleSlider = function createSingleSlider() {
var handleValue;
if (value < props.min) {
handleValue = props.min;
} else if (value > props.max) {
handleValue = props.max;
} else {
handleValue = (value - props.min) * 100 / (props.max - props.min);
}
var rangeStyle = horizontal ? {
width: handleValue + '%'
} : {
height: handleValue + '%'
};
var handle = horizontal ? createHandle(handleValue, null, null) : createHandle(null, handleValue, null);
var rangeProps = mergeProps({
className: cx('range'),
style: _objectSpread$r(_objectSpread$r({}, sx('range')), rangeStyle)
}, ptm('range'));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", rangeProps), handle);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var otherProps = SliderBase.getOtherProps(props);
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var content = props.range ? createRangeSlider() : createSingleSlider();
var rootProps = mergeProps({
style: props.style,
className: classNames(props.className, cx('root', {
vertical: vertical,
horizontal: horizontal
})),
onClick: onBarClick
}, SliderBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
ref: elementRef
}, rootProps), content);
}));
Slider.displayName = 'Slider';
var styles$b = "\n@layer primereact {\n .p-speeddial {\n position: absolute;\n display: flex;\n z-index: 1;\n }\n\n .p-speeddial-list {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: top 0s linear 0.2s;\n pointer-events: none;\n }\n\n .p-speeddial-item {\n transform: scale(0);\n opacity: 0;\n transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;\n will-change: transform;\n }\n\n .p-speeddial-action {\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n position: relative;\n overflow: hidden;\n text-decoration: none;\n }\n\n .p-speeddial-action-icon {\n pointer-events: none;\n }\n\n .p-speeddial-circle .p-speeddial-item,\n .p-speeddial-semi-circle .p-speeddial-item,\n .p-speeddial-quarter-circle .p-speeddial-item {\n position: absolute;\n }\n\n .p-speeddial-rotate {\n transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n will-change: transform;\n }\n\n .p-speeddial-mask {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);\n }\n\n .p-speeddial-mask-visible {\n pointer-events: none;\n opacity: 1;\n transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n }\n\n .p-speeddial-opened .p-speeddial-list {\n pointer-events: auto;\n }\n\n .p-speeddial-opened .p-speeddial-item {\n transform: scale(1);\n opacity: 1;\n }\n\n .p-speeddial-opened .p-speeddial-rotate {\n transform: rotate(45deg);\n }\n}\n";
var classes$f = {
root: function root(_ref) {
var props = _ref.props,
visible = _ref.visible;
return classNames("p-speeddial p-component p-speeddial-".concat(props.type), _defineProperty(_defineProperty(_defineProperty({}, "p-speeddial-direction-".concat(props.direction), props.type !== 'circle'), 'p-speeddial-opened', visible), 'p-disabled', props.disabled));
},
button: function button(_ref2) {
var props = _ref2.props;
return classNames('p-speeddial-button p-button-rounded', {
'p-speeddial-rotate': props.rotateAnimation && !props.hideIcon
});
},
mask: function mask(_ref3) {
var visible = _ref3.visible;
return classNames('p-speeddial-mask', {
'p-speeddial-mask-visible': visible
});
},
action: function action(_ref4) {
var disabled = _ref4.disabled;
return classNames('p-speeddial-action', {
'p-disabled': disabled
});
},
actionIcon: function actionIcon(_ref5) {
var _icon = _ref5._icon;
return classNames('p-speeddial-action-icon', _icon);
},
menu: 'p-speeddial-list',
menuitem: function menuitem(_ref6) {
var active = _ref6.active;
return classNames('p-speeddial-item', {
'p-focus': active
});
}
};
var inlineStyles$3 = {
root: function root(_ref7) {
var props = _ref7.props;
return {
alignItems: props.direction === 'up' || props.direction === 'down' ? 'center' : '',
justifyContent: props.direction === 'left' || props.direction === 'right' ? 'center' : '',
flexDirection: props.direction === 'up' ? 'column-reverse' : props.direction === 'down' ? 'column' : props.direction === 'left' ? 'row-reverse' : props.direction === 'right' ? 'row' : null
};
},
menu: function menu(_ref8) {
var props = _ref8.props;
return {
flexDirection: props.direction === 'up' ? 'column-reverse' : props.direction === 'down' ? 'column' : props.direction === 'left' ? 'row-reverse' : props.direction === 'right' ? 'row' : null
};
}
};
var SpeedDialBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'SpeedDial',
id: null,
model: null,
visible: false,
style: null,
className: null,
direction: 'up',
transitionDelay: 30,
type: 'linear',
radius: 0,
mask: false,
disabled: false,
hideOnClickOutside: true,
buttonStyle: null,
buttonClassName: null,
buttonTemplate: null,
'aria-label': null,
ariaLabelledby: null,
maskStyle: null,
maskClassName: null,
showIcon: null,
hideIcon: null,
rotateAnimation: true,
onVisibleChange: null,
onClick: null,
onShow: null,
onHide: null,
children: undefined
},
css: {
classes: classes$f,
styles: styles$b,
inlineStyles: inlineStyles$3
}
});
function ownKeys$q(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$q(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$q(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$q(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var SpeedDial = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
visibleState = _React$useState2[0],
setVisibleState = _React$useState2[1];
var _React$useState3 = React.useState(null),
_React$useState4 = _slicedToArray(_React$useState3, 2),
idState = _React$useState4[0],
setIdState = _React$useState4[1];
var _React$useState5 = React.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
focused = _React$useState6[0],
setFocused = _React$useState6[1];
var _React$useState7 = React.useState(-1),
_React$useState8 = _slicedToArray(_React$useState7, 2),
focusedOptionIndex = _React$useState8[0],
setFocusedOptionIndex = _React$useState8[1];
var isItemClicked = React.useRef(false);
var elementRef = React.useRef(null);
var listRef = React.useRef(null);
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = SpeedDialBase.getProps(inProps, context);
var visible = props.onVisibleChange ? props.visible : visibleState;
var speedDialDisplayOrder = useDisplayOrder('speed-dial', visible);
var metaData = {
props: props,
state: {
visible: visible
}
};
var _SpeedDialBase$setMet = SpeedDialBase.setMetaData(metaData),
ptm = _SpeedDialBase$setMet.ptm,
cx = _SpeedDialBase$setMet.cx,
sx = _SpeedDialBase$setMet.sx,
isUnstyled = _SpeedDialBase$setMet.isUnstyled;
useHandleStyle(SpeedDialBase.css.styles, isUnstyled, {
name: 'speeddial'
});
useGlobalOnEscapeKey({
callback: function callback() {
hide();
},
when: visible && speedDialDisplayOrder,
priority: [ESC_KEY_HANDLING_PRIORITIES.SPEED_DIAL, speedDialDisplayOrder]
});
var _useEventListener = useEventListener({
type: 'click',
listener: function listener(event) {
if (!isItemClicked.current && isOutsideClicked(event)) {
hide();
}
isItemClicked.current = false;
},
when: visibleState
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentClickListener = _useEventListener2[0],
unbindDocumentClickListener = _useEventListener2[1];
var show = function show() {
props.onVisibleChange ? props.onVisibleChange(true) : setVisibleState(true);
props.onShow && props.onShow();
};
var onFocus = function onFocus() {
setFocused(true);
};
var onBlur = function onBlur() {
setFocused(false);
setFocusedOptionIndex(-1);
};
var hide = function hide() {
props.onVisibleChange ? props.onVisibleChange(false) : setVisibleState(false);
props.onHide && props.onHide();
};
var _onClick = function onClick(e) {
visible ? hide() : show();
props.onClick && props.onClick(e);
isItemClicked.current = true;
};
var onItemClick = function onItemClick(e, item) {
item.command && item.command({
originalEvent: e,
item: item
});
hide();
isItemClicked.current = true;
e.preventDefault();
};
var onKeyDown = function onKeyDown(event) {
switch (event.code) {
case 'ArrowDown':
onArrowDown(event);
break;
case 'ArrowUp':
onArrowUp(event);
break;
case 'ArrowLeft':
onArrowLeft(event);
break;
case 'ArrowRight':
onArrowRight(event);
break;
case 'Enter':
case 'NumpadEnter':
case 'Space':
onEnterKey(event);
break;
case 'Escape':
onEscapeKey();
break;
case 'Home':
onHomeKey(event);
break;
case 'End':
onEndKey(event);
break;
}
};
var onTogglerKeydown = function onTogglerKeydown(event) {
switch (event.code) {
case 'ArrowDown':
case 'ArrowLeft':
onTogglerArrowDown(event);
break;
case 'ArrowUp':
case 'ArrowRight':
onTogglerArrowUp(event);
break;
case 'Escape':
onEscapeKey();
break;
}
};
var onTogglerArrowUp = function onTogglerArrowUp(event) {
setFocused(true);
DomHandler.focus(listRef.current);
show();
navigatePrevItem(event);
event.preventDefault();
};
var onTogglerArrowDown = function onTogglerArrowDown(event) {
setFocused(true);
DomHandler.focus(listRef.current);
show();
navigateNextItem(event);
event.preventDefault();
};
var onEnterKey = function onEnterKey(event) {
var items = DomHandler.find(elementRef.current, '[data-pc-section="menuitem"]');
var itemIndex = _toConsumableArray(items).findIndex(function (item) {
return item.id === focusedOptionIndex;
});
onItemClick(event, props.model[itemIndex]);
onBlur();
var buttonEl = DomHandler.findSingle(elementRef.current, 'button');
buttonEl && DomHandler.focus(buttonEl);
};
var onEscapeKey = function onEscapeKey() {
hide();
var buttonEl = DomHandler.findSingle(elementRef.current, 'button');
buttonEl && DomHandler.focus(buttonEl);
};
var onArrowUp = function onArrowUp(event) {
var direction = props.direction;
if (direction === 'up') {
navigateNextItem(event);
} else if (direction === 'down') {
navigatePrevItem(event);
} else {
navigateNextItem(event);
}
};
var onArrowDown = function onArrowDown(event) {
var direction = props.direction;
if (direction === 'up') {
navigatePrevItem(event);
} else if (direction === 'down') {
navigateNextItem(event);
} else {
navigatePrevItem(event);
}
};
var onArrowLeft = function onArrowLeft(event) {
var direction = props.direction;
var leftValidDirections = ['left', 'up-right', 'down-left'];
var rightValidDirections = ['right', 'up-left', 'down-right'];
if (leftValidDirections.includes(direction)) {
navigateNextItem(event);
} else if (rightValidDirections.includes(direction)) {
navigatePrevItem(event);
} else {
navigatePrevItem(event);
}
};
var onArrowRight = function onArrowRight(event) {
var direction = props.direction;
var leftValidDirections = ['left', 'up-right', 'down-left'];
var rightValidDirections = ['right', 'up-left', 'down-right'];
if (leftValidDirections.includes(direction)) {
navigatePrevItem(event);
} else if (rightValidDirections.includes(direction)) {
navigateNextItem(event);
} else {
navigateNextItem(event);
}
};
var onEndKey = function onEndKey(event) {
event.preventDefault();
setFocusedOptionIndex(-1);
navigatePrevItem(event, -1);
};
var onHomeKey = function onHomeKey(event) {
event.preventDefault();
setFocusedOptionIndex(-1);
navigateNextItem(event, -1);
};
var navigateNextItem = function navigateNextItem(event) {
var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var optionIndex = findNextOptionIndex(index || focusedOptionIndex);
changeFocusedOptionIndex(optionIndex);
event.preventDefault();
};
var navigatePrevItem = function navigatePrevItem(event) {
var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var optionIndex = findPrevOptionIndex(index || focusedOptionIndex);
changeFocusedOptionIndex(optionIndex);
event.preventDefault();
};
var changeFocusedOptionIndex = function changeFocusedOptionIndex(index) {
var items = DomHandler.find(elementRef.current, '[data-pc-section="menuitem"]');
var filteredItems = _toConsumableArray(items).filter(function (item) {
return !DomHandler.hasClass(DomHandler.findSingle(item, 'a'), 'p-disabled');
});
if (filteredItems[index]) {
setFocusedOptionIndex(filteredItems[index].getAttribute('id'));
}
};
var findPrevOptionIndex = function findPrevOptionIndex(index) {
var items = DomHandler.find(elementRef.current, '[data-pc-section="menuitem"]');
var filteredItems = _toConsumableArray(items).filter(function (item) {
return !DomHandler.hasClass(DomHandler.findSingle(item, 'a'), 'p-disabled');
});
var newIndex = index === -1 ? filteredItems[filteredItems.length - 1].id : index;
var matchedOptionIndex = filteredItems.findIndex(function (link) {
return link.getAttribute('id') === newIndex;
});
matchedOptionIndex = index === -1 ? filteredItems.length - 1 : matchedOptionIndex - 1;
return matchedOptionIndex;
};
var findNextOptionIndex = function findNextOptionIndex(index) {
var items = DomHandler.find(elementRef.current, '[data-pc-section="menuitem"]');
var filteredItems = _toConsumableArray(items).filter(function (item) {
return !DomHandler.hasClass(DomHandler.findSingle(item, 'a'), 'p-disabled');
});
var newIndex = index === -1 ? filteredItems[0].id : index;
var matchedOptionIndex = filteredItems.findIndex(function (link) {
return link.getAttribute('id') === newIndex;
});
matchedOptionIndex = index === -1 ? 0 : matchedOptionIndex + 1;
return matchedOptionIndex;
};
var isOutsideClicked = function isOutsideClicked(event) {
return elementRef.current && !(elementRef.current.isSameNode(event.target) || elementRef.current.contains(event.target));
};
var isItemActive = function isItemActive(id) {
return focusedOptionIndex === id;
};
var focusedOptionId = function focusedOptionId() {
return focusedOptionIndex !== -1 ? focusedOptionIndex : null;
};
var calculateTransitionDelay = function calculateTransitionDelay(index) {
var length = props.model.length;
return (visible ? index : length - index - 1) * props.transitionDelay;
};
var calculatePointStyle = function calculatePointStyle(index) {
var type = props.type;
if (type !== 'linear') {
var length = props.model.length;
var radius = props.radius || length * 20;
if (type === 'circle') {
var step = 2 * Math.PI / length;
return {
left: "calc(".concat(radius * Math.cos(step * index), "px + var(--item-diff-x, 0px))"),
top: "calc(".concat(radius * Math.sin(step * index), "px + var(--item-diff-y, 0px))")
};
} else if (type === 'semi-circle') {
var direction = props.direction;
var _step = Math.PI / (length - 1);
var x = "calc(".concat(radius * Math.cos(_step * index), "px + var(--item-diff-x, 0px))");
var y = "calc(".concat(radius * Math.sin(_step * index), "px + var(--item-diff-y, 0px))");
if (direction === 'up') {
return {
left: x,
bottom: y
};
} else if (direction === 'down') {
return {
left: x,
top: y
};
} else if (direction === 'left') {
return {
right: y,
top: x
};
} else if (direction === 'right') {
return {
left: y,
top: x
};
}
} else if (type === 'quarter-circle') {
var _direction = props.direction;
var _step2 = Math.PI / (2 * (length - 1));
var _x = "calc(".concat(radius * Math.cos(_step2 * index), "px + var(--item-diff-x, 0px))");
var _y = "calc(".concat(radius * Math.sin(_step2 * index), "px + var(--item-diff-y, 0px))");
if (_direction === 'up-left') {
return {
right: _x,
bottom: _y
};
} else if (_direction === 'up-right') {
return {
left: _x,
bottom: _y
};
} else if (_direction === 'down-left') {
return {
right: _y,
top: _x
};
} else if (_direction === 'down-right') {
return {
left: _y,
top: _x
};
}
}
}
return {};
};
var getItemStyle = function getItemStyle(index) {
var transitionDelay = calculateTransitionDelay(index);
var pointStyle = calculatePointStyle(index);
return _objectSpread$q({
transitionDelay: "".concat(transitionDelay, "ms")
}, pointStyle);
};
useMountEffect(function () {
if (props.type !== 'linear') {
var _button = DomHandler.findSingle(elementRef.current, '.p-speeddial-button');
var firstItem = DomHandler.findSingle(listRef.current, '.p-speeddial-item');
if (_button && firstItem) {
var wDiff = Math.abs(_button.offsetWidth - firstItem.offsetWidth);
var hDiff = Math.abs(_button.offsetHeight - firstItem.offsetHeight);
listRef.current.style.setProperty('--item-diff-x', "".concat(wDiff / 2, "px"));
listRef.current.style.setProperty('--item-diff-y', "".concat(hDiff / 2, "px"));
}
}
});
useUpdateEffect(function () {
if (visibleState) {
props.hideOnClickOutside && bindDocumentClickListener();
}
return function () {
props.hideOnClickOutside && unbindDocumentClickListener();
};
}, [visibleState]);
React.useImperativeHandle(ref, function () {
return {
props: props,
show: show,
hide: hide,
getElement: function getElement() {
return elementRef.current;
}
};
});
var createItem = function createItem(item, index) {
if (item.visible === false) {
return null;
}
var disabled = item.disabled,
_icon = item.icon,
label = item.label,
template = item.template,
url = item.url,
target = item.target,
_itemClassName = item.className,
_itemStyle = item.style;
var contentClassName = classNames('p-speeddial-action', {
'p-disabled': disabled
});
var iconClassName = classNames('p-speeddial-action-icon', _icon);
var actionIconProps = mergeProps({
className: cx('actionIcon')
}, ptm('actionIcon'));
var actionProps = mergeProps({
href: url || '#',
role: 'menuitem',
className: classNames(_itemClassName, cx('action', {
disabled: disabled
})),
'aria-label': item.label,
style: _itemStyle,
target: target,
tabIndex: '-1',
'data-pr-tooltip': label,
onClick: function onClick(e) {
return onItemClick(e, item);
}
}, ptm('action'));
var icon = IconUtils.getJSXIcon(_icon, _objectSpread$q({}, actionIconProps), {
props: props
});
var content = /*#__PURE__*/React.createElement("a", actionProps, icon, /*#__PURE__*/React.createElement(Ripple, null));
if (template) {
var defaultContentOptions = {
onClick: function onClick(e) {
return onItemClick(e, item);
},
className: contentClassName,
iconClassName: iconClassName,
element: content,
props: props,
visible: visible
};
content = ObjectUtils.getJSXElement(template, item, defaultContentOptions);
}
var menuItemProps = mergeProps({
id: "".concat(idState, "_").concat(index),
className: cx('menuitem', {
active: isItemActive("".concat(idState, "_").concat(index))
}),
style: getItemStyle(index),
role: 'menuitem'
}, ptm('menuitem'));
return /*#__PURE__*/React.createElement("li", _extends({}, menuItemProps, {
key: "".concat(idState, "_").concat(index)
}), content);
};
var createItems = function createItems() {
return props.model ? props.model.map(createItem) : null;
};
var createList = function createList() {
var items = createItems();
var menuProps = mergeProps({
ref: listRef,
className: cx('menu'),
style: sx('menu'),
role: 'menu',
tabIndex: '-1',
onFocus: onFocus,
onKeyDown: onKeyDown,
onBlur: onBlur,
'aria-activedescendant': focused ? focusedOptionId() : undefined
}, ptm('menu'));
return /*#__PURE__*/React.createElement("ul", menuProps, items);
};
var createButton = function createButton() {
var showIconVisible = !visible && !!props.showIcon || !props.hideIcon;
var hideIconVisible = visible && !!props.hideIcon;
var className = classNames('p-speeddial-button p-button-rounded', {
'p-speeddial-rotate': props.rotateAnimation && !props.hideIcon
}, props.buttonClassName);
var iconClassName = classNames(_defineProperty(_defineProperty({}, "".concat(props.showIcon), !visible && !!props.showIcon || !props.hideIcon), "".concat(props.hideIcon), visible && !!props.hideIcon));
var icon = showIconVisible ? props.showIcon || /*#__PURE__*/React.createElement(PlusIcon, null) : hideIconVisible ? props.hideIcon || /*#__PURE__*/React.createElement(MinusIcon, null) : null;
var toggleIcon = IconUtils.getJSXIcon(icon, undefined, {
props: props,
visible: visible
});
var buttonProps = mergeProps({
type: 'button',
style: props.buttonStyle,
className: classNames(props.buttonClassName, cx('button')),
icon: toggleIcon,
onClick: function onClick(e) {
return _onClick(e);
},
disabled: props.disabled,
onKeyDown: onTogglerKeydown,
'aria-label': props['aria-label'],
'aria-expanded': visible,
'aria-haspopup': true,
'aria-controls': getAriaControls,
'aria-labelledby': props.ariaLabelledby,
pt: ptm('button'),
unstyled: props.unstyled,
__parentMetadata: {
parent: metaData
}
});
var content = /*#__PURE__*/React.createElement(Button, buttonProps);
if (props.buttonTemplate) {
var defaultContentOptions = {
onClick: _onClick,
className: className,
iconClassName: iconClassName,
element: content,
props: props,
visible: visible
};
return ObjectUtils.getJSXElement(props.buttonTemplate, defaultContentOptions);
}
return content;
};
var getAriaControls = function getAriaControls() {
var ariaControls = '';
for (var index = 0; index < props.model.length; index++) {
ariaControls = ariaControls + "".concat(idState, "_").concat(index, " ");
}
return ariaControls.trim();
};
var createMask = function createMask() {
if (props.mask) {
var maskProps = mergeProps({
className: classNames(props.maskClassName, cx('mask', {
visible: visible
})),
style: props.maskStyle
}, ptm('mask'));
return /*#__PURE__*/React.createElement("div", maskProps);
}
return null;
};
React.useEffect(function () {
setIdState(props.id || UniqueComponentId());
}, [props.id]);
var button = createButton();
var list = createList();
var mask = createMask();
var rootProps = mergeProps({
className: classNames(props.className, cx('root', {
visible: visible
})),
style: _objectSpread$q(_objectSpread$q({}, props.style), sx('root')),
id: idState
}, SpeedDialBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef
}, rootProps), button, list), mask);
}));
SpeedDial.displayName = 'SpeedDial';
var classes$e = {
root: function root(_ref) {
var props = _ref.props,
context = _ref.context;
return classNames('p-tieredmenu p-component', {
'p-tieredmenu-overlay': props.popup,
'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
});
},
separator: 'p-menuitem-separator',
icon: function icon(_ref2) {
var _icon = _ref2._icon;
return classNames('p-menuitem-icon', _icon);
},
content: 'p-menuitem-content',
label: 'p-menuitem-text',
submenuIcon: 'p-submenu-icon',
action: 'p-menuitem-link',
menuitem: function menuitem(_ref3) {
var itemClassName = _ref3.itemClassName,
active = _ref3.active,
focused = _ref3.focused,
disabled = _ref3.disabled;
return classNames('p-menuitem', {
'p-menuitem-active p-highlight': active,
'p-focus': focused,
'p-disabled': disabled
}, itemClassName);
},
menu: 'p-tieredmenu-root-list',
submenu: 'p-submenu-list',
transition: 'p-connected-overlay'
};
var inlineStyles$2 = {
submenu: function submenu(_ref4) {
var props = _ref4.subProps;
return {
display: !props.root && props.parentActive ? 'block' : 'none'
};
}
};
var styles$a = "\n@layer primereact {\n .p-tieredmenu-overlay {\n position: absolute;\n }\n\n .p-tieredmenu ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n .p-tieredmenu .p-submenu-list {\n position: absolute;\n min-width: 100%;\n z-index: 1;\n display: none;\n }\n\n .p-tieredmenu .p-menuitem-link {\n cursor: pointer;\n display: flex;\n align-items: center;\n text-decoration: none;\n overflow: hidden;\n position: relative;\n }\n\n .p-tieredmenu .p-menuitem-text {\n line-height: 1;\n }\n\n .p-tieredmenu .p-menuitem {\n position: relative;\n }\n\n .p-tieredmenu .p-menuitem-link .p-submenu-icon {\n margin-left: auto;\n }\n\n .p-tieredmenu .p-menuitem-active > .p-submenu-list {\n display: block;\n left: 100%;\n top: 0;\n }\n\n .p-tieredmenu .p-menuitem-active > .p-submenu-list-flipped {\n left: -100%;\n }\n}\n";
var TieredMenuBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'TieredMenu',
__parentMetadata: null,
id: null,
model: null,
popup: false,
style: null,
className: null,
autoZIndex: true,
baseZIndex: 0,
breakpoint: undefined,
scrollHeight: '400px',
appendTo: null,
transitionOptions: null,
onShow: null,
onFocus: null,
onBlur: null,
onHide: null,
submenuIcon: null,
children: undefined
},
css: {
classes: classes$e,
styles: styles$a,
inlineStyles: inlineStyles$2
}
});
function ownKeys$p(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$p(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$p(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$p(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var TieredMenuSub = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (props, ref) {
var elementRef = React.useRef(null);
var mergeProps = useMergeProps();
var ptm = props.ptm,
cx = props.cx,
sx = props.sx;
var getPTOptions = function getPTOptions(item, key) {
return ptm(key, {
hostName: props.hostName,
context: {
active: isItemActive(item)
}
});
};
var position = function position() {
if (elementRef.current) {
var parentItem = elementRef.current.parentElement;
var containerOffset = DomHandler.getOffset(parentItem);
var viewport = DomHandler.getViewport();
var sublistWidth = elementRef.current.offsetParent ? elementRef.current.offsetWidth : DomHandler.getHiddenElementOuterWidth(elementRef.current);
var itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
var top = parseInt(containerOffset.top, 10) + elementRef.current.offsetHeight - DomHandler.getWindowScrollTop();
if (top > viewport.height) {
elementRef.current.style.top = viewport.height - top + 'px';
} else {
elementRef.current.style.top = '0px';
}
if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
DomHandler.addClass(elementRef.current, 'p-submenu-list-flipped');
}
}
};
var onItemClick = function onItemClick(event, processedItem) {
var item = processedItem.item;
if (isItemDisabled(processedItem)) {
event.preventDefault();
return;
}
if (item.command) {
item.command({
originalEvent: event,
item: item
});
}
props.onItemClick && props.onItemClick({
originalEvent: event,
processedItem: processedItem
});
if (!item.url) {
event.preventDefault();
event.stopPropagation();
}
};
var getItemId = function getItemId(processedItem) {
if (processedItem.item && processedItem.item.id) {
return processedItem.item.id;
}
return "".concat(props.menuId, "_").concat(processedItem.key);
};
var getItemProp = function getItemProp(processedItem, name, params) {
return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name], params) : undefined;
};
var isItemActive = function isItemActive(processedItem) {
return props.activeItemPath.some(function (path) {
return path.key === processedItem.key;
});
};
var isItemVisible = function isItemVisible(processedItem) {
return getItemProp(processedItem, 'visible') !== false;
};
var isItemDisabled = function isItemDisabled(processedItem) {
return getItemProp(processedItem, 'disabled');
};
var isItemFocused = function isItemFocused(processedItem) {
return props.focusedItemId === getItemId(processedItem);
};
var isItemGroup = function isItemGroup(processedItem) {
return ObjectUtils.isNotEmpty(processedItem.items);
};
var onItemMouseEnter = function onItemMouseEnter(event, processedItem) {
props.onItemMouseEnter && props.onItemMouseEnter({
originalEvent: event,
processedItem: processedItem
});
};
var getAriaSetSize = function getAriaSetSize() {
return props.model.filter(function (processedItem) {
return isItemVisible(processedItem) && !getItemProp(processedItem, 'separator');
}).length;
};
var getAriaPosInset = function getAriaPosInset(index) {
return index - props.model.slice(0, index).filter(function (processedItem) {
return isItemVisible(processedItem) && getItemProp(processedItem, 'separator');
}).length + 1;
};
useUpdateEffect(function () {
if (!props.root && props.parentActive && !props.isMobileMode) {
position();
}
}, [props.parentActive]);
React.useImperativeHandle(ref, function () {
return {
getElement: function getElement() {
return elementRef.current;
}
};
});
var createSeparator = function createSeparator(index) {
var key = 'separator_' + index;
var separatorProps = mergeProps({
className: cx('separator'),
role: 'separator'
}, ptm('separator', {
hostName: props.hostName
}));
return /*#__PURE__*/React.createElement("li", _extends({}, separatorProps, {
key: key
}));
};
var createSubmenu = function createSubmenu(processedItem, index) {
if (isItemGroup(processedItem)) {
return /*#__PURE__*/React.createElement(TieredMenuSub, {
id: props.id + '_' + index,
menuProps: props.menuProps,
model: processedItem.items,
menuId: props.menuId,
ariaLabelledby: getItemId(processedItem),
focusedItemId: props.focusedItemId,
activeItemPath: props.activeItemPath,
level: props.level + 1,
onItemClick: props.onItemClick,
popup: props.popup,
onItemMouseEnter: props.onItemMouseEnter,
parentActive: isItemActive(processedItem),
isMobileMode: props.isMobileMode,
submenuIcon: props.submenuIcon,
ptm: props.ptm,
cx: cx,
sx: sx
});
}
return null;
};
var createMenuItem = function createMenuItem(processedItem, index) {
if (isItemVisible(processedItem) === false) {
return null;
}
var item = processedItem.item;
var style = getItemProp(processedItem, 'style');
var itemClassName = getItemProp(processedItem, 'className');
var _icon = getItemProp(processedItem, 'icon');
var target = getItemProp(processedItem, 'target');
var url = getItemProp(processedItem, 'url');
var key = getItemId(processedItem);
var focused = isItemFocused(processedItem);
var active = isItemActive(processedItem);
var disabled = isItemDisabled(processedItem);
var grouped = isItemGroup(processedItem);
var linkClassName = classNames('p-menuitem-link');
var iconClassName = classNames('p-menuitem-icon', _icon);
var iconProps = mergeProps({
className: classNames(item.icon, 'p-menuitem-icon', 'icon')
}, getPTOptions(processedItem, 'icon'));
var icon = IconUtils.getJSXIcon(_icon, _objectSpread$p({}, iconProps), {
props: props.menuProps
});
var labelProps = mergeProps({
className: cx('label')
}, getPTOptions(processedItem, 'label'));
var label = item.label && /*#__PURE__*/React.createElement("span", labelProps, item.label);
var submenuIconClassName = 'p-submenu-icon';
var submenuIconProps = mergeProps({
className: cx('submenuIcon')
}, getPTOptions(processedItem, 'submenuIcon'));
var submenuIcon = grouped && IconUtils.getJSXIcon(props.submenuIcon || /*#__PURE__*/React.createElement(AngleRightIcon, submenuIconProps), _objectSpread$p({}, submenuIconProps), {
props: props.menuProps
});
var submenu = createSubmenu(processedItem, index);
var actionProps = mergeProps({
href: url || '#',
tabIndex: '-1',
onFocus: function onFocus(event) {
return event.stopPropagation();
},
className: cx('action'),
target: target
}, getPTOptions(processedItem, 'action'));
var content = /*#__PURE__*/React.createElement("a", actionProps, icon, label, submenuIcon, /*#__PURE__*/React.createElement(Ripple, null));
if (item.template) {
var defaultContentOptions = {
className: linkClassName,
labelClassName: 'p-menuitem-text',
iconClassName: iconClassName,
submenuIconClassName: submenuIconClassName,
element: content,
props: props,
active: active,
disabled: disabled
};
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
}
var contentProps = mergeProps({
onClick: function onClick(event) {
return onItemClick(event, processedItem);
},
onMouseEnter: function onMouseEnter(event) {
return onItemMouseEnter(event, processedItem);
},
className: cx('content')
}, getPTOptions(processedItem, 'content'));
var menuitemProps = mergeProps({
id: key,
'aria-label': item.label,
'aria-disabled': disabled,
'aria-expanded': grouped ? active : undefined,
'aria-haspopup': grouped && !url ? 'menu' : undefined,
'aria-setsize': getAriaSetSize(),
'aria-posinset': getAriaPosInset(index),
'data-p-highlight': active,
'data-p-disabled': disabled,
'data-p-visited': focused,
className: cx('menuitem', {
itemClassName: itemClassName,
active: active,
focused: focused,
disabled: disabled
}),
style: style,
onMouseEnter: function onMouseEnter(event) {
return onItemMouseEnter(event, item);
},
role: 'menuitem'
}, getPTOptions(processedItem, 'menuitem'));
return /*#__PURE__*/React.createElement("li", _extends({}, menuitemProps, {
key: key
}), /*#__PURE__*/React.createElement("div", contentProps, content), submenu);
};
var createItem = function createItem(processedItem, index) {
if (processedItem.visible === false) {
return null;
}
return getItemProp(processedItem, 'separator') ? createSeparator(index) : createMenuItem(processedItem, index);
};
var createMenu = function createMenu() {
return props.model ? props.model.map(createItem) : null;
};
var submenu = createMenu();
var ptKey = props.root ? 'menu' : 'submenu';
var menuProps = mergeProps({
ref: elementRef,
id: props.id,
tabIndex: props.tabIndex,
onFocus: props.onFocus,
onBlur: props.onBlur,
onKeyDown: props.onKeyDown,
className: cx(ptKey, {
subProps: props
}),
style: sx(ptKey, {
subProps: props
}),
role: props.root ? 'menubar' : 'menu',
'aria-label': props.ariaLabel,
'aria-labelledby': props.ariaLabelledby,
'aria-orientation': props.ariaOrientation,
'aria-activedescendant': props.focusedItemId
}, ptm(ptKey, {
hostName: props.hostName
}));
return /*#__PURE__*/React.createElement("ul", menuProps, submenu);
}));
TieredMenuSub.displayName = 'TieredMenuSub';
function ownKeys$o(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$o(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$o(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$o(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var TieredMenu = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = TieredMenuBase.getProps(inProps, context);
var _React$useState = React.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var _React$useState3 = React.useState(!props.popup),
_React$useState4 = _slicedToArray(_React$useState3, 2),
visibleState = _React$useState4[0],
setVisibleState = _React$useState4[1];
var _React$useState5 = React.useState([]),
_React$useState6 = _slicedToArray(_React$useState5, 2),
activeItemPath = _React$useState6[0],
setActiveItemPath = _React$useState6[1];
var _React$useState7 = React.useState(false),
_React$useState8 = _slicedToArray(_React$useState7, 2),
focused = _React$useState8[0],
setFocused = _React$useState8[1];
var _React$useState9 = React.useState(null),
_React$useState10 = _slicedToArray(_React$useState9, 2),
focusedItemId = _React$useState10[0],
setFocusedItemId = _React$useState10[1];
var _React$useState11 = React.useState({
index: -1,
level: 0,
parentKey: ''
}),
_React$useState12 = _slicedToArray(_React$useState11, 2),
focusedItemInfo = _React$useState12[0],
setFocusedItemInfo = _React$useState12[1];
var _React$useState13 = React.useState(false),
_React$useState14 = _slicedToArray(_React$useState13, 2),
dirty = _React$useState14[0],
setDirty = _React$useState14[1];
var _React$useState15 = React.useState([]),
_React$useState16 = _slicedToArray(_React$useState15, 2),
processedItems = _React$useState16[0],
setProcessedItems = _React$useState16[1];
var _React$useState17 = React.useState([]),
_React$useState18 = _slicedToArray(_React$useState17, 2),
visibleItems = _React$useState18[0],
setVisibleItems = _React$useState18[1];
var _React$useState19 = React.useState(false),
_React$useState20 = _slicedToArray(_React$useState19, 2),
focusTrigger = _React$useState20[0],
setFocusTrigger = _React$useState20[1];
var _React$useState21 = React.useState(null),
_React$useState22 = _slicedToArray(_React$useState21, 2),
attributeSelectorState = _React$useState22[0],
setAttributeSelectorState = _React$useState22[1];
var metaData = _objectSpread$o(_objectSpread$o({
props: props
}, props.__parentMetadata), {}, {
state: {
id: idState,
visible: visibleState,
attributeSelector: attributeSelectorState
}
});
var _TieredMenuBase$setMe = TieredMenuBase.setMetaData(metaData),
ptm = _TieredMenuBase$setMe.ptm,
cx = _TieredMenuBase$setMe.cx,
sx = _TieredMenuBase$setMe.sx,
isUnstyled = _TieredMenuBase$setMe.isUnstyled;
useHandleStyle(TieredMenuBase.css.styles, isUnstyled, {
name: 'tieredmenu'
});
var containerRef = React.useRef(null);
var menuRef = React.useRef(null);
var targetRef = React.useRef(null);
var relatedTarget = React.useRef(null);
var styleElementRef = React.useRef(null);
var searchValue = React.useRef(null);
var searchTimeout = React.useRef(null);
var isMobileMode = useMatchMedia("screen and (max-width: ".concat(props.breakpoint, ")"), !!props.breakpoint);
var _useEventListener = useEventListener({
type: 'click',
listener: function listener(event) {
var isOutsideContainer = containerRef.current && !containerRef.current.contains(event.target);
var isOutsideTarget = props.popup ? !(targetRef.current && (targetRef.current === event.target || targetRef.current.contains(event.target))) : true;
if (isOutsideContainer && isOutsideTarget) {
hide(event, !props.popup);
}
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentClickListener = _useEventListener2[0],
unbindDocumentClickListener = _useEventListener2[1];
var _useResizeListener = useResizeListener({
listener: function listener() {
!isMobileMode && hide(event, true);
}
}),
_useResizeListener2 = _slicedToArray(_useResizeListener, 2),
bindDocumentResizeListener = _useResizeListener2[0],
unbindDocumentResizeListener = _useResizeListener2[1];
var onPanelClick = function onPanelClick(event) {
if (props.popup) {
OverlayService.emit('overlay-click', {
originalEvent: event,
target: targetRef.current
});
}
};
var toggle = function toggle(event) {
if (props.popup) {
visibleState ? hide(event) : show(event);
}
};
var show = function show(event) {
if (props.popup) {
targetRef.current = event.currentTarget;
setVisibleState(true);
props.onShow && props.onShow(event);
relatedTarget.current = event.relatedTarget || null;
}
setFocusedItemInfo({
index: findFirstFocusedItemIndex(),
level: 0,
parentKey: ''
});
};
var hide = function hide(event, isFocus) {
if (props.popup) {
setVisibleState(false);
props.onHide && props.onHide(event);
}
var menuElement = getMenuElement();
setActiveItemPath([]);
setFocusedItemInfo({
index: -1,
level: 0,
parentKey: ''
});
isFocus && DomHandler.focus(relatedTarget.current || targetRef.current || menuElement);
setDirty(false);
};
var onFocus = function onFocus(event) {
setFocused(true);
setFocusedItemInfo(focusedItemInfo.index !== -1 ? focusedItemInfo : {
index: findFirstFocusedItemIndex(),
level: 0,
parentKey: ''
});
props.onFocus && props.onFocus(event);
};
var onBlur = function onBlur(event) {
setFocused(false);
setFocusedItemInfo({
index: -1,
level: 0,
parentKey: ''
});
searchValue.current = '';
setDirty(false);
props.onBlur && props.onBlur(event);
};
var onKeyDown = function onKeyDown(event) {
var metaKey = event.metaKey || event.ctrlKey;
switch (event.code) {
case 'ArrowDown':
onArrowDownKey(event);
break;
case 'ArrowUp':
onArrowUpKey(event);
break;
case 'ArrowLeft':
onArrowLeftKey(event);
break;
case 'ArrowRight':
onArrowRightKey(event);
break;
case 'Home':
onHomeKey(event);
break;
case 'End':
onEndKey(event);
break;
case 'Space':
onSpaceKey(event);
break;
case 'Enter':
case 'NumpadEnter':
onEnterKey(event);
break;
case 'Escape':
props.popup && DomHandler.focus(targetRef.current);
onEscapeKey(event);
break;
case 'Tab':
onTabKey(event);
break;
case 'PageDown':
case 'PageUp':
case 'Backspace':
case 'ShiftLeft':
case 'ShiftRight':
//NOOP
break;
default:
if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
searchItems(event.key);
}
break;
}
};
var onItemChange = function onItemChange(event) {
var processedItem = event.processedItem,
isFocus = event.isFocus;
if (ObjectUtils.isEmpty(processedItem)) {
return;
}
var index = processedItem.index,
key = processedItem.key,
level = processedItem.level,
parentKey = processedItem.parentKey,
items = processedItem.items;
var grouped = ObjectUtils.isNotEmpty(items);
var _activeItemPath = activeItemPath.filter(function (p) {
return p.parentKey !== parentKey && p.parentKey !== key;
});
if (grouped) {
_activeItemPath.push(processedItem);
}
setFocusedItemInfo({
index: index,
level: level,
parentKey: parentKey
});
setActiveItemPath(_activeItemPath);
grouped && setDirty(true);
isFocus && DomHandler.focus(getMenuElement());
};
var onItemClick = function onItemClick(event) {
var originalEvent = event.originalEvent,
processedItem = event.processedItem;
if (isItemDisabled(processedItem) || props.isMobileMode) {
return;
}
var grouped = isProccessedItemGroup(processedItem);
var root = ObjectUtils.isEmpty(processedItem.parent);
var selected = isSelected(processedItem);
var menuElement = getMenuElement();
if (selected) {
var index = processedItem.index,
key = processedItem.key,
level = processedItem.level,
parentKey = processedItem.parentKey;
setActiveItemPath(activeItemPath.filter(function (p) {
return key !== p.key && key.startsWith(p.key);
}));
setFocusedItemInfo({
index: index,
level: level,
parentKey: parentKey
});
if (!grouped) {
setDirty(!root);
}
setTimeout(function () {
DomHandler.focus(menuElement);
if (grouped) {
setDirty(true);
}
}, 0);
} else if (grouped) {
DomHandler.focus(menuElement);
onItemChange(event);
} else {
var rootProcessedItem = root ? processedItem : activeItemPath.find(function (p) {
return p.parentKey === '';
});
var rootProcessedItemIndex = rootProcessedItem ? rootProcessedItem.index : -1;
hide(originalEvent, true);
setFocusedItemInfo({
index: rootProcessedItemIndex,
parentKey: rootProcessedItem ? rootProcessedItem.parentKey : ''
});
}
};
var onItemMouseEnter = function onItemMouseEnter(event) {
var originalEvent = event.originalEvent,
processedItem = event.processedItem;
if (isItemDisabled(processedItem) || props.isMobileMode) {
originalEvent.preventDefault();
return;
}
if (dirty && !props.popup) {
onItemChange(event);
}
};
var onArrowDownKey = function onArrowDownKey(event) {
var itemIndex = focusedItemInfo.index !== -1 ? findNextItemIndex(focusedItemInfo.index) : findFirstFocusedItemIndex();
changeFocusedItemIndex(itemIndex);
event.preventDefault();
};
var onArrowUpKey = function onArrowUpKey(event) {
if (event.altKey) {
if (props.popup) {
DomHandler.focus(targetRef.current);
}
if (focusedItemInfo.index !== -1) {
var processedItem = visibleItems[focusedItemInfo.index];
var grouped = isProccessedItemGroup(processedItem);
!grouped && onItemChange({
originalEvent: event,
processedItem: processedItem
});
}
props.popup && hide(event, true);
event.preventDefault();
} else {
var itemIndex = focusedItemInfo.index !== -1 ? findPrevItemIndex(focusedItemInfo.index) : findLastFocusedItemIndex();
changeFocusedItemIndex(itemIndex);
event.preventDefault();
}
};
var onArrowLeftKey = function onArrowLeftKey(event) {
var processedItem = visibleItems[focusedItemInfo.index];
var parentItem = activeItemPath.find(function (p) {
return p.key === processedItem.parentKey;
});
var root = ObjectUtils.isEmpty(processedItem.parent);
if (!root) {
setFocusedItemInfo({
index: -1,
parentKey: parentItem ? parentItem.parentKey : ''
});
searchValue.current = '';
setTimeout(function () {
return setFocusTrigger(true);
}, 0);
}
setActiveItemPath(activeItemPath.filter(function (p) {
return p.parentKey !== focusedItemInfo.parentKey;
}));
event.preventDefault();
};
var onArrowRightKey = function onArrowRightKey(event) {
var processedItem = visibleItems[focusedItemInfo.index];
var grouped = isProccessedItemGroup(processedItem);
if (grouped) {
onItemChange({
originalEvent: event,
processedItem: processedItem
});
setFocusedItemInfo({
index: -1,
parentKey: processedItem.key
});
searchValue.current = '';
setTimeout(function () {
return setFocusTrigger(true);
}, 0);
}
event.preventDefault();
};
var onHomeKey = function onHomeKey(event) {
changeFocusedItemIndex(findFirstItemIndex());
event.preventDefault();
};
var onEndKey = function onEndKey(event) {
changeFocusedItemIndex(findLastItemIndex());
event.preventDefault();
};
var onEnterKey = function onEnterKey(event) {
if (focusedItemInfo.index !== -1) {
var _element = DomHandler.findSingle(getMenuElement(), "li[id=\"".concat("".concat(focusedItemId), "\"]"));
var anchorElement = _element && DomHandler.findSingle(_element, '[data-pc-section="action"]');
props.popup && DomHandler.focus(targetRef.current);
anchorElement ? anchorElement.click() : _element && _element.click();
}
event.preventDefault();
};
var onSpaceKey = function onSpaceKey(event) {
onEnterKey(event);
};
var onEscapeKey = function onEscapeKey(event) {
hide(event, true);
!props.popup && setFocusedItemInfo(_objectSpread$o(_objectSpread$o({}, focusedItemInfo), {}, {
index: findFirstFocusedItemIndex()
}));
event.preventDefault();
};
var onTabKey = function onTabKey(event) {
if (focusedItemInfo.index !== -1) {
var processedItem = visibleItems[focusedItemInfo.index];
var grouped = isProccessedItemGroup(processedItem);
!grouped && onItemChange({
originalEvent: event,
processedItem: processedItem
});
}
hide(event);
};
var getMenuElement = function getMenuElement() {
return menuRef.current.getElement() || null;
};
var getItemProp = function getItemProp(item, name) {
return item ? ObjectUtils.getItemValue(item[name]) : undefined;
};
var getItemLabel = function getItemLabel(item) {
return getItemProp(item, 'label');
};
var isItemDisabled = function isItemDisabled(item) {
return getItemProp(item, 'disabled');
};
var isItemSeparator = function isItemSeparator(item) {
return getItemProp(item, 'separator');
};
var getProccessedItemLabel = function getProccessedItemLabel(processedItem) {
return processedItem ? getItemLabel(processedItem.item) : undefined;
};
var isProccessedItemGroup = function isProccessedItemGroup(processedItem) {
return processedItem && ObjectUtils.isNotEmpty(processedItem.items);
};
var isItemMatched = function isItemMatched(processedItem) {
return isValidItem(processedItem) && getProccessedItemLabel(processedItem).toLocaleLowerCase().startsWith(searchValue.current.toLocaleLowerCase());
};
var isValidItem = function isValidItem(processedItem) {
return !!processedItem && !isItemDisabled(processedItem.item) && !isItemSeparator(processedItem.item);
};
var isValidSelectedItem = function isValidSelectedItem(processedItem) {
return isValidItem(processedItem) && isSelected(processedItem);
};
var isSelected = function isSelected(processedItem) {
return activeItemPath.some(function (p) {
return p.key === processedItem.key;
});
};
var findFirstItemIndex = function findFirstItemIndex() {
return visibleItems.findIndex(function (processedItem) {
return isValidItem(processedItem);
});
};
var findLastItemIndex = function findLastItemIndex() {
return ObjectUtils.findLastIndex(visibleItems, function (processedItem) {
return isValidItem(processedItem);
});
};
var findNextItemIndex = function findNextItemIndex(index) {
var matchedItemIndex = index < visibleItems.length - 1 ? visibleItems.slice(index + 1).findIndex(function (processedItem) {
return isValidItem(processedItem);
}) : -1;
return matchedItemIndex > -1 ? matchedItemIndex + index + 1 : index;
};
var findPrevItemIndex = function findPrevItemIndex(index) {
var matchedItemIndex = index > 0 ? ObjectUtils.findLastIndex(visibleItems.slice(0, index), function (processedItem) {
return isValidItem(processedItem);
}) : -1;
return matchedItemIndex > -1 ? matchedItemIndex : index;
};
var findSelectedItemIndex = function findSelectedItemIndex() {
return visibleItems.findIndex(function (processedItem) {
return isValidSelectedItem(processedItem);
});
};
var findFirstFocusedItemIndex = function findFirstFocusedItemIndex() {
var selectedIndex = findSelectedItemIndex();
return selectedIndex < 0 ? findFirstItemIndex() : selectedIndex;
};
var findLastFocusedItemIndex = function findLastFocusedItemIndex() {
var selectedIndex = findSelectedItemIndex();
return selectedIndex < 0 ? findLastItemIndex() : selectedIndex;
};
var searchItems = function searchItems(_char) {
searchValue.current = (searchValue.current || '') + _char;
var itemIndex = -1;
var matched = false;
if (focusedItemInfo.index !== -1) {
itemIndex = visibleItems.slice(focusedItemInfo.index).findIndex(function (processedItem) {
return isItemMatched(processedItem);
});
itemIndex = itemIndex === -1 ? visibleItems.slice(0, focusedItemInfo.index).findIndex(function (processedItem) {
return isItemMatched(processedItem);
}) : itemIndex + focusedItemInfo.index;
} else {
itemIndex = visibleItems.findIndex(function (processedItem) {
return isItemMatched(processedItem);
});
}
if (itemIndex !== -1) {
matched = true;
}
if (itemIndex === -1 && focusedItemInfo.index === -1) {
itemIndex = findFirstFocusedItemIndex();
}
if (itemIndex !== -1) {
changeFocusedItemIndex(itemIndex);
}
if (searchTimeout.current) {
clearTimeout(searchTimeout);
}
searchTimeout.current = setTimeout(function () {
searchValue.current = '';
searchTimeout.current = null;
}, 500);
return matched;
};
var changeFocusedItemIndex = function changeFocusedItemIndex(index) {
if (focusedItemInfo.index !== index) {
setFocusedItemInfo(_objectSpread$o(_objectSpread$o({}, focusedItemInfo), {}, {
index: index
}));
scrollInView();
}
};
var scrollInView = function scrollInView() {
var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
var id = index !== -1 ? "".concat(idState, "_").concat(index) : focusedItemId;
var element = DomHandler.findSingle(getMenuElement(), "li[id=\"".concat(id, "\"]"));
if (element) {
element.scrollIntoView && element.scrollIntoView({
block: 'nearest',
inline: 'start'
});
}
};
var createProcessedItems = React.useCallback(function (items) {
var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var parentKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
var processedItems = [];
items && items.forEach(function (item, index) {
var key = (parentKey !== '' ? parentKey + '_' : '') + index;
var newItem = {
item: item,
index: index,
level: level,
key: key,
parent: parent,
parentKey: parentKey
};
newItem.items = createProcessedItems(item.items, level + 1, newItem, key);
processedItems.push(newItem);
});
return processedItems;
}, []);
var createStyle = function createStyle() {
if (!styleElementRef.current) {
styleElementRef.current = DomHandler.createInlineStyle(context && context.nonce || PrimeReact.nonce, context && context.styleContainer);
var selector = "".concat(attributeSelectorState);
var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n .p-tieredmenu[").concat(selector, "] > ul {\n max-height: ").concat(props.scrollHeight, ";\n overflow: ").concat(props.scrollHeight ? 'auto' : '', ";\n }\n\n .p-tieredmenu[").concat(selector, "] .p-submenu-list {\n position: relative;\n }\n\n .p-tieredmenu[").concat(selector, "] .p-menuitem-active > .p-submenu-list {\n left: 0;\n box-shadow: none;\n border-radius: 0;\n padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */\n }\n\n .p-tieredmenu[").concat(selector, "] .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {\n transform: rotate(-180deg);\n }\n\n .p-tieredmenu[").concat(selector, "] .p-submenu-icon:before {\n content: \"\\e930\";\n }\n\n ").concat(!props.popup ? ".p-tieredmenu[".concat(selector, "] { width: 100%; }") : '', "\n}\n");
styleElementRef.current.innerHTML = innerHTML;
}
};
var destroyStyle = function destroyStyle() {
styleElementRef.current = DomHandler.removeInlineStyle(styleElementRef.current);
};
var alignOverlay = function alignOverlay() {
var calculateMinWidth = DomHandler.getOuterWidth(targetRef.current) > DomHandler.getOuterWidth(containerRef.current);
DomHandler.alignOverlay(containerRef.current, targetRef.current, props.appendTo, calculateMinWidth);
};
var onEnter = function onEnter() {
if (props.autoZIndex) {
ZIndexUtils.set('menu', containerRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, props.baseZIndex || context && context.zIndex.menu || PrimeReact.zIndex.menu);
}
DomHandler.addStyles(containerRef.current, {
position: 'absolute',
top: '0',
left: '0'
});
alignOverlay();
DomHandler.focus(menuRef.current.getElement());
scrollInView();
if (attributeSelectorState && props.breakpoint) {
containerRef.current.setAttribute(attributeSelectorState, '');
createStyle();
}
};
var onEntered = function onEntered() {
bindDocumentClickListener();
bindDocumentResizeListener();
};
var onExit = function onExit() {
targetRef.current = null;
unbindDocumentClickListener();
unbindDocumentResizeListener();
};
var onExited = function onExited() {
ZIndexUtils.clear(containerRef.current);
destroyStyle();
};
useMountEffect(function () {
var uniqueId = UniqueComponentId();
!idState && setIdState(uniqueId);
if (props.breakpoint) {
!attributeSelectorState && setAttributeSelectorState(uniqueId);
}
});
React.useEffect(function () {
var itemsToProcess = props.model || [];
var processed = createProcessedItems(itemsToProcess);
setProcessedItems(processed);
}, [props.model, createProcessedItems]);
useUpdateEffect(function () {
var processedItem = activeItemPath.find(function (p) {
return p.key === focusedItemInfo.parentKey;
});
var processed = processedItem ? processedItem.items : processedItems;
setVisibleItems(processed);
}, [activeItemPath, focusedItemInfo, processedItems]);
useUpdateEffect(function () {
var focusedId = focusedItemInfo.index !== -1 ? "".concat(idState).concat(ObjectUtils.isNotEmpty(focusedItemInfo.parentKey) ? '_' + focusedItemInfo.parentKey : '', "_").concat(focusedItemInfo.index) : null;
setFocusedItemId(focusedId);
}, [focusedItemInfo]);
useUpdateEffect(function () {
if (!props.popup) {
if (ObjectUtils.isNotEmpty(activeItemPath)) {
bindDocumentClickListener();
bindDocumentResizeListener();
} else {
unbindDocumentClickListener();
unbindDocumentResizeListener();
}
}
}, [activeItemPath]);
useUpdateEffect(function () {
if (focusTrigger) {
var itemIndex = focusedItemInfo.index !== -1 ? findNextItemIndex(focusedItemInfo.index) : findFirstFocusedItemIndex();
changeFocusedItemIndex(itemIndex);
setActiveItemPath(activeItemPath.filter(function (p) {
return p.parentKey !== focusedItemInfo.parentKey;
}));
setFocusTrigger(false);
}
}, [focusTrigger]);
useUpdateEffect(function () {
if (attributeSelectorState && containerRef.current) {
containerRef.current.setAttribute(attributeSelectorState, '');
createStyle();
}
return function () {
destroyStyle();
};
}, [attributeSelectorState, props.breakpoint]);
useUnmountEffect(function () {
ZIndexUtils.clear(containerRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
toggle: toggle,
show: show,
hide: hide,
getElement: function getElement() {
return containerRef.current;
}
};
});
var createElement = function createElement() {
var rootProps = mergeProps({
ref: containerRef,
id: props.id,
className: classNames(props.className, cx('root')),
style: props.style,
onClick: onPanelClick
}, TieredMenuBase.getOtherProps(props), ptm('root'));
var transitionProps = mergeProps({
classNames: cx('transition'),
"in": visibleState,
timeout: {
enter: 120,
exit: 100
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: onEnter,
onEntered: onEntered,
onExit: onExit,
onExited: onExited
}, ptm('transition'));
return /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: containerRef
}, transitionProps), /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement(TieredMenuSub, {
id: idState + '_list',
ref: menuRef,
hostName: "TieredMenu",
menuProps: props,
tabIndex: 0,
model: processedItems,
ariaLabel: props.ariaLabel,
ariaLabelledBy: props.ariaLabelledBy,
ariaOrientation: "vertical",
ariaActiveDescendant: focused ? focusedItemId : undefined,
menuId: idState,
level: 0,
focusedItemId: focusedItemId,
activeItemPath: activeItemPath,
onFocus: onFocus,
onBlur: onBlur,
onKeyDown: onKeyDown,
onItemClick: onItemClick,
onItemMouseEnter: onItemMouseEnter,
root: true,
popup: props.popup,
onHide: hide,
isMobileMode: isMobileMode,
submenuIcon: props.submenuIcon,
ptm: ptm,
cx: cx,
sx: sx
})));
};
var element = createElement();
return props.popup ? /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo
}) : element;
}));
TieredMenu.displayName = 'TieredMenu';
var classes$d = {
icon: 'p-button-icon p-c',
root: function root(_ref) {
var props = _ref.props,
size = _ref.size;
return classNames('p-splitbutton p-component', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
'p-disabled': props.disabled,
'p-button-loading-label-only': props.loading && !props.icon && props.label
}, "p-button-".concat(props.severity), props.severity), 'p-button-raised', props.raised), 'p-button-rounded', props.rounded), 'p-button-text', props.text), 'p-button-outlined', props.outlined), "p-button-".concat(size), size));
},
button: 'p-splitbutton-defaultbutton',
menuButton: 'p-splitbutton-menubutton',
menu: function menu(_ref2) {
var props = _ref2.props;
return classNames('p-menu p-menu-overlay p-component', props.menuClassName);
},
menuList: 'p-menu-list p-reset',
separator: 'p-menu-separator',
menuIcon: 'p-menuitem-icon',
menuLabel: 'p-menuitem-text',
anchor: function anchor(_ref3) {
var _className = _ref3._className,
disabled = _ref3.disabled;
return classNames('p-menuitem-link', _className, {
'p-disabled': disabled
});
},
menuItem: 'p-menuitem',
transition: 'p-connected-overlay'
};
var styles$9 = "\n@layer primereact {\n .p-splitbutton {\n display: inline-flex;\n position: relative;\n }\n\n .p-splitbutton .p-splitbutton-defaultbutton,\n .p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button,\n .p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button,\n .p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover {\n flex: 1 1 auto;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: 0 none;\n }\n\n .p-splitbutton-menubutton,\n .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,\n .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {\n display: flex;\n align-items: center;\n justify-content: center;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n .p-splitbutton .p-menu {\n min-width: 100%;\n }\n\n .p-fluid .p-splitbutton {\n display: flex;\n }\n}\n";
var SplitButtonBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'SplitButton',
id: null,
label: null,
icon: null,
autoZIndex: true,
baseZIndex: 0,
loading: false,
loadingIcon: null,
model: null,
disabled: null,
style: null,
className: null,
buttonClassName: null,
menuStyle: null,
menuClassName: null,
menuButtonClassName: null,
buttonProps: null,
menuButtonProps: null,
tabIndex: null,
severity: null,
rounded: false,
raised: false,
outlined: false,
text: false,
size: null,
appendTo: null,
tooltip: null,
tooltipOptions: null,
buttonTemplate: null,
transitionOptions: null,
dropdownIcon: null,
onClick: null,
onShow: null,
onHide: null,
children: undefined
},
css: {
classes: classes$d,
styles: styles$9
}
});
function ownKeys$n(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$n(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$n(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$n(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var SplitButton = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var _props$id;
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = SplitButtonBase.getProps(inProps, context);
var _React$useState = React.useState((_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : UniqueComponentId),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
overlayVisibleState = _React$useState4[0],
setOverlayVisibleState = _React$useState4[1];
var elementRef = React.useRef(null);
var menuRef = React.useRef(null);
var defaultButtonRef = React.useRef(null);
var overlayRef = React.useRef(null);
var overlayDisplayOrder = useDisplayOrder('split-button-tooltip', overlayVisibleState);
var metaData = {
props: props,
state: {
id: idState,
overlayVisible: overlayVisibleState
}
};
var _SplitButtonBase$setM = SplitButtonBase.setMetaData(metaData),
ptm = _SplitButtonBase$setM.ptm,
cx = _SplitButtonBase$setM.cx,
isUnstyled = _SplitButtonBase$setM.isUnstyled;
useHandleStyle(SplitButtonBase.css.styles, isUnstyled, {
name: 'splitbutton'
});
useGlobalOnEscapeKey({
callback: function callback() {
hide();
},
when: overlayVisibleState && overlayDisplayOrder,
priority: [ESC_KEY_HANDLING_PRIORITIES.SPLIT_BUTTON, overlayDisplayOrder]
});
var onPanelClick = function onPanelClick(event) {
OverlayService.emit('overlay-click', {
originalEvent: event,
target: elementRef.current
});
};
var onMenuButtonKeyDown = function onMenuButtonKeyDown(event) {
if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {
onDropdownButtonClick(event);
event.preventDefault();
}
};
var onDropdownButtonClick = function onDropdownButtonClick(event) {
overlayVisibleState ? hide(event) : show(event);
};
var show = function show(event) {
setOverlayVisibleState(true);
menuRef.current && menuRef.current.show(event);
};
var hide = function hide(event) {
setOverlayVisibleState(false);
menuRef.current && menuRef.current.hide(event);
};
var onMenuShow = function onMenuShow() {
props.onShow && props.onShow();
};
var onMenuHide = function onMenuHide() {
setOverlayVisibleState(false);
props.onHide && props.onHide();
};
var alignOverlay = function alignOverlay() {
DomHandler.alignOverlay(overlayRef.current, defaultButtonRef.current.parentElement, props.appendTo || context && context.appendTo || PrimeReact.appendTo);
};
useMountEffect(function () {
if (!idState) {
setIdState(UniqueComponentId());
}
alignOverlay();
});
useUnmountEffect(function () {
ZIndexUtils.clear(overlayRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
show: show,
hide: hide,
getElement: function getElement() {
return elementRef.current;
}
};
});
if (props.visible === false) {
return null;
}
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var sizeMapping = {
large: 'lg',
small: 'sm'
};
var size = sizeMapping[props.size];
var buttonContent = props.buttonTemplate ? ObjectUtils.getJSXElement(props.buttonTemplate, props) : null;
var menuId = idState + '_overlay';
var dropdownIcon = function dropdownIcon() {
var iconProps = mergeProps({
className: cx('icon')
}, ptm('icon'));
var icon = props.dropdownIcon || /*#__PURE__*/React.createElement(ChevronDownIcon, iconProps);
var dropdownIcon = IconUtils.getJSXIcon(icon, _objectSpread$n({}, iconProps), {
props: props
});
return dropdownIcon;
};
var rootProps = mergeProps({
ref: elementRef,
id: idState,
className: classNames(props.className, cx('root', {
size: size
})),
style: props.style
}, SplitButtonBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement(Button, _extends({
ref: defaultButtonRef,
type: "button",
className: classNames(props.buttonClassName, cx('button')),
icon: props.icon,
loading: props.loading,
loadingIcon: props.loadingIcon,
severity: props.severity,
label: props.label,
"aria-label": props.label,
raised: props.raised,
onClick: props.onClick,
disabled: props.disabled,
tabIndex: props.tabIndex,
size: props.size,
outlined: props.outlined,
text: props.text
}, props.buttonProps, {
pt: ptm('button'),
__parentMetadata: {
parent: metaData
},
unstyled: props.unstyled
}), buttonContent), /*#__PURE__*/React.createElement(Button, _extends({
type: "button",
className: classNames(props.menuButtonClassName, cx('menuButton')),
icon: dropdownIcon,
onClick: onDropdownButtonClick,
disabled: props.disabled,
"aria-expanded": overlayVisibleState,
"aria-haspopup": "true",
"aria-controls": menuId
}, props.menuButtonProps, {
size: props.size,
severity: props.severity,
outlined: props.outlined,
text: props.text,
raised: props.raised,
pt: ptm('menuButton'),
__parentMetadata: {
parent: metaData
},
onKeyDown: onMenuButtonKeyDown,
unstyled: props.unstyled
})), /*#__PURE__*/React.createElement(TieredMenu, {
ref: menuRef,
popup: true,
unstyled: props.unstyled,
model: props.model,
appendTo: props.appendTo,
id: menuId,
style: props.menuStyle,
autoZIndex: props.autoZIndex,
baseZIndex: props.baseZIndex,
className: classNames(props.menuClassName, cx('menu')),
onClick: onPanelClick,
onShow: onMenuShow,
onHide: onMenuHide,
pt: ptm('menu'),
__parentMetadata: {
parent: metaData
}
})), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip,
pt: ptm('tooltip')
}, props.tooltipOptions)));
}));
SplitButton.displayName = 'SplitButton';
var classes$c = {
root: function root(_ref) {
var props = _ref.props;
return classNames("p-splitter p-component p-splitter-".concat(props.layout));
},
gutter: 'p-splitter-gutter',
gutterHandler: 'p-splitter-gutter-handle',
panel: {
root: 'p-splitter-panel'
}
};
var styles$8 = "\n@layer primereact {\n .p-splitter {\n display: flex;\n flex-wrap: nowrap;\n }\n\n .p-splitter-vertical {\n flex-direction: column;\n }\n\n .p-splitter-panel {\n flex-grow: 1;\n }\n\n .p-splitter-panel-nested {\n display: flex;\n }\n\n .p-splitter-panel .p-splitter {\n flex-grow: 1;\n border: 0 none;\n }\n\n .p-splitter-gutter {\n flex-grow: 0;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: col-resize;\n }\n\n .p-splitter-horizontal.p-splitter-resizing {\n cursor: col-resize;\n user-select: none;\n }\n\n .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {\n height: 24px;\n width: 100%;\n }\n\n .p-splitter-horizontal > .p-splitter-gutter {\n cursor: col-resize;\n }\n\n .p-splitter-vertical.p-splitter-resizing {\n cursor: row-resize;\n user-select: none;\n }\n\n .p-splitter-vertical > .p-splitter-gutter {\n cursor: row-resize;\n }\n\n .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {\n width: 24px;\n height: 100%;\n }\n}\n\n";
var SplitterBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Splitter',
className: null,
gutterSize: 4,
id: null,
step: 5,
layout: 'horizontal',
onResizeEnd: null,
stateKey: null,
stateStorage: 'session',
style: null,
children: undefined
},
css: {
classes: classes$c,
styles: styles$8
}
});
var SplitterPanelBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'SplitterPanel',
className: null,
minSize: null,
size: null,
style: null,
children: undefined
},
getCProps: function getCProps(panel) {
return ObjectUtils.getComponentProps(panel, SplitterPanelBase.defaultProps);
},
getCOtherProps: function getCOtherProps(panel) {
return ObjectUtils.getComponentDiffProps(panel, SplitterPanelBase.defaultProps);
},
getCProp: function getCProp(panel, name) {
return ObjectUtils.getComponentProp(panel, name, SplitterPanelBase.defaultProps);
}
});
function ownKeys$m(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$m(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$m(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$m(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var SplitterPanel = function SplitterPanel() {};
var Splitter = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = SplitterBase.getProps(inProps, context);
var idState = React.useRef('');
var elementRef = React.useRef(null);
var gutterRef = React.useRef();
var gutterRefs = React.useRef({});
var size = React.useRef(null);
var dragging = React.useRef(null);
var startPos = React.useRef(null);
var prevPanelElement = React.useRef(null);
var nextPanelElement = React.useRef(null);
var prevPanelSize = React.useRef(null);
var prevSize = React.useRef(null);
var prevPanelSizeNew = React.useRef(null);
var nextPanelSize = React.useRef(null);
var nextPanelSizeNew = React.useRef(null);
var prevPanelIndex = React.useRef(null);
var timer = React.useRef(null);
var _React$useState = React.useState([]),
_React$useState2 = _slicedToArray(_React$useState, 2),
panelSizes = _React$useState2[0],
setPanelSizes = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
nested = _React$useState4[0],
setNested = _React$useState4[1];
var isStateful = props.stateKey != null;
var childrenLength = props.children && props.children.length || 1;
var panelSize = function panelSize(sizes, index) {
return index in sizes ? sizes[index] : props.children && [].concat(props.children)[index].props.size || 100 / childrenLength;
};
var horizontal = props.layout === 'horizontal';
var metaData = {
props: props,
state: {
panelSizes: panelSizes,
nested: DomHandler.getAttribute(elementRef.current && elementRef.current.parentElement, 'data-p-splitter-panel-nested') === true
}
};
var _SplitterBase$setMeta = SplitterBase.setMetaData(_objectSpread$m({}, metaData)),
ptm = _SplitterBase$setMeta.ptm,
cx = _SplitterBase$setMeta.cx,
isUnstyled = _SplitterBase$setMeta.isUnstyled;
useHandleStyle(SplitterBase.css.styles, isUnstyled, {
name: 'splitter'
});
var getPanelPT = function getPanelPT(key) {
return ptm(key, {
context: {
nested: nested
}
});
};
var _useEventListener = useEventListener({
type: 'mousemove',
listener: function listener(event) {
return onResize(event);
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentMouseMoveListener = _useEventListener2[0],
unbindDocumentMouseMoveListener = _useEventListener2[1];
var _useEventListener3 = useEventListener({
type: 'mouseup',
listener: function listener(event) {
onResizeEnd(event);
unbindMouseListeners();
}
}),
_useEventListener4 = _slicedToArray(_useEventListener3, 2),
bindDocumentMouseUpListener = _useEventListener4[0],
unbindDocumentMouseUpListener = _useEventListener4[1];
var bindMouseListeners = function bindMouseListeners() {
bindDocumentMouseMoveListener();
bindDocumentMouseUpListener();
};
var unbindMouseListeners = function unbindMouseListeners() {
unbindDocumentMouseMoveListener();
unbindDocumentMouseUpListener();
};
var getPanelProp = function getPanelProp(panel, name) {
return SplitterPanelBase.getCProp(panel, name);
};
var validateResize = function validateResize(newPrevPanelSize, newNextPanelSize) {
if (newPrevPanelSize > 100 || newPrevPanelSize < 0) {
return false;
}
if (newNextPanelSize > 100 || newNextPanelSize < 0) {
return false;
}
if (props.children[prevPanelIndex.current].props && props.children[prevPanelIndex.current].props.minSize && props.children[prevPanelIndex.current].props.minSize > newPrevPanelSize) {
return false;
}
if (props.children[prevPanelIndex.current + 1].props && props.children[prevPanelIndex.current + 1].props.minSize && props.children[prevPanelIndex.current + 1].props.minSize > newNextPanelSize) {
return false;
}
return true;
};
var clear = function clear() {
dragging.current = false;
size.current = null;
startPos.current = null;
prevPanelElement.current = null;
nextPanelElement.current = null;
prevPanelSize.current = null;
prevPanelSizeNew.current = null;
nextPanelSize.current = null;
nextPanelSizeNew.current = null;
prevPanelIndex.current = null;
};
var getStorage = React.useCallback(function () {
switch (props.stateStorage) {
case 'local':
return window.localStorage;
case 'session':
return window.sessionStorage;
default:
throw new Error(props.stateStorage + ' is not a valid value for the state storage, supported values are "local" and "session".');
}
}, [props.stateStorage]);
var saveState = function saveState(sizes) {
if (ObjectUtils.isArray(sizes)) {
getStorage().setItem(props.stateKey, JSON.stringify(sizes));
}
};
var restoreState = React.useCallback(function () {
var stateString = getStorage().getItem(props.stateKey);
if (stateString) {
setPanelSizes(JSON.parse(stateString));
}
}, [getStorage, props.stateKey]);
var onResizeStart = function onResizeStart(event, index, isKeyDown) {
var pageX = event.type === 'touchstart' ? event.touches[0].pageX : event.pageX;
var pageY = event.type === 'touchstart' ? event.touches[0].pageY : event.pageY;
gutterRef.current = gutterRefs.current[index];
size.current = horizontal ? DomHandler.getWidth(elementRef.current) : DomHandler.getHeight(elementRef.current);
dragging.current = true;
startPos.current = horizontal ? pageX : pageY;
prevPanelElement.current = gutterRef.current.previousElementSibling;
nextPanelElement.current = gutterRef.current.nextElementSibling;
if (isKeyDown) {
prevPanelSize.current = horizontal ? DomHandler.getOuterWidth(prevPanelElement.current, true) : DomHandler.getOuterHeight(prevPanelElement.current, true);
nextPanelSize.current = horizontal ? DomHandler.getOuterWidth(nextPanelElement.current, true) : DomHandler.getOuterHeight(nextPanelElement.current, true);
} else {
prevPanelSize.current = 100 * (horizontal ? DomHandler.getOuterWidth(prevPanelElement.current, true) : DomHandler.getOuterHeight(prevPanelElement.current, true)) / size.current;
nextPanelSize.current = 100 * (horizontal ? DomHandler.getOuterWidth(nextPanelElement.current, true) : DomHandler.getOuterHeight(nextPanelElement.current, true)) / size.current;
}
prevPanelSizeNew.current = prevPanelSize.current;
nextPanelSizeNew.current = nextPanelSize.current;
prevPanelIndex.current = index;
!isUnstyled() && DomHandler.addClass(gutterRef.current, 'p-splitter-gutter-resizing');
gutterRef.current.setAttribute('data-p-splitter-gutter-resizing', true);
!isUnstyled() && DomHandler.addClass(elementRef.current, 'p-splitter-resizing');
elementRef.current.setAttribute('data-p-splitter-resizing', true);
};
var onResize = function onResize(event) {
var step = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var isKeyDown = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var newPos;
var newNextPanelSize;
var newPrevPanelSize;
var pageX = event.type === 'touchmove' ? event.touches[0].pageX : event.pageX;
var pageY = event.type === 'touchmove' ? event.touches[0].pageY : event.pageY;
if (isKeyDown) {
if (horizontal) {
newPrevPanelSize = 100 * (prevPanelSize.current + step) / size.current;
newNextPanelSize = 100 * (nextPanelSize.current - step) / size.current;
} else {
newPrevPanelSize = 100 * (prevPanelSize.current - step) / size.current;
newNextPanelSize = 100 * (nextPanelSize.current + step) / size.current;
}
} else {
if (horizontal) {
newPos = pageX * 100 / size.current - startPos.current * 100 / size.current;
} else {
newPos = pageY * 100 / size.current - startPos.current * 100 / size.current;
}
newPrevPanelSize = prevPanelSize.current + newPos;
newNextPanelSize = nextPanelSize.current - newPos;
}
resizePanel(prevPanelIndex.current, newPrevPanelSize, newNextPanelSize);
};
var onResizeEnd = function onResizeEnd(event) {
var sizes = _toConsumableArray(panelSizes);
sizes[prevPanelIndex.current] = prevPanelSizeNew.current;
sizes[prevPanelIndex.current + 1] = nextPanelSizeNew.current;
if (props.onResizeEnd) {
props.onResizeEnd({
originalEvent: event,
sizes: sizes
});
}
if (isStateful) {
saveState(sizes);
}
setPanelSizes(sizes);
!isUnstyled() && DomHandler.removeClass(gutterRef.current, 'p-splitter-gutter-resizing');
gutterRefs.current && Object.keys(gutterRefs.current).forEach(function (key) {
return gutterRefs.current[key].setAttribute('data-p-splitter-gutter-resizing', false);
});
!isUnstyled() && DomHandler.removeClass(elementRef.current, 'p-splitter-resizing');
elementRef.current.setAttribute('data-p-splitter-resizing', false);
clear();
};
var onGutterKeyUp = function onGutterKeyUp() {
clearTimer();
onResizeEnd();
};
var onGutterKeyDown = function onGutterKeyDown(event, index) {
var minSize = props.children[index].props && props.children[index].props.minSize || 0;
switch (event.code) {
case 'ArrowLeft':
{
if (horizontal) {
setTimer(event, index, props.step * -1);
}
event.preventDefault();
break;
}
case 'ArrowRight':
{
if (horizontal) {
setTimer(event, index, props.step);
}
event.preventDefault();
break;
}
case 'ArrowDown':
{
if (!horizontal) {
setTimer(event, index, props.step * -1);
}
event.preventDefault();
break;
}
case 'ArrowUp':
{
if (!horizontal) {
setTimer(event, index, props.step);
}
event.preventDefault();
break;
}
case 'Home':
{
resizePanel(index, 100 - minSize, minSize);
event.preventDefault();
break;
}
case 'End':
{
resizePanel(index, minSize, 100 - minSize);
event.preventDefault();
break;
}
case 'NumpadEnter':
case 'Enter':
{
if (prevSize.current >= 100 - (minSize || 5)) {
resizePanel(index, minSize, 100 - minSize);
} else {
resizePanel(index, 100 - minSize, minSize);
}
event.preventDefault();
break;
}
}
};
var resizePanel = function resizePanel(index, newPrevPanelSize, newNextPanelSize) {
prevPanelIndex.current = index;
gutterRef.current = gutterRefs.current[index];
size.current = horizontal ? DomHandler.getWidth(elementRef.current) : DomHandler.getHeight(elementRef.current);
prevPanelElement.current = gutterRef.current.previousElementSibling;
nextPanelElement.current = gutterRef.current.nextElementSibling;
if (validateResize(newPrevPanelSize, newNextPanelSize)) {
prevPanelSizeNew.current = newPrevPanelSize;
nextPanelSizeNew.current = newNextPanelSize;
prevPanelElement.current.style.flexBasis = 'calc(' + newPrevPanelSize + '% - ' + (props.children.length - 1) * props.gutterSize + 'px)';
nextPanelElement.current.style.flexBasis = 'calc(' + newNextPanelSize + '% - ' + (props.children.length - 1) * props.gutterSize + 'px)';
prevSize.current = parseFloat(newPrevPanelSize).toFixed(4);
}
};
var repeat = function repeat(event, index, step) {
onResizeStart(event, index, true);
onResize(event, step, true);
};
var setTimer = function setTimer(event, index, step) {
if (!timer.current) {
timer.current = setInterval(function () {
repeat(event, index, step);
}, 40);
}
};
var clearTimer = function clearTimer() {
if (timer.current) {
clearInterval(timer.current);
timer.current = null;
}
};
var onGutterMouseDown = function onGutterMouseDown(event, index) {
onResizeStart(event, index, false);
bindMouseListeners();
};
var onGutterTouchStart = function onGutterTouchStart(event, index) {
onResizeStart(event, index, false);
window.addEventListener('touchmove', onGutterTouchMove, {
passive: false,
cancelable: false
});
window.addEventListener('touchend', _onGutterTouchEnd);
};
var onGutterTouchMove = function onGutterTouchMove(event) {
onResize(event);
};
var _onGutterTouchEnd = function onGutterTouchEnd(event) {
onResizeEnd(event);
window.removeEventListener('touchmove', onGutterTouchMove);
window.removeEventListener('touchend', _onGutterTouchEnd);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
useMountEffect(function () {
if (elementRef.current) {
idState.current = UniqueComponentId();
}
});
React.useEffect(function () {
var panelElements = _toConsumableArray(elementRef.current.children).filter(function (child) {
return DomHandler.getAttribute(child, 'data-pc-section') === 'splitterpanel.root';
});
var _panelSizes = [];
panelElements.map(function (panelElement, i) {
prevSize.current = panelSize(panelSizes, 0);
_panelSizes[i] = panelSize(panelSizes, i);
if (panelElement.childNodes && ObjectUtils.isNotEmpty(DomHandler.find(panelElement, "[data-pc-name='splitter']") && DomHandler.find(panelElement, "[data-pc-section='root']"))) {
!isUnstyled() && DomHandler.addClass(panelElement, 'p-splitter-panel-nested');
panelElement.setAttribute('data-p-splitter-panel-nested', true);
setNested(true);
}
});
setPanelSizes(_panelSizes);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
React.useEffect(function () {
if (isStateful) {
restoreState();
}
}, [restoreState, isStateful]);
var createPanel = function createPanel(panel, index) {
var panelId = getPanelProp(panel, 'id') || "".concat(idState.current, "_").concat(index);
var panelClassName = classNames(getPanelProp(panel, 'className'), cx('panel.root'));
var gutterProps = mergeProps({
ref: function ref(el) {
return gutterRefs.current[index] = el;
},
className: cx('gutter'),
style: horizontal ? {
width: props.gutterSize + 'px'
} : {
height: props.gutterSize + 'px'
},
onMouseDown: function onMouseDown(event) {
return onGutterMouseDown(event, index);
},
onKeyDown: function onKeyDown(event) {
return onGutterKeyDown(event, index);
},
onKeyUp: onGutterKeyUp,
onTouchStart: function onTouchStart(event) {
return onGutterTouchStart(event, index);
},
onTouchMove: function onTouchMove(event) {
return onGutterTouchMove(event);
},
onTouchEnd: function onTouchEnd(event) {
return _onGutterTouchEnd(event);
},
'data-p-splitter-gutter-resizing': false
}, ptm('gutter'));
var gutterHandlerProps = mergeProps({
tabIndex: getPanelProp(panel, 'tabIndex') || 0,
className: cx('gutterHandler'),
role: 'separator',
'aria-orientation': horizontal ? 'vertical' : 'horizontal',
'aria-controls': panelId,
'aria-label': getPanelProp(panel, 'aria-label'),
'aria-labelledby': getPanelProp(panel, 'aria-labelledby'),
'aria-valuenow': prevSize.current,
'aria-valuetext': parseFloat(prevSize.current).toFixed(0) + '%',
'aria-valuemin': getPanelProp(panel, 'minSize') || '0',
'aria-valuemax': '100'
}, ptm('gutterHandler'));
var gutter = index !== props.children.length - 1 && /*#__PURE__*/React.createElement("div", gutterProps, /*#__PURE__*/React.createElement("div", gutterHandlerProps));
var flexBasis = 'calc(' + panelSize(panelSizes, index) + '% - ' + (childrenLength - 1) * props.gutterSize + 'px)';
var rootProps = mergeProps({
key: index,
id: panelId,
className: panelClassName,
style: _objectSpread$m(_objectSpread$m({}, getPanelProp(panel, 'style')), {}, {
flexBasis: flexBasis
}),
role: 'presentation',
'data-p-splitter-panel-nested': false,
onClick: getPanelProp(panel, 'onClick')
}, getPanelPT('splitterpanel.root'));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, getPanelProp(panel, 'children')), gutter);
};
var createPanels = function createPanels() {
return React.Children.map(props.children, createPanel);
};
var rootProps = mergeProps({
id: props.id,
style: props.style,
className: classNames(props.className, cx('root')),
'data-p-splitter-resizing': false
}, SplitterBase.getOtherProps(props), ptm('root'));
var panels = createPanels();
return /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef
}, rootProps), panels);
}));
SplitterPanel.displayName = 'SplitterPanel';
Splitter.displayName = 'Splitter';
var classes$b = {
root: function root(_ref) {
var props = _ref.props;
return classNames('p-stepper p-component', {
'p-stepper-horizontal': props.orientation === 'horizontal',
'p-stepper-vertical': props.orientation === 'vertical',
'p-readonly': props.linear
});
},
nav: 'p-stepper-nav',
stepper: {
header: function header(_ref2) {
var isStepActive = _ref2.isStepActive,
isItemDisabled = _ref2.isItemDisabled,
index = _ref2.index,
headerPosition = _ref2.headerPosition,
orientation = _ref2.orientation;
return classNames('p-stepper-header', _defineProperty({
'p-highlight': isStepActive(index),
'p-disabled': isItemDisabled(index)
}, "p-stepper-header-".concat(headerPosition), orientation === 'horizontal'));
},
action: 'p-stepper-action p-component',
number: 'p-stepper-number',
title: 'p-stepper-title',
separator: 'p-stepper-separator',
toggleableContent: 'p-stepper-toggleable-content',
content: function content(_ref3) {
var props = _ref3.props;
return classNames('p-stepper-content', {
'p-toggleable-content': props.orientation === 'vertical'
});
},
panel: function panel(_ref4) {
var props = _ref4.props,
isStepActive = _ref4.isStepActive,
index = _ref4.index;
return classNames('p-stepper-panel', {
'p-stepper-panel-active': props.orientation === 'vertical' && isStepActive(index)
});
}
},
panelContainer: 'p-stepper-panels',
start: 'p-stepper-start',
end: 'p-stepper-end'
};
var styles$7 = "\n@layer primereact {\n .p-stepper .p-stepper-nav {\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin: 0;\n padding: 0;\n list-style-type: none;\n overflow-x: auto;\n }\n\n .p-stepper-vertical .p-stepper-nav {\n flex-direction: column;\n }\n\n .p-stepper-header {\n position: relative;\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n\n &:last-of-type {\n flex: initial;\n }\n }\n\n .p-stepper-header-bottom {\n align-items: flex-start;\n }\n\n .p-stepper-header-top {\n align-items: flex-end;\n }\n\n .p-stepper-header-right, .p-stepper-header-left {\n align-items: center;\n }\n\n .p-stepper-header .p-stepper-action {\n border: 0 none;\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n cursor: pointer;\n\n &:focus-visible {\n @include focused();\n }\n }\n\n .p-stepper-header-bottom .p-stepper-action {\n flex-direction: column;\n }\n\n .p-stepper-header-top .p-stepper-action {\n flex-direction: column-reverse;\n }\n\n .p-stepper-header-left .p-stepper-action {\n flex-direction: row-reverse;\n }\n\n .p-stepper.p-stepper-readonly .p-stepper-header {\n cursor: auto;\n }\n\n .p-stepper-header.p-highlight .p-stepper-action {\n cursor: default;\n }\n\n .p-stepper-title {\n display: block;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n }\n\n .p-stepper-number {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .p-stepper-separator {\n flex: 1 1 0;\n }\n}\n";
var StepperBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Stepper',
activeStep: 0,
orientation: 'horizontal',
headerPosition: 'right',
linear: false,
onChangeStep: null,
start: null,
end: null,
children: undefined
},
css: {
classes: classes$b,
styles: styles$7
}
});
function ownKeys$l(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$l(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$l(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$l(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var StepperContent = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (props, ref) {
var mergeProps = useMergeProps();
var cx = props.cx;
var rootProps = mergeProps(_objectSpread$l(_objectSpread$l(_objectSpread$l({
ref: ref,
id: props.id,
className: cx('stepper.content', {
stepperpanel: props.stepperpanel,
index: props.index
}),
role: 'tabpanel',
'aria-labelledby': props.ariaLabelledby
}, props.getStepPT(props.stepperpanel, 'root', props.index)), props.getStepPT(props.stepperpanel, 'content', props.index)), {}, {
'data-p-active': props.active
}));
var createContent = function createContent() {
var ComponentToRender = props.template;
return /*#__PURE__*/React.createElement(ComponentToRender, {
index: props.index,
active: props.active,
highlighted: props.highlighted,
clickCallback: function clickCallback(event) {
return props.onItemClick(event, props.index);
},
prevCallback: function prevCallback(event) {
return props.prevCallback(event, props.index);
},
nextCallback: function nextCallback(event) {
return props.nextCallback(event, props.index);
}
});
};
return /*#__PURE__*/React.createElement("div", rootProps, props.template ? createContent() : props.stepperpanel);
}));
StepperContent.displayName = 'StepperContent';
function ownKeys$k(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$k(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$k(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$k(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var StepperHeader = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (props, ref) {
var mergeProps = useMergeProps();
var cx = props.cx;
var buttonProps = mergeProps(_objectSpread$k({
ref: ref,
id: props.id,
className: cx('stepper.action'),
role: 'tab',
type: 'button',
tabIndex: props.disabled ? -1 : undefined,
'aria-controls': props.ariaControls,
onClick: function onClick(e) {
return props.clickCallback(e, props.index);
}
}, props.getStepPT(props.stepperpanel, 'action', props.index)));
var numberProps = mergeProps(_objectSpread$k({
className: cx('stepper.number')
}, props.getStepPT(props.stepperpanel, 'number', props.index)));
var titleProps = mergeProps(_objectSpread$k({
className: cx('stepper.title')
}, props.getStepPT(props.stepperpanel, 'title', props.index)));
return props.template ? props.template() : /*#__PURE__*/React.createElement("button", buttonProps, /*#__PURE__*/React.createElement("span", numberProps, props.index + 1), /*#__PURE__*/React.createElement("span", titleProps, props.getStepProp(props.stepperpanel, 'header')));
}));
StepperHeader.displayName = 'StepperHeader';
function ownKeys$j(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$j(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$j(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$j(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var StepperSeparator = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (props, ref) {
var mergeProps = useMergeProps();
var separatorProps = mergeProps(_objectSpread$j({
ref: ref,
'aria-hidden': true,
className: props.separatorClass
}, props.getStepPT(props.stepperpanel, 'separator', props.index)));
return props.template ? props.template() : /*#__PURE__*/React.createElement("span", separatorProps);
}));
StepperSeparator.displayName = 'StepperSeparator';
function ownKeys$i(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$i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$i(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Stepper = /*#__PURE__*/React__default.memo(/*#__PURE__*/React__default.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React__default.useContext(PrimeReactContext);
var props = StepperBase.getProps(inProps, context);
var start = ObjectUtils.getJSXElement(props.start, props);
var end = ObjectUtils.getJSXElement(props.end, props);
var _StepperBase$setMetaD = StepperBase.setMetaData({
props: props
}),
ptm = _StepperBase$setMetaD.ptm,
cx = _StepperBase$setMetaD.cx,
isUnstyled = _StepperBase$setMetaD.isUnstyled,
ptmo = _StepperBase$setMetaD.ptmo;
var _React$useState = React__default.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var _React$useState3 = React__default.useState(props.activeStep),
_React$useState4 = _slicedToArray(_React$useState3, 2),
activeStepState = _React$useState4[0],
setActiveStepState = _React$useState4[1];
var navRef = React__default.useRef();
useHandleStyle(StepperBase.css.styles, isUnstyled, {
name: 'stepper'
});
var startProps = mergeProps({
className: cx('start')
}, ptm('start'));
var endProps = mergeProps({
className: cx('end')
}, ptm('end'));
useMountEffect(function () {
if (!idState) {
setIdState(UniqueComponentId());
}
});
useUpdateEffect(function () {
if (props.activeStep >= 0 && props.activeStep <= stepperPanels().length - 1) {
updateActiveStep(undefined, props.activeStep);
}
}, [props.activeStep]);
var getStepProp = function getStepProp(step, name) {
var _step$props;
return step === null || step === void 0 || (_step$props = step.props) === null || _step$props === void 0 ? void 0 : _step$props[name];
};
var getStepKey = function getStepKey(step, index) {
return getStepProp(step, 'header') || index;
};
var isStep = function isStep(child) {
return child.type.displayName === 'StepperPanel';
};
var isStepActive = function isStepActive(index) {
return activeStepState === index;
};
var isItemDisabled = function isItemDisabled(index) {
return props.linear && !isStepActive(index);
};
var updateActiveStep = function updateActiveStep(event, index) {
setActiveStepState(index);
props.onChangeStep && props.onChangeStep({
originalEvent: event,
index: index
});
};
var getStepHeaderActionId = function getStepHeaderActionId(index) {
return "".concat(idState, "_").concat(index, "_header_action");
};
var getStepContentId = function getStepContentId(index) {
return "".concat(idState, "_").concat(index, "content");
};
var stepperPanels = function stepperPanels() {
return React__default.Children.toArray(props.children).reduce(function (stepperpanels, child) {
if (isStep(child)) {
stepperpanels.push(child);
} else if (child && Array.isArray(child)) {
React__default.Children.toArray(child.props.children).forEach(function (nestedChild) {
if (isStep(nestedChild)) {
stepperpanels.push(nestedChild);
}
});
}
return stepperpanels;
}, []);
};
var _prevCallback = function prevCallback(event, index) {
if (index !== 0) {
updateActiveStep(event, index - 1);
}
};
var _nextCallback = function nextCallback(event, index) {
if (index !== stepperPanels().length - 1) {
updateActiveStep(event, index + 1);
}
};
var getStepPT = function getStepPT(step, key, index) {
var count = stepperPanels().length;
var stepMetaData = {
props: step.props,
parent: {
props: props
},
context: {
index: index,
count: count,
first: index === 0,
last: index === count - 1,
active: isStepActive(index),
highlighted: index < activeStepState,
disabled: isItemDisabled(index)
}
};
return mergeProps(ptm("stepperpanel.".concat(key), {
stepperpanel: stepMetaData
}), ptm("stepperpanel.".concat(key), stepMetaData), ptmo(getStepProp(step, 'pt'), key, stepMetaData));
};
var onItemClick = function onItemClick(event, index) {
if (props.linear) {
event.preventDefault();
return;
}
if (index !== activeStepState) {
updateActiveStep(event, index);
}
};
var createPanel = function createPanel() {
return stepperPanels().map(function (step, index) {
var _step$children, _step$children2;
var panelProps = mergeProps(_objectSpread$i({
className: classNames(cx('stepper.header', {
isStepActive: isStepActive,
isItemDisabled: isItemDisabled,
step: step,
index: index,
headerPosition: props.headerPosition,
orientation: props.orientation
})),
'aria-current': isStepActive(index) && 'step',
role: 'presentation',
'data-p-highlight': isStepActive(index),
'data-p-disabled': isItemDisabled(index),
'data-p-active': isStepActive(index)
}, getStepPT(step, 'header', index)));
return /*#__PURE__*/React__default.createElement("li", _extends({
key: getStepKey(step, index)
}, panelProps), /*#__PURE__*/React__default.createElement(StepperHeader, {
id: getStepHeaderActionId(index),
template: (_step$children = step.children) === null || _step$children === void 0 ? void 0 : _step$children.header,
stepperpanel: step,
index: index,
disabled: isItemDisabled(index),
active: isStepActive(index),
highlighted: index < activeStepState,
ariaControls: getStepContentId(index),
clickCallback: onItemClick,
getStepPT: getStepPT,
getStepProp: getStepProp,
cx: cx
}), index !== stepperPanels().length - 1 && /*#__PURE__*/React__default.createElement(StepperSeparator, {
template: (_step$children2 = step.children) === null || _step$children2 === void 0 ? void 0 : _step$children2.separator,
separatorClass: cx('stepper.separator'),
stepperpanel: step,
index: index,
active: isStepActive(index),
highlighted: index < activeStepState,
getStepPT: getStepPT
}));
});
};
React__default.useImperativeHandle(ref, function () {
return {
getElement: function getElement() {
return navRef.current;
},
getActiveStep: function getActiveStep() {
return activeStepState;
},
setActiveStep: function setActiveStep(step) {
return setActiveStepState(step);
},
nextCallback: function nextCallback(e) {
return _nextCallback(e, activeStepState);
},
prevCallback: function prevCallback(e) {
return _prevCallback(e, activeStepState);
}
};
});
var createPanelContent = function createPanelContent() {
return stepperPanels().map(function (step, index) {
var _step$children3;
if (!isStepActive(index)) {
return null;
}
return /*#__PURE__*/React__default.createElement(StepperContent, {
key: getStepContentId(index),
id: getStepContentId(index),
tempate: step === null || step === void 0 || (_step$children3 = step.children) === null || _step$children3 === void 0 ? void 0 : _step$children3.content,
stepperpanel: step,
index: index,
active: isStepActive(index),
highlighted: index < activeStepState,
clickCallback: onItemClick,
prevCallback: _prevCallback,
nextCallback: _nextCallback,
getStepPT: getStepPT,
ariaLabelledby: getStepHeaderActionId(index),
ptm: ptm,
cx: cx
});
});
};
var createHorizontal = function createHorizontal() {
var items = createPanel();
var navProps = mergeProps({
className: classNames(cx('nav')),
ref: navRef
}, ptm('nav'));
var panelContainerProps = mergeProps({
className: cx('panelContainer')
}, ptm('panelContainer'));
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("ul", navProps, items), /*#__PURE__*/React__default.createElement("div", panelContainerProps, createPanelContent()));
};
var createVertical = function createVertical() {
return stepperPanels().map(function (step, index) {
var _step$children4, _step$children5, _step$children6;
var contentRef = /*#__PURE__*/React__default.createRef(null);
var navProps = mergeProps(_objectSpread$i(_objectSpread$i(_objectSpread$i({
ref: navRef,
className: cx('stepper.panel', {
props: props,
index: index,
isStepActive: isStepActive
}),
'aria-current': isStepActive(index) && 'step'
}, getStepPT(step, 'root', index)), getStepPT(step, 'panel', index)), {}, {
'data-p-highlight': isStepActive(index),
'data-p-disabled': isItemDisabled(index),
'data-p-active': isStepActive(index)
}));
var headerProps = mergeProps(_objectSpread$i({
className: cx('stepper.header', {
step: step,
isStepActive: isStepActive,
isItemDisabled: isItemDisabled,
index: index
})
}, getStepPT(step, 'header', index)));
var transitionProps = mergeProps(_objectSpread$i(_objectSpread$i({
classNames: cx('stepper.content')
}, getStepPT(step, 'transition', index)), {}, {
timeout: {
enter: 1000,
exit: 450
},
"in": isStepActive(index),
unmountOnExit: true
}));
var toggleableContentProps = mergeProps(_objectSpread$i({
ref: contentRef,
className: cx('stepper.toggleableContent')
}, getStepPT(step, 'toggleableContent', index)));
return /*#__PURE__*/React__default.createElement("div", _extends({
key: getStepKey(step, index)
}, navProps), /*#__PURE__*/React__default.createElement("div", headerProps, /*#__PURE__*/React__default.createElement(StepperHeader, {
id: getStepHeaderActionId(index),
template: (_step$children4 = step.children) === null || _step$children4 === void 0 ? void 0 : _step$children4.header,
stepperpanel: step,
index: index,
disabled: isItemDisabled(index),
active: isStepActive(index),
highlighted: index < activeStepState,
ariaControls: getStepContentId(index),
clickCallback: onItemClick,
getStepPT: getStepPT,
getStepProp: getStepProp,
cx: cx
})), /*#__PURE__*/React__default.createElement(CSSTransition, _extends({
nodeRef: contentRef
}, transitionProps), /*#__PURE__*/React__default.createElement("div", toggleableContentProps, index !== stepperPanels().length - 1 && /*#__PURE__*/React__default.createElement(StepperSeparator, {
template: (_step$children5 = step.children) === null || _step$children5 === void 0 ? void 0 : _step$children5.separator,
separatorClass: cx('stepper.separator'),
stepperpanel: step,
index: index,
active: isStepActive(index),
highlighted: index < activeStepState,
getStepPT: getStepPT
}), /*#__PURE__*/React__default.createElement(StepperContent, {
key: getStepContentId(index),
id: getStepContentId(index),
tempate: step === null || step === void 0 || (_step$children6 = step.children) === null || _step$children6 === void 0 ? void 0 : _step$children6.content,
stepperpanel: step,
index: index,
active: isStepActive(index),
highlighted: index < activeStepState,
clickCallback: onItemClick,
prevCallback: _prevCallback,
nextCallback: _nextCallback,
getStepPT: getStepPT,
ariaLabelledby: getStepHeaderActionId(index),
ptm: ptm,
cx: cx
}))));
});
};
var rootProps = mergeProps({
className: classNames(cx('root')),
role: 'tablist'
}, StepperBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React__default.createElement("div", rootProps, start && /*#__PURE__*/React__default.createElement("div", startProps, start), props.orientation === 'horizontal' && createHorizontal(), props.orientation === 'vertical' && createVertical(), end && /*#__PURE__*/React__default.createElement("div", endProps, end));
}));
StepperBase.displayName = 'StepperBase';
var classes$a = {
icon: function icon(_ref) {
var item = _ref.item;
return classNames('p-menuitem-icon', item.icon);
},
label: 'p-steps-title',
step: 'p-steps-number',
action: 'p-menuitem-link',
menuitem: function menuitem(_ref2) {
var active = _ref2.active,
disabled = _ref2.disabled,
item = _ref2.item;
return classNames('p-steps-item', item.className, {
'p-highlight p-steps-current': active,
'p-disabled': disabled
});
},
root: function root(_ref3) {
var props = _ref3.props;
return classNames('p-steps p-component', {
'p-readonly': props.readOnly
});
}
};
var styles$6 = "\n@layer primereact {\n .p-steps {\n position: relative;\n }\n\n .p-steps ol {\n padding: 0;\n margin: 0;\n list-style-type: none;\n display: flex;\n }\n\n .p-steps-item {\n position: relative;\n display: flex;\n justify-content: center;\n flex: 1 1 auto;\n }\n\n .p-steps-item .p-menuitem-link {\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n text-decoration: none;\n }\n\n .p-steps.p-readonly .p-steps-item {\n cursor: auto;\n }\n\n .p-steps-item.p-steps-current .p-menuitem-link {\n cursor: default;\n }\n\n .p-steps-title {\n white-space: nowrap;\n }\n\n .p-steps-number {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .p-steps-title {\n display: block;\n }\n}\n";
var StepsBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Steps',
id: null,
model: null,
activeIndex: 0,
readOnly: true,
style: null,
className: null,
onSelect: null,
children: undefined
},
css: {
classes: classes$a,
styles: styles$6
},
getCProp: function getCProp(step, name) {
return ObjectUtils.getComponentProp(step, name, StepsBase.defaultProps);
}
});
function ownKeys$h(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$h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$h(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Steps = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = StepsBase.getProps(inProps, context);
var _React$useState = React.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var elementRef = React.useRef(null);
var listRef = React.useRef(null);
var count = React.Children.count(props.children);
var metaData = {
props: props,
state: {
id: idState,
activeIndex: props.activeIndex
}
};
var _StepsBase$setMetaDat = StepsBase.setMetaData(_objectSpread$h({}, metaData)),
ptm = _StepsBase$setMetaDat.ptm,
ptmo = _StepsBase$setMetaDat.ptmo,
cx = _StepsBase$setMetaDat.cx,
isUnstyled = _StepsBase$setMetaDat.isUnstyled;
useHandleStyle(StepsBase.css.styles, isUnstyled, {
name: 'steps'
});
var getStepPT = function getStepPT(step, key, index) {
var stepMetaData = {
// props: step.props,
parent: metaData,
context: {
index: index,
count: count,
first: index === 0,
last: index === count - 1,
active: index === props.activeIndex,
disabled: getStepProp(step, 'disabled')
}
};
return mergeProps(ptm("step.".concat(key), {
step: stepMetaData
}), ptm("steps.".concat(key), {
steps: stepMetaData
}), ptm("steps.".concat(key), stepMetaData), ptmo(getStepProp(step, 'pt'), key, stepMetaData));
};
var getStepProp = function getStepProp(step, name) {
return StepsBase.getCProp(step, name);
};
var itemClick = function itemClick(event, item, index) {
if (props.readOnly || item.disabled) {
event.preventDefault();
return;
}
if (props.onSelect) {
props.onSelect({
originalEvent: event,
item: item,
index: index
});
}
if (item.command) {
item.command({
originalEvent: event,
item: item,
index: index
});
}
if (!item.url) {
event.preventDefault();
event.stopPropagation();
}
};
var onItemKeyDown = function onItemKeyDown(event, item, index) {
if (props.readOnly) {
return;
}
switch (event.code) {
case 'ArrowRight':
navigateToNextItem(event.target);
event.preventDefault();
break;
case 'ArrowLeft':
navigateToPrevItem(event.target);
event.preventDefault();
break;
case 'Home':
navigateToFirstItem(event.target);
event.preventDefault();
break;
case 'End':
navigateToLastItem(event.target);
event.preventDefault();
break;
case 'Tab':
//no op
break;
case 'Enter':
case 'NumpadEnter':
case 'Space':
itemClick(event, item, index);
event.preventDefault();
break;
}
};
var navigateToNextItem = function navigateToNextItem(target) {
var nextItem = findNextItem(target);
nextItem && setFocusToMenuitem(target, nextItem);
};
var navigateToPrevItem = function navigateToPrevItem(target) {
var prevItem = findPrevItem(target);
prevItem && setFocusToMenuitem(target, prevItem);
};
var navigateToFirstItem = function navigateToFirstItem(target) {
var firstItem = findFirstItem();
firstItem && setFocusToMenuitem(target, firstItem);
};
var navigateToLastItem = function navigateToLastItem(target) {
var lastItem = findLastItem();
lastItem && setFocusToMenuitem(target, lastItem);
};
var findNextItem = function findNextItem(item) {
var nextItem = item.parentElement.nextElementSibling;
return nextItem ? nextItem.children[0] : null;
};
var findPrevItem = function findPrevItem(item) {
var prevItem = item.parentElement.previousElementSibling;
return prevItem ? prevItem.children[0] : null;
};
var findFirstItem = function findFirstItem() {
var firstSibling = DomHandler.findSingle(listRef.current, '[data-pc-section="menuitem"]');
return firstSibling ? firstSibling.children[0] : null;
};
var findLastItem = function findLastItem() {
var siblings = DomHandler.find(listRef.current, '[data-pc-section="menuitem"]');
return siblings ? siblings[siblings.length - 1].children[0] : null;
};
var setFocusToMenuitem = function setFocusToMenuitem(target, focusableItem) {
target.tabIndex = '-1';
focusableItem.tabIndex = '0';
setTimeout(function () {
return focusableItem.focus();
}, 0);
};
var setFocusToFirstItem = function setFocusToFirstItem() {
var firstItem = findFirstItem();
firstItem.tabIndex = '0';
firstItem.focus();
};
var createItem = function createItem(item, index) {
if (item.visible === false) {
return null;
}
var key = item.id || idState + '_' + index;
var active = index === props.activeIndex;
var disabled = item.disabled || index !== props.activeIndex && props.readOnly;
var iconClassName = classNames('p-menuitem-icon', item.icon);
var iconProps = mergeProps({
className: cx('icon', {
item: item
})
}, getStepPT(item, 'icon', index));
var icon = IconUtils.getJSXIcon(item.icon, _objectSpread$h({}, iconProps), {
props: props
});
var labelProps = mergeProps({
className: cx('label')
}, getStepPT(item, 'label', index));
var label = item.label && /*#__PURE__*/React.createElement("span", labelProps, item.label);
var stepProps = mergeProps({
className: cx('step')
}, getStepPT(item, 'step', index));
var actionProps = mergeProps({
href: item.url || '#',
className: cx('action'),
tabIndex: '-1',
onFocus: function onFocus(event) {
return event.stopPropagation();
},
target: item.target,
onKeyDown: function onKeyDown(event) {
return onItemKeyDown(event, item, index);
},
onClick: function onClick(event) {
return itemClick(event, item, index);
}
}, getStepPT(item, 'action', index));
var content = /*#__PURE__*/React.createElement("a", actionProps, /*#__PURE__*/React.createElement("span", stepProps, index + 1), icon, label);
if (item.template) {
var defaultContentOptions = {
onClick: function onClick(event) {
return itemClick(event, item, index);
},
className: 'p-menuitem-link',
labelClassName: 'p-steps-title',
numberClassName: 'p-steps-number',
iconClassName: iconClassName,
'aria-current': active,
element: content,
props: props,
active: active,
disabled: disabled
};
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
}
var menuItemProps = mergeProps({
id: key,
className: cx('menuitem', {
active: active,
disabled: disabled,
item: item
}),
style: item.style
}, ptm('menuitem'));
return /*#__PURE__*/React.createElement("li", _extends({}, menuItemProps, {
key: key
}), content);
};
var createItems = function createItems() {
var menuProps = mergeProps({
ref: listRef,
tabIndex: props.readOnly ? null : '0',
onFocus: function onFocus() {
if (!props.readOnly) {
setFocusToFirstItem();
}
},
onBlur: function onBlur() {
return setFocusToFirstItem;
}
}, ptm('menu'));
if (props.model) {
var _items = props.model.map(createItem);
return /*#__PURE__*/React.createElement("ol", menuProps, _items);
}
return null;
};
useMountEffect(function () {
if (!idState) {
setIdState(UniqueComponentId());
}
});
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var rootProps = mergeProps({
id: props.id,
ref: elementRef,
className: classNames(props.className, cx('root')),
style: props.style
}, StepsBase.getOtherProps(props), ptm('root'));
var items = createItems();
return /*#__PURE__*/React.createElement("nav", rootProps, items);
}));
Steps.displayName = 'Steps';
var StyleClassBase = {
defaultProps: {
__TYPE: 'StyleClass',
nodeRef: null,
selector: null,
enterClassName: null,
enterFromClassName: null,
enterActiveClassName: null,
enterToClassName: null,
leaveClassName: null,
leaveFromClassName: null,
leaveActiveClassName: null,
leaveToClassName: null,
hideOnOutsideClick: false,
toggleClassName: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, StyleClassBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, StyleClassBase.defaultProps);
}
};
var StyleClass = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var context = React.useContext(PrimeReactContext);
var props = StyleClassBase.getProps(inProps, context);
var targetRef = React.useRef(null);
var animating = React.useRef(false);
var elementRef = React.useRef(null);
var _useEventListener = useEventListener({
type: 'animationend',
listener: function listener() {
DomHandler.removeClass(targetRef.current, props.enterActiveClassName);
if (props.enterToClassName) {
DomHandler.addClass(targetRef.current, props.enterToClassName);
}
unbindTargetEnterListener();
if (props.enterActiveClassName === 'slidedown') {
targetRef.current.style.maxHeight = '';
}
animating.current = false;
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindTargetEnterListener = _useEventListener2[0],
unbindTargetEnterListener = _useEventListener2[1];
var _useEventListener3 = useEventListener({
type: 'animationend',
listener: function listener() {
DomHandler.removeClass(targetRef.current, props.leaveActiveClassName);
if (props.leaveToClassName) {
DomHandler.addClass(targetRef.current, props.leaveToClassName);
}
unbindTargetLeaveListener();
animating.current = false;
}
}),
_useEventListener4 = _slicedToArray(_useEventListener3, 2),
bindTargetLeaveListener = _useEventListener4[0],
unbindTargetLeaveListener = _useEventListener4[1];
var _useEventListener5 = useEventListener({
type: 'click',
listener: function listener(event) {
if (!isVisible(targetRef.current) || getComputedStyle(targetRef.current).getPropertyValue('position') === 'static') {
unbindDocumentClickListener();
} else if (isOutsideClick(event)) {
leave();
}
},
when: props.hideOnOutsideClick
}),
_useEventListener6 = _slicedToArray(_useEventListener5, 2),
bindDocumentClickListener = _useEventListener6[0],
unbindDocumentClickListener = _useEventListener6[1];
var _useEventListener7 = useEventListener({
type: 'click',
listener: function listener() {
targetRef.current = resolveTarget();
if (props.toggleClassName) {
if (DomHandler.hasClass(targetRef.current, props.toggleClassName)) {
DomHandler.removeClass(targetRef.current, props.toggleClassName);
} else {
DomHandler.addClass(targetRef.current, props.toggleClassName);
}
} else {
DomHandler.isVisible(targetRef.current) ? leave() : enter();
}
}
}),
_useEventListener8 = _slicedToArray(_useEventListener7, 2),
bindClickListener = _useEventListener8[0],
unbindClickListener = _useEventListener8[1];
var enter = function enter() {
if (props.enterActiveClassName) {
if (!animating.current) {
animating.current = true;
if (props.enterActiveClassName === 'slidedown') {
targetRef.current.style.height = '0px';
DomHandler.removeClass(targetRef.current, 'hidden');
targetRef.current.style.maxHeight = targetRef.current.scrollHeight + 'px';
DomHandler.addClass(targetRef.current, 'hidden');
targetRef.current.style.height = '';
}
DomHandler.addClass(targetRef.current, props.enterActiveClassName);
// enterClassName will be deprecated, use enterFromClassName
if (props.enterClassName) {
DomHandler.removeClass(targetRef.current, props.enterClassName);
}
if (props.enterFromClassName) {
DomHandler.removeClass(targetRef.current, props.enterFromClassName);
}
bindTargetEnterListener({
target: targetRef.current
});
}
} else {
// enterClassName will be deprecated, use enterFromClassName
if (props.enterClassName) {
DomHandler.removeClass(targetRef.current, props.enterClassName);
}
if (props.enterFromClassName) {
DomHandler.removeClass(targetRef.current, props.enterFromClassName);
}
if (props.enterToClassName) {
DomHandler.addClass(targetRef.current, props.enterToClassName);
}
}
bindDocumentClickListener({
target: elementRef.current && elementRef.current.ownerDocument
});
};
var leave = function leave() {
if (props.leaveActiveClassName) {
if (!animating.current) {
animating.current = true;
DomHandler.addClass(targetRef.current, props.leaveActiveClassName);
// leaveClassName will be deprecated, use leaveFromClassName
if (props.leaveClassName) {
DomHandler.removeClass(targetRef.current, props.leaveClassName);
}
if (props.leaveFromClassName) {
DomHandler.removeClass(targetRef.current, props.leaveFromClassName);
}
bindTargetLeaveListener({
target: targetRef.current
});
}
} else {
// leaveClassName will be deprecated, use leaveFromClassName
if (props.leaveClassName) {
DomHandler.removeClass(targetRef.current, props.leaveClassName);
}
if (props.leaveFromClassName) {
DomHandler.removeClass(targetRef.current, props.leaveFromClassName);
}
if (props.leaveToClassName) {
DomHandler.addClass(targetRef.current, props.leaveToClassName);
}
}
if (props.hideOnOutsideClick) {
unbindDocumentClickListener();
}
};
var resolveTarget = function resolveTarget() {
if (targetRef.current) {
return targetRef.current;
}
switch (props.selector) {
case '@next':
return elementRef.current && elementRef.current.nextElementSibling;
case '@prev':
return elementRef.current && elementRef.current.previousElementSibling;
case '@parent':
return elementRef.current && elementRef.current.parentElement;
case '@grandparent':
return elementRef.current && elementRef.current.parentElement.parentElement;
default:
return document.querySelector(props.selector);
}
};
var init = function init() {
Promise.resolve().then(function () {
elementRef.current = ObjectUtils.getRefElement(props.nodeRef);
bindClickListener({
target: elementRef.current
});
});
};
var destroy = function destroy() {
unbindClickListener();
unbindDocumentClickListener();
targetRef.current = null;
};
var isVisible = function isVisible(target) {
return target && target.offsetParent !== null;
};
var isOutsideClick = function isOutsideClick(event) {
return !elementRef.current.isSameNode(event.target) && !elementRef.current.contains(event.target) && !targetRef.current.contains(event.target);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
},
getTarget: function getTarget() {
return targetRef.current;
}
};
});
useMountEffect(function () {
init();
});
useUpdateEffect(function () {
init();
return function () {
unbindClickListener();
};
});
useUnmountEffect(function () {
destroy();
});
return props.children;
});
StyleClass.displayName = 'StyleClass';
var classes$9 = {
icon: function icon(_ref) {
var _icon = _ref._icon;
return classNames('p-menuitem-icon', _icon);
},
label: 'p-menuitem-text',
action: 'p-menuitem-link',
menuitem: function menuitem(_ref2) {
var _className = _ref2._className,
active = _ref2.active,
disabled = _ref2.disabled;
return classNames('p-tabmenuitem', {
'p-highlight': active,
'p-disabled': disabled
}, _className);
},
inkbar: 'p-tabmenu-ink-bar',
menu: 'p-tabmenu-nav p-reset',
root: 'p-tabmenu p-component'
};
var styles$5 = "\n@layer primereact {\n .p-tabmenu {\n overflow-x: auto;\n }\n\n .p-tabmenu-nav {\n display: flex;\n margin: 0;\n padding: 0;\n list-style-type: none;\n flex-wrap: nowrap;\n }\n\n .p-tabmenu-nav a {\n cursor: pointer;\n user-select: none;\n display: flex;\n align-items: center;\n position: relative;\n text-decoration: none;\n text-decoration: none;\n overflow: hidden;\n }\n\n .p-tabmenu-nav a:focus {\n z-index: 1;\n }\n\n .p-tabmenu-nav .p-menuitem-text {\n line-height: 1;\n }\n\n .p-tabmenu-ink-bar {\n display: none;\n z-index: 1;\n }\n\n .p-tabmenu::-webkit-scrollbar {\n display: none;\n }\n}\n";
var TabMenuBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'TabMenu',
id: null,
model: null,
activeIndex: 0,
ariaLabel: null,
ariaLabelledBy: null,
style: null,
className: null,
onTabChange: null,
children: undefined
},
css: {
classes: classes$9,
styles: styles$5
}
});
function ownKeys$g(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$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var TabMenu = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = TabMenuBase.getProps(inProps, context);
var _React$useState = React.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var _React$useState3 = React.useState(props.activeIndex),
_React$useState4 = _slicedToArray(_React$useState3, 2),
activeIndexState = _React$useState4[0],
setActiveIndexState = _React$useState4[1];
var elementRef = React.useRef(null);
var inkbarRef = React.useRef(null);
var navRef = React.useRef(null);
var tabsRef = React.useRef({});
var activeIndex = props.onTabChange ? props.activeIndex : activeIndexState;
var metaData = {
props: props,
state: {
id: idState,
activeIndex: activeIndex
}
};
var _TabMenuBase$setMetaD = TabMenuBase.setMetaData(_objectSpread$g({}, metaData)),
ptm = _TabMenuBase$setMetaD.ptm,
cx = _TabMenuBase$setMetaD.cx,
isUnstyled = _TabMenuBase$setMetaD.isUnstyled;
var getPTOptions = function getPTOptions(key, item, index) {
return ptm(key, {
parent: metaData,
context: {
item: item,
index: index
}
});
};
useHandleStyle(TabMenuBase.css.styles, isUnstyled, {
name: 'tabmenu'
});
var itemClick = function itemClick(event, item, index) {
if (item.disabled) {
event.preventDefault();
return;
}
if (item.command) {
item.command({
originalEvent: event,
item: item
});
}
if (props.onTabChange) {
props.onTabChange({
originalEvent: event,
value: item,
index: index
});
} else {
setActiveIndexState(index);
}
if (!item.url) {
event.preventDefault();
event.stopPropagation();
}
};
var isSelected = function isSelected(index) {
return index === (activeIndex || 0);
};
var updateInkBar = function updateInkBar() {
if (props.model) {
var tabs = navRef.current.children;
var inkHighlighted = false;
for (var i = 0; i < tabs.length; i++) {
var tab = tabs[i];
if (DomHandler.getAttribute(tab, 'data-p-highlight')) {
inkbarRef.current.style.width = DomHandler.getWidth(tab) + 'px';
inkbarRef.current.style.left = DomHandler.getOffset(tab).left - DomHandler.getOffset(navRef.current).left + 'px';
inkHighlighted = true;
}
}
if (!inkHighlighted) {
inkbarRef.current.style.width = '0px';
inkbarRef.current.style.left = '0px';
}
}
};
useMountEffect(function () {
if (!idState) {
setIdState(UniqueComponentId());
}
});
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
React.useEffect(function () {
updateInkBar();
});
var onKeyDownItem = function onKeyDownItem(event, item, index) {
switch (event.code) {
case 'ArrowRight':
navigateToNextItem(event.target);
event.preventDefault();
break;
case 'ArrowLeft':
navigateToPrevItem(event.target);
event.preventDefault();
break;
case 'Home':
navigateToFirstItem(event.target);
event.preventDefault();
break;
case 'End':
navigateToLastItem(event.target);
event.preventDefault();
break;
case 'Space':
case 'Enter':
case 'NumpadEnter':
itemClick(event, item, index);
event.preventDefault();
break;
case 'Tab':
onTabKey();
break;
}
};
var navigateToNextItem = function navigateToNextItem(target) {
var nextItem = _findNextItem(target);
nextItem && setFocusToMenuitem(target, nextItem);
};
var navigateToPrevItem = function navigateToPrevItem(target) {
var prevItem = _findPrevItem(target);
prevItem && setFocusToMenuitem(target, prevItem);
};
var navigateToFirstItem = function navigateToFirstItem(target) {
var firstItem = findFirstItem();
firstItem && setFocusToMenuitem(target, firstItem);
};
var navigateToLastItem = function navigateToLastItem(target) {
var lastItem = findLastItem();
lastItem && setFocusToMenuitem(target, lastItem);
};
var _findNextItem = function findNextItem(item) {
var nextItem = item.parentElement.nextElementSibling;
return nextItem ? DomHandler.getAttribute(nextItem, 'data-p-disabled') === true ? _findNextItem(nextItem.children[0]) : nextItem.children[0] : null;
};
var _findPrevItem = function findPrevItem(item) {
var prevItem = item.parentElement.previousElementSibling;
return prevItem ? DomHandler.getAttribute(prevItem, 'data-p-disabled') === true ? _findPrevItem(prevItem.children[0]) : prevItem.children[0] : null;
};
var findFirstItem = function findFirstItem() {
var firstSibling = DomHandler.findSingle(navRef.current, '[data-pc-section="menuitem"][data-p-disabled="false"]');
return firstSibling ? firstSibling.children[0] : null;
};
var findLastItem = function findLastItem() {
var siblings = DomHandler.find(navRef.current, '[data-pc-section="menuitem"][data-p-disabled="false"]');
return siblings ? siblings[siblings.length - 1].children[0] : null;
};
var setFocusToMenuitem = function setFocusToMenuitem(target, focusableItem) {
target.tabIndex = '-1';
focusableItem.tabIndex = '0';
focusableItem.focus();
};
var onTabKey = function onTabKey() {
var activeItem = DomHandler.findSingle(navRef.current, '[data-pc-section="menuitem"][data-p-disabled="false"][data-p-highlight="true"]');
var focusedItem = DomHandler.findSingle(navRef.current, '[data-pc-section="action"][tabindex="0"]');
if (focusedItem !== activeItem.children[0]) {
activeItem && (activeItem.children[0].tabIndex = '0');
focusedItem.tabIndex = '-1';
}
};
var createMenuItem = function createMenuItem(item, index) {
if (item.visible === false) {
return null;
}
var _className = item.className,
style = item.style,
disabled = item.disabled,
_icon = item.icon,
_label = item.label,
template = item.template,
url = item.url,
target = item.target;
var key = item.id || idState + '_' + index;
var active = isSelected(index);
var iconClassName = classNames('p-menuitem-icon', _icon);
var iconProps = mergeProps({
className: cx('icon', {
_icon: _icon
})
}, getPTOptions('icon', item, index));
var icon = IconUtils.getJSXIcon(_icon, _objectSpread$g({}, iconProps), {
props: props
});
var labelProps = mergeProps({
className: cx('label')
}, getPTOptions('label', item, index));
var label = _label && /*#__PURE__*/React.createElement("span", labelProps, _label);
var actionProps = mergeProps({
href: url || '#',
role: 'menuitem',
'aria-label': _label,
tabIndex: active ? '0' : '-1',
className: cx('action'),
target: target,
onClick: function onClick(event) {
return itemClick(event, item, index);
}
}, getPTOptions('action', item, index));
var content = /*#__PURE__*/React.createElement("a", actionProps, icon, label, /*#__PURE__*/React.createElement(Ripple, null));
if (template) {
var defaultContentOptions = {
onClick: function onClick(event) {
return itemClick(event, item, index);
},
className: 'p-menuitem-link',
labelClassName: 'p-menuitem-text',
iconClassName: iconClassName,
element: content,
props: props,
active: active,
index: index,
disabled: disabled
};
content = ObjectUtils.getJSXElement(template, item, defaultContentOptions);
}
var menuItemProps = mergeProps({
ref: tabsRef.current["tab_".concat(index)],
id: key,
onKeyDown: function onKeyDown(event) {
return onKeyDownItem(event, item, index);
},
className: cx('menuitem', {
_className: _className,
active: active,
disabled: disabled
}),
style: style,
role: 'presentation',
'data-p-highlight': active,
'data-p-disabled': disabled || false,
'aria-disabled': disabled
}, getPTOptions('menuitem', item, index));
return /*#__PURE__*/React.createElement("li", _extends({}, menuItemProps, {
key: key
}), content);
};
var createItems = function createItems() {
return props.model.map(createMenuItem);
};
if (props.model) {
var items = createItems();
var inkbarProps = mergeProps({
ref: inkbarRef,
role: 'none',
className: cx('inkbar')
}, ptm('inkbar'));
var menuProps = mergeProps({
ref: navRef,
'aria-label': props.ariaLabel,
'aria-labelledby': props.ariaLabelledBy,
className: cx('menu'),
role: 'menubar'
}, ptm('menu'));
var rootProps = mergeProps({
id: props.id,
ref: elementRef,
className: classNames(props.className, cx('root')),
style: props.style
}, TabMenuBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement("ul", menuProps, items, /*#__PURE__*/React.createElement("li", inkbarProps)));
}
return null;
}));
TabMenu.displayName = 'TabMenu';
function ownKeys$f(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$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var classes$8 = {
navcontent: 'p-tabview-nav-content',
nav: 'p-tabview-nav',
inkbar: 'p-tabview-ink-bar',
panelcontainer: function panelcontainer(_ref) {
var props = _ref.props;
return classNames('p-tabview-panels', props.panelContainerClassName);
},
prevbutton: 'p-tabview-nav-prev p-tabview-nav-btn p-link',
nextbutton: 'p-tabview-nav-next p-tabview-nav-btn p-link',
root: function root(_ref2) {
var props = _ref2.props;
return classNames('p-tabview p-component', {
'p-tabview-scrollable': props.scrollable
});
},
navcontainer: 'p-tabview-nav-container',
tab: {
header: function header(_ref3) {
var selected = _ref3.selected,
disabled = _ref3.disabled,
headerClassName = _ref3.headerClassName,
_className = _ref3._className;
return classNames('p-unselectable-text', {
'p-tabview-selected p-highlight': selected,
'p-disabled': disabled
}, headerClassName, _className);
},
headertitle: 'p-tabview-title',
headeraction: 'p-tabview-nav-link',
closeIcon: 'p-tabview-close',
content: function content(_ref4) {
var props = _ref4.props,
selected = _ref4.selected,
getTabProp = _ref4.getTabProp,
tab = _ref4.tab,
isSelected = _ref4.isSelected,
shouldUseTab = _ref4.shouldUseTab,
index = _ref4.index;
return shouldUseTab(tab, index) && (!props.renderActiveOnly || isSelected(index)) ? classNames(getTabProp(tab, 'contentClassName'), getTabProp(tab, 'className'), 'p-tabview-panel', {
'p-hidden': !selected
}) : undefined;
}
}
};
var inlineStyles$1 = {
tab: {
header: function header(_ref5) {
var headerStyle = _ref5.headerStyle,
_style = _ref5._style;
return _objectSpread$f(_objectSpread$f({}, headerStyle || {}), _style || {});
},
content: function content(_ref6) {
var props = _ref6.props,
getTabProp = _ref6.getTabProp,
tab = _ref6.tab,
isSelected = _ref6.isSelected,
shouldUseTab = _ref6.shouldUseTab,
index = _ref6.index;
return shouldUseTab(tab, index) && (!props.renderActiveOnly || isSelected(index)) ? _objectSpread$f(_objectSpread$f({}, getTabProp(tab, 'contentStyle') || {}), getTabProp(tab, 'style') || {}) : undefined;
}
}
};
var TabViewBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'TabView',
id: null,
activeIndex: 0,
className: null,
onBeforeTabChange: null,
onBeforeTabClose: null,
onTabChange: null,
onTabClose: null,
panelContainerClassName: null,
panelContainerStyle: null,
renderActiveOnly: true,
scrollable: false,
style: null,
children: undefined
},
css: {
classes: classes$8,
inlineStyles: inlineStyles$1
}
});
var TabPanelBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'TabPanel',
children: undefined,
className: null,
closable: false,
closeIcon: null,
contentClassName: null,
contentStyle: null,
disabled: false,
header: null,
headerClassName: null,
headerStyle: null,
headerTemplate: null,
leftIcon: null,
nextButton: null,
prevButton: null,
rightIcon: null,
style: null,
visible: true
},
getCProp: function getCProp(tab, name) {
return ObjectUtils.getComponentProp(tab, name, TabPanelBase.defaultProps);
},
getCProps: function getCProps(tab) {
return ObjectUtils.getComponentProps(tab, TabPanelBase.defaultProps);
},
getCOtherProps: function getCOtherProps(tab) {
return ObjectUtils.getComponentDiffProps(tab, TabPanelBase.defaultProps);
}
});
function ownKeys$e(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var TabPanel = function TabPanel() {};
var TabView = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = TabViewBase.getProps(inProps, context);
var _React$useState = React.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var _React$useState3 = React.useState(true),
_React$useState4 = _slicedToArray(_React$useState3, 2),
backwardIsDisabledState = _React$useState4[0],
setBackwardIsDisabledState = _React$useState4[1];
var _React$useState5 = React.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
forwardIsDisabledState = _React$useState6[0],
setForwardIsDisabledState = _React$useState6[1];
var _React$useState7 = React.useState([]),
_React$useState8 = _slicedToArray(_React$useState7, 2),
hiddenTabsState = _React$useState8[0],
setHiddenTabsState = _React$useState8[1];
var _React$useState9 = React.useState(props.activeIndex),
_React$useState10 = _slicedToArray(_React$useState9, 2),
activeIndexState = _React$useState10[0],
setActiveIndexState = _React$useState10[1];
var elementRef = React.useRef(null);
var contentRef = React.useRef(null);
var navRef = React.useRef(null);
var inkbarRef = React.useRef(null);
var prevBtnRef = React.useRef(null);
var nextBtnRef = React.useRef(null);
var tabsRef = React.useRef({});
var activeIndex = props.onTabChange ? props.activeIndex : activeIndexState;
var count = React.Children.count(props.children);
var metaData = {
props: props,
state: {
id: idState,
isPrevButtonDisabled: backwardIsDisabledState,
isNextButtonDisabled: forwardIsDisabledState,
hiddenTabsState: hiddenTabsState,
activeIndex: activeIndexState
}
};
var _TabViewBase$setMetaD = TabViewBase.setMetaData(_objectSpread$e({}, metaData)),
ptm = _TabViewBase$setMetaD.ptm,
ptmo = _TabViewBase$setMetaD.ptmo,
cx = _TabViewBase$setMetaD.cx,
sx = _TabViewBase$setMetaD.sx,
isUnstyled = _TabViewBase$setMetaD.isUnstyled;
useHandleStyle(TabViewBase.css.styles, isUnstyled, {
name: 'tabview'
});
var getTabPT = function getTabPT(tab, key, index) {
var tabMetaData = {
props: tab.props,
parent: metaData,
context: {
index: index,
count: count,
first: index === 0,
last: index === count - 1,
active: index == activeIndexState,
disabled: getTabProp(tab, 'disabled')
}
};
return mergeProps(ptm("tab.".concat(key), {
tab: tabMetaData
}), ptm("tabpanel.".concat(key), {
tabpanel: tabMetaData
}), ptm("tabpanel.".concat(key), tabMetaData), ptmo(getTabProp(tab, 'pt'), key, tabMetaData));
};
var isSelected = function isSelected(index) {
return index === activeIndex;
};
var getTabProp = function getTabProp(tab, name) {
return TabPanelBase.getCProp(tab, name);
};
var shouldUseTab = function shouldUseTab(tab) {
return tab && getTabProp(tab, 'visible') && ObjectUtils.isValidChild(tab, 'TabPanel') && hiddenTabsState.every(function (_i) {
return _i !== tab.key;
});
};
var findVisibleActiveTab = function findVisibleActiveTab(i) {
var tabsInfo = React.Children.map(props.children, function (tab, index) {
if (shouldUseTab(tab)) {
return {
tab: tab,
index: index
};
}
});
return tabsInfo.find(function (_ref) {
var tab = _ref.tab,
index = _ref.index;
return !getTabProp(tab, 'disabled') && index >= i;
}) || tabsInfo.reverse().find(function (_ref2) {
var tab = _ref2.tab,
index = _ref2.index;
return !getTabProp(tab, 'disabled') && i > index;
});
};
var onTabHeaderClose = function onTabHeaderClose(event, index) {
event.preventDefault();
var onBeforeTabClose = props.onBeforeTabClose,
onTabClose = props.onTabClose,
children = props.children;
var key = children[index].key;
// give caller a chance to stop the selection
if (onBeforeTabClose && onBeforeTabClose({
originalEvent: event,
index: index
}) === false) {
return;
}
setHiddenTabsState([].concat(_toConsumableArray(hiddenTabsState), [key]));
if (onTabClose) {
onTabClose({
originalEvent: event,
index: index
});
}
};
var onTabHeaderClick = function onTabHeaderClick(event, tab, index) {
changeActiveIndex(event, tab, index);
};
var changeActiveIndex = function changeActiveIndex(event, tab, index) {
if (event) {
event.preventDefault();
}
if (!getTabProp(tab, 'disabled')) {
// give caller a chance to stop the selection
if (props.onBeforeTabChange && props.onBeforeTabChange({
originalEvent: event,
index: index
}) === false) {
return;
}
if (props.onTabChange) {
props.onTabChange({
originalEvent: event,
index: index
});
} else {
setActiveIndexState(index);
}
}
updateScrollBar({
index: index
});
};
var _onKeyDown = function onKeyDown(event, tab, index) {
switch (event.code) {
case 'ArrowLeft':
onTabArrowLeftKey(event);
break;
case 'ArrowRight':
onTabArrowRightKey(event);
break;
case 'Home':
onTabHomeKey(event);
break;
case 'End':
onTabEndKey(event);
break;
case 'PageDown':
onPageDownKey(event);
break;
case 'PageUp':
onPageUpKey(event);
break;
case 'Enter':
case 'NumpadEnter':
case 'Space':
onTabEnterKey(event, tab, index);
break;
}
};
var onTabArrowRightKey = function onTabArrowRightKey(event) {
var nextHeaderAction = _findNextHeaderAction(event.target.parentElement);
nextHeaderAction ? changeFocusedTab(nextHeaderAction) : onTabHomeKey(event);
event.preventDefault();
};
var onTabArrowLeftKey = function onTabArrowLeftKey(event) {
var prevHeaderAction = _findPrevHeaderAction(event.target.parentElement);
prevHeaderAction ? changeFocusedTab(prevHeaderAction) : onTabEndKey(event);
event.preventDefault();
};
var onTabHomeKey = function onTabHomeKey(event) {
var firstHeaderAction = findFirstHeaderAction();
changeFocusedTab(firstHeaderAction);
event.preventDefault();
};
var onTabEndKey = function onTabEndKey(event) {
var lastHeaderAction = findLastHeaderAction();
changeFocusedTab(lastHeaderAction);
event.preventDefault();
};
var onPageDownKey = function onPageDownKey(event) {
updateScrollBar({
index: React.Children.count(props.children) - 1
});
event.preventDefault();
};
var onPageUpKey = function onPageUpKey(event) {
updateScrollBar({
index: 0
});
event.preventDefault();
};
var onTabEnterKey = function onTabEnterKey(event, tab, index) {
changeActiveIndex(event, tab, index);
event.preventDefault();
};
var _findNextHeaderAction = function findNextHeaderAction(tabElement) {
var selfCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var headerElement = selfCheck ? tabElement : tabElement.nextElementSibling;
return headerElement ? DomHandler.getAttribute(headerElement, 'data-p-disabled') || DomHandler.getAttribute(headerElement, 'data-pc-section') === 'inkbar' ? _findNextHeaderAction(headerElement) : DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]') : null;
};
var _findPrevHeaderAction = function findPrevHeaderAction(tabElement) {
var selfCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var headerElement = selfCheck ? tabElement : tabElement.previousElementSibling;
return headerElement ? DomHandler.getAttribute(headerElement, 'data-p-disabled') || DomHandler.getAttribute(headerElement, 'data-pc-section') === 'inkbar' ? _findPrevHeaderAction(headerElement) : DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]') : null;
};
var findFirstHeaderAction = function findFirstHeaderAction() {
return _findNextHeaderAction(navRef.current.firstElementChild, true);
};
var findLastHeaderAction = function findLastHeaderAction() {
return _findPrevHeaderAction(navRef.current.lastElementChild, true);
};
var changeFocusedTab = function changeFocusedTab(element) {
if (element) {
DomHandler.focus(element);
updateScrollBar({
element: element
});
}
};
var updateInkBar = function updateInkBar() {
var tabHeader = tabsRef.current["tab_".concat(activeIndex)];
inkbarRef.current.style.width = DomHandler.getWidth(tabHeader) + 'px';
inkbarRef.current.style.left = DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(navRef.current).left + 'px';
};
var updateScrollBar = function updateScrollBar(_ref3) {
var index = _ref3.index,
element = _ref3.element;
var tabHeader = element || tabsRef.current["tab_".concat(index)];
if (tabHeader && tabHeader.scrollIntoView) {
tabHeader.scrollIntoView({
block: 'nearest'
});
}
};
var updateButtonState = function updateButtonState() {
var _contentRef$current = contentRef.current,
scrollLeft = _contentRef$current.scrollLeft,
scrollWidth = _contentRef$current.scrollWidth;
var width = DomHandler.getWidth(contentRef.current);
setBackwardIsDisabledState(scrollLeft === 0);
setForwardIsDisabledState(parseInt(scrollLeft) === scrollWidth - width);
};
var onScroll = function onScroll(event) {
props.scrollable && updateButtonState();
event.preventDefault();
};
var getVisibleButtonWidths = function getVisibleButtonWidths() {
return [prevBtnRef.current, nextBtnRef.current].reduce(function (acc, el) {
return el ? acc + DomHandler.getWidth(el) : acc;
}, 0);
};
var navBackward = function navBackward() {
var width = DomHandler.getWidth(contentRef.current) - getVisibleButtonWidths();
var pos = contentRef.current.scrollLeft - width;
contentRef.current.scrollLeft = pos <= 0 ? 0 : pos;
};
var navForward = function navForward() {
var width = DomHandler.getWidth(contentRef.current) - getVisibleButtonWidths();
var pos = contentRef.current.scrollLeft + width;
var lastPos = contentRef.current.scrollWidth - width;
contentRef.current.scrollLeft = pos >= lastPos ? lastPos : pos;
};
var reset = function reset() {
setBackwardIsDisabledState(true);
setForwardIsDisabledState(false);
setHiddenTabsState([]);
if (props.onTabChange) {
props.onTabChange({
index: activeIndex
});
} else {
setActiveIndexState(props.activeIndex);
}
};
React.useEffect(function () {
updateInkBar();
updateButtonState();
});
useMountEffect(function () {
if (!idState) {
setIdState(UniqueComponentId());
}
});
useUpdateEffect(function () {
if (ObjectUtils.isNotEmpty(hiddenTabsState)) {
var tabInfo = findVisibleActiveTab(hiddenTabsState[hiddenTabsState.length - 1]);
tabInfo && onTabHeaderClick(null, tabInfo.tab, tabInfo.index);
}
}, [hiddenTabsState]);
useUpdateEffect(function () {
if (props.activeIndex !== activeIndexState) {
updateScrollBar({
index: props.activeIndex
});
}
}, [props.activeIndex]);
React.useImperativeHandle(ref, function () {
return {
props: props,
reset: reset,
getElement: function getElement() {
return elementRef.current;
}
};
});
var onCloseIconKeyDown = function onCloseIconKeyDown(event, index) {
event.preventDefault();
event.stopPropagation();
switch (event.code) {
case 'Space':
case 'NumpadEnter':
case 'Enter':
onTabHeaderClose(event, index);
break;
}
};
var createTabHeader = function createTabHeader(tab, index) {
var selected = isSelected(index);
var _TabPanelBase$getCPro = TabPanelBase.getCProps(tab),
headerStyle = _TabPanelBase$getCPro.headerStyle,
headerClassName = _TabPanelBase$getCPro.headerClassName,
_style = _TabPanelBase$getCPro.style,
_className = _TabPanelBase$getCPro.className,
disabled = _TabPanelBase$getCPro.disabled,
leftIcon = _TabPanelBase$getCPro.leftIcon,
rightIcon = _TabPanelBase$getCPro.rightIcon,
header = _TabPanelBase$getCPro.header,
headerTemplate = _TabPanelBase$getCPro.headerTemplate,
closable = _TabPanelBase$getCPro.closable,
closeIcon = _TabPanelBase$getCPro.closeIcon;
var headerId = idState + '_header_' + index;
var ariaControls = idState + index + '_content';
var tabIndex = disabled || !selected ? -1 : 0;
var leftIconElement = leftIcon && IconUtils.getJSXIcon(leftIcon, undefined, {
props: props
});
var headerTitleProps = mergeProps({
className: cx('tab.headertitle')
}, getTabPT(tab, 'headertitle', index));
var titleElement = /*#__PURE__*/React.createElement("span", headerTitleProps, header);
var rightIconElement = rightIcon && IconUtils.getJSXIcon(rightIcon, undefined, {
props: props
});
var closeIconProps = mergeProps({
className: cx('tab.closeIcon'),
onClick: function onClick(e) {
return onTabHeaderClose(e, index);
},
onKeyDown: function onKeyDown(e) {
return onCloseIconKeyDown(e, index);
},
tabIndex: 0,
'aria-label': ariaLabel('close') || 'Close'
}, getTabPT(tab, 'closeIcon', index));
var icon = closeIcon || /*#__PURE__*/React.createElement(TimesIcon, closeIconProps);
var closableIconElement = closable ? IconUtils.getJSXIcon(icon, _objectSpread$e({}, closeIconProps), {
props: props
}) : null;
var headerActionProps = mergeProps({
id: headerId,
role: 'tab',
className: cx('tab.headeraction'),
tabIndex: tabIndex,
'aria-controls': ariaControls,
'aria-selected': selected,
'aria-disabled': disabled,
onClick: function onClick(e) {
return onTabHeaderClick(e, tab, index);
},
onKeyDown: function onKeyDown(e) {
return _onKeyDown(e, tab, index);
}
}, getTabPT(tab, 'headeraction', index));
var content =
/*#__PURE__*/
// eslint-disable /
React.createElement("a", headerActionProps, leftIconElement, titleElement, rightIconElement, closableIconElement, /*#__PURE__*/React.createElement(Ripple, null))
// eslint-enable /
;
if (headerTemplate) {
var defaultContentOptions = {
className: 'p-tabview-nav-link',
titleClassName: 'p-tabview-title',
onClick: function onClick(e) {
return onTabHeaderClick(e, tab, index);
},
onKeyDown: function onKeyDown(e) {
return _onKeyDown(e, tab, index);
},
leftIconElement: leftIconElement,
titleElement: titleElement,
rightIconElement: rightIconElement,
element: content,
props: props,
index: index,
selected: selected,
ariaControls: ariaControls
};
content = ObjectUtils.getJSXElement(headerTemplate, defaultContentOptions);
}
var headerProps = mergeProps({
ref: function ref(el) {
return tabsRef.current["tab_".concat(index)] = el;
},
className: cx('tab.header', {
selected: selected,
disabled: disabled,
headerClassName: headerClassName,
_className: _className
}),
style: sx('tab.header', {
headerStyle: headerStyle,
_style: _style
}),
role: 'presentation'
}, getTabPT(tab, 'root', index), getTabPT(tab, 'header', index));
return /*#__PURE__*/React.createElement("li", headerProps, content);
};
var createTabHeaders = function createTabHeaders() {
return React.Children.map(props.children, function (tab, index) {
if (shouldUseTab(tab)) {
return createTabHeader(tab, index);
}
});
};
var createNavigator = function createNavigator() {
var headers = createTabHeaders();
var navContentProps = mergeProps({
id: idState + '_navcontent',
ref: contentRef,
className: cx('navcontent'),
style: props.style,
onScroll: onScroll
}, ptm('navcontent'));
var navProps = mergeProps({
ref: navRef,
className: cx('nav'),
role: 'tablist'
}, ptm('nav'));
var inkbarProps = mergeProps({
ref: inkbarRef,
'aria-hidden': 'true',
role: 'presentation',
className: cx('inkbar')
}, ptm('inkbar'));
return /*#__PURE__*/React.createElement("div", navContentProps, /*#__PURE__*/React.createElement("ul", navProps, headers, /*#__PURE__*/React.createElement("li", inkbarProps)));
};
var createContent = function createContent() {
var panelContainerProps = mergeProps({
className: cx('panelcontainer'),
style: props.panelContainerStyle
}, ptm('panelcontainer'));
var contents = React.Children.map(props.children, function (tab, index) {
if (shouldUseTab(tab) && (!props.renderActiveOnly || isSelected(index))) {
var selected = isSelected(index);
var contentId = idState + index + '_content';
var ariaLabelledBy = idState + '_header_' + index;
var contentProps = mergeProps({
id: contentId,
className: cx('tab.content', {
props: props,
selected: selected,
getTabProp: getTabProp,
tab: tab,
isSelected: isSelected,
shouldUseTab: shouldUseTab,
index: index
}),
style: sx('tab.content', {
props: props,
getTabProp: getTabProp,
tab: tab,
isSelected: isSelected,
shouldUseTab: shouldUseTab,
index: index
}),
role: 'tabpanel',
'aria-labelledby': ariaLabelledBy
}, TabPanelBase.getCOtherProps(tab), getTabPT(tab, 'root', index), getTabPT(tab, 'content', index));
return /*#__PURE__*/React.createElement("div", contentProps, !props.renderActiveOnly ? getTabProp(tab, 'children') : selected && getTabProp(tab, 'children'));
}
});
return /*#__PURE__*/React.createElement("div", panelContainerProps, contents);
};
var createPrevButton = function createPrevButton() {
var prevIconProps = mergeProps({
'aria-hidden': 'true'
}, ptm('previcon'));
var icon = props.prevButton || /*#__PURE__*/React.createElement(ChevronLeftIcon, prevIconProps);
var leftIcon = IconUtils.getJSXIcon(icon, _objectSpread$e({}, prevIconProps), {
props: props
});
var prevButtonProps = mergeProps({
ref: prevBtnRef,
type: 'button',
className: cx('prevbutton'),
'aria-label': ariaLabel('prevPageLabel'),
onClick: function onClick(e) {
return navBackward();
}
}, ptm('prevbutton'));
if (props.scrollable && !backwardIsDisabledState) {
return /*#__PURE__*/React.createElement("button", prevButtonProps, leftIcon, /*#__PURE__*/React.createElement(Ripple, null));
}
return null;
};
var createNextButton = function createNextButton() {
var nextIconProps = mergeProps({
'aria-hidden': 'true'
}, ptm('nexticon'));
var icon = props.nextButton || /*#__PURE__*/React.createElement(ChevronRightIcon, nextIconProps);
var rightIcon = IconUtils.getJSXIcon(icon, _objectSpread$e({}, nextIconProps), {
props: props
});
var nextButtonProps = mergeProps({
ref: nextBtnRef,
type: 'button',
className: cx('nextbutton'),
'aria-label': ariaLabel('nextPageLabel'),
onClick: function onClick(e) {
return navForward();
}
}, ptm('nextbutton'));
if (props.scrollable && !forwardIsDisabledState) {
return /*#__PURE__*/React.createElement("button", nextButtonProps, rightIcon, /*#__PURE__*/React.createElement(Ripple, null));
}
};
var rootProps = mergeProps({
id: idState,
ref: elementRef,
style: props.style,
className: classNames(props.className, cx('root'))
}, TabViewBase.getOtherProps(props), ptm('root'));
var navContainerProps = mergeProps({
className: cx('navcontainer')
}, ptm('navcontainer'));
var navigator = createNavigator();
var content = createContent();
var prevButton = createPrevButton();
var nextButton = createNextButton();
return /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement("div", navContainerProps, prevButton, navigator, nextButton), content);
});
TabPanel.displayName = 'TabPanel';
TabView.displayName = 'TabView';
var classes$7 = {
value: 'p-tag-value',
icon: 'p-tag-icon',
root: function root(_ref) {
var props = _ref.props;
return classNames('p-tag p-component', _defineProperty(_defineProperty({}, "p-tag-".concat(props.severity), props.severity !== null), 'p-tag-rounded', props.rounded));
}
};
var styles$4 = "\n@layer primereact {\n .p-tag {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n \n .p-tag-icon,\n .p-tag-value,\n .p-tag-icon.pi {\n line-height: 1.5;\n }\n \n .p-tag.p-tag-rounded {\n border-radius: 10rem;\n }\n}\n";
var TagBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Tag',
value: null,
severity: null,
rounded: false,
icon: null,
style: null,
className: null,
children: undefined
},
css: {
classes: classes$7,
styles: styles$4
}
});
function ownKeys$d(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$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Tag = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = TagBase.getProps(inProps, context);
var _TagBase$setMetaData = TagBase.setMetaData({
props: props
}),
ptm = _TagBase$setMetaData.ptm,
cx = _TagBase$setMetaData.cx,
isUnstyled = _TagBase$setMetaData.isUnstyled;
useHandleStyle(TagBase.css.styles, isUnstyled, {
name: 'tag'
});
var elementRef = React.useRef(null);
var iconProps = mergeProps({
className: cx('icon')
}, ptm('icon'));
var icon = IconUtils.getJSXIcon(props.icon, _objectSpread$d({}, iconProps), {
props: props
});
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var rootProps = mergeProps({
ref: elementRef,
className: classNames(props.className, cx('root')),
style: props.style
}, TagBase.getOtherProps(props), ptm('root'));
var valueProps = mergeProps({
className: cx('value')
}, ptm('value'));
return /*#__PURE__*/React.createElement("span", rootProps, icon, /*#__PURE__*/React.createElement("span", valueProps, props.value), /*#__PURE__*/React.createElement("span", null, props.children));
});
Tag.displayName = 'Tag';
var TerminalService = EventBus();
var classes$6 = {
root: 'p-terminal p-component',
content: 'p-terminal-content',
container: 'p-terminal-prompt-container',
command: 'p-terminal-command',
commandText: 'p-terminal-input',
prompt: 'p-terminal-prompt',
response: 'p-terminal-response'
};
var styles$3 = "\n@layer primereact {\n .p-terminal {\n height: 18rem;\n overflow: auto;\n }\n \n .p-terminal-prompt-container {\n display: flex;\n align-items: center;\n }\n \n .p-terminal-input {\n flex: 1 1 auto;\n border: 0 none;\n background-color: transparent;\n color: inherit;\n padding: 0;\n outline: 0 none;\n }\n \n .p-terminal-input::-ms-clear {\n display: none;\n } \n}\n";
var TerminalBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Terminal',
id: null,
style: null,
className: null,
welcomeMessage: null,
prompt: null,
children: undefined
},
css: {
classes: classes$6,
styles: styles$3
}
});
var Terminal = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = TerminalBase.getProps(inProps, context);
var _React$useState = React.useState(''),
_React$useState2 = _slicedToArray(_React$useState, 2),
commandTextState = _React$useState2[0],
setCommandTextState = _React$useState2[1];
var _React$useState3 = React.useState([]),
_React$useState4 = _slicedToArray(_React$useState3, 2),
commandsState = _React$useState4[0],
setCommandsState = _React$useState4[1];
var _React$useState5 = React.useState(0),
_React$useState6 = _slicedToArray(_React$useState5, 2),
indexState = _React$useState6[0],
setIndexState = _React$useState6[1];
var _React$useState7 = React.useState(''),
_React$useState8 = _slicedToArray(_React$useState7, 2),
emittedTextState = _React$useState8[0],
setEmittedTextState = _React$useState8[1];
var elementRef = React.useRef(null);
var inputRef = React.useRef(null);
var isEmitted = React.useRef(false);
var _TerminalBase$setMeta = TerminalBase.setMetaData({
props: props,
state: {
commandText: commandTextState,
commands: commandsState
}
}),
ptm = _TerminalBase$setMeta.ptm,
cx = _TerminalBase$setMeta.cx,
isUnstyled = _TerminalBase$setMeta.isUnstyled;
useHandleStyle(TerminalBase.css.styles, isUnstyled, {
name: 'terminal'
});
var promptProps = mergeProps({
className: cx('prompt')
}, ptm('prompt'));
var onClick = function onClick() {
DomHandler.focus(inputRef.current);
};
var onInputChange = function onInputChange(e) {
setCommandTextState(e.target.value);
};
var onKeyDown = function onKeyDown(event) {
switch (event.code) {
case 'ArrowUp':
if (commandsState && commandsState.length) {
var prevIndex = indexState - 1 < 0 ? commandsState.length - 1 : indexState - 1;
var command = commandsState[prevIndex];
setIndexState(prevIndex);
setCommandTextState(command.text);
}
break;
case 'Enter':
case 'NumpadEnter':
if (commandTextState) {
var newCommands = _toConsumableArray(commandsState);
newCommands.push({
text: commandTextState
});
setIndexState(function (prevIndex) {
return prevIndex + 1;
});
setCommandTextState('');
setCommandsState(newCommands);
setEmittedTextState(commandTextState);
isEmitted.current = true;
}
break;
}
};
React.useImperativeHandle(ref, function () {
return {
props: props,
focus: function focus() {
return DomHandler.focus(inputRef.current);
},
getElement: function getElement() {
return elementRef.current;
}
};
});
React.useEffect(function () {
var response = function response(res) {
if (commandsState && commandsState.length > 0) {
var commands = _toConsumableArray(commandsState);
commands[commands.length - 1].response = res;
setCommandsState(commands);
}
};
var clear = function clear() {
setCommandsState([]);
setIndexState(0);
};
TerminalService.on('response', response);
TerminalService.on('clear', clear);
return function () {
TerminalService.off('response', response);
TerminalService.off('clear', clear);
};
}, [commandsState]);
React.useEffect(function () {
if (isEmitted.current) {
TerminalService.emit('command', emittedTextState);
isEmitted.current = false;
}
elementRef.current.scrollTop = elementRef.current.scrollHeight;
});
var createWelcomeMessage = function createWelcomeMessage() {
if (props.welcomeMessage) {
var welcomeMessageProps = mergeProps(ptm('welcomeMessage'));
return /*#__PURE__*/React.createElement("div", welcomeMessageProps, props.welcomeMessage);
}
return null;
};
var createCommand = function createCommand(command, index) {
var text = command.text,
response = command.response;
var key = text + '_' + index;
var commandsProps = mergeProps({
key: key
}, ptm('commands'));
var commandProps = mergeProps({
className: cx('command')
}, ptm('command'));
var responseProps = mergeProps({
className: cx('response'),
'aria-live': 'polite'
}, ptm('response'));
return /*#__PURE__*/React.createElement("div", commandsProps, /*#__PURE__*/React.createElement("span", promptProps, props.prompt, "\xA0"), /*#__PURE__*/React.createElement("span", commandProps, text), /*#__PURE__*/React.createElement("div", responseProps, response));
};
var createContent = function createContent() {
var content = commandsState.map(createCommand);
var contentProps = mergeProps({
className: cx('content')
}, ptm('content'));
return /*#__PURE__*/React.createElement("div", contentProps, content);
};
var createPromptContainer = function createPromptContainer() {
var containerProps = mergeProps({
className: cx('container')
}, ptm('container'));
var commandTextProps = mergeProps({
ref: inputRef,
value: commandTextState,
type: 'text',
className: cx('commandText'),
autoComplete: 'off',
onChange: function onChange(e) {
return onInputChange(e);
},
onKeyDown: onKeyDown
}, ptm('commandText'));
return /*#__PURE__*/React.createElement("div", containerProps, /*#__PURE__*/React.createElement("span", promptProps, props.prompt, "\xA0"), /*#__PURE__*/React.createElement("input", commandTextProps));
};
var welcomeMessage = createWelcomeMessage();
var content = createContent();
var prompt = createPromptContainer();
var rootProps = mergeProps({
id: props.id,
ref: elementRef,
className: classNames(props.className, cx('root')),
style: props.style,
onClick: onClick
}, TerminalBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("div", rootProps, welcomeMessage, content, prompt);
}));
Terminal.displayName = 'Terminal';
var TimelineBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Timeline',
align: 'left',
className: null,
content: null,
dataKey: null,
layout: 'vertical',
marker: null,
opposite: null,
value: null,
children: undefined
},
css: {
classes: {
marker: 'p-timeline-event-marker',
connector: 'p-timeline-event-connector',
event: 'p-timeline-event',
opposite: 'p-timeline-event-opposite',
separator: 'p-timeline-event-separator',
content: 'p-timeline-event-content',
root: function root(_ref) {
var props = _ref.props;
return classNames('p-timeline p-component', _defineProperty(_defineProperty({}, "p-timeline-".concat(props.align), true), "p-timeline-".concat(props.layout), true), props.className);
}
},
styles: "\n @layer primereact {\n .p-timeline {\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n }\n \n .p-timeline-left .p-timeline-event-opposite {\n text-align: right;\n }\n \n .p-timeline-left .p-timeline-event-content {\n text-align: left;\n }\n \n .p-timeline-right .p-timeline-event {\n flex-direction: row-reverse;\n }\n \n .p-timeline-right .p-timeline-event-opposite {\n text-align: left;\n }\n \n .p-timeline-right .p-timeline-event-content {\n text-align: right;\n }\n \n .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {\n flex-direction: row-reverse;\n }\n \n .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {\n text-align: right;\n }\n \n .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {\n text-align: left;\n }\n \n .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {\n text-align: left;\n }\n \n .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {\n text-align: right;\n }\n \n .p-timeline-event {\n display: flex;\n position: relative;\n min-height: 70px;\n }\n \n .p-timeline-event:last-child {\n min-height: 0;\n }\n \n .p-timeline-event-opposite {\n flex: 1;\n padding: 0 1rem;\n }\n \n .p-timeline-event-content {\n flex: 1;\n padding: 0 1rem;\n }\n \n .p-timeline-event-separator {\n flex: 0;\n display: flex;\n align-items: center;\n flex-direction: column;\n }\n \n .p-timeline-event-marker {\n display: flex;\n align-self: baseline;\n }\n \n .p-timeline-event-connector {\n flex-grow: 1;\n }\n \n .p-timeline-horizontal {\n flex-direction: row;\n }\n \n .p-timeline-horizontal .p-timeline-event {\n flex-direction: column;\n flex: 1;\n }\n \n .p-timeline-horizontal .p-timeline-event:last-child {\n flex: 0;\n }\n \n .p-timeline-horizontal .p-timeline-event-separator {\n flex-direction: row;\n }\n \n .p-timeline-horizontal .p-timeline-event-connector {\n width: 100%;\n }\n \n .p-timeline-bottom .p-timeline-event {\n flex-direction: column-reverse;\n }\n \n .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {\n flex-direction: column-reverse;\n }\n }\n "
}
});
var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = TimelineBase.getProps(inProps, context);
var _TimelineBase$setMeta = TimelineBase.setMetaData({
props: props
}),
ptm = _TimelineBase$setMeta.ptm,
cx = _TimelineBase$setMeta.cx,
isUnstyled = _TimelineBase$setMeta.isUnstyled;
useHandleStyle(TimelineBase.css.styles, isUnstyled, {
name: 'timeline'
});
var getPTOptions = function getPTOptions(key, index) {
return ptm(key, {
context: {
index: index
}
});
};
var elementRef = React.useRef(null);
var getKey = function getKey(item, index) {
return props.dataKey ? ObjectUtils.resolveFieldData(item, props.dataKey) : "pr_id__".concat(index);
};
var createEvents = function createEvents() {
return props.value && props.value.map(function (item, index) {
var opposite = ObjectUtils.getJSXElement(props.opposite, item, index);
var markerProps = mergeProps({
className: cx('marker')
}, getPTOptions('marker', index));
var marker = ObjectUtils.getJSXElement(props.marker, item, index) || /*#__PURE__*/React.createElement("div", markerProps);
var connectorProps = mergeProps({
className: cx('connector')
}, getPTOptions('connector', index));
var connector = index !== props.value.length - 1 && /*#__PURE__*/React.createElement("div", connectorProps);
var content = ObjectUtils.getJSXElement(props.content, item, index);
var eventProps = mergeProps({
className: cx('event')
}, getPTOptions('event', index));
var oppositeProps = mergeProps({
className: cx('opposite')
}, getPTOptions('opposite', index));
var separatorProps = mergeProps({
className: cx('separator')
}, getPTOptions('separator', index));
var contentProps = mergeProps({
className: cx('content')
}, getPTOptions('content', index));
return /*#__PURE__*/React.createElement("div", _extends({
key: getKey(item, index)
}, eventProps), /*#__PURE__*/React.createElement("div", oppositeProps, opposite), /*#__PURE__*/React.createElement("div", separatorProps, marker, connector), /*#__PURE__*/React.createElement("div", contentProps, content));
});
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var events = createEvents();
var rootProps = mergeProps({
ref: elementRef,
className: classNames(props.className, cx('root'))
}, TimelineBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("div", rootProps, events);
}));
Timeline.displayName = 'Timeline';
var styles$2 = "\n@layer primereact {\n .p-toast {\n width: calc(100% - var(--toast-indent, 0px));\n max-width: 25rem;\n }\n \n .p-toast-message-icon {\n flex-shrink: 0;\n }\n \n .p-toast-message-content {\n display: flex;\n align-items: flex-start;\n }\n \n .p-toast-message-text {\n flex: 1 1 auto;\n }\n \n .p-toast-summary {\n overflow-wrap: anywhere;\n }\n \n .p-toast-detail {\n overflow-wrap: anywhere;\n }\n \n .p-toast-top-center {\n transform: translateX(-50%);\n }\n \n .p-toast-bottom-center {\n transform: translateX(-50%);\n }\n \n .p-toast-center {\n min-width: 20vw;\n transform: translate(-50%, -50%);\n }\n \n .p-toast-icon-close {\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n }\n \n .p-toast-icon-close.p-link {\n cursor: pointer;\n }\n \n /* Animations */\n .p-toast-message-enter {\n opacity: 0;\n transform: translateY(50%);\n }\n \n .p-toast-message-enter-active {\n opacity: 1;\n transform: translateY(0);\n transition: transform 0.3s, opacity 0.3s;\n }\n \n .p-toast-message-enter-done {\n transform: none;\n }\n \n .p-toast-message-exit {\n opacity: 1;\n max-height: 1000px;\n }\n \n .p-toast .p-toast-message.p-toast-message-exit-active {\n opacity: 0;\n max-height: 0;\n margin-bottom: 0;\n overflow: hidden;\n transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;\n }\n}\n";
var classes$5 = {
root: function root(_ref) {
var props = _ref.props,
context = _ref.context;
return classNames('p-toast p-component p-toast-' + props.position, props.className, {
'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
});
},
message: {
message: function message(_ref2) {
var severity = _ref2.severity;
return classNames('p-toast-message', _defineProperty({}, "p-toast-message-".concat(severity), severity));
},
content: 'p-toast-message-content',
buttonicon: 'p-toast-icon-close-icon',
closeButton: 'p-toast-icon-close p-link',
icon: 'p-toast-message-icon',
text: 'p-toast-message-text',
summary: 'p-toast-summary',
detail: 'p-toast-detail'
},
transition: 'p-toast-message'
};
var inlineStyles = {
root: function root(_ref3) {
var props = _ref3.props;
return {
position: 'fixed',
top: props.position === 'top-right' || props.position === 'top-left' || props.position === 'top-center' ? '20px' : props.position === 'center' ? '50%' : null,
right: (props.position === 'top-right' || props.position === 'bottom-right') && '20px',
bottom: (props.position === 'bottom-left' || props.position === 'bottom-right' || props.position === 'bottom-center') && '20px',
left: props.position === 'top-left' || props.position === 'bottom-left' ? '20px' : props.position === 'center' || props.position === 'top-center' || props.position === 'bottom-center' ? '50%' : null
};
}
};
var ToastBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Toast',
id: null,
className: null,
content: null,
style: null,
baseZIndex: 0,
position: 'top-right',
transitionOptions: null,
appendTo: 'self',
onClick: null,
onRemove: null,
onShow: null,
onHide: null,
onMouseEnter: null,
onMouseLeave: null,
children: undefined
},
css: {
classes: classes$5,
styles: styles$2,
inlineStyles: inlineStyles
}
});
function ownKeys$c(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$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var ToastMessage = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (props, ref) {
var mergeProps = useMergeProps();
var messageInfo = props.messageInfo,
parentMetaData = props.metaData,
_props$ptCallbacks = props.ptCallbacks,
ptm = _props$ptCallbacks.ptm,
ptmo = _props$ptCallbacks.ptmo,
cx = _props$ptCallbacks.cx,
index = props.index;
var _messageInfo$message = messageInfo.message,
severity = _messageInfo$message.severity,
content = _messageInfo$message.content,
summary = _messageInfo$message.summary,
detail = _messageInfo$message.detail,
closable = _messageInfo$message.closable,
life = _messageInfo$message.life,
sticky = _messageInfo$message.sticky,
_className = _messageInfo$message.className,
style = _messageInfo$message.style,
_contentClassName = _messageInfo$message.contentClassName,
contentStyle = _messageInfo$message.contentStyle,
_icon = _messageInfo$message.icon,
_closeIcon = _messageInfo$message.closeIcon,
pt = _messageInfo$message.pt;
var params = {
index: index
};
var parentParams = _objectSpread$c(_objectSpread$c({}, parentMetaData), params);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focused = _React$useState2[0],
setFocused = _React$useState2[1];
var _useTimeout = useTimeout(function () {
onClose();
}, life || 3000, !sticky && !focused),
_useTimeout2 = _slicedToArray(_useTimeout, 1),
clearTimer = _useTimeout2[0];
var getPTOptions = function getPTOptions(key, options) {
return ptm(key, _objectSpread$c({
hostName: props.hostName
}, options));
};
var onClose = function onClose() {
clearTimer();
props.onClose && props.onClose(messageInfo);
};
var onClick = function onClick(event) {
if (props.onClick && !(DomHandler.hasClass(event.target, 'p-toast-icon-close') || DomHandler.hasClass(event.target, 'p-toast-icon-close-icon'))) {
props.onClick(messageInfo.message);
}
};
var onMouseEnter = function onMouseEnter(event) {
props.onMouseEnter && props.onMouseEnter(event);
// do not continue if the user has canceled the event
if (event.defaultPrevented) {
return;
}
// stop timer while user has focused message
if (!sticky) {
clearTimer();
setFocused(true);
}
};
var onMouseLeave = function onMouseLeave(event) {
props.onMouseLeave && props.onMouseLeave(event);
// do not continue if the user has canceled the event
if (event.defaultPrevented) {
return;
}
// restart timer when user has left message
if (!sticky) {
setFocused(false);
}
};
var createCloseIcon = function createCloseIcon() {
var buttonIconProps = mergeProps({
className: cx('message.buttonicon')
}, getPTOptions('buttonicon', parentParams), ptmo(pt, 'buttonicon', _objectSpread$c(_objectSpread$c({}, params), {}, {
hostName: props.hostName
})));
var icon = _closeIcon || /*#__PURE__*/React.createElement(TimesIcon, buttonIconProps);
var closeIcon = IconUtils.getJSXIcon(icon, _objectSpread$c({}, buttonIconProps), {
props: props
});
var closeButtonProps = mergeProps({
type: 'button',
className: cx('message.closeButton'),
onClick: onClose,
'aria-label': props.ariaCloseLabel || ariaLabel('close')
}, getPTOptions('closeButton', parentParams), ptmo(pt, 'closeButton', _objectSpread$c(_objectSpread$c({}, params), {}, {
hostName: props.hostName
})));
if (closable !== false) {
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", closeButtonProps, closeIcon, /*#__PURE__*/React.createElement(Ripple, null)));
}
return null;
};
var createMessage = function createMessage() {
if (messageInfo) {
var contentEl = ObjectUtils.getJSXElement(content, {
message: messageInfo.message,
onClick: onClick,
onClose: onClose
});
var iconProps = mergeProps({
className: cx('message.icon')
}, getPTOptions('icon', parentParams), ptmo(pt, 'icon', _objectSpread$c(_objectSpread$c({}, params), {}, {
hostName: props.hostName
})));
var icon = _icon;
if (!_icon) {
switch (severity) {
case 'info':
icon = /*#__PURE__*/React.createElement(InfoCircleIcon, iconProps);
break;
case 'warn':
icon = /*#__PURE__*/React.createElement(ExclamationTriangleIcon, iconProps);
break;
case 'error':
icon = /*#__PURE__*/React.createElement(TimesCircleIcon, iconProps);
break;
case 'success':
icon = /*#__PURE__*/React.createElement(CheckIcon, iconProps);
break;
}
}
var messageIcon = IconUtils.getJSXIcon(icon, _objectSpread$c({}, iconProps), {
props: props
});
var textProps = mergeProps({
className: cx('message.text')
}, getPTOptions('text', parentParams), ptmo(pt, 'text', _objectSpread$c(_objectSpread$c({}, params), {}, {
hostName: props.hostName
})));
var summaryProps = mergeProps({
className: cx('message.summary')
}, getPTOptions('summary', parentParams), ptmo(pt, 'summary', _objectSpread$c(_objectSpread$c({}, params), {}, {
hostName: props.hostName
})));
var detailProps = mergeProps({
className: cx('message.detail')
}, getPTOptions('detail', parentParams), ptmo(pt, 'detail', _objectSpread$c(_objectSpread$c({}, params), {}, {
hostName: props.hostName
})));
return contentEl || /*#__PURE__*/React.createElement(React.Fragment, null, messageIcon, /*#__PURE__*/React.createElement("div", textProps, /*#__PURE__*/React.createElement("span", summaryProps, summary), detail && /*#__PURE__*/React.createElement("div", detailProps, detail)));
}
return null;
};
var message = createMessage();
var closeIcon = createCloseIcon();
var messageProps = mergeProps({
ref: ref,
className: classNames(_className, cx('message.message', {
severity: severity
})),
style: style,
role: 'alert',
'aria-live': 'assertive',
'aria-atomic': 'true',
onClick: onClick,
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave
}, getPTOptions('message', parentParams), ptmo(pt, 'root', _objectSpread$c(_objectSpread$c({}, params), {}, {
hostName: props.hostName
})));
var contentProps = mergeProps({
className: classNames(_contentClassName, cx('message.content')),
style: contentStyle
}, getPTOptions('content', parentParams), ptmo(pt, 'content', _objectSpread$c(_objectSpread$c({}, params), {}, {
hostName: props.hostName
})));
return /*#__PURE__*/React.createElement("div", messageProps, /*#__PURE__*/React.createElement("div", contentProps, message, closeIcon));
}));
ToastMessage.displayName = 'ToastMessage';
var messageIdx = 0;
var Toast = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = ToastBase.getProps(inProps, context);
var _React$useState = React.useState([]),
_React$useState2 = _slicedToArray(_React$useState, 2),
messagesState = _React$useState2[0],
setMessagesState = _React$useState2[1];
var containerRef = React.useRef(null);
var metaData = {
props: props,
state: {
messages: messagesState
}
};
var ptCallbacks = ToastBase.setMetaData(metaData);
useHandleStyle(ToastBase.css.styles, ptCallbacks.isUnstyled, {
name: 'toast'
});
var show = function show(messageInfo) {
if (messageInfo) {
setMessagesState(function (prev) {
return assignIdentifiers(prev, messageInfo, true);
});
}
};
var assignIdentifiers = function assignIdentifiers(currentState, messageInfo, copy) {
var messages;
if (Array.isArray(messageInfo)) {
var multipleMessages = messageInfo.reduce(function (acc, message) {
acc.push({
_pId: messageIdx++,
message: message
});
return acc;
}, []);
if (copy) {
messages = currentState ? [].concat(_toConsumableArray(currentState), _toConsumableArray(multipleMessages)) : multipleMessages;
} else {
messages = multipleMessages;
}
} else {
var message = {
_pId: messageIdx++,
message: messageInfo
};
if (copy) {
messages = currentState ? [].concat(_toConsumableArray(currentState), [message]) : [message];
} else {
messages = [message];
}
}
return messages;
};
var clear = function clear() {
ZIndexUtils.clear(containerRef.current);
setMessagesState([]);
};
var replace = function replace(messageInfo) {
setMessagesState(function (previousMessagesState) {
return assignIdentifiers(previousMessagesState, messageInfo, false);
});
};
var remove = function remove(messageInfo) {
// allow removal by ID or by message equality
var removeMessage = ObjectUtils.isNotEmpty(messageInfo._pId) ? messageInfo._pId : messageInfo.message || messageInfo;
setMessagesState(function (prev) {
return prev.filter(function (msg) {
return msg._pId !== messageInfo._pId && !ObjectUtils.deepEquals(msg.message, removeMessage);
});
});
props.onRemove && props.onRemove(messageInfo.message || removeMessage);
};
var onClose = function onClose(messageInfo) {
remove(messageInfo);
};
var onEntered = function onEntered() {
props.onShow && props.onShow();
};
var onExited = function onExited() {
messagesState.length === 1 && ZIndexUtils.clear(containerRef.current);
props.onHide && props.onHide();
};
useUpdateEffect(function () {
ZIndexUtils.set('toast', containerRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, props.baseZIndex || context && context.zIndex.toast || PrimeReact.zIndex.toast);
}, [messagesState, props.baseZIndex]);
useUnmountEffect(function () {
ZIndexUtils.clear(containerRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
show: show,
replace: replace,
remove: remove,
clear: clear,
getElement: function getElement() {
return containerRef.current;
}
};
});
var createElement = function createElement() {
var rootProps = mergeProps({
ref: containerRef,
id: props.id,
className: ptCallbacks.cx('root', {
context: context
}),
style: ptCallbacks.sx('root')
}, ToastBase.getOtherProps(props), ptCallbacks.ptm('root'));
var transitionProps = mergeProps({
classNames: ptCallbacks.cx('transition'),
timeout: {
enter: 300,
exit: 300
},
options: props.transitionOptions,
unmountOnExit: true,
onEntered: onEntered,
onExited: onExited
}, ptCallbacks.ptm('transition'));
return /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement(TransitionGroup, null, messagesState && messagesState.map(function (messageInfo, index) {
var messageRef = /*#__PURE__*/React.createRef();
return /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: messageRef,
key: messageInfo._pId
}, transitionProps), inProps.content ? ObjectUtils.getJSXElement(inProps.content, {
message: messageInfo.message
}) : /*#__PURE__*/React.createElement(ToastMessage, {
hostName: "Toast",
ref: messageRef,
messageInfo: messageInfo,
index: index,
onClick: props.onClick,
onClose: onClose,
onMouseEnter: props.onMouseEnter,
onMouseLeave: props.onMouseLeave,
closeIcon: props.closeIcon,
ptCallbacks: ptCallbacks,
metaData: metaData
}));
})));
};
var element = createElement();
return /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo
});
}));
Toast.displayName = 'Toast';
var classes$4 = {
root: function root(_ref) {
var props = _ref.props;
return classNames('p-togglebutton p-component', {
'p-disabled': props.disabled,
'p-highlight': props.checked,
'p-invalid': props.invalid
});
},
input: 'p-togglebutton-input',
box: function box(_ref2) {
var hasIcon = _ref2.hasIcon,
hasLabel = _ref2.hasLabel;
return classNames('p-button p-component', {
'p-button-icon-only': hasIcon && !hasLabel
});
},
icon: function icon(_ref3) {
var props = _ref3.props,
label = _ref3.label;
return classNames('p-button-icon', {
'p-button-icon-left': props.iconPos === 'left' && label,
'p-button-icon-right': props.iconPos === 'right' && label
});
},
label: 'p-button-label'
};
var ToggleButtonBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'ToggleButton',
id: null,
onIcon: null,
offIcon: null,
onLabel: 'Yes',
offLabel: 'No',
iconPos: 'left',
invalid: false,
style: null,
className: null,
checked: false,
tabIndex: 0,
tooltip: null,
tooltipOptions: null,
onChange: null,
onFocus: null,
onBlur: null,
children: undefined
},
css: {
classes: classes$4
}
});
function ownKeys$b(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$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var ToggleButton = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = ToggleButtonBase.getProps(inProps, context);
var elementRef = React.useRef(null);
var _ToggleButtonBase$set = ToggleButtonBase.setMetaData({
props: props
}),
ptm = _ToggleButtonBase$set.ptm,
cx = _ToggleButtonBase$set.cx,
isUnstyled = _ToggleButtonBase$set.isUnstyled;
useHandleStyle(ToggleButtonBase.css.styles, isUnstyled, {
name: 'togglebutton'
});
var hasLabel = props.onLabel && props.onLabel.length > 0 && props.offLabel && props.offLabel.length > 0;
var hasIcon = props.onIcon && props.offIcon;
var label = hasLabel ? props.checked ? props.onLabel : props.offLabel : "\xA0";
var icon = props.checked ? props.onIcon : props.offIcon;
var toggle = function toggle(e) {
if (!props.disabled && props.onChange && !props.readonly) {
props.onChange({
originalEvent: e,
value: !props.checked,
stopPropagation: function stopPropagation() {
e.stopPropagation();
},
preventDefault: function preventDefault() {
e.preventDefault();
},
target: {
name: props.name,
id: props.id,
value: !props.checked
}
});
}
};
var onKeyDown = function onKeyDown(event) {
if (event.keyCode === 32) {
toggle(event);
event.preventDefault();
}
};
var onFocus = function onFocus(event) {
var _props$onFocus;
props === null || props === void 0 || (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, event);
};
var onBlur = function onBlur(event) {
var _props$onBlur;
props === null || props === void 0 || (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, event);
};
var createIcon = function createIcon() {
if (hasIcon) {
var iconProps = mergeProps({
className: cx('icon', {
label: label
})
}, ptm('icon'));
return IconUtils.getJSXIcon(icon, _objectSpread$b({}, iconProps), {
props: props
});
}
return null;
};
React.useImperativeHandle(ref, function () {
return {
props: props,
focus: function focus() {
return DomHandler.focusFirstElement(elementRef.current);
},
getElement: function getElement() {
return elementRef.current;
}
};
});
useMountEffect(function () {
if (props.autoFocus) {
DomHandler.focusFirstElement(elementRef.current);
}
});
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var tabIndex = props.disabled ? -1 : props.tabIndex;
var iconElement = createIcon();
var labelProps = mergeProps({
className: cx('label')
}, ptm('label'));
var rootProps = mergeProps({
ref: elementRef,
id: props.id,
className: classNames(props.className, cx('root', {
hasIcon: hasIcon,
hasLabel: hasLabel
})),
'data-p-highlight': props.checked,
'data-p-disabled': props.disabled
}, ToggleButtonBase.getOtherProps(props), ptm('root'));
var inputProps = mergeProps({
id: props.inputId,
className: cx('input'),
style: props.style,
onChange: toggle,
onFocus: onFocus,
onBlur: onBlur,
onKeyDown: onKeyDown,
tabIndex: tabIndex,
type: 'checkbox',
'aria-invalid': props.invalid,
disabled: props.disabled,
readOnly: props.readonly,
value: props.checked,
checked: props.checked,
'aria-label': props['aria-label'],
'aria-labelledby': props['aria-labelledby']
}, ptm('input'));
var boxProps = mergeProps({
className: classNames(props.className, cx('box', {
hasIcon: hasIcon,
hasLabel: hasLabel
}))
}, ptm('box'));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement("input", inputProps), /*#__PURE__*/React.createElement("div", boxProps, iconElement, /*#__PURE__*/React.createElement("span", labelProps, label), /*#__PURE__*/React.createElement(Ripple, null))), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip,
pt: ptm('tooltip')
}, props.tooltipOptions)));
}));
ToggleButton.displayName = 'ToggleButton';
var ToolbarBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Toolbar',
id: null,
style: null,
className: null,
left: null,
right: null,
start: null,
center: null,
end: null,
children: undefined
},
css: {
classes: {
root: 'p-toolbar p-component',
start: 'p-toolbar-group-start p-toolbar-group-left',
center: 'p-toolbar-group-center',
end: 'p-toolbar-group-end p-toolbar-group-right'
},
styles: "\n @layer primereact {\n .p-toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n }\n \n .p-toolbar-group-start,\n .p-toolbar-group-center,\n .p-toolbar-group-end {\n display: flex;\n align-items: center;\n }\n \n .p-toolbar-group-left,\n .p-toolbar-group-right {\n display: flex;\n align-items: center;\n }\n }\n "
}
});
var Toolbar = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = ToolbarBase.getProps(inProps, context);
var elementRef = React.useRef(null);
var start = ObjectUtils.getJSXElement(props.left || props.start, props);
var center = ObjectUtils.getJSXElement(props.center, props);
var end = ObjectUtils.getJSXElement(props.right || props.end, props);
var _ToolbarBase$setMetaD = ToolbarBase.setMetaData({
props: props
}),
ptm = _ToolbarBase$setMetaD.ptm,
cx = _ToolbarBase$setMetaD.cx,
isUnstyled = _ToolbarBase$setMetaD.isUnstyled;
useHandleStyle(ToolbarBase.css.styles, isUnstyled, {
name: 'toolbar'
});
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var startProps = mergeProps({
className: cx('start')
}, ptm('start'));
var centerProps = mergeProps({
className: cx('center')
}, ptm('center'));
var endProps = mergeProps({
className: cx('end')
}, ptm('end'));
var rootProps = mergeProps({
id: props.id,
ref: elementRef,
style: props.style,
className: classNames(props.className, cx('root')),
role: 'toolbar'
}, ToolbarBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement("div", startProps, start), /*#__PURE__*/React.createElement("div", centerProps, center), /*#__PURE__*/React.createElement("div", endProps, end));
}));
Toolbar.displayName = 'Toolbar';
var classes$3 = {
root: function root(_ref) {
var props = _ref.props;
return classNames('p-tree p-component', {
'p-tree-selectable': props.selectionMode,
'p-tree-loading': props.loading,
'p-disabled': props.disabled
});
},
loadingOverlay: 'p-tree-loading-overlay p-component-overlay',
loadingIcon: 'p-tree-loading-icon',
filterContainer: 'p-tree-filter-container',
input: 'p-tree-filter p-inputtext p-component',
searchIcon: 'p-tree-filter-icon',
container: 'p-tree-container',
node: function node(_ref2) {
var leaf = _ref2.leaf;
return classNames('p-treenode', {
'p-treenode-leaf': leaf
});
},
content: function content(_ref3) {
var props = _ref3.nodeProps,
checked = _ref3.checked,
selected = _ref3.selected,
isCheckboxSelectionMode = _ref3.isCheckboxSelectionMode;
return classNames('p-treenode-content', {
'p-treenode-selectable': props.selectionMode && props.node.selectable !== false,
'p-highlight': isCheckboxSelectionMode() ? checked : selected,
'p-highlight-contextmenu': props.contextMenuSelectionKey && props.contextMenuSelectionKey === props.node.key,
'p-disabled': props.disabled
});
},
toggler: 'p-tree-toggler p-link',
togglerIcon: 'p-tree-toggler-icon',
nodeCheckbox: function nodeCheckbox(_ref4) {
var partialChecked = _ref4.partialChecked;
return classNames({
'p-indeterminate': partialChecked
});
},
nodeIcon: 'p-treenode-icon',
label: 'p-treenode-label',
subgroup: 'p-treenode-children',
checkIcon: 'p-checkbox-icon',
emptyMessage: 'p-treenode p-tree-empty-message',
droppoint: 'p-treenode-droppoint',
header: 'p-tree-header',
footer: 'p-tree-footer'
};
var TreeBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Tree',
__parentMetadata: null,
id: null,
value: null,
ariaLabel: null,
ariaLabelledBy: null,
checkboxIcon: null,
className: null,
collapseIcon: null,
contentClassName: null,
contentStyle: null,
contextMenuSelectionKey: null,
disabled: false,
dragdropScope: null,
emptyMessage: null,
expandIcon: null,
expandedKeys: null,
filter: false,
filterBy: 'label',
filterDelay: 300,
filterIcon: null,
filterLocale: undefined,
filterMode: 'lenient',
filterPlaceholder: null,
filterTemplate: null,
filterValue: null,
footer: null,
header: null,
level: 0,
loading: false,
loadingIcon: null,
metaKeySelection: false,
nodeTemplate: null,
onCollapse: null,
onContextMenu: null,
onContextMenuSelectionChange: null,
onDragDrop: null,
onExpand: null,
onFilterValueChange: null,
onNodeClick: null,
onNodeDoubleClick: null,
onSelect: null,
onSelectionChange: null,
onToggle: null,
onUnselect: null,
propagateSelectionDown: true,
propagateSelectionUp: true,
selectionKeys: null,
selectionMode: null,
showHeader: true,
style: null,
togglerTemplate: null,
children: undefined
},
css: {
classes: classes$3
}
});
function _createForOfIteratorHelper$6(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$6(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray$6(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$6(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$6(r, a) : void 0; } }
function _arrayLikeToArray$6(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 ownKeys$a(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$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var UITreeNode = /*#__PURE__*/React.memo(function (props) {
var contentRef = React.useRef(null);
var elementRef = React.useRef(null);
var nodeTouched = React.useRef(false);
var mergeProps = useMergeProps();
var isLeaf = props.isNodeLeaf(props.node);
var label = props.node.label;
var isFiltering = props.isFiltering;
var expanded = (props.expandedKeys ? props.expandedKeys[props.node.key] !== undefined : false) || !isFiltering && props.node.expanded;
var ptm = props.ptm,
cx = props.cx;
var getPTOptions = function getPTOptions(key) {
return ptm(key, {
hostName: props.hostName,
context: {
selected: !isCheckboxSelectionMode() ? isSelected() : false,
expanded: expanded || false,
checked: isCheckboxSelectionMode() ? isChecked() : false,
leaf: isLeaf
}
});
};
var expand = function expand(event) {
var navigateFocusToChild = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var expandedKeys = props.expandedKeys ? _objectSpread$a({}, props.expandedKeys) : {};
expandedKeys[props.node.key] = true;
props.onToggle({
originalEvent: event,
value: expandedKeys,
navigateFocusToChild: navigateFocusToChild
});
invokeToggleEvents(event, true);
};
var collapse = function collapse(event) {
var expandedKeys = _objectSpread$a({}, props.expandedKeys);
delete expandedKeys[props.node.key];
props.onToggle({
originalEvent: event,
value: expandedKeys
});
invokeToggleEvents(event, false);
};
var onTogglerClick = function onTogglerClick(event) {
if (props.disabled) {
return;
}
expanded ? collapse(event) : expand(event, false);
event.preventDefault();
event.stopPropagation();
};
var invokeToggleEvents = function invokeToggleEvents(event, isExpanded) {
if (isExpanded) {
if (props.onExpand) {
props.onExpand({
originalEvent: event,
node: props.node
});
}
} else if (props.onCollapse) {
props.onCollapse({
originalEvent: event,
node: props.node
});
}
};
var findNextNonDroppointSibling = function findNextNonDroppointSibling(nodeElement) {
var nextNodeSibling = nodeElement.nextSibling;
if (nextNodeSibling) {
var isNextDropPoint = nextNodeSibling.getAttribute('data-pc-section') === 'droppoint';
if (isNextDropPoint) {
//skip drop point and return next elemnt
if (nextNodeSibling.nextElementSibling) {
return nextNodeSibling.nextElementSibling;
} else {
//nothing after droppoint go outside
return null;
}
}
return nextNodeSibling;
}
return null;
};
var _findNextSiblingOfAncestor = function findNextSiblingOfAncestor(nodeElement) {
var parentNodeElement = getParentNodeElement(nodeElement);
return parentNodeElement ? findNextNonDroppointSibling(parentNodeElement) || _findNextSiblingOfAncestor(parentNodeElement) : null;
};
var _findLastVisibleDescendant = function findLastVisibleDescendant(nodeElement) {
var childrenListElement = nodeElement.children[1];
if (childrenListElement) {
//skip droppoint
var offset = props.dragdropScope ? 2 : 1;
var lastChildElement = childrenListElement.children[childrenListElement.children.length - offset];
return _findLastVisibleDescendant(lastChildElement);
}
return nodeElement;
};
var getParentNodeElement = function getParentNodeElement(nodeElement) {
var parentNodeElement = nodeElement.parentElement.parentElement;
return DomHandler.hasClass(parentNodeElement, 'p-treenode') ? parentNodeElement : null;
};
var focusNode = function focusNode(element) {
element && element.focus();
};
var onClick = function onClick(event) {
if (props.onClick) {
props.onClick({
originalEvent: event,
node: props.node
});
}
var targetNode = event.target.nodeName;
if (props.disabled || targetNode === 'INPUT' || targetNode === 'BUTTON' || targetNode === 'A' || DomHandler.hasClass(event.target, 'p-clickable')) {
return;
}
if (props.selectionMode && props.node.selectable !== false) {
var selectionKeys;
if (isCheckboxSelectionMode()) {
var checked = isChecked();
selectionKeys = props.selectionKeys ? _objectSpread$a({}, props.selectionKeys) : {};
if (checked) {
if (props.propagateSelectionDown) {
_propagateDown(props.node, false, selectionKeys);
} else {
delete selectionKeys[props.node.key];
}
if (props.propagateSelectionUp && props.onPropagateUp) {
props.onPropagateUp({
originalEvent: event,
check: false,
selectionKeys: selectionKeys
});
}
if (props.onUnselect) {
props.onUnselect({
originalEvent: event,
node: props.node
});
}
} else {
if (props.propagateSelectionDown) {
_propagateDown(props.node, true, selectionKeys);
} else {
selectionKeys[props.node.key] = {
checked: true
};
}
if (props.propagateSelectionUp && props.onPropagateUp) {
props.onPropagateUp({
originalEvent: event,
check: true,
selectionKeys: selectionKeys
});
}
if (props.onSelect) {
props.onSelect({
originalEvent: event,
node: props.node
});
}
}
} else {
var selected = isSelected();
var metaSelection = nodeTouched.current ? false : props.metaKeySelection;
if (metaSelection) {
var metaKey = event.metaKey || event.ctrlKey;
if (selected && metaKey) {
if (isSingleSelectionMode()) {
selectionKeys = null;
} else {
selectionKeys = _objectSpread$a({}, props.selectionKeys);
delete selectionKeys[props.node.key];
}
if (props.onUnselect) {
props.onUnselect({
originalEvent: event,
node: props.node
});
}
} else {
if (isSingleSelectionMode()) {
selectionKeys = props.node.key;
} else if (isMultipleSelectionMode()) {
selectionKeys = !metaKey ? {} : props.selectionKeys ? _objectSpread$a({}, props.selectionKeys) : {};
selectionKeys[props.node.key] = true;
}
if (props.onSelect) {
props.onSelect({
originalEvent: event,
node: props.node
});
}
}
} else if (isSingleSelectionMode()) {
if (selected) {
selectionKeys = null;
if (props.onUnselect) {
props.onUnselect({
originalEvent: event,
node: props.node
});
}
} else {
selectionKeys = props.node.key;
if (props.onSelect) {
props.onSelect({
originalEvent: event,
node: props.node
});
}
}
} else if (selected) {
selectionKeys = _objectSpread$a({}, props.selectionKeys);
delete selectionKeys[props.node.key];
if (props.onUnselect) {
props.onUnselect({
originalEvent: event,
node: props.node
});
}
} else {
selectionKeys = props.selectionKeys ? _objectSpread$a({}, props.selectionKeys) : {};
selectionKeys[props.node.key] = true;
if (props.onSelect) {
props.onSelect({
originalEvent: event,
node: props.node
});
}
}
}
if (props.onSelectionChange) {
props.onSelectionChange({
originalEvent: event,
value: selectionKeys
});
}
}
nodeTouched.current = false;
};
var onDoubleClick = function onDoubleClick(event) {
if (props.onDoubleClick) {
props.onDoubleClick({
originalEvent: event,
node: props.node
});
}
};
var onRightClick = function onRightClick(event) {
if (props.disabled) {
return;
}
DomHandler.clearSelection();
if (props.onContextMenuSelectionChange) {
props.onContextMenuSelectionChange({
originalEvent: event,
value: props.node.key
});
}
if (props.onContextMenu) {
props.onContextMenu({
originalEvent: event,
node: props.node
});
}
};
var onKeyDown = function onKeyDown(event) {
if (!isSameNode(event)) {
return;
}
switch (event.code) {
case 'Tab':
onTabKey();
break;
case 'ArrowDown':
onArrowDown(event);
break;
case 'ArrowUp':
onArrowUp(event);
break;
case 'ArrowRight':
onArrowRight(event);
break;
case 'ArrowLeft':
onArrowLeft(event);
break;
case 'Enter':
case 'NumpadEnter':
onEnterKey(event);
break;
case 'Space':
if (!['INPUT'].includes(event.target.nodeName)) {
onEnterKey(event);
}
break;
}
};
var onArrowDown = function onArrowDown(event) {
var nodeElement = event.target.getAttribute('data-pc-section') === 'toggler' ? event.target.closest('[role="treeitem"]') : event.target;
var listElement = nodeElement.children[1];
var nextElement = getNextElement(nodeElement);
if (listElement) {
focusRowChange(nodeElement, props.dragdropScope ? listElement.children[1] : listElement.children[0]);
} else if (nextElement) {
focusRowChange(nodeElement, nextElement);
} else {
var nextSiblingAncestor = _findNextSiblingOfAncestor(nodeElement);
if (nextSiblingAncestor) {
focusRowChange(nodeElement, nextSiblingAncestor);
}
}
event.preventDefault();
};
var getPreviousElement = function getPreviousElement(element) {
var prev = element.previousElementSibling;
if (prev) {
return !props.dragdropScope ? prev : prev.previousElementSibling;
}
return null;
};
var getNextElement = function getNextElement(element) {
var next = element.nextElementSibling;
if (next) {
return !props.dragdropScope ? next : next.nextElementSibling;
}
return null;
};
var onArrowUp = function onArrowUp(event) {
var nodeElement = event.target;
var previous = getPreviousElement(nodeElement);
if (previous) {
focusRowChange(nodeElement, previous, _findLastVisibleDescendant(previous));
} else {
var parentNodeElement = getParentNodeElement(nodeElement);
if (parentNodeElement) {
focusRowChange(nodeElement, parentNodeElement);
}
}
event.preventDefault();
};
var onArrowRight = function onArrowRight(event) {
if (isLeaf || expanded) {
return;
}
event.currentTarget.tabIndex = -1;
expand(event, true);
};
var onArrowLeft = function onArrowLeft(event) {
var togglerElement = DomHandler.findSingle(event.currentTarget, '[data-pc-section="toggler"]');
if (props.level === 0 && !expanded) {
return false;
}
if (expanded && !isLeaf) {
togglerElement.click();
return false;
}
var target = _findBeforeClickableNode(event.currentTarget);
if (target) {
focusRowChange(event.currentTarget, target);
}
};
var onEnterKey = function onEnterKey(event) {
setTabIndexForSelectionMode(event, nodeTouched.current);
onClick(event);
event.preventDefault();
};
var onTabKey = function onTabKey() {
setAllNodesTabIndexes();
};
var setAllNodesTabIndexes = function setAllNodesTabIndexes() {
var nodes = DomHandler.find(contentRef.current.closest('[data-pc-section="container"]'), '[role="treeitem"]');
var hasSelectedNode = _toConsumableArray(nodes).some(function (node) {
return node.getAttribute('aria-selected') === 'true' || node.getAttribute('aria-checked') === 'true';
});
_toConsumableArray(nodes).forEach(function (node) {
node.tabIndex = -1;
});
if (hasSelectedNode) {
var selectedNodes = _toConsumableArray(nodes).filter(function (node) {
return node.getAttribute('aria-selected') === 'true' || node.getAttribute('aria-checked') === 'true';
});
selectedNodes[0].tabIndex = 0;
return;
}
_toConsumableArray(nodes)[0].tabIndex = 0;
};
var setTabIndexForSelectionMode = function setTabIndexForSelectionMode(event, nodeTouched) {
if (props.selectionMode !== null) {
var elements = _toConsumableArray(DomHandler.find(elementRef.current.parentElement, '[role="treeitem"]'));
event.currentTarget.tabIndex = nodeTouched === false ? -1 : 0;
if (elements.every(function (element) {
return element.tabIndex === -1;
})) {
elements[0].tabIndex = 0;
}
}
};
var focusRowChange = function focusRowChange(firstFocusableRow, currentFocusedRow, lastVisibleDescendant) {
firstFocusableRow.tabIndex = '-1';
currentFocusedRow.tabIndex = '0';
focusNode(lastVisibleDescendant || currentFocusedRow);
};
var _findBeforeClickableNode = function findBeforeClickableNode(node) {
var parentListElement = node.closest('ul').closest('li');
if (parentListElement) {
var prevNodeButton = DomHandler.findSingle(parentListElement, 'button');
if (prevNodeButton && prevNodeButton.style.visibility !== 'hidden') {
return parentListElement;
}
return _findBeforeClickableNode(node.previousElementSibling);
}
return null;
};
var propagateUp = function propagateUp(event) {
var check = event.check;
var selectionKeys = event.selectionKeys;
var checkedChildCount = 0;
var _iterator = _createForOfIteratorHelper$6(props.node.children),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var child = _step.value;
if (selectionKeys[child.key] && selectionKeys[child.key].checked) {
checkedChildCount++;
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
var parentKey = props.node.key;
var children = ObjectUtils.findChildrenByKey(props.originalOptions, parentKey);
var isParentPartiallyChecked = children.some(function (ele) {
return ele.key in selectionKeys;
});
var isCompletelyChecked = children.every(function (ele) {
return ele.key in selectionKeys && selectionKeys[ele.key].checked;
});
if (isParentPartiallyChecked && !isCompletelyChecked) {
selectionKeys[parentKey] = {
checked: false,
partialChecked: true
};
} else if (isCompletelyChecked) {
selectionKeys[parentKey] = {
checked: true,
partialChecked: false
};
} else if (check) {
selectionKeys[parentKey] = {
checked: false,
partialChecked: false
};
} else {
delete selectionKeys[parentKey];
}
if (props.propagateSelectionUp && props.onPropagateUp) {
props.onPropagateUp(event);
}
};
var _propagateDown = function propagateDown(node, check, selectionKeys) {
if (check) {
selectionKeys[node.key] = {
checked: true,
partialChecked: false
};
} else {
delete selectionKeys[node.key];
}
if (node.children && node.children.length) {
for (var i = 0; i < node.children.length; i++) {
_propagateDown(node.children[i], check, selectionKeys);
}
}
};
var isSelected = function isSelected() {
if (props.selectionMode && props.selectionKeys) {
return isSingleSelectionMode() ? props.selectionKeys === props.node.key : props.selectionKeys[props.node.key] !== undefined;
}
return false;
};
var isChecked = function isChecked() {
return (props.selectionKeys ? props.selectionKeys[props.node.key] && props.selectionKeys[props.node.key].checked : false) || false;
};
var isSameNode = function isSameNode(event) {
return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('[role="treeitem"]')));
};
var isPartialChecked = function isPartialChecked() {
return props.selectionKeys ? props.selectionKeys[props.node.key] && props.selectionKeys[props.node.key].partialChecked : false;
};
var isSingleSelectionMode = function isSingleSelectionMode() {
return props.selectionMode && props.selectionMode === 'single';
};
var isMultipleSelectionMode = function isMultipleSelectionMode() {
return props.selectionMode && props.selectionMode === 'multiple';
};
var isCheckboxSelectionMode = function isCheckboxSelectionMode() {
return props.selectionMode && props.selectionMode === 'checkbox';
};
var onTouchEnd = function onTouchEnd() {
nodeTouched.current = true;
};
var onDropPoint = function onDropPoint(event, position) {
event.preventDefault();
DomHandler.removeClass(event.target, 'p-treenode-droppoint-active');
if (props.onDropPoint) {
var dropIndex = position === -1 ? props.index : props.index + 1;
props.onDropPoint({
originalEvent: event,
path: props.path,
index: dropIndex,
position: position
});
}
};
var onDropPointDragOver = function onDropPointDragOver(event) {
if (props.dragdropScope && event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase()) {
event.dataTransfer.dropEffect = 'move';
event.preventDefault();
}
};
var onDropPointDragEnter = function onDropPointDragEnter(event) {
if (props.dragdropScope && event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase()) {
DomHandler.addClass(event.target, 'p-treenode-droppoint-active');
}
};
var onDropPointDragLeave = function onDropPointDragLeave(event) {
if (props.dragdropScope && event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase()) {
DomHandler.removeClass(event.target, 'p-treenode-droppoint-active');
}
};
var onDrop = function onDrop(event) {
if (props.dragdropScope && props.node.droppable !== false) {
DomHandler.removeClass(contentRef.current, 'p-treenode-dragover');
event.preventDefault();
event.stopPropagation();
if (props.onDrop) {
props.onDrop({
originalEvent: event,
path: props.path,
index: props.index
});
}
}
};
var onDragOver = function onDragOver(event) {
if (props.dragdropScope && event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase() && props.node.droppable !== false) {
event.dataTransfer.dropEffect = 'move';
event.preventDefault();
event.stopPropagation();
}
};
var onDragEnter = function onDragEnter(event) {
if (props.dragdropScope && event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase() && props.node.droppable !== false) {
DomHandler.addClass(contentRef.current, 'p-treenode-dragover');
}
};
var onDragLeave = function onDragLeave(event) {
if (props.dragdropScope && event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase() && props.node.droppable !== false) {
var rect = event.currentTarget.getBoundingClientRect();
if (event.nativeEvent.x > rect.left + rect.width || event.nativeEvent.x < rect.left || event.nativeEvent.y >= Math.floor(rect.top + rect.height) || event.nativeEvent.y < rect.top) {
DomHandler.removeClass(contentRef.current, 'p-treenode-dragover');
}
}
};
var onDragStart = function onDragStart(event) {
event.dataTransfer.setData('text', props.dragdropScope);
event.dataTransfer.setData(props.dragdropScope, props.dragdropScope);
if (props.onDragStart) {
props.onDragStart({
originalEvent: event,
path: props.path,
index: props.index
});
}
};
var onDragEnd = function onDragEnd(event) {
if (props.onDragEnd) {
props.onDragEnd({
originalEvent: event
});
}
};
var createLabel = function createLabel() {
var labelProps = mergeProps({
className: cx('label')
}, getPTOptions('label'));
var content = /*#__PURE__*/React.createElement("span", labelProps, label);
if (props.nodeTemplate) {
var defaultContentOptions = {
onTogglerClick: onTogglerClick,
className: 'p-treenode-label',
element: content,
props: props,
expanded: expanded
};
content = ObjectUtils.getJSXElement(props.nodeTemplate, props.node, defaultContentOptions);
}
return content;
};
var createCheckbox = function createCheckbox() {
if (isCheckboxSelectionMode() && props.node.selectable !== false) {
var _props$isUnstyled;
var checked = isChecked();
var partialChecked = isPartialChecked();
var checkboxIconProps = mergeProps({
className: cx('checkIcon')
});
var icon = checked ? props.checkboxIcon || /*#__PURE__*/React.createElement(CheckIcon, checkboxIconProps) : partialChecked ? props.checkboxIcon || /*#__PURE__*/React.createElement(MinusIcon, checkboxIconProps) : null;
var checkboxIcon = IconUtils.getJSXIcon(icon, _objectSpread$a({}, checkboxIconProps), props);
var checkboxProps = mergeProps({
className: cx('nodeCheckbox', {
partialChecked: partialChecked
}),
checked: checked || partialChecked,
icon: checkboxIcon,
tabIndex: -1,
unstyled: props === null || props === void 0 || (_props$isUnstyled = props.isUnstyled) === null || _props$isUnstyled === void 0 ? void 0 : _props$isUnstyled.call(props),
'data-p-checked': checked,
'data-p-partialchecked': partialChecked,
onChange: onClick
}, getPTOptions('nodeCheckbox'));
return /*#__PURE__*/React.createElement(Checkbox, checkboxProps);
}
return null;
};
var createIcon = function createIcon() {
var icon = props.node.icon || (expanded ? props.node.expandedIcon : props.node.collapsedIcon);
if (icon) {
var nodeIconProps = mergeProps({
className: classNames(icon, cx('nodeIcon'))
}, getPTOptions('nodeIcon'));
return IconUtils.getJSXIcon(icon, _objectSpread$a({}, nodeIconProps), {
props: props
});
}
return null;
};
var createToggler = function createToggler() {
var togglerIconProps = mergeProps({
className: cx('togglerIcon'),
'aria-hidden': true
}, getPTOptions('togglerIcon'));
var icon = expanded ? props.collapseIcon || /*#__PURE__*/React.createElement(ChevronDownIcon, togglerIconProps) : props.expandIcon || /*#__PURE__*/React.createElement(ChevronRightIcon, togglerIconProps);
var togglerIcon = IconUtils.getJSXIcon(icon, _objectSpread$a({}, togglerIconProps), {
props: props,
expanded: expanded
});
var togglerProps = mergeProps({
type: 'button',
className: cx('toggler'),
tabIndex: -1,
'aria-hidden': false,
onClick: onTogglerClick
}, getPTOptions('toggler'));
var content = /*#__PURE__*/React.createElement("button", togglerProps, togglerIcon, /*#__PURE__*/React.createElement(Ripple, null));
if (props.togglerTemplate) {
var defaultContentOptions = {
onClick: onTogglerClick,
containerClassName: 'p-tree-toggler p-link',
iconClassName: 'p-tree-toggler-icon',
element: content,
props: props,
expanded: expanded
};
content = ObjectUtils.getJSXElement(props.togglerTemplate, props.node, defaultContentOptions);
}
return content;
};
var createDropPoint = function createDropPoint(position) {
if (props.dragdropScope) {
var droppointProps = mergeProps({
className: cx('droppoint'),
role: 'treeitem',
onDrop: function onDrop(event) {
return onDropPoint(event, position);
},
onDragOver: onDropPointDragOver,
onDragEnter: onDropPointDragEnter,
onDragLeave: onDropPointDragLeave
}, getPTOptions('droppoint'));
return /*#__PURE__*/React.createElement("li", droppointProps);
}
return null;
};
var createContent = function createContent() {
var selected = isSelected();
var checked = isChecked();
var toggler = createToggler();
var checkbox = createCheckbox();
var icon = createIcon();
var label = createLabel();
var contentProps = mergeProps({
ref: contentRef,
className: classNames(props.node.className, cx('content', {
checked: checked,
selected: selected,
nodeProps: props,
isCheckboxSelectionMode: isCheckboxSelectionMode
})),
style: props.node.style,
onClick: onClick,
onDoubleClick: onDoubleClick,
onContextMenu: onRightClick,
onTouchEnd: onTouchEnd,
draggable: props.dragdropScope && props.node.draggable !== false && !props.disabled,
onDrop: onDrop,
onDragOver: onDragOver,
onDragEnter: onDragEnter,
onDragLeave: onDragLeave,
onDragStart: onDragStart,
onDragEnd: onDragEnd,
'data-p-highlight': isCheckboxSelectionMode() ? checked : selected
}, getPTOptions('content'));
return /*#__PURE__*/React.createElement("div", contentProps, toggler, checkbox, icon, label);
};
var createChildren = function createChildren() {
var subgroupProps = mergeProps({
className: cx('subgroup'),
role: 'group'
}, getPTOptions('subgroup'));
if (ObjectUtils.isNotEmpty(props.node.children) && expanded) {
return /*#__PURE__*/React.createElement("ul", subgroupProps, props.node.children.map(function (childNode, index) {
return /*#__PURE__*/React.createElement(UITreeNode, {
key: childNode.key || childNode.label,
node: childNode,
checkboxIcon: props.checkboxIcon,
collapseIcon: props.collapseIcon,
contextMenuSelectionKey: props.contextMenuSelectionKey,
cx: cx,
disabled: props.disabled,
dragdropScope: props.dragdropScope,
expandIcon: props.expandIcon,
expandedKeys: props.expandedKeys,
isFiltering: props.isFiltering,
index: index,
isNodeLeaf: props.isNodeLeaf,
last: index === props.node.children.length - 1,
metaKeySelection: props.metaKeySelection,
nodeTemplate: props.nodeTemplate,
onClick: props.onClick,
onCollapse: props.onCollapse,
onContextMenu: props.onContextMenu,
onContextMenuSelectionChange: props.onContextMenuSelectionChange,
onDoubleClick: props.onDoubleClick,
onDragEnd: props.onDragEnd,
onDragStart: props.onDragStart,
onDrop: props.onDrop,
onDropPoint: props.onDropPoint,
onExpand: props.onExpand,
onPropagateUp: propagateUp,
onSelect: props.onSelect,
onSelectionChange: props.onSelectionChange,
onToggle: props.onToggle,
onUnselect: props.onUnselect,
originalOptions: props.originalOptions,
parent: props.node,
path: props.path + '-' + index,
propagateSelectionDown: props.propagateSelectionDown,
propagateSelectionUp: props.propagateSelectionUp,
ptm: ptm,
selectionKeys: props.selectionKeys,
selectionMode: props.selectionMode,
togglerTemplate: props.togglerTemplate
});
}));
}
return null;
};
var createNode = function createNode() {
var tabIndex = props.disabled || props.index !== 0 ? -1 : 0;
var selected = isSelected();
var checked = isChecked();
var content = createContent();
var children = createChildren();
var nodeProps = mergeProps({
ref: elementRef,
className: classNames(props.node.className, cx('node', {
leaf: isLeaf
})),
style: props.node.style,
tabIndex: tabIndex,
role: 'treeitem',
'aria-label': label,
'aria-level': props.level,
'aria-expanded': expanded,
'aria-checked': checked,
'aria-setsize': props.node.children ? props.node.children.length : 0,
'aria-posinset': props.index + 1,
onKeyDown: onKeyDown,
'aria-selected': checked || selected
}, getPTOptions('node'));
return /*#__PURE__*/React.createElement("li", nodeProps, content, children);
};
var node = createNode();
if (props.dragdropScope && !props.disabled && (!props.parent || props.parent.droppable !== false)) {
var beforeDropPoint = createDropPoint(-1);
var afterDropPoint = props.last ? createDropPoint(1) : null;
return /*#__PURE__*/React.createElement(React.Fragment, null, beforeDropPoint, node, afterDropPoint);
}
return node;
});
UITreeNode.displayName = 'UITreeNode';
function _createForOfIteratorHelper$5(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$5(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray$5(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$5(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$5(r, a) : void 0; } }
function _arrayLikeToArray$5(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 ownKeys$9(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$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Tree = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = TreeBase.getProps(inProps, context);
var _useDebounce = useDebounce('', props.filterDelay || 0),
_useDebounce2 = _slicedToArray(_useDebounce, 3),
filterValue = _useDebounce2[0],
filterValueState = _useDebounce2[1],
setFilterValueState = _useDebounce2[2];
var _React$useState = React.useState(props.expandedKeys),
_React$useState2 = _slicedToArray(_React$useState, 2),
expandedKeysState = _React$useState2[0],
setExpandedKeysState = _React$useState2[1];
var elementRef = React.useRef(null);
var filteredNodes = React.useRef([]);
var dragState = React.useRef(null);
var filterChanged = React.useRef(false);
var filteredValue = props.onFilterValueChange ? props.filterValue : filterValueState;
var isFiltering = props.filter && filteredValue;
var expandedKeys = props.onToggle ? props.expandedKeys : expandedKeysState;
var currentFilterExpandedKeys = React.useRef({});
var childFocusEvent = React.useRef(null);
var _TreeBase$setMetaData = TreeBase.setMetaData({
props: props,
state: {
filterValue: filteredValue,
expandedKeys: expandedKeys
}
}),
ptm = _TreeBase$setMetaData.ptm,
cx = _TreeBase$setMetaData.cx,
isUnstyled = _TreeBase$setMetaData.isUnstyled;
useHandleStyle(TreeBase.css.styles, isUnstyled, {
name: 'tree'
});
var filterOptions = {
filter: function filter(e) {
return onFilterInputChange(e);
},
reset: function reset() {
return resetFilter();
}
};
var getRootNode = function getRootNode() {
return props.filter && filteredNodes.current ? filteredNodes.current : props.value;
};
var onToggle = function onToggle(event) {
var originalEvent = event.originalEvent,
value = event.value,
navigateFocusToChild = event.navigateFocusToChild;
if (originalEvent == null && isFiltering) {
if (props.onToggle) {
props.onToggle({
originalEvent: originalEvent,
value: _objectSpread$9(_objectSpread$9({}, props.expandedKeys), value)
});
} else {
setExpandedKeysState(_objectSpread$9(_objectSpread$9({}, expandedKeysState), value));
}
} else if (props.onToggle) {
props.onToggle({
originalEvent: originalEvent,
value: value
});
} else {
if (navigateFocusToChild) {
childFocusEvent.current = originalEvent;
}
setExpandedKeysState(value);
}
};
useUpdateEffect(function () {
if (childFocusEvent.current) {
var event = childFocusEvent.current;
var nodeElement = event.target.getAttribute('data-pc-section') === 'toggler' ? event.target.closest('[role="treeitem"]') : event.target;
var listElement = nodeElement.children[1];
if (listElement) {
if (nodeElement) {
nodeElement.tabIndex = '-1';
}
//skip droppoint
var childElement = props.dragdropScope ? listElement.children[1] : listElement.children[0];
if (childElement) {
childElement.tabIndex = '0';
childElement.focus();
}
}
childFocusEvent.current = null;
}
}, [expandedKeys]);
React.useEffect(function () {
if (props.filter) _filter();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [filteredValue, props.value, props.filter]);
var onDragStart = function onDragStart(event) {
dragState.current = {
path: event.path,
index: event.index
};
};
var onDragEnd = function onDragEnd() {
dragState.current = null;
};
/**
* Deep copy a value. If the value has a data property, it will be shallow copied.
* Values that are not plain objects or arrays are returned as-is.
*/
var _cloneValue = function cloneValue(value) {
if (Array.isArray(value)) {
return value.map(_cloneValue);
} else if (!!value && Object.getPrototypeOf(value) === Object.prototype) {
var result = {};
// Leave data property alone and clone children
for (var key in value) {
if (key !== 'data') {
result[key] = _cloneValue(value[key]);
} else {
result[key] = value[key];
}
}
return result;
}
return value;
};
var onDrop = function onDrop(event) {
var _dragState$current;
if (validateDropNode((_dragState$current = dragState.current) === null || _dragState$current === void 0 ? void 0 : _dragState$current.path, event.path)) {
var value = _cloneValue(getRootNode());
var dragPaths = dragState.current.path.split('-');
dragPaths.pop();
var dragNodeParent = _findNode(value, dragPaths);
var dragNode = dragNodeParent ? dragNodeParent.children[dragState.current.index] : value[dragState.current.index];
var dropNode = _findNode(value, event.path.split('-'));
if (dropNode.children) {
dropNode.children.push(dragNode);
} else {
dropNode.children = [dragNode];
}
if (dragNodeParent) {
dragNodeParent.children.splice(dragState.current.index, 1);
} else {
value.splice(dragState.current.index, 1);
}
if (props.onDragDrop) {
props.onDragDrop({
originalEvent: event.originalEvent,
value: value,
dragNode: dragNode,
dropNode: dropNode,
dropIndex: event.index
});
}
}
};
var onDropPoint = function onDropPoint(event) {
if (validateDropPoint(event)) {
var value = _cloneValue(getRootNode());
var dragPaths = dragState.current.path.split('-');
dragPaths.pop();
var dropPaths = event.path.split('-');
dropPaths.pop();
var dragNodeParent = _findNode(value, dragPaths);
var dropNodeParent = _findNode(value, dropPaths);
var dragNode = dragNodeParent ? dragNodeParent.children[dragState.current.index] : value[dragState.current.index];
var siblings = areSiblings(dragState.current.path, event.path);
if (dragNodeParent) {
dragNodeParent.children.splice(dragState.current.index, 1);
} else {
value.splice(dragState.current.index, 1);
}
if (event.position < 0) {
var dropIndex = siblings ? dragState.current.index > event.index ? event.index : event.index - 1 : event.index;
if (dropNodeParent) {
dropNodeParent.children.splice(dropIndex, 0, dragNode);
} else {
value.splice(dropIndex, 0, dragNode);
}
} else if (dropNodeParent) {
dropNodeParent.children.push(dragNode);
} else {
value.push(dragNode);
}
if (props.onDragDrop) {
props.onDragDrop({
originalEvent: event.originalEvent,
value: value,
dragNode: dragNode,
dropNode: dropNodeParent,
dropIndex: event.index
});
}
}
};
var validateDrop = function validateDrop(dragPath, dropPath) {
if (!dragPath) {
return false;
}
//same node
if (dragPath === dropPath) {
return false;
}
//parent dropped on an descendant
if (dropPath.indexOf(dragPath) === 0) {
return false;
}
return true;
};
var validateDropNode = function validateDropNode(dragPath, dropPath) {
var _validateDrop = validateDrop(dragPath, dropPath);
if (_validateDrop) {
//child dropped on parent
if (dragPath.indexOf('-') > 0 && dragPath.substring(0, dragPath.lastIndexOf('-')) === dropPath) {
return false;
}
return true;
}
return false;
};
var validateDropPoint = function validateDropPoint(event) {
var _dragState$current2;
var _validateDrop = validateDrop((_dragState$current2 = dragState.current) === null || _dragState$current2 === void 0 ? void 0 : _dragState$current2.path, event.path);
if (_validateDrop) {
//child dropped to next sibling's drop point
if (event.position === -1 && areSiblings(dragState.current.path, event.path) && dragState.current.index + 1 === event.index) {
return false;
}
return true;
}
return false;
};
var areSiblings = function areSiblings(path1, path2) {
if (path1.length === 1 && path2.length === 1) {
return true;
}
return path1.substring(0, path1.lastIndexOf('-')) === path2.substring(0, path2.lastIndexOf('-'));
};
var _findNode = function findNode(value, path) {
if (path.length === 0) {
return null;
}
var index = parseInt(path[0], 10);
var nextSearchRoot = value.children ? value.children[index] : value[index];
if (path.length === 1) {
return nextSearchRoot;
}
path.shift();
return _findNode(nextSearchRoot, path);
};
var isNodeLeaf = function isNodeLeaf(node) {
return node.leaf === false ? false : !(node.children && node.children.length);
};
var onFilterInputKeyDown = function onFilterInputKeyDown(event) {
//enter
if (event.which === 13) {
event.preventDefault();
}
};
var onFilterInputChange = function onFilterInputChange(event) {
filterChanged.current = true;
var value = event.target.value;
if (props.onFilterValueChange) {
props.onFilterValueChange({
originalEvent: event,
value: value
});
} else {
setFilterValueState(value);
}
};
var filter = function filter(value) {
setFilterValueState(ObjectUtils.isNotEmpty(value) ? value : '');
};
var _filter = function _filter() {
if (!filterChanged.current) return;
if (ObjectUtils.isEmpty(filteredValue)) {
filteredNodes.current = props.value;
} else {
filteredNodes.current = [];
var searchFields = props.filterBy.split(',');
var filterText = filteredValue.toLocaleLowerCase(props.filterLocale);
var isStrictMode = props.filterMode === 'strict';
var _iterator = _createForOfIteratorHelper$5(props.value),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var node = _step.value;
var copyNode = _objectSpread$9({}, node);
var paramsWithoutNode = {
searchFields: searchFields,
filterText: filterText,
isStrictMode: isStrictMode
};
if (isStrictMode && (findFilteredNodes(copyNode, paramsWithoutNode) || isFilterMatched(copyNode, paramsWithoutNode)) || !isStrictMode && (isFilterMatched(copyNode, paramsWithoutNode) || findFilteredNodes(copyNode, paramsWithoutNode))) {
filteredNodes.current.push(copyNode);
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
}
onToggle({
originalEvent: null,
value: currentFilterExpandedKeys.current,
navigateFocusToChild: false
});
currentFilterExpandedKeys.current = {};
filterChanged.current = false;
};
var findFilteredNodes = function findFilteredNodes(node, paramsWithoutNode) {
if (node) {
var matched = false;
if (node.children) {
var childNodes = _toConsumableArray(node.children);
node.children = [];
var _iterator2 = _createForOfIteratorHelper$5(childNodes),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var childNode = _step2.value;
var copyChildNode = _objectSpread$9({}, childNode);
if (isFilterMatched(copyChildNode, paramsWithoutNode)) {
matched = true;
node.children.push(copyChildNode);
}
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
}
if (matched) {
currentFilterExpandedKeys.current[node.key] = true;
return true;
}
}
};
var isFilterMatched = function isFilterMatched(node, _ref) {
var searchFields = _ref.searchFields,
filterText = _ref.filterText,
isStrictMode = _ref.isStrictMode;
var matched = false;
var _iterator3 = _createForOfIteratorHelper$5(searchFields),
_step3;
try {
for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
var field = _step3.value;
var fieldValue = String(ObjectUtils.resolveFieldData(node, field)).toLocaleLowerCase(props.filterLocale);
if (fieldValue.indexOf(filterText) > -1) {
matched = true;
}
}
} catch (err) {
_iterator3.e(err);
} finally {
_iterator3.f();
}
if (!matched || isStrictMode && !isNodeLeaf(node)) {
matched = findFilteredNodes(node, {
searchFields: searchFields,
filterText: filterText,
isStrictMode: isStrictMode
}) || matched;
}
return matched;
};
var resetFilter = function resetFilter() {
setFilterValueState('');
};
React.useImperativeHandle(ref, function () {
return {
props: props,
filter: filter,
getElement: function getElement() {
return elementRef.current;
}
};
});
var createRootChild = function createRootChild(node, index, last) {
return /*#__PURE__*/React.createElement(UITreeNode, {
hostName: "Tree",
key: node.key || node.label,
node: node,
level: props.level + 1,
originalOptions: props.value,
index: index,
last: last,
path: String(index),
checkboxIcon: props.checkboxIcon,
collapseIcon: props.collapseIcon,
contextMenuSelectionKey: props.contextMenuSelectionKey,
cx: cx,
disabled: props.disabled,
dragdropScope: props.dragdropScope,
expandIcon: props.expandIcon,
expandedKeys: expandedKeys,
isFiltering: isFiltering,
isNodeLeaf: isNodeLeaf,
metaKeySelection: props.metaKeySelection,
nodeTemplate: props.nodeTemplate,
onClick: props.onNodeClick,
onCollapse: props.onCollapse,
onContextMenu: props.onContextMenu,
onContextMenuSelectionChange: props.onContextMenuSelectionChange,
onDoubleClick: props.onNodeDoubleClick,
onDragEnd: onDragEnd,
onDragStart: onDragStart,
onDrop: onDrop,
onDropPoint: onDropPoint,
onExpand: props.onExpand,
onSelect: props.onSelect,
onSelectionChange: props.onSelectionChange,
onToggle: onToggle,
onUnselect: props.onUnselect,
propagateSelectionDown: props.propagateSelectionDown,
propagateSelectionUp: props.propagateSelectionUp,
ptm: ptm,
selectionKeys: props.selectionKeys,
selectionMode: props.selectionMode,
togglerTemplate: props.togglerTemplate,
isUnstyled: isUnstyled
});
};
var createEmptyMessageNode = function createEmptyMessageNode() {
var emptyMessageProps = mergeProps({
className: classNames(props.contentClassName, cx('emptyMessage')),
role: 'treeitem'
}, ptm('emptyMessage'));
var message = ObjectUtils.getJSXElement(props.emptyMessage, props) || localeOption('emptyMessage');
return /*#__PURE__*/React.createElement("li", emptyMessageProps, /*#__PURE__*/React.createElement("span", {
className: "p-treenode-content"
}, message));
};
var createRootChildrenContainer = function createRootChildrenContainer(children) {
var containerProps = mergeProps(_objectSpread$9({
className: classNames(props.contentClassName, cx('container')),
role: 'tree',
'aria-label': props.ariaLabel,
'aria-labelledby': props.ariaLabelledBy,
style: props.contentStyle
}, ariaProps), ptm('container'));
return /*#__PURE__*/React.createElement("ul", containerProps, children);
};
var createRootChildren = function createRootChildren(value) {
return value.map(function (node, index) {
return createRootChild(node, index, index === value.length - 1);
});
};
var createModel = function createModel() {
if (props.value) {
if (props.filter) filterChanged.current = true;
var value = getRootNode();
if (value.length > 0) {
var rootNodes = createRootChildren(value);
return createRootChildrenContainer(rootNodes);
}
var emptyMessageNode = createEmptyMessageNode();
return createRootChildrenContainer(emptyMessageNode);
}
return null;
};
var createLoader = function createLoader() {
if (props.loading) {
var loadingIconProps = mergeProps({
className: cx('loadingIcon')
}, ptm('loadingIcon'));
var icon = props.loadingIcon || /*#__PURE__*/React.createElement(SpinnerIcon, _extends({}, loadingIconProps, {
spin: true
}));
var loadingIcon = IconUtils.getJSXIcon(icon, _objectSpread$9({}, loadingIconProps), {
props: props
});
var loadingOverlayProps = mergeProps({
className: cx('loadingOverlay')
}, ptm('loadingOverlay'));
return /*#__PURE__*/React.createElement("div", loadingOverlayProps, loadingIcon);
}
return null;
};
var createFilter = function createFilter() {
if (props.filter) {
var value = props.onFilterValueChange ? props.filterValue : filterValue;
value = ObjectUtils.isNotEmpty(value) ? value : '';
var searchIconProps = mergeProps({
className: cx('searchIcon')
}, ptm('searchIcon'));
var icon = props.filterIcon || /*#__PURE__*/React.createElement(SearchIcon, searchIconProps);
var filterIcon = IconUtils.getJSXIcon(icon, _objectSpread$9({}, searchIconProps), {
props: props
});
var filterContainerProps = mergeProps({
className: cx('filterContainer')
}, ptm('filterContainer'));
var inputProps = mergeProps({
type: 'text',
value: value,
autoComplete: 'off',
className: cx('input'),
placeholder: props.filterPlaceholder,
'aria-label': props.filterPlaceholder,
onKeyDown: onFilterInputKeyDown,
onChange: onFilterInputChange,
disabled: props.disabled
}, ptm('input'));
var _content = /*#__PURE__*/React.createElement("div", filterContainerProps, /*#__PURE__*/React.createElement("input", inputProps), filterIcon);
if (props.filterTemplate) {
var defaultContentOptions = {
className: 'p-tree-filter-container',
element: _content,
filterOptions: filterOptions,
filterInputKeyDown: onFilterInputKeyDown,
filterInputChange: onFilterInputChange,
filterIconClassName: 'p-dropdown-filter-icon',
props: props
};
_content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
}
return /*#__PURE__*/React.createElement(React.Fragment, null, _content);
}
return null;
};
var createHeader = function createHeader() {
if (props.showHeader) {
var filterElement = createFilter();
var _content2 = filterElement;
if (props.header) {
var defaultContentOptions = {
filterContainerClassName: 'p-tree-filter-container',
filterIconClassName: 'p-tree-filter-icon',
filterInput: {
className: 'p-tree-filter p-inputtext p-component',
onKeyDown: onFilterInputKeyDown,
onChange: onFilterInputChange
},
filterElement: filterElement,
element: _content2,
props: props
};
_content2 = ObjectUtils.getJSXElement(props.header, defaultContentOptions);
}
var headerProps = mergeProps({
className: cx('header')
}, ptm('header'));
return /*#__PURE__*/React.createElement("div", headerProps, _content2);
}
return null;
};
var createFooter = function createFooter() {
var content = ObjectUtils.getJSXElement(props.footer, props);
var footerProps = mergeProps({
className: cx('footer')
}, ptm('footer'));
return /*#__PURE__*/React.createElement("div", footerProps, content);
};
var otherProps = TreeBase.getOtherProps(props);
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var loader = createLoader();
var content = createModel();
var header = createHeader();
var footer = createFooter();
var rootProps = mergeProps({
ref: elementRef,
className: classNames(props.className, cx('root')),
style: props.style,
id: props.id
}, TreeBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("div", rootProps, loader, header, content, footer);
}));
Tree.displayName = 'Tree';
var classes$2 = {
root: function root(_ref) {
var props = _ref.props,
focusedState = _ref.focusedState,
context = _ref.context,
overlayVisibleState = _ref.overlayVisibleState,
isValueEmpty = _ref.isValueEmpty;
return classNames('p-treeselect p-component p-inputwrapper', {
'p-treeselect-chip': props.display === 'chip',
'p-treeselect-clearable': props.showClear && !props.disabled,
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'p-focus': focusedState,
'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled',
'p-inputwrapper-filled': !isValueEmpty,
'p-inputwrapper-focus': focusedState || overlayVisibleState
});
},
label: function label(_ref2) {
var props = _ref2.props,
isValueEmpty = _ref2.isValueEmpty,
getLabel = _ref2.getLabel;
return classNames('p-treeselect-label', {
'p-placeholder': getLabel() === props.placeholder,
'p-treeselect-label-empty': !props.placeholder && isValueEmpty
});
},
panel: function panel(_ref3) {
var props = _ref3.panelProps,
context = _ref3.context;
return classNames('p-treeselect-panel p-component', props.panelClassName, {
'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
});
},
labelContainer: 'p-treeselect-label-container',
tokenLabel: 'p-treeselect-token-label',
token: 'p-treeselect-token',
trigger: 'p-treeselect-trigger',
triggerIcon: 'p-treeselect-trigger-icon p-clickable',
emptyMessage: 'p-treeselect-empty-message',
filterContainer: 'p-treeselect-filter-container',
filter: 'p-treeselect-filter p-inputtext p-component',
filterIcon: 'p-treeselect-filter-icon',
closeIcon: 'p-treeselect-close-icon',
clearIcon: 'p-treeselect-clear-icon p-clickable',
closeButton: 'p-treeselect-close p-link',
header: 'p-treeselect-header',
wrapper: 'p-treeselect-items-wrapper',
transition: 'p-connected-overlay'
};
var styles$1 = "\n@layer primereact {\n .p-treeselect {\n display: inline-flex;\n cursor: pointer;\n position: relative;\n user-select: none;\n }\n\n .p-treeselect-trigger {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n .p-treeselect-label-container {\n overflow: hidden;\n flex: 1 1 auto;\n cursor: pointer;\n }\n\n .p-treeselect-label {\n display: block;\n white-space: nowrap;\n cursor: pointer;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .p-treeselect-label-empty {\n overflow: hidden;\n visibility: hidden;\n }\n\n .p-treeselect-token {\n cursor: default;\n display: inline-flex;\n align-items: center;\n flex: 0 0 auto;\n }\n\n .p-treeselect .p-treeselect-panel {\n min-width: 100%;\n }\n\n .p-treeselect-items-wrapper {\n overflow: auto;\n }\n\n .p-treeselect-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .p-treeselect-filter-container {\n position: relative;\n flex: 1 1 auto;\n }\n\n .p-treeselect-filter-icon {\n position: absolute;\n top: 50%;\n margin-top: -.5rem;\n }\n\n .p-treeselect-filter-container .p-inputtext {\n width: 100%;\n }\n\n .p-treeselect-close {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n overflow: hidden;\n position: relative;\n margin-left: auto;\n }\n\n .p-treeselect-clear-icon {\n position: absolute;\n top: 50%;\n margin-top: -.5rem;\n }\n\n .p-fluid .p-treeselect {\n display: flex;\n}\n}\n";
var TreeSelectBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'TreeSelect',
appendTo: null,
ariaLabel: null,
ariaLabelledBy: null,
className: null,
closeIcon: null,
clearIcon: null,
disabled: false,
display: 'comma',
dropdownIcon: null,
emptyMessage: null,
expandedKeys: null,
filter: false,
filterBy: 'label',
filterDelay: 300,
filterIcon: null,
filterInputAutoFocus: true,
filterLocale: undefined,
filterMode: 'lenient',
filterPlaceholder: null,
filterTemplate: null,
filterValue: null,
inputId: null,
inputRef: null,
invalid: false,
variant: null,
metaKeySelection: false,
name: null,
nodeTemplate: null,
onChange: null,
onFocus: null,
onBlur: null,
onFilterValueChange: null,
onHide: null,
onNodeClick: null,
onNodeCollapse: null,
onNodeDoubleClick: null,
onNodeExpand: null,
onNodeSelect: null,
onNodeUnselect: null,
onShow: null,
options: null,
panelClassName: null,
panelFooterTemplate: null,
panelHeaderTemplate: null,
panelStyle: null,
placeholder: null,
resetFilterOnHide: false,
scrollHeight: '400px',
selectionMode: 'single',
showClear: false,
style: null,
tabIndex: null,
togglerTemplate: null,
transitionOptions: null,
value: null,
valueTemplate: null,
children: undefined
},
css: {
classes: classes$2,
styles: styles$1
}
});
function ownKeys$8(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$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var TreeSelectPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var ptm = props.ptm,
cx = props.cx;
var getPTOptions = function getPTOptions(key, options) {
return ptm(key, _objectSpread$8({
hostName: props.hostName
}, options));
};
var onKeyDown = function onKeyDown(event) {
if (event.key === 'Escape') {
event.preventDefault();
props.hide();
}
};
var createElement = function createElement() {
var wrapperStyle = {
maxHeight: props.scrollHeight || 'auto'
};
var panelProps = mergeProps({
className: cx('panel', {
panelProps: props,
context: context
}),
style: props.panelStyle,
onKeyDown: onKeyDown,
onClick: props.onClick
}, getPTOptions('panel'));
var wrapperProps = mergeProps({
className: cx('wrapper'),
style: wrapperStyle
}, getPTOptions('wrapper'));
var transitionProps = mergeProps({
classNames: cx('transition'),
"in": props["in"],
timeout: {
enter: 120,
exit: 100
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: props.onEnter,
onEntered: props.onEntered,
onExit: props.onExit,
onExited: props.onExited
}, getPTOptions('transition'));
return /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: ref
}, transitionProps), /*#__PURE__*/React.createElement("div", _extends({
ref: ref
}, panelProps), props.firstHiddenFocusableElementOnOverlay, props.header, /*#__PURE__*/React.createElement("div", wrapperProps, props.children), props.footer, props.lastHiddenFocusableElementOnOverlay));
};
var element = createElement();
return /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo
});
});
TreeSelectPanel.displayName = 'TreeSelectPanel';
function ownKeys$7(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$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _createForOfIteratorHelper$4(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$4(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray$4(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$4(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$4(r, a) : void 0; } }
function _arrayLikeToArray$4(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; }
var TreeSelect = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = TreeSelectBase.getProps(inProps, context);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
overlayVisibleState = _React$useState4[0],
setOverlayVisibleState = _React$useState4[1];
var _React$useState5 = React.useState(props.expandedKeys),
_React$useState6 = _slicedToArray(_React$useState5, 2),
expandedKeysState = _React$useState6[0],
setExpandedKeysState = _React$useState6[1];
var _useDebounce = useDebounce('', props.filterDelay || 0),
_useDebounce2 = _slicedToArray(_useDebounce, 3),
filterValue = _useDebounce2[0],
filterValueState = _useDebounce2[1],
setFilterValueState = _useDebounce2[2];
var elementRef = React.useRef(null);
var overlayRef = React.useRef(null);
var filterInputRef = React.useRef(null);
var focusInputRef = React.useRef(props.inputRef);
var triggerRef = React.useRef(null);
var selfChange = React.useRef(null);
var treeRef = React.useRef(null);
var firstHiddenFocusableElementOnOverlay = React.useRef(null);
var lastHiddenFocusableElementOnOverlay = React.useRef(null);
var focusToTree = React.useRef(false);
var listId = React.useRef('');
var expandedKeys = props.onToggle ? props.expandedKeys : expandedKeysState;
var filteredValue = props.onFilterValueChange ? props.filterValue : filterValueState;
var isValueEmpty = ObjectUtils.isEmpty(props.value);
var isSingleSelectionMode = props.selectionMode === 'single';
var isCheckboxSelectionMode = props.selectionMode === 'checkbox';
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var metaData = {
props: props,
state: {
focused: focusedState,
overlayVisible: overlayVisibleState,
expandedKeys: expandedKeys,
filterValue: filteredValue
}
};
var _TreeSelectBase$setMe = TreeSelectBase.setMetaData(metaData),
ptm = _TreeSelectBase$setMe.ptm,
cx = _TreeSelectBase$setMe.cx,
isUnstyled = _TreeSelectBase$setMe.isUnstyled;
useHandleStyle(TreeSelectBase.css.styles, isUnstyled, {
name: 'treeselect'
});
var filterOptions = {
filter: function filter(e) {
return onFilterInputChange(e);
},
reset: function reset() {
return resetFilter();
}
};
var _useOverlayListener = useOverlayListener({
target: elementRef,
overlay: overlayRef,
listener: function listener(event, _ref) {
var valid = _ref.valid,
type = _ref.type;
if (valid) {
if (type === 'outside' || context.hideOverlaysOnDocumentScrolling) {
hide();
} else if (!DomHandler.isDocument(event.target)) {
alignOverlay();
}
}
},
when: overlayVisibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var getLabel = function getLabel() {
return selectedNodes.length ? selectedNodes.map(function (node) {
return node.label;
}).join(', ') : props.placeholder;
};
var show = function show() {
setOverlayVisibleState(true);
};
var hide = function hide() {
setOverlayVisibleState(false);
focusInputRef.current && DomHandler.focus(focusInputRef.current);
};
var onInputFocus = function onInputFocus() {
setFocusedState(true);
props.onFocus && props.onFocus();
};
var onInputBlur = function onInputBlur() {
setFocusedState(false);
props.onBlur && props.onBlur();
};
var onClick = function onClick(event) {
if (!props.disabled && (!overlayRef.current || !overlayRef.current.contains(event.target)) && !DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'closebutton')) {
DomHandler.focus(focusInputRef.current);
overlayVisibleState ? hide() : show();
}
};
var onSelectionChange = function onSelectionChange(event) {
if (props.onChange) {
selfChange.current = true;
props.onChange({
originalEvent: event.originalEvent,
value: event.value,
stopPropagation: function stopPropagation() {
event.originalEvent.stopPropagation();
},
preventDefault: function preventDefault() {
event.originalEvent.preventDefault();
},
target: {
name: props.name,
id: props.id,
value: event.value
}
});
}
};
var clear = function clear(event) {
if (props.onChange) {
selfChange.current = true;
props.onChange({
originalEvent: event,
value: undefined,
stopPropagation: function stopPropagation() {
event === null || event === void 0 || event.stopPropagation();
},
preventDefault: function preventDefault() {
event === null || event === void 0 || event.preventDefault();
},
target: {
name: props.name,
id: props.id,
value: undefined
}
});
}
};
var onClearIconKeyDown = function onClearIconKeyDown(event) {
if (event.key === 'Enter' || event.code === 'Space') {
clear(event);
event.preventDefault();
}
};
var onNodeSelect = function onNodeSelect(node) {
props.onNodeSelect && props.onNodeSelect(node);
isSingleSelectionMode && hide();
};
var onNodeUnselect = function onNodeUnselect(node) {
props.onNodeUnselect && props.onNodeUnselect(node);
isCheckboxSelectionMode && node.originalEvent.stopPropagation();
};
var onNodeToggle = function onNodeToggle(e) {
if (props.onToggle) {
props.onToggle(e);
} else {
setExpandedKeysState(e.value);
}
};
var onFilterValueChange = function onFilterValueChange(e) {
setFilterValueState(e.value);
};
var onOverlayClick = function onOverlayClick(event) {
OverlayService.emit('overlay-click', {
originalEvent: event,
target: elementRef.current
});
};
var onFirstHiddenFocus = function onFirstHiddenFocus(event) {
var focusableEl = event.relatedTarget === focusInputRef.current ? DomHandler.getFirstFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : focusInputRef.current;
DomHandler.focus(focusableEl);
};
var onLastHiddenFocus = function onLastHiddenFocus(event) {
var focusableEl = event.relatedTarget === focusInputRef.current ? DomHandler.getLastFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : focusInputRef.current;
DomHandler.focus(focusableEl);
};
var onHeaderElementKeyDown = function onHeaderElementKeyDown(event, isHideButton) {
switch (event.code) {
case 'ArrowDown':
event.preventDefault();
setFocusToFocusableFirstNode();
break;
case 'ArrowUp':
event.preventDefault();
focusInputRef.current && DomHandler.focus(focusInputRef.current);
break;
case 'Enter':
case 'NumpadEnter':
event.preventDefault();
if (isHideButton) {
hide();
}
break;
case 'Escape':
onEscapeKey(event);
break;
}
};
var onKeyDown = function onKeyDown(event) {
switch (event.code) {
case 'ArrowDown':
onArrowDownKey(event);
break;
case 'Space':
case 'Enter':
case 'NumpadEnter':
onEnterKey(event);
break;
case 'Escape':
onEscapeKey(event);
break;
case 'Tab':
if (overlayVisibleState) {
event.preventDefault();
if (event.shiftKey) {
setFocusToFocusableFirstNode();
} else {
onTabKey(event);
}
}
break;
}
};
var onArrowDownKey = function onArrowDownKey(event) {
if (overlayVisibleState) {
return;
}
focusToTree.current = true;
show();
event.preventDefault();
};
var onEnterKey = function onEnterKey(event) {
if (overlayVisibleState) {
hide();
} else {
onArrowDownKey(event);
}
event.preventDefault();
};
var onEscapeKey = function onEscapeKey(event) {
if (overlayVisibleState) {
hide();
event.preventDefault();
}
};
var onTabKey = function onTabKey(event) {
var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
if (!pressedInInputText) {
if (overlayVisibleState && hasFocusableElements()) {
DomHandler.focus(firstHiddenFocusableElementOnOverlay.current);
event.preventDefault();
}
}
};
var hasFocusableElements = function hasFocusableElements() {
return DomHandler.getFocusableElements(overlayRef.current, ':not([data-p-hidden-focusable="true"])').length > 0;
};
var onFilterInputChange = function onFilterInputChange(event) {
var value = event.target.value;
if (props.onFilterValueChange) {
props.onFilterValueChange({
originalEvent: event,
value: value
});
} else {
setFilterValueState(value);
}
};
var resetFilter = function resetFilter() {
setFilterValueState('');
};
var onOverlayEnter = function onOverlayEnter() {
ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, context && context.zIndex.overlay || PrimeReact.zIndex.overlay);
DomHandler.addStyles(overlayRef.current, {
position: 'absolute',
top: '0',
left: '0'
});
setFocusToFocusableFirstNode();
alignOverlay();
scrollInView();
};
var onOverlayEntered = function onOverlayEntered() {
bindOverlayListener();
if (props.filter && props.filterInputAutoFocus) {
DomHandler.focus(filterInputRef.current, props.filterInputAutoFocus);
}
props.onShow && props.onShow();
};
var onOverlayExit = function onOverlayExit() {
unbindOverlayListener();
};
var onOverlayExited = function onOverlayExited() {
if (props.filter && props.resetFilterOnHide) {
resetFilter();
}
ZIndexUtils.clear(overlayRef.current);
props.onHide && props.onHide();
};
var alignOverlay = function alignOverlay() {
DomHandler.alignOverlay(overlayRef.current, triggerRef.current.parentElement, props.appendTo || context && context.appendTo || PrimeReact.appendTo);
};
var scrollInView = function scrollInView() {
var highlightItem = DomHandler.findSingle(overlayRef.current, '[data-pc-section="content"][data-p-highlight="true"]');
if (highlightItem && highlightItem.scrollIntoView) {
highlightItem.scrollIntoView({
block: 'nearest',
inline: 'start'
});
}
};
var _findSelectedNodes = function findSelectedNodes(node, keys, selectedNodes) {
if (node) {
if (isSelected(node, keys)) {
selectedNodes.push(node);
delete keys[node.key];
}
if (Object.keys(keys).length && node.children) {
var _iterator = _createForOfIteratorHelper$4(node.children),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var childNode = _step.value;
_findSelectedNodes(childNode, keys, selectedNodes);
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
}
} else {
var _iterator2 = _createForOfIteratorHelper$4(props.options),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var _childNode = _step2.value;
_findSelectedNodes(_childNode, keys, selectedNodes);
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
}
};
var isSelected = function isSelected(node, keys) {
return isCheckboxSelectionMode ? keys[node.key] && keys[node.key].checked : keys[node.key];
};
var updateTreeState = function updateTreeState() {
var keys = isSingleSelectionMode ? _defineProperty({}, "".concat(props.value), true) : _objectSpread$7({}, props.value);
setExpandedKeysState({});
if (keys && props.options) {
_updateTreeBranchState(null, null, keys);
}
};
var setFocusToFocusableFirstNode = function setFocusToFocusableFirstNode() {
var _treeRef$current;
var treeNodeEl = DomHandler.find((_treeRef$current = treeRef.current) === null || _treeRef$current === void 0 ? void 0 : _treeRef$current.getElement(), '[data-pc-section="node"]');
var focusedElement = _toConsumableArray(treeNodeEl).find(function (item) {
return item.getAttribute('tabindex') === '0';
});
DomHandler.focus(focusedElement);
};
var _updateTreeBranchState = function updateTreeBranchState(node, path, keys) {
if (node) {
if (isSelected(node, keys)) {
expandPath(path);
delete keys[node.key];
}
if (Object.keys(keys).length && node.children) {
var _iterator3 = _createForOfIteratorHelper$4(node.children),
_step3;
try {
for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
var childNode = _step3.value;
path.push(node.key);
_updateTreeBranchState(childNode, path, keys);
}
} catch (err) {
_iterator3.e(err);
} finally {
_iterator3.f();
}
}
} else {
var _iterator4 = _createForOfIteratorHelper$4(props.options),
_step4;
try {
for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
var _childNode2 = _step4.value;
_updateTreeBranchState(_childNode2, [], keys);
}
} catch (err) {
_iterator4.e(err);
} finally {
_iterator4.f();
}
}
};
var expandPath = function expandPath(path) {
if (path.length > 0) {
var _expandedKeys = _objectSpread$7({}, expandedKeysState || {});
var _iterator5 = _createForOfIteratorHelper$4(path),
_step5;
try {
for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
var key = _step5.value;
_expandedKeys[key] = true;
}
} catch (err) {
_iterator5.e(err);
} finally {
_iterator5.f();
}
setExpandedKeysState(_expandedKeys);
}
};
var getSelectedNodes = function getSelectedNodes() {
var selectedNodes = [];
if (ObjectUtils.isNotEmpty(props.value) && props.options) {
var keys = isSingleSelectionMode ? _defineProperty({}, "".concat(props.value), true) : _objectSpread$7({}, props.value);
_findSelectedNodes(null, keys, selectedNodes);
}
return selectedNodes;
};
React.useImperativeHandle(ref, function () {
return {
props: props,
clear: clear,
show: show,
hide: hide,
focus: function focus() {
return DomHandler.focus(focusInputRef.current);
},
getElement: function getElement() {
return elementRef.current;
}
};
});
React.useEffect(function () {
ObjectUtils.combinedRefs(focusInputRef, props.inputRef);
}, [focusInputRef, props.inputRef]);
useMountEffect(function () {
updateTreeState();
listId.current = UniqueComponentId() + '_list';
if (props.autoFocus) {
DomHandler.focus(focusInputRef.current, props.autoFocus);
}
alignOverlay();
});
useUpdateEffect(function () {
if (overlayVisibleState && props.filter) {
alignOverlay();
}
});
useUpdateEffect(function () {
updateTreeState();
}, [props.options]);
useUpdateEffect(function () {
if (focusToTree.current && overlayVisibleState) {
focusToTree.current = false;
setFocusToFocusableFirstNode();
}
}, [overlayVisibleState]);
useUpdateEffect(function () {
if (overlayVisibleState && expandedKeysState) {
alignOverlay();
}
}, [expandedKeysState]);
useUpdateEffect(function () {
if (overlayVisibleState) {
if (!selfChange.current) {
updateTreeState();
}
selfChange.current = false;
}
}, [props.value]);
useUnmountEffect(function () {
ZIndexUtils.clear(overlayRef.current);
});
var createKeyboardHelper = function createKeyboardHelper() {
var hiddenInputWrapperProps = mergeProps({
className: 'p-hidden-accessible'
}, ptm('hiddenInputWrapper'));
var hiddenInputProps = mergeProps(_objectSpread$7({
ref: focusInputRef,
role: 'listbox',
id: props.inputId,
type: 'text',
'aria-expanded': overlayVisibleState,
'aria-label': props.ariaLabel,
'aria-labelledby': props.ariaLabelledBy,
'aria-haspopup': 'tree',
'aria-controls': listId.current,
onFocus: onInputFocus,
onBlur: onInputBlur,
onKeyDown: onKeyDown,
disabled: props.disabled,
tabIndex: props.tabIndex
}, ariaProps), ptm('hiddenInput'));
return /*#__PURE__*/React.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React.createElement("input", _extends({}, hiddenInputProps, {
readOnly: true
})));
};
var createLabel = function createLabel() {
var tokenProps = mergeProps({
className: cx('token')
}, ptm('token'));
var tokenLabelProps = mergeProps({
className: cx('tokenLabel')
}, ptm('tokenLabel'));
var labelContainerProps = mergeProps({
className: cx('labelContainer')
}, ptm('labelContainer'));
var labelProps = mergeProps({
className: cx('label', {
isValueEmpty: isValueEmpty,
getLabel: getLabel
})
}, ptm('label'));
var content = null;
if (props.valueTemplate) {
content = ObjectUtils.getJSXElement(props.valueTemplate, selectedNodes, props);
} else if (props.display === 'comma') {
content = getLabel() || 'empty';
} else if (props.display === 'chip') {
content = /*#__PURE__*/React.createElement(React.Fragment, null, selectedNodes && selectedNodes.map(function (node, index) {
return /*#__PURE__*/React.createElement("div", _extends({}, tokenProps, {
key: "".concat(node.key, "_").concat(index)
}), /*#__PURE__*/React.createElement("span", tokenLabelProps, node.label));
}), isValueEmpty && (props.placeholder || 'empty'));
}
return /*#__PURE__*/React.createElement("div", labelContainerProps, /*#__PURE__*/React.createElement("div", labelProps, content));
};
var createDropdownIcon = function createDropdownIcon() {
var triggerProps = mergeProps({
ref: triggerRef,
className: cx('trigger'),
role: 'button',
'aria-haspopup': 'tree',
'aria-expanded': overlayVisibleState
}, ptm('trigger'));
var triggerIconProps = mergeProps({
className: cx('triggerIcon')
}, ptm('triggerIcon'));
var icon = props.dropdownIcon || /*#__PURE__*/React.createElement(ChevronDownIcon, triggerIconProps);
var dropdownIcon = IconUtils.getJSXIcon(icon, _objectSpread$7({}, triggerIconProps), {
props: props
});
return /*#__PURE__*/React.createElement("div", triggerProps, dropdownIcon);
};
var createClearIcon = function createClearIcon() {
if (props.value != null && props.showClear && !props.disabled) {
var clearIconProps = mergeProps({
className: cx('clearIcon'),
onPointerUp: clear,
tabIndex: props.tabIndex || '0',
onKeyDown: onClearIconKeyDown,
'aria-label': localeOption('clear')
}, ptm('clearIcon'));
var icon = props.clearIcon || /*#__PURE__*/React.createElement(TimesIcon, clearIconProps);
return IconUtils.getJSXIcon(icon, _objectSpread$7({}, clearIconProps), {
props: props
});
}
return null;
};
var createContent = function createContent() {
return /*#__PURE__*/React.createElement(Tree, {
ref: treeRef,
id: listId.current,
emptyMessage: props.emptyMessage,
expandedKeys: expandedKeys,
filter: props.filter,
filterBy: props.filterBy,
filterDelay: props.filterDelay,
filterLocale: props.filterLocale,
filterMode: props.filterMode,
filterPlaceholder: props.filterPlaceholder,
filterValue: filteredValue,
metaKeySelection: props.metaKeySelection,
nodeTemplate: props.nodeTemplate,
onCollapse: props.onNodeCollapse,
onExpand: props.onNodeExpand,
onFilterValueChange: onFilterValueChange,
onNodeClick: props.onNodeClick,
onNodeDoubleClick: props.onNodeDoubleClick,
onSelect: onNodeSelect,
onSelectionChange: onSelectionChange,
onToggle: onNodeToggle,
onUnselect: onNodeUnselect,
selectionKeys: props.value,
selectionMode: props.selectionMode,
showHeader: false,
togglerTemplate: props.togglerTemplate,
value: props.options,
pt: ptm('tree'),
__parentMetadata: {
parent: metaData
}
});
};
var createFilterElement = function createFilterElement() {
if (props.filter) {
var newValue = props.onFilterValueChange ? props.filterValue : filterValue;
newValue = ObjectUtils.isNotEmpty(newValue) ? newValue : '';
var filterContainerProps = mergeProps({
className: cx('filterContainer')
}, ptm('filterContainer'));
var filterProps = mergeProps({
ref: filterInputRef,
type: 'text',
value: newValue,
autoComplete: 'off',
className: cx('filter'),
placeholder: props.filterPlaceholder,
onKeyDown: function onKeyDown(event) {
return onHeaderElementKeyDown(event, false);
},
onChange: onFilterInputChange,
disabled: props.disabled
}, ptm('filter'));
var filterIconProps = mergeProps({
className: cx('filterIcon')
}, ptm('filterIcon'));
var icon = props.filterIcon || /*#__PURE__*/React.createElement(SearchIcon, filterIconProps);
var filterIcon = IconUtils.getJSXIcon(icon, _objectSpread$7({}, filterIconProps), {
props: props
});
var filterContent = /*#__PURE__*/React.createElement("div", filterContainerProps, /*#__PURE__*/React.createElement("input", filterProps), filterIcon);
if (props.filterTemplate) {
var defaultContentOptions = {
className: 'p-treeselect-filter-container',
element: filterContent,
filterOptions: filterOptions,
filterInputKeyDown: function filterInputKeyDown(event) {
return onHeaderElementKeyDown(event, function () {});
},
filterInputChange: onFilterInputChange,
filterIconClassName: 'p-dropdown-filter-icon',
props: props
};
filterContent = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
}
return /*#__PURE__*/React.createElement(React.Fragment, null, filterContent);
}
};
var createHeader = function createHeader() {
var filterElement = createFilterElement();
var closeIconProps = mergeProps({
className: cx('closeIcon'),
'aria-hidden': true
}, ptm('closeIcon'));
var icon = props.closeIcon || /*#__PURE__*/React.createElement(TimesIcon, closeIconProps);
var closeIcon = IconUtils.getJSXIcon(icon, _objectSpread$7({}, closeIconProps), {
props: props
});
var closeButtonProps = mergeProps({
type: 'button',
className: cx('closeButton'),
onKeyDown: function onKeyDown(event) {
return onHeaderElementKeyDown(event, true);
},
onClick: hide,
'aria-label': ariaLabel('close')
}, ptm('closeButton'));
var headerProps = mergeProps({
className: cx('header')
}, ptm('header'));
var closeElement = /*#__PURE__*/React.createElement("button", closeButtonProps, closeIcon, /*#__PURE__*/React.createElement(Ripple, null));
var content = /*#__PURE__*/React.createElement("div", headerProps, filterElement, closeElement);
if (props.panelHeaderTemplate) {
var defaultOptions = {
className: 'p-treeselect-header',
filterElement: filterElement,
closeElement: closeElement,
closeElementClassName: 'p-treeselect-close p-link',
closeIconClassName: 'p-treeselect-close-icon',
onCloseClick: hide,
element: content,
props: props
};
return /*#__PURE__*/React.createElement("div", null, content, ObjectUtils.getJSXElement(props.panelHeaderTemplate, defaultOptions));
}
return content;
};
var createFooter = function createFooter() {
return ObjectUtils.getJSXElement(props.panelFooterTemplate, props);
};
var selectedNodes = getSelectedNodes();
var otherProps = TreeSelectBase.getOtherProps(props);
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var firstHiddenFocusableElementOnOverlayProps = mergeProps({
ref: firstHiddenFocusableElementOnOverlay,
role: 'presentation',
className: 'p-hidden-accessible p-hidden-focusable',
tabIndex: 0,
onFocus: onFirstHiddenFocus,
'aria-hidden': true,
'data-p-hidden-accessible': true,
'data-p-hidden-focusable': true
}, ptm('firstHiddenFocusableElementOnOverlay'));
var lastHiddenFocusableElementOnOverlayProps = mergeProps({
ref: lastHiddenFocusableElementOnOverlay,
role: 'presentation',
className: 'p-hidden-accessible p-hidden-focusable',
tabIndex: 0,
onFocus: onLastHiddenFocus,
'aria-hidden': true,
'data-p-hidden-accessible': true,
'data-p-hidden-focusable': true
}, ptm('lastHiddenFocusableElementOnOverlay'));
var rootProps = mergeProps({
ref: elementRef,
className: classNames(props.className, cx('root', {
context: context,
focusedState: focusedState,
overlayVisibleState: overlayVisibleState,
isValueEmpty: isValueEmpty
})),
style: props.style,
onClick: onClick
}, TreeSelectBase.getOtherProps(props), ptm('root'));
var keyboardHelper = createKeyboardHelper();
var labelElement = createLabel();
var dropdownIcon = createDropdownIcon();
var clearIcon = createClearIcon();
var content = createContent();
var header = createHeader();
var footer = createFooter();
return /*#__PURE__*/React.createElement("div", rootProps, keyboardHelper, labelElement, clearIcon, dropdownIcon, /*#__PURE__*/React.createElement(TreeSelectPanel, {
hostName: "TreeSelect",
ref: overlayRef,
appendTo: props.appendTo,
panelStyle: props.panelStyle,
panelClassName: props.panelClassName,
scrollHeight: props.scrollHeight,
onClick: onOverlayClick,
header: header,
hide: hide,
footer: footer,
firstHiddenFocusableElementOnOverlay: /*#__PURE__*/React.createElement("span", firstHiddenFocusableElementOnOverlayProps),
lastHiddenFocusableElementOnOverlay: /*#__PURE__*/React.createElement("span", lastHiddenFocusableElementOnOverlayProps),
transitionOptions: props.transitionOptions,
"in": overlayVisibleState,
onEnter: onOverlayEnter,
onEntered: onOverlayEntered,
onExit: onOverlayExit,
onExited: onOverlayExited,
ptm: ptm,
cx: cx
}, content), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip,
pt: ptm('tooltip')
}, props.tooltipOptions)));
}));
TreeSelect.displayName = 'TreeSelect';
var styles = "\n@layer primereact {\n .p-treetable {\n position: relative;\n }\n .p-treetable > .p-treetable-wrapper {\n overflow: auto;\n }\n .p-treetable table {\n border-collapse: collapse;\n width: 100%;\n table-layout: fixed;\n }\n .p-treetable .p-sortable-column {\n cursor: pointer;\n user-select: none;\n }\n .p-treetable-selectable .p-treetable-tbody > tr {\n cursor: pointer;\n }\n .p-treetable-toggler {\n cursor: pointer;\n user-select: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n vertical-align: middle;\n overflow: hidden;\n position: relative;\n }\n .p-treetable-toggler + .p-checkbox {\n vertical-align: middle;\n }\n .p-treetable-toggler + .p-checkbox + span {\n vertical-align: middle;\n }\n /* Resizable */\n .p-treetable-resizable > .p-treetable-wrapper {\n overflow-x: auto;\n }\n .p-treetable-resizable .p-treetable-thead > tr > th,\n .p-treetable-resizable .p-treetable-tfoot > tr > td,\n .p-treetable-resizable .p-treetable-tbody > tr > td {\n overflow: hidden;\n }\n .p-treetable-resizable .p-resizable-column {\n background-clip: padding-box;\n position: relative;\n }\n .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {\n display: none;\n }\n .p-treetable .p-column-resizer {\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n margin: 0;\n width: 0.5rem;\n height: 100%;\n padding: 0px;\n cursor: col-resize;\n border: 1px solid transparent;\n }\n .p-treetable .p-column-resizer-helper {\n width: 1px;\n position: absolute;\n z-index: 10;\n display: none;\n }\n /* Scrollable */\n .p-treetable-scrollable-wrapper {\n position: relative;\n }\n .p-treetable-scrollable-header,\n .p-treetable-scrollable-footer {\n overflow: hidden;\n border: 0 none;\n }\n .p-treetable-scrollable-body {\n overflow: auto;\n position: relative;\n }\n .p-treetable-virtual-table {\n position: absolute;\n }\n /* Frozen Columns */\n .p-treetable-frozen-view .p-treetable-scrollable-body {\n overflow: hidden;\n }\n .p-treetable-unfrozen-view {\n position: absolute;\n top: 0px;\n left: 0px;\n }\n /* Reorder */\n .p-treetable-reorder-indicator-up,\n .p-treetable-reorder-indicator-down {\n position: absolute;\n display: none;\n }\n /* Loader */\n .p-treetable .p-treetable-loading-overlay {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2;\n }\n /* Alignment */\n .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,\n .p-treetable .p-treetable-tbody > tr > td.p-align-left,\n .p-treetable .p-treetable-tfoot > tr > td.p-align-left {\n text-align: left;\n justify-content: flex-start;\n }\n .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,\n .p-treetable .p-treetable-tbody > tr > td.p-align-right,\n .p-treetable .p-treetable-tfoot > tr > td.p-align-right {\n text-align: right;\n justify-content: flex-end;\n }\n .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,\n .p-treetable .p-treetable-tbody > tr > td.p-align-center,\n .p-treetable .p-treetable-tfoot > tr > td.p-align-center {\n text-align: center;\n justify-content: center;\n }\n}\n";
var classes$1 = {
root: function root(_ref) {
var props = _ref.props,
isRowSelectionMode = _ref.isRowSelectionMode;
return classNames('p-treetable p-component', {
'p-treetable-hoverable-rows': props.rowHover,
'p-treetable-selectable': isRowSelectionMode(),
'p-treetable-resizable': props.resizableColumns,
'p-treetable-resizable-fit': props.resizableColumns && props.columnResizeMode === 'fit',
'p-treetable-striped': props.stripedRows,
'p-treetable-gridlines': props.showGridlines
});
},
loadingIcon: 'p-treetable-loading-icon',
loadingWrapper: 'p-treetable-loading',
loadingOverlay: 'p-treetable-loading-overlay p-component-overlay',
header: 'p-treetable-header',
checkIcon: 'p-checkbox-icon',
footer: 'p-treetable-footer',
resizeHelper: 'p-column-resizer-helper',
reorderIndicatorUp: 'p-treetable-reorder-indicator-up',
reorderIndicatorDown: 'p-treetable-reorder-indicator-down',
wrapper: 'p-treetable-wrapper',
table: function table(_ref2) {
var props = _ref2.props;
return classNames('p-treetable-table', {
'p-treetable-scrollable-table': props.scrollable,
'p-treetable-resizable-table': props.resizableColumns,
'p-treetable-resizable-table-fit': props.resizableColumns && props.columnResizeMode === 'fit'
});
},
scrollableWrapper: 'p-treetable-wrapper p-treetable-scrollable-wrapper',
thead: 'p-treetable-thead',
tbody: 'p-treetable-tbody',
tfoot: 'p-treetable-tfoot',
emptyMessage: 'p-treetable-emptymessage',
bodyCell: function bodyCell(_ref3) {
var props = _ref3.bodyProps,
editingState = _ref3.editingState,
align = _ref3.align;
return classNames(_defineProperty({
'p-editable-column': props.editor,
'p-cell-editing': props.editor ? editingState : false
}, "p-align-".concat(align), !!align));
},
sortBadge: 'p-sortable-column-badge',
headerTitle: 'p-column-title',
headerContent: 'p-column-header-content',
headerCell: function headerCell(_ref4) {
var props = _ref4.headerProps,
frozen = _ref4.frozen,
column = _ref4.column,
options = _ref4.options,
getColumnProp = _ref4.getColumnProp,
sorted = _ref4.sorted,
align = _ref4.align;
return options.filterOnly ? classNames('p-filter-column', {
'p-frozen-column': frozen
}) : classNames(_defineProperty({
'p-sortable-column': getColumnProp(column, 'sortable'),
'p-highlight': sorted,
'p-frozen-column': frozen,
'p-resizable-column': props.resizableColumns && getColumnProp(column, 'resizeable'),
'p-reorderable-column': props.reorderableColumns && getColumnProp(column, 'reorderable') && !frozen
}, "p-align-".concat(align), !!align));
},
columnResizer: 'p-column-resizer p-clickable',
sortIcon: 'p-sortable-column-icon',
row: function row(_ref5) {
var isSelected = _ref5.isSelected,
props = _ref5.rowProps;
return {
'p-highlight': isSelected(),
'p-highlight-contextmenu': props.contextMenuSelectionKey && props.contextMenuSelectionKey === props.node.key,
'p-row-odd': parseInt(String(props.rowIndex).split('_').pop(), 10) % 2 !== 0
};
},
rowCheckbox: function rowCheckbox(_ref6) {
var partialChecked = _ref6.partialChecked;
return classNames('p-treetable-checkbox', {
'p-indeterminate': partialChecked
});
},
rowToggler: 'p-treetable-toggler p-link p-unselectable-text',
rowTogglerIcon: 'p-treetable-toggler-icon',
scrollableBody: 'p-treetable-scrollable-body',
scrollableHeaderTable: 'p-treetable-scrollable-header-table',
scrollableHeaderBox: 'p-treetable-scrollable-header-box',
scrollableHeader: 'p-treetable-scrollable-header',
scrollableBodyTable: 'p-treetable-scrollable-body-table',
scrollableFooter: 'p-treetable-scrollable-footer',
scrollableFooterBox: 'p-treetable-scrollable-footer-box',
scrollableFooterTable: 'p-treetable-scrollable-footer-table',
scrollable: function scrollable(_ref7) {
var props = _ref7.scrolaableProps;
return classNames('p-treetable-scrollable-view', {
'p-treetable-frozen-view': props.frozen,
'p-treetable-unfrozen-view': !props.frozen && props.frozenWidth
});
},
scrollableColgroup: 'p-treetable-scrollable-colgroup'
};
var TreeTableBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'TreeTable',
alwaysShowPaginator: true,
checkboxIcon: null,
className: null,
columnResizeMode: 'fit',
contextMenuSelectionKey: null,
currentPageReportTemplate: '({currentPage} of {totalPages})',
customRestoreState: null,
customSaveState: null,
defaultSortOrder: 1,
emptyMessage: null,
expandedKeys: null,
filterDelay: 300,
filterLocale: undefined,
filterMode: 'lenient',
filters: null,
first: null,
footer: null,
footerColumnGroup: null,
frozenFooterColumnGroup: null,
frozenHeaderColumnGroup: null,
frozenWidth: null,
globalFilter: null,
globalFilterMatchMode: FilterMatchMode.CONTAINS,
header: null,
headerColumnGroup: null,
id: null,
lazy: false,
loading: false,
loadingIcon: null,
metaKeySelection: false,
multiSortMeta: null,
onColReorder: null,
onCollapse: null,
onColumnResizeEnd: null,
onContextMenu: null,
onContextMenuSelectionChange: null,
onExpand: null,
onFilter: null,
onPage: null,
onRowClick: null,
onRowMouseEnter: null,
onRowMouseLeave: null,
onSelect: null,
onSelectionChange: null,
onSort: null,
onStateRestore: null,
onStateSave: null,
onToggle: null,
onUnselect: null,
onValueChange: null,
pageLinkSize: 5,
paginator: false,
paginatorClassName: null,
paginatorDropdownAppendTo: null,
paginatorLeft: null,
paginatorPosition: 'bottom',
paginatorRight: null,
paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
propagateSelectionDown: true,
propagateSelectionUp: true,
removableSort: false,
reorderIndicatorDownIcon: null,
reorderIndicatorUpIcon: null,
reorderableColumns: false,
resizableColumns: false,
rowClassName: null,
rowHover: false,
rows: null,
rowsPerPageOptions: null,
scrollHeight: null,
scrollable: false,
selectOnEdit: true,
selectionKeys: null,
selectionMode: null,
showGridlines: false,
sortField: null,
sortIcon: null,
sortMode: 'single',
sortOrder: null,
stateKey: null,
stateStorage: null,
stripedRows: false,
style: null,
tabIndex: 0,
tableClassName: null,
tableStyle: null,
totalRecords: null,
value: null,
children: undefined,
togglerTemplate: null
},
css: {
classes: classes$1,
styles: styles
}
});
function ownKeys$6(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$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var TreeTableBodyCell = function TreeTableBodyCell(props) {
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
editingState = _React$useState2[0],
setEditingState = _React$useState2[1];
var elementRef = React.useRef(null);
var keyHelperRef = React.useRef(null);
var selfClick = React.useRef(false);
var overlayEventListener = React.useRef(null);
var tabIndexTimeout = React.useRef(null);
var mergeProps = useMergeProps();
var getColumnProp = function getColumnProp(name) {
return ColumnBase.getCProp(props.column, name);
};
var getColumnProps = function getColumnProps(column) {
return ColumnBase.getCProps(column);
};
var _props$ptCallbacks = props.ptCallbacks,
ptm = _props$ptCallbacks.ptm,
ptmo = _props$ptCallbacks.ptmo,
cx = _props$ptCallbacks.cx;
var getColumnPTOptions = function getColumnPTOptions(key) {
var isSingleSelectionMode = props.metaData.props.selectionMode === 'single';
var isMultipleSelectionMode = props.metaData.props.selectionMode === 'multiple';
var cProps = getColumnProps(props.column);
var columnMetadata = {
props: cProps,
parent: props.metaData,
hostName: props.hostName,
state: {
editing: editingState
},
context: {
index: props.index,
selectable: isSingleSelectionMode || isMultipleSelectionMode,
selected: props.selected,
scrollable: props.metaData.props.scrollable,
frozen: getColumnProp('frozen'),
showGridlines: props.metaData.props.showGridlines
}
};
return mergeProps(ptm("column.".concat(key), {
column: columnMetadata
}), ptm("column.".concat(key), columnMetadata), ptmo(cProps, key, columnMetadata));
};
var field = getColumnProp('field') || "field_".concat(props.index);
var getCellParams = function getCellParams() {
return {
value: resolveFieldData(),
field: field,
rowData: props.rowData,
rowIndex: props.rowIndex,
cellIndex: props.index,
selected: isSelected(),
column: props.column,
props: props
};
};
var getCellCallbackParams = function getCellCallbackParams(event) {
var params = getCellParams();
return _objectSpread$6({
originalEvent: event
}, params);
};
var resolveFieldData = function resolveFieldData(data) {
return ObjectUtils.resolveFieldData(data || props.node.data, field);
};
var _useEventListener = useEventListener({
type: 'click',
listener: function listener(e) {
if (!selfClick.current && isOutsideClicked(e.target)) {
switchCellToViewMode(e);
}
selfClick.current = false;
},
when: getColumnProp('editor')
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentClickListener = _useEventListener2[0],
unbindDocumentClickListener = _useEventListener2[1];
var _onClick = function onClick(event) {
if (getColumnProp('editor') && !editingState && (props.selectOnEdit || !props.selectOnEdit && props.selected)) {
selfClick.current = true;
var params = getCellCallbackParams(event);
var onBeforeCellEditShow = getColumnProp('onBeforeCellEditShow');
if (onBeforeCellEditShow) {
// if user returns false do not show the editor
if (onBeforeCellEditShow(params) === false) {
return;
}
// if user prevents default stop the editor
if (event && event.defaultPrevented) {
return;
}
}
setEditingState(true);
var onCellEditInit = getColumnProp('onCellEditInit');
if (onCellEditInit) {
if (onCellEditInit(params) === false) {
return;
}
// if user prevents default stop the editor
if (event && event.defaultPrevented) {
return;
}
}
bindDocumentClickListener();
overlayEventListener.current = function (e) {
if (!isOutsideClicked(e.target)) {
selfClick.current = true;
}
};
OverlayService.on('overlay-click', overlayEventListener.current);
}
};
var _onKeyDown = function onKeyDown(event) {
if (event.which === 13 || event.which === 9) {
switchCellToViewMode(event);
}
};
var isOutsideClicked = function isOutsideClicked(target) {
return elementRef.current && !(elementRef.current.isSameNode(target) || elementRef.current.contains(target));
};
var closeCell = function closeCell() {
/* When using the 'tab' key, the focus event of the next cell is not called in IE. */
setTimeout(function () {
setEditingState(false);
unbindDocumentClickListener();
OverlayService.off('overlay-click', overlayEventListener.current);
overlayEventListener.current = null;
}, 1);
};
var onEditorFocus = function onEditorFocus(event) {
_onClick(event);
};
var switchCellToViewMode = function switchCellToViewMode(event) {
if (props.cellEditValidator) {
var valid = props.cellEditValidator({
originalEvent: event,
columnProps: props
});
if (valid) {
closeCell();
}
} else {
closeCell();
}
};
var isSelected = function isSelected() {
return props.selection ? props.selection instanceof Array ? findIndex(props.selection) > -1 : equals(props.selection) : false;
};
React.useEffect(function () {
if (elementRef.current && getColumnProp('editor')) {
clearTimeout(tabIndexTimeout.current);
if (editingState) {
var focusable = DomHandler.findSingle(elementRef.current, 'input');
if (focusable && document.activeElement !== focusable && !focusable.hasAttribute('data-isCellEditing')) {
focusable.setAttribute('data-isCellEditing', true);
focusable.focus();
}
keyHelperRef.current.tabIndex = -1;
} else {
tabIndexTimeout.current = setTimeout(function () {
if (keyHelperRef.current) {
keyHelperRef.current.setAttribute('tabindex', 0);
}
}, 50);
}
}
});
useUnmountEffect(function () {
if (overlayEventListener.current) {
OverlayService.off('overlay-click', overlayEventListener.current);
overlayEventListener.current = null;
}
});
var bodyClassName = ObjectUtils.getPropValue(props.bodyClassName, props.node.data, {
field: props.field,
rowIndex: props.rowIndex,
props: props
});
var style = props.bodyStyle || props.style;
var columnEditor = getColumnProp('editor');
var content;
if (editingState) {
if (columnEditor) {
content = ObjectUtils.getJSXElement(columnEditor, {
node: props.node,
rowData: props.rowData,
value: ObjectUtils.resolveFieldData(props.node.data, props.field),
field: props.field,
rowIndex: props.rowIndex,
props: props
});
} else {
throw new Error('Editor is not found on column.');
}
} else if (props.body) {
content = ObjectUtils.getJSXElement(props.body, props.node, {
field: props.field,
rowIndex: props.rowIndex,
props: props
});
} else {
content = ObjectUtils.resolveFieldData(props.node.data, props.field);
}
var editorKeyHelperProps = mergeProps({
tabIndex: 0,
ref: keyHelperRef,
className: 'p-cell-editor-key-helper p-hidden-accessible',
onFocus: function onFocus(e) {
return onEditorFocus(e);
}
}, getColumnPTOptions('editorKeyHelperLabel'));
var editorKeyHelperLabelProps = mergeProps(getColumnPTOptions('editorKeyHelper'));
/* eslint-disable */
var editorKeyHelper = columnEditor && /*#__PURE__*/React.createElement("a", editorKeyHelperProps, /*#__PURE__*/React.createElement("span", editorKeyHelperLabelProps));
var align = getColumnProp('align');
/* eslint-enable */
var bodyCellProps = mergeProps({
role: 'cell',
className: classNames(bodyClassName || props.className, cx('bodyCell', {
bodyProps: props,
editingState: editingState,
align: align
})),
style: style,
onClick: function onClick(e) {
return _onClick(e);
},
onKeyDown: function onKeyDown(e) {
return _onKeyDown(e);
}
}, getColumnPTOptions('root'), getColumnPTOptions('bodyCell'));
return /*#__PURE__*/React.createElement("td", _extends({
ref: elementRef
}, bodyCellProps), props.children, editorKeyHelper, content);
};
TreeTableBodyCell.displayName = 'TreeTableBodyCell';
function _createForOfIteratorHelper$3(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$3(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray$3(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$3(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$3(r, a) : void 0; } }
function _arrayLikeToArray$3(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 ownKeys$5(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$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var TreeTableRow = /*#__PURE__*/React.memo(function (props) {
var elementRef = React.useRef(null);
var nodeTouched = React.useRef(false);
var mergeProps = useMergeProps();
var expanded = props.expandedKeys ? props.expandedKeys[props.node.key] !== undefined : false;
var getColumnProp = function getColumnProp(column, name) {
return ColumnBase.getCProp(column, name);
};
var getColumnProps = function getColumnProps(column) {
return ColumnBase.getCProps(column);
};
var _props$ptCallbacks = props.ptCallbacks,
ptm = _props$ptCallbacks.ptm,
ptmo = _props$ptCallbacks.ptmo,
cx = _props$ptCallbacks.cx,
isUnstyled = _props$ptCallbacks.isUnstyled;
var getColumnPTOptions = function getColumnPTOptions(column, key) {
var cProps = getColumnProps(column);
var columnMetadata = {
props: cProps,
parent: props.metaData,
hostName: props.hostName,
context: {
index: props.rowIndex,
selectable: props.node.selectable !== false,
selected: isSelected(),
frozen: getColumnProp(column, 'frozen'),
scrollable: props.metaData.props.scrollable
}
};
return mergeProps(ptm("column.".concat(key), {
column: columnMetadata
}), ptm("column.".concat(key), columnMetadata), ptmo(cProps, key, columnMetadata));
};
var getColumnCheckboxPTOptions = function getColumnCheckboxPTOptions(column, key) {
var cProps = getColumnProps(column);
var columnMetadata = {
props: cProps,
parent: props.metaData,
hostName: props.hostName,
context: {
checked: isChecked(),
partialChecked: isPartialChecked()
}
};
return mergeProps(ptm("column.".concat(key), {
column: columnMetadata
}), ptm("column.".concat(key), columnMetadata), ptmo(cProps, key, columnMetadata));
};
var getRowPTOptions = function getRowPTOptions(key) {
var rowMetadata = {
hostName: props.hostName,
context: {
index: props.index,
selected: isSelected(),
selectable: props.node.selectable !== false,
frozen: getColumnProp('frozen'),
scrollable: props.metaData.props.scrollable,
showGridlines: props.metaData.props.showGridlines
}
};
return ptm(key, rowMetadata);
};
var onTogglerClick = function onTogglerClick(event) {
expanded ? collapse(event) : expand(event);
event.preventDefault();
event.stopPropagation();
};
var expand = function expand(event) {
var navigateFocusToChild = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var expandedKeys = props.expandedKeys ? _objectSpread$5({}, props.expandedKeys) : {};
expandedKeys[props.node.key] = true;
props.onToggle({
originalEvent: event,
value: expandedKeys,
navigateFocusToChild: navigateFocusToChild
});
invokeToggleEvents(event, true);
};
var collapse = function collapse(event) {
var expandedKeys = _objectSpread$5({}, props.expandedKeys);
delete expandedKeys[props.node.key];
props.onToggle({
originalEvent: event,
value: expandedKeys
});
invokeToggleEvents(event, false);
};
var invokeToggleEvents = function invokeToggleEvents(event, expanded) {
if (expanded) {
if (props.onExpand) {
props.onExpand({
originalEvent: event,
node: props.node
});
}
} else if (props.onCollapse) {
props.onCollapse({
originalEvent: event,
node: props.node
});
}
};
var _onClick = function onClick(event) {
if (props.onRowClick) {
props.onRowClick(event, props.node);
}
nodeTouched.current = false;
};
var _onTouchEnd = function onTouchEnd() {
nodeTouched.current = true;
};
var _onMouseEnter = function onMouseEnter(event) {
if (props.onRowMouseEnter) {
props.onRowMouseEnter({
originalEvent: event,
node: props.node,
index: props.rowIndex
});
}
};
var _onMouseLeave = function onMouseLeave(event) {
if (props.onRowMouseLeave) {
props.onRowMouseLeave({
originalEvent: event,
node: props.node,
index: props.rowIndex
});
}
};
var onCheckboxChange = function onCheckboxChange(event) {
var checked = isChecked();
var selectionKeys = props.selectionKeys ? _objectSpread$5({}, props.selectionKeys) : {};
if (checked) {
if (props.propagateSelectionDown) {
_propagateDown(props.node, false, selectionKeys);
} else {
delete selectionKeys[props.node.key];
}
if (props.propagateSelectionUp && props.onPropagateUp) {
props.onPropagateUp({
originalEvent: event,
check: false,
selectionKeys: selectionKeys
});
}
if (props.onUnselect) {
props.onUnselect({
originalEvent: event,
node: props.node
});
}
} else {
if (props.propagateSelectionDown) {
_propagateDown(props.node, true, selectionKeys);
} else {
selectionKeys[props.node.key] = {
checked: true
};
}
if (props.propagateSelectionUp && props.onPropagateUp) {
props.onPropagateUp({
originalEvent: event,
check: true,
selectionKeys: selectionKeys
});
}
if (props.onSelect) {
props.onSelect({
originalEvent: event,
node: props.node
});
}
}
if (props.onSelectionChange) {
props.onSelectionChange({
originalEvent: event,
value: selectionKeys
});
}
DomHandler.clearSelection();
};
var propagateUp = function propagateUp(event) {
var check = event.check;
var selectionKeys = event.selectionKeys;
var checkedChildCount = 0;
var _iterator = _createForOfIteratorHelper$3(props.node.children),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var child = _step.value;
if (selectionKeys[child.key] && selectionKeys[child.key].checked) {
checkedChildCount++;
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
var parentKey = props.node.key;
var children = ObjectUtils.findChildrenByKey(props.originalOptions, parentKey);
var isParentPartiallyChecked = children.some(function (ele) {
return ele.key in selectionKeys;
});
var isCompletelyChecked = children.every(function (ele) {
return ele.key in selectionKeys && selectionKeys[ele.key].checked;
});
if (isParentPartiallyChecked && !isCompletelyChecked) {
selectionKeys[parentKey] = {
checked: false,
partialChecked: true
};
} else if (isCompletelyChecked) {
selectionKeys[parentKey] = {
checked: true,
partialChecked: false
};
} else if (check) {
selectionKeys[parentKey] = {
checked: false,
partialChecked: false
};
} else {
delete selectionKeys[parentKey];
}
if (props.propagateSelectionUp && props.onPropagateUp) {
props.onPropagateUp(event);
}
};
var _propagateDown = function propagateDown(node, check, selectionKeys) {
if (check) {
selectionKeys[node.key] = {
checked: true,
partialChecked: false
};
} else {
delete selectionKeys[node.key];
}
if (node.children && node.children.length) {
for (var i = 0; i < node.children.length; i++) {
_propagateDown(node.children[i], check, selectionKeys);
}
}
};
var onRightClick = function onRightClick(event) {
DomHandler.clearSelection();
if (props.onContextMenuSelectionChange) {
props.onContextMenuSelectionChange({
originalEvent: event,
value: props.node.key
});
}
if (props.onContextMenu) {
props.onContextMenu({
originalEvent: event,
node: props.node
});
}
};
var _onKeyDown = function onKeyDown(event, item) {
switch (event.code) {
case 'ArrowDown':
onArrowDownKey(event);
break;
case 'ArrowUp':
onArrowUpKey(event);
break;
case 'ArrowLeft':
onArrowLeftKey(event);
break;
case 'ArrowRight':
onArrowRightKey(event);
break;
case 'Home':
onHomeKey(event);
break;
case 'End':
onEndKey(event);
break;
case 'Enter':
case 'NumpadEnter':
case 'Space':
if (!DomHandler.isClickable(event.target)) {
onEnterKey(event);
}
break;
case 'Tab':
onTabKey();
break;
}
};
var onArrowDownKey = function onArrowDownKey(event) {
var nextElementSibling = event.currentTarget.nextElementSibling;
nextElementSibling && focusRowChange(event.currentTarget, nextElementSibling);
event.preventDefault();
};
var onArrowUpKey = function onArrowUpKey(event) {
var previousElementSibling = event.currentTarget.previousElementSibling;
previousElementSibling && focusRowChange(event.currentTarget, previousElementSibling);
event.preventDefault();
};
var onArrowRightKey = function onArrowRightKey(event) {
var ishiddenIcon = DomHandler.findSingle(event.currentTarget, 'button').style.visibility === 'hidden';
DomHandler.findSingle(elementRef.current, '[data-pc-section="rowtoggler"]');
if (ishiddenIcon) {
return;
}
!expanded && expand(event, true);
event.preventDefault();
};
var onArrowLeftKey = function onArrowLeftKey(event) {
if (props.level === 0 && !expanded) {
return;
}
var currentTarget = event.currentTarget;
var ishiddenIcon = DomHandler.findSingle(currentTarget, 'button').style.visibility === 'hidden';
DomHandler.findSingle(currentTarget, '[data-pc-section="rowtoggler"]');
if (expanded && !ishiddenIcon) {
collapse(event);
return;
}
var target = _findBeforeClickableNode(currentTarget);
target && focusRowChange(currentTarget, target);
};
var onHomeKey = function onHomeKey(event) {
var findFirstElement = DomHandler.findSingle(event.currentTarget.parentElement, "tr[aria-level=\"".concat(props.level + 1, "\"]"));
findFirstElement && DomHandler.focus(findFirstElement);
event.preventDefault();
};
var onEndKey = function onEndKey(event) {
var nodes = DomHandler.find(event.currentTarget.parentElement, "tr[aria-level=\"".concat(props.level + 1, "\"]"));
var findFirstElement = nodes[nodes.length - 1];
DomHandler.focus(findFirstElement);
event.preventDefault();
};
var onEnterKey = function onEnterKey(event) {
event.preventDefault();
setTabIndexForSelectionMode(event, nodeTouched.current);
if (props.selectionMode === 'checkbox') {
onCheckboxChange(event);
return;
}
props.onRowClick(event, props.node);
nodeTouched.current = false;
};
var onTabKey = function onTabKey() {
var rows = _toConsumableArray(DomHandler.find(elementRef.current.parentElement, 'tr'));
var hasSelectedRow = rows.some(function (row) {
return DomHandler.getAttribute(row, 'data-p-highlight') || row.getAttribute('aria-checked') === 'true';
});
rows.forEach(function (row) {
row.tabIndex = -1;
});
if (hasSelectedRow) {
var selectedNodes = rows.filter(function (node) {
return DomHandler.getAttribute(node, 'data-p-highlight') || node.getAttribute('aria-checked') === 'true';
});
selectedNodes[0].tabIndex = 0;
return;
}
rows[0].tabIndex = 0;
};
var focusRowChange = function focusRowChange(firstFocusableRow, currentFocusedRow) {
firstFocusableRow.tabIndex = '-1';
currentFocusedRow.tabIndex = '0';
DomHandler.focus(currentFocusedRow);
};
var _findBeforeClickableNode = function findBeforeClickableNode(node) {
var prevNode = node.previousElementSibling;
if (prevNode) {
var prevNodeButton = prevNode.querySelector('button');
if (prevNodeButton && prevNodeButton.style.visibility !== 'hidden') {
return prevNode;
}
return _findBeforeClickableNode(prevNode);
}
return null;
};
var setTabIndexForSelectionMode = function setTabIndexForSelectionMode(event, nodeTouched) {
if (props.selectionMode !== null) {
var elements = _toConsumableArray(DomHandler.find(elementRef.current.parentElement, 'tr'));
event.currentTarget.tabIndex = nodeTouched === false ? -1 : 0;
if (elements.every(function (element) {
return element.tabIndex === -1;
})) {
elements[0].tabIndex = 0;
}
}
};
var isSelected = function isSelected() {
if (props.selectionMode === 'single') {
return props.selectionKeys === props.node.key;
} else if ((props.selectionMode === 'multiple' || props.selectionMode === 'checkbox') && props.selectionKeys) {
return props.selectionKeys[props.node.key] !== undefined;
} else {
return false;
}
};
var isChecked = function isChecked() {
return props.selectionKeys ? props.selectionKeys[props.node.key] && props.selectionKeys[props.node.key].checked : false;
};
var isPartialChecked = function isPartialChecked() {
return props.selectionKeys ? props.selectionKeys[props.node.key] && props.selectionKeys[props.node.key].partialChecked : false;
};
var createToggler = function createToggler(column) {
var label = expanded ? ariaLabel('collapseLabel') : ariaLabel('expandLabel');
var rowTogglerIconProps = mergeProps({
className: cx('rowTogglerIcon'),
'aria-hidden': true
}, getColumnPTOptions(column, 'rowTogglerIcon'));
var icon = expanded ? /*#__PURE__*/React.createElement(ChevronDownIcon, rowTogglerIconProps) : /*#__PURE__*/React.createElement(ChevronRightIcon, rowTogglerIconProps);
var togglerIcon = IconUtils.getJSXIcon(props.togglerIcon || icon, _objectSpread$5({}, rowTogglerIconProps), {
props: props
});
var rowTogglerProps = mergeProps({
type: 'button',
className: cx('rowToggler'),
onClick: function onClick(e) {
return onTogglerClick(e);
},
tabIndex: -1,
style: {
marginLeft: props.level * 16 + 'px',
visibility: props.node.leaf === false || props.node.children && props.node.children.length ? 'visible' : 'hidden'
},
'aria-label': label
}, getColumnPTOptions(column, 'rowToggler'));
var content = /*#__PURE__*/React.createElement("button", rowTogglerProps, togglerIcon, /*#__PURE__*/React.createElement(Ripple, null));
if (props.togglerTemplate) {
var defaultContentOptions = {
onClick: onTogglerClick,
containerClassName: 'p-treetable-toggler p-link',
iconClassName: 'p-treetable-toggler-icon',
element: content,
props: props,
expanded: expanded,
buttonStyle: {
marginLeft: props.level * 16 + 'px',
visibility: props.node.leaf === false || props.node.children && props.node.children.length ? 'visible' : 'hidden'
}
};
content = ObjectUtils.getJSXElement(props.togglerTemplate, props.node, defaultContentOptions);
}
return content;
};
var createCheckbox = function createCheckbox(column) {
if (props.selectionMode === 'checkbox' && props.node.selectable !== false) {
var checked = isChecked();
var partialChecked = isPartialChecked();
var checkboxIconProps = mergeProps({
className: cx('checkIcon')
}, getColumnPTOptions(column, 'rowCheckbox.icon'));
var icon = checked ? props.checkboxIcon || /*#__PURE__*/React.createElement(CheckIcon, checkboxIconProps) : partialChecked ? props.checkboxIcon || /*#__PURE__*/React.createElement(MinusIcon, null) : null;
var checkIcon = IconUtils.getJSXIcon(icon, {}, {
props: props,
checked: checked,
partialChecked: partialChecked
});
var rowCheckboxProps = mergeProps({
className: cx('rowCheckbox'),
checked: checked || partialChecked,
onChange: onCheckboxChange,
icon: checkIcon,
unstyled: isUnstyled === null || isUnstyled === void 0 ? void 0 : isUnstyled(),
tabIndex: -1,
'data-p-highlight': checked,
'data-p-checked': checked,
'data-p-partialchecked': partialChecked
}, getColumnCheckboxPTOptions(column, 'rowCheckbox'));
return /*#__PURE__*/React.createElement(Checkbox, rowCheckboxProps);
}
return null;
};
var createCell = function createCell(column, index) {
var toggler;
var checkbox;
if (getColumnProp(column, 'hidden')) {
return null;
}
if (getColumnProp(column, 'expander')) {
toggler = createToggler(column);
checkbox = createCheckbox(column);
}
return /*#__PURE__*/React.createElement(TreeTableBodyCell, _extends({
hostName: props.hostName,
key: "".concat(getColumnProp(column, 'columnKey') || getColumnProp(column, 'field'), "_").concat(index)
}, ColumnBase.getCProps(column), {
index: index,
column: column,
selectOnEdit: props.selectOnEdit,
selected: isSelected(),
node: props.node,
rowData: props.node && props.node.data,
rowIndex: props.rowIndex,
ptCallbacks: props.ptCallbacks,
metaData: props.metaData
}), toggler, checkbox);
};
var createChildren = function createChildren() {
if (expanded && props.node.children) {
return props.node.children.map(function (childNode, index) {
return /*#__PURE__*/React.createElement(TreeTableRow, {
hostName: props.hostName,
key: "".concat(childNode.key || JSON.stringify(childNode.data), "_").concat(index),
level: props.level + 1,
rowIndex: props.rowIndex + '_' + index,
node: childNode,
originalOptions: props.originalOptions,
checkboxIcon: props.checkboxIcon,
columns: props.columns,
expandedKeys: props.expandedKeys,
selectOnEdit: props.selectOnEdit,
onToggle: props.onToggle,
togglerTemplate: props.togglerTemplate,
onExpand: props.onExpand,
onCollapse: props.onCollapse,
selectionMode: props.selectionMode,
selectionKeys: props.selectionKeys,
onSelectionChange: props.onSelectionChange,
metaKeySelection: props.metaKeySelection,
onRowClick: props.onRowClick,
onRowMouseEnter: props.onRowMouseEnter,
onRowMouseLeave: props.onRowMouseLeave,
onSelect: props.onSelect,
onUnselect: props.onUnselect,
propagateSelectionUp: props.propagateSelectionUp,
propagateSelectionDown: props.propagateSelectionDown,
onPropagateUp: propagateUp,
rowClassName: props.rowClassName,
contextMenuSelectionKey: props.contextMenuSelectionKey,
onContextMenuSelectionChange: props.onContextMenuSelectionChange,
onContextMenu: props.onContextMenu,
ptCallbacks: props.ptCallbacks,
metaData: props.metaData
});
});
}
return null;
};
var cells = props.columns.map(createCell);
var children = createChildren();
var rowClassName = null;
if (props.rowClassName) {
rowClassName = props.rowClassName(props.node);
}
var rowProps = mergeProps({
tabIndex: 0,
className: classNames(cx('row', {
isSelected: isSelected,
rowProps: props
})),
'aria-expanded': expanded,
'aria-level': props.level + 1,
'aria-posinset': props.ariaPosInSet,
'aria-setsize': props.ariaSetSize,
'aria-checked': isChecked(),
'aria-selected': isSelected(),
style: props.node.style,
onClick: function onClick(e) {
return _onClick(e);
},
onTouchEnd: function onTouchEnd(e) {
return _onTouchEnd();
},
onContextMenu: function onContextMenu(e) {
return onRightClick(e);
},
onKeyDown: function onKeyDown(e) {
return _onKeyDown(e);
},
onMouseEnter: function onMouseEnter(e) {
return _onMouseEnter(e);
},
onMouseLeave: function onMouseLeave(e) {
return _onMouseLeave(e);
},
'data-p-highlight': isSelected()
}, getRowPTOptions('row'), {
className: classNames(rowClassName, props.node.className) // #5983 must be last so all unstyled merging takes place first
});
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", _extends({
ref: elementRef
}, rowProps), cells), children);
});
TreeTableRow.displayName = 'TreeTableRow';
function _createForOfIteratorHelper$2(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$2(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray$2(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$2(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$2(r, a) : void 0; } }
function _arrayLikeToArray$2(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 ownKeys$4(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$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var TreeTableBody = /*#__PURE__*/React.memo(function (props) {
var mergeProps = useMergeProps();
var isSingleSelectionMode = props.selectionMode === 'single';
var isMultipleSelectionMode = props.selectionMode === 'multiple';
var _props$ptCallbacks = props.ptCallbacks,
ptm = _props$ptCallbacks.ptm,
cx = _props$ptCallbacks.cx;
var getPTOptions = function getPTOptions(key, options) {
return ptm(key, _objectSpread$4({
hostName: props.hostName
}, options));
};
var _flattenizeTree = function flattenizeTree(nodes) {
var rows = [];
nodes = nodes || props.value;
var _iterator = _createForOfIteratorHelper$2(nodes),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var node = _step.value;
rows.push(node.key);
if (isExpandedKey(node.key)) {
rows = rows.concat(_flattenizeTree(node.children));
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return rows;
};
var isExpandedKey = function isExpandedKey(key) {
return props.expandedKeys && !!props.expandedKeys[key];
};
var onRowClick = function onRowClick(event, node) {
if (props.onRowClick) {
props.onRowClick({
originalEvent: event,
node: node
});
}
var targetNode = event.target.nodeName;
if (targetNode === 'INPUT' || targetNode === 'BUTTON' || targetNode === 'A' || DomHandler.getAttribute(event.target, 'data-pc-section') === 'columnresizer') {
return;
}
if ((isSingleSelectionMode || isMultipleSelectionMode) && node.selectable !== false) {
var selectionKeys;
var selected = isSelected(node);
var metaSelection = props.metaKeySelection;
var flatKeys = _flattenizeTree();
var rowIndex = flatKeys.findIndex(function (key) {
return key === node.key;
});
if (isMultipleSelectionMode && event.shiftKey) {
DomHandler.clearSelection();
// find first selected row
var anchorRowIndex = flatKeys.findIndex(function (key) {
return props.selectionKeys[key];
});
var rangeStart = Math.min(rowIndex, anchorRowIndex);
var rangeEnd = Math.max(rowIndex, anchorRowIndex);
selectionKeys = _objectSpread$4({}, props.selectionKeys);
for (var i = rangeStart; i <= rangeEnd; i++) {
var rowKey = flatKeys[i];
selectionKeys[rowKey] = true;
}
} else {
//anchorRowIndex = rowIndex;
if (metaSelection) {
var metaKey = event.metaKey || event.ctrlKey;
if (selected && metaKey) {
if (isSingleSelectionMode) {
selectionKeys = null;
} else {
selectionKeys = _objectSpread$4({}, props.selectionKeys);
delete selectionKeys[node.key];
}
if (props.onUnselect) {
props.onUnselect({
originalEvent: event,
node: node
});
}
} else {
if (isSingleSelectionMode) {
selectionKeys = node.key;
} else if (isMultipleSelectionMode) {
selectionKeys = !metaKey ? {} : props.selectionKeys ? _objectSpread$4({}, props.selectionKeys) : {};
selectionKeys[node.key] = true;
}
if (props.onSelect) {
props.onSelect({
originalEvent: event,
node: node
});
}
}
} else if (isSingleSelectionMode) {
if (selected) {
selectionKeys = null;
if (props.onUnselect) {
props.onUnselect({
originalEvent: event,
node: node
});
}
} else {
selectionKeys = node.key;
if (props.onSelect) {
props.onSelect({
originalEvent: event,
node: node
});
}
}
} else if (selected) {
selectionKeys = _objectSpread$4({}, props.selectionKeys);
delete selectionKeys[node.key];
if (props.onUnselect) {
props.onUnselect({
originalEvent: event,
node: node
});
}
} else {
selectionKeys = props.selectionKeys ? _objectSpread$4({}, props.selectionKeys) : {};
selectionKeys[node.key] = true;
if (props.onSelect) {
props.onSelect({
originalEvent: event,
node: node
});
}
}
}
if (props.onSelectionChange) {
props.onSelectionChange({
originalEvent: event,
value: selectionKeys
});
}
}
};
var isSelected = function isSelected(node) {
if ((isSingleSelectionMode || isMultipleSelectionMode) && props.selectionKeys) {
return isSingleSelectionMode ? props.selectionKeys === node.key : props.selectionKeys[node.key] !== undefined;
}
return false;
};
var createRow = function createRow(node, index) {
return /*#__PURE__*/React.createElement(TreeTableRow, {
hostName: props.hostName,
key: "".concat(node.key || JSON.stringify(node.data), "_").concat(index),
level: 0,
rowIndex: index,
ariaSetSize: props.value.length,
ariaPosInSet: index + 1,
selectOnEdit: props.selectOnEdit,
node: node,
originalOptions: props.originalOptions,
checkboxIcon: props.checkboxIcon,
columns: props.columns,
expandedKeys: props.expandedKeys,
onToggle: props.onToggle,
togglerTemplate: props.togglerTemplate,
onExpand: props.onExpand,
onCollapse: props.onCollapse,
selectionMode: props.selectionMode,
selectionKeys: props.selectionKeys,
onSelectionChange: props.onSelectionChange,
metaKeySelection: props.metaKeySelection,
onRowClick: onRowClick,
onRowMouseEnter: props.onRowMouseEnter,
onRowMouseLeave: props.onRowMouseLeave,
onSelect: props.onSelect,
onUnselect: props.onUnselect,
propagateSelectionUp: props.propagateSelectionUp,
propagateSelectionDown: props.propagateSelectionDown,
rowClassName: props.rowClassName,
contextMenuSelectionKey: props.contextMenuSelectionKey,
onContextMenuSelectionChange: props.onContextMenuSelectionChange,
onContextMenu: props.onContextMenu,
ptCallbacks: props.ptCallbacks,
metaData: props.metaData
});
};
var createRows = function createRows() {
if (props.paginator && !props.lazy) {
var rpp = props.rows || 0;
var startIndex = props.first || 0;
var endIndex = startIndex + rpp;
var rows = [];
for (var i = startIndex; i < endIndex; i++) {
var rowData = props.value[i];
if (rowData) {
rows.push(createRow(props.value[i]));
} else {
break;
}
}
return rows;
}
return props.value.map(createRow);
};
var createEmptyMessage = function createEmptyMessage() {
if (props.loading) {
return null;
}
var colSpan = props.columns ? props.columns.length : null;
var content = ObjectUtils.getJSXElement(props.emptyMessage, {
props: props.tableProps
}) || localeOption('emptyMessage');
var emptyMessageProps = mergeProps({
className: cx('emptyMessage')
}, getPTOptions('emptyMessage'));
var emptyMessageCellProps = mergeProps({
colSpan: colSpan
}, getPTOptions('emptyMessageCell'));
return /*#__PURE__*/React.createElement("tr", emptyMessageProps, /*#__PURE__*/React.createElement("td", emptyMessageCellProps, content));
};
var content = props.value && props.value.length ? createRows() : createEmptyMessage();
var tbodyProps = mergeProps({
role: 'rowgroup',
className: cx('tbody')
}, getPTOptions('tbody'));
return /*#__PURE__*/React.createElement("tbody", tbodyProps, content);
});
TreeTableBody.displayName = 'TreeTableBody';
var TreeTableFooter = /*#__PURE__*/React.memo(function (props) {
var mergeProps = useMergeProps();
var _props$ptCallbacks = props.ptCallbacks,
ptm = _props$ptCallbacks.ptm,
ptmo = _props$ptCallbacks.ptmo,
cx = _props$ptCallbacks.cx;
var context = React.useContext(PrimeReactContext);
var getColumnProp = function getColumnProp(column, name) {
return ColumnBase.getCProp(column, name);
};
var getColumnProps = function getColumnProps(column) {
return ColumnBase.getCProps(column);
};
var getColumnPTOptions = function getColumnPTOptions(column, key) {
var cProps = getColumnProps(column);
var columnMetadata = {
props: cProps,
parent: props.metaData,
hostName: props.hostName
};
return mergeProps(ptm("column.".concat(key), {
column: columnMetadata
}), ptm("column.".concat(key), columnMetadata), ptmo(cProps, key, columnMetadata));
};
var createFooterCell = function createFooterCell(column, index) {
var footerCellProps = mergeProps({
key: column.field || index,
className: getColumnProp(column, 'footerClassName') || getColumnProp(column, 'className'),
style: getColumnProp(column, 'footerStyle') || getColumnProp(column, 'style'),
rowSpan: getColumnProp(column, 'rowSpan'),
colSpan: getColumnProp(column, 'colSpan')
}, getColumnPTOptions(column, 'footerCell'));
var content = ObjectUtils.getJSXElement(getColumnProp(column, 'footer'), {
props: getColumnProps(column)
});
return /*#__PURE__*/React.createElement("td", footerCellProps, content);
};
var createFooterRow = function createFooterRow(row, index) {
var rowColumns = React.Children.toArray(RowBase.getCProp(row, 'children'));
var rowFooterCells = rowColumns.map(createFooterCell);
var footerRowProps = mergeProps(ptm('footerRow', {
hostName: props.hostName,
role: 'row'
}), RowBase.getProps(row.props, context));
return /*#__PURE__*/React.createElement("tr", _extends({}, footerRowProps, {
key: index
}), rowFooterCells);
};
var createColumnGroup = function createColumnGroup() {
var rows = React.Children.toArray(ColumnGroupBase.getCProp(props.columnGroup, 'children'));
return rows.map(createFooterRow);
};
var createColumns = function createColumns(columns) {
if (columns) {
var headerCells = columns.map(createFooterCell);
var footerRowProps = mergeProps(ptm('footerRow', {
hostName: props.hostName
}));
return /*#__PURE__*/React.createElement("tr", footerRowProps, headerCells);
}
return null;
};
var hasFooter = function hasFooter() {
return props.columnGroup ? true : props.columns ? props.columns.some(function (col) {
return col && getColumnProp(col, 'footer');
}) : false;
};
var content = props.columnGroup ? createColumnGroup() : createColumns(props.columns);
if (hasFooter()) {
var tfootProps = mergeProps({
role: 'rowgroup',
className: cx('tfoot')
}, ptm('tfoot', {
hostName: props.hostName
}));
return /*#__PURE__*/React.createElement("tfoot", tfootProps, content);
}
return null;
});
TreeTableFooter.displayName = 'TreeTableFooter';
function _createForOfIteratorHelper$1(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$1(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray$1(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$1(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$1(r, a) : void 0; } }
function _arrayLikeToArray$1(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 ownKeys$3(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$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
var mergeProps = useMergeProps();
var _props$ptCallbacks = props.ptCallbacks,
ptm = _props$ptCallbacks.ptm,
ptmo = _props$ptCallbacks.ptmo,
cx = _props$ptCallbacks.cx;
var filterTimeout = React.useRef(null);
var context = React.useContext(PrimeReactContext);
var getColumnProp = function getColumnProp(column) {
return column ? typeof (arguments.length <= 1 ? undefined : arguments[1]) === 'string' ? ColumnBase.getCProp(column, arguments.length <= 1 ? undefined : arguments[1]) : ColumnBase.getCProp((arguments.length <= 1 ? undefined : arguments[1]) || column, arguments.length <= 2 ? undefined : arguments[2]) : null;
};
var getColumnProps = function getColumnProps(column) {
return ColumnBase.getCProps(column);
};
var getColumnPTOptions = function getColumnPTOptions(column, key, params) {
var cProps = getColumnProps(column);
var columnMetadata = _objectSpread$3({
props: cProps,
parent: props.metaData,
hostName: props.hostName
}, params);
return mergeProps(ptm("column.".concat(key), {
column: columnMetadata
}), ptm("column.".concat(key), columnMetadata), ptmo(cProps, key, columnMetadata));
};
var onHeaderClick = function onHeaderClick(event, column) {
if (getColumnProp(column, 'sortable')) {
var targetNode = event.target;
if (DomHandler.getAttribute(targetNode, 'data-p-sortable-column') === true || DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headertitle' || DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sorticon' || DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sorticon' || targetNode.closest('[data-p-sortable-column="true"]') && !targetNode.closest('[data-pc-section="filtermenubutton"]')) {
props.onSort({
originalEvent: event,
sortField: getColumnProp(column, 'sortField') || getColumnProp(column, 'field'),
sortFunction: getColumnProp(column, 'sortFunction'),
sortable: getColumnProp(column, 'sortable')
});
DomHandler.clearSelection();
}
}
};
var onHeaderMouseDown = function onHeaderMouseDown(event, column) {
if (props.reorderableColumns && getColumnProp(column, 'reorderable')) {
if (event.target.nodeName !== 'INPUT') {
event.currentTarget.draggable = true;
} else if (event.target.nodeName === 'INPUT') {
event.currentTarget.draggable = false;
}
}
};
var onHeaderKeyDown = function onHeaderKeyDown(event, column) {
if (event.key === 'Enter' || event.code === 'Space') {
onHeaderClick(event, column);
event.preventDefault();
}
};
var getMultiSortMetaDataIndex = function getMultiSortMetaDataIndex(column) {
if (props.multiSortMeta) {
for (var i = 0; i < props.multiSortMeta.length; i++) {
if (props.multiSortMeta[i].field === getColumnProp(column, 'field')) {
return i;
}
}
}
return -1;
};
var onResizerMouseDown = function onResizerMouseDown(event, column) {
if (props.resizableColumns && props.onResizeStart) {
props.onResizeStart({
originalEvent: event,
columnEl: event.target.parentElement,
column: column
});
}
};
var _onDragStart = function onDragStart(event, column) {
if (props.onDragStart) {
props.onDragStart({
originalEvent: event,
column: column
});
}
};
var _onDragOver = function onDragOver(event, column) {
if (props.onDragOver) {
props.onDragOver({
originalEvent: event,
column: column
});
}
};
var _onDragLeave = function onDragLeave(event, column) {
if (props.onDragLeave) {
props.onDragLeave({
originalEvent: event,
column: column
});
}
};
var _onDrop = function onDrop(event, column) {
if (props.onDrop) {
props.onDrop({
originalEvent: event,
column: column
});
}
};
var onFilterInput = function onFilterInput(e, column) {
if (getColumnProp(column, 'filter') && props.onFilter) {
if (filterTimeout.current) {
clearTimeout(filterTimeout.current);
}
var filterValue = e.target.value;
filterTimeout.current = setTimeout(function () {
props.onFilter({
value: filterValue,
field: getColumnProp(column, 'field'),
matchMode: getColumnProp(column, 'filterMatchMode') || 'startsWith'
});
filterTimeout.current = null;
}, props.filterDelay);
}
};
var hasColumnFilter = function hasColumnFilter(columns) {
if (columns) {
var _iterator = _createForOfIteratorHelper$1(columns),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var col = _step.value;
if (getColumnProp(col, 'filter')) {
return true;
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
}
return false;
};
var getAriaSort = function getAriaSort(column, sorted, sortOrder) {
if (getColumnProp(column, 'sortable')) {
if (sorted && sortOrder < 0) {
return 'descending';
} else if (sorted && sortOrder > 0) {
return 'ascending';
}
return 'none';
}
return null;
};
var createSortIcon = function createSortIcon(column, sorted, sortOrder) {
if (getColumnProp(column, 'sortable')) {
var sortIconProps = mergeProps({
className: cx('sortIcon')
}, getColumnPTOptions(column, 'sortIcon', {
context: {
sorted: sorted
}
}));
var icon = sorted ? sortOrder < 0 ? /*#__PURE__*/React.createElement(SortAmountDownIcon, sortIconProps) : /*#__PURE__*/React.createElement(SortAmountUpAltIcon, sortIconProps) : /*#__PURE__*/React.createElement(SortAltIcon, sortIconProps);
var sortIcon = IconUtils.getJSXIcon(props.sortIcon || icon, _objectSpread$3({}, sortIconProps), {
props: props,
sorted: sorted,
sortOrder: sortOrder
});
return sortIcon;
}
return null;
};
var createResizer = function createResizer(column) {
if (props.resizableColumns) {
var columnResizerProps = mergeProps({
className: cx('columnResizer'),
onMouseDown: function onMouseDown(e) {
return onResizerMouseDown(e, column);
}
}, getColumnPTOptions(column, 'columnResizer'));
return /*#__PURE__*/React.createElement("span", columnResizerProps);
}
return null;
};
var createSortBadge = function createSortBadge(column, sortMetaDataIndex) {
if (sortMetaDataIndex !== -1 && props.multiSortMeta && props.multiSortMeta.length > 1) {
var sortBadgeProps = mergeProps({
className: cx('sortBadge')
}, getColumnPTOptions(column, 'sortBadge'));
return /*#__PURE__*/React.createElement("span", sortBadgeProps, sortMetaDataIndex + 1);
}
return null;
};
var createTitle = function createTitle(column, options) {
var title = ObjectUtils.getJSXElement(getColumnProp(column, 'header'), {
props: options
});
var headerTitleProps = mergeProps({
className: cx('headerTitle')
}, getColumnPTOptions(column, 'headerTitle'));
return /*#__PURE__*/React.createElement("span", headerTitleProps, title);
};
var createHeaderCell = function createHeaderCell(column, options) {
var filterElement;
if (getColumnProp(column, 'hidden')) {
return null;
}
if (getColumnProp(column, 'filter') && options.renderFilter) {
filterElement = getColumnProp(column, 'filterElement') || /*#__PURE__*/React.createElement(InputText, {
onInput: function onInput(e) {
return onFilterInput(e, column);
},
type: props.filterType,
defaultValue: props.filters && props.filters[getColumnProp(column, 'field')] ? props.filters[getColumnProp(column, 'field')].value : null,
className: "p-column-filter",
placeholder: getColumnProp(column, 'filterPlaceholder'),
maxLength: getColumnProp(column, 'filterMaxLength'),
pt: getColumnPTOptions(column, 'filterInput'),
unstyled: props.unstyled,
__parentMetadata: {
parent: props.metaData
}
});
}
if (options.filterOnly) {
var _frozen = getColumnProp(column, 'frozen');
var _headerCellProps = mergeProps({
role: 'columnheader',
key: getColumnProp(column, 'columnKey') || getColumnProp(column, 'field') || options.index,
className: classNames(cx('headerCell', {
options: options,
frozen: _frozen
}), getColumnProp(column, 'filterHeaderClassName')),
style: getColumnProp(column, 'filterHeaderStyle') || getColumnProp(column, 'style'),
rowSpan: getColumnProp(column, 'rowSpan'),
colSpan: getColumnProp(column, 'colSpan'),
'data-p-sortable-column': getColumnProp(column, 'sortable'),
'data-p-resizable-column': props.resizableColumns,
'data-p-frozen-column': _frozen
}, getColumnPTOptions(column, 'root'), getColumnPTOptions(column, 'headerCell', {
context: {
frozen: _frozen
}
}));
return /*#__PURE__*/React.createElement("th", _headerCellProps, filterElement);
}
var headerCellRef = /*#__PURE__*/React.createRef(null);
var sortMetaDataIndex = getMultiSortMetaDataIndex(column);
var multiSortMetaData = sortMetaDataIndex !== -1 ? props.multiSortMeta[sortMetaDataIndex] : null;
var singleSorted = getColumnProp(column, 'field') === props.sortField;
var multipleSorted = multiSortMetaData !== null;
var sorted = getColumnProp(column, 'sortable') && (singleSorted || multipleSorted);
var frozen = getColumnProp(column, 'frozen');
var align = getColumnProp(column, 'alignHeader');
var sortOrder = 0;
if (singleSorted) {
sortOrder = props.sortOrder;
} else if (multipleSorted) {
sortOrder = multiSortMetaData.order;
}
var sortIconElement = createSortIcon(column, sorted, sortOrder);
var ariaSortData = getAriaSort(column, sorted, sortOrder);
var sortBadge = createSortBadge(column, sortMetaDataIndex);
var ariaSort = sorted ? sortOrder ? sortOrder < 0 ? 'descending' : 'ascending' : 'none' : null;
var headerTooltip = getColumnProp(column, 'headerTooltip');
var hasTooltip = ObjectUtils.isNotEmpty(headerTooltip);
var title = createTitle(column, options);
var resizer = createResizer(column);
var sortable = getColumnProp(column, 'sortable');
var headerCellProps = mergeProps(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
role: 'columnheader',
className: classNames(getColumnProp(column, 'headerClassName') || getColumnProp(column, 'className'), cx('headerCell', {
headerProps: props,
frozen: frozen,
column: column,
options: options,
getColumnProp: getColumnProp,
sorted: sorted,
align: align
})),
style: getColumnProp(column, 'headerStyle') || getColumnProp(column, 'style'),
tabIndex: sortable ? props.tabIndex : null,
'aria-sort': ariaSort,
//TODO: aria-sort is defined here two times (ariaSort, ariaSortData) ?
onClick: function onClick(e) {
return onHeaderClick(e, column);
},
onMouseDown: function onMouseDown(e) {
return onHeaderMouseDown(e, column);
},
onKeyDown: function onKeyDown(e) {
return onHeaderKeyDown(e, column);
},
rowSpan: getColumnProp(column, 'rowSpan'),
colSpan: getColumnProp(column, 'colSpan')
}, "aria-sort", ariaSortData), "onDragStart", function onDragStart(e) {
return _onDragStart(e, column);
}), "onDragOver", function onDragOver(e) {
return _onDragOver(e, column);
}), "onDragLeave", function onDragLeave(e) {
return _onDragLeave(e, column);
}), "onDrop", function onDrop(e) {
return _onDrop(e, column);
}), 'data-p-sortable-column', sortable), 'data-p-resizable-column', props.resizableColumns), 'data-p-highlight', sorted), 'data-p-frozen-column', getColumnProp(column, 'frozen')), getColumnPTOptions(column, 'root'), getColumnPTOptions(column, 'headerCell', {
context: {
sorted: sorted,
frozen: frozen,
resizable: props.resizableColumns
}
}));
var headerContentProps = mergeProps({
className: cx('headerContent')
}, getColumnPTOptions(column, 'headerContent'));
var header = /*#__PURE__*/React.createElement("div", headerContentProps, title, sortIconElement, sortBadge, filterElement);
return /*#__PURE__*/React.createElement(React.Fragment, {
key: column.columnKey || column.field || options.index
}, /*#__PURE__*/React.createElement("th", _extends({
ref: headerCellRef
}, headerCellProps), resizer, header), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: headerCellRef,
content: headerTooltip
}, getColumnProp(column, 'headerTooltipOptions'), {
unstyled: props.unstyled
})));
};
var createHeaderRow = function createHeaderRow(row, index) {
var rowColumns = React.Children.toArray(RowBase.getCProp(row, 'children'));
var rowHeaderCells = rowColumns.map(function (col, i) {
return createHeaderCell(col, {
index: i,
filterOnly: false,
renderFilter: true
});
});
var headerRowProps = mergeProps(ptm('headerRow', {
hostName: props.hostName
}), RowBase.getProps(row.props, context));
return /*#__PURE__*/React.createElement("tr", _extends({
role: "row"
}, headerRowProps, {
key: index
}), rowHeaderCells);
};
var createColumnGroup = function createColumnGroup() {
var rows = React.Children.toArray(ColumnGroupBase.getCProp(props.columnGroup, 'children'));
return rows.map(createHeaderRow);
};
var createColumns = function createColumns(columns) {
if (columns) {
var headerRowProps = mergeProps(ptm('headerRow', {
hostName: props.hostName,
role: 'row'
}));
if (hasColumnFilter(columns)) {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", headerRowProps, columns.map(function (col, i) {
return createHeaderCell(col, {
index: i,
filterOnly: false,
renderFilter: false
});
})), /*#__PURE__*/React.createElement("tr", headerRowProps, columns.map(function (col, i) {
return createHeaderCell(col, {
index: i,
filterOnly: true,
renderFilter: true
});
})));
}
return /*#__PURE__*/React.createElement("tr", _extends({
role: "row"
}, headerRowProps), columns.map(function (col, i) {
return createHeaderCell(col, {
index: i,
filterOnly: false,
renderFilter: false
});
}));
}
return null;
};
var content = props.columnGroup ? createColumnGroup() : createColumns(props.columns);
var theadProps = mergeProps({
role: 'rowgroup',
className: cx('thead')
}, ptm('thead', {
hostName: props.hostName
}));
return /*#__PURE__*/React.createElement("thead", theadProps, content);
});
TreeTableHeader.displayName = 'TreeTableHeader';
function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var TreeTableScrollableView = /*#__PURE__*/React.memo(function (props) {
var elementRef = React.useRef(null);
var scrollHeaderRef = React.useRef(null);
var scrollHeaderBoxRef = React.useRef(null);
var scrollBodyRef = React.useRef(null);
var scrollTableRef = React.useRef(null);
var scrollFooterRef = React.useRef(null);
var scrollFooterBoxRef = React.useRef(null);
var mergeProps = useMergeProps();
var _props$ptCallbacks = props.ptCallbacks,
ptm = _props$ptCallbacks.ptm,
cx = _props$ptCallbacks.cx,
sx = _props$ptCallbacks.sx;
var getPTOptions = function getPTOptions(key, options) {
return ptm(key, _objectSpread$2({
hostName: props.hostName
}, options));
};
var setScrollHeight = function setScrollHeight() {
if (props.scrollHeight) {
if (props.scrollHeight.indexOf('%') !== -1) {
var datatableContainer = findDataTableContainer(elementRef.current);
scrollBodyRef.current.style.visibility = 'hidden';
scrollBodyRef.current.style.height = '100px'; //temporary height to calculate static height
var containerHeight = DomHandler.getOuterHeight(datatableContainer);
var relativeHeight = DomHandler.getOuterHeight(datatableContainer.parentElement) * parseInt(props.scrollHeight, 10) / 100;
var staticHeight = containerHeight - 100; //total height of headers, footers, paginators
var scrollBodyHeight = relativeHeight - staticHeight;
scrollBodyRef.current.style.height = 'auto';
scrollBodyRef.current.style.maxHeight = scrollBodyHeight + 'px';
scrollBodyRef.current.style.visibility = 'visible';
} else {
scrollBodyRef.current.style.maxHeight = props.scrollHeight;
}
}
};
var findDataTableContainer = function findDataTableContainer(element) {
if (element) {
var el = element;
while (el && !(DomHandler.getAttribute(el, 'data-pc-section') === 'root' || DomHandler.getAttribute(el, 'data-pc-name') === 'treetable')) {
el = el.parentElement;
}
return el;
}
return null;
};
var onHeaderScroll = function onHeaderScroll() {
scrollHeaderRef.current.scrollLeft = 0;
};
var onBodyScroll = function onBodyScroll() {
var frozenView = elementRef.current.previousElementSibling;
var frozenScrollBody;
if (frozenView) {
frozenScrollBody = DomHandler.findSingle(frozenView, '[data-pc-section="scrollablebody"]');
}
scrollHeaderBoxRef.current.style.transform = "translateX(-".concat(scrollBodyRef.current.scrollLeft, "px)");
if (scrollFooterBoxRef.current) {
scrollFooterBoxRef.current.style.transform = "translateX(-".concat(scrollBodyRef.current.scrollLeft, "px)");
}
if (frozenScrollBody) {
frozenScrollBody.scrollTop = scrollBodyRef.current.scrollTop;
}
};
useMountEffect(function () {
var el = DomHandler.find(findDataTableContainer(elementRef.current), '[data-pc-section="scrollablebody"]');
el = el.length > 1 ? el[1] : el[0];
var scrollBarWidth = DomHandler.calculateScrollbarWidth(el);
if (!props.frozen) {
var _scrollBarWidth = DomHandler.calculateScrollbarWidth();
scrollHeaderBoxRef.current.style.marginRight = _scrollBarWidth + 'px';
if (scrollFooterBoxRef.current) {
scrollFooterBoxRef.current.style.marginRight = _scrollBarWidth + 'px';
}
} else {
scrollBodyRef.current.style.paddingBottom = scrollBarWidth + 'px';
}
});
React.useEffect(function () {
setScrollHeight();
});
var createColGroup = function createColGroup() {
if (ObjectUtils.isNotEmpty(props.columns)) {
var cols = props.columns.map(function (col, i) {
return /*#__PURE__*/React.createElement("col", {
key: col.field + '_' + i
});
});
var scrollableColgroupProps = mergeProps({
className: cx('scrollableColgroup')
}, getPTOptions('scrollableColgroup'));
return /*#__PURE__*/React.createElement("colgroup", scrollableColgroupProps, cols);
}
return null;
};
var width = props.frozen ? props.frozenWidth : 'calc(100% - ' + props.frozenWidth + ')';
var left = props.frozen ? null : props.frozenWidth;
var colGroup = createColGroup();
var scrollableProps = mergeProps({
className: cx('scrollable', {
scrolaableProps: props
}),
style: {
width: width,
left: left
}
}, getPTOptions('scrollable'));
var scrollableHeaderProps = mergeProps({
className: cx('scrollableHeader'),
onScroll: function onScroll(e) {
return onHeaderScroll();
}
}, getPTOptions('scrollableHeader'));
var scrollableHeaderBoxProps = mergeProps({
className: cx('scrollableHeaderBox')
}, getPTOptions('scrollableHeaderBox'));
var scrollableHeaderTableProps = mergeProps({
className: cx('scrollableHeaderTable')
}, getPTOptions('scrollableHeaderTable'));
var scrollableBodyProps = mergeProps({
className: cx('scrollableBody'),
style: !props.frozen && props.scrollHeight ? {
overflowY: 'scroll'
} : undefined,
onScroll: function onScroll(e) {
return onBodyScroll();
}
}, getPTOptions('scrollableBody'));
var scrollableBodyTableProps = mergeProps({
style: {
top: '0'
},
className: cx('scrollableBodyTable')
}, getPTOptions('scrollableBodyTable'));
var scrollableFooterProps = mergeProps({
className: cx('scrollableFooter')
}, getPTOptions('scrollableFooter'));
var scrollableFooterBoxProps = mergeProps({
className: sx('scrollableFooterBox')
}, getPTOptions('scrollableFooterBox'));
var scrollableFooterTableProps = mergeProps({
className: cx('scrollableFooterTable')
}, getPTOptions('scrollableFooterTable'));
return /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef
}, scrollableProps), /*#__PURE__*/React.createElement("div", _extends({
ref: scrollHeaderRef
}, scrollableHeaderProps), /*#__PURE__*/React.createElement("div", _extends({
ref: scrollHeaderBoxRef
}, scrollableHeaderBoxProps), /*#__PURE__*/React.createElement("table", scrollableHeaderTableProps, colGroup, props.header))), /*#__PURE__*/React.createElement("div", _extends({
ref: scrollBodyRef
}, scrollableBodyProps), /*#__PURE__*/React.createElement("table", _extends({
ref: scrollTableRef
}, scrollableBodyTableProps), colGroup, props.body)), /*#__PURE__*/React.createElement("div", _extends({
ref: scrollFooterRef
}, scrollableFooterProps), /*#__PURE__*/React.createElement("div", _extends({
ref: scrollFooterBoxRef
}, scrollableFooterBoxProps), /*#__PURE__*/React.createElement("table", scrollableFooterTableProps, colGroup, props.footer))));
});
TreeTableScrollableView.displayName = 'TreeTableScrollableView';
function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
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; }
var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = TreeTableBase.getProps(inProps, context);
var _React$useState = React.useState(props.expandedKeys),
_React$useState2 = _slicedToArray(_React$useState, 2),
expandedKeysState = _React$useState2[0],
setExpandedKeysState = _React$useState2[1];
var _React$useState3 = React.useState(props.first),
_React$useState4 = _slicedToArray(_React$useState3, 2),
firstState = _React$useState4[0],
setFirstState = _React$useState4[1];
var _React$useState5 = React.useState(props.rows),
_React$useState6 = _slicedToArray(_React$useState5, 2),
rowsState = _React$useState6[0],
setRowsState = _React$useState6[1];
var _React$useState7 = React.useState(props.sortField),
_React$useState8 = _slicedToArray(_React$useState7, 2),
sortFieldState = _React$useState8[0],
setSortFieldState = _React$useState8[1];
var _React$useState9 = React.useState(props.sortOrder),
_React$useState10 = _slicedToArray(_React$useState9, 2),
sortOrderState = _React$useState10[0],
setSortOrderState = _React$useState10[1];
var _React$useState11 = React.useState(props.multiSortMeta),
_React$useState12 = _slicedToArray(_React$useState11, 2),
multiSortMetaState = _React$useState12[0],
setMultiSortMetaState = _React$useState12[1];
var _React$useState13 = React.useState(props.filters),
_React$useState14 = _slicedToArray(_React$useState13, 2),
filtersState = _React$useState14[0],
setFiltersState = _React$useState14[1];
var _React$useState15 = React.useState([]),
_React$useState16 = _slicedToArray(_React$useState15, 2),
columnOrderState = _React$useState16[0],
setColumnOrderState = _React$useState16[1];
var metaData = {
props: props,
state: {
expandedKeys: expandedKeysState,
first: firstState,
rows: rowsState,
sortField: sortFieldState,
sortOrder: sortOrderState,
multiSortMeta: multiSortMetaState,
filters: filtersState,
columnOrder: columnOrderState
},
context: {
scrollable: props.scrollable
}
};
var ptCallbacks = TreeTableBase.setMetaData(metaData);
useHandleStyle(TreeTableBase.css.styles, ptCallbacks.isUnstyled, {
name: 'treetable'
});
var elementRef = React.useRef(null);
var tableRef = React.useRef(null);
var resizerHelperRef = React.useRef(null);
var reorderIndicatorUpRef = React.useRef(null);
var reorderIndicatorDownRef = React.useRef(null);
var columnResizing = React.useRef(null);
var resizeColumn = React.useRef(null);
var resizeColumnProps = React.useRef(null);
var lastResizerHelperX = React.useRef(0);
var iconWidth = React.useRef(0);
var iconHeight = React.useRef(0);
var draggedColumnEl = React.useRef(null);
var draggedColumn = React.useRef(null);
var dropPosition = React.useRef(null);
var columnSortable = React.useRef(null);
var columnSortFunction = React.useRef(null);
var columnField = React.useRef(null);
var childFocusEvent = React.useRef(null);
var _useEventListener = useEventListener({
type: 'mousemove',
listener: function listener(event) {
if (columnResizing.current) {
onColumnResize(event);
}
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentMouseMoveListener = _useEventListener2[0],
unbindDocumentMouseMoveListener = _useEventListener2[1];
var _useEventListener3 = useEventListener({
type: 'mouseup',
listener: function listener(event) {
if (columnResizing.current) {
columnResizing.current = false;
onColumnResizeEnd();
}
}
}),
_useEventListener4 = _slicedToArray(_useEventListener3, 2),
bindDocumentMouseUpListener = _useEventListener4[0],
unbindDocumentMouseUpListener = _useEventListener4[1];
var isCustomStateStorage = function isCustomStateStorage() {
return props.stateStorage === 'custom';
};
var isStateful = function isStateful() {
return props.stateKey != null || isCustomStateStorage();
};
var saveState = function saveState() {
var state = {};
if (props.paginator) {
state.first = getFirst();
state.rows = getRows();
}
var sortField = getSortField();
if (sortField) {
state.sortField = sortField;
state.sortOrder = getSortOrder();
}
var multiSortMeta = getMultiSortMeta();
if (multiSortMeta) {
state.multiSortMeta = multiSortMeta;
}
if (hasFilter()) {
state.filters = getFilters();
}
if (props.reorderableColumns) {
state.columnOrder = columnOrderState;
}
state.expandedKeysState = expandedKeysState;
if (props.selectionKeys && props.onSelectionChange) {
state.selectionKeys = props.selectionKeys;
}
if (isCustomStateStorage()) {
if (props.customSaveState) {
props.customSaveState(state);
}
} else {
var storage = getStorage(props.stateStorage);
if (ObjectUtils.isNotEmpty(state)) {
storage.setItem(props.stateKey, JSON.stringify(state));
}
}
if (props.onStateSave) {
props.onStateSave(state);
}
};
var clearState = function clearState() {
var storage = getStorage(props.stateStorage);
if (storage && props.stateKey) {
storage.removeItem(props.stateKey);
}
};
var restoreState = function restoreState() {
var restoredState = {};
if (isCustomStateStorage()) {
if (props.customRestoreState) {
restoredState = props.customRestoreState();
}
} else {
var storage = getStorage(props.stateStorage);
var stateString = storage.getItem(props.stateKey);
var dateFormat = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/;
var reviver = function reviver(key, value) {
return typeof value === 'string' && dateFormat.test(value) ? new Date(value) : value;
};
if (stateString) {
restoredState = JSON.parse(stateString, reviver);
}
}
_restoreState(restoredState);
};
var restoreTableState = function restoreTableState(restoredState) {
_restoreState(restoredState);
};
var _restoreState = function _restoreState() {
var restoredState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
if (ObjectUtils.isNotEmpty(restoredState)) {
if (props.paginator) {
if (props.onPage) {
var getOnPageParams = function getOnPageParams(first, rows) {
var totalRecords = getTotalRecords(processedData());
var pageCount = Math.ceil(totalRecords / rows) || 1;
var page = Math.floor(first / rows);
return {
first: first,
rows: rows,
page: page,
pageCount: pageCount
};
};
props.onPage(createEvent(getOnPageParams(restoredState.first, restoredState.rows)));
} else {
setFirstState(restoredState.first);
setRowsState(restoredState.rows);
}
}
if (restoredState.sortField) {
if (props.onSort) {
props.onSort(createEvent({
sortField: restoredState.sortField,
sortOrder: restoredState.sortOrder
}));
} else {
setSortFieldState(restoredState.sortField);
setSortOrderState(restoredState.sortOrder);
}
}
if (restoredState.multiSortMeta) {
if (props.onSort) {
props.onSort(createEvent({
multiSortMeta: restoredState.multiSortMeta
}));
} else {
setMultiSortMetaState(restoredState.multiSortMeta);
}
}
if (restoredState.filters) {
if (props.onFilter) {
props.onFilter(createEvent({
filters: restoredState.filters
}));
} else {
setFiltersState(cloneFilters(restoredState.filters));
}
}
if (props.reorderableColumns) {
setColumnOrderState(restoredState.columnOrder);
}
if (restoredState.expandedKeysState) {
if (props.onToggle) {
props.onRowToggle({
data: restoredState.expandedKeysState
});
} else {
setExpandedKeysState(restoredState.expandedKeysState);
}
}
if (restoredState.selectionKeys && props.onSelectionChange) {
props.onSelectionChange({
value: restoredState.selectionKeys
});
}
if (props.onStateRestore) {
props.onStateRestore(restoredState);
}
}
};
var onToggle = function onToggle(event) {
var originalEvent = event.originalEvent,
value = event.value,
navigateFocusToChild = event.navigateFocusToChild;
if (props.onToggle) {
props.onToggle({
originalEvent: originalEvent,
value: value
});
} else {
if (navigateFocusToChild) {
childFocusEvent.current = originalEvent;
}
setExpandedKeysState(value);
}
};
var onPageChange = function onPageChange(event) {
if (props.onPage) {
props.onPage(event);
} else {
setFirstState(event.first);
setRowsState(event.rows);
}
if (props.onValueChange) {
props.onValueChange(processedData());
}
};
var onSort = function onSort(event) {
var sortField = event.sortField;
var sortOrder = props.defaultSortOrder;
var multiSortMeta;
var eventMeta;
columnSortable.current = event.sortable;
columnSortFunction.current = event.sortFunction;
columnField.current = event.sortField;
if (props.sortMode === 'multiple') {
var metaKey = event.originalEvent.metaKey || event.originalEvent.ctrlKey;
multiSortMeta = _toConsumableArray(getMultiSortMeta());
if (multiSortMeta && multiSortMeta instanceof Array) {
var sortMeta = multiSortMeta.find(function (sortMeta) {
return sortMeta.field === sortField;
});
sortOrder = sortMeta ? getCalculatedSortOrder(sortMeta.order) : sortOrder;
}
var newMetaData = {
field: sortField,
order: sortOrder
};
if (sortOrder) {
if (!multiSortMeta || !metaKey) {
multiSortMeta = [];
}
addSortMeta(newMetaData, multiSortMeta);
} else if (props.removableSort && multiSortMeta) {
removeSortMeta(newMetaData, multiSortMeta);
}
eventMeta = {
multiSortMeta: multiSortMeta
};
} else {
sortOrder = getSortField() === sortField ? getCalculatedSortOrder(getSortOrder()) : sortOrder;
if (props.removableSort) {
sortField = sortOrder ? sortField : null;
}
eventMeta = {
sortField: sortField,
sortOrder: sortOrder
};
}
if (props.onSort) {
props.onSort(eventMeta);
} else {
setFirstState(0);
setSortFieldState(eventMeta.sortField);
setSortOrderState(eventMeta.sortOrder);
setMultiSortMetaState(eventMeta.multiSortMeta);
}
if (props.onValueChange) {
props.onValueChange(processedData({
sortField: sortField,
sortOrder: sortOrder,
multiSortMeta: multiSortMeta
}));
}
};
var getCalculatedSortOrder = function getCalculatedSortOrder(currentOrder) {
return props.removableSort ? props.defaultSortOrder === currentOrder ? currentOrder * -1 : 0 : currentOrder * -1;
};
var addSortMeta = function addSortMeta(meta, multiSortMeta) {
var index = -1;
for (var i = 0; i < multiSortMeta.length; i++) {
if (multiSortMeta[i].field === meta.field) {
index = i;
break;
}
}
if (index >= 0) {
multiSortMeta[index] = meta;
} else {
multiSortMeta.push(meta);
}
};
var removeSortMeta = function removeSortMeta(meta, multiSortMeta) {
var index = -1;
for (var i = 0; i < multiSortMeta.length; i++) {
if (multiSortMeta[i].field === meta.field) {
index = i;
break;
}
}
if (index >= 0) {
multiSortMeta.splice(index, 1);
}
multiSortMeta = multiSortMeta.length > 0 ? multiSortMeta : null;
};
var _sortSingle = function sortSingle(_ref) {
var data = _ref.data,
field = _ref.field,
order = _ref.order;
var value = _toConsumableArray(data);
if (columnSortable.current && columnSortFunction.current) {
value = columnSortFunction.current({
data: data,
field: field,
order: order
});
} else {
// performance optimization to prevent resolving field data in each loop
var lookupMap = new Map();
var comparator = ObjectUtils.localeComparator(context && context.locale || PrimeReact.locale);
var _iterator = _createForOfIteratorHelper(data),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var node = _step.value;
lookupMap.set(node.data, ObjectUtils.resolveFieldData(node.data, field));
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
value.sort(function (node1, node2) {
var value1 = lookupMap.get(node1.data);
var value2 = lookupMap.get(node2.data);
return compareValuesOnSort(value1, value2, comparator, order);
});
for (var i = 0; i < value.length; i++) {
if (value[i].children && value[i].children.length) {
value[i].children = _sortSingle({
data: value[i].children,
field: field,
order: order
});
}
}
}
return value;
};
var _sortMultiple = function sortMultiple(_ref2) {
var data = _ref2.data,
_ref2$multiSortMeta = _ref2.multiSortMeta,
multiSortMeta = _ref2$multiSortMeta === void 0 ? [] : _ref2$multiSortMeta;
var value = _toConsumableArray(data);
var comparator = ObjectUtils.localeComparator(context && context.locale || PrimeReact.locale);
value.sort(function (node1, node2) {
return _multisortField(node1, node2, multiSortMeta, 0, comparator);
});
for (var i = 0; i < value.length; i++) {
if (value[i].children && value[i].children.length) {
value[i].children = _sortMultiple({
data: value[i].children,
multiSortMeta: multiSortMeta
});
}
}
return value;
};
var _multisortField = function multisortField(node1, node2, multiSortMeta, index, comparator) {
if (!multiSortMeta || !multiSortMeta[index]) {
return;
}
var value1 = ObjectUtils.resolveFieldData(node1.data, multiSortMeta[index].field);
var value2 = ObjectUtils.resolveFieldData(node2.data, multiSortMeta[index].field);
// check if they are equal handling dates and locales
if (ObjectUtils.compare(value1, value2, comparator) === 0) {
return multiSortMeta.length - 1 > index ? _multisortField(node1, node2, multiSortMeta, index + 1, comparator) : 0;
}
return compareValuesOnSort(value1, value2, comparator, multiSortMeta[index].order);
};
var compareValuesOnSort = function compareValuesOnSort(value1, value2, comparator, order) {
return ObjectUtils.sort(value1, value2, order, comparator, context && context.nullSortOrder || PrimeReact.nullSortOrder);
};
var filter = function filter(value, field, mode) {
onFilter({
value: value,
field: field,
matchMode: mode
});
};
var onFilter = function onFilter(event) {
setFiltersState(function (prevFilters) {
var filters = props.onFilter ? props.filters : prevFilters;
var newFilters = filters ? _objectSpread$1({}, filters) : {};
if (!isFilterBlank(event.value)) {
newFilters[event.field] = {
value: event.value,
matchMode: event.matchMode
};
} else if (newFilters[event.field]) {
delete newFilters[event.field];
}
if (props.onFilter) {
props.onFilter({
filters: newFilters
});
} else {
setFirstState(0);
}
if (props.onValueChange) {
props.onValueChange(processedData({
filters: newFilters
}));
}
return newFilters;
});
};
var cloneFilters = function cloneFilters(filters) {
filters = filters || props.filters;
var cloned = {};
if (filters) {
Object.entries(filters).forEach(function (_ref3) {
var _ref4 = _slicedToArray(_ref3, 2),
prop = _ref4[0],
value = _ref4[1];
cloned[prop] = value;
});
} else {
var columns = getColumns();
cloned = columns.reduce(function (filters, col) {
var field = getColumnProp(col, 'filterField') || getColumnProp(col, 'field');
var filterFunction = getColumnProp(col, 'filterFunction');
var dataType = getColumnProp(col, 'dataType');
var matchMode = getColumnProp(col, 'filterMatchMode') || (context && context.filterMatchModeOptions[dataType] || PrimeReact.filterMatchModeOptions[dataType] ? context && context.filterMatchModeOptions[dataType][0] || PrimeReact.filterMatchModeOptions[dataType][0] : FilterMatchMode.STARTS_WITH);
var constraint = {
value: null,
matchMode: matchMode
};
if (filterFunction) {
FilterService.register("custom_".concat(field), function () {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return filterFunction.apply(void 0, args.concat([{
column: col
}]));
});
}
filters[field] = constraint;
return filters;
}, {});
}
return cloned;
};
var hasFilter = function hasFilter() {
return ObjectUtils.isNotEmpty(getFilters());
};
var isFilterBlank = function isFilterBlank(filter) {
if (filter !== null && filter !== undefined) {
if (typeof filter === 'string' && filter.trim().length === 0 || filter instanceof Array && filter.length === 0) {
return true;
}
return false;
}
return true;
};
var onColumnResizeStart = function onColumnResizeStart(event) {
var containerLeft = DomHandler.getOffset(elementRef.current).left;
resizeColumn.current = event.columnEl;
resizeColumnProps.current = event.column;
columnResizing.current = true;
lastResizerHelperX.current = event.originalEvent.pageX - containerLeft + elementRef.current.scrollLeft;
bindColumnResizeEvents();
};
var onColumnResize = function onColumnResize(event) {
var containerLeft = DomHandler.getOffset(elementRef.current).left;
!ptCallbacks.isUnstyled() && DomHandler.addClass(elementRef.current, 'p-unselectable-text');
resizerHelperRef.current.style.height = elementRef.current.offsetHeight + 'px';
resizerHelperRef.current.style.top = 0 + 'px';
resizerHelperRef.current.style.left = event.pageX - containerLeft + elementRef.current.scrollLeft + 'px';
resizerHelperRef.current.style.display = 'block';
};
var onColumnResizeEnd = function onColumnResizeEnd(event) {
var delta = resizerHelperRef.current.offsetLeft - lastResizerHelperX.current;
var columnWidth = resizeColumn.current.offsetWidth;
var newColumnWidth = columnWidth + delta;
var minWidth = resizeColumn.current.style.minWidth || 15;
if (columnWidth + delta > parseInt(minWidth, 10)) {
if (props.columnResizeMode === 'fit') {
var nextColumn = resizeColumn.current.nextElementSibling;
var nextColumnWidth = nextColumn.offsetWidth - delta;
if (newColumnWidth > 15 && nextColumnWidth > 15) {
if (props.scrollable) {
var scrollableView = findParentScrollableView(resizeColumn.current);
var scrollableBodyTable = DomHandler.findSingle(scrollableView, 'table[data-pc-section="scrollablebodytable"]');
var scrollableHeaderTable = DomHandler.findSingle(scrollableView, 'table[data-pc-section="scrollableheadertable"]');
var scrollableFooterTable = DomHandler.findSingle(scrollableView, 'table[data-pc-section="scrollablefootertable"]');
var resizeColumnIndex = DomHandler.index(resizeColumn.current);
resizeColGroup(scrollableHeaderTable, resizeColumnIndex, newColumnWidth, nextColumnWidth);
resizeColGroup(scrollableBodyTable, resizeColumnIndex, newColumnWidth, nextColumnWidth);
resizeColGroup(scrollableFooterTable, resizeColumnIndex, newColumnWidth, nextColumnWidth);
} else {
resizeColumn.current.style.width = newColumnWidth + 'px';
if (nextColumn) {
nextColumn.style.width = nextColumnWidth + 'px';
}
}
}
} else if (props.columnResizeMode === 'expand') {
if (props.scrollable) {
var _scrollableView = findParentScrollableView(resizeColumn.current);
var _scrollableBodyTable = DomHandler.findSingle(_scrollableView, 'table[data-pc-section="scrollablebodytable"]');
var _scrollableHeaderTable = DomHandler.findSingle(_scrollableView, 'table[data-pc-section="scrollableheadertable"]');
var _scrollableFooterTable = DomHandler.findSingle(_scrollableView, 'table[data-pc-section="scrollablefootertable"]');
_scrollableBodyTable.style.width = _scrollableBodyTable.offsetWidth + delta + 'px';
_scrollableHeaderTable.style.width = _scrollableHeaderTable.offsetWidth + delta + 'px';
if (_scrollableFooterTable) {
_scrollableFooterTable.style.width = _scrollableHeaderTable.offsetWidth + delta + 'px';
}
var _resizeColumnIndex = DomHandler.index(resizeColumn.current);
resizeColGroup(_scrollableHeaderTable, _resizeColumnIndex, newColumnWidth, null);
resizeColGroup(_scrollableBodyTable, _resizeColumnIndex, newColumnWidth, null);
resizeColGroup(_scrollableFooterTable, _resizeColumnIndex, newColumnWidth, null);
} else {
tableRef.current.style.width = tableRef.current.offsetWidth + delta + 'px';
resizeColumn.current.style.width = newColumnWidth + 'px';
}
}
if (props.onColumnResizeEnd) {
props.onColumnResizeEnd({
element: resizeColumn.current,
column: resizeColumnProps.current,
delta: delta
});
}
if (isStateful()) {
saveState();
}
}
resizerHelperRef.current.style.display = 'none';
resizeColumn.current = null;
resizeColumnProps.current = null;
DomHandler.removeClass(elementRef.current, 'p-unselectable-text');
unbindColumnResizeEvents();
};
var findParentScrollableView = function findParentScrollableView(column) {
if (column) {
var parent = column.parentElement;
while (parent && DomHandler.getAttribute(parent, 'data-pc-section') !== 'scrollable') {
parent = parent.parentElement;
}
return parent;
}
return null;
};
var resizeColGroup = function resizeColGroup(table, resizeColumnIndex, newColumnWidth, nextColumnWidth) {
if (table) {
var colGroup = table.children[0].nodeName === 'COLGROUP' ? table.children[0] : null;
if (colGroup) {
var col = colGroup.children[resizeColumnIndex];
var nextCol = col.nextElementSibling;
col.style.width = newColumnWidth + 'px';
if (nextCol && nextColumnWidth) {
nextCol.style.width = nextColumnWidth + 'px';
}
} else {
throw new Error('Scrollable tables require a colgroup to support resizable columns');
}
}
};
var bindColumnResizeEvents = function bindColumnResizeEvents() {
bindDocumentMouseMoveListener();
bindDocumentMouseUpListener();
};
var unbindColumnResizeEvents = function unbindColumnResizeEvents() {
unbindDocumentMouseMoveListener();
unbindDocumentMouseUpListener();
};
var onColumnDragStart = function onColumnDragStart(e) {
var event = e.originalEvent,
column = e.column;
if (columnResizing.current) {
event.preventDefault();
return;
}
iconWidth.current = DomHandler.getHiddenElementOuterWidth(reorderIndicatorUpRef.current);
iconHeight.current = DomHandler.getHiddenElementOuterHeight(reorderIndicatorUpRef.current);
draggedColumnEl.current = findParentHeader(event.currentTarget);
draggedColumn.current = column;
event.dataTransfer.setData('text', 'b'); // Firefox requires this to make dragging possible
};
var onColumnDragOver = function onColumnDragOver(e) {
var event = e.originalEvent,
column = e.column;
var dropHeader = findParentHeader(event.currentTarget);
if (props.reorderableColumns && draggedColumnEl.current && dropHeader && !getColumnProp(column, 'frozen')) {
event.preventDefault();
var containerOffset = DomHandler.getOffset(elementRef.current);
var dropHeaderOffset = DomHandler.getOffset(dropHeader);
if (draggedColumnEl.current !== dropHeader) {
var targetLeft = dropHeaderOffset.left - containerOffset.left;
//let targetTop = containerOffset.top - dropHeaderOffset.top;
var columnCenter = dropHeaderOffset.left + dropHeader.offsetWidth / 2;
reorderIndicatorUpRef.current.style.top = dropHeaderOffset.top - containerOffset.top - (iconHeight.current - 1) + 'px';
reorderIndicatorDownRef.current.style.top = dropHeaderOffset.top - containerOffset.top + dropHeader.offsetHeight + 'px';
if (event.pageX > columnCenter) {
reorderIndicatorUpRef.current.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(iconWidth.current / 2) + 'px';
reorderIndicatorDownRef.current.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(iconWidth.current / 2) + 'px';
dropPosition.current = 1;
} else {
reorderIndicatorUpRef.current.style.left = targetLeft - Math.ceil(iconWidth.current / 2) + 'px';
reorderIndicatorDownRef.current.style.left = targetLeft - Math.ceil(iconWidth.current / 2) + 'px';
dropPosition.current = -1;
}
reorderIndicatorUpRef.current.style.display = 'block';
reorderIndicatorDownRef.current.style.display = 'block';
}
}
};
var onColumnDragLeave = function onColumnDragLeave(e) {
var event = e.originalEvent;
if (props.reorderableColumns && draggedColumnEl.current) {
event.preventDefault();
reorderIndicatorUpRef.current.style.display = 'none';
reorderIndicatorDownRef.current.style.display = 'none';
}
};
var onColumnDrop = function onColumnDrop(e) {
var event = e.originalEvent,
column = e.column;
event.preventDefault();
if (draggedColumnEl.current) {
var dragIndex = DomHandler.index(draggedColumnEl.current);
var dropIndex = DomHandler.index(findParentHeader(event.currentTarget));
var allowDrop = dragIndex !== dropIndex;
if (allowDrop && (dropIndex - dragIndex === 1 && dropPosition.current === -1 || dragIndex - dropIndex === 1 && dropPosition.current === 1)) {
allowDrop = false;
}
if (allowDrop) {
var columns = columnOrderState ? getColumns() : React.Children.toArray(props.children);
var isSameColumn = function isSameColumn(col1, col2) {
return getColumnProp(col1, 'columnKey') || getColumnProp(col2, 'columnKey') ? ObjectUtils.equals(col1, col2, 'props.columnKey') : ObjectUtils.equals(col1, col2, 'props.field');
};
var dragColIndex = columns.findIndex(function (child) {
return isSameColumn(child, draggedColumn.current);
});
var dropColIndex = columns.findIndex(function (child) {
return isSameColumn(child, column);
});
if (dropColIndex < dragColIndex && dropPosition.current === 1) {
dropColIndex++;
}
if (dropColIndex > dragColIndex && dropPosition.current === -1) {
dropColIndex--;
}
ObjectUtils.reorderArray(columns, dragColIndex, dropColIndex);
var columnOrder = [];
var _iterator2 = _createForOfIteratorHelper(columns),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var _column = _step2.value;
columnOrder.push(getColumnProp(_column, 'columnKey') || getColumnProp(_column, 'field'));
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
setColumnOrderState(columnOrder);
if (props.onColReorder) {
props.onColReorder({
dragIndex: dragColIndex,
dropIndex: dropColIndex,
columns: columns
});
}
}
reorderIndicatorUpRef.current.style.display = 'none';
reorderIndicatorDownRef.current.style.display = 'none';
draggedColumnEl.current.draggable = false;
draggedColumnEl.current = null;
dropPosition.current = null;
}
};
var findParentHeader = function findParentHeader(element) {
if (element.nodeName === 'TH') {
return element;
}
var parent = element.parentElement;
while (parent.nodeName !== 'TH') {
parent = parent.parentElement;
if (!parent) {
break;
}
}
return parent;
};
var getColumnProp = function getColumnProp(column, name) {
return ColumnBase.getCProp(column, name);
};
var getExpandedKeys = function getExpandedKeys() {
return props.onToggle ? props.expandedKeys : expandedKeysState;
};
var getFirst = function getFirst() {
return props.onPage ? props.first : firstState;
};
var getRows = function getRows() {
return props.onPage ? props.rows : rowsState;
};
var getSortField = function getSortField() {
return props.onSort ? props.sortField : sortFieldState;
};
var getSortOrder = function getSortOrder() {
return props.onSort ? props.sortOrder : sortOrderState;
};
var getMultiSortMeta = function getMultiSortMeta() {
return (props.onSort ? props.multiSortMeta : multiSortMetaState) || [];
};
var getFilters = function getFilters() {
return props.onFilter ? props.filters : filtersState;
};
var findColumnByKey = function findColumnByKey(columns, key) {
if (columns && columns.length) {
for (var i = 0; i < columns.length; i++) {
var child = columns[i];
if (getColumnProp(child, 'columnKey') === key || getColumnProp(child, 'field') === key) {
return child;
}
}
}
return null;
};
var getColumns = function getColumns() {
var columns = React.Children.toArray(props.children);
if (columns && columns.length) {
if (props.reorderableColumns && columnOrderState) {
var orderedColumns = [];
var _iterator3 = _createForOfIteratorHelper(columnOrderState),
_step3;
try {
for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
var columnKey = _step3.value;
var column = findColumnByKey(columns, columnKey);
if (column) {
orderedColumns.push(column);
}
}
} catch (err) {
_iterator3.e(err);
} finally {
_iterator3.f();
}
return [].concat(orderedColumns, _toConsumableArray(columns.filter(function (item) {
return orderedColumns.indexOf(item) < 0;
})));
}
return columns;
}
return null;
};
var getTotalRecords = function getTotalRecords(data) {
return props.lazy ? props.totalRecords : data ? data.length : 0;
};
var isSingleSelectionMode = function isSingleSelectionMode() {
return props.selectionMode && props.selectionMode === 'single';
};
var isMultipleSelectionMode = function isMultipleSelectionMode() {
return props.selectionMode && props.selectionMode === 'multiple';
};
var isRowSelectionMode = function isRowSelectionMode() {
return isSingleSelectionMode() || isMultipleSelectionMode();
};
var getFrozenColumns = function getFrozenColumns(columns) {
var frozenColumns = null;
var _iterator4 = _createForOfIteratorHelper(columns),
_step4;
try {
for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
var col = _step4.value;
if (getColumnProp(col, 'frozen')) {
frozenColumns = frozenColumns || [];
frozenColumns.push(col);
}
}
} catch (err) {
_iterator4.e(err);
} finally {
_iterator4.f();
}
return frozenColumns;
};
var getScrollableColumns = function getScrollableColumns(columns) {
var scrollableColumns = null;
var _iterator5 = _createForOfIteratorHelper(columns),
_step5;
try {
for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
var col = _step5.value;
if (!getColumnProp(col, 'frozen')) {
scrollableColumns = scrollableColumns || [];
scrollableColumns.push(col);
}
}
} catch (err) {
_iterator5.e(err);
} finally {
_iterator5.f();
}
return scrollableColumns;
};
var filterLocal = function filterLocal(value) {
var filteredNodes = [];
var filters = getFilters();
var columns = React.Children.toArray(props.children);
var isStrictMode = props.filterMode === 'strict';
var _iterator6 = _createForOfIteratorHelper(value),
_step6;
try {
for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
var node = _step6.value;
var copyNode = _objectSpread$1({}, node);
var localMatch = true;
var globalMatch = false;
for (var j = 0; j < columns.length; j++) {
var col = columns[j];
var filterMeta = filters ? filters[getColumnProp(col, 'field')] : null;
var filterField = getColumnProp(col, 'field');
var filterValue = void 0;
var filterConstraint = void 0;
var paramsWithoutNode = void 0;
var options = void 0;
//local
if (filterMeta) {
var filterMatchMode = filterMeta.matchMode || getColumnProp(col, 'filterMatchMode') || 'startsWith';
filterValue = filterMeta.value;
filterConstraint = filterMatchMode === 'custom' ? getColumnProp(col, 'filterFunction') : FilterService.filters[filterMatchMode];
options = {
rowData: node,
filters: filters,
props: props,
column: {
filterMeta: filterMeta,
filterField: filterField,
props: ColumnBase.getCProps(col)
}
};
paramsWithoutNode = {
filterField: filterField,
filterValue: filterValue,
filterConstraint: filterConstraint,
isStrictMode: isStrictMode,
options: options
};
if (isStrictMode && !(findFilteredNodes(copyNode, paramsWithoutNode) || isFilterMatched(copyNode, paramsWithoutNode)) || !isStrictMode && !(isFilterMatched(copyNode, paramsWithoutNode) || findFilteredNodes(copyNode, paramsWithoutNode))) {
localMatch = false;
}
if (!localMatch) {
break;
}
}
//global
if (props.globalFilter && !globalMatch) {
var copyNodeForGlobal = _objectSpread$1({}, copyNode);
filterValue = props.globalFilter;
filterConstraint = FilterService.filters[props.globalFilterMatchMode];
paramsWithoutNode = {
filterField: filterField,
filterValue: filterValue,
filterConstraint: filterConstraint,
isStrictMode: isStrictMode
};
if (isStrictMode && (findFilteredNodes(copyNodeForGlobal, paramsWithoutNode) || isFilterMatched(copyNodeForGlobal, paramsWithoutNode)) || !isStrictMode && (isFilterMatched(copyNodeForGlobal, paramsWithoutNode) || findFilteredNodes(copyNodeForGlobal, paramsWithoutNode))) {
globalMatch = true;
copyNode = copyNodeForGlobal;
}
}
}
var matches = localMatch;
if (props.globalFilter) {
matches = localMatch && globalMatch;
}
if (matches) {
filteredNodes.push(copyNode);
}
}
} catch (err) {
_iterator6.e(err);
} finally {
_iterator6.f();
}
return filteredNodes;
};
var findFilteredNodes = function findFilteredNodes(node, paramsWithoutNode) {
if (node) {
var matched = false;
if (node.children) {
var childNodes = _toConsumableArray(node.children);
node.children = [];
var _iterator7 = _createForOfIteratorHelper(childNodes),
_step7;
try {
for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
var childNode = _step7.value;
var copyChildNode = _objectSpread$1({}, childNode);
if (isFilterMatched(copyChildNode, paramsWithoutNode)) {
matched = true;
node.children.push(copyChildNode);
}
}
} catch (err) {
_iterator7.e(err);
} finally {
_iterator7.f();
}
}
if (matched) {
return true;
}
}
};
var isFilterMatched = function isFilterMatched(node, _ref5) {
var filterField = _ref5.filterField,
filterValue = _ref5.filterValue,
filterConstraint = _ref5.filterConstraint,
isStrictMode = _ref5.isStrictMode,
options = _ref5.options;
var matched = false;
var dataFieldValue = ObjectUtils.resolveFieldData(node.data, filterField);
if (filterConstraint(dataFieldValue, filterValue, props.filterLocale, options)) {
matched = true;
}
if (!matched || isStrictMode && !isNodeLeaf(node)) {
matched = findFilteredNodes(node, {
filterField: filterField,
filterValue: filterValue,
filterConstraint: filterConstraint,
isStrictMode: isStrictMode
}) || matched;
}
return matched;
};
var isNodeLeaf = function isNodeLeaf(node) {
return node.leaf === false ? false : !(node.children && node.children.length);
};
var processedData = function processedData(localState) {
var data = props.value || [];
if (!props.lazy) {
if (data && data.length) {
var filters = localState && localState.filters || getFilters();
var sortField = localState && localState.sortField || getSortField();
var sortOrder = localState && localState.sortOrder || getSortOrder();
var multiSortMeta = localState && localState.multiSortMeta || getMultiSortMeta();
var columns = getColumns();
var sortColumn = columns.find(function (col) {
return getColumnProp(col, 'field') === sortField;
});
if (sortColumn) {
columnSortable.current = getColumnProp(sortColumn, 'sortable');
columnSortFunction.current = getColumnProp(sortColumn, 'sortFunction');
}
if (ObjectUtils.isNotEmpty(filters) || props.globalFilter) {
data = filterLocal(data);
}
if (sortField || ObjectUtils.isNotEmpty(multiSortMeta)) {
if (props.sortMode === 'single') {
data = _sortSingle({
data: data,
field: sortField,
order: sortOrder
});
} else if (props.sortMode === 'multiple') {
data = _sortMultiple({
data: data,
multiSortMeta: multiSortMeta
});
}
}
}
}
return data;
};
useMountEffect(function () {
if (isStateful()) {
restoreState();
}
});
useUpdateEffect(function () {
if (isStateful()) {
saveState();
}
});
useUpdateEffect(function () {
if (childFocusEvent.current) {
var nodeElement = childFocusEvent.current.target;
var nextElementSibling = nodeElement.nextElementSibling;
if (nextElementSibling) {
nodeElement.tabIndex = '-1';
nextElementSibling.tabIndex = '0';
DomHandler.focus(nextElementSibling);
}
}
}, [expandedKeysState]);
React.useImperativeHandle(ref, function () {
return {
props: props,
clearState: clearState,
filter: filter,
getElement: function getElement() {
return elementRef.current;
},
restoreState: restoreState,
restoreTableState: restoreTableState,
saveState: saveState
};
});
var createEvent = function createEvent(event) {
return _objectSpread$1({
first: getFirst(),
rows: getRows(),
sortField: getSortField(),
sortOrder: getSortOrder(),
multiSortMeta: getMultiSortMeta(),
filters: getFilters()
}, event);
};
var createTableHeader = function createTableHeader(columns, columnGroup) {
var sortField = getSortField();
var sortOrder = getSortOrder();
var multiSortMeta = _toConsumableArray(getMultiSortMeta());
var filters = getFilters();
return /*#__PURE__*/React.createElement(TreeTableHeader, {
hostName: "TreeTable",
columns: columns,
columnGroup: columnGroup,
tabIndex: props.tabIndex,
onSort: onSort,
sortField: sortField,
sortIcon: props.sortIcon,
sortOrder: sortOrder,
multiSortMeta: multiSortMeta,
resizableColumns: props.resizableColumns,
onResizeStart: onColumnResizeStart,
reorderableColumns: props.reorderableColumns,
onDragStart: onColumnDragStart,
onDragOver: onColumnDragOver,
onDragLeave: onColumnDragLeave,
onDrop: onColumnDrop,
onFilter: onFilter,
filters: filters,
filterDelay: props.filterDelay,
ptCallbacks: ptCallbacks,
metaData: metaData,
unstyled: props.unstyled
});
};
var createTableFooter = function createTableFooter(columns, columnGroup) {
return /*#__PURE__*/React.createElement(TreeTableFooter, {
hostName: "TreeTable",
columns: columns,
columnGroup: columnGroup,
ptCallbacks: ptCallbacks,
metaData: metaData
});
};
var createTableBody = function createTableBody(value, columns) {
return /*#__PURE__*/React.createElement(TreeTableBody, {
hostName: "TreeTable",
checkboxIcon: props.checkboxIcon,
columns: columns,
contextMenuSelectionKey: props.contextMenuSelectionKey,
emptyMessage: props.emptyMessage,
expandedKeys: getExpandedKeys(),
first: getFirst(),
lazy: props.lazy,
loading: props.loading,
metaData: metaData,
metaKeySelection: props.metaKeySelection,
onCollapse: props.onCollapse,
onContextMenu: props.onContextMenu,
onContextMenuSelectionChange: props.onContextMenuSelectionChange,
onExpand: props.onExpand,
onRowClick: props.onRowClick,
onRowMouseEnter: props.onRowMouseEnter,
onRowMouseLeave: props.onRowMouseLeave,
onSelect: props.onSelect,
onSelectionChange: props.onSelectionChange,
onToggle: onToggle,
onUnselect: props.onUnselect,
originalOptions: props.value,
paginator: props.paginator,
propagateSelectionDown: props.propagateSelectionDown,
propagateSelectionUp: props.propagateSelectionUp,
ptCallbacks: ptCallbacks,
rowClassName: props.rowClassName,
rows: getRows(),
selectOnEdit: props.selectOnEdit,
selectionKeys: props.selectionKeys,
selectionMode: props.selectionMode,
togglerTemplate: props.togglerTemplate,
value: value
});
};
var createPaginator = function createPaginator(position, totalRecords) {
var className = classNames('p-paginator-' + position, props.paginatorClassName);
return /*#__PURE__*/React.createElement(Paginator, {
first: getFirst(),
rows: getRows(),
pageLinkSize: props.pageLinkSize,
className: className,
onPageChange: onPageChange,
template: props.paginatorTemplate,
totalRecords: totalRecords,
rowsPerPageOptions: props.rowsPerPageOptions,
currentPageReportTemplate: props.currentPageReportTemplate,
leftContent: props.paginatorLeft,
rightContent: props.paginatorRight,
alwaysShow: props.alwaysShowPaginator,
dropdownAppendTo: props.paginatorDropdownAppendTo,
pt: ptCallbacks.ptm('paginator'),
unstyled: props.unstyled,
__parentMetadata: {
parent: metaData
}
});
};
var createScrollableView = function createScrollableView(value, columns, frozen, headerColumnGroup, footerColumnGroup) {
var header = createTableHeader(columns, headerColumnGroup);
var footer = createTableFooter(columns, footerColumnGroup);
var body = createTableBody(value, columns);
return /*#__PURE__*/React.createElement(TreeTableScrollableView, {
hostName: "TreeTable",
columns: columns,
header: header,
body: body,
footer: footer,
scrollHeight: props.scrollHeight,
frozen: frozen,
frozenWidth: props.frozenWidth,
ptCallbacks: ptCallbacks,
metaData: metaData
});
};
var createScrollableTable = function createScrollableTable(value) {
var columns = getColumns();
var frozenColumns = getFrozenColumns(columns);
var scrollableColumns = frozenColumns ? getScrollableColumns(columns) : columns;
var frozenView;
var scrollableView;
if (frozenColumns) {
frozenView = createScrollableView(value, frozenColumns, true, props.frozenHeaderColumnGroup, props.frozenFooterColumnGroup);
}
scrollableView = createScrollableView(value, scrollableColumns, false, props.headerColumnGroup, props.footerColumnGroup);
var scrollableWrapperProps = mergeProps({
className: ptCallbacks.cx('scrollableWrapper')
}, ptCallbacks.ptm('scrollableWrapper'));
return /*#__PURE__*/React.createElement("div", scrollableWrapperProps, frozenView, scrollableView);
};
var createRegularTable = function createRegularTable(value) {
var columns = getColumns();
var header = createTableHeader(columns, props.headerColumnGroup);
var footer = createTableFooter(columns, props.footerColumnGroup);
var body = createTableBody(value, columns);
var wrapperProps = mergeProps({
className: ptCallbacks.cx('wrapper')
}, ptCallbacks.ptm('wrapper'));
var tableProps = mergeProps({
role: 'table',
style: props.tableStyle,
className: classNames(props.tableClassName, ptCallbacks.cx('table'))
}, ptCallbacks.ptm('table'));
return /*#__PURE__*/React.createElement("div", wrapperProps, /*#__PURE__*/React.createElement("table", _extends({
ref: tableRef
}, tableProps), header, footer, body));
};
var createTable = function createTable(value) {
return props.scrollable ? createScrollableTable(value) : createRegularTable(value);
};
var createLoader = function createLoader() {
if (props.loading) {
var loadingIconProps = mergeProps({
className: ptCallbacks.cx('loadingIcon')
}, ptCallbacks.ptm('loadingIcon'));
var icon = props.loadingIcon || /*#__PURE__*/React.createElement(SpinnerIcon, _extends({}, loadingIconProps, {
spin: true
}));
var loadingIcon = IconUtils.getJSXIcon(icon, _objectSpread$1({}, loadingIconProps), {
props: props
});
var loadingWrapperProps = mergeProps({
className: ptCallbacks.cx('loadingWrapper')
}, ptCallbacks.ptm('loadingWrapper'));
var loadingOverlayProps = mergeProps({
className: ptCallbacks.cx('loadingOverlay')
}, ptCallbacks.ptm('loadingOverlay'));
return /*#__PURE__*/React.createElement("div", loadingWrapperProps, /*#__PURE__*/React.createElement("div", loadingOverlayProps, loadingIcon));
}
return null;
};
var data = processedData();
var table = createTable(data);
var totalRecords = getTotalRecords(data);
var headerProps = mergeProps({
className: ptCallbacks.cx('header')
}, ptCallbacks.ptm('header'));
var footerProps = mergeProps({
className: ptCallbacks.cx('footer')
}, ptCallbacks.ptm('footer'));
var resizeHelperProps = mergeProps({
className: ptCallbacks.cx('resizeHelper'),
style: {
display: 'none'
}
}, ptCallbacks.ptm('resizeHelper'));
var headerFacet = props.header && /*#__PURE__*/React.createElement("div", headerProps, props.header);
var footerFacet = props.footer && /*#__PURE__*/React.createElement("div", footerProps, props.footer);
var paginatorTop = props.paginator && props.paginatorPosition !== 'bottom' && createPaginator('top', totalRecords);
var paginatorBottom = props.paginator && props.paginatorPosition !== 'top' && createPaginator('bottom', totalRecords);
var loader = createLoader();
var resizeHelper = props.resizableColumns && /*#__PURE__*/React.createElement("div", _extends({
ref: resizerHelperRef
}, resizeHelperProps));
var reorderIndicatorUpProps = mergeProps({
className: ptCallbacks.cx('reorderIndicatorUp'),
style: {
position: 'absolute',
display: 'none'
}
}, ptCallbacks.ptm('reorderIndicatorUp'));
var reorderIndicatorUpIconProps = mergeProps(ptCallbacks.ptm('reorderIndicatorUpIcon'));
var reorderIndicatorUpIcon = props.reorderableColumns && IconUtils.getJSXIcon(props.reorderIndicatorUpIcon || /*#__PURE__*/React.createElement(ArrowDownIcon, reorderIndicatorUpIconProps), _objectSpread$1({}, reorderIndicatorUpIconProps), {
props: props
});
var reorderIndicatorUp = props.reorderableColumns && /*#__PURE__*/React.createElement("span", _extends({
ref: reorderIndicatorUpRef
}, reorderIndicatorUpProps), reorderIndicatorUpIcon);
var reorderIndicatorDownProps = {
className: ptCallbacks.sx('reorderIndicatorDown'),
style: {
position: 'absolute',
display: 'none'
}
};
var reorderIndicatorDownIconProps = mergeProps(ptCallbacks.ptm('reorderIndicatorDownIcon'));
var reorderIndicatorDownIcon = IconUtils.getJSXIcon(props.reorderIndicatorDownIcon || /*#__PURE__*/React.createElement(ArrowUpIcon, reorderIndicatorDownIconProps), _objectSpread$1({}, reorderIndicatorDownIconProps), {
props: props
});
var reorderIndicatorDown = props.reorderableColumns && /*#__PURE__*/React.createElement("span", _extends({
ref: reorderIndicatorDownRef
}, reorderIndicatorDownProps), reorderIndicatorDownIcon);
var rootProps = mergeProps({
role: 'table',
id: props.id,
className: classNames(props.className, ptCallbacks.cx('root', {
isRowSelectionMode: isRowSelectionMode
})),
style: props.style,
'data-scrollselectors': '.p-treetable-wrapper'
}, TreeTableBase.getOtherProps(props), ptCallbacks.ptm('root'));
return /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef
}, rootProps), loader, headerFacet, paginatorTop, table, paginatorBottom, footerFacet, resizeHelper, reorderIndicatorUp, reorderIndicatorDown);
});
TreeTable.displayName = 'TreeTable';
var classes = {
root: function root(_ref) {
var props = _ref.props,
context = _ref.context;
return classNames('p-tristatecheckbox p-checkbox p-component', {
'p-highlight': props.value !== '' && props.value !== null,
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
});
},
checkIcon: 'p-checkbox-icon p-c',
box: 'p-checkbox-box',
input: 'p-checkbox-input'
};
var TriStateCheckboxBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'TriStateCheckbox',
autoFocus: false,
checkIcon: null,
className: null,
disabled: false,
id: null,
invalid: false,
variant: null,
onChange: null,
readOnly: false,
style: null,
tabIndex: '0',
tooltip: null,
tooltipOptions: null,
uncheckIcon: null,
value: null,
children: undefined
},
css: {
classes: classes
}
});
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; }
var TriStateCheckbox = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = TriStateCheckboxBase.getProps(inProps, context);
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
checkBoxValue = _useState2[0],
setCheckBoxValue = _useState2[1];
var elementRef = React.useRef(null);
var _TriStateCheckboxBase = TriStateCheckboxBase.setMetaData({
props: props
}),
ptm = _TriStateCheckboxBase.ptm,
cx = _TriStateCheckboxBase.cx,
isUnstyled = _TriStateCheckboxBase.isUnstyled;
useHandleStyle(TriStateCheckboxBase.css.styles, isUnstyled, {
name: 'tristatecheckbox'
});
useEffect(function () {
if ([true, false, null].includes(props.value)) {
setCheckBoxValue(props.value);
} else {
setCheckBoxValue(null);
}
}, [props.value]);
var onChange = function onChange(event) {
if (props.disabled || props.readOnly) {
return;
}
var newValue;
if (checkBoxValue === null) {
newValue = true;
} else if (checkBoxValue === true) {
newValue = false;
} else if (checkBoxValue === false) {
newValue = null;
}
if (props.onChange) {
props.onChange({
originalEvent: event,
value: newValue,
stopPropagation: function stopPropagation() {
event === null || event === void 0 || event.stopPropagation();
},
preventDefault: function preventDefault() {
event === null || event === void 0 || event.preventDefault();
},
target: {
name: props.name,
id: props.id,
value: newValue
}
});
}
};
var onFocus = function onFocus(event) {
var _props$onFocus;
props === null || props === void 0 || (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, event);
};
var onBlur = function onBlur(event) {
var _props$onBlur;
props === null || props === void 0 || (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, event);
};
var onKeyDown = function onKeyDown(e) {
if (e.code === 'Enter' || e.code === 'NumpadEnter' || e.code === 'Space') {
onChange(e);
e.preventDefault();
}
};
React.useImperativeHandle(ref, function () {
return {
props: props,
focus: function focus() {
return DomHandler.focusFirstElement(elementRef.current);
},
getElement: function getElement() {
return elementRef.current;
}
};
});
useMountEffect(function () {
if (props.autoFocus) {
DomHandler.focusFirstElement(elementRef.current);
}
});
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = TriStateCheckboxBase.getOtherProps(props);
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var checkIconProps = mergeProps({
className: cx('checkIcon')
}, ptm('checkIcon'));
var uncheckIconProps = mergeProps({
className: cx('checkIcon')
}, ptm('uncheckIcon'));
var icon;
if (checkBoxValue === false) {
icon = props.uncheckIcon || /*#__PURE__*/React.createElement(TimesIcon, uncheckIconProps);
} else if (checkBoxValue === true) {
icon = props.checkIcon || /*#__PURE__*/React.createElement(CheckIcon, checkIconProps);
}
var checkIcon = IconUtils.getJSXIcon(icon, _objectSpread({}, checkIconProps), {
props: props
});
var ariaValueLabel = checkBoxValue ? ariaLabel('trueLabel') : checkBoxValue === false ? ariaLabel('falseLabel') : ariaLabel('nullLabel');
var ariaChecked = checkBoxValue ? 'true' : 'false';
var boxProps = mergeProps(_objectSpread({
id: props.id + '_box',
className: cx('box'),
tabIndex: props.disabled ? '-1' : props.tabIndex,
onFocus: onFocus,
onBlur: onBlur,
onKeyDown: onKeyDown,
role: 'checkbox',
'aria-checked': ariaChecked
}, ariaProps), ptm('box'));
var srOnlyAriaProps = mergeProps({
className: 'p-hidden-accessible',
'aria-live': 'polite'
}, ptm('srOnlyAria'));
var rootProps = mergeProps({
className: classNames(props.className, cx('root', {
context: context
})),
style: props.style,
'data-p-disabled': props.disabled
}, TriStateCheckboxBase.getOtherProps(props), ptm('root'));
var inputProps = mergeProps({
id: props.inputId,
className: cx('input'),
type: 'checkbox',
'aria-invalid': props.invalid,
disabled: props.disabled,
readOnly: props.readOnly,
value: checkBoxValue,
checked: checkBoxValue,
onChange: onChange
}, ptm('input'));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
ref: elementRef
}, rootProps), /*#__PURE__*/React.createElement("input", inputProps), /*#__PURE__*/React.createElement("span", srOnlyAriaProps, ariaValueLabel), /*#__PURE__*/React.createElement("div", boxProps, checkIcon)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip,
pt: ptm('tooltip')
}, props.tooltipOptions)));
}));
TriStateCheckbox.displayName = 'TriStateCheckbox';
export { Accordion, AccordionTab, AngleDoubleDownIcon, AngleDoubleLeftIcon, AngleDoubleRightIcon, AngleDoubleUpIcon, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, ArrowDownIcon, ArrowUpIcon, AutoComplete, Avatar, AvatarGroup, Badge, BanIcon, BarsIcon, BlockUI, BreadCrumb, Button, CSSTransition, Calendar, CalendarIcon, Card, Carousel, CascadeSelect, PrimeReactChart as Chart, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, Chips, ColorPicker, Column, ColumnGroup, ConfirmDialog, ConfirmPopup, ContextMenu, DataScroller, DataTable, DataView, DataViewItem, DataViewLayoutOptions, DeferredContent, Dialog, Divider, Dock, DomHandler, Dropdown, ESC_KEY_HANDLING_PRIORITIES, Editor, EventBus, ExclamationTriangleIcon, EyeIcon, EyeSlashIcon, Fieldset, FileUpload, FilterIcon, FilterMatchMode, FilterOperator, FilterService, FilterSlashIcon, FloatLabel, Galleria, IconBase, IconField, IconUtils, Image, InfoCircleIcon, Inplace, InplaceContent, InplaceDisplay, InputMask, InputNumber, InputSwitch, InputText, InputTextarea, KeyFilter, Knob, ListBox, MegaMenu, Mention, Menu, Menubar, Message, MessageSeverity, Messages, MeterGroup, MinusIcon, MultiSelect, MultiStateCheckbox, ObjectUtils, OrderList, OrganizationChart, OverlayPanel, OverlayService, Paginator, Panel, PanelMenu, Password, PencilIcon, PickList, PlusIcon, Portal, PrimeIcons, PrimeReactContext, PrimeReactProvider, ProgressBar, ProgressSpinner, RadioButton, Rating, RefreshIcon, Ripple, Row, ScrollPanel, ScrollTop, SearchIcon, SearchMinusIcon, SearchPlusIcon, SelectButton, Sidebar, Skeleton, SlideMenu, Slider, SortAltIcon, SortAmountDownIcon, SortAmountUpAltIcon, SortOrder, SpeedDial, SpinnerIcon, SplitButton, Splitter, SplitterPanel, StarFillIcon, StarIcon, Stepper, Steps, StyleClass, TabMenu, TabPanel, TabView, Tag, Terminal, TerminalService, ThLargeIcon, TieredMenu, Timeline, TimesCircleIcon, TimesIcon, Toast, ToggleButton, Toolbar, Tooltip, TrashIcon, Tree, TreeSelect, TreeTable, TriStateCheckbox, UndoIcon, UniqueComponentId, UploadIcon, VirtualScroller, WindowMaximizeIcon, WindowMinimizeIcon, ZIndexUtils, addLocale, ariaLabel, classNames, confirmDialog, confirmPopup, PrimeReact as default, locale, localeOption, localeOptions, mask, mergeProps, updateLocaleOption, updateLocaleOptions, useClickOutside, useCounter, useDebounce, useDisplayOrder, useEventListener, useFavicon, useGlobalOnEscapeKey, useIntersectionObserver, useInterval, useLocalStorage, useMatchMedia, useMergeProps, useMountEffect, useMouse, useMove, useOverlayListener, useOverlayScrollListener, usePrevious, useResizeListener, useSessionStorage, useStorage, useStyle, useTimeout, useUnmountEffect, useUpdateEffect };