primereact 10.5.0 → 10.5.2

package/togglebutton/togglebutton.cjs.js

@@ -87,81 +87,32 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(r, l) {
-  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
-  if (null != t) {
-    var e,
-      n,
-      i,
-      u,
-      a = [],
-      f = !0,
-      o = !1;
-    try {
-      if (i = (t = t.call(r)).next, 0 === l) {
-        if (Object(t) !== t) return;
-        f = !1;
-      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
-    } catch (r) {
-      o = !0, n = r;
-    } finally {
-      try {
-        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
-      } finally {
-        if (o) throw n;
-      }
-    }
-    return a;
-  }
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
 var classes = {
-  label: 'p-button-label',
-  icon: function icon(_ref) {
-    var props = _ref.props,
-      label = _ref.label;
-    return utils.classNames('p-button-icon p-c', {
+  root: function root(_ref) {
+    var props = _ref.props;
+    return utils.classNames('p-togglebutton p-component', {
+      'p-disabled': props.disabled,
+      'p-highlight': props.checked,
+      'p-invalid': props.invalid
+    }, props.className);
+  },
+  input: 'p-togglebutton-input',
+  box: function box(_ref2) {
+    var hasIcon = _ref2.hasIcon,
+      hasLabel = _ref2.hasLabel;
+    return utils.classNames('p-button p-component', {
+      'p-button-icon-only': hasIcon && !hasLabel
+    });
+  },
+  icon: function icon(_ref3) {
+    var props = _ref3.props,
+      label = _ref3.label;
+    return utils.classNames('p-button-icon', {
       'p-button-icon-left': props.iconPos === 'left' && label,
       'p-button-icon-right': props.iconPos === 'right' && label
     });
   },
-  root: function root(_ref2) {
-    var props = _ref2.props,
-      hasIcon = _ref2.hasIcon,
-      hasLabel = _ref2.hasLabel;
-    return utils.classNames('p-button p-togglebutton p-component', {
-      'p-button-icon-only': hasIcon && !hasLabel,
-      'p-highlight': props.checked,
-      'p-disabled': props.disabled
-    }, props.className);
-  }
+  label: 'p-button-label'
 };
 var ToggleButtonBase = componentbase.ComponentBase.extend({
   defaultProps: {
@@ -172,6 +123,7 @@ var ToggleButtonBase = componentbase.ComponentBase.extend({
     onLabel: 'Yes',
     offLabel: 'No',
     iconPos: 'left',
+    invalid: false,
     style: null,
     className: null,
     checked: false,
@@ -191,18 +143,12 @@ var ToggleButtonBase = componentbase.ComponentBase.extend({
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ToggleButton = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
+  var mergeProps = hooks.useMergeProps();
   var context = React__namespace.useContext(api.PrimeReactContext);
   var props = ToggleButtonBase.getProps(inProps, context);
   var elementRef = React__namespace.useRef(null);
-  var _React$useState = React__namespace.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    focusedState = _React$useState2[0],
-    setFocusedState = _React$useState2[1];
   var _ToggleButtonBase$set = ToggleButtonBase.setMetaData({
-      props: props,
-      state: {
-        focused: focusedState
-      }
+      props: props
     }),
     ptm = _ToggleButtonBase$set.ptm,
     cx = _ToggleButtonBase$set.cx,
@@ -215,7 +161,7 @@ var ToggleButton = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
   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) {
+    if (!props.disabled && props.onChange && !props.readonly) {
       props.onChange({
         originalEvent: e,
         value: !props.checked,
@@ -240,16 +186,16 @@ var ToggleButton = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
     }
   };
   var onFocus = function onFocus(event) {
-    setFocusedState(true);
-    props.onFocus && props.onFocus(event);
+    var _props$onFocus;
+    props === null || props === void 0 || (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, event);
   };
   var onBlur = function onBlur(event) {
-    setFocusedState(false);
-    props.onBlur && props.onBlur(event);
+    var _props$onBlur;
+    props === null || props === void 0 || (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, event);
   };
   var createIcon = function createIcon() {
     if (hasIcon) {
-      var iconProps = utils.mergeProps({
+      var iconProps = mergeProps({
         className: cx('icon', {
           label: label
         })
@@ -279,33 +225,48 @@ var ToggleButton = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
   var hasTooltip = utils.ObjectUtils.isNotEmpty(props.tooltip);
   var tabIndex = props.disabled ? -1 : props.tabIndex;
   var iconElement = createIcon();
-  var labelProps = utils.mergeProps({
+  var labelProps = mergeProps({
     className: cx('label')
   }, ptm('label'));
-  var rootProps = utils.mergeProps({
+  var rootProps = mergeProps({
     ref: elementRef,
     id: props.id,
     className: cx('root', {
       hasIcon: hasIcon,
       hasLabel: hasLabel
     }),
+    'data-p-highlight': props.checked,
+    'data-p-disabled': props.disabled
+  }, ToggleButtonBase.getOtherProps(props), ptm('root'));
+  var inputProps = mergeProps({
+    id: props.inputId,
+    className: cx('input'),
     style: props.style,
-    onClick: toggle,
+    onChange: toggle,
     onFocus: onFocus,
     onBlur: onBlur,
     onKeyDown: onKeyDown,
     tabIndex: tabIndex,
-    role: 'button',
+    role: 'switch',
+    type: 'checkbox',
     'aria-pressed': props.checked,
-    'data-p-highlight': props.checked,
-    'data-p-disabled': props.disabled
-  }, ToggleButtonBase.getOtherProps(props), ptm('root'));
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", rootProps, iconElement, /*#__PURE__*/React__namespace.createElement("span", labelProps, label), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
+    'aria-invalid': props.invalid,
+    disabled: props.disabled,
+    readonly: props.readonly,
+    value: props.checked,
+    checked: props.checked
+  }, ptm('input'));
+  var boxProps = mergeProps({
+    className: cx('box', {
+      hasIcon: hasIcon,
+      hasLabel: hasLabel
+    })
+  }, ptm('box'));
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", rootProps, /*#__PURE__*/React__namespace.createElement("input", inputProps), /*#__PURE__*/React__namespace.createElement("div", boxProps, iconElement, /*#__PURE__*/React__namespace.createElement("span", labelProps, label), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null))), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
     target: elementRef,
-    content: props.tooltip
-  }, props.tooltipOptions, {
+    content: props.tooltip,
     pt: ptm('tooltip')
-  })));
+  }, props.tooltipOptions)));
 }));
 ToggleButton.displayName = 'ToggleButton';
 

package/togglebutton/togglebutton.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),r=require("primereact/componentbase"),n=require("primereact/hooks"),o=require("primereact/ripple"),l=require("primereact/tooltip"),a=require("primereact/utils");function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var c=i(e);function u(){return u=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},u.apply(this,arguments)}function s(e){return s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s(e)}function p(e,t){if("object"!==s(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==s(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function f(e){var t=p(e,"string");return"symbol"===s(t)?t:String(t)}function b(e){if(Array.isArray(e))return e}function m(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,l,a,i=[],c=!0,u=!1;try{if(l=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;c=!1}else for(;!(c=(n=l.call(r)).done)&&(i.push(n.value),i.length!==t);c=!0);}catch(e){u=!0,o=e}finally{try{if(!c&&null!=r.return&&(a=r.return(),Object(a)!==a))return}finally{if(u)throw o}}return i}}function d(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function y(e,t){if(e){if("string"==typeof e)return d(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?d(e,t):void 0}}function g(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var v=r.ComponentBase.extend({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},css:{classes:{label:"p-button-label",icon:function(e){var t=e.props,r=e.label;return a.classNames("p-button-icon p-c",{"p-button-icon-left":"left"===t.iconPos&&r,"p-button-icon-right":"right"===t.iconPos&&r})},root:function(e){var t=e.props;return a.classNames("p-button p-togglebutton p-component",{"p-button-icon-only":e.hasIcon&&!e.hasLabel,"p-highlight":t.checked,"p-disabled":t.disabled},t.className)}}}});function h(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function O(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?h(Object(r),!0).forEach((function(t){var n,o,l;n=e,l=r[t],(o=f(o=t))in n?Object.defineProperty(n,o,{value:l,enumerable:!0,configurable:!0,writable:!0}):n[o]=l})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):h(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var j=c.memo(c.forwardRef((function(e,i){var s,p,f=c.useContext(t.PrimeReactContext),d=v.getProps(e,f),h=c.useRef(null),j=c.useState(!1),P=(p=2,b(s=j)||m(s,p)||y(s,p)||g()),S=P[1],w=v.setMetaData({props:d,state:{focused:P[0]}}),E=w.ptm,I=w.cx;r.useHandleStyle(v.css.styles,w.isUnstyled,{name:"togglebutton"});var k=d.onLabel&&d.onLabel.length>0&&d.offLabel&&d.offLabel.length>0,D=d.onIcon&&d.offIcon,N=k?d.checked?d.onLabel:d.offLabel:"&nbsp;",x=d.checked?d.onIcon:d.offIcon,L=function(e){!d.disabled&&d.onChange&&d.onChange({originalEvent:e,value:!d.checked,stopPropagation:function(){e.stopPropagation()},preventDefault:function(){e.preventDefault()},target:{name:d.name,id:d.id,value:!d.checked}})};c.useImperativeHandle(i,(function(){return{props:d,focus:function(){return a.DomHandler.focusFirstElement(h.current)},getElement:function(){return h.current}}})),n.useMountEffect((function(){d.autoFocus&&a.DomHandler.focusFirstElement(h.current)}));var C=a.ObjectUtils.isNotEmpty(d.tooltip),B=d.disabled?-1:d.tabIndex,F=function(){if(D){var e=a.mergeProps({className:I("icon",{label:N})},E("icon"));return a.IconUtils.getJSXIcon(x,O({},e),{props:d})}return null}(),q=a.mergeProps({className:I("label")},E("label")),T=a.mergeProps({ref:h,id:d.id,className:I("root",{hasIcon:D,hasLabel:k}),style:d.style,onClick:L,onFocus:function(e){S(!0),d.onFocus&&d.onFocus(e)},onBlur:function(e){S(!1),d.onBlur&&d.onBlur(e)},onKeyDown:function(e){32===e.keyCode&&(L(e),e.preventDefault())},tabIndex:B,role:"button","aria-pressed":d.checked,"data-p-highlight":d.checked,"data-p-disabled":d.disabled},v.getOtherProps(d),E("root"));return c.createElement(c.Fragment,null,c.createElement("div",T,F,c.createElement("span",q,N),c.createElement(o.Ripple,null)),C&&c.createElement(l.Tooltip,u({target:h,content:d.tooltip},d.tooltipOptions,{pt:E("tooltip")})))})));j.displayName="ToggleButton",exports.ToggleButton=j;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),n=require("primereact/componentbase"),o=require("primereact/hooks"),r=require("primereact/ripple"),l=require("primereact/tooltip"),a=require("primereact/utils");function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var 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=i(e);function u(){return u=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},u.apply(this,arguments)}function s(e){return s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s(e)}function p(e,t){if("object"!==s(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t||"default");if("object"!==s(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function f(e){var t=p(e,"string");return"symbol"===s(t)?t:String(t)}var b=n.ComponentBase.extend({defaultProps:{__TYPE:"ToggleButton",id:null,onIcon:null,offIcon:null,onLabel:"Yes",offLabel:"No",iconPos:"left",invalid:!1,style:null,className:null,checked:!1,tabIndex:0,tooltip:null,tooltipOptions:null,onChange:null,onFocus:null,onBlur:null,children:void 0},css:{classes:{root:function(e){var t=e.props;return a.classNames("p-togglebutton p-component",{"p-disabled":t.disabled,"p-highlight":t.checked,"p-invalid":t.invalid},t.className)},input:"p-togglebutton-input",box:function(e){return a.classNames("p-button p-component",{"p-button-icon-only":e.hasIcon&&!e.hasLabel})},icon:function(e){var t=e.props,n=e.label;return a.classNames("p-button-icon",{"p-button-icon-left":"left"===t.iconPos&&n,"p-button-icon-right":"right"===t.iconPos&&n})},label:"p-button-label"}}});function d(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function m(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?d(Object(n),!0).forEach((function(t){var o,r,l;o=e,l=n[t],(r=f(r=t))in o?Object.defineProperty(o,r,{value:l,enumerable:!0,configurable:!0,writable:!0}):o[r]=l})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):d(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var g=c.memo(c.forwardRef((function(e,i){var s=o.useMergeProps(),p=c.useContext(t.PrimeReactContext),f=b.getProps(e,p),d=c.useRef(null),g=b.setMetaData({props:f}),v=g.ptm,y=g.cx;n.useHandleStyle(b.css.styles,g.isUnstyled,{name:"togglebutton"});var h=f.onLabel&&f.onLabel.length>0&&f.offLabel&&f.offLabel.length>0,O=f.onIcon&&f.offIcon,P=h?f.checked?f.onLabel:f.offLabel:"&nbsp;",j=f.checked?f.onIcon:f.offIcon,E=function(e){f.disabled||!f.onChange||f.readonly||f.onChange({originalEvent:e,value:!f.checked,stopPropagation:function(){e.stopPropagation()},preventDefault:function(){e.preventDefault()},target:{name:f.name,id:f.id,value:!f.checked}})};c.useImperativeHandle(i,(function(){return{props:f,focus:function(){return a.DomHandler.focusFirstElement(d.current)},getElement:function(){return d.current}}})),o.useMountEffect((function(){f.autoFocus&&a.DomHandler.focusFirstElement(d.current)}));var k=a.ObjectUtils.isNotEmpty(f.tooltip),I=f.disabled?-1:f.tabIndex,w=function(){if(O){var e=s({className:y("icon",{label:P})},v("icon"));return a.IconUtils.getJSXIcon(j,m({},e),{props:f})}return null}(),N=s({className:y("label")},v("label")),x=s({ref:d,id:f.id,className:y("root",{hasIcon:O,hasLabel:h}),"data-p-highlight":f.checked,"data-p-disabled":f.disabled},b.getOtherProps(f),v("root")),D=s({id:f.inputId,className:y("input"),style:f.style,onChange:E,onFocus:function(e){var t;null==f||null===(t=f.onFocus)||void 0===t||t.call(f,e)},onBlur:function(e){var t;null==f||null===(t=f.onBlur)||void 0===t||t.call(f,e)},onKeyDown:function(e){32===e.keyCode&&(E(e),e.preventDefault())},tabIndex:I,role:"switch",type:"checkbox","aria-pressed":f.checked,"aria-invalid":f.invalid,disabled:f.disabled,readonly:f.readonly,value:f.checked,checked:f.checked},v("input")),S=s({className:y("box",{hasIcon:O,hasLabel:h})},v("box"));return c.createElement(c.Fragment,null,c.createElement("div",x,c.createElement("input",D),c.createElement("div",S,w,c.createElement("span",N,P),c.createElement(r.Ripple,null))),k&&c.createElement(l.Tooltip,u({target:d,content:f.tooltip,pt:v("tooltip")},f.tooltipOptions)))})));g.displayName="ToggleButton",exports.ToggleButton=g;

package/togglebutton/togglebutton.d.ts

@@ -8,6 +8,7 @@
  *
  */
 import * as React from 'react';
+import { CheckboxPassThroughType } from '../checkbox/checkbox';
 import { ComponentHooks } from '../componentbase/componentbase';
 import { PassThroughOptions } from '../passthrough';
 import { TooltipPassThroughOptions } from '../tooltip/tooltip';
@@ -50,6 +51,14 @@ export interface ToggleButtonPassThroughOptions {
      * @see {@link ComponentHooks}
      */
     hooks?: ComponentHooks;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: ToggleButtonPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to pass attributes to the box's DOM element.
+     */
+    box?: CheckboxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
 }
 /**
  * Custom toggle button change target options
@@ -117,6 +126,21 @@ export interface ToggleButtonProps extends Omit<React.DetailedHTMLProps<React.In
      * @defaultValue left
      */
     iconPos?: 'left' | 'right' | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * When present, it specifies that the element should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * When present, it specifies that an input field is read-only.
+     * @default false
+     */
+    readonly?: boolean | undefined;
     /**
      * Icon for the off state.
      */

package/togglebutton/togglebutton.esm.js

@@ -2,10 +2,10 @@
 import * as React from 'react';
 import { PrimeReactContext } from 'primereact/api';
 import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
-import { useMountEffect } from 'primereact/hooks';
+import { useMergeProps, useMountEffect } from 'primereact/hooks';
 import { Ripple } from 'primereact/ripple';
 import { Tooltip } from 'primereact/tooltip';
-import { classNames, DomHandler, ObjectUtils, mergeProps, IconUtils } from 'primereact/utils';
+import { classNames, DomHandler, ObjectUtils, IconUtils } from 'primereact/utils';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -63,81 +63,32 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(r, l) {
-  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
-  if (null != t) {
-    var e,
-      n,
-      i,
-      u,
-      a = [],
-      f = !0,
-      o = !1;
-    try {
-      if (i = (t = t.call(r)).next, 0 === l) {
-        if (Object(t) !== t) return;
-        f = !1;
-      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
-    } catch (r) {
-      o = !0, n = r;
-    } finally {
-      try {
-        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
-      } finally {
-        if (o) throw n;
-      }
-    }
-    return a;
-  }
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
 var classes = {
-  label: 'p-button-label',
-  icon: function icon(_ref) {
-    var props = _ref.props,
-      label = _ref.label;
-    return classNames('p-button-icon p-c', {
+  root: function root(_ref) {
+    var props = _ref.props;
+    return classNames('p-togglebutton p-component', {
+      'p-disabled': props.disabled,
+      'p-highlight': props.checked,
+      'p-invalid': props.invalid
+    }, props.className);
+  },
+  input: 'p-togglebutton-input',
+  box: function box(_ref2) {
+    var hasIcon = _ref2.hasIcon,
+      hasLabel = _ref2.hasLabel;
+    return classNames('p-button p-component', {
+      'p-button-icon-only': hasIcon && !hasLabel
+    });
+  },
+  icon: function icon(_ref3) {
+    var props = _ref3.props,
+      label = _ref3.label;
+    return classNames('p-button-icon', {
       'p-button-icon-left': props.iconPos === 'left' && label,
       'p-button-icon-right': props.iconPos === 'right' && label
     });
   },
-  root: function root(_ref2) {
-    var props = _ref2.props,
-      hasIcon = _ref2.hasIcon,
-      hasLabel = _ref2.hasLabel;
-    return classNames('p-button p-togglebutton p-component', {
-      'p-button-icon-only': hasIcon && !hasLabel,
-      'p-highlight': props.checked,
-      'p-disabled': props.disabled
-    }, props.className);
-  }
+  label: 'p-button-label'
 };
 var ToggleButtonBase = ComponentBase.extend({
   defaultProps: {
@@ -148,6 +99,7 @@ var ToggleButtonBase = ComponentBase.extend({
     onLabel: 'Yes',
     offLabel: 'No',
     iconPos: 'left',
+    invalid: false,
     style: null,
     className: null,
     checked: false,
@@ -167,18 +119,12 @@ var ToggleButtonBase = ComponentBase.extend({
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ToggleButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
+  var mergeProps = useMergeProps();
   var context = React.useContext(PrimeReactContext);
   var props = ToggleButtonBase.getProps(inProps, context);
   var elementRef = React.useRef(null);
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    focusedState = _React$useState2[0],
-    setFocusedState = _React$useState2[1];
   var _ToggleButtonBase$set = ToggleButtonBase.setMetaData({
-      props: props,
-      state: {
-        focused: focusedState
-      }
+      props: props
     }),
     ptm = _ToggleButtonBase$set.ptm,
     cx = _ToggleButtonBase$set.cx,
@@ -191,7 +137,7 @@ var ToggleButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   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) {
+    if (!props.disabled && props.onChange && !props.readonly) {
       props.onChange({
         originalEvent: e,
         value: !props.checked,
@@ -216,12 +162,12 @@ var ToggleButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
     }
   };
   var onFocus = function onFocus(event) {
-    setFocusedState(true);
-    props.onFocus && props.onFocus(event);
+    var _props$onFocus;
+    props === null || props === void 0 || (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, event);
   };
   var onBlur = function onBlur(event) {
-    setFocusedState(false);
-    props.onBlur && props.onBlur(event);
+    var _props$onBlur;
+    props === null || props === void 0 || (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, event);
   };
   var createIcon = function createIcon() {
     if (hasIcon) {
@@ -265,23 +211,38 @@ var ToggleButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
       hasIcon: hasIcon,
       hasLabel: hasLabel
     }),
+    'data-p-highlight': props.checked,
+    'data-p-disabled': props.disabled
+  }, ToggleButtonBase.getOtherProps(props), ptm('root'));
+  var inputProps = mergeProps({
+    id: props.inputId,
+    className: cx('input'),
     style: props.style,
-    onClick: toggle,
+    onChange: toggle,
     onFocus: onFocus,
     onBlur: onBlur,
     onKeyDown: onKeyDown,
     tabIndex: tabIndex,
-    role: 'button',
+    role: 'switch',
+    type: 'checkbox',
     'aria-pressed': props.checked,
-    'data-p-highlight': props.checked,
-    'data-p-disabled': props.disabled
-  }, ToggleButtonBase.getOtherProps(props), ptm('root'));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, iconElement, /*#__PURE__*/React.createElement("span", labelProps, label), /*#__PURE__*/React.createElement(Ripple, null)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
+    'aria-invalid': props.invalid,
+    disabled: props.disabled,
+    readonly: props.readonly,
+    value: props.checked,
+    checked: props.checked
+  }, ptm('input'));
+  var boxProps = mergeProps({
+    className: cx('box', {
+      hasIcon: hasIcon,
+      hasLabel: hasLabel
+    })
+  }, ptm('box'));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement("input", inputProps), /*#__PURE__*/React.createElement("div", boxProps, iconElement, /*#__PURE__*/React.createElement("span", labelProps, label), /*#__PURE__*/React.createElement(Ripple, null))), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
     target: elementRef,
-    content: props.tooltip
-  }, props.tooltipOptions, {
+    content: props.tooltip,
     pt: ptm('tooltip')
-  })));
+  }, props.tooltipOptions)));
 }));
 ToggleButton.displayName = 'ToggleButton';
 

package/togglebutton/togglebutton.esm.min.js

@@ -1 +1 @@
-import*as t from"react";import{PrimeReactContext as e}from"primereact/api";import{ComponentBase as n,useHandleStyle as r}from"primereact/componentbase";import{useMountEffect as o}from"primereact/hooks";import{Ripple as l}from"primereact/ripple";import{Tooltip as a}from"primereact/tooltip";import{classNames as i,DomHandler as c,ObjectUtils as u,mergeProps as s,IconUtils as p}from"primereact/utils";function f(){return f=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},f.apply(this,arguments)}function b(t){return b="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},b(t)}function m(t,e){if("object"!==b(t)||null===t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var r=n.call(t,e||"default");if("object"!==b(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}function y(t){var e=m(t,"string");return"symbol"===b(e)?e:String(e)}function d(t){if(Array.isArray(t))return t}function g(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=n){var r,o,l,a,i=[],c=!0,u=!1;try{if(l=(n=n.call(t)).next,0===e){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=l.call(n)).done)&&(i.push(r.value),i.length!==e);c=!0);}catch(t){u=!0,o=t}finally{try{if(!c&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(u)throw o}}return i}}function h(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}function v(t,e){if(t){if("string"==typeof t)return h(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?h(t,e):void 0}}function O(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var j=n.extend({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},css:{classes:{label:"p-button-label",icon:function(t){var e=t.props,n=t.label;return i("p-button-icon p-c",{"p-button-icon-left":"left"===e.iconPos&&n,"p-button-icon-right":"right"===e.iconPos&&n})},root:function(t){var e=t.props;return i("p-button p-togglebutton p-component",{"p-button-icon-only":t.hasIcon&&!t.hasLabel,"p-highlight":e.checked,"p-disabled":e.disabled},e.className)}}}});function P(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function S(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?P(Object(n),!0).forEach((function(e){var r,o,l;r=t,l=n[e],(o=y(o=e))in r?Object.defineProperty(r,o,{value:l,enumerable:!0,configurable:!0,writable:!0}):r[o]=l})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):P(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}var w=t.memo(t.forwardRef((function(n,i){var b,m,y=t.useContext(e),h=j.getProps(n,y),P=t.useRef(null),w=t.useState(!1),I=(m=2,d(b=w)||g(b,m)||v(b,m)||O()),E=I[1],k=j.setMetaData({props:h,state:{focused:I[0]}}),L=k.ptm,D=k.cx;r(j.css.styles,k.isUnstyled,{name:"togglebutton"});var N=h.onLabel&&h.onLabel.length>0&&h.offLabel&&h.offLabel.length>0,x=h.onIcon&&h.offIcon,F=N?h.checked?h.onLabel:h.offLabel:"&nbsp;",C=h.checked?h.onIcon:h.offIcon,A=function(t){!h.disabled&&h.onChange&&h.onChange({originalEvent:t,value:!h.checked,stopPropagation:function(){t.stopPropagation()},preventDefault:function(){t.preventDefault()},target:{name:h.name,id:h.id,value:!h.checked}})};t.useImperativeHandle(i,(function(){return{props:h,focus:function(){return c.focusFirstElement(P.current)},getElement:function(){return P.current}}})),o((function(){h.autoFocus&&c.focusFirstElement(P.current)}));var B=u.isNotEmpty(h.tooltip),T=h.disabled?-1:h.tabIndex,M=function(){if(x){var t=s({className:D("icon",{label:F})},L("icon"));return p.getJSXIcon(C,S({},t),{props:h})}return null}(),R=s({className:D("label")},L("label")),U=s({ref:P,id:h.id,className:D("root",{hasIcon:x,hasLabel:N}),style:h.style,onClick:A,onFocus:function(t){E(!0),h.onFocus&&h.onFocus(t)},onBlur:function(t){E(!1),h.onBlur&&h.onBlur(t)},onKeyDown:function(t){32===t.keyCode&&(A(t),t.preventDefault())},tabIndex:T,role:"button","aria-pressed":h.checked,"data-p-highlight":h.checked,"data-p-disabled":h.disabled},j.getOtherProps(h),L("root"));return t.createElement(t.Fragment,null,t.createElement("div",U,M,t.createElement("span",R,F),t.createElement(l,null)),B&&t.createElement(a,f({target:P,content:h.tooltip},h.tooltipOptions,{pt:L("tooltip")})))})));w.displayName="ToggleButton";export{w as ToggleButton};
+import*as e from"react";import{PrimeReactContext as t}from"primereact/api";import{ComponentBase as n,useHandleStyle as o}from"primereact/componentbase";import{useMergeProps as r,useMountEffect as l}from"primereact/hooks";import{Ripple as i}from"primereact/ripple";import{Tooltip as a}from"primereact/tooltip";import{classNames as c,DomHandler as u,ObjectUtils as p,IconUtils as s}from"primereact/utils";function f(){return f=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},f.apply(this,arguments)}function b(e){return b="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},b(e)}function m(e,t){if("object"!==b(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t||"default");if("object"!==b(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function d(e){var t=m(e,"string");return"symbol"===b(t)?t:String(t)}var g=n.extend({defaultProps:{__TYPE:"ToggleButton",id:null,onIcon:null,offIcon:null,onLabel:"Yes",offLabel:"No",iconPos:"left",invalid:!1,style:null,className:null,checked:!1,tabIndex:0,tooltip:null,tooltipOptions:null,onChange:null,onFocus:null,onBlur:null,children:void 0},css:{classes:{root:function(e){var t=e.props;return c("p-togglebutton p-component",{"p-disabled":t.disabled,"p-highlight":t.checked,"p-invalid":t.invalid},t.className)},input:"p-togglebutton-input",box:function(e){return c("p-button p-component",{"p-button-icon-only":e.hasIcon&&!e.hasLabel})},icon:function(e){var t=e.props,n=e.label;return c("p-button-icon",{"p-button-icon-left":"left"===t.iconPos&&n,"p-button-icon-right":"right"===t.iconPos&&n})},label:"p-button-label"}}});function v(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function y(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?v(Object(n),!0).forEach((function(t){var o,r,l;o=e,l=n[t],(r=d(r=t))in o?Object.defineProperty(o,r,{value:l,enumerable:!0,configurable:!0,writable:!0}):o[r]=l})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):v(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var h=e.memo(e.forwardRef((function(n,c){var b=r(),m=e.useContext(t),d=g.getProps(n,m),v=e.useRef(null),h=g.setMetaData({props:d}),O=h.ptm,P=h.cx;o(g.css.styles,h.isUnstyled,{name:"togglebutton"});var j=d.onLabel&&d.onLabel.length>0&&d.offLabel&&d.offLabel.length>0,E=d.onIcon&&d.offIcon,k=j?d.checked?d.onLabel:d.offLabel:"&nbsp;",I=d.checked?d.onIcon:d.offIcon,w=function(e){d.disabled||!d.onChange||d.readonly||d.onChange({originalEvent:e,value:!d.checked,stopPropagation:function(){e.stopPropagation()},preventDefault:function(){e.preventDefault()},target:{name:d.name,id:d.id,value:!d.checked}})};e.useImperativeHandle(c,(function(){return{props:d,focus:function(){return u.focusFirstElement(v.current)},getElement:function(){return v.current}}})),l((function(){d.autoFocus&&u.focusFirstElement(v.current)}));var x=p.isNotEmpty(d.tooltip),L=d.disabled?-1:d.tabIndex,N=function(){if(E){var e=b({className:P("icon",{label:k})},O("icon"));return s.getJSXIcon(I,y({},e),{props:d})}return null}(),S=b({className:P("label")},O("label")),D=b({ref:v,id:d.id,className:P("root",{hasIcon:E,hasLabel:j}),"data-p-highlight":d.checked,"data-p-disabled":d.disabled},g.getOtherProps(d),O("root")),F=b({id:d.inputId,className:P("input"),style:d.style,onChange:w,onFocus:function(e){var t;null==d||null===(t=d.onFocus)||void 0===t||t.call(d,e)},onBlur:function(e){var t;null==d||null===(t=d.onBlur)||void 0===t||t.call(d,e)},onKeyDown:function(e){32===e.keyCode&&(w(e),e.preventDefault())},tabIndex:L,role:"switch",type:"checkbox","aria-pressed":d.checked,"aria-invalid":d.invalid,disabled:d.disabled,readonly:d.readonly,value:d.checked,checked:d.checked},O("input")),C=b({className:P("box",{hasIcon:E,hasLabel:j})},O("box"));return e.createElement(e.Fragment,null,e.createElement("div",D,e.createElement("input",F),e.createElement("div",C,N,e.createElement("span",S,k),e.createElement(i,null))),x&&e.createElement(a,f({target:v,content:d.tooltip,pt:O("tooltip")},d.tooltipOptions)))})));h.displayName="ToggleButton";export{h as ToggleButton};