primereact 8.7.3 → 9.0.0-rc.1

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://primefaces.org/cdn/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 { ObjectUtils, DomHandler, classNames, IconUtils } from 'primereact/utils';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -18,7 +18,36 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-var ToggleButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
+var ToggleButtonBase = {
+  defaultProps: {
+    __TYPE: 'ToggleButton',
+    id: null,
+    onIcon: null,
+    offIcon: null,
+    onLabel: 'Yes',
+    offLabel: 'No',
+    iconPos: 'left',
+    style: null,
+    className: null,
+    checked: false,
+    tabIndex: 0,
+    tooltip: null,
+    tooltipOptions: null,
+    onChange: null,
+    onFocus: null,
+    onBlur: null,
+    children: undefined
+  },
+  getProps: function getProps(props) {
+    return ObjectUtils.getMergedProps(props, ToggleButtonBase.defaultProps);
+  },
+  getOtherProps: function getOtherProps(props) {
+    return ObjectUtils.getDiffProps(props, ToggleButtonBase.defaultProps);
+  }
+};
+
+var ToggleButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
+  var props = ToggleButtonBase.getProps(inProps);
   var elementRef = React.useRef(null);
   var hasLabel = props.onLabel && props.onLabel.length > 0 && props.offLabel && props.offLabel.length > 0;
   var hasIcon = props.onIcon && props.onIcon.length > 0 && props.offIcon && props.offIcon.length > 0;
@@ -62,14 +91,17 @@ 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 otherProps = ObjectUtils.findDiffKeys(props, ToggleButton.defaultProps);
+  var tabIndex = props.disabled ? -1 : props.tabIndex;
+  var otherProps = ToggleButtonBase.getOtherProps(props);
   var className = classNames('p-button p-togglebutton p-component', {
     'p-button-icon-only': hasIcon && !hasLabel,
     'p-highlight': props.checked,
@@ -97,23 +129,5 @@ var ToggleButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   }, props.tooltipOptions)));
 }));
 ToggleButton.displayName = 'ToggleButton';
-ToggleButton.defaultProps = {
-  __TYPE: 'ToggleButton',
-  id: null,
-  onIcon: null,
-  offIcon: null,
-  onLabel: 'Yes',
-  offLabel: 'No',
-  iconPos: 'left',
-  style: null,
-  className: null,
-  checked: false,
-  tabIndex: 0,
-  tooltip: null,
-  tooltipOptions: null,
-  onChange: null,
-  onFocus: null,
-  onBlur: null
-};
 
 export { ToggleButton };

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{ObjectUtils as o,DomHandler 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={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,children:void 0},getProps:function(e){return o.getMergedProps(e,i.defaultProps)},getOtherProps:function(e){return o.getDiffProps(e,i.defaultProps)}},u=e.memo(e.forwardRef((function(u,p){var s=i.getProps(u),f=e.useRef(null),d=s.onLabel&&s.onLabel.length>0&&s.offLabel&&s.offLabel.length>0,g=s.onIcon&&s.onIcon.length>0&&s.offIcon&&s.offIcon.length>0,m=d?s.checked?s.onLabel:s.offLabel:"&nbsp;",b=s.checked?s.onIcon:s.offIcon,h=function(e){!s.disabled&&s.onChange&&s.onChange({originalEvent:e,value:!s.checked,stopPropagation:function(){},preventDefault:function(){},target:{name:s.name,id:s.id,value:!s.checked}})};e.useImperativeHandle(p,(function(){return{props:s,focus:function(){return l.focusFirstElement(f.current)},getElement:function(){return f.current}}}));var v=o.isNotEmpty(s.tooltip),P=s.disabled?-1:s.tabIndex,I=i.getOtherProps(s),y=r("p-button p-togglebutton p-component",{"p-button-icon-only":g&&!d,"p-highlight":s.checked,"p-disabled":s.disabled},s.className),E=function(){if(g){var e=r("p-button-icon p-c",{"p-button-icon-left":"left"===s.iconPos&&m,"p-button-icon-right":"right"===s.iconPos&&m});return a.getJSXIcon(b,{className:e},{props:s})}return null}();return e.createElement(e.Fragment,null,e.createElement("div",c({ref:f,id:s.id,className:y,style:s.style},I,{onClick:h,onFocus:s.onFocus,onBlur:s.onBlur,onKeyDown:function(e){32===e.keyCode&&(h(e),e.preventDefault())},tabIndex:P,role:"button","aria-pressed":s.checked}),E,e.createElement("span",{className:"p-button-label"},m),e.createElement(n,null)),v&&e.createElement(t,c({target:f,content:s.tooltip},s.tooltipOptions)))})));u.displayName="ToggleButton";export{u as ToggleButton};

