primereact 8.7.3 → 9.0.0-beta.1

package/togglebutton/togglebutton.cjs.js

@@ -86,13 +86,16 @@ var ToggleButton = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
   React__namespace.useImperativeHandle(ref, function () {
     return {
       props: props,
+      focus: function focus() {
+        return utils.DomHandler.focusFirstElement(elementRef.current);
+      },
       getElement: function getElement() {
         return elementRef.current;
       }
     };
   });
   var hasTooltip = utils.ObjectUtils.isNotEmpty(props.tooltip);
-  var tabIndex = !props.disabled && props.tabIndex;
+  var tabIndex = props.disabled ? -1 : props.tabIndex;
   var otherProps = utils.ObjectUtils.findDiffKeys(props, ToggleButton.defaultProps);
   var className = utils.classNames('p-button p-togglebutton p-component', {
     'p-button-icon-only': hasIcon && !hasLabel,

package/togglebutton/togglebutton.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/ripple"),n=require("primereact/tooltip"),o=require("primereact/utils");function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var r=l(e);function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},a.apply(this,arguments)}var c=r.memo(r.forwardRef((function(e,l){var i=r.useRef(null),u=e.onLabel&&e.onLabel.length>0&&e.offLabel&&e.offLabel.length>0,s=e.onIcon&&e.onIcon.length>0&&e.offIcon&&e.offIcon.length>0,p=u?e.checked?e.onLabel:e.offLabel:"&nbsp;",f=e.checked?e.onIcon:e.offIcon,d=function(t){!e.disabled&&e.onChange&&e.onChange({originalEvent:t,value:!e.checked,stopPropagation:function(){},preventDefault:function(){},target:{name:e.name,id:e.id,value:!e.checked}})};r.useImperativeHandle(l,(function(){return{props:e,getElement:function(){return i.current}}}));var b=o.ObjectUtils.isNotEmpty(e.tooltip),g=!e.disabled&&e.tabIndex,m=o.ObjectUtils.findDiffKeys(e,c.defaultProps),h=o.classNames("p-button p-togglebutton p-component",{"p-button-icon-only":s&&!u,"p-highlight":e.checked,"p-disabled":e.disabled},e.className),v=function(){if(s){var t=o.classNames("p-button-icon p-c",{"p-button-icon-left":"left"===e.iconPos&&p,"p-button-icon-right":"right"===e.iconPos&&p});return o.IconUtils.getJSXIcon(f,{className:t},{props:e})}return null}();return r.createElement(r.Fragment,null,r.createElement("div",a({ref:i,id:e.id,className:h,style:e.style},m,{onClick:d,onFocus:e.onFocus,onBlur:e.onBlur,onKeyDown:function(e){32===e.keyCode&&(d(e),e.preventDefault())},tabIndex:g,role:"button","aria-pressed":e.checked}),v,r.createElement("span",{className:"p-button-label"},p),r.createElement(t.Ripple,null)),b&&r.createElement(n.Tooltip,a({target:i,content:e.tooltip},e.tooltipOptions)))})));c.displayName="ToggleButton",c.defaultProps={__TYPE:"ToggleButton",id:null,onIcon:null,offIcon:null,onLabel:"Yes",offLabel:"No",iconPos:"left",style:null,className:null,checked:!1,tabIndex:0,tooltip:null,tooltipOptions:null,onChange:null,onFocus:null,onBlur:null},exports.ToggleButton=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/ripple"),n=require("primereact/tooltip"),o=require("primereact/utils");function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var r=l(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 o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},c.apply(this,arguments)}var a=r.memo(r.forwardRef((function(e,l){var u=r.useRef(null),i=e.onLabel&&e.onLabel.length>0&&e.offLabel&&e.offLabel.length>0,s=e.onIcon&&e.onIcon.length>0&&e.offIcon&&e.offIcon.length>0,f=i?e.checked?e.onLabel:e.offLabel:"&nbsp;",p=e.checked?e.onIcon:e.offIcon,d=function(t){!e.disabled&&e.onChange&&e.onChange({originalEvent:t,value:!e.checked,stopPropagation:function(){},preventDefault:function(){},target:{name:e.name,id:e.id,value:!e.checked}})};r.useImperativeHandle(l,(function(){return{props:e,focus:function(){return o.DomHandler.focusFirstElement(u.current)},getElement:function(){return u.current}}}));var b=o.ObjectUtils.isNotEmpty(e.tooltip),g=e.disabled?-1:e.tabIndex,m=o.ObjectUtils.findDiffKeys(e,a.defaultProps),h=o.classNames("p-button p-togglebutton p-component",{"p-button-icon-only":s&&!i,"p-highlight":e.checked,"p-disabled":e.disabled},e.className),v=function(){if(s){var t=o.classNames("p-button-icon p-c",{"p-button-icon-left":"left"===e.iconPos&&f,"p-button-icon-right":"right"===e.iconPos&&f});return o.IconUtils.getJSXIcon(p,{className:t},{props:e})}return null}();return r.createElement(r.Fragment,null,r.createElement("div",c({ref:u,id:e.id,className:h,style:e.style},m,{onClick:d,onFocus:e.onFocus,onBlur:e.onBlur,onKeyDown:function(e){32===e.keyCode&&(d(e),e.preventDefault())},tabIndex:g,role:"button","aria-pressed":e.checked}),v,r.createElement("span",{className:"p-button-label"},f),r.createElement(t.Ripple,null)),b&&r.createElement(n.Tooltip,c({target:u,content:e.tooltip},e.tooltipOptions)))})));a.displayName="ToggleButton",a.defaultProps={__TYPE:"ToggleButton",id:null,onIcon:null,offIcon:null,onLabel:"Yes",offLabel:"No",iconPos:"left",style:null,className:null,checked:!1,tabIndex:0,tooltip:null,tooltipOptions:null,onChange:null,onFocus:null,onBlur:null},exports.ToggleButton=a;

