primereact 9.3.1 → 9.5.0

package/chart/chart.esm.js

@@ -1,23 +1,9 @@
 import * as React from 'react';
 import { useUnmountEffect } from 'primereact/hooks';
-import { ObjectUtils, classNames } from 'primereact/utils';
+import { classNames, mergeProps } from 'primereact/utils';
+import { ComponentBase } from 'primereact/componentbase';
 
-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);
-}
-
-var ChartBase = {
+var ChartBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Chart',
     id: null,
@@ -30,14 +16,8 @@ var ChartBase = {
     style: null,
     className: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return ObjectUtils.getMergedProps(props, ChartBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return ObjectUtils.getDiffProps(props, ChartBase.defaultProps);
   }
-};
+});
 
 // GitHub #3059 wrapper if loaded by script tag
 var ChartJS = function () {
@@ -49,6 +29,10 @@ var ChartJS = function () {
 }();
 var PrimeReactChart = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var props = ChartBase.getProps(inProps);
+  var _ChartBase$setMetaDat = ChartBase.setMetaData({
+      props: props
+    }),
+    ptm = _ChartBase$setMetaDat.ptm;
   var elementRef = React.useRef(null);
   var chartRef = React.useRef(null);
   var canvasRef = React.useRef(null);
@@ -119,22 +103,27 @@ var PrimeReactChart = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
   useUnmountEffect(function () {
     destroyChart();
   });
-  var otherProps = ChartBase.getOtherProps(props);
   var className = classNames('p-chart', props.className);
   var style = Object.assign({
     width: props.width,
     height: props.height
   }, props.style);
-  return /*#__PURE__*/React.createElement("div", _extends({
+  var title = props.options && props.options.plugins && props.options.plugins.title && props.options.plugins.title.text;
+  var ariaLabel = props.ariaLabel || title;
+  var rootProps = mergeProps({
     id: props.id,
     ref: elementRef,
     style: style,
     className: className
-  }, otherProps), /*#__PURE__*/React.createElement("canvas", {
+  }, ChartBase.getOtherProps(props), ptm('root'));
+  var canvasProps = mergeProps({
     ref: canvasRef,
     width: props.width,
-    height: props.height
-  }));
+    height: props.height,
+    role: 'img',
+    'aria-label': ariaLabel
+  }, ptm('canvas'));
+  return /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement("canvas", canvasProps));
 }), function (prevProps, nextProps) {
   return prevProps.data === nextProps.data && prevProps.options === nextProps.options && prevProps.type === nextProps.type;
 });

package/chart/chart.esm.min.js

