primereact 10.5.0 → 10.5.2

package/tristatecheckbox/tristatecheckbox.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';
@@ -22,7 +23,6 @@ export declare type TriStateCheckboxPassThroughType<T> = PassThroughType<T, TriS
  */
 export interface TriStateCheckboxPassThroughMethodOptions {
     props: TriStateCheckboxProps;
-    state: TriStateCheckboxState;
 }
 
 /**
@@ -35,9 +35,13 @@ export interface TriStateCheckboxPassThroughOptions {
      */
     root?: TriStateCheckboxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
     /**
-     * Uses to pass attributes to the checkbox box's DOM element.
+     * Uses to pass attributes to the input's DOM element.
      */
-    checkbox?: TriStateCheckboxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    input?: CheckboxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to pass attributes to the box's DOM element.
+     */
+    box?: CheckboxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
     /**
      * Uses to pass attributes tooltip's DOM element.
      * @type {TooltipPassThroughOptions}
@@ -62,16 +66,6 @@ export interface TriStateCheckboxPassThroughOptions {
     hooks?: ComponentHooks;
 }
 
-/**
- * Defines current inline state in TriStateCheckbox component.
- */
-export interface TriStateCheckboxState {
-    /**
-     * Focused state as a boolean.
-     */
-    focused: boolean;
-}
-
 /**
  * Custom change event.
  * @see {@link TriStateCheckboxProps.onChange}
@@ -94,6 +88,11 @@ export interface TriStateCheckboxProps extends Omit<React.DetailedHTMLProps<Reac
      * Value of the TriStateCheckbox.
      */
     value?: boolean | undefined | null;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the element value cannot be altered.
      * @defaultValue false

package/tristatecheckbox/tristatecheckbox.esm.js

@@ -6,7 +6,7 @@ import { useMergeProps, useMountEffect } from 'primereact/hooks';
 import { CheckIcon } from 'primereact/icons/check';
 import { TimesIcon } from 'primereact/icons/times';
 import { Tooltip } from 'primereact/tooltip';