package/togglebutton/togglebutton.d.ts

@@ -1,38 +1,145 @@
+/**
+ *
+ * ToggleButton is used to select a boolean value using a button.
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/togglebutton/)
+ *
+ * @module togglebutton
+ *
+ */
 import * as React from 'react';
-import TooltipOptions from '../tooltip/tooltipoptions';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
 import { IconType } from '../utils';
 
-type ToggleButtonIconPositionType = 'left' | 'right';
-
+/**
+ * Custom toggle button change target options
+ * @group Misc
+ */
 interface ToggleButtonChangeTargetOptions {
+    /**
+     * The name of the element.
+     */
     name: string;
+    /**
+     * Unique identifier of the element.
+     */
     id: string;
+    /**
+     * Collapsed state as a boolean.
+     */
     value: boolean;
 }
 
-interface ToggleButtonChangeParams {
+/**
+ * Custom change event.
+ * @see {@link ToggleButtonProps.onChange}
+ * @event
+ */
+interface ToggleButtonChangeEvent {
+    /**
+     * Browser event
+     */
     originalEvent: React.SyntheticEvent;
+    /**
+     * Value as the checked state.
+     */
     value: boolean;
+    /**
+     * Stops the event from propagating.
+     */
     stopPropagation(): void;
+    /**
+     * Prevents the default action of the event.
+     */
     preventDefault(): void;
+    /**
+     * Target element.
+     */
     target: ToggleButtonChangeTargetOptions;
 }
 
+/**
+ * Defines valid properties in ToggleButton component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
 export interface ToggleButtonProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
-    onIcon?: IconType<ToggleButtonProps>;
-    offIcon?: IconType<ToggleButtonProps>;
-    onLabel?: string;
-    offLabel?: string;
-    iconPos?: ToggleButtonIconPositionType;
-    checked?: boolean;
-    tooltip?: string;
-    tooltipOptions?: TooltipOptions;
-    onChange?(e: ToggleButtonChangeParams): void;
-    onFocus?(event: React.FocusEvent<HTMLElement>): void;
+    /**
+     * Specifies the on/off state of the button.
+     * @defaultValue false
+     */
+    checked?: boolean | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Position of the icon, valid values are "left" and "right".
+     * @defaultValue left
+     */
+    iconPos?: 'left' | 'right' | undefined;
+    /**
+     * Icon for the off state.
+     */
+    offIcon?: IconType<ToggleButtonProps> | undefined;
+    /**
+     * Label for the off state.
+     * @defaultValue no
+     */
+    offLabel?: string | undefined;
+    /**
+     * Icon for the on state.
+     */
+    onIcon?: IconType<ToggleButtonProps> | undefined;
+    /**
+     * Label for the on state.
+     * @defaultValue yes
+     */
+    onLabel?: string | undefined;
+    /**
+     * Content of the tooltip.
+     */
+    tooltip?: string | undefined;
+    /**
+     * Configuration of the tooltip, refer to the tooltip documentation for more information.
+     */
+    tooltipOptions?: TooltipOptions | undefined;
+    /**
+     * Callback to invoke when autocomplete loses focus.
+     * @param {React.FocusEvent<HTMLElement>} event - Browser event.
+     */
     onBlur?(event: React.FocusEvent<HTMLElement>): void;
-    children?: React.ReactNode;
+    /**
+     * Callback to invoke on value change.
+     * @param {ToggleButtonChangeEvent} event - Browser event.
+     */
+    onChange?(event: ToggleButtonChangeEvent): void;
+    /**
+     * Callback to invoke when autocomplete gets focus.
+     * @param {React.FocusEvent<HTMLElement>} event - Browser event.
+     */
+    onFocus?(event: React.FocusEvent<HTMLElement>): void;
 }
 
+/**
+ * **PrimeReact - ToggleButton**
+ *
+ * _ToggleButton is used to select a boolean value using a button._
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/togglebutton/)
+ * --- ---
+ * ![PrimeReact](https://www.primefaces.org/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
 export declare class ToggleButton extends React.Component<ToggleButtonProps, any> {
+    /**
+     * Used to focus the component.
+     */
+    public focus(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement} Container element
+     */
     public getElement(): HTMLDivElement;
 }

