From 2dd973af4c6c6883a50049333f69c3eb8f8aea3a Mon Sep 17 00:00:00 2001
From: Trevor Huey <trevor.huey@deque.com>
Date: Wed, 21 Jun 2023 07:56:54 -0500
Subject: [PATCH 1/2] fix(react): allow onBlur and onFocus to be passed to
 Checkbox without messing up focus state (#1095)

Closes https://github.com/dequelabs/cauldron/issues/1094

---------

Co-authored-by: Jason <jason@scurker.com>
---
 .../__tests__/src/components/Checkbox/index.js   | 10 +++++++++-
 packages/react/src/components/Checkbox/index.tsx | 16 ++++++++++++++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/packages/react/__tests__/src/components/Checkbox/index.js b/packages/react/__tests__/src/components/Checkbox/index.js
index de9d31ecd..429a65742 100644
--- a/packages/react/__tests__/src/components/Checkbox/index.js
+++ b/packages/react/__tests__/src/components/Checkbox/index.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import sinon from 'sinon';
 import { mount } from 'enzyme';
 import Checkbox from 'src/components/Checkbox';
 import axe from '../../../axe';
@@ -73,15 +74,22 @@ test('handles disabled prop', () => {
 });
 
 test('handles focus/blur', () => {
-  const wrapper = mount(<Checkbox {...defaultProps} />);
+  const onFocus = sinon.spy();
+  const onBlur = sinon.spy();
+
+  const wrapper = mount(
+    <Checkbox {...defaultProps} onFocus={onFocus} onBlur={onBlur} />
+  );
 
   wrapper.find('[type="checkbox"]').simulate('focus');
 
   expect(wrapper.find('.Checkbox__overlay--focused').exists()).toBeTruthy();
+  expect(onFocus.calledOnce).toBe(true);
 
   wrapper.find('[type="checkbox"]').simulate('blur');
 
   expect(wrapper.find('.Checkbox__overlay--focused').exists()).toBeFalsy();
+  expect(onBlur.calledOnce).toBe(true);
 });
 
 test('call onChange when checked state changes', done => {
diff --git a/packages/react/src/components/Checkbox/index.tsx b/packages/react/src/components/Checkbox/index.tsx
index b4da587ec..fa2bf6ba8 100644
--- a/packages/react/src/components/Checkbox/index.tsx
+++ b/packages/react/src/components/Checkbox/index.tsx
@@ -31,6 +31,8 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       checkboxRef,
       className,
       onChange,
+      onFocus,
+      onBlur,
       'aria-describedby': ariaDescribedby,
       disabled = false,
       checked = false,
@@ -77,8 +79,18 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             type="checkbox"
             checked={isChecked}
             disabled={disabled}
-            onFocus={(): void => setFocused(true)}
-            onBlur={(): void => setFocused(false)}
+            onFocus={(e): void => {
+              setFocused(true);
+              if (typeof onFocus === 'function') {
+                onFocus(e);
+              }
+            }}
+            onBlur={(e): void => {
+              setFocused(false);
+              if (typeof onBlur === 'function') {
+                onBlur(e);
+              }
+            }}
             aria-describedby={ariaDescribedbyId}
             onChange={(e): void => {
               setIsChecked(e.target.checked);

From 309c96688edc99c40c50403d0c41a1d3aa635f50 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.comm>
Date: Wed, 21 Jun 2023 12:58:47 +0000
Subject: [PATCH 2/2] chore(cauldron): Release 5.4.1

---
 CHANGELOG.md                 | 7 +++++++
 package.json                 | 2 +-
 packages/react/package.json  | 2 +-
 packages/styles/package.json | 2 +-
 4 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 022222e47..42397899c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [5.4.1](https://github.com/dequelabs/cauldron/compare/v5.4.0...v5.4.1) (2023-06-21)
+
+
+### Bug Fixes
+
+* **react:** allow onBlur and onFocus to be passed to Checkbox without messing up focus state ([#1095](https://github.com/dequelabs/cauldron/issues/1095)) ([2dd973a](https://github.com/dequelabs/cauldron/commit/2dd973af4c6c6883a50049333f69c3eb8f8aea3a))
+
 ## [5.4.0](https://github.com/dequelabs/cauldron/compare/v5.3.0...v5.4.0) (2023-06-15)
 
 
diff --git a/package.json b/package.json
index c7491a3bc..20eba6745 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "cauldron",
   "private": true,
-  "version": "5.4.0",
+  "version": "5.4.1",
   "license": "MPL-2.0",
   "scripts": {
     "clean": "rimraf dist docs/dist",
diff --git a/packages/react/package.json b/packages/react/package.json
index 12c47043a..fb358f1b2 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "5.4.0",
+  "version": "5.4.1",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",
   "publishConfig": {
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 671c15d31..76dc59d94 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "5.4.0",
+  "version": "5.4.1",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",