@@ -1 +1 @@
-import*as t from"react";import{useUnmountEffect as e}from"primereact/hooks";import{ObjectUtils as r,classNames as n}from"primereact/utils";function u(){return u=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t},u.apply(this,arguments)}var a={defaultProps:{__TYPE:"Chart",id:null,type:null,data:null,options:null,plugins:null,width:null,height:null,style:null,className:null,children:void 0},getProps:function(t){return r.getMergedProps(t,a.defaultProps)},getOtherProps:function(t){return r.getDiffProps(t,a.defaultProps)}},o=function(){try{return Chart}catch(t){return null}}(),i=t.memo(t.forwardRef((function(r,i){var c=a.getProps(r),l=t.useRef(null),s=t.useRef(null),f=t.useRef(null),p=function(){h();var t={type:c.type,data:c.data,options:c.options,plugins:c.plugins};o?s.current=new o(f.current,t):import("chart.js/auto").then((function(e){h(),f.current&&e&&(s.current=e.default?new e.default(f.current,t):new e(f.current,t))}))},h=function(){s.current&&(s.current.destroy(),s.current=null)};t.useImperativeHandle(i,(function(){return{props:c,getCanvas:function(){return f.current},getChart:function(){return s.current},getBase64Image:function(){return s.current.toBase64Image()},getElement:function(){return l.current},generateLegend:function(){return s.current&&s.current.generateLegend()},refresh:function(){return s.current&&s.current.update()}}})),t.useEffect((function(){p()})),e((function(){h()}));var d=a.getOtherProps(c),g=n("p-chart",c.className),m=Object.assign({width:c.width,height:c.height},c.style);return t.createElement("div",u({id:c.id,ref:l,style:m,className:g},d),t.createElement("canvas",{ref:f,width:c.width,height:c.height}))})),(function(t,e){return t.data===e.data&&t.options===e.options&&t.type===e.type}));i.displayName="Chart";export{i as Chart};
+import*as t from"react";import{useUnmountEffect as e}from"primereact/hooks";import{classNames as r,mergeProps as n}from"primereact/utils";import{ComponentBase as u}from"primereact/componentbase";var a=u.extend({defaultProps:{__TYPE:"Chart",id:null,type:null,data:null,options:null,plugins:null,width:null,height:null,style:null,className:null,children:void 0}}),i=function(){try{return Chart}catch(t){return null}}(),o=t.memo(t.forwardRef((function(u,o){var l=a.getProps(u),c=a.setMetaData({props:l}).ptm,s=t.useRef(null),p=t.useRef(null),f=t.useRef(null),h=function(){d();var t={type:l.type,data:l.data,options:l.options,plugins:l.plugins};i?p.current=new i(f.current,t):import("chart.js/auto").then((function(e){d(),f.current&&e&&(p.current=e.default?new e.default(f.current,t):new e(f.current,t))}))},d=function(){p.current&&(p.current.destroy(),p.current=null)};t.useImperativeHandle(o,(function(){return{props:l,getCanvas:function(){return f.current},getChart:function(){return p.current},getBase64Image:function(){return p.current.toBase64Image()},getElement:function(){return s.current},generateLegend:function(){return p.current&&p.current.generateLegend()},refresh:function(){return p.current&&p.current.update()}}})),t.useEffect((function(){h()})),e((function(){d()}));var m=r("p-chart",l.className),g=Object.assign({width:l.width,height:l.height},l.style),y=l.ariaLabel||l.options&&l.options.plugins&&l.options.plugins.title&&l.options.plugins.title.text,v=n({id:l.id,ref:s,style:g,className:m},a.getOtherProps(l),c("root")),w=n({ref:f,width:l.width,height:l.height,role:"img","aria-label":y},c("canvas"));return t.createElement("div",v,t.createElement("canvas",w))})),(function(t,e){return t.data===e.data&&t.options===e.options&&t.type===e.type}));o.displayName="Chart";export{o as Chart};

package/chart/chart.js

@@ -1,169 +1,157 @@
 this.primereact = this.primereact || {};
-this.primereact.chart = (function (exports, React, hooks, utils) {
-  'use strict';
+this.primereact.chart = (function (exports, React, hooks, utils, componentbase) {
+    'use strict';
 
-  function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-      Object.keys(e).forEach(function (k) {
-        if (k !== 'default') {
-          var d = Object.getOwnPropertyDescriptor(e, k);
-          Object.defineProperty(n, k, d.get ? d : {
-            enumerable: true,
-            get: function () { return e[k]; }
-          });
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
         }
-      });
+        n["default"] = e;
+        return Object.freeze(n);
     }
-    n["default"] = e;
-    return Object.freeze(n);
-  }
 
-  var React__namespace = /*#__PURE__*/_interopNamespace(React);
+    var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-  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];
-          }
-        }
+    var ChartBase = componentbase.ComponentBase.extend({
+      defaultProps: {
+        __TYPE: 'Chart',
+        id: null,
+        type: null,
+        data: null,
+        options: null,
+        plugins: null,
+        width: null,
+        height: null,
+        style: null,
+        className: null,
+        children: undefined
       }
-      return target;
-    };
-    return _extends.apply(this, arguments);
-  }
-
-  var ChartBase = {
-    defaultProps: {
-      __TYPE: 'Chart',
-      id: null,
-      type: null,
-      data: null,
-      options: null,
-      plugins: null,
-      width: null,
-      height: null,
-      style: null,
-      className: null,
-      children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, ChartBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, ChartBase.defaultProps);
-    }
-  };
+    });
 