package/togglebutton/togglebutton.esm.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Ripple } from 'primereact/ripple';
 import { Tooltip } from 'primereact/tooltip';
-import { ObjectUtils, classNames, IconUtils } from 'primereact/utils';
+import { DomHandler, ObjectUtils, classNames, IconUtils } from 'primereact/utils';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -62,13 +62,16 @@ var ToggleButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   React.useImperativeHandle(ref, function () {
     return {
       props: props,
+      focus: function focus() {
+        return DomHandler.focusFirstElement(elementRef.current);
+      },
       getElement: function getElement() {
         return elementRef.current;
       }
     };
   });
   var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
-  var tabIndex = !props.disabled && props.tabIndex;
+  var tabIndex = props.disabled ? -1 : props.tabIndex;
   var otherProps = ObjectUtils.findDiffKeys(props, ToggleButton.defaultProps);
   var className = classNames('p-button p-togglebutton p-component', {
     'p-button-icon-only': hasIcon && !hasLabel,

package/togglebutton/togglebutton.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import{Ripple as n}from"primereact/ripple";import{Tooltip as t}from"primereact/tooltip";import{ObjectUtils as o,classNames as l,IconUtils as a}from"primereact/utils";function r(){return r=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},r.apply(this,arguments)}var c=e.memo(e.forwardRef((function(i,u){var p=e.useRef(null),s=i.onLabel&&i.onLabel.length>0&&i.offLabel&&i.offLabel.length>0,f=i.onIcon&&i.onIcon.length>0&&i.offIcon&&i.offIcon.length>0,d=s?i.checked?i.onLabel:i.offLabel:"&nbsp;",m=i.checked?i.onIcon:i.offIcon,b=function(e){!i.disabled&&i.onChange&&i.onChange({originalEvent:e,value:!i.checked,stopPropagation:function(){},preventDefault:function(){},target:{name:i.name,id:i.id,value:!i.checked}})};e.useImperativeHandle(u,(function(){return{props:i,getElement:function(){return p.current}}}));var g=o.isNotEmpty(i.tooltip),h=!i.disabled&&i.tabIndex,v=o.findDiffKeys(i,c.defaultProps),I=l("p-button p-togglebutton p-component",{"p-button-icon-only":f&&!s,"p-highlight":i.checked,"p-disabled":i.disabled},i.className),y=function(){if(f){var e=l("p-button-icon p-c",{"p-button-icon-left":"left"===i.iconPos&&d,"p-button-icon-right":"right"===i.iconPos&&d});return a.getJSXIcon(m,{className:e},{props:i})}return null}();return e.createElement(e.Fragment,null,e.createElement("div",r({ref:p,id:i.id,className:I,style:i.style},v,{onClick:b,onFocus:i.onFocus,onBlur:i.onBlur,onKeyDown:function(e){32===e.keyCode&&(b(e),e.preventDefault())},tabIndex:h,role:"button","aria-pressed":i.checked}),y,e.createElement("span",{className:"p-button-label"},d),e.createElement(n,null)),g&&e.createElement(t,r({target:p,content:i.tooltip},i.tooltipOptions)))})));c.displayName="ToggleButton",c.defaultProps={__TYPE:"ToggleButton",id:null,onIcon:null,offIcon:null,onLabel:"Yes",offLabel:"No",iconPos:"left",style:null,className:null,checked:!1,tabIndex:0,tooltip:null,tooltipOptions:null,onChange:null,onFocus:null,onBlur:null};export{c as ToggleButton};
+import*as e from"react";import{Ripple as n}from"primereact/ripple";import{Tooltip as t}from"primereact/tooltip";import{DomHandler as o,ObjectUtils as l,classNames as r,IconUtils as a}from"primereact/utils";function c(){return c=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},c.apply(this,arguments)}var i=e.memo(e.forwardRef((function(u,p){var s=e.useRef(null),f=u.onLabel&&u.onLabel.length>0&&u.offLabel&&u.offLabel.length>0,d=u.onIcon&&u.onIcon.length>0&&u.offIcon&&u.offIcon.length>0,m=f?u.checked?u.onLabel:u.offLabel:"&nbsp;",b=u.checked?u.onIcon:u.offIcon,g=function(e){!u.disabled&&u.onChange&&u.onChange({originalEvent:e,value:!u.checked,stopPropagation:function(){},preventDefault:function(){},target:{name:u.name,id:u.id,value:!u.checked}})};e.useImperativeHandle(p,(function(){return{props:u,focus:function(){return o.focusFirstElement(s.current)},getElement:function(){return s.current}}}));var h=l.isNotEmpty(u.tooltip),v=u.disabled?-1:u.tabIndex,I=l.findDiffKeys(u,i.defaultProps),y=r("p-button p-togglebutton p-component",{"p-button-icon-only":d&&!f,"p-highlight":u.checked,"p-disabled":u.disabled},u.className),E=function(){if(d){var e=r("p-button-icon p-c",{"p-button-icon-left":"left"===u.iconPos&&m,"p-button-icon-right":"right"===u.iconPos&&m});return a.getJSXIcon(b,{className:e},{props:u})}return null}();return e.createElement(e.Fragment,null,e.createElement("div",c({ref:s,id:u.id,className:y,style:u.style},I,{onClick:g,onFocus:u.onFocus,onBlur:u.onBlur,onKeyDown:function(e){32===e.keyCode&&(g(e),e.preventDefault())},tabIndex:v,role:"button","aria-pressed":u.checked}),E,e.createElement("span",{className:"p-button-label"},m),e.createElement(n,null)),h&&e.createElement(t,c({target:s,content:u.tooltip},u.tooltipOptions)))})));i.displayName="ToggleButton",i.defaultProps={__TYPE:"ToggleButton",id:null,onIcon:null,offIcon:null,onLabel:"Yes",offLabel:"No",iconPos:"left",style:null,className:null,checked:!1,tabIndex:0,tooltip:null,tooltipOptions:null,onChange:null,onFocus:null,onBlur:null};export{i as ToggleButton};

