primereact 9.4.0 → 9.5.0

package/galleria/galleria.d.ts

@@ -9,7 +9,156 @@
  */
 import * as React from 'react';
 import { CSSTransitionProps } from '../csstransition';
-import { IconType } from '../utils/utils';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type GalleriaPassThroughType<T> = PassThroughType<T, GalleriaThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface GalleriaThroughMethodOptions {
+    props: GalleriaProps;
+    state: GalleriaState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link GalleriaProps.pt}
+ */
+export interface GalleriaPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the close button's DOM element.
+     */
+    closeButton?: GalleriaPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the close icon's DOM element.
+     */
+    closeIcon?: GalleriaPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the item wrapper's DOM element.
+     */
+    itemWrapper?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the item container's DOM element.
+     */
+    itemContainer?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the previous item button's DOM element.
+     */
+    previousItemButton?: GalleriaPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the previous item icon's DOM element.
+     */
+    previousItemIcon?: GalleriaPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the next item button's DOM element.
+     */
+    nextItemButton?: GalleriaPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the next item icon's DOM element.
+     */
+    nextItemIcon?: GalleriaPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the caption's DOM element.
+     */
+    caption?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the indicators's DOM element.
+     */
+    indicators?: GalleriaPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the indicator's DOM element.
+     */
+    indicator?: GalleriaPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the thumbnail wrapper's DOM element.
+     */
+    thumbnailWrapper?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the thumbnail container's DOM element.
+     */
+    thumbnailContainer?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the previous thumbnail button's DOM element.
+     */
+    previousThumbnailButton?: GalleriaPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the previous thumbnail icon's DOM element.
+     */
+    previousThumbnailIcon?: GalleriaPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the thumbnail items container's DOM element.
+     */
+    thumbnailItemsContainer?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the thumbnail items' DOM element.
+     */
+    thumbnailItems?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the thumbnail item's DOM element.
+     */
+    thumbnailItem?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the thumbnail item content's DOM element.
+     */
+    thumbnailItemContent?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the next thumbnail button's DOM element.
+     */
+    nextThumbnailButton?: GalleriaPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the next thumbnail icon's DOM element.
+     */
+    nextThumbnailIcon?: GalleriaPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the mask's DOM element.
+     */
+    mask?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+}
+
+/**
+ * Defines current inline state in Galleria component.
+ */
+export interface GalleriaState {
+    /**
+     * Current visible state as a boolean.
+     * @default false
+     */
+    visible: number;
+    /**
+     * Number of items per page as a number.
+     */
+    numVisible: number;
+    /**
+     * Current slide show active state.
+     * @default false
+     */
+    slideShowActive: number;
+    /**
+     * Current active item index as a number.
+     */
+    activeIndex: number;
+}
 
 /**
  * Custom galleria responsive options
@@ -41,7 +190,7 @@ interface GalleriaItemChangeEvent {
  * Defines valid properties in Galleria component. In addition to these, all properties of HTMLDivElement can be used in this component.
  * @group Properties
  */
-export interface GalleriaProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface GalleriaProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref' | 'pt'> {
     /**
      * An array of objects to display.
      */
