primereact 8.7.2 → 9.0.0-beta.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://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,20 +1,18 @@
 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) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
@@ -26,7 +24,6 @@ var ToggleButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   var hasIcon = props.onIcon && props.onIcon.length > 0 && props.offIcon && props.offIcon.length > 0;
   var label = hasLabel ? props.checked ? props.onLabel : props.offLabel : '&nbsp;';
   var icon = props.checked ? props.onIcon : props.offIcon;
-
   var toggle = function toggle(e) {
     if (!props.disabled && props.onChange) {
       props.onChange({
@@ -42,14 +39,12 @@ var ToggleButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
       });
     }
   };
-
   var onKeyDown = function onKeyDown(event) {
     if (event.keyCode === 32) {
       toggle(event);
       event.preventDefault();
     }
   };
-
   var createIcon = function createIcon() {
     if (hasIcon) {
       var iconClassName = classNames('p-button-icon p-c', {
@@ -62,20 +57,21 @@ var ToggleButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
         props: props
       });
     }
-
     return null;
   };
-
   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

@@ -26,14 +26,12 @@ this.primereact.togglebutton = (function (exports, React, ripple, tooltip, utils
     _extends = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
-
         for (var key in source) {
           if (Object.prototype.hasOwnProperty.call(source, key)) {
             target[key] = source[key];
           }
         }
       }
-
       return target;
     };
     return _extends.apply(this, arguments);
@@ -45,7 +43,6 @@ this.primereact.togglebutton = (function (exports, React, ripple, tooltip, utils
     var hasIcon = props.onIcon && props.onIcon.length > 0 && props.offIcon && props.offIcon.length > 0;
     var label = hasLabel ? props.checked ? props.onLabel : props.offLabel : '&nbsp;';
     var icon = props.checked ? props.onIcon : props.offIcon;
-
     var toggle = function toggle(e) {
       if (!props.disabled && props.onChange) {
         props.onChange({
@@ -61,14 +58,12 @@ this.primereact.togglebutton = (function (exports, React, ripple, tooltip, utils
         });
       }
     };
-
     var onKeyDown = function onKeyDown(event) {
       if (event.keyCode === 32) {
         toggle(event);
         event.preventDefault();
       }
     };
-
     var createIcon = function createIcon() {
       if (hasIcon) {
         var iconClassName = utils.classNames('p-button-icon p-c', {
@@ -81,20 +76,21 @@ this.primereact.togglebutton = (function (exports, React, ripple, tooltip, utils
           props: props
         });
       }
-
       return null;
     };
-
     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

@@ -29,14 +29,12 @@ function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
@@ -46,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,
@@ -63,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 = {
@@ -75,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

@@ -5,14 +5,12 @@ function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
@@ -22,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,
@@ -39,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 = {
@@ -51,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

@@ -26,14 +26,12 @@ this.primereact.toolbar = (function (exports, React, utils) {
     _extends = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
-
         for (var key in source) {
           if (Object.prototype.hasOwnProperty.call(source, key)) {
             target[key] = source[key];
           }
         }
       }
-
       return target;
     };
     return _extends.apply(this, arguments);
@@ -43,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,
@@ -60,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 = {
@@ -72,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);