package/togglebutton/togglebutton.js

@@ -81,13 +81,16 @@ this.primereact.togglebutton = (function (exports, React, ripple, tooltip, utils
     React__namespace.useImperativeHandle(ref, function () {
       return {
         props: props,
+        focus: function focus() {
+          return utils.DomHandler.focusFirstElement(elementRef.current);
+        },
         getElement: function getElement() {
           return elementRef.current;
         }
       };
     });
     var hasTooltip = utils.ObjectUtils.isNotEmpty(props.tooltip);
-    var tabIndex = !props.disabled && props.tabIndex;
+    var tabIndex = props.disabled ? -1 : props.tabIndex;
     var otherProps = utils.ObjectUtils.findDiffKeys(props, ToggleButton.defaultProps);
     var className = utils.classNames('p-button p-togglebutton p-component', {
       'p-button-icon-only': hasIcon && !hasLabel,

package/togglebutton/togglebutton.min.js

@@ -1 +1 @@
-this.primereact=this.primereact||{},this.primereact.togglebutton=function(e,t,n,o,l){"use strict";function r(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var a=r(t);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 o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},c.apply(this,arguments)}var i=a.memo(a.forwardRef((function(e,t){var r=a.useRef(null),u=e.onLabel&&e.onLabel.length>0&&e.offLabel&&e.offLabel.length>0,s=e.onIcon&&e.onIcon.length>0&&e.offIcon&&e.offIcon.length>0,p=u?e.checked?e.onLabel:e.offLabel:"&nbsp;",f=e.checked?e.onIcon:e.offIcon,b=function(t){!e.disabled&&e.onChange&&e.onChange({originalEvent:t,value:!e.checked,stopPropagation:function(){},preventDefault:function(){},target:{name:e.name,id:e.id,value:!e.checked}})};a.useImperativeHandle(t,(function(){return{props:e,getElement:function(){return r.current}}}));var d=l.ObjectUtils.isNotEmpty(e.tooltip),g=!e.disabled&&e.tabIndex,m=l.ObjectUtils.findDiffKeys(e,i.defaultProps),h=l.classNames("p-button p-togglebutton p-component",{"p-button-icon-only":s&&!u,"p-highlight":e.checked,"p-disabled":e.disabled},e.className),v=function(){if(s){var t=l.classNames("p-button-icon p-c",{"p-button-icon-left":"left"===e.iconPos&&p,"p-button-icon-right":"right"===e.iconPos&&p});return l.IconUtils.getJSXIcon(f,{className:t},{props:e})}return null}();return a.createElement(a.Fragment,null,a.createElement("div",c({ref:r,id:e.id,className:h,style:e.style},m,{onClick:b,onFocus:e.onFocus,onBlur:e.onBlur,onKeyDown:function(e){32===e.keyCode&&(b(e),e.preventDefault())},tabIndex:g,role:"button","aria-pressed":e.checked}),v,a.createElement("span",{className:"p-button-label"},p),a.createElement(n.Ripple,null)),d&&a.createElement(o.Tooltip,c({target:r,content:e.tooltip},e.tooltipOptions)))})));return i.displayName="ToggleButton",i.defaultProps={__TYPE:"ToggleButton",id:null,onIcon:null,offIcon:null,onLabel:"Yes",offLabel:"No",iconPos:"left",style:null,className:null,checked:!1,tabIndex:0,tooltip:null,tooltipOptions:null,onChange:null,onFocus:null,onBlur:null},e.ToggleButton=i,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.ripple,primereact.tooltip,primereact.utils);
+this.primereact=this.primereact||{},this.primereact.togglebutton=function(e,t,n,o,l){"use strict";function r(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var c=r(t);function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},a.apply(this,arguments)}var i=c.memo(c.forwardRef((function(e,t){var r=c.useRef(null),u=e.onLabel&&e.onLabel.length>0&&e.offLabel&&e.offLabel.length>0,s=e.onIcon&&e.onIcon.length>0&&e.offIcon&&e.offIcon.length>0,f=u?e.checked?e.onLabel:e.offLabel:"&nbsp;",p=e.checked?e.onIcon:e.offIcon,d=function(t){!e.disabled&&e.onChange&&e.onChange({originalEvent:t,value:!e.checked,stopPropagation:function(){},preventDefault:function(){},target:{name:e.name,id:e.id,value:!e.checked}})};c.useImperativeHandle(t,(function(){return{props:e,focus:function(){return l.DomHandler.focusFirstElement(r.current)},getElement:function(){return r.current}}}));var b=l.ObjectUtils.isNotEmpty(e.tooltip),g=e.disabled?-1:e.tabIndex,m=l.ObjectUtils.findDiffKeys(e,i.defaultProps),h=l.classNames("p-button p-togglebutton p-component",{"p-button-icon-only":s&&!u,"p-highlight":e.checked,"p-disabled":e.disabled},e.className),v=function(){if(s){var t=l.classNames("p-button-icon p-c",{"p-button-icon-left":"left"===e.iconPos&&f,"p-button-icon-right":"right"===e.iconPos&&f});return l.IconUtils.getJSXIcon(p,{className:t},{props:e})}return null}();return c.createElement(c.Fragment,null,c.createElement("div",a({ref:r,id:e.id,className:h,style:e.style},m,{onClick:d,onFocus:e.onFocus,onBlur:e.onBlur,onKeyDown:function(e){32===e.keyCode&&(d(e),e.preventDefault())},tabIndex:g,role:"button","aria-pressed":e.checked}),v,c.createElement("span",{className:"p-button-label"},f),c.createElement(n.Ripple,null)),b&&c.createElement(o.Tooltip,a({target:r,content:e.tooltip},e.tooltipOptions)))})));return i.displayName="ToggleButton",i.defaultProps={__TYPE:"ToggleButton",id:null,onIcon:null,offIcon:null,onLabel:"Yes",offLabel:"No",iconPos:"left",style:null,className:null,checked:!1,tabIndex:0,tooltip:null,tooltipOptions:null,onChange:null,onFocus:null,onBlur:null},e.ToggleButton=i,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.ripple,primereact.tooltip,primereact.utils);

package/toolbar/toolbar.cjs.js

@@ -44,8 +44,9 @@ var Toolbar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
   var elementRef = React__namespace.useRef(null);
   var otherProps = utils.ObjectUtils.findDiffKeys(props, Toolbar.defaultProps);
   var toolbarClass = utils.classNames('p-toolbar p-component', props.className);
-  var left = utils.ObjectUtils.getJSXElement(props.left, props);
-  var right = utils.ObjectUtils.getJSXElement(props.right, props);
+  var start = utils.ObjectUtils.getJSXElement(props.left || props.start, props);
+  var center = utils.ObjectUtils.getJSXElement(props.center, props);
+  var end = utils.ObjectUtils.getJSXElement(props.right || props.end, props);
   React__namespace.useImperativeHandle(ref, function () {
     return {
       props: props,
@@ -61,10 +62,12 @@ var Toolbar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
     style: props.style,
     role: "toolbar"
   }, otherProps), /*#__PURE__*/React__namespace.createElement("div", {
-    className: "p-toolbar-group-left"
-  }, left), /*#__PURE__*/React__namespace.createElement("div", {
-    className: "p-toolbar-group-right"
-  }, right));
+    className: "p-toolbar-group-start p-toolbar-group-left"
+  }, start), /*#__PURE__*/React__namespace.createElement("div", {
+    className: "p-toolbar-group-center"
+  }, center), /*#__PURE__*/React__namespace.createElement("div", {
+    className: "p-toolbar-group-end p-toolbar-group-right"
+  }, end));
 }));
 Toolbar.displayName = 'Toolbar';
 Toolbar.defaultProps = {
@@ -73,7 +76,10 @@ Toolbar.defaultProps = {
   style: null,
   className: null,
   left: null,
-  right: null
+  right: null,
+  start: null,
+  center: null,
+  end: null
 };
 
 exports.Toolbar = Toolbar;

package/toolbar/toolbar.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/utils");function r(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var l=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,l.get?l:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var l=r(e);function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var l in r)Object.prototype.hasOwnProperty.call(r,l)&&(e[l]=r[l])}return e},n.apply(this,arguments)}var a=l.memo(l.forwardRef((function(e,r){var o=l.useRef(null),s=t.ObjectUtils.findDiffKeys(e,a.defaultProps),u=t.classNames("p-toolbar p-component",e.className),i=t.ObjectUtils.getJSXElement(e.left,e),c=t.ObjectUtils.getJSXElement(e.right,e);return l.useImperativeHandle(r,(function(){return{props:e,getElement:function(){return o.current}}})),l.createElement("div",n({id:e.id,ref:o,className:u,style:e.style,role:"toolbar"},s),l.createElement("div",{className:"p-toolbar-group-left"},i),l.createElement("div",{className:"p-toolbar-group-right"},c))})));a.displayName="Toolbar",a.defaultProps={__TYPE:"Toolbar",id:null,style:null,className:null,left:null,right:null},exports.Toolbar=a;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/utils");function r(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var l=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,l.get?l:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var l=r(e);function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var l in r)Object.prototype.hasOwnProperty.call(r,l)&&(e[l]=r[l])}return e},n.apply(this,arguments)}var a=l.memo(l.forwardRef((function(e,r){var o=l.useRef(null),s=t.ObjectUtils.findDiffKeys(e,a.defaultProps),u=t.classNames("p-toolbar p-component",e.className),c=t.ObjectUtils.getJSXElement(e.left||e.start,e),i=t.ObjectUtils.getJSXElement(e.center,e),p=t.ObjectUtils.getJSXElement(e.right||e.end,e);return l.useImperativeHandle(r,(function(){return{props:e,getElement:function(){return o.current}}})),l.createElement("div",n({id:e.id,ref:o,className:u,style:e.style,role:"toolbar"},s),l.createElement("div",{className:"p-toolbar-group-start p-toolbar-group-left"},c),l.createElement("div",{className:"p-toolbar-group-center"},i),l.createElement("div",{className:"p-toolbar-group-end p-toolbar-group-right"},p))})));a.displayName="Toolbar",a.defaultProps={__TYPE:"Toolbar",id:null,style:null,className:null,left:null,right:null,start:null,center:null,end:null},exports.Toolbar=a;