@@ -200,6 +349,11 @@ export interface GalleriaProps extends Omit<React.DetailedHTMLProps<React.HTMLAt
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {GalleriaPassThroughOptions}
+     */
+    pt?: GalleriaPassThroughOptions;
 }
 
 /**

package/galleria/galleria.esm.js

@@ -2,29 +2,15 @@ import * as React from 'react';
 import PrimeReact, { localeOption } from 'primereact/api';
 import { CSSTransition } from 'primereact/csstransition';
 import { useMountEffect, usePrevious, useResizeListener, useUpdateEffect, useInterval, useUnmountEffect } from 'primereact/hooks';
+import { TimesIcon } from 'primereact/icons/times';
 import { Portal } from 'primereact/portal';
 import { Ripple } from 'primereact/ripple';
-import { ObjectUtils, classNames, IconUtils, UniqueComponentId, DomHandler, ZIndexUtils } from 'primereact/utils';
+import { mergeProps, classNames, IconUtils, UniqueComponentId, DomHandler, ObjectUtils, ZIndexUtils } from 'primereact/utils';
+import { ComponentBase } from 'primereact/componentbase';
 import { ChevronLeftIcon } from 'primereact/icons/chevronleft';
 import { ChevronRightIcon } from 'primereact/icons/chevronright';
-import { ChevronUpIcon } from 'primereact/icons/chevronup';
 import { ChevronDownIcon } from 'primereact/icons/chevrondown';
-import { TimesIcon } from 'primereact/icons/times';
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
+import { ChevronUpIcon } from 'primereact/icons/chevronup';
 
 function _typeof(obj) {
   "@babel/helpers - typeof";
@@ -122,7 +108,7 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-var GalleriaBase = {
+var GalleriaBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Galleria',
     id: null,
@@ -161,15 +147,11 @@ var GalleriaBase = {
     transitionOptions: null,
     onItemChange: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return ObjectUtils.getMergedProps(props, GalleriaBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return ObjectUtils.getDiffProps(props, GalleriaBase.defaultProps);
   }
-};
+});
 
+function ownKeys$2(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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var GalleriaItem = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var next = function next() {
     var nextItemIndex = props.activeItemIndex + 1;
@@ -236,20 +218,20 @@ var GalleriaItem = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
         'p-disabled': isDisabled
       });
       var iconClassName = 'p-galleria-item-prev-icon';
-      var icon = props.itemPrevIcon || /*#__PURE__*/React.createElement(ChevronLeftIcon, {
+      var previousItemIconProps = mergeProps({
         className: iconClassName
-      });
-      var itemPrevIcon = IconUtils.getJSXIcon(icon, {
-        className: iconClassName
-      }, {
+      }, props.ptm('previousItemIcon'));
+      var icon = props.itemPrevIcon || /*#__PURE__*/React.createElement(ChevronLeftIcon, previousItemIconProps);
+      var itemPrevIcon = IconUtils.getJSXIcon(icon, _objectSpread$2({}, previousItemIconProps), {
         props: props
       });
-      return /*#__PURE__*/React.createElement("button", {
-        type: "button",
+      var previousItemButtonProps = mergeProps({
+        type: 'button',
         className: buttonClassName,
         onClick: navBackward,
         disabled: isDisabled
-      }, itemPrevIcon, /*#__PURE__*/React.createElement(Ripple, null));
+      }, props.ptm('previousItemButton'));
+      return /*#__PURE__*/React.createElement("button", previousItemButtonProps, itemPrevIcon, /*#__PURE__*/React.createElement(Ripple, null));
     }
     return null;
   };
@@ -260,29 +242,30 @@ var GalleriaItem = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
         'p-disabled': isDisabled
       });
       var iconClassName = 'p-galleria-item-next-icon';
-      var icon = props.itemNextIcon || /*#__PURE__*/React.createElement(ChevronRightIcon, {
+      var nextItemIconProps = mergeProps({
         className: iconClassName
-      });
-      var itemNextIcon = IconUtils.getJSXIcon(icon, {
-        className: iconClassName
-      }, {
+      }, props.ptm('nextItemIcon'));
+      var icon = props.itemNextIcon || /*#__PURE__*/React.createElement(ChevronRightIcon, nextItemIconProps);
+      var itemNextIcon = IconUtils.getJSXIcon(icon, _objectSpread$2({}, nextItemIconProps), {
         props: props
       });
-      return /*#__PURE__*/React.createElement("button", {
-        type: "button",
+      var nextItemButtonProps = mergeProps({
+        type: 'button',
         className: buttonClassName,
         onClick: navForward,
         disabled: isDisabled
-      }, itemNextIcon, /*#__PURE__*/React.createElement(Ripple, null));
+      }, props.ptm('nextItemButton'));
+      return /*#__PURE__*/React.createElement("button", nextItemButtonProps, itemNextIcon, /*#__PURE__*/React.createElement(Ripple, null));
     }
     return null;
   };
   var createCaption = function createCaption() {
+    var captionProps = mergeProps({
+      className: 'p-galleria-caption'
+    }, props.ptm('caption'));
     if (props.caption) {
       var _content = props.caption(props.value[props.activeItemIndex]);
-      return /*#__PURE__*/React.createElement("div", {
-        className: "p-galleria-caption"
-      }, _content);
+      return /*#__PURE__*/React.createElement("div", captionProps, _content);
     }
     return null;
   };