package/togglebutton/togglebutton.js

@@ -37,7 +37,36 @@ this.primereact.togglebutton = (function (exports, React, ripple, tooltip, utils
     return _extends.apply(this, arguments);
   }
 
-  var ToggleButton = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
+  var ToggleButtonBase = {
+    defaultProps: {
+      __TYPE: 'ToggleButton',
+      id: null,
+      onIcon: null,
+      offIcon: null,
+      onLabel: 'Yes',
+      offLabel: 'No',
+      iconPos: 'left',
+      style: null,
+      className: null,
+      checked: false,
+      tabIndex: 0,
+      tooltip: null,
+      tooltipOptions: null,
+      onChange: null,
+      onFocus: null,
+      onBlur: null,
+      children: undefined
+    },
+    getProps: function getProps(props) {
+      return utils.ObjectUtils.getMergedProps(props, ToggleButtonBase.defaultProps);
+    },
+    getOtherProps: function getOtherProps(props) {
+      return utils.ObjectUtils.getDiffProps(props, ToggleButtonBase.defaultProps);
+    }
+  };
+
+  var ToggleButton = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
+    var props = ToggleButtonBase.getProps(inProps);
     var elementRef = React__namespace.useRef(null);
     var hasLabel = props.onLabel && props.onLabel.length > 0 && props.offLabel && props.offLabel.length > 0;
     var hasIcon = props.onIcon && props.onIcon.length > 0 && props.offIcon && props.offIcon.length > 0;
@@ -81,14 +110,17 @@ 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 otherProps = utils.ObjectUtils.findDiffKeys(props, ToggleButton.defaultProps);
+    var tabIndex = props.disabled ? -1 : props.tabIndex;
+    var otherProps = ToggleButtonBase.getOtherProps(props);
     var className = utils.classNames('p-button p-togglebutton p-component', {
       'p-button-icon-only': hasIcon && !hasLabel,
       'p-highlight': props.checked,
@@ -116,24 +148,6 @@ this.primereact.togglebutton = (function (exports, React, ripple, tooltip, utils
     }, props.tooltipOptions)));
   }));
   ToggleButton.displayName = 'ToggleButton';