package/toolbar/toolbar.d.ts

@@ -1,13 +1,63 @@
+/**
+ *
+ * Toolbar is a grouping component for buttons and other content.
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/toolbar/)
+ *
+ * @module toolbar
+ *
+ */
 import * as React from 'react';
 
-type ToolbarTemplateType = React.ReactNode | ((props: ToolbarProps) => React.ReactNode);
-
+/**
+ * Defines valid properties in Toolbar component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
 export interface ToolbarProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
-    left?: ToolbarTemplateType;
-    right?: ToolbarTemplateType;
-    children?: React.ReactNode;
+    /**
+     * The template of left section.
+     * @deprecated use start instead
+     */
+    left?: React.ReactNode | ((props: ToolbarProps) => React.ReactNode);
+    /**
+     * The template of right section.
+     * @deprecated use end instead
+     */
+    right?: React.ReactNode | ((props: ToolbarProps) => React.ReactNode);
+    /**
+     * The template of start section.
+     */
+    start?: React.ReactNode | ((props: ToolbarProps) => React.ReactNode);
+    /**
+     * The template of center section.
+     */
+    center?: React.ReactNode | ((props: ToolbarProps) => React.ReactNode);
+    /**
+     * The template of end section.
+     */
+    end?: React.ReactNode | ((props: ToolbarProps) => React.ReactNode);
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
 }
 
