primereact 9.4.0 → 9.5.0

package/image/image.esm.js

@@ -10,7 +10,8 @@ import { SearchPlusIcon } from 'primereact/icons/searchplus';
 import { TimesIcon } from 'primereact/icons/times';
 import { UndoIcon } from 'primereact/icons/undo';
 import { Portal } from 'primereact/portal';
-import { ObjectUtils, ZIndexUtils, classNames, IconUtils, DomHandler } from 'primereact/utils';
+import { ZIndexUtils, classNames, mergeProps, IconUtils, ObjectUtils as ObjectUtils$1, DomHandler } from 'primereact/utils';
+import { ComponentBase } from 'primereact/componentbase';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -27,6 +28,47 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
+
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
@@ -82,8 +124,335 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
+  }
+}
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
+  return Constructor;
+}
+
+var ObjectUtils = /*#__PURE__*/function () {
+  function ObjectUtils() {
+    _classCallCheck(this, ObjectUtils);
+  }
+  _createClass(ObjectUtils, null, [{
+    key: "equals",
+    value: function equals(obj1, obj2, field) {
+      if (field && obj1 && _typeof(obj1) === 'object' && obj2 && _typeof(obj2) === 'object') return this.resolveFieldData(obj1, field) === this.resolveFieldData(obj2, field);else return this.deepEquals(obj1, obj2);
+    }
+  }, {
+    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),
+          arrB = Array.isArray(b),
+          i,
+          length,
+          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,
+          dateB = b instanceof Date;
+        if (dateA !== dateB) return false;
+        if (dateA && dateB) return a.getTime() === b.getTime();
+        var regexpA = a instanceof RegExp,
+          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 && Object.keys(data).length && field) {
+        if (this.isFunction(field)) {
+          return field(data);
+        } else if (ObjectUtils.isNotEmpty(data[field])) {
+          return data[field];
+        } else if (field.indexOf('.') === -1) {
+          return data[field];
+        } else {
+          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;
+        }
+      } else {
+        return null;
+      }
+    }
+  }, {
+    key: "isFunction",
+    value: function isFunction(obj) {
+      return !!(obj && obj.constructor && obj.call && obj.apply);
+    }
+  }, {
+    key: "isLetter",
+    value: function isLetter(_char) {
+      return _char && (_char.toUpperCase() != _char.toLowerCase() || _char.codePointAt(0) > 127);
+    }
+  }, {
+    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 %= value.length;
+          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: "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: "getMergedProps",
+    value: function getMergedProps(props, defaultProps) {
+      return Object.assign({}, defaultProps, props);
+    }
+  }, {
+    key: "getDiffProps",
+    value: function getDiffProps(props, defaultProps) {
+      return this.findDiffKeys(props, defaultProps);
+    }
+  }, {
+    key: "getPropValue",
+    value: function getPropValue(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: "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 childType = this.getComponentProp(child, '__TYPE') || (child.type ? child.type.displayName : undefined);
+        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: "convertToFlatCase",
+    value: function convertToFlatCase(str) {
+      // convert snake, kebab, camel and pascal cases to flat case
+      return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+    }
+  }, {
+    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: "sort",
+    value: function sort(value1, value2) {
+      var order = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+      var locale = arguments.length > 3 ? arguments[3] : undefined;
+      var nullSortOrder = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
+      var result = ObjectUtils.compare(value1, value2, locale, order);
+      var finalSortOrder = order;
+
+      // nullSortOrder == 1 means Excel like sort nulls at bottom
+      if (ObjectUtils.isEmpty(value1) || ObjectUtils.isEmpty(value2)) {
+        finalSortOrder = nullSortOrder === 1 ? order : nullSortOrder;
+      }
+      return finalSortOrder * result;
+    }
+  }, {
+    key: "compare",
+    value: function compare(value1, value2, locale) {
+      var order = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+      var result = -1;
+      var emptyValue1 = ObjectUtils.isEmpty(value1);
+      var emptyValue2 = ObjectUtils.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 = value1.localeCompare(value2, locale, {
+        numeric: true
+      });else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
+      return result;
+    }
+  }]);
+  return ObjectUtils;
+}();
+
+var lastId = 0;
+function UniqueComponentId() {
+  var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'pr_id_';
+  lastId++;
+  return "".concat(prefix).concat(lastId);
+}
+
 var DownloadIcon = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var pti = IconBase.getPTI(inProps);