-  ToggleButton.defaultProps = {
-    __TYPE: 'ToggleButton',
-    id: null,
-    onIcon: null,
-    offIcon: null,
-    onLabel: 'Yes',
-    offLabel: 'No',
-    iconPos: 'left',
-    style: null,
-    className: null,
-    checked: false,
-    tabIndex: 0,
-    tooltip: null,
-    tooltipOptions: null,
-    onChange: null,
-    onFocus: null,
-    onBlur: null
-  };
 
   exports.ToggleButton = ToggleButton;
 

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={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,children:void 0},getProps:function(e){return l.ObjectUtils.getMergedProps(e,i.defaultProps)},getOtherProps:function(e){return l.ObjectUtils.getDiffProps(e,i.defaultProps)}},u=c.memo(c.forwardRef((function(e,t){var r=i.getProps(e),u=c.useRef(null),s=r.onLabel&&r.onLabel.length>0&&r.offLabel&&r.offLabel.length>0,p=r.onIcon&&r.onIcon.length>0&&r.offIcon&&r.offIcon.length>0,f=s?r.checked?r.onLabel:r.offLabel:"&nbsp;",d=r.checked?r.onIcon:r.offIcon,g=function(e){!r.disabled&&r.onChange&&r.onChange({originalEvent:e,value:!r.checked,stopPropagation:function(){},preventDefault:function(){},target:{name:r.name,id:r.id,value:!r.checked}})};c.useImperativeHandle(t,(function(){return{props:r,focus:function(){return l.DomHandler.focusFirstElement(u.current)},getElement:function(){return u.current}}}));var b=l.ObjectUtils.isNotEmpty(r.tooltip),m=r.disabled?-1:r.tabIndex,h=i.getOtherProps(r),v=l.classNames("p-button p-togglebutton p-component",{"p-button-icon-only":p&&!s,"p-highlight":r.checked,"p-disabled":r.disabled},r.className),O=function(){if(p){var e=l.classNames("p-button-icon p-c",{"p-button-icon-left":"left"===r.iconPos&&f,"p-button-icon-right":"right"===r.iconPos&&f});return l.IconUtils.getJSXIcon(d,{className:e},{props:r})}return null}();return c.createElement(c.Fragment,null,c.createElement("div",a({ref:u,id:r.id,className:v,style:r.style},h,{onClick:g,onFocus:r.onFocus,onBlur:r.onBlur,onKeyDown:function(e){32===e.keyCode&&(g(e),e.preventDefault())},tabIndex:m,role:"button","aria-pressed":r.checked}),O,c.createElement("span",{className:"p-button-label"},f),c.createElement(n.Ripple,null)),b&&c.createElement(o.Tooltip,a({target:u,content:r.tooltip},r.tooltipOptions)))})));return u.displayName="ToggleButton",e.ToggleButton=u,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.ripple,primereact.tooltip,primereact.utils);

package/toolbar/package.json

@@ -2,5 +2,6 @@
     "main": "./toolbar.cjs.js",
     "module": "./toolbar.esm.js",
     "unpkg": "./toolbar.min.js",
-    "types": "./toolbar.d.ts"
+    "types": "./toolbar.d.ts",
+    "sideEffects": false
 }

package/toolbar/toolbar.cjs.js

@@ -40,12 +40,35 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-var Toolbar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
+var ToolbarBase = {
+  defaultProps: {
+    __TYPE: 'Toolbar',
+    id: null,
+    style: null,
+    className: null,
+    left: null,
+    right: null,
+    start: null,
+    center: null,
+    end: null,
+    children: undefined
+  },
+  getProps: function getProps(props) {
+    return utils.ObjectUtils.getMergedProps(props, ToolbarBase.defaultProps);
+  },
+  getOtherProps: function getOtherProps(props) {
+    return utils.ObjectUtils.getDiffProps(props, ToolbarBase.defaultProps);
+  }
+};
+
+var Toolbar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
+  var props = ToolbarBase.getProps(inProps);
   var elementRef = React__namespace.useRef(null);