+/**
+ * **PrimeReact - Toolbar**
+ *
+ * _Toolbar is a grouping component for buttons and other content._
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/toolbar/)
+ * --- ---
+ * ![PrimeReact](https://www.primefaces.org/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
 export declare class Toolbar extends React.Component<ToolbarProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement} Container element
+     */
     public getElement(): HTMLDivElement;
 }

package/toolbar/toolbar.esm.js

@@ -20,8 +20,9 @@ var Toolbar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
   var elementRef = React.useRef(null);
   var otherProps = ObjectUtils.findDiffKeys(props, Toolbar.defaultProps);
   var toolbarClass = classNames('p-toolbar p-component', props.className);
-  var left = ObjectUtils.getJSXElement(props.left, props);
-  var right = ObjectUtils.getJSXElement(props.right, props);
+  var start = ObjectUtils.getJSXElement(props.left || props.start, props);
+  var center = ObjectUtils.getJSXElement(props.center, props);
+  var end = ObjectUtils.getJSXElement(props.right || props.end, props);
   React.useImperativeHandle(ref, function () {
     return {
       props: props,
@@ -37,10 +38,12 @@ var Toolbar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
     style: props.style,
     role: "toolbar"
   }, otherProps), /*#__PURE__*/React.createElement("div", {
-    className: "p-toolbar-group-left"
-  }, left), /*#__PURE__*/React.createElement("div", {
-    className: "p-toolbar-group-right"
-  }, right));
+    className: "p-toolbar-group-start p-toolbar-group-left"
+  }, start), /*#__PURE__*/React.createElement("div", {
+    className: "p-toolbar-group-center"
+  }, center), /*#__PURE__*/React.createElement("div", {
+    className: "p-toolbar-group-end p-toolbar-group-right"
+  }, end));
 }));
 Toolbar.displayName = 'Toolbar';
 Toolbar.defaultProps = {
@@ -49,7 +52,10 @@ Toolbar.defaultProps = {
   style: null,
   className: null,
   left: null,
-  right: null
+  right: null,
+  start: null,
+  center: null,
+  end: null
 };
 
 export { Toolbar };

package/toolbar/toolbar.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import{ObjectUtils as t,classNames as r}from"primereact/utils";function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var l in r)Object.prototype.hasOwnProperty.call(r,l)&&(e[l]=r[l])}return e},l.apply(this,arguments)}var a=e.memo(e.forwardRef((function(n,o){var s=e.useRef(null),i=t.findDiffKeys(n,a.defaultProps),u=r("p-toolbar p-component",n.className),p=t.getJSXElement(n.left,n),c=t.getJSXElement(n.right,n);return e.useImperativeHandle(o,(function(){return{props:n,getElement:function(){return s.current}}})),e.createElement("div",l({id:n.id,ref:s,className:u,style:n.style,role:"toolbar"},i),e.createElement("div",{className:"p-toolbar-group-left"},p),e.createElement("div",{className:"p-toolbar-group-right"},c))})));a.displayName="Toolbar",a.defaultProps={__TYPE:"Toolbar",id:null,style:null,className:null,left:null,right:null};export{a as Toolbar};
+import*as e from"react";import{ObjectUtils as t,classNames as r}from"primereact/utils";function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var l in r)Object.prototype.hasOwnProperty.call(r,l)&&(e[l]=r[l])}return e},l.apply(this,arguments)}var n=e.memo(e.forwardRef((function(a,o){var s=e.useRef(null),u=t.findDiffKeys(a,n.defaultProps),i=r("p-toolbar p-component",a.className),p=t.getJSXElement(a.left||a.start,a),c=t.getJSXElement(a.center,a),m=t.getJSXElement(a.right||a.end,a);return e.useImperativeHandle(o,(function(){return{props:a,getElement:function(){return s.current}}})),e.createElement("div",l({id:a.id,ref:s,className:i,style:a.style,role:"toolbar"},u),e.createElement("div",{className:"p-toolbar-group-start p-toolbar-group-left"},p),e.createElement("div",{className:"p-toolbar-group-center"},c),e.createElement("div",{className:"p-toolbar-group-end p-toolbar-group-right"},m))})));n.displayName="Toolbar",n.defaultProps={__TYPE:"Toolbar",id:null,style:null,className:null,left:null,right:null,start:null,center:null,end:null};export{n as Toolbar};