@@ -293,14 +276,7 @@ var GalleriaItem = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
       'p-highlight': isActive
     });
     var indicator = props.indicator && props.indicator(index);
-    if (!indicator) {
-      indicator = /*#__PURE__*/React.createElement("button", {
-        type: "button",
-        tabIndex: -1,
-        className: "p-link"
-      }, /*#__PURE__*/React.createElement(Ripple, null));
-    }
-    return /*#__PURE__*/React.createElement("li", {
+    var indicatorProps = mergeProps({
       className: className,
       key: key,
       tabIndex: 0,
@@ -313,18 +289,27 @@ var GalleriaItem = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
       onKeyDown: function onKeyDown(e) {
         return onIndicatorKeyDown(e, index);
       }
-    }, indicator);
+    }, props.ptm('indicator'));
+    if (!indicator) {
+      indicator = /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        tabIndex: -1,
+        className: "p-link"
+      }, /*#__PURE__*/React.createElement(Ripple, null));
+    }
+    return /*#__PURE__*/React.createElement("li", indicatorProps, indicator);
   };
   var createIndicators = function createIndicators() {
     if (props.showIndicators) {
       var className = classNames('p-galleria-indicators p-reset', props.indicatorsContentClassName);
       var _indicators = [];
+      var indicatorsProps = mergeProps({
+        className: className
+      }, props.ptm('indicators'));
       for (var i = 0; i < props.value.length; i++) {
         _indicators.push(createIndicator(i));
       }
-      return /*#__PURE__*/React.createElement("ul", {
-        className: className
-      }, _indicators);
+      return /*#__PURE__*/React.createElement("ul", indicatorsProps, _indicators);
     }
     return null;
   };
@@ -333,14 +318,17 @@ var GalleriaItem = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   var forwardNavigator = createForwardNavigator();
   var caption = createCaption();
   var indicators = createIndicators();
-  return /*#__PURE__*/React.createElement("div", {
+  var itemWrapperProps = mergeProps({
     ref: ref,
-    className: "p-galleria-item-wrapper"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "p-galleria-item-container"
-  }, backwardNavigator, /*#__PURE__*/React.createElement("div", {
-    className: "p-galleria-item"
-  }, content), forwardNavigator, caption), indicators);
+    className: 'p-galleria-item-wrapper'
+  }, props.ptm('itemWrapper'));
+  var itemContainerProps = mergeProps({
+    className: 'p-galleria-item-container'
+  }, props.ptm('itemContainer'));
+  var itemProps = mergeProps({
+    className: 'p-galleria-item'
+  }, props.ptm('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';
 
@@ -360,6 +348,8 @@ function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
 
+function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var GalleriaThumbnailItem = /*#__PURE__*/React.memo(function (props) {
   var onItemClick = function onItemClick(event) {
     props.onItemClick({
@@ -383,14 +373,16 @@ var GalleriaThumbnailItem = /*#__PURE__*/React.memo(function (props) {
     'p-galleria-thumbnail-item-start': props.start,
     'p-galleria-thumbnail-item-end': props.end
   }, props.className);
-  return /*#__PURE__*/React.createElement("div", {
+  var thumbnailItemProps = mergeProps({
     className: className
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "p-galleria-thumbnail-item-content",
+  }, props.ptm('thumbnailItem'));
+  var thumbnailItemContentProps = mergeProps({
+    className: 'p-galleria-thumbnail-item-content',
     tabIndex: tabIndex,
     onClick: onItemClick,
     onKeyDown: onItemKeyDown
-  }, content));
+  }, props.ptm('thumbnailItemContent'));
+  return /*#__PURE__*/React.createElement("div", thumbnailItemProps, /*#__PURE__*/React.createElement("div", thumbnailItemContentProps, content));
 });
 var GalleriaThumbnails = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _React$useState = React.useState(props.numVisible),
@@ -617,7 +609,8 @@ var GalleriaThumbnails = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(
         start: start,
         end: end,
         onItemClick: onItemClick,
-        current: current
+        current: current,
+        ptm: props.ptm
       });
     });
   };