-import { classNames, ObjectUtils, DomHandler, IconUtils } from 'primereact/utils';
+import { classNames, DomHandler, ObjectUtils, IconUtils } from 'primereact/utils';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -64,78 +64,19 @@ 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 = {
   root: function root(_ref) {
     var props = _ref.props;
     return classNames('p-tristatecheckbox p-checkbox p-component', {
-      'p-checkbox-disabled': props.disabled
+      'p-highlight': props.value !== null,
+      'p-disabled': props.disabled,
+      'p-invalid': props.invalid,
+      'p-variant-filled': props.variant === 'filled'
     });
   },
   checkIcon: 'p-checkbox-icon p-c',
-  checkbox: function checkbox(_ref2) {
-    var props = _ref2.props,
-      focusedState = _ref2.focusedState;
-    return classNames('p-checkbox-box', {
-      'p-highlight': ObjectUtils.isNotEmpty(props.value),
-      'p-disabled': props.disabled,
-      'p-focus': focusedState
-    });
-  }
+  box: 'p-checkbox-box',
+  input: 'p-checkbox-input'
 };
 var TriStateCheckboxBase = ComponentBase.extend({
   defaultProps: {
@@ -145,6 +86,7 @@ var TriStateCheckboxBase = ComponentBase.extend({
     className: null,
     disabled: false,
     id: null,
+    invalid: false,
     onChange: null,
     readOnly: false,
     style: null,
@@ -166,16 +108,9 @@ var TriStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
   var mergeProps = useMergeProps();
   var context = React.useContext(PrimeReactContext);
   var props = TriStateCheckboxBase.getProps(inProps, context);
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    focusedState = _React$useState2[0],
-    setFocusedState = _React$useState2[1];
   var elementRef = React.useRef(null);
   var _TriStateCheckboxBase = TriStateCheckboxBase.setMetaData({
-      props: props,
-      state: {
-        focused: focusedState
-      }
+      props: props
     }),
     ptm = _TriStateCheckboxBase.ptm,
     cx = _TriStateCheckboxBase.cx,
@@ -183,12 +118,10 @@ var TriStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
   useHandleStyle(TriStateCheckboxBase.css.styles, isUnstyled, {
     name: 'tristatecheckbox'
   });
-  var onClick = function onClick(event) {
-    if (!props.disabled && !props.readOnly) {
-      toggle(event);
+  var onChange = function onChange(event) {
+    if (props.disabled || props.readOnly) {
+      return;
     }
-  };
-  var toggle = function toggle(event) {
     var newValue;
     if (props.value === null || props.value === undefined) newValue = true;else if (props.value === true) newValue = false;else if (props.value === false) newValue = null;
     if (props.onChange) {
@@ -209,15 +142,17 @@ var TriStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
       });
     }
   };
-  var onFocus = function onFocus() {
-    setFocusedState(true);
+  var onFocus = function 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() {
-    setFocusedState(false);
+  var onBlur = function 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 onKeyDown = function onKeyDown(e) {
     if (e.code === 'Enter' || e.code === 'Space') {
-      toggle(e);
+      onChange(e);
       e.preventDefault();
     }
   };
@@ -257,17 +192,15 @@ var TriStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
   });
   var ariaValueLabel = props.value ? ariaLabel('trueLabel') : props.value === false ? ariaLabel('falseLabel') : ariaLabel('nullLabel');
   var ariaChecked = props.value ? 'true' : 'false';
-  var checkboxProps = mergeProps(_objectSpread({
-    className: cx('checkbox', {
-      focusedState: focusedState
-    }),
-    tabIndex: props.tabIndex,
+  var boxProps = mergeProps(_objectSpread({
+    className: cx('box'),
+    tabIndex: props.disabled ? '-1' : props.tabIndex,
     onFocus: onFocus,
     onBlur: onBlur,
     onKeyDown: onKeyDown,
     role: 'checkbox',
     'aria-checked': ariaChecked
-  }, ariaProps), ptm('checkbox'));
+  }, ariaProps), ptm('box'));
   var srOnlyAriaProps = mergeProps({
     className: 'p-sr-only p-hidden-accessible',
     'aria-live': 'polite'
@@ -275,18 +208,27 @@ var TriStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
   var rootProps = mergeProps({
     className: classNames(props.className, cx('root')),
     style: props.style,
-    onClick: onClick,
     'data-p-disabled': props.disabled
   }, TriStateCheckboxBase.getOtherProps(props), ptm('root'));
+  var inputProps = mergeProps({
+    id: props.inputId,
+    className: cx('input'),
+    type: 'checkbox',
+    'aria-invalid': props.invalid,
+    disabled: props.disabled,
+    readonly: props.readOnly,
+    value: props.value,
+    checked: props.value,
+    onChange: onChange
+  });
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
     id: props.id,
     ref: elementRef
-  }, rootProps), /*#__PURE__*/React.createElement("div", checkboxProps, checkIcon), focusedState && /*#__PURE__*/React.createElement("span", srOnlyAriaProps, ariaValueLabel)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
+  }, rootProps), /*#__PURE__*/React.createElement("input", inputProps), /*#__PURE__*/React.createElement("span", srOnlyAriaProps, ariaValueLabel), /*#__PURE__*/React.createElement("div", boxProps, checkIcon)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
     target: elementRef,
-    content: props.tooltip
-  }, props.tooltipOptions, {
+    content: props.tooltip,
     pt: ptm('tooltip')
-  })));
+  }, props.tooltipOptions)));
 }));
 TriStateCheckbox.displayName = 'TriStateCheckbox';
 