package/toolbar/toolbar.js

@@ -41,8 +41,9 @@ this.primereact.toolbar = (function (exports, React, utils) {
     var elementRef = React__namespace.useRef(null);
     var otherProps = utils.ObjectUtils.findDiffKeys(props, Toolbar.defaultProps);
     var toolbarClass = utils.classNames('p-toolbar p-component', props.className);
-    var left = utils.ObjectUtils.getJSXElement(props.left, props);
-    var right = utils.ObjectUtils.getJSXElement(props.right, props);
+    var start = utils.ObjectUtils.getJSXElement(props.left || props.start, props);
+    var center = utils.ObjectUtils.getJSXElement(props.center, props);
+    var end = utils.ObjectUtils.getJSXElement(props.right || props.end, props);
     React__namespace.useImperativeHandle(ref, function () {
       return {
         props: props,
@@ -58,10 +59,12 @@ this.primereact.toolbar = (function (exports, React, utils) {
       style: props.style,
       role: "toolbar"
     }, otherProps), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-toolbar-group-left"
-    }, left), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-toolbar-group-right"
-    }, right));
+      className: "p-toolbar-group-start p-toolbar-group-left"
+    }, start), /*#__PURE__*/React__namespace.createElement("div", {
+      className: "p-toolbar-group-center"
+    }, center), /*#__PURE__*/React__namespace.createElement("div", {
+      className: "p-toolbar-group-end p-toolbar-group-right"
+    }, end));
   }));
   Toolbar.displayName = 'Toolbar';
   Toolbar.defaultProps = {
@@ -70,7 +73,10 @@ this.primereact.toolbar = (function (exports, React, utils) {
     style: null,
     className: null,
     left: null,
-    right: null
+    right: null,
+    start: null,
+    center: null,
+    end: null
   };
 
   exports.Toolbar = Toolbar;

package/toolbar/toolbar.min.css

@@ -1 +1 @@
-.p-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}.p-toolbar-group-left,.p-toolbar-group-right{display:flex;align-items:center}
+.p-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}.p-toolbar-group-start,.p-toolbar-group-center,.p-toolbar-group-end{display:flex;align-items:center}.p-toolbar-group-left,.p-toolbar-group-right{display:flex;align-items:center}

package/toolbar/toolbar.min.js