@@ -628,21 +621,19 @@ var GalleriaThumbnails = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(
         'p-disabled': isDisabled
       });
       var iconClassName = 'p-galleria-thumbnail-prev-icon';
-      var icon = props.isVertical ? props.prevThumbnailIcon || /*#__PURE__*/React.createElement(ChevronUpIcon, {
+      var previousThumbnailIconProps = mergeProps({
         className: iconClassName
-      }) : props.prevThumbnailIcon || /*#__PURE__*/React.createElement(ChevronLeftIcon, {
-        className: iconClassName
-      });
-      var prevThumbnailIcon = IconUtils.getJSXIcon(icon, {
-        className: iconClassName
-      }, {
+      }, props.ptm('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$1({}, previousThumbnailIconProps), {
         props: props
       });
-      return /*#__PURE__*/React.createElement("button", {
+      var previousThumbnailButtonProps = mergeProps({
         className: buttonClassName,
         onClick: navBackward,
         disabled: isDisabled
-      }, prevThumbnailIcon, /*#__PURE__*/React.createElement(Ripple, null));
+      }, props.ptm('previousThumbnailButton'));
+      return /*#__PURE__*/React.createElement("button", previousThumbnailButtonProps, prevThumbnailIcon, /*#__PURE__*/React.createElement(Ripple, null));
     }
     return null;
   };
@@ -653,21 +644,19 @@ var GalleriaThumbnails = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(
         'p-disabled': isDisabled
       });
       var iconClassName = 'p-galleria-thumbnail-next-icon';
-      var icon = props.isVertical ? props.nextThumbnailIcon || /*#__PURE__*/React.createElement(ChevronDownIcon, {
-        className: iconClassName
-      }) : props.nextThumbnailIcon || /*#__PURE__*/React.createElement(ChevronRightIcon, {
-        className: iconClassName
-      });
-      var nextThumbnailIcon = IconUtils.getJSXIcon(icon, {
+      var nextThumbnailIconProps = mergeProps({
         className: iconClassName
-      }, {
+      }, props.ptm('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$1({}, nextThumbnailIconProps), {
         props: props
       });
-      return /*#__PURE__*/React.createElement("button", {
+      var nextThumbnailButtonProps = mergeProps({
         className: buttonClassName,
         onClick: navForward,
         disabled: isDisabled
-      }, nextThumbnailIcon, /*#__PURE__*/React.createElement(Ripple, null));
+      }, props.ptm('nextThumbnailButton'));
+      return /*#__PURE__*/React.createElement("button", nextThumbnailButtonProps, nextThumbnailIcon, /*#__PURE__*/React.createElement(Ripple, null));
     }
     return null;
   };