-  // GitHub #3059 wrapper if loaded by script tag
-  var ChartJS = function () {
-    try {
-      return Chart;
-    } catch (_unused) {
-      return null;
-    }
-  }();
-  var PrimeReactChart = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
-    var props = ChartBase.getProps(inProps);
-    var elementRef = React__namespace.useRef(null);
-    var chartRef = React__namespace.useRef(null);
-    var canvasRef = React__namespace.useRef(null);
-    var initChart = function initChart() {
-      destroyChart();
-      var configuration = {
-        type: props.type,
-        data: props.data,
-        options: props.options,
-        plugins: props.plugins
-      };
-      if (ChartJS) {
-        // GitHub #3059 loaded by script only
-        chartRef.current = new ChartJS(canvasRef.current, configuration);
-      } else {
-        import('chart.js/auto').then(function (module) {
-          destroyChart();
+    // GitHub #3059 wrapper if loaded by script tag
+    var ChartJS = function () {
+      try {
+        return Chart;
+      } catch (_unused) {
+        return null;
+      }
+    }();
+    var PrimeReactChart = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
+      var props = ChartBase.getProps(inProps);
+      var _ChartBase$setMetaDat = ChartBase.setMetaData({
+          props: props
+        }),
+        ptm = _ChartBase$setMetaDat.ptm;
+      var elementRef = React__namespace.useRef(null);
+      var chartRef = React__namespace.useRef(null);
+      var canvasRef = React__namespace.useRef(null);
+      var initChart = function initChart() {
+        destroyChart();
+        var configuration = {
+          type: props.type,
+          data: props.data,
+          options: props.options,
+          plugins: props.plugins
+        };
+        if (ChartJS) {
+          // GitHub #3059 loaded by script only
+          chartRef.current = new ChartJS(canvasRef.current, configuration);
+        } else {
+          import('chart.js/auto').then(function (module) {
+            destroyChart();
 
-          // In case that the Chart component has been unmounted during asynchronous loading of ChartJS,
-          // the canvasRef will not be available anymore, and no Chart should be created.
-          if (!canvasRef.current) {
-            return;
-          }
-          if (module) {
-            if (module["default"]) {
-              // WebPack
-              chartRef.current = new module["default"](canvasRef.current, configuration);
-            } else {
-              // ParcelJS
-              chartRef.current = new module(canvasRef.current, configuration);
+            // In case that the Chart component has been unmounted during asynchronous loading of ChartJS,
+            // the canvasRef will not be available anymore, and no Chart should be created.
+            if (!canvasRef.current) {
+              return;
             }
-          }
-        });
-      }
-    };
-    var destroyChart = function destroyChart() {
-      if (chartRef.current) {
-        chartRef.current.destroy();
-        chartRef.current = null;
-      }
-    };
-    React__namespace.useImperativeHandle(ref, function () {
-      return {
-        props: props,
-        getCanvas: function getCanvas() {
-          return canvasRef.current;
-        },
-        getChart: function getChart() {
-          return chartRef.current;
-        },
-        getBase64Image: function getBase64Image() {
-          return chartRef.current.toBase64Image();
-        },
-        getElement: function getElement() {
-          return elementRef.current;
-        },
-        generateLegend: function generateLegend() {
-          return chartRef.current && chartRef.current.generateLegend();
-        },
-        refresh: function refresh() {
-          return chartRef.current && chartRef.current.update();
+            if (module) {
+              if (module["default"]) {
+                // WebPack
+                chartRef.current = new module["default"](canvasRef.current, configuration);
+              } else {
+                // ParcelJS
+                chartRef.current = new module(canvasRef.current, configuration);
+              }
+            }
+          });
         }
       };
+      var destroyChart = function destroyChart() {
+        if (chartRef.current) {
+          chartRef.current.destroy();
+          chartRef.current = null;
+        }
+      };
+      React__namespace.useImperativeHandle(ref, function () {
+        return {
+          props: props,
+          getCanvas: function getCanvas() {
+            return canvasRef.current;
+          },
+          getChart: function getChart() {
+            return chartRef.current;
+          },
+          getBase64Image: function getBase64Image() {
+            return chartRef.current.toBase64Image();
+          },
+          getElement: function getElement() {
+            return elementRef.current;
+          },
+          generateLegend: function generateLegend() {
+            return chartRef.current && chartRef.current.generateLegend();
+          },
+          refresh: function refresh() {
+            return chartRef.current && chartRef.current.update();
+          }
+        };
+      });
+      React__namespace.useEffect(function () {
+        initChart();
+      });
+      hooks.useUnmountEffect(function () {
+        destroyChart();
+      });
+      var className = utils.classNames('p-chart', props.className);
+      var style = Object.assign({
+        width: props.width,
+        height: props.height
+      }, props.style);
+      var title = props.options && props.options.plugins && props.options.plugins.title && props.options.plugins.title.text;
+      var ariaLabel = props.ariaLabel || title;
+      var rootProps = utils.mergeProps({
+        id: props.id,
+        ref: elementRef,
+        style: style,
+        className: className
+      }, ChartBase.getOtherProps(props), ptm('root'));
+      var canvasProps = utils.mergeProps({
+        ref: canvasRef,
+        width: props.width,
+        height: props.height,
+        role: 'img',
+        'aria-label': ariaLabel
+      }, ptm('canvas'));
+      return /*#__PURE__*/React__namespace.createElement("div", rootProps, /*#__PURE__*/React__namespace.createElement("canvas", canvasProps));
+    }), function (prevProps, nextProps) {
+      return prevProps.data === nextProps.data && prevProps.options === nextProps.options && prevProps.type === nextProps.type;
     });
-    React__namespace.useEffect(function () {
-      initChart();
-    });
-    hooks.useUnmountEffect(function () {
-      destroyChart();
-    });
-    var otherProps = ChartBase.getOtherProps(props);
-    var className = utils.classNames('p-chart', props.className);
-    var style = Object.assign({
-      width: props.width,
-      height: props.height
-    }, props.style);
-    return /*#__PURE__*/React__namespace.createElement("div", _extends({
-      id: props.id,
-      ref: elementRef,
-      style: style,
-      className: className
-    }, otherProps), /*#__PURE__*/React__namespace.createElement("canvas", {
-      ref: canvasRef,
-      width: props.width,
-      height: props.height
-    }));
-  }), function (prevProps, nextProps) {
-    return prevProps.data === nextProps.data && prevProps.options === nextProps.options && prevProps.type === nextProps.type;
-  });
-  PrimeReactChart.displayName = 'Chart';
+    PrimeReactChart.displayName = 'Chart';
 