+  var _React$useState = React.useState(inProps.id),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    pathId = _React$useState2[0],
+    setPathId = _React$useState2[1];
+  React.useEffect(function () {
+    if (ObjectUtils.isEmpty(pathId)) {
+      setPathId(UniqueComponentId('pr_icon_clip_'));
+    }
+  }, [pathId]);
   return /*#__PURE__*/React.createElement("svg", _extends({
     ref: ref,
     width: "14",
@@ -92,14 +461,14 @@ var DownloadIcon = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, pti), /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#clip0_407_20832)"
+    clipPath: "url(#".concat(pathId, ")")
   }, /*#__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"
   })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "clip0_407_20832"
+    id: pathId
   }, /*#__PURE__*/React.createElement("rect", {
     width: "14",
     height: "14",
@@ -108,7 +477,7 @@ var DownloadIcon = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
 }));
 DownloadIcon.displayName = 'DownloadIcon';
 
-var ImageBase = {
+var ImageBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Image',
     alt: null,
@@ -138,15 +507,11 @@ var ImageBase = {
     zoomOutIcon: null,
     zoomSrc: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return ObjectUtils.getMergedProps(props, ImageBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return ObjectUtils.getDiffProps(props, ImageBase.defaultProps);
   }
-};
+});
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Image = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var props = ImageBase.getProps(inProps);
   var _React$useState = React.useState(false),
@@ -170,6 +535,16 @@ var Image = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
   var maskRef = React.useRef(null);
   var previewRef = React.useRef(null);
   var previewClick = React.useRef(false);
+  var _ImageBase$setMetaDat = ImageBase.setMetaData({
+      props: props,
+      state: {
+        maskVisible: maskVisibleState,
+        previewVisible: previewVisibleState,
+        rotate: rotateState,
+        scale: scaleState
+      }
+    }),
+    ptm = _ImageBase$setMetaDat.ptm;
   var show = function show() {
     if (props.preview) {
       setMaskVisibleState(true);
@@ -242,11 +617,12 @@ var Image = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
     maskRef.current && ZIndexUtils.clear(maskRef.current);
   });
   var createPreview = function createPreview() {
+    var buttonProps = mergeProps({
+      className: 'p-image-preview-indicator',
+      onClick: show
+    }, ptm('button'));
     if (props.preview) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "p-image-preview-indicator",
-        onClick: show
-      }, content);
+      return /*#__PURE__*/React.createElement("div", buttonProps, content);
     }
     return null;
   };
@@ -260,59 +636,86 @@ var Image = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
     var imagePreviewStyle = {
       transform: 'rotate(' + rotateState + 'deg) scale(' + scaleState + ')'
     };
