primereact 10.5.1 → 10.5.3

package/checkbox/checkbox.esm.js

@@ -63,85 +63,21 @@ 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 = {
-  icon: 'p-checkbox-icon p-c',
-  input: function input(_ref) {
+  box: 'p-checkbox-box',
+  input: 'p-checkbox-input',
+  icon: 'p-checkbox-icon',
+  root: function root(_ref) {
     var props = _ref.props,
-      checked = _ref.checked,
-      focusedState = _ref.focusedState;
-    return classNames('p-checkbox-box', {
+      checked = _ref.checked;
+    return classNames('p-checkbox p-component', {
       'p-highlight': checked,
       'p-disabled': props.disabled,
-      'p-focus': focusedState
-    });
-  },
-  root: function root(_ref2) {
-    var props = _ref2.props,
-      checked = _ref2.checked,
-      focusedState = _ref2.focusedState;
-    return classNames('p-checkbox p-component', {
-      'p-checkbox-checked': checked,
-      'p-checkbox-disabled': props.disabled,
-      'p-checkbox-focused': focusedState
+      'p-invalid': props.invalid,
+      'p-variant-filled': props.variant === 'filled'
     });
   }
 };
-var styles = "\n.p-checkbox {\n    display: inline-flex;\n    cursor: pointer;\n    user-select: none;\n    vertical-align: bottom;\n    position: relative;\n}\n\n.p-checkbox.p-checkbox-disabled {\n    cursor: auto;\n}\n\n.p-checkbox-box {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}        \n";
 var CheckboxBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Checkbox',
@@ -154,6 +90,7 @@ var CheckboxBase = ComponentBase.extend({
     id: null,
     inputId: null,
     inputRef: null,
+    invalid: false,
     name: null,
     onChange: null,
     onClick: null,
@@ -170,8 +107,7 @@ var CheckboxBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes,
-    styles: styles
+    classes: classes
   }
 });
 
@@ -181,15 +117,8 @@ var Checkbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   var mergeProps = useMergeProps();
   var context = React.useContext(PrimeReactContext);
   var props = CheckboxBase.getProps(inProps, context);
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    focusedState = _React$useState2[0],
-    setFocusedState = _React$useState2[1];
   var _CheckboxBase$setMeta = CheckboxBase.setMetaData({
       props: props,
-      state: {
-        focused: focusedState
-      },
       context: {
         checked: props.checked === props.trueValue,
         disabled: props.disabled
@@ -199,20 +128,19 @@ var Checkbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     cx = _CheckboxBase$setMeta.cx,
     isUnstyled = _CheckboxBase$setMeta.isUnstyled;
   useHandleStyle(CheckboxBase.css.styles, isUnstyled, {
-    name: 'checkbox',
-    styled: true
+    name: 'checkbox'
   });
   var elementRef = React.useRef(null);
   var inputRef = React.useRef(props.inputRef);
-  var _onClick = function onClick(event) {
-    if (props.disabled || props.readOnly) {
+  var isChecked = function isChecked() {
+    return props.checked === props.trueValue;
+  };
+  var _onChange = function onChange(event) {
+    if (props.disabled || props.readonly) {
       return;
     }
-    if (props.onChange || props.onClick) {
+    if (props.onChange) {
       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;
       var value = _checked ? props.falseValue : props.trueValue;
       var eventData = {
         originalEvent: event,
@@ -232,33 +160,22 @@ var Checkbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
           checked: value
         }
       };
-      props.onClick && props.onClick(eventData);
+      props.onChange && props.onChange(eventData);
 
       // do not continue if the user defined click wants to prevent
       if (event.defaultPrevented) {
         return;
       }
-      if (isInputToggled || isCheckboxToggled) {
-        props.onChange && props.onChange(eventData);
-      }
       DomHandler.focus(inputRef.current);
-      event.preventDefault();
     }
   };
   var _onFocus = function onFocus() {
-    setFocusedState(true);
+    var _props$onFocus;
+    props === null || props === void 0 || (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props);
   };
   var _onBlur = function onBlur() {
-    setFocusedState(false);
-  };
-  var _onKeyDown = function onKeyDown(event) {
-    if (event.code === 'Space' || event.key === ' ') {
-      // event.key is for Android support
-      _onClick(event);
-    }
-  };
-  var isChecked = function isChecked() {
-    return props.checked === props.trueValue;
+    var _props$onBlur;
+    props === null || props === void 0 || (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props);
   };
   React.useImperativeHandle(ref, function () {
     return {
@@ -288,66 +205,66 @@ var Checkbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   var checked = isChecked();
   var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
   var otherProps = CheckboxBase.getOtherProps(props);
-  var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
-  var iconProps = mergeProps({
-    className: cx('icon')
-  }, ptm('icon'));
-  var icon = checked ? props.icon || /*#__PURE__*/React.createElement(CheckIcon, iconProps) : null;
-  var checkboxIcon = IconUtils.getJSXIcon(icon, _objectSpread({}, iconProps), {
-    props: props,
-    checked: checked
-  });
   var rootProps = mergeProps({
     id: props.id,
     className: classNames(props.className, cx('root', {
-      checked: checked,
-      focusedState: focusedState
+      checked: checked
     })),
     style: props.style,
-    onClick: function onClick(e) {
-      return _onClick(e);
-    },
     'data-p-highlight': checked,
     'data-p-disabled': props.disabled,
     onContextMenu: props.onContextMenu,
     onMouseDown: props.onMouseDown
   }, otherProps, ptm('root'));
-  var hiddenInputWrapperProps = mergeProps({
-    className: 'p-hidden-accessible'
-  }, ptm('hiddenInputWrapper'));
-  var hiddenInputProps = mergeProps(_objectSpread({
-    id: props.inputId,
-    type: 'checkbox',
-    name: props.name,
-    tabIndex: props.tabIndex,
-    defaultChecked: checked,
-    onFocus: function onFocus(e) {
-      return _onFocus();
-    },
-    onBlur: function onBlur(e) {
-      return _onBlur();
-    },
-    onKeyDown: function onKeyDown(e) {
-      return _onKeyDown(e);
-    },
-    disabled: props.disabled,
-    readOnly: props.readOnly,
-    required: props.required
-  }, ariaProps), ptm('hiddenInput'));
-  var inputProps = mergeProps({
-    className: cx('input', {
-      checked: checked,
-      focusedState: focusedState
-    }),
-    'data-p-highlight': checked,
-    'data-p-disabled': props.disabled,
-    'data-p-focus': focusedState
-  }, ptm('input'));
+  var createInputElement = function createInputElement() {
+    var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
+    var inputProps = mergeProps(_objectSpread({
+      id: props.inputId,
+      type: 'checkbox',
+      className: cx('input'),
+      name: props.name,
+      tabIndex: props.tabIndex,
+      defaultChecked: checked,
+      onFocus: function onFocus(e) {
+        return _onFocus();
+      },
+      onBlur: function onBlur(e) {
+        return _onBlur();
+      },
+      onChange: function onChange(e) {
+        return _onChange(e);
+      },
+      disabled: props.disabled,
+      readOnly: props.readOnly,
+      required: props.required,
+      'aria-invalid': props.invalid,
+      checked: isChecked()
+    }, ariaProps), ptm('input'));
+    return /*#__PURE__*/React.createElement("input", _extends({
+      ref: inputRef
+    }, inputProps));
+  };
+  var createBoxElement = function createBoxElement() {
+    var iconProps = mergeProps({
+      className: cx('icon')
+    }, ptm('icon'));
+    var boxProps = mergeProps({
+      className: cx('box', {
+        checked: checked
+      }),
+      'data-p-highlight': checked,
+      'data-p-disabled': props.disabled
+    }, ptm('box'));
+    var icon = checked ? props.icon || /*#__PURE__*/React.createElement(CheckIcon, iconProps) : null;
+    var checkboxIcon = IconUtils.getJSXIcon(icon, _objectSpread({}, iconProps), {
+      props: props,
+      checked: checked
+    });
+    return /*#__PURE__*/React.createElement("div", boxProps, checkboxIcon);
+  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
     ref: elementRef
-  }, rootProps), /*#__PURE__*/React.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React.createElement("input", _extends({
-    ref: inputRef
-  }, hiddenInputProps))), /*#__PURE__*/React.createElement("div", inputProps, checkboxIcon)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
+  }, rootProps), createInputElement(), createBoxElement()), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
     target: elementRef,
     content: props.tooltip,
     pt: ptm('tooltip')

package/checkbox/checkbox.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import{PrimeReactContext as t}from"primereact/api";import{ComponentBase as n,useHandleStyle as r}from"primereact/componentbase";import{useMergeProps as o,useUpdateEffect as c,useMountEffect as i}from"primereact/hooks";import{CheckIcon as a}from"primereact/icons/check";import{Tooltip as u}from"primereact/tooltip";import{classNames as l,DomHandler as s,ObjectUtils as p,IconUtils as f}from"primereact/utils";function d(){return d=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},d.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 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 y(e){var t=m(e,"string");return"symbol"===b(t)?t:String(t)}function h(e){if(Array.isArray(e))return e}function v(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,c,i,a=[],u=!0,l=!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){l=!0,o=e}finally{try{if(!u&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(l)throw o}}return a}}function g(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 k(e,t){if(e){if("string"==typeof e)return g(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)?g(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 x=n.extend({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},css:{classes:{icon:"p-checkbox-icon p-c",input:function(e){return l("p-checkbox-box",{"p-highlight":e.checked,"p-disabled":e.props.disabled,"p-focus":e.focusedState})},root:function(e){return l("p-checkbox p-component",{"p-checkbox-checked":e.checked,"p-checkbox-disabled":e.props.disabled,"p-checkbox-focused":e.focusedState})}},styles:"\n.p-checkbox {\n    display: inline-flex;\n    cursor: pointer;\n    user-select: none;\n    vertical-align: bottom;\n    position: relative;\n}\n\n.p-checkbox.p-checkbox-disabled {\n    cursor: auto;\n}\n\n.p-checkbox-box {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}        \n"}});function j(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 S(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?j(Object(n),!0).forEach((function(t){var r,o,c;r=e,c=n[t],(o=y(o=t))in r?Object.defineProperty(r,o,{value:c,enumerable:!0,configurable:!0,writable:!0}):r[o]=c})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):j(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var P=e.memo(e.forwardRef((function(n,b){var m,y,g=o(),j=e.useContext(t),P=x.getProps(n,j),w=e.useState(!1),E=(y=2,h(m=w)||v(m,y)||k(m,y)||O()),C=E[0],I=E[1],D=x.setMetaData({props:P,state:{focused:C},context:{checked:P.checked===P.trueValue,disabled:P.disabled}}),M=D.ptm,R=D.cx;r(x.css.styles,D.isUnstyled,{name:"checkbox",styled:!0});var N=e.useRef(null),A=e.useRef(P.inputRef),V=function(e){if(!P.disabled&&!P.readOnly&&(P.onChange||P.onClick)){var t=F(),n=e.target instanceof HTMLDivElement||e.target instanceof HTMLSpanElement||e.target instanceof Object,r=e.target===A.current,o=n&&e.target.checked!==t,c=t?P.falseValue:P.trueValue,i={originalEvent:e,value:P.value,checked:c,stopPropagation:function(){e.stopPropagation()},preventDefault:function(){e.preventDefault()},target:{type:"checkbox",name:P.name,id:P.id,value:P.value,checked:c}};if(P.onClick&&P.onClick(i),e.defaultPrevented)return;(r||o)&&P.onChange&&P.onChange(i),s.focus(A.current),e.preventDefault()}},F=function(){return P.checked===P.trueValue};e.useImperativeHandle(b,(function(){return{props:P,focus:function(){return s.focus(A.current)},getElement:function(){return N.current},getInput:function(){return A.current}}})),e.useEffect((function(){p.combinedRefs(A,P.inputRef)}),[A,P.inputRef]),c((function(){A.current.checked=F()}),[P.checked,P.trueValue]),i((function(){P.autoFocus&&s.focus(A.current,P.autoFocus)}));var T=F(),q=p.isNotEmpty(P.tooltip),H=x.getOtherProps(P),_=p.reduceKeys(H,s.ARIA_PROPS),K=g({className:R("icon")},M("icon")),L=f.getJSXIcon(T?P.icon||e.createElement(a,K):null,S({},K),{props:P,checked:T}),U=g({id:P.id,className:l(P.className,R("root",{checked:T,focusedState:C})),style:P.style,onClick:function(e){return V(e)},"data-p-highlight":T,"data-p-disabled":P.disabled,onContextMenu:P.onContextMenu,onMouseDown:P.onMouseDown},H,M("root")),B=g({className:"p-hidden-accessible"},M("hiddenInputWrapper")),J=g(S({id:P.inputId,type:"checkbox",name:P.name,tabIndex:P.tabIndex,defaultChecked:T,onFocus:function(e){I(!0)},onBlur:function(e){I(!1)},onKeyDown:function(e){var t;"Space"!==(t=e).code&&" "!==t.key||V(t)},disabled:P.disabled,readOnly:P.readOnly,required:P.required},_),M("hiddenInput")),W=g({className:R("input",{checked:T,focusedState:C}),"data-p-highlight":T,"data-p-disabled":P.disabled,"data-p-focus":C},M("input"));return e.createElement(e.Fragment,null,e.createElement("div",d({ref:N},U),e.createElement("div",B,e.createElement("input",d({ref:A},J))),e.createElement("div",W,L)),q&&e.createElement(u,d({target:N,content:P.tooltip,pt:M("tooltip")},P.tooltipOptions)))})));P.displayName="Checkbox";export{P as Checkbox};
+import*as e from"react";import{PrimeReactContext as t}from"primereact/api";import{ComponentBase as n,useHandleStyle as r}from"primereact/componentbase";import{useMergeProps as o,useUpdateEffect as i,useMountEffect as c}from"primereact/hooks";import{CheckIcon as l}from"primereact/icons/check";import{Tooltip as a}from"primereact/tooltip";import{classNames as u,DomHandler as p,ObjectUtils as s,IconUtils as d}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 r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},f.apply(this,arguments)}function m(e){return m="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},m(e)}function b(e,t){if("object"!==m(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==m(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function h(e){var t=b(e,"string");return"symbol"===m(t)?t:String(t)}var v=n.extend({defaultProps:{__TYPE:"Checkbox",autoFocus:!1,checked:!1,className:null,disabled:!1,falseValue:!1,icon:null,id:null,inputId:null,inputRef:null,invalid:!1,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},css:{classes:{box:"p-checkbox-box",input:"p-checkbox-input",icon:"p-checkbox-icon",root:function(e){var t=e.props;return u("p-checkbox p-component",{"p-highlight":e.checked,"p-disabled":t.disabled,"p-invalid":t.invalid,"p-variant-filled":"filled"===t.variant})}}}});function y(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 g(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?y(Object(n),!0).forEach((function(t){var r,o,i;r=e,i=n[t],(o=h(o=t))in r?Object.defineProperty(r,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[o]=i})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):y(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var O=e.memo(e.forwardRef((function(n,m){var b=o(),h=e.useContext(t),y=v.getProps(n,h),O=v.setMetaData({props:y,context:{checked:y.checked===y.trueValue,disabled:y.disabled}}),k=O.ptm,x=O.cx;r(v.css.styles,O.isUnstyled,{name:"checkbox"});var P=e.useRef(null),j=e.useRef(y.inputRef),w=function(){return y.checked===y.trueValue},E=function(e){if(!y.disabled&&!y.readonly&&y.onChange){var t=w()?y.falseValue:y.trueValue;if(y.onChange&&y.onChange({originalEvent:e,value:y.value,checked:t,stopPropagation:function(){e.stopPropagation()},preventDefault:function(){e.preventDefault()},target:{type:"checkbox",name:y.name,id:y.id,value:y.value,checked:t}}),e.defaultPrevented)return;p.focus(j.current)}};e.useImperativeHandle(m,(function(){return{props:y,focus:function(){return p.focus(j.current)},getElement:function(){return P.current},getInput:function(){return j.current}}})),e.useEffect((function(){s.combinedRefs(j,y.inputRef)}),[j,y.inputRef]),i((function(){j.current.checked=w()}),[y.checked,y.trueValue]),c((function(){y.autoFocus&&p.focus(j.current,y.autoFocus)}));var C,S,D,R,I,N=w(),M=s.isNotEmpty(y.tooltip),V=v.getOtherProps(y),F=b({id:y.id,className:u(y.className,x("root",{checked:N})),style:y.style,"data-p-highlight":N,"data-p-disabled":y.disabled,onContextMenu:y.onContextMenu,onMouseDown:y.onMouseDown},V,k("root"));return e.createElement(e.Fragment,null,e.createElement("div",f({ref:P},F),(R=s.reduceKeys(V,p.ARIA_PROPS),I=b(g({id:y.inputId,type:"checkbox",className:x("input"),name:y.name,tabIndex:y.tabIndex,defaultChecked:N,onFocus:function(e){var t;null==y||null===(t=y.onFocus)||void 0===t||t.call(y)},onBlur:function(e){var t;null==y||null===(t=y.onBlur)||void 0===t||t.call(y)},onChange:function(e){return E(e)},disabled:y.disabled,readOnly:y.readOnly,required:y.required,"aria-invalid":y.invalid,checked:w()},R),k("input")),e.createElement("input",f({ref:j},I))),(C=b({className:x("icon")},k("icon")),S=b({className:x("box",{checked:N}),"data-p-highlight":N,"data-p-disabled":y.disabled},k("box")),D=d.getJSXIcon(N?y.icon||e.createElement(l,C):null,g({},C),{props:y,checked:N}),e.createElement("div",S,D))),M&&e.createElement(a,f({target:P,content:y.tooltip,pt:k("tooltip")},y.tooltipOptions)))})));O.displayName="Checkbox";export{O as Checkbox};

package/checkbox/checkbox.js

@@ -78,85 +78,21 @@ this.primereact.checkbox = (function (exports, React, api, componentbase, hooks,
     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 = {
-    icon: 'p-checkbox-icon p-c',
-    input: function input(_ref) {
+    box: 'p-checkbox-box',
+    input: 'p-checkbox-input',
+    icon: 'p-checkbox-icon',
+    root: function root(_ref) {
       var props = _ref.props,
-        checked = _ref.checked,
-        focusedState = _ref.focusedState;
-      return utils.classNames('p-checkbox-box', {
+        checked = _ref.checked;
+      return utils.classNames('p-checkbox p-component', {
         'p-highlight': checked,
         'p-disabled': props.disabled,
-        'p-focus': focusedState
-      });
-    },
-    root: function root(_ref2) {
-      var props = _ref2.props,
-        checked = _ref2.checked,
-        focusedState = _ref2.focusedState;
-      return utils.classNames('p-checkbox p-component', {
-        'p-checkbox-checked': checked,
-        'p-checkbox-disabled': props.disabled,
-        'p-checkbox-focused': focusedState
+        'p-invalid': props.invalid,
+        'p-variant-filled': props.variant === 'filled'
       });
     }
   };
-  var styles = "\n.p-checkbox {\n    display: inline-flex;\n    cursor: pointer;\n    user-select: none;\n    vertical-align: bottom;\n    position: relative;\n}\n\n.p-checkbox.p-checkbox-disabled {\n    cursor: auto;\n}\n\n.p-checkbox-box {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}        \n";
   var CheckboxBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'Checkbox',
@@ -169,6 +105,7 @@ this.primereact.checkbox = (function (exports, React, api, componentbase, hooks,
       id: null,
       inputId: null,
       inputRef: null,
+      invalid: false,
       name: null,
       onChange: null,
       onClick: null,
@@ -185,8 +122,7 @@ this.primereact.checkbox = (function (exports, React, api, componentbase, hooks,
       children: undefined
     },
     css: {
-      classes: classes,
-      styles: styles
+      classes: classes
     }
   });
 
@@ -196,15 +132,8 @@ this.primereact.checkbox = (function (exports, React, api, componentbase, hooks,
     var mergeProps = hooks.useMergeProps();
     var context = React__namespace.useContext(api.PrimeReactContext);
     var props = CheckboxBase.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 _CheckboxBase$setMeta = CheckboxBase.setMetaData({
         props: props,
-        state: {
-          focused: focusedState
-        },
         context: {
           checked: props.checked === props.trueValue,
           disabled: props.disabled
@@ -214,20 +143,19 @@ this.primereact.checkbox = (function (exports, React, api, componentbase, hooks,
       cx = _CheckboxBase$setMeta.cx,
       isUnstyled = _CheckboxBase$setMeta.isUnstyled;
     componentbase.useHandleStyle(CheckboxBase.css.styles, isUnstyled, {
-      name: 'checkbox',
-      styled: true
+      name: 'checkbox'
     });
     var elementRef = React__namespace.useRef(null);
     var inputRef = React__namespace.useRef(props.inputRef);
-    var _onClick = function onClick(event) {
-      if (props.disabled || props.readOnly) {
+    var isChecked = function isChecked() {
+      return props.checked === props.trueValue;
+    };
+    var _onChange = function onChange(event) {
+      if (props.disabled || props.readonly) {
         return;
       }
-      if (props.onChange || props.onClick) {
+      if (props.onChange) {
         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;
         var value = _checked ? props.falseValue : props.trueValue;
         var eventData = {
           originalEvent: event,
@@ -247,33 +175,22 @@ this.primereact.checkbox = (function (exports, React, api, componentbase, hooks,
             checked: value
           }
         };
-        props.onClick && props.onClick(eventData);
+        props.onChange && props.onChange(eventData);
 
         // do not continue if the user defined click wants to prevent
         if (event.defaultPrevented) {
           return;
         }
-        if (isInputToggled || isCheckboxToggled) {
-          props.onChange && props.onChange(eventData);
-        }
         utils.DomHandler.focus(inputRef.current);
-        event.preventDefault();
       }
     };
     var _onFocus = function onFocus() {
-      setFocusedState(true);
+      var _props$onFocus;
+      props === null || props === void 0 || (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props);
     };
     var _onBlur = function onBlur() {
-      setFocusedState(false);
-    };
-    var _onKeyDown = function onKeyDown(event) {
-      if (event.code === 'Space' || event.key === ' ') {
-        // event.key is for Android support
-        _onClick(event);
-      }
-    };
-    var isChecked = function isChecked() {
-      return props.checked === props.trueValue;
+      var _props$onBlur;
+      props === null || props === void 0 || (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props);
     };
     React__namespace.useImperativeHandle(ref, function () {
       return {
@@ -303,66 +220,66 @@ this.primereact.checkbox = (function (exports, React, api, componentbase, hooks,
     var checked = isChecked();
     var hasTooltip = utils.ObjectUtils.isNotEmpty(props.tooltip);
     var otherProps = CheckboxBase.getOtherProps(props);
-    var ariaProps = utils.ObjectUtils.reduceKeys(otherProps, utils.DomHandler.ARIA_PROPS);
-    var iconProps = mergeProps({
-      className: cx('icon')
-    }, ptm('icon'));
-    var icon = checked ? props.icon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, iconProps) : null;
-    var checkboxIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, iconProps), {
-      props: props,
-      checked: checked
-    });
     var rootProps = mergeProps({
       id: props.id,
       className: utils.classNames(props.className, cx('root', {
-        checked: checked,
-        focusedState: focusedState
+        checked: checked
       })),
       style: props.style,
-      onClick: function onClick(e) {
-        return _onClick(e);
-      },
       'data-p-highlight': checked,
       'data-p-disabled': props.disabled,
       onContextMenu: props.onContextMenu,
       onMouseDown: props.onMouseDown
     }, otherProps, ptm('root'));
-    var hiddenInputWrapperProps = mergeProps({
-      className: 'p-hidden-accessible'
-    }, ptm('hiddenInputWrapper'));
-    var hiddenInputProps = mergeProps(_objectSpread({
-      id: props.inputId,
-      type: 'checkbox',
-      name: props.name,
-      tabIndex: props.tabIndex,
-      defaultChecked: checked,
-      onFocus: function onFocus(e) {
-        return _onFocus();
-      },
-      onBlur: function onBlur(e) {
-        return _onBlur();
-      },
-      onKeyDown: function onKeyDown(e) {
-        return _onKeyDown(e);
-      },
-      disabled: props.disabled,
-      readOnly: props.readOnly,
-      required: props.required
-    }, ariaProps), ptm('hiddenInput'));
-    var inputProps = mergeProps({
-      className: cx('input', {
-        checked: checked,
-        focusedState: focusedState
-      }),
-      'data-p-highlight': checked,
-      'data-p-disabled': props.disabled,
-      'data-p-focus': focusedState
-    }, ptm('input'));
+    var createInputElement = function createInputElement() {
+      var ariaProps = utils.ObjectUtils.reduceKeys(otherProps, utils.DomHandler.ARIA_PROPS);
+      var inputProps = mergeProps(_objectSpread({
+        id: props.inputId,
+        type: 'checkbox',
+        className: cx('input'),
+        name: props.name,
+        tabIndex: props.tabIndex,
+        defaultChecked: checked,
+        onFocus: function onFocus(e) {
+          return _onFocus();
+        },
+        onBlur: function onBlur(e) {
+          return _onBlur();
+        },
+        onChange: function onChange(e) {
+          return _onChange(e);
+        },
+        disabled: props.disabled,
+        readOnly: props.readOnly,
+        required: props.required,
+        'aria-invalid': props.invalid,
+        checked: isChecked()
+      }, ariaProps), ptm('input'));
+      return /*#__PURE__*/React__namespace.createElement("input", _extends({
+        ref: inputRef
+      }, inputProps));
+    };
+    var createBoxElement = function createBoxElement() {
+      var iconProps = mergeProps({
+        className: cx('icon')
+      }, ptm('icon'));
+      var boxProps = mergeProps({
+        className: cx('box', {
+          checked: checked
+        }),
+        'data-p-highlight': checked,
+        'data-p-disabled': props.disabled
+      }, ptm('box'));
+      var icon = checked ? props.icon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, iconProps) : null;
+      var checkboxIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, iconProps), {
+        props: props,
+        checked: checked
+      });
+      return /*#__PURE__*/React__namespace.createElement("div", boxProps, checkboxIcon);
+    };
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", _extends({
       ref: elementRef
-    }, rootProps), /*#__PURE__*/React__namespace.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React__namespace.createElement("input", _extends({
-      ref: inputRef
-    }, hiddenInputProps))), /*#__PURE__*/React__namespace.createElement("div", inputProps, checkboxIcon)), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
+    }, rootProps), createInputElement(), createBoxElement()), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
       target: elementRef,
       content: props.tooltip,
       pt: ptm('tooltip')