-  var otherProps = utils.ObjectUtils.findDiffKeys(props, Toolbar.defaultProps);
+  var otherProps = ToolbarBase.getOtherProps(props);
   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,19 +84,13 @@ 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 = {
-  __TYPE: 'Toolbar',
-  id: null,
-  style: null,
-  className: null,
-  left: null,
-  right: 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 o={defaultProps:{__TYPE:"Toolbar",id:null,style:null,className:null,left:null,right:null,start:null,center:null,end:null,children:void 0},getProps:function(e){return t.ObjectUtils.getMergedProps(e,o.defaultProps)},getOtherProps:function(e){return t.ObjectUtils.getDiffProps(e,o.defaultProps)}},a=l.memo(l.forwardRef((function(e,r){var a=o.getProps(e),s=l.useRef(null),u=o.getOtherProps(a),c=t.classNames("p-toolbar p-component",a.className),i=t.ObjectUtils.getJSXElement(a.left||a.start,a),p=t.ObjectUtils.getJSXElement(a.center,a),f=t.ObjectUtils.getJSXElement(a.right||a.end,a);return l.useImperativeHandle(r,(function(){return{props:a,getElement:function(){return s.current}}})),l.createElement("div",n({id:a.id,ref:s,className:c,style:a.style,role:"toolbar"},u),l.createElement("div",{className:"p-toolbar-group-start p-toolbar-group-left"},i),l.createElement("div",{className:"p-toolbar-group-center"},p),l.createElement("div",{className:"p-toolbar-group-end p-toolbar-group-right"},f))})));a.displayName="Toolbar",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://primefaces.org/cdn/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

@@ -16,12 +16,35 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-var Toolbar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
+var ToolbarBase = {
+  defaultProps: {
+    __TYPE: 'Toolbar',
+    id: null,
+    style: null,
+    className: null,
+    left: null,
+    right: null,
+    start: null,
+    center: null,
+    end: null,
+    children: undefined
+  },
+  getProps: function getProps(props) {
+    return ObjectUtils.getMergedProps(props, ToolbarBase.defaultProps);
+  },
+  getOtherProps: function getOtherProps(props) {
+    return ObjectUtils.getDiffProps(props, ToolbarBase.defaultProps);
+  }
+};
+
+var Toolbar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
+  var props = ToolbarBase.getProps(inProps);
   var elementRef = React.useRef(null);
-  var otherProps = ObjectUtils.findDiffKeys(props, Toolbar.defaultProps);
+  var otherProps = ToolbarBase.getOtherProps(props);
   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,19 +60,13 @@ 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 = {
-  __TYPE: 'Toolbar',
-  id: null,
-  style: null,
-  className: null,
-  left: null,
-  right: 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 o={defaultProps:{__TYPE:"Toolbar",id:null,style:null,className:null,left:null,right:null,start:null,center:null,end:null,children:void 0},getProps:function(e){return t.getMergedProps(e,o.defaultProps)},getOtherProps:function(e){return t.getDiffProps(e,o.defaultProps)}},n=e.memo(e.forwardRef((function(n,a){var s=o.getProps(n),p=e.useRef(null),u=o.getOtherProps(s),i=r("p-toolbar p-component",s.className),c=t.getJSXElement(s.left||s.start,s),m=t.getJSXElement(s.center,s),f=t.getJSXElement(s.right||s.end,s);return e.useImperativeHandle(a,(function(){return{props:s,getElement:function(){return p.current}}})),e.createElement("div",l({id:s.id,ref:p,className:i,style:s.style,role:"toolbar"},u),e.createElement("div",{className:"p-toolbar-group-start p-toolbar-group-left"},c),e.createElement("div",{className:"p-toolbar-group-center"},m),e.createElement("div",{className:"p-toolbar-group-end p-toolbar-group-right"},f))})));n.displayName="Toolbar";export{n as Toolbar};

package/toolbar/toolbar.js

@@ -37,12 +37,35 @@ this.primereact.toolbar = (function (exports, React, utils) {
     return _extends.apply(this, arguments);
   }
 
-  var Toolbar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
+  var ToolbarBase = {
+    defaultProps: {
+      __TYPE: 'Toolbar',
+      id: null,
+      style: null,
+      className: null,
+      left: null,
+      right: null,
+      start: null,
+      center: null,
+      end: null,
+      children: undefined
+    },
+    getProps: function getProps(props) {
+      return utils.ObjectUtils.getMergedProps(props, ToolbarBase.defaultProps);
+    },
+    getOtherProps: function getOtherProps(props) {
+      return utils.ObjectUtils.getDiffProps(props, ToolbarBase.defaultProps);
+    }
+  };
+
+  var Toolbar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
+    var props = ToolbarBase.getProps(inProps);
     var elementRef = React__namespace.useRef(null);
-    var otherProps = utils.ObjectUtils.findDiffKeys(props, Toolbar.defaultProps);
+    var otherProps = ToolbarBase.getOtherProps(props);
     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,20 +81,14 @@ 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 = {
-    __TYPE: 'Toolbar',
-    id: null,
-    style: null,
-    className: null,
-    left: null,
-    right: null
-  };
 
   exports.Toolbar = Toolbar;