@@ -676,26 +665,30 @@ var GalleriaThumbnails = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(
     var height = props.isVertical ? props.contentHeight : '';
     var backwardNavigator = createBackwardNavigator();
     var forwardNavigator = createForwardNavigator();
-    return /*#__PURE__*/React.createElement("div", {
-      className: "p-galleria-thumbnail-container"
-    }, backwardNavigator, /*#__PURE__*/React.createElement("div", {
-      className: "p-galleria-thumbnail-items-container",
+    var thumbnailContainerProps = mergeProps({
+      className: 'p-galleria-thumbnail-container'
+    }, props.ptm('thumbnailContainer'));
+    var thumbnailItemsContainerProps = mergeProps({
+      className: 'p-galleria-thumbnail-items-container',
       style: {
         height: height
       }
-    }, /*#__PURE__*/React.createElement("div", {
+    }, props.ptm('thumbnailItemsContainer'));
+    var thumbnailItemsProps = mergeProps({
       ref: itemsContainerRef,
-      className: "p-galleria-thumbnail-items",
+      className: 'p-galleria-thumbnail-items',
       onTransitionEnd: onTransitionEnd,
       onTouchStart: onTouchStart,
       onTouchMove: onTouchMove,
       onTouchEnd: onTouchEnd
-    }, items)), forwardNavigator);
+    }, props.ptm('thumbnailItems'));
+    return /*#__PURE__*/React.createElement("div", thumbnailContainerProps, backwardNavigator, /*#__PURE__*/React.createElement("div", thumbnailItemsContainerProps, /*#__PURE__*/React.createElement("div", thumbnailItemsProps, items)), forwardNavigator);
   };
   var content = createContent();
-  return /*#__PURE__*/React.createElement("div", {
-    className: "p-galleria-thumbnail-wrapper"
-  }, content);
+  var thumbnailWrapperProps = mergeProps({
+    className: 'p-galleria-thumbnail-wrapper'
+  }, props.ptm('thumbnailWrapper'));
+  return /*#__PURE__*/React.createElement("div", thumbnailWrapperProps, content);
 }));
 GalleriaThumbnailItem.displayName = 'GalleriaThumbnailItem';
 GalleriaThumbnails.displayName = 'GalleriaThumbnails';
@@ -725,6 +718,16 @@ var Galleria = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   var maskRef = React.useRef(null);
   var activeItemIndex = props.onItemChange ? props.activeIndex : activeIndexState;
   var isVertical = props.thumbnailsPosition === 'left' || props.thumbnailsPosition === 'right';
+  var _GalleriaBase$setMeta = GalleriaBase.setMetaData({
+      props: props,
+      state: {
+        visible: visibleState,
+        numVisible: numVisibleState,
+        slideShowActive: slideShowActiveState,
+        activeIndex: activeIndexState
+      }
+    }),
+    ptm = _GalleriaBase$setMeta.ptm;
   useInterval(function () {
     onActiveItemChange({
       index: props.circular && props.value.length - 1 === activeItemIndex ? 0 : activeItemIndex + 1
@@ -813,23 +816,24 @@ var Galleria = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     };
   });
   var createHeader = function createHeader() {
+    var headerProps = mergeProps({
+      className: 'p-galleria-header'
+    }, ptm('header'));
     if (props.header) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "p-galleria-header"
-      }, props.header);
+      return /*#__PURE__*/React.createElement("div", headerProps, props.header);
     }
     return null;
   };
   var createFooter = function createFooter() {
+    var footerProps = mergeProps({
+      className: 'p-galleria-footer'
+    }, ptm('footer'));
     if (props.footer) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "p-galleria-footer"
-      }, props.footer);
+      return /*#__PURE__*/React.createElement("div", footerProps, props.footer);
     }
     return null;
   };
   var createElement = function createElement() {
-    var otherProps = GalleriaBase.getOtherProps(props);
     var thumbnailsPosClassName = props.showThumbnails && getPositionClassName('p-galleria-thumbnails', props.thumbnailsPosition);
     var indicatorPosClassName = props.showIndicators && getPositionClassName('p-galleria-indicators', props.indicatorsPosition);
     var galleriaClassName = classNames('p-galleria p-component', props.className, {
@@ -843,26 +847,32 @@ var Galleria = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       className: 'p-galleria-close-icon',
       'aria-hidden': true
     };
-    var icon = props.closeIcon || /*#__PURE__*/React.createElement(TimesIcon, iconProps);
-    var closeIcon = IconUtils.getJSXIcon(icon, _objectSpread({}, iconProps), {
+    var closeIconProps = mergeProps({
+      className: iconProps
+    }, ptm('closeIcon'));
+    var icon = props.closeIcon || /*#__PURE__*/React.createElement(TimesIcon, closeIconProps);
+    var closeIcon = IconUtils.getJSXIcon(icon, _objectSpread({}, closeIconProps), {
       props: props
     });
-    var closeButton = props.fullScreen && /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      className: "p-galleria-close p-link",
-      "aria-label": localeOption('close'),
+    var closeButtonProps = mergeProps({
+      type: 'button',
+      className: 'p-galleria-close p-link',
+      'aria-label': localeOption('close'),
       onClick: hide
-    }, closeIcon, /*#__PURE__*/React.createElement(Ripple, null));
+    }, ptm('closeButton'));
+    var closeButton = props.fullScreen && /*#__PURE__*/React.createElement("button", closeButtonProps, closeIcon, /*#__PURE__*/React.createElement(Ripple, null));
     var header = createHeader();
     var footer = createFooter();
-    var element = /*#__PURE__*/React.createElement("div", _extends({
+    var rootProps = mergeProps({
       ref: elementRef,
       id: props.id,
       className: galleriaClassName,
       style: props.style
-    }, otherProps), closeButton, header, /*#__PURE__*/React.createElement("div", {
-      className: "p-galleria-content"
-    }, /*#__PURE__*/React.createElement(GalleriaItem, {
+    }, GalleriaBase.getOtherProps(props), ptm('root'));
+    var contentProps = mergeProps({
+      className: 'p-galleria-content'
+    }, ptm('content'));
+    var element = /*#__PURE__*/React.createElement("div", rootProps, closeButton, header, /*#__PURE__*/React.createElement("div", contentProps, /*#__PURE__*/React.createElement(GalleriaItem, {
       ref: previewContentRef,
       value: props.value,
       activeItemIndex: activeItemIndex,
@@ -879,7 +889,8 @@ var Galleria = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       autoPlay: props.autoPlay,
       slideShowActive: slideShowActiveState,
       startSlideShow: startSlideShow,
-      stopSlideShow: stopSlideShow
+      stopSlideShow: stopSlideShow,
+      ptm: ptm
     }), props.showThumbnails && /*#__PURE__*/React.createElement(GalleriaThumbnails, {
       value: props.value,
       activeItemIndex: activeItemIndex,
@@ -895,7 +906,8 @@ var Galleria = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       showThumbnailNavigators: props.showThumbnailNavigators,
       autoPlay: props.autoPlay,
       slideShowActive: slideShowActiveState,
-      stopSlideShow: stopSlideShow
+      stopSlideShow: stopSlideShow,
+      ptm: ptm
     })), footer);
     return element;
   };
@@ -905,10 +917,11 @@ var Galleria = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       var maskClassName = classNames('p-galleria-mask', {
         'p-galleria-visible': visibleState
       });
-      var galleriaWrapper = /*#__PURE__*/React.createElement("div", {
+      var maskProps = mergeProps({
         ref: maskRef,
         className: maskClassName
-      }, /*#__PURE__*/React.createElement(CSSTransition, {
+      }, ptm('mask'));
+      var galleriaWrapper = /*#__PURE__*/React.createElement("div", maskProps, /*#__PURE__*/React.createElement(CSSTransition, {
         nodeRef: elementRef,
         classNames: "p-galleria",
         "in": visibleState,