-  exports.Chart = PrimeReactChart;
+    exports.Chart = PrimeReactChart;
 
-  Object.defineProperty(exports, '__esModule', { value: true });
+    Object.defineProperty(exports, '__esModule', { value: true });
 
-  return exports;
+    return exports;
 
-})({}, React, primereact.hooks, primereact.utils);
+})({}, React, primereact.hooks, primereact.utils, primereact.componentbase);

package/chart/chart.min.js

@@ -1 +1 @@
-this.primereact=this.primereact||{},this.primereact.chart=function(e,t,r,n){"use strict";function u(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 a=u(t);function c(){return c=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},c.apply(this,arguments)}var i={defaultProps:{__TYPE:"Chart",id:null,type:null,data:null,options:null,plugins:null,width:null,height:null,style:null,className:null,children:void 0},getProps:function(e){return n.ObjectUtils.getMergedProps(e,i.defaultProps)},getOtherProps:function(e){return n.ObjectUtils.getDiffProps(e,i.defaultProps)}},o=function(){try{return Chart}catch(e){return null}}(),s=a.memo(a.forwardRef((function(e,t){var u=i.getProps(e),s=a.useRef(null),l=a.useRef(null),f=a.useRef(null),p=function(){h();var e={type:u.type,data:u.data,options:u.options,plugins:u.plugins};o?l.current=new o(f.current,e):import("chart.js/auto").then((function(t){h(),f.current&&t&&(l.current=t.default?new t.default(f.current,e):new t(f.current,e))}))},h=function(){l.current&&(l.current.destroy(),l.current=null)};a.useImperativeHandle(t,(function(){return{props:u,getCanvas:function(){return f.current},getChart:function(){return l.current},getBase64Image:function(){return l.current.toBase64Image()},getElement:function(){return s.current},generateLegend:function(){return l.current&&l.current.generateLegend()},refresh:function(){return l.current&&l.current.update()}}})),a.useEffect((function(){p()})),r.useUnmountEffect((function(){h()}));var d=i.getOtherProps(u),g=n.classNames("p-chart",u.className),m=Object.assign({width:u.width,height:u.height},u.style);return a.createElement("div",c({id:u.id,ref:s,style:m,className:g},d),a.createElement("canvas",{ref:f,width:u.width,height:u.height}))})),(function(e,t){return e.data===t.data&&e.options===t.options&&e.type===t.type}));return s.displayName="Chart",e.Chart=s,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.hooks,primereact.utils);
+this.primereact=this.primereact||{},this.primereact.chart=function(e,t,r,n,u){"use strict";function a(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 i=a(t),c=u.ComponentBase.extend({defaultProps:{__TYPE:"Chart",id:null,type:null,data:null,options:null,plugins:null,width:null,height:null,style:null,className:null,children:void 0}}),o=function(){try{return Chart}catch(e){return null}}(),l=i.memo(i.forwardRef((function(e,t){var u=c.getProps(e),a=c.setMetaData({props:u}).ptm,l=i.useRef(null),s=i.useRef(null),p=i.useRef(null),f=function(){d();var e={type:u.type,data:u.data,options:u.options,plugins:u.plugins};o?s.current=new o(p.current,e):import("chart.js/auto").then((function(t){d(),p.current&&t&&(s.current=t.default?new t.default(p.current,e):new t(p.current,e))}))},d=function(){s.current&&(s.current.destroy(),s.current=null)};i.useImperativeHandle(t,(function(){return{props:u,getCanvas:function(){return p.current},getChart:function(){return s.current},getBase64Image:function(){return s.current.toBase64Image()},getElement:function(){return l.current},generateLegend:function(){return s.current&&s.current.generateLegend()},refresh:function(){return s.current&&s.current.update()}}})),i.useEffect((function(){f()})),r.useUnmountEffect((function(){d()}));var h=n.classNames("p-chart",u.className),g=Object.assign({width:u.width,height:u.height},u.style),m=u.ariaLabel||u.options&&u.options.plugins&&u.options.plugins.title&&u.options.plugins.title.text,y=n.mergeProps({id:u.id,ref:l,style:g,className:h},c.getOtherProps(u),a("root")),v=n.mergeProps({ref:p,width:u.width,height:u.height,role:"img","aria-label":m},a("canvas"));return i.createElement("div",y,i.createElement("canvas",v))})),(function(e,t){return e.data===t.data&&e.options===t.options&&e.type===t.type}));return l.displayName="Chart",e.Chart=l,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.hooks,primereact.utils,primereact.componentbase);

package/checkbox/checkbox.cjs.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var hooks = require('primereact/hooks');
+var check = require('primereact/icons/check');
 var tooltip = require('primereact/tooltip');
 var utils = require('primereact/utils');
-var check = require('primereact/icons/check');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -101,26 +101,28 @@ function _slicedToArray(arr, i) {
 var CheckboxBase = {
   defaultProps: {
     __TYPE: 'Checkbox',
-    id: null,
-    inputRef: null,
-    inputId: null,
-    value: null,
-    name: null,
+    autoFocus: false,
     checked: false,
-    trueValue: true,
-    falseValue: false,
-    style: null,
     className: null,
     disabled: false,
-    required: false,
+    falseValue: false,
+    icon: null,
+    id: null,
+    inputId: null,
+    inputRef: null,
+    name: null,
+    onChange: null,
+    onClick: null,
+    onContextMenu: null,
+    onMouseDown: null,
     readOnly: false,
+    required: false,
+    style: null,
     tabIndex: null,
-    icon: null,
     tooltip: null,
     tooltipOptions: null,
-    onChange: null,
-    onMouseDown: null,
-    onContextMenu: null,
+    trueValue: true,
+    value: null,
     children: undefined
   },
   getProps: function getProps(props) {
@@ -140,19 +142,26 @@ var Checkbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   var elementRef = React__namespace.useRef(null);
   var inputRef = React__namespace.useRef(props.inputRef);
   var onClick = function onClick(event) {
-    if (!props.disabled && !props.readOnly && props.onChange) {
+    if (props.disabled || props.readOnly) {
+      return;
+    }
+    if (props.onChange || props.onClick) {
       var _checked = isChecked();
       var checkboxClicked = event.target instanceof HTMLDivElement || event.target instanceof HTMLSpanElement || event.target instanceof Object;
       var isInputToggled = event.target === inputRef.current;
       var isCheckboxToggled = checkboxClicked && event.target.checked !== _checked;
       if (isInputToggled || isCheckboxToggled) {
         var value = _checked ? props.falseValue : props.trueValue;
-        props.onChange({
+        var eventData = {
           originalEvent: event,
           value: props.value,
           checked: value,
-          stopPropagation: function stopPropagation() {},
-          preventDefault: function preventDefault() {},
+          stopPropagation: function stopPropagation() {
+            event.stopPropagation();
+          },
+          preventDefault: function preventDefault() {
+            event.preventDefault();
+          },
           target: {
             type: 'checkbox',
             name: props.name,
@@ -160,7 +169,14 @@ var Checkbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
             value: props.value,
             checked: value
           }
-        });
+        };
+        props.onClick && props.onClick(eventData);
+
+        // do not continue if the user defined click wants to prevent
+        if (event.defaultPrevented) {
+          return;
+        }
+        props.onChange && props.onChange(eventData);
       }
       utils.DomHandler.focus(inputRef.current);
       event.preventDefault();
@@ -201,6 +217,11 @@ var Checkbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   hooks.useUpdateEffect(function () {
     inputRef.current.checked = isChecked();
   }, [props.checked, props.trueValue]);
+  hooks.useMountEffect(function () {
+    if (props.autoFocus) {
+      utils.DomHandler.focus(inputRef.current, props.autoFocus);
+    }
+  });
   var checked = isChecked();
   var hasTooltip = utils.ObjectUtils.isNotEmpty(props.tooltip);
   var otherProps = CheckboxBase.getOtherProps(props);

package/checkbox/checkbox.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/hooks"),n=require("primereact/tooltip"),r=require("primereact/utils"),o=require("primereact/icons/check");function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var l=c(e);function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},a.apply(this,arguments)}function u(e){if(Array.isArray(e))return e}function i(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,c,l,a=[],u=!0,i=!1;try{if(c=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;u=!1}else for(;!(u=(r=c.call(n)).done)&&(a.push(r.value),a.length!==t);u=!0);}catch(e){i=!0,o=e}finally{try{if(!u&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(i)throw o}}return a}}function s(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function f(e,t){if(e){if("string"==typeof e)return s(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?s(e,t):void 0}}function d(){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 p={defaultProps:{__TYPE:"Checkbox",id:null,inputRef:null,inputId:null,value:null,name:null,checked:!1,trueValue:!0,falseValue:!1,style:null,className:null,disabled:!1,required:!1,readOnly:!1,tabIndex:null,icon:null,tooltip:null,tooltipOptions:null,onChange:null,onMouseDown:null,onContextMenu:null,children:void 0},getProps:function(e){return r.ObjectUtils.getMergedProps(e,p.defaultProps)},getOtherProps:function(e){return r.ObjectUtils.getDiffProps(e,p.defaultProps)}},b=l.memo(l.forwardRef((function(e,c){var s,b,m=p.getProps(e),h=l.useState(!1),y=(b=2,u(s=h)||i(s,b)||f(s,b)||d()),g=y[0],v=y[1],O=l.useRef(null),k=l.useRef(m.inputRef),x=function(e){if(!m.disabled&&!m.readOnly&&m.onChange){var t=j(),n=e.target instanceof HTMLDivElement||e.target instanceof HTMLSpanElement||e.target instanceof Object;if(e.target===k.current||n&&e.target.checked!==t){var o=t?m.falseValue:m.trueValue;m.onChange({originalEvent:e,value:m.value,checked:o,stopPropagation:function(){},preventDefault:function(){},target:{type:"checkbox",name:m.name,id:m.id,value:m.value,checked:o}})}r.DomHandler.focus(k.current),e.preventDefault()}},j=function(){return m.checked===m.trueValue};l.useImperativeHandle(c,(function(){return{props:m,focus:function(){return r.DomHandler.focus(k.current)},getElement:function(){return O.current},getInput:function(){return k.current}}})),l.useEffect((function(){r.ObjectUtils.combinedRefs(k,m.inputRef)}),[k,m.inputRef]),t.useUpdateEffect((function(){k.current.checked=j()}),[m.checked,m.trueValue]);var E=j(),P=r.ObjectUtils.isNotEmpty(m.tooltip),I=p.getOtherProps(m),C=r.ObjectUtils.reduceKeys(I,r.DomHandler.ARIA_PROPS),D=r.classNames("p-checkbox p-component",{"p-checkbox-checked":E,"p-checkbox-disabled":m.disabled,"p-checkbox-focused":g},m.className),M=r.classNames("p-checkbox-box",{"p-highlight":E,"p-disabled":m.disabled,"p-focus":g}),w="p-checkbox-icon p-c",N=r.IconUtils.getJSXIcon(E?m.icon||l.createElement(o.CheckIcon,{className:w}):null,{className:w},{props:m,checked:E});return l.createElement(l.Fragment,null,l.createElement("div",a({ref:O,id:m.id,className:D,style:m.style},I,{onClick:x,onContextMenu:m.onContextMenu,onMouseDown:m.onMouseDown}),l.createElement("div",{className:"p-hidden-accessible"},l.createElement("input",a({ref:k,type:"checkbox",id:m.inputId,name:m.name,tabIndex:m.tabIndex,defaultChecked:E,onFocus:function(){v(!0)},onBlur:function(){v(!1)},onKeyDown:function(e){"Space"!==e.code&&" "!==e.key||x(e)},disabled:m.disabled,readOnly:m.readOnly,required:m.required},C))),l.createElement("div",{className:M},N)),P&&l.createElement(n.Tooltip,a({target:O,content:m.tooltip},m.tooltipOptions)))})));b.displayName="Checkbox",exports.Checkbox=b;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/hooks"),n=require("primereact/icons/check"),r=require("primereact/tooltip"),o=require("primereact/utils");function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var l=c(e);function u(){return u=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},u.apply(this,arguments)}function a(e){if(Array.isArray(e))return e}function i(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,c,l,u=[],a=!0,i=!1;try{if(c=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;a=!1}else for(;!(a=(r=c.call(n)).done)&&(u.push(r.value),u.length!==t);a=!0);}catch(e){i=!0,o=e}finally{try{if(!a&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(i)throw o}}return u}}function s(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function f(e,t){if(e){if("string"==typeof e)return s(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?s(e,t):void 0}}function d(){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 p={defaultProps:{__TYPE:"Checkbox",autoFocus:!1,checked:!1,className:null,disabled:!1,falseValue:!1,icon:null,id:null,inputId:null,inputRef:null,name:null,onChange:null,onClick:null,onContextMenu:null,onMouseDown:null,readOnly:!1,required:!1,style:null,tabIndex:null,tooltip:null,tooltipOptions:null,trueValue:!0,value:null,children:void 0},getProps:function(e){return o.ObjectUtils.getMergedProps(e,p.defaultProps)},getOtherProps:function(e){return o.ObjectUtils.getDiffProps(e,p.defaultProps)}},b=l.memo(l.forwardRef((function(e,c){var s,b,m=p.getProps(e),h=l.useState(!1),g=(b=2,a(s=h)||i(s,b)||f(s,b)||d()),y=g[0],v=g[1],k=l.useRef(null),O=l.useRef(m.inputRef),x=function(e){if(!m.disabled&&!m.readOnly&&(m.onChange||m.onClick)){var t=j(),n=e.target instanceof HTMLDivElement||e.target instanceof HTMLSpanElement||e.target instanceof Object;if(e.target===O.current||n&&e.target.checked!==t){var r=t?m.falseValue:m.trueValue,c={originalEvent:e,value:m.value,checked:r,stopPropagation:function(){e.stopPropagation()},preventDefault:function(){e.preventDefault()},target:{type:"checkbox",name:m.name,id:m.id,value:m.value,checked:r}};if(m.onClick&&m.onClick(c),e.defaultPrevented)return;m.onChange&&m.onChange(c)}o.DomHandler.focus(O.current),e.preventDefault()}},j=function(){return m.checked===m.trueValue};l.useImperativeHandle(c,(function(){return{props:m,focus:function(){return o.DomHandler.focus(O.current)},getElement:function(){return k.current},getInput:function(){return O.current}}})),l.useEffect((function(){o.ObjectUtils.combinedRefs(O,m.inputRef)}),[O,m.inputRef]),t.useUpdateEffect((function(){O.current.checked=j()}),[m.checked,m.trueValue]),t.useMountEffect((function(){m.autoFocus&&o.DomHandler.focus(O.current,m.autoFocus)}));var P=j(),C=o.ObjectUtils.isNotEmpty(m.tooltip),E=p.getOtherProps(m),D=o.ObjectUtils.reduceKeys(E,o.DomHandler.ARIA_PROPS),I=o.classNames("p-checkbox p-component",{"p-checkbox-checked":P,"p-checkbox-disabled":m.disabled,"p-checkbox-focused":y},m.className),M=o.classNames("p-checkbox-box",{"p-highlight":P,"p-disabled":m.disabled,"p-focus":y}),w="p-checkbox-icon p-c",N=o.IconUtils.getJSXIcon(P?m.icon||l.createElement(n.CheckIcon,{className:w}):null,{className:w},{props:m,checked:P});return l.createElement(l.Fragment,null,l.createElement("div",u({ref:k,id:m.id,className:I,style:m.style},E,{onClick:x,onContextMenu:m.onContextMenu,onMouseDown:m.onMouseDown}),l.createElement("div",{className:"p-hidden-accessible"},l.createElement("input",u({ref:O,type:"checkbox",id:m.inputId,name:m.name,tabIndex:m.tabIndex,defaultChecked:P,onFocus:function(){v(!0)},onBlur:function(){v(!1)},onKeyDown:function(e){"Space"!==e.code&&" "!==e.key||x(e)},disabled:m.disabled,readOnly:m.readOnly,required:m.required},D))),l.createElement("div",{className:M},N)),C&&l.createElement(r.Tooltip,u({target:k,content:m.tooltip},m.tooltipOptions)))})));b.displayName="Checkbox",exports.Checkbox=b;

package/checkbox/checkbox.d.ts

@@ -20,15 +20,28 @@ import { IconType } from '../utils';
  */
 interface CheckboxChangeEvent extends FormEvent {}
 
+/**
+ * Custom click event.
+ * @see {@link CheckboxProps.onClick}
+ * @extends {FormEvent}
+ * @event
+ */
+interface CheckboxClickEvent extends FormEvent {}
+
 /**
  * Defines valid properties in Checkbox component. In addition to these, all properties of HTMLDivElement can be used in this component.
  * @group Properties
  */
-export interface CheckboxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
+export interface CheckboxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'onClick' | 'ref'> {
     /**
      * Unique identifier of the element.
      */
     id?: string | undefined;
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @defaultValue false
+     */
+    autoFocus?: boolean | undefined;
     /**
      * Reference of the input element.
      */
@@ -106,6 +119,11 @@ export interface CheckboxProps extends Omit<React.DetailedHTMLProps<React.InputH
      * @param {CheckboxChangeEvent} event - Custom change event
      */
     onChange?(event: CheckboxChangeEvent): void;
+    /**
+     * Callback to invoke on value change. Mark the event with preventDefault to prevent the option from changing.
+     * @param {CheckboxClickEvent} event - Custom click event
+     */
+    onClick?(event: CheckboxClickEvent): void;
     /**
      * Callback to invoke to when a mouse button is pressed.
      * @param {React.MouseEvent<HTMLElement>} event - Browser event