-    var zoomDisabled = scaleState <= 0.5 || scaleState >= 1.5;
-    // const rotateClassName = 'p-image-preview-rotate-' + rotateScale;
-    var downloadIcon = IconUtils.getJSXIcon(props.downloadIcon || /*#__PURE__*/React.createElement(DownloadIcon, null), undefined, {
+    var zoomOutDisabled = scaleState <= 0.5;
+    var zoomInDisabled = scaleState >= 1.5;
+    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({}, downloadIconProps), {
       props: props
     });
-    var rotateRightIcon = IconUtils.getJSXIcon(props.rotateRightIcon || /*#__PURE__*/React.createElement(RefreshIcon, null), undefined, {
+    var rotateRightIcon = IconUtils.getJSXIcon(props.rotateRightIcon || /*#__PURE__*/React.createElement(RefreshIcon, null), _objectSpread({}, rotateRightIconProps), {
       props: props
     });
-    var rotateLeftIcon = IconUtils.getJSXIcon(props.rotateLeftIcon || /*#__PURE__*/React.createElement(UndoIcon, null), undefined, {
+    var rotateLeftIcon = IconUtils.getJSXIcon(props.rotateLeftIcon || /*#__PURE__*/React.createElement(UndoIcon, null), _objectSpread({}, rotateLeftIconProps), {
       props: props
     });
-    var zoomOutIcon = IconUtils.getJSXIcon(props.zoomOutIcon || /*#__PURE__*/React.createElement(SearchMinusIcon, null), undefined, {
+    var zoomOutIcon = IconUtils.getJSXIcon(props.zoomOutIcon || /*#__PURE__*/React.createElement(SearchMinusIcon, null), _objectSpread({}, zoomOutIconProps), {
       props: props
     });
-    var zoomInIcon = IconUtils.getJSXIcon(props.zoomInIcon || /*#__PURE__*/React.createElement(SearchPlusIcon, null), undefined, {
+    var zoomInIcon = IconUtils.getJSXIcon(props.zoomInIcon || /*#__PURE__*/React.createElement(SearchPlusIcon, null), _objectSpread({}, zoomInIconProps), {
       props: props
     });
-    var closeIcon = IconUtils.getJSXIcon(props.closeIcon || /*#__PURE__*/React.createElement(TimesIcon, null), undefined, {
+    var closeIcon = IconUtils.getJSXIcon(props.closeIcon || /*#__PURE__*/React.createElement(TimesIcon, null), _objectSpread({}, closeIconProps), {
       props: props
     });
-    return /*#__PURE__*/React.createElement("div", {
+    var maskProps = mergeProps({
       ref: maskRef,
-      className: "p-image-mask p-component-overlay p-component-overlay-enter",
-      onClick: hide
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "p-image-toolbar"
-    }, downloadable && /*#__PURE__*/React.createElement("button", {
-      className: "p-image-action p-link",
-      onClick: onDownload,
-      type: "button"
-    }, downloadIcon), /*#__PURE__*/React.createElement("button", {
-      className: "p-image-action p-link",
-      onClick: rotateRight,
-      type: "button"
-    }, rotateRightIcon), /*#__PURE__*/React.createElement("button", {
-      className: "p-image-action p-link",
-      onClick: rotateLeft,
-      type: "button"
-    }, rotateLeftIcon), /*#__PURE__*/React.createElement("button", {
-      className: "p-image-action p-link",
-      onClick: zoomOut,
-      type: "button",
-      disabled: zoomDisabled
-    }, zoomOutIcon), /*#__PURE__*/React.createElement("button", {
-      className: "p-image-action p-link",
-      onClick: zoomIn,
-      type: "button",
-      disabled: zoomDisabled
-    }, zoomInIcon), /*#__PURE__*/React.createElement("button", {
-      className: "p-image-action p-link",
-      type: "button",
-      "aria-label": localeOption('close')
-    }, closeIcon)), /*#__PURE__*/React.createElement(CSSTransition, {
+      className: 'p-image-mask p-component-overlay p-component-overlay-enter',
+      onPointerUp: hide
+    }, ptm('mask'));
+    var toolbarProps = mergeProps({
+      className: 'p-image-toolbar'
+    }, ptm('toolbar'));
+    var downloadButtonProps = mergeProps({
+      className: 'p-image-action p-link',
+      onPointerUp: onDownload,
+      type: 'button'
+    }, ptm('downloadButton'));
+    var rotateRightButtonProps = mergeProps({
+      className: 'p-image-action p-link',
+      onPointerUp: rotateRight,
+      type: 'button'
+    }, ptm('rotateRightButton'));
+    var rotateLeftButtonProps = mergeProps({
+      className: 'p-image-action p-link',
+      onPointerUp: rotateLeft,
+      type: 'button'
+    }, ptm('rotateLeftButton'));
+    var zoomOutButtonProps = mergeProps({
+      className: 'p-image-action p-link',
+      onPointerUp: zoomOut,
+      type: 'button',
+      disabled: zoomOutDisabled
+    }, ptm('zoomOutButton'));
+    var zoomInButtonProps = mergeProps({
+      className: 'p-image-action p-link',
+      onPointerUp: zoomIn,
+      type: 'button',
+      disabled: zoomInDisabled
+    }, ptm('zoomInButton'));
+    var closeButtonProps = mergeProps({
+      className: 'p-image-action p-link',
+      type: 'button',
+      'aria-label': localeOption('close')
+    }, ptm('closeButton'));
+    var previewProps = mergeProps({
+      src: props.zoomSrc || props.src,
+      className: 'p-image-preview',
+      style: imagePreviewStyle,
+      onPointerUp: onPreviewImageClick,
+      crossOrigin: crossOrigin,
+      referrerPolicy: referrerPolicy,
+      useMap: useMap,
+      loading: loading
+    }, ptm('preview'));
+    var previewContainerProps = mergeProps({
+      ref: previewRef
+    }, ptm('previewContainer'));
+    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, {
       nodeRef: previewRef,
       classNames: "p-image-preview",
       "in": previewVisibleState,
@@ -326,19 +729,9 @@ var Image = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
       onExit: onExit,
       onExiting: onExiting,
       onExited: onExited
-    }, /*#__PURE__*/React.createElement("div", {
-      ref: previewRef
-    }, /*#__PURE__*/React.createElement("img", {
-      src: props.zoomSrc || props.src,
-      className: "p-image-preview",
-      style: imagePreviewStyle,
-      onClick: onPreviewImageClick,
-      alt: alt,
-      crossOrigin: crossOrigin,
-      referrerPolicy: referrerPolicy,
-      useMap: useMap,
-      loading: loading
-    }))));
+    }, /*#__PURE__*/React.createElement("div", previewContainerProps, /*#__PURE__*/React.createElement("img", _extends({
+      alt: alt
+    }, previewProps)))));
   };
   React.useImperativeHandle(ref, function () {
     return {
@@ -361,23 +754,21 @@ var Image = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
     referrerPolicy = props.referrerPolicy,
     useMap = props.useMap,
     loading = props.loading;
-  var otherProps = ImageBase.getOtherProps(props);
   var containerClassName = classNames('p-image p-component', props.className, {
     'p-image-preview-container': props.preview
   });
   var element = createElement();
   var iconClassName = 'p-image-preview-icon';
-  var icon = props.indicatorIcon || /*#__PURE__*/React.createElement(EyeIcon, {
-    className: iconClassName
-  });
-  var indicatorIcon = IconUtils.getJSXIcon(icon, {
+  var iconProp = mergeProps({
     className: iconClassName
-  }, {
+  }, ptm('icon'));
+  var icon = props.indicatorIcon || /*#__PURE__*/React.createElement(EyeIcon, iconProp);
+  var indicatorIcon = IconUtils.getJSXIcon(icon, _objectSpread({}, iconProp), {
     props: props
   });
-  var content = props.template ? ObjectUtils.getJSXElement(props.template, props) : indicatorIcon;
+  var content = props.template ? ObjectUtils$1.getJSXElement(props.template, props) : indicatorIcon;
   var preview = createPreview();
-  var image = props.src && /*#__PURE__*/React.createElement("img", {
+  var imageProp = mergeProps({
     ref: imageRef,
     src: src,
     className: props.imageClassName,
@@ -387,14 +778,17 @@ var Image = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
     referrerPolicy: referrerPolicy,
     useMap: useMap,
     loading: loading,
-    alt: alt,
     style: props.imageStyle,
     onError: props.onError
-  });
-  return /*#__PURE__*/React.createElement("span", _extends({
+  }, ptm('image'));
+  var image = props.src && /*#__PURE__*/React.createElement("img", _extends({}, imageProp, {
+    alt: alt
+  }));
+  var rootProps = mergeProps({
     ref: elementRef,
     className: containerClassName
-  }, otherProps), image, preview, maskVisibleState && /*#__PURE__*/React.createElement(Portal, {
+  }, ImageBase.getOtherProps(props), ptm('root'));
+  return /*#__PURE__*/React.createElement("span", rootProps, image, preview, maskVisibleState && /*#__PURE__*/React.createElement(Portal, {
     element: element,
     appendTo: document.body
   }));