@@ -1 +1 @@
-this.primereact=this.primereact||{},this.primereact.toolbar=function(e,t,r){"use strict";function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var l=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,l.get?l:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var n=l(t);function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var l in r)Object.prototype.hasOwnProperty.call(r,l)&&(e[l]=r[l])}return e},a.apply(this,arguments)}var o=n.memo(n.forwardRef((function(e,t){var l=n.useRef(null),i=r.ObjectUtils.findDiffKeys(e,o.defaultProps),c=r.classNames("p-toolbar p-component",e.className),s=r.ObjectUtils.getJSXElement(e.left,e),u=r.ObjectUtils.getJSXElement(e.right,e);return n.useImperativeHandle(t,(function(){return{props:e,getElement:function(){return l.current}}})),n.createElement("div",a({id:e.id,ref:l,className:c,style:e.style,role:"toolbar"},i),n.createElement("div",{className:"p-toolbar-group-left"},s),n.createElement("div",{className:"p-toolbar-group-right"},u))})));return o.displayName="Toolbar",o.defaultProps={__TYPE:"Toolbar",id:null,style:null,className:null,left:null,right:null},e.Toolbar=o,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.utils);
+this.primereact=this.primereact||{},this.primereact.toolbar=function(e,t,r){"use strict";function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var l=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,l.get?l:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var n=l(t);function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var l in r)Object.prototype.hasOwnProperty.call(r,l)&&(e[l]=r[l])}return e},a.apply(this,arguments)}var o=n.memo(n.forwardRef((function(e,t){var l=n.useRef(null),c=r.ObjectUtils.findDiffKeys(e,o.defaultProps),s=r.classNames("p-toolbar p-component",e.className),i=r.ObjectUtils.getJSXElement(e.left||e.start,e),u=r.ObjectUtils.getJSXElement(e.center,e),p=r.ObjectUtils.getJSXElement(e.right||e.end,e);return n.useImperativeHandle(t,(function(){return{props:e,getElement:function(){return l.current}}})),n.createElement("div",a({id:e.id,ref:l,className:s,style:e.style,role:"toolbar"},c),n.createElement("div",{className:"p-toolbar-group-start p-toolbar-group-left"},i),n.createElement("div",{className:"p-toolbar-group-center"},u),n.createElement("div",{className:"p-toolbar-group-end p-toolbar-group-right"},p))})));return o.displayName="Toolbar",o.defaultProps={__TYPE:"Toolbar",id:null,style:null,className:null,left:null,right:null,start:null,center:null,end:null},e.Toolbar=o,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.utils);

package/tooltip/tooltip.d.ts

@@ -1,21 +1,85 @@
+/**
+ *
+ * Tooltip functionality is integrated within various PrimeReact components.
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/tooltip/)
+ *
+ * @module tooltip
+ *
+ */
 import * as React from 'react';
-import TooltipOptions, { TooltipEventParams } from './tooltipoptions';
-
-type TooltipTargetType = string | string[] | HTMLElement;
+import { TooltipEvent, TooltipOptions } from './tooltipoptions';
 
+/**
+ * Defines valid properties in Tooltip component. In addition to these, all properties of TooltipOptions can be used in this component.
+ * @extends {TooltipOptions}
+ * @group Properties
+ */
 export interface TooltipProps extends TooltipOptions {
-    id?: string;
-    target?: TooltipTargetType;
-    content?: string;
-    children?: React.ReactNode;
+    /**
+     * Unique identifier of the element.
+     */
+    id?: string | undefined;
+    /**
+     * Target element on global tooltip option.
+     */
+    target?: string | string[] | HTMLElement | undefined;
+    /**
+     * Content to be displayed in tooltip.
+     */
+    content?: string | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
 }
 
+/**
+ * **PrimeReact - Tooltip**
+ *
+ * _Tooltip functionality is integrated within various PrimeReact components._
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/tooltip/)
+ * --- ---
+ * ![PrimeReact](https://www.primefaces.org/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
 export declare class Tooltip extends React.Component<TooltipProps, any> {
+    /**
+     * Used to reload target events. In some cases, the target element can be hidden initially. Later, when this element becomes visible, it will be necessary to bind tooltip events to this element.
+     * @param {HTMLElement} target - Target element.
+     */
     public updateTargetEvents(target: HTMLElement): void;
+    /**
+     * Used to load target events.
+     * @param {HTMLElement} target - Target element.
+     */
     public loadTargetEvents(target: HTMLElement): void;
+    /**
+     * Used to unload target events.
+     * @param {HTMLElement} target - Target element.
+     */
     public unloadTargetEvents(target: HTMLElement): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLElement} Container element
+     */
     public getElement(): HTMLElement;
+    /**
+     * Used to get target element.
+     * @return {HTMLElement} Target element
+     */
     public getTarget(): HTMLElement | null;
-    public show(e?: TooltipEventParams): null;
-    public hide(e?: TooltipEventParams): null;
+    /**
+     * Used to show the tooltip.
+     * @param {TooltipEvent} event - Browser event.
+     */
+    public show(event?: TooltipEvent): null;
+    /**
+     * Used to hide the tooltip.
+     * @param {TooltipEvent} event - Browser event.
+     */
+    public hide(event?: TooltipEvent): null;
 }