package/tristatecheckbox/tristatecheckbox.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import{PrimeReactContext as t,ariaLabel as r}from"primereact/api";import{ComponentBase as n,useHandleStyle as o}from"primereact/componentbase";import{useMergeProps as c,useMountEffect as a}from"primereact/hooks";import{CheckIcon as l}from"primereact/icons/check";import{TimesIcon as i}from"primereact/icons/times";import{Tooltip as u}from"primereact/tooltip";import{classNames as s,ObjectUtils as p,DomHandler as f,IconUtils as m}from"primereact/utils";function b(){return b=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},b.apply(this,arguments)}function y(e){return y="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},y(e)}function d(e,t){if("object"!==y(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==y(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function v(e){var t=d(e,"string");return"symbol"===y(t)?t:String(t)}function h(e){if(Array.isArray(e))return e}function g(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,c,a,l=[],i=!0,u=!1;try{if(c=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;i=!1}else for(;!(i=(n=c.call(r)).done)&&(l.push(n.value),l.length!==t);i=!0);}catch(e){u=!0,o=e}finally{try{if(!i&&null!=r.return&&(a=r.return(),Object(a)!==a))return}finally{if(u)throw o}}return l}}function O(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 k(e,t){if(e){if("string"==typeof e)return O(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)?O(e,t):void 0}}function S(){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:"TriStateCheckbox",autoFocus:!1,checkIcon:null,className:null,disabled:!1,id:null,onChange:null,readOnly:!1,style:null,tabIndex:"0",tooltip:null,tooltipOptions:null,uncheckIcon:null,value:null,children:void 0},css:{classes:{root:function(e){return s("p-tristatecheckbox p-checkbox p-component",{"p-checkbox-disabled":e.props.disabled})},checkIcon:"p-checkbox-icon p-c",checkbox:function(e){var t=e.props,r=e.focusedState;return s("p-checkbox-box",{"p-highlight":p.isNotEmpty(t.value),"p-disabled":t.disabled,"p-focus":r})}}}});function x(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 P(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?x(Object(r),!0).forEach((function(t){var n,o,c;n=e,c=r[t],(o=v(o=t))in n?Object.defineProperty(n,o,{value:c,enumerable:!0,configurable:!0,writable:!0}):n[o]=c})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):x(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var E=e.memo(e.forwardRef((function(n,y){var d,v,O=c(),x=e.useContext(t),E=j.getProps(n,x),I=e.useState(!1),w=(v=2,h(d=I)||g(d,v)||k(d,v)||S()),N=w[0],A=w[1],D=e.useRef(null),C=j.setMetaData({props:E,state:{focused:N}}),F=C.ptm,T=C.cx;o(j.css.styles,C.isUnstyled,{name:"tristatecheckbox"});var R=function(e){var t;null==E.value?t=!0:!0===E.value?t=!1:!1===E.value&&(t=null),E.onChange&&E.onChange({originalEvent:e,value:t,stopPropagation:function(){e.stopPropagation()},preventDefault:function(){e.preventDefault()},target:{name:E.name,id:E.id,value:t}})};e.useImperativeHandle(y,(function(){return{props:E,focus:function(){return f.focusFirstElement(D.current)},getElement:function(){return D.current}}})),a((function(){E.autoFocus&&f.focusFirstElement(D.current)}));var L,_=p.isNotEmpty(E.tooltip),K=j.getOtherProps(E),M=p.reduceKeys(K,f.ARIA_PROPS),U=O({className:T("checkIcon")},F("checkIcon")),B=O({className:T("checkIcon")},F("uncheckIcon"));!1===E.value?L=E.uncheckIcon||e.createElement(i,B):!0===E.value&&(L=E.checkIcon||e.createElement(l,U));var H=m.getJSXIcon(L,P({},U),{props:E}),J=r(E.value?"trueLabel":!1===E.value?"falseLabel":"nullLabel"),X=E.value?"true":"false",Y=O(P({className:T("checkbox",{focusedState:N}),tabIndex:E.tabIndex,onFocus:function(){A(!0)},onBlur:function(){A(!1)},onKeyDown:function(e){"Enter"!==e.code&&"Space"!==e.code||(R(e),e.preventDefault())},role:"checkbox","aria-checked":X},M),F("checkbox")),$=O({className:"p-sr-only p-hidden-accessible","aria-live":"polite"},F("srOnlyAria")),q=O({className:s(E.className,T("root")),style:E.style,onClick:function(e){E.disabled||E.readOnly||R(e)},"data-p-disabled":E.disabled},j.getOtherProps(E),F("root"));return e.createElement(e.Fragment,null,e.createElement("div",b({id:E.id,ref:D},q),e.createElement("div",Y,H),N&&e.createElement("span",$,J)),_&&e.createElement(u,b({target:D,content:E.tooltip},E.tooltipOptions,{pt:F("tooltip")})))})));E.displayName="TriStateCheckbox";export{E as TriStateCheckbox};
+import*as e from"react";import{PrimeReactContext as t,ariaLabel as r}from"primereact/api";import{ComponentBase as n,useHandleStyle as o}from"primereact/componentbase";import{useMergeProps as a,useMountEffect as l}from"primereact/hooks";import{CheckIcon as c}from"primereact/icons/check";import{TimesIcon as i}from"primereact/icons/times";import{Tooltip as u}from"primereact/tooltip";import{classNames as s,DomHandler as p,ObjectUtils as m,IconUtils as f}from"primereact/utils";function b(){return b=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},b.apply(this,arguments)}function d(e){return d="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},d(e)}function v(e,t){if("object"!==d(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==d(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function y(e){var t=v(e,"string");return"symbol"===d(t)?t:String(t)}var h=n.extend({defaultProps:{__TYPE:"TriStateCheckbox",autoFocus:!1,checkIcon:null,className:null,disabled:!1,id:null,invalid:!1,onChange:null,readOnly:!1,style:null,tabIndex:"0",tooltip:null,tooltipOptions:null,uncheckIcon:null,value:null,children:void 0},css:{classes:{root:function(e){var t=e.props;return s("p-tristatecheckbox p-checkbox p-component",{"p-highlight":null!==t.value,"p-disabled":t.disabled,"p-invalid":t.invalid,"p-variant-filled":"filled"===t.variant})},checkIcon:"p-checkbox-icon p-c",box:"p-checkbox-box",input:"p-checkbox-input"}}});function g(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?g(Object(r),!0).forEach((function(t){var n,o,a;n=e,a=r[t],(o=y(o=t))in n?Object.defineProperty(n,o,{value:a,enumerable:!0,configurable:!0,writable:!0}):n[o]=a})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):g(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var k=e.memo(e.forwardRef((function(n,d){var v=a(),y=e.useContext(t),g=h.getProps(n,y),k=e.useRef(null),x=h.setMetaData({props:g}),P=x.ptm,E=x.cx;o(h.css.styles,x.isUnstyled,{name:"tristatecheckbox"});var j=function(e){var t;g.disabled||g.readOnly||(null==g.value?t=!0:!0===g.value?t=!1:!1===g.value&&(t=null),g.onChange&&g.onChange({originalEvent:e,value:t,stopPropagation:function(){e.stopPropagation()},preventDefault:function(){e.preventDefault()},target:{name:g.name,id:g.id,value:t}}))};e.useImperativeHandle(d,(function(){return{props:g,focus:function(){return p.focusFirstElement(k.current)},getElement:function(){return k.current}}})),l((function(){g.autoFocus&&p.focusFirstElement(k.current)}));var I,S=m.isNotEmpty(g.tooltip),w=h.getOtherProps(g),N=m.reduceKeys(w,p.ARIA_PROPS),D=v({className:E("checkIcon")},P("checkIcon")),C=v({className:E("checkIcon")},P("uncheckIcon"));!1===g.value?I=g.uncheckIcon||e.createElement(i,C):!0===g.value&&(I=g.checkIcon||e.createElement(c,D));var F=f.getJSXIcon(I,O({},D),{props:g}),R=r(g.value?"trueLabel":!1===g.value?"falseLabel":"nullLabel"),T=g.value?"true":"false",A=v(O({className:E("box"),tabIndex:g.disabled?"-1":g.tabIndex,onFocus:function(e){var t;null==g||null===(t=g.onFocus)||void 0===t||t.call(g,e)},onBlur:function(e){var t;null==g||null===(t=g.onBlur)||void 0===t||t.call(g,e)},onKeyDown:function(e){"Enter"!==e.code&&"Space"!==e.code||(j(e),e.preventDefault())},role:"checkbox","aria-checked":T},N),P("box")),L=v({className:"p-sr-only p-hidden-accessible","aria-live":"polite"},P("srOnlyAria")),_=v({className:s(g.className,E("root")),style:g.style,"data-p-disabled":g.disabled},h.getOtherProps(g),P("root")),B=v({id:g.inputId,className:E("input"),type:"checkbox","aria-invalid":g.invalid,disabled:g.disabled,readonly:g.readOnly,value:g.value,checked:g.value,onChange:j});return e.createElement(e.Fragment,null,e.createElement("div",b({id:g.id,ref:k},_),e.createElement("input",B),e.createElement("span",L,R),e.createElement("div",A,F)),S&&e.createElement(u,b({target:k,content:g.tooltip,pt:P("tooltip")},g.tooltipOptions)))})));k.displayName="TriStateCheckbox";export{k as TriStateCheckbox};

package/tristatecheckbox/tristatecheckbox.js

@@ -78,78 +78,19 @@ this.primereact.tristatecheckbox = (function (exports, React, api, componentbase
     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 = {
     root: function root(_ref) {
       var props = _ref.props;
       return utils.classNames('p-tristatecheckbox p-checkbox p-component', {
-        'p-checkbox-disabled': props.disabled
+        'p-highlight': props.value !== null,
+        'p-disabled': props.disabled,
+        'p-invalid': props.invalid,
+        'p-variant-filled': props.variant === 'filled'
       });
     },
     checkIcon: 'p-checkbox-icon p-c',
-    checkbox: function checkbox(_ref2) {
-      var props = _ref2.props,
-        focusedState = _ref2.focusedState;
-      return utils.classNames('p-checkbox-box', {
-        'p-highlight': utils.ObjectUtils.isNotEmpty(props.value),
-        'p-disabled': props.disabled,
-        'p-focus': focusedState
-      });
-    }
+    box: 'p-checkbox-box',
+    input: 'p-checkbox-input'
   };
   var TriStateCheckboxBase = componentbase.ComponentBase.extend({
     defaultProps: {
@@ -159,6 +100,7 @@ this.primereact.tristatecheckbox = (function (exports, React, api, componentbase
       className: null,
       disabled: false,
       id: null,
+      invalid: false,
       onChange: null,
       readOnly: false,
       style: null,
@@ -180,16 +122,9 @@ this.primereact.tristatecheckbox = (function (exports, React, api, componentbase
     var mergeProps = hooks.useMergeProps();
     var context = React__namespace.useContext(api.PrimeReactContext);
     var props = TriStateCheckboxBase.getProps(inProps, context);
-    var _React$useState = React__namespace.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      focusedState = _React$useState2[0],
-      setFocusedState = _React$useState2[1];
     var elementRef = React__namespace.useRef(null);
     var _TriStateCheckboxBase = TriStateCheckboxBase.setMetaData({
-        props: props,
-        state: {
-          focused: focusedState
-        }
+        props: props
       }),
       ptm = _TriStateCheckboxBase.ptm,
       cx = _TriStateCheckboxBase.cx,
@@ -197,12 +132,10 @@ this.primereact.tristatecheckbox = (function (exports, React, api, componentbase
     componentbase.useHandleStyle(TriStateCheckboxBase.css.styles, isUnstyled, {
       name: 'tristatecheckbox'
     });
-    var onClick = function onClick(event) {
-      if (!props.disabled && !props.readOnly) {
-        toggle(event);
+    var onChange = function onChange(event) {
+      if (props.disabled || props.readOnly) {
+        return;
       }
-    };
-    var toggle = function toggle(event) {
       var newValue;
       if (props.value === null || props.value === undefined) newValue = true;else if (props.value === true) newValue = false;else if (props.value === false) newValue = null;
       if (props.onChange) {
@@ -223,15 +156,17 @@ this.primereact.tristatecheckbox = (function (exports, React, api, componentbase
         });
       }
     };
-    var onFocus = function onFocus() {
-      setFocusedState(true);
+    var onFocus = function 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() {
-      setFocusedState(false);
+    var onBlur = function 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 onKeyDown = function onKeyDown(e) {
       if (e.code === 'Enter' || e.code === 'Space') {
-        toggle(e);
+        onChange(e);
         e.preventDefault();
       }
     };
@@ -271,17 +206,15 @@ this.primereact.tristatecheckbox = (function (exports, React, api, componentbase
     });
     var ariaValueLabel = props.value ? api.ariaLabel('trueLabel') : props.value === false ? api.ariaLabel('falseLabel') : api.ariaLabel('nullLabel');
     var ariaChecked = props.value ? 'true' : 'false';
-    var checkboxProps = mergeProps(_objectSpread({
-      className: cx('checkbox', {
-        focusedState: focusedState
-      }),
-      tabIndex: props.tabIndex,
+    var boxProps = mergeProps(_objectSpread({
+      className: cx('box'),
+      tabIndex: props.disabled ? '-1' : props.tabIndex,
       onFocus: onFocus,
       onBlur: onBlur,
       onKeyDown: onKeyDown,
       role: 'checkbox',
       'aria-checked': ariaChecked
-    }, ariaProps), ptm('checkbox'));
+    }, ariaProps), ptm('box'));
     var srOnlyAriaProps = mergeProps({
       className: 'p-sr-only p-hidden-accessible',
       'aria-live': 'polite'
@@ -289,18 +222,27 @@ this.primereact.tristatecheckbox = (function (exports, React, api, componentbase
     var rootProps = mergeProps({
       className: utils.classNames(props.className, cx('root')),
       style: props.style,
-      onClick: onClick,
       'data-p-disabled': props.disabled
     }, TriStateCheckboxBase.getOtherProps(props), ptm('root'));
+    var inputProps = mergeProps({
+      id: props.inputId,
+      className: cx('input'),
+      type: 'checkbox',
+      'aria-invalid': props.invalid,
+      disabled: props.disabled,
+      readonly: props.readOnly,
+      value: props.value,
+      checked: props.value,
+      onChange: onChange
+    });
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", _extends({
       id: props.id,
       ref: elementRef
-    }, rootProps), /*#__PURE__*/React__namespace.createElement("div", checkboxProps, checkIcon), focusedState && /*#__PURE__*/React__namespace.createElement("span", srOnlyAriaProps, ariaValueLabel)), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
+    }, rootProps), /*#__PURE__*/React__namespace.createElement("input", inputProps), /*#__PURE__*/React__namespace.createElement("span", srOnlyAriaProps, ariaValueLabel), /*#__PURE__*/React__namespace.createElement("div", boxProps, checkIcon)), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
       target: elementRef,
-      content: props.tooltip
-    }, props.tooltipOptions, {
+      content: props.tooltip,
       pt: ptm('tooltip')
-    })));
+    }, props.tooltipOptions)));
   }));
   TriStateCheckbox.displayName = 'TriStateCheckbox';
 

package/tristatecheckbox/tristatecheckbox.min.js

@@ -1 +1 @@
-this.primereact=this.primereact||{},this.primereact.tristatecheckbox=function(e,t,r,n,o,c,a,l,i){"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 s=u(t);function p(){return p=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},p.apply(this,arguments)}function f(e){return f="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},f(e)}function b(e,t){if("object"!==f(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==f(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function m(e){var t=b(e,"string");return"symbol"===f(t)?t:String(t)}function d(e){if(Array.isArray(e))return e}function y(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,c,a,l=[],i=!0,u=!1;try{if(c=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;i=!1}else for(;!(i=(n=c.call(r)).done)&&(l.push(n.value),l.length!==t);i=!0);}catch(e){u=!0,o=e}finally{try{if(!i&&null!=r.return&&(a=r.return(),Object(a)!==a))return}finally{if(u)throw o}}return l}}function h(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 v(e,t){if(e){if("string"==typeof e)return h(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)?h(e,t):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 g=n.ComponentBase.extend({defaultProps:{__TYPE:"TriStateCheckbox",autoFocus:!1,checkIcon:null,className:null,disabled:!1,id:null,onChange:null,readOnly:!1,style:null,tabIndex:"0",tooltip:null,tooltipOptions:null,uncheckIcon:null,value:null,children:void 0},css:{classes:{root:function(e){return i.classNames("p-tristatecheckbox p-checkbox p-component",{"p-checkbox-disabled":e.props.disabled})},checkIcon:"p-checkbox-icon p-c",checkbox:function(e){var t=e.props,r=e.focusedState;return i.classNames("p-checkbox-box",{"p-highlight":i.ObjectUtils.isNotEmpty(t.value),"p-disabled":t.disabled,"p-focus":r})}}}});function j(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 k(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?j(Object(r),!0).forEach((function(t){var n,o,c;n=e,c=r[t],(o=m(o=t))in n?Object.defineProperty(n,o,{value:c,enumerable:!0,configurable:!0,writable:!0}):n[o]=c})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):j(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var P=s.memo(s.forwardRef((function(e,t){var u,f,b=o.useMergeProps(),m=s.useContext(r.PrimeReactContext),h=g.getProps(e,m),j=s.useState(!1),P=(f=2,d(u=j)||y(u,f)||v(u,f)||O()),S=P[0],x=P[1],E=s.useRef(null),I=g.setMetaData({props:h,state:{focused:S}}),w=I.ptm,N=I.cx;n.useHandleStyle(g.css.styles,I.isUnstyled,{name:"tristatecheckbox"});var D=function(e){var t;null==h.value?t=!0:!0===h.value?t=!1:!1===h.value&&(t=null),h.onChange&&h.onChange({originalEvent:e,value:t,stopPropagation:function(){e.stopPropagation()},preventDefault:function(){e.preventDefault()},target:{name:h.name,id:h.id,value:t}})};s.useImperativeHandle(t,(function(){return{props:h,focus:function(){return i.DomHandler.focusFirstElement(E.current)},getElement:function(){return E.current}}})),o.useMountEffect((function(){h.autoFocus&&i.DomHandler.focusFirstElement(E.current)}));var C,A=i.ObjectUtils.isNotEmpty(h.tooltip),T=g.getOtherProps(h),_=i.ObjectUtils.reduceKeys(T,i.DomHandler.ARIA_PROPS),F=b({className:N("checkIcon")},w("checkIcon")),M=b({className:N("checkIcon")},w("uncheckIcon"));!1===h.value?C=h.uncheckIcon||s.createElement(a.TimesIcon,M):!0===h.value&&(C=h.checkIcon||s.createElement(c.CheckIcon,F));var R=i.IconUtils.getJSXIcon(C,k({},F),{props:h}),U=r.ariaLabel(h.value?"trueLabel":!1===h.value?"falseLabel":"nullLabel"),H=h.value?"true":"false",L=b(k({className:N("checkbox",{focusedState:S}),tabIndex:h.tabIndex,onFocus:function(){x(!0)},onBlur:function(){x(!1)},onKeyDown:function(e){"Enter"!==e.code&&"Space"!==e.code||(D(e),e.preventDefault())},role:"checkbox","aria-checked":H},_),w("checkbox")),B=b({className:"p-sr-only p-hidden-accessible","aria-live":"polite"},w("srOnlyAria")),K=b({className:i.classNames(h.className,N("root")),style:h.style,onClick:function(e){h.disabled||h.readOnly||D(e)},"data-p-disabled":h.disabled},g.getOtherProps(h),w("root"));return s.createElement(s.Fragment,null,s.createElement("div",p({id:h.id,ref:E},K),s.createElement("div",L,R),S&&s.createElement("span",B,U)),A&&s.createElement(l.Tooltip,p({target:E,content:h.tooltip},h.tooltipOptions,{pt:w("tooltip")})))})));return P.displayName="TriStateCheckbox",e.TriStateCheckbox=P,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.componentbase,primereact.hooks,primereact.icons.check,primereact.icons.times,primereact.tooltip,primereact.utils);
+this.primereact=this.primereact||{},this.primereact.tristatecheckbox=function(e,t,n,r,o,a,c,l,i){"use strict";function u(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 s=u(t);function p(){return p=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},p.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 d(e,t){if("object"!==b(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==b(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function f(e){var t=d(e,"string");return"symbol"===b(t)?t:String(t)}var m=r.ComponentBase.extend({defaultProps:{__TYPE:"TriStateCheckbox",autoFocus:!1,checkIcon:null,className:null,disabled:!1,id:null,invalid:!1,onChange:null,readOnly:!1,style:null,tabIndex:"0",tooltip:null,tooltipOptions:null,uncheckIcon:null,value:null,children:void 0},css:{classes:{root:function(e){var t=e.props;return i.classNames("p-tristatecheckbox p-checkbox p-component",{"p-highlight":null!==t.value,"p-disabled":t.disabled,"p-invalid":t.invalid,"p-variant-filled":"filled"===t.variant})},checkIcon:"p-checkbox-icon p-c",box:"p-checkbox-box",input:"p-checkbox-input"}}});function v(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}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 r,o,a;r=e,a=n[t],(o=f(o=t))in r?Object.defineProperty(r,o,{value:a,enumerable:!0,configurable:!0,writable:!0}):r[o]=a})):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=s.memo(s.forwardRef((function(e,t){var u=o.useMergeProps(),b=s.useContext(n.PrimeReactContext),d=m.getProps(e,b),f=s.useRef(null),v=m.setMetaData({props:d}),h=v.ptm,O=v.cx;r.useHandleStyle(m.css.styles,v.isUnstyled,{name:"tristatecheckbox"});var g=function(e){var t;d.disabled||d.readOnly||(null==d.value?t=!0:!0===d.value?t=!1:!1===d.value&&(t=null),d.onChange&&d.onChange({originalEvent:e,value:t,stopPropagation:function(){e.stopPropagation()},preventDefault:function(){e.preventDefault()},target:{name:d.name,id:d.id,value:t}}))};s.useImperativeHandle(t,(function(){return{props:d,focus:function(){return i.DomHandler.focusFirstElement(f.current)},getElement:function(){return f.current}}})),o.useMountEffect((function(){d.autoFocus&&i.DomHandler.focusFirstElement(f.current)}));var k,P=i.ObjectUtils.isNotEmpty(d.tooltip),j=m.getOtherProps(d),x=i.ObjectUtils.reduceKeys(j,i.DomHandler.ARIA_PROPS),E=u({className:O("checkIcon")},h("checkIcon")),I=u({className:O("checkIcon")},h("uncheckIcon"));!1===d.value?k=d.uncheckIcon||s.createElement(c.TimesIcon,I):!0===d.value&&(k=d.checkIcon||s.createElement(a.CheckIcon,E));var S=i.IconUtils.getJSXIcon(k,y({},E),{props:d}),w=n.ariaLabel(d.value?"trueLabel":!1===d.value?"falseLabel":"nullLabel"),D=d.value?"true":"false",N=u(y({className:O("box"),tabIndex:d.disabled?"-1":d.tabIndex,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){"Enter"!==e.code&&"Space"!==e.code||(g(e),e.preventDefault())},role:"checkbox","aria-checked":D},x),h("box")),C=u({className:"p-sr-only p-hidden-accessible","aria-live":"polite"},h("srOnlyAria")),F=u({className:i.classNames(d.className,O("root")),style:d.style,"data-p-disabled":d.disabled},m.getOtherProps(d),h("root")),T=u({id:d.inputId,className:O("input"),type:"checkbox","aria-invalid":d.invalid,disabled:d.disabled,readonly:d.readOnly,value:d.value,checked:d.value,onChange:g});return s.createElement(s.Fragment,null,s.createElement("div",p({id:d.id,ref:f},F),s.createElement("input",T),s.createElement("span",C,w),s.createElement("div",N,S)),P&&s.createElement(l.Tooltip,p({target:f,content:d.tooltip,pt:h("tooltip")},d.tooltipOptions)))})));return h.displayName="TriStateCheckbox",e.TriStateCheckbox=h,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.componentbase,primereact.hooks,primereact.icons.check,primereact.icons.times,primereact.tooltip,primereact.utils);