Merge pull request #1096 from dequelabs/release-v5.4.1

chore(cauldron): Release 5.4.1

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)
 
 

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",

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 => {

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": {

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);

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",