primereact 9.3.1 → 9.4.0

package/fieldset/fieldset.cjs.js

@@ -7,6 +7,7 @@ var csstransition = require('primereact/csstransition');
 var hooks = require('primereact/hooks');
 var ripple = require('primereact/ripple');
 var utils = require('primereact/utils');
+var componentbase = require('primereact/componentbase');
 var plus = require('primereact/icons/plus');
 var minus = require('primereact/icons/minus');
 
@@ -100,7 +101,7 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-var FieldsetBase = {
+var FieldsetBase = componentbase.ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Fieldset',
     id: null,
@@ -117,14 +118,8 @@ var FieldsetBase = {
     onToggle: null,
     onClick: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return utils.ObjectUtils.getMergedProps(props, FieldsetBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return utils.ObjectUtils.getDiffProps(props, FieldsetBase.defaultProps);
   }
-};
+});
 
 var Fieldset = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
   var props = FieldsetBase.getProps(inProps);
@@ -141,6 +136,14 @@ var Fieldset = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
   var contentRef = React__namespace.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;
   var toggle = function toggle(event) {
     if (props.toggleable) {
       collapsed ? expand(event) : collapse(event);
@@ -171,6 +174,17 @@ var Fieldset = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     }
   });
   var createContent = function createContent() {
+    var contentProps = utils.mergeProps({
+      className: 'p-fieldset-content'
+    }, ptm('content'));
+    var toggleableProps = utils.mergeProps({
+      ref: contentRef,
+      id: contentId,
+      'aria-hidden': collapsed,
+      role: 'region',
+      'aria-labelledby': headerId,
+      className: 'p-toggleable-content'
+    }, ptm('toggleableContent'));
     return /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, {
       nodeRef: contentRef,
       classNames: "p-toggleable-content",
@@ -181,28 +195,15 @@ var Fieldset = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
       "in": !collapsed,
       unmountOnExit: true,
       options: props.transitionOptions
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      ref: contentRef,
-      id: contentId,
-      className: "p-toggleable-content",
-      "aria-hidden": collapsed,
-      role: "region",
-      "aria-labelledby": headerId
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-fieldset-content"
-    }, props.children)));
+    }, /*#__PURE__*/React__namespace.createElement("div", toggleableProps, /*#__PURE__*/React__namespace.createElement("div", contentProps, props.children)));
   };
   var createToggleIcon = function createToggleIcon() {
     if (props.toggleable) {
-      var iconClassName = 'p-fieldset-toggler';
-      var icon = collapsed ? props.expandIcon || /*#__PURE__*/React__namespace.createElement(plus.PlusIcon, {
-        className: iconClassName
-      }) : props.collapseIcon || /*#__PURE__*/React__namespace.createElement(minus.MinusIcon, {
-        className: iconClassName
-      });
-      var toggleIcon = utils.IconUtils.getJSXIcon(icon, {
-        className: iconClassName
-      }, {
+      var togglerIconProps = utils.mergeProps({
+        className: 'p-fieldset-toggler'
+      }, ptm('togglericon'));
+      var icon = collapsed ? props.expandIcon || /*#__PURE__*/React__namespace.createElement(plus.PlusIcon, togglerIconProps) : props.collapseIcon || /*#__PURE__*/React__namespace.createElement(minus.MinusIcon, togglerIconProps);
+      var toggleIcon = utils.IconUtils.getJSXIcon(icon, togglerIconProps, {
         props: props
       });
       return toggleIcon;
@@ -210,30 +211,32 @@ var Fieldset = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     return null;
   };
   var createLegendContent = function createLegendContent() {
+    var legendTextProps = utils.mergeProps({
+      className: 'p-fieldset-legend-text'
+    }, ptm('legendTitle'));
+    var togglerProps = utils.mergeProps({
+      id: headerId,
+      'aria-expanded': !collapsed,
+      'aria-controls': contentId,
+      href: '#' + contentId,
+      tabIndex: props.toggleable ? null : -1
+    }, ptm('toggler'));
     if (props.toggleable) {
       var toggleIcon = createToggleIcon();
-      return /*#__PURE__*/React__namespace.createElement("a", {
-        href: '#' + contentId,
-        "aria-controls": contentId,
-        id: headerId,
-        "aria-expanded": !collapsed,
-        tabIndex: props.toggleable ? null : -1
-      }, toggleIcon, /*#__PURE__*/React__namespace.createElement("span", {
-        className: "p-fieldset-legend-text"
-      }, props.legend), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+      return /*#__PURE__*/React__namespace.createElement("a", togglerProps, toggleIcon, /*#__PURE__*/React__namespace.createElement("span", legendTextProps, props.legend), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
     }
-    return /*#__PURE__*/React__namespace.createElement("span", {
-      className: "p-fieldset-legend-text",
+    return /*#__PURE__*/React__namespace.createElement("span", _extends({}, legendTextProps, {
       id: headerId
-    }, props.legend);
+    }), props.legend);
   };
   var createLegend = function createLegend() {
+    var legendProps = utils.mergeProps({
+      className: 'p-fieldset-legend p-unselectable-text',
+      onClick: toggle
+    }, ptm('legend'));
     if (props.legend != null || props.toggleable) {
       var legendContent = createLegendContent();
-      return /*#__PURE__*/React__namespace.createElement("legend", {
-        className: "p-fieldset-legend p-unselectable-text",
-        onClick: toggle
-      }, legendContent);
+      return /*#__PURE__*/React__namespace.createElement("legend", legendProps, legendContent);
     }
   };
   React__namespace.useImperativeHandle(ref, function () {
@@ -247,20 +250,18 @@ var Fieldset = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
       }
     };
   });
-  var otherProps = FieldsetBase.getOtherProps(props);
-  var className = utils.classNames('p-fieldset p-component', {
-    'p-fieldset-toggleable': props.toggleable
-  }, props.className);
-  var legend = createLegend();
-  var content = createContent();
-  return /*#__PURE__*/React__namespace.createElement("fieldset", _extends({
+  var rootProps = utils.mergeProps({
     id: idState,
     ref: elementRef,
-    className: className,
-    style: props.style
-  }, otherProps, {
+    style: props.style,
+    className: utils.classNames('p-fieldset p-component', {
+      'p-fieldset-toggleable': props.toggleable
+    }, props.className),
     onClick: props.onClick
-  }), legend, content);
+  }, FieldsetBase.getOtherProps(props), ptm('root'));
+  var legend = createLegend();
+  var content = createContent();
+  return /*#__PURE__*/React__namespace.createElement("fieldset", rootProps, legend, content);
 });
 Fieldset.displayName = 'Fieldset';
 

package/fieldset/fieldset.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/csstransition"),n=require("primereact/hooks"),r=require("primereact/ripple"),l=require("primereact/utils"),o=require("primereact/icons/plus"),a=require("primereact/icons/minus");function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var u=i(e);function c(){return c=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},c.apply(this,arguments)}function s(e){if(Array.isArray(e))return e}function p(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,l,o,a,i=[],u=!0,c=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;u=!1}else for(;!(u=(r=o.call(n)).done)&&(i.push(r.value),i.length!==t);u=!0);}catch(e){c=!0,l=e}finally{try{if(!u&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(c)throw l}}return i}}function f(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function d(e,t){if(e){if("string"==typeof e)return f(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?f(e,t):void 0}}function g(){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 m(e,t){return s(e)||p(e,t)||d(e,t)||g()}var b={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:void 0},getProps:function(e){return l.ObjectUtils.getMergedProps(e,b.defaultProps)},getOtherProps:function(e){return l.ObjectUtils.getDiffProps(e,b.defaultProps)}},v=u.forwardRef((function(e,i){var s=b.getProps(e),p=m(u.useState(s.id),2),f=p[0],d=p[1],g=m(u.useState(s.collapsed),2),v=g[1],y=!!s.toggleable&&(s.onToggle?s.collapsed:g[0]),O=u.useRef(null),h=u.useRef(null),E=f+"_header",j=f+"_content",x=function(e){s.toggleable&&(y?P(e):I(e),s.onToggle&&s.onToggle({originalEvent:e,value:!y})),e.preventDefault()},P=function(e){s.onToggle||v(!1),s.onExpand&&s.onExpand(e)},I=function(e){s.onToggle||v(!0),s.onCollapse&&s.onCollapse(e)};n.useMountEffect((function(){s.id||d(l.UniqueComponentId())}));var N=function(){if(s.toggleable){var e="p-fieldset-toggler";return l.IconUtils.getJSXIcon(y?s.expandIcon||u.createElement(o.PlusIcon,{className:e}):s.collapseIcon||u.createElement(a.MinusIcon,{className:e}),{className:e},{props:s})}return null},C=function(){if(s.toggleable){var e=N();return u.createElement("a",{href:"#"+j,"aria-controls":j,id:E,"aria-expanded":!y,tabIndex:s.toggleable?null:-1},e,u.createElement("span",{className:"p-fieldset-legend-text"},s.legend),u.createElement(r.Ripple,null))}return u.createElement("span",{className:"p-fieldset-legend-text",id:E},s.legend)};u.useImperativeHandle(i,(function(){return{props:s,getElement:function(){return O.current},getContent:function(){return h.current}}}));var S=b.getOtherProps(s),T=l.classNames("p-fieldset p-component",{"p-fieldset-toggleable":s.toggleable},s.className),q=function(){if(null!=s.legend||s.toggleable){var e=C();return u.createElement("legend",{className:"p-fieldset-legend p-unselectable-text",onClick:x},e)}}(),_=u.createElement(t.CSSTransition,{nodeRef:h,classNames:"p-toggleable-content",timeout:{enter:1e3,exit:450},in:!y,unmountOnExit:!0,options:s.transitionOptions},u.createElement("div",{ref:h,id:j,className:"p-toggleable-content","aria-hidden":y,role:"region","aria-labelledby":E},u.createElement("div",{className:"p-fieldset-content"},s.children)));return u.createElement("fieldset",c({id:f,ref:O,className:T,style:s.style},S,{onClick:s.onClick}),q,_)}));v.displayName="Fieldset",exports.Fieldset=v;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/csstransition"),n=require("primereact/hooks"),r=require("primereact/ripple"),l=require("primereact/utils"),o=require("primereact/componentbase"),a=require("primereact/icons/plus"),i=require("primereact/icons/minus");function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var s=c(e);function u(){return u=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},u.apply(this,arguments)}function p(e){if(Array.isArray(e))return e}function g(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,l,o,a,i=[],c=!0,s=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=o.call(n)).done)&&(i.push(r.value),i.length!==t);c=!0);}catch(e){s=!0,l=e}finally{try{if(!c&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(s)throw l}}return i}}function d(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function f(e,t){if(e){if("string"==typeof e)return d(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?d(e,t):void 0}}function m(){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 b(e,t){return p(e)||g(e,t)||f(e,t)||m()}var v=o.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:void 0}}),y=s.forwardRef((function(e,o){var c=v.getProps(e),p=b(s.useState(c.id),2),g=p[0],d=p[1],f=b(s.useState(c.collapsed),2),m=f[1],y=!!c.toggleable&&(c.onToggle?c.collapsed:f[0]),E=s.useRef(null),h=s.useRef(null),O=g+"_header",P=g+"_content",x=v.setMetaData({props:c,state:{id:g,collapsed:y}}).ptm,j=function(e){c.toggleable&&(y?I(e):C(e),c.onToggle&&c.onToggle({originalEvent:e,value:!y})),e.preventDefault()},I=function(e){c.onToggle||m(!1),c.onExpand&&c.onExpand(e)},C=function(e){c.onToggle||m(!0),c.onCollapse&&c.onCollapse(e)};n.useMountEffect((function(){c.id||d(l.UniqueComponentId())}));var N=function(){if(c.toggleable){var e=l.mergeProps({className:"p-fieldset-toggler"},x("togglericon"));return l.IconUtils.getJSXIcon(y?c.expandIcon||s.createElement(a.PlusIcon,e):c.collapseIcon||s.createElement(i.MinusIcon,e),e,{props:c})}return null},S=function(){var e=l.mergeProps({className:"p-fieldset-legend-text"},x("legendTitle")),t=l.mergeProps({id:O,"aria-expanded":!y,"aria-controls":P,href:"#"+P,tabIndex:c.toggleable?null:-1},x("toggler"));if(c.toggleable){var n=N();return s.createElement("a",t,n,s.createElement("span",e,c.legend),s.createElement(r.Ripple,null))}return s.createElement("span",u({},e,{id:O}),c.legend)};s.useImperativeHandle(o,(function(){return{props:c,getElement:function(){return E.current},getContent:function(){return h.current}}}));var T,q,_=l.mergeProps({id:g,ref:E,style:c.style,className:l.classNames("p-fieldset p-component",{"p-fieldset-toggleable":c.toggleable},c.className),onClick:c.onClick},v.getOtherProps(c),x("root")),w=function(){var e=l.mergeProps({className:"p-fieldset-legend p-unselectable-text",onClick:j},x("legend"));if(null!=c.legend||c.toggleable){var t=S();return s.createElement("legend",e,t)}}(),k=(T=l.mergeProps({className:"p-fieldset-content"},x("content")),q=l.mergeProps({ref:h,id:P,"aria-hidden":y,role:"region","aria-labelledby":O,className:"p-toggleable-content"},x("toggleableContent")),s.createElement(t.CSSTransition,{nodeRef:h,classNames:"p-toggleable-content",timeout:{enter:1e3,exit:450},in:!y,unmountOnExit:!0,options:c.transitionOptions},s.createElement("div",q,s.createElement("div",T,c.children))));return s.createElement("fieldset",_,w,k)}));y.displayName="Fieldset",exports.Fieldset=y;

package/fieldset/fieldset.d.ts

@@ -9,7 +9,78 @@
  */
 import * as React from 'react';
 import { CSSTransitionProps } from '../csstransition';
-import { IconType } from '../utils/utils';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type FieldsetPassThroughType<T> = PassThroughType<T, FieldsetPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface FieldsetPassThroughMethodOptions {
+    props: FieldsetProps;
+    state: FieldsetState;
+}
+
+/**
+ * Custom toggle event.
+ * @see {@link FieldsetEmits.toggle}
+ */
+export interface FieldsetToggleEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.MouseEvent<HTMLElement>;
+    /**
+     * Collapsed state as a boolean
+     */
+    value: boolean;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link FieldsetProps.pt}
+ */
+export interface FieldsetPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: FieldsetPassThroughType<React.HTMLAttributes<HTMLFieldSetElement>>;
+    /**
+     * Uses to pass attributes to the legend's DOM element.
+     */
+    legend?: FieldsetPassThroughType<React.HTMLAttributes<HTMLLegendElement>>;
+    /**
+     * Uses to pass attributes to the toggler's DOM element.
+     */
+    toggler?: FieldsetPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the toggler icon's DOM element.
+     */
+    togglerIcon?: FieldsetPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the legend title's DOM element.
+     */
+    legendTitle?: FieldsetPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the toggleable content's DOM element.
+     */
+    toggleableContent?: FieldsetPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: FieldsetPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+}
+
+/**
+ * Defines current inline state in Fieldset component.
+ */
+export interface FieldsetState {
+    /**
+     * Current collapsed state as a boolean.
+     * @defaultValue false
+     */
+    collapse: boolean;
+}
 
 /**
  * Custom toggle event.
@@ -84,6 +155,11 @@ export interface FieldsetProps extends Omit<React.DetailedHTMLProps<React.HTMLAt
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {FieldsetPassThroughOptions}
+     */
+    pt?: FieldsetPassThroughOptions;
 }
 
 /**

package/fieldset/fieldset.esm.js

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { CSSTransition } from 'primereact/csstransition';
 import { useMountEffect } from 'primereact/hooks';
 import { Ripple } from 'primereact/ripple';
-import { ObjectUtils, UniqueComponentId, classNames, IconUtils } from 'primereact/utils';
+import { UniqueComponentId, mergeProps, classNames, IconUtils } from 'primereact/utils';
+import { ComponentBase } from 'primereact/componentbase';
 import { PlusIcon } from 'primereact/icons/plus';
 import { MinusIcon } from 'primereact/icons/minus';
 
@@ -76,7 +77,7 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-var FieldsetBase = {
+var FieldsetBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Fieldset',
     id: null,
@@ -93,14 +94,8 @@ var FieldsetBase = {
     onToggle: null,
     onClick: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return ObjectUtils.getMergedProps(props, FieldsetBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return ObjectUtils.getDiffProps(props, FieldsetBase.defaultProps);
   }
-};
+});
 
 var Fieldset = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var props = FieldsetBase.getProps(inProps);
@@ -117,6 +112,14 @@ var Fieldset = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   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;
   var toggle = function toggle(event) {
     if (props.toggleable) {
       collapsed ? expand(event) : collapse(event);
@@ -147,6 +150,17 @@ var Fieldset = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     }
   });
   var createContent = function createContent() {
+    var contentProps = mergeProps({
+      className: 'p-fieldset-content'
+    }, ptm('content'));
+    var toggleableProps = mergeProps({
+      ref: contentRef,
+      id: contentId,
+      'aria-hidden': collapsed,
+      role: 'region',
+      'aria-labelledby': headerId,
+      className: 'p-toggleable-content'
+    }, ptm('toggleableContent'));
     return /*#__PURE__*/React.createElement(CSSTransition, {
       nodeRef: contentRef,
       classNames: "p-toggleable-content",
@@ -157,28 +171,15 @@ var Fieldset = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       "in": !collapsed,
       unmountOnExit: true,
       options: props.transitionOptions
-    }, /*#__PURE__*/React.createElement("div", {
-      ref: contentRef,
-      id: contentId,
-      className: "p-toggleable-content",
-      "aria-hidden": collapsed,
-      role: "region",
-      "aria-labelledby": headerId
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "p-fieldset-content"
-    }, props.children)));
+    }, /*#__PURE__*/React.createElement("div", toggleableProps, /*#__PURE__*/React.createElement("div", contentProps, props.children)));
   };
   var createToggleIcon = function createToggleIcon() {
     if (props.toggleable) {
-      var iconClassName = 'p-fieldset-toggler';
-      var icon = collapsed ? props.expandIcon || /*#__PURE__*/React.createElement(PlusIcon, {
-        className: iconClassName
-      }) : props.collapseIcon || /*#__PURE__*/React.createElement(MinusIcon, {
-        className: iconClassName
-      });
-      var toggleIcon = IconUtils.getJSXIcon(icon, {
-        className: iconClassName
-      }, {
+      var togglerIconProps = mergeProps({
+        className: 'p-fieldset-toggler'
+      }, 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;
@@ -186,30 +187,32 @@ var Fieldset = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     return null;
   };
   var createLegendContent = function createLegendContent() {
+    var legendTextProps = mergeProps({
+      className: 'p-fieldset-legend-text'
+    }, ptm('legendTitle'));
+    var togglerProps = mergeProps({
+      id: headerId,
+      'aria-expanded': !collapsed,
+      'aria-controls': contentId,
+      href: '#' + contentId,
+      tabIndex: props.toggleable ? null : -1
+    }, ptm('toggler'));
     if (props.toggleable) {
       var toggleIcon = createToggleIcon();
-      return /*#__PURE__*/React.createElement("a", {
-        href: '#' + contentId,
-        "aria-controls": contentId,
-        id: headerId,
-        "aria-expanded": !collapsed,
-        tabIndex: props.toggleable ? null : -1
-      }, toggleIcon, /*#__PURE__*/React.createElement("span", {
-        className: "p-fieldset-legend-text"
-      }, props.legend), /*#__PURE__*/React.createElement(Ripple, null));
+      return /*#__PURE__*/React.createElement("a", togglerProps, toggleIcon, /*#__PURE__*/React.createElement("span", legendTextProps, props.legend), /*#__PURE__*/React.createElement(Ripple, null));
     }
-    return /*#__PURE__*/React.createElement("span", {
-      className: "p-fieldset-legend-text",
+    return /*#__PURE__*/React.createElement("span", _extends({}, legendTextProps, {
       id: headerId
-    }, props.legend);
+    }), props.legend);
   };
   var createLegend = function createLegend() {
+    var legendProps = mergeProps({
+      className: 'p-fieldset-legend p-unselectable-text',
+      onClick: toggle
+    }, ptm('legend'));
     if (props.legend != null || props.toggleable) {
       var legendContent = createLegendContent();
-      return /*#__PURE__*/React.createElement("legend", {
-        className: "p-fieldset-legend p-unselectable-text",
-        onClick: toggle
-      }, legendContent);
+      return /*#__PURE__*/React.createElement("legend", legendProps, legendContent);
     }
   };
   React.useImperativeHandle(ref, function () {
@@ -223,20 +226,18 @@ var Fieldset = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       }
     };
   });
-  var otherProps = FieldsetBase.getOtherProps(props);
-  var className = classNames('p-fieldset p-component', {
-    'p-fieldset-toggleable': props.toggleable
-  }, props.className);
-  var legend = createLegend();
-  var content = createContent();
-  return /*#__PURE__*/React.createElement("fieldset", _extends({
+  var rootProps = mergeProps({
     id: idState,
     ref: elementRef,
-    className: className,
-    style: props.style
-  }, otherProps, {
+    style: props.style,
+    className: classNames('p-fieldset p-component', {
+      'p-fieldset-toggleable': props.toggleable
+    }, props.className),
     onClick: props.onClick
-  }), legend, content);
+  }, FieldsetBase.getOtherProps(props), ptm('root'));
+  var legend = createLegend();
+  var content = createContent();
+  return /*#__PURE__*/React.createElement("fieldset", rootProps, legend, content);
 });
 Fieldset.displayName = 'Fieldset';
 

package/fieldset/fieldset.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import{CSSTransition as t}from"primereact/csstransition";import{useMountEffect as n}from"primereact/hooks";import{Ripple as l}from"primereact/ripple";import{ObjectUtils as r,UniqueComponentId as o,classNames as a,IconUtils as i}from"primereact/utils";import{PlusIcon as s}from"primereact/icons/plus";import{MinusIcon as c}from"primereact/icons/minus";function u(){return u=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var l in n)Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l])}return e},u.apply(this,arguments)}function p(e){if(Array.isArray(e))return e}function f(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var l,r,o,a,i=[],s=!0,c=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;s=!1}else for(;!(s=(l=o.call(n)).done)&&(i.push(l.value),i.length!==t);s=!0);}catch(e){c=!0,r=e}finally{try{if(!s&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(c)throw r}}return i}}function g(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,l=new Array(t);n<t;n++)l[n]=e[n];return l}function d(e,t){if(e){if("string"==typeof e)return g(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?g(e,t):void 0}}function m(){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 b(e,t){return p(e)||f(e,t)||d(e,t)||m()}var v={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:void 0},getProps:function(e){return r.getMergedProps(e,v.defaultProps)},getOtherProps:function(e){return r.getDiffProps(e,v.defaultProps)}},y=e.forwardRef((function(r,p){var f=v.getProps(r),g=b(e.useState(f.id),2),d=g[0],m=g[1],y=b(e.useState(f.collapsed),2),h=y[1],E=!!f.toggleable&&(f.onToggle?f.collapsed:y[0]),x=e.useRef(null),N=e.useRef(null),O=d+"_header",P=d+"_content",I=function(e){f.toggleable&&(E?C(e):j(e),f.onToggle&&f.onToggle({originalEvent:e,value:!E})),e.preventDefault()},C=function(e){f.onToggle||h(!1),f.onExpand&&f.onExpand(e)},j=function(e){f.onToggle||h(!0),f.onCollapse&&f.onCollapse(e)};n((function(){f.id||m(o())}));var S=function(){if(f.toggleable){var t="p-fieldset-toggler";return i.getJSXIcon(E?f.expandIcon||e.createElement(s,{className:t}):f.collapseIcon||e.createElement(c,{className:t}),{className:t},{props:f})}return null},T=function(){if(f.toggleable){var t=S();return e.createElement("a",{href:"#"+P,"aria-controls":P,id:O,"aria-expanded":!E,tabIndex:f.toggleable?null:-1},t,e.createElement("span",{className:"p-fieldset-legend-text"},f.legend),e.createElement(l,null))}return e.createElement("span",{className:"p-fieldset-legend-text",id:O},f.legend)};e.useImperativeHandle(p,(function(){return{props:f,getElement:function(){return x.current},getContent:function(){return N.current}}}));var w=v.getOtherProps(f),A=a("p-fieldset p-component",{"p-fieldset-toggleable":f.toggleable},f.className),k=function(){if(null!=f.legend||f.toggleable){var t=T();return e.createElement("legend",{className:"p-fieldset-legend p-unselectable-text",onClick:I},t)}}(),R=e.createElement(t,{nodeRef:N,classNames:"p-toggleable-content",timeout:{enter:1e3,exit:450},in:!E,unmountOnExit:!0,options:f.transitionOptions},e.createElement("div",{ref:N,id:P,className:"p-toggleable-content","aria-hidden":E,role:"region","aria-labelledby":O},e.createElement("div",{className:"p-fieldset-content"},f.children)));return e.createElement("fieldset",u({id:d,ref:x,className:A,style:f.style},w,{onClick:f.onClick}),k,R)}));y.displayName="Fieldset";export{y as Fieldset};
+import*as e from"react";import{CSSTransition as t}from"primereact/csstransition";import{useMountEffect as n}from"primereact/hooks";import{Ripple as l}from"primereact/ripple";import{UniqueComponentId as r,mergeProps as o,classNames as a,IconUtils as i}from"primereact/utils";import{ComponentBase as c}from"primereact/componentbase";import{PlusIcon as s}from"primereact/icons/plus";import{MinusIcon as u}from"primereact/icons/minus";function p(){return p=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var l in n)Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l])}return e},p.apply(this,arguments)}function g(e){if(Array.isArray(e))return e}function f(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var l,r,o,a,i=[],c=!0,s=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(l=o.call(n)).done)&&(i.push(l.value),i.length!==t);c=!0);}catch(e){s=!0,r=e}finally{try{if(!c&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(s)throw r}}return i}}function d(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,l=new Array(t);n<t;n++)l[n]=e[n];return l}function m(e,t){if(e){if("string"==typeof e)return d(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?d(e,t):void 0}}function b(){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 v(e,t){return g(e)||f(e,t)||m(e,t)||b()}var y=c.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:void 0}}),h=e.forwardRef((function(c,g){var f=y.getProps(c),d=v(e.useState(f.id),2),m=d[0],b=d[1],h=v(e.useState(f.collapsed),2),E=h[1],x=!!f.toggleable&&(f.onToggle?f.collapsed:h[0]),O=e.useRef(null),C=e.useRef(null),I=m+"_header",N=m+"_content",T=y.setMetaData({props:f,state:{id:m,collapsed:x}}).ptm,j=function(e){f.toggleable&&(x?S(e):w(e),f.onToggle&&f.onToggle({originalEvent:e,value:!x})),e.preventDefault()},S=function(e){f.onToggle||E(!1),f.onExpand&&f.onExpand(e)},w=function(e){f.onToggle||E(!0),f.onCollapse&&f.onCollapse(e)};n((function(){f.id||b(r())}));var A=function(){if(f.toggleable){var t=o({className:"p-fieldset-toggler"},T("togglericon"));return i.getJSXIcon(x?f.expandIcon||e.createElement(s,t):f.collapseIcon||e.createElement(u,t),t,{props:f})}return null},k=function(){var t=o({className:"p-fieldset-legend-text"},T("legendTitle")),n=o({id:I,"aria-expanded":!x,"aria-controls":N,href:"#"+N,tabIndex:f.toggleable?null:-1},T("toggler"));if(f.toggleable){var r=A();return e.createElement("a",n,r,e.createElement("span",t,f.legend),e.createElement(l,null))}return e.createElement("span",p({},t,{id:I}),f.legend)};e.useImperativeHandle(g,(function(){return{props:f,getElement:function(){return O.current},getContent:function(){return C.current}}}));var P,R,_=o({id:m,ref:O,style:f.style,className:a("p-fieldset p-component",{"p-fieldset-toggleable":f.toggleable},f.className),onClick:f.onClick},y.getOtherProps(f),T("root")),D=function(){var t=o({className:"p-fieldset-legend p-unselectable-text",onClick:j},T("legend"));if(null!=f.legend||f.toggleable){var n=k();return e.createElement("legend",t,n)}}(),F=(P=o({className:"p-fieldset-content"},T("content")),R=o({ref:C,id:N,"aria-hidden":x,role:"region","aria-labelledby":I,className:"p-toggleable-content"},T("toggleableContent")),e.createElement(t,{nodeRef:C,classNames:"p-toggleable-content",timeout:{enter:1e3,exit:450},in:!x,unmountOnExit:!0,options:f.transitionOptions},e.createElement("div",R,e.createElement("div",P,f.children))));return e.createElement("fieldset",_,D,F)}));h.displayName="Fieldset";export{h as Fieldset};