Merge branch 'develop' into table-grid

CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.
 
+## [6.11.0](https://github.com/dequelabs/cauldron/compare/v6.10.1...v6.11.0) (2024-11-06)
+
+
+### Features
+
+* upgrade to react 18 ([#1731](https://github.com/dequelabs/cauldron/issues/1731)) ([745aebb](https://github.com/dequelabs/cauldron/commit/745aebb773cb357e50c5e9ff4dcd5bc0a1cd73fb)), closes [#631](https://github.com/dequelabs/cauldron/issues/631) [#1685](https://github.com/dequelabs/cauldron/issues/1685)
+
+### [6.10.1](https://github.com/dequelabs/cauldron/compare/v6.10.0...v6.10.1) (2024-10-25)
+
+
+### Bug Fixes
+
+* onSelect prop for OptionsMenu is optional ([#1734](https://github.com/dequelabs/cauldron/issues/1734)) ([9bd6636](https://github.com/dequelabs/cauldron/commit/9bd66364d7a79b1fa9e4ee09f0672efec835ee49))
+
 ## [6.10.0](https://github.com/dequelabs/cauldron/compare/v6.9.0...v6.10.0) (2024-10-16)
 
 

docs/components/CssParamsTable.tsx

@@ -13,7 +13,7 @@ import { getCssVariablesStartingWith } from '../utils/getCssVariablesStartingWit
 
 interface CssParamsTableProps {
   param?: string;
-  renderExample?: (name: string, value: string) => JSX.Element;
+  renderExample?: (name: string, value: string) => React.JSX.Element;
   formatName?: (name: string) => string;
 }
 

docs/index.js

@@ -1,22 +1,18 @@
 import React, { useRef, Fragment, useEffect, useState } from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
-import classNames from 'classnames';
 import mdxComponents from './mdx-components';
 import Footer from './components/Footer';
 import ComponentLayout from './components/ComponentLayout';
 import Navigation from './components/Navigation';
 import {
-  Code,
   Drawer as DrawerComponent,
   TopBar,
   MenuBar,
   TopBarTrigger,
   TopBarItem,
   Workspace,
-  SideBar,
-  SideBarItem,
   SkipLink,
   OptionsMenuList,
   TopBarMenu,
@@ -276,10 +272,11 @@ const initialTheme =
   (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)')
     ? 'dark'
     : 'light');
+const container = document.getElementById('root');
+const root = createRoot(container);
 
-render(
+root.render(
   <ThemeProvider initialTheme={initialTheme}>
     <App />
-  </ThemeProvider>,
-  document.getElementById('root')
+  </ThemeProvider>
 );

docs/mdx-components.tsx

@@ -52,7 +52,7 @@ function Link({
 }
 
 interface MDXComponentProps {
-  [key: string]: (props: unknown) => JSX.Element;
+  [key: string]: (props: unknown) => React.JSX.Element;
 }
 
 const mdxComponents = {

docs/pages/components/Combobox.mdx

@@ -337,7 +337,7 @@ When autocomplete is set to "automatic" the listbox will provide a filtered list
   },
   {
     name: 'renderNoResults',
-    type: ['() => JSX.Element', 'React.Element'],
+    type: ['() => React.JSX.Element', 'React.Element'],
     description: 'Render prop to customize the output when there are no matching results. Useful for localization.'
   },
   {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cauldron",
   "private": true,
-  "version": "6.10.0",
+  "version": "6.11.0",
   "license": "MPL-2.0",
   "scripts": {
     "clean": "rimraf dist docs/dist",
@@ -56,13 +56,13 @@
     "@fontsource/pt-mono": "^5.0.13",
     "@fontsource/roboto": "^5.0.14",
     "@mdx-js/loader": "^2.3.0",
-    "@playwright/experimental-ct-react17": "^1.47.2",
-    "@playwright/test": "^1.47.2",
+    "@playwright/experimental-ct-react17": "^1.48.1",
+    "@playwright/test": "^1.48.1",
     "@types/classnames": "^2.2.9",
     "@types/express": "^4.17.21",
     "@types/node": "^22.1.0",
-    "@types/react": "^16.9.17",
-    "@types/react-dom": "^16.9.4",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@types/react-router-dom": "^5.3.2",
     "@types/webpack-env": "^1.18.5",
     "@typescript-eslint/eslint-plugin": "^5.59.9",
@@ -101,9 +101,9 @@
     "postcss-loader": "^3.0.0",
     "prettier": "^2",
     "puppeteer": "^22.12.1",
-    "react": "^17",
-    "react-dom": "^17",
-    "react-helmet": "^5.2.1",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-helmet": "^6.1.0",
     "react-router-dom": "^5.3.0",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^3.0.1",

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "6.10.0",
+  "version": "6.11.0",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",
@@ -43,8 +43,9 @@
     "@rollup/plugin-dynamic-import-vars": "^1.4.2",
     "@rollup/plugin-typescript": "^11.1.2",
     "@svgr/rollup": "^6.1.2",
-    "@testing-library/jest-dom": "^6.1.3",
-    "@testing-library/react": "^12",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.2",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/classnames": "^2.2.10",
     "@types/jest": "^29.5.11",
@@ -66,8 +67,8 @@
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
     "prop-types": "^15.8.1",
-    "react": "^17",
-    "react-dom": "^17",
+    "react": "^18",
+    "react-dom": "^18",
     "rollup": "^2.23.0",
     "sinon": "^10.0.0",
     "ts-node": "^10.9.2",

packages/react/src/components/Breadcrumb/BreadcrumbLink.test.tsx

@@ -5,7 +5,7 @@ import axe from '../../axe';
 
 const CustomLinkComponent = (
   props: React.AnchorHTMLAttributes<HTMLAnchorElement>
-): JSX.Element => (
+): React.JSX.Element => (
   // eslint-disable-next-line jsx-a11y/anchor-has-content
   <a data-testid="custom" {...props} />
 );

packages/react/src/components/Checkbox/Checkbox.test.tsx

@@ -80,16 +80,18 @@ test('should toggle checkbox correctly', async () => {
   expect(checkboxIcon).toHaveClass('Icon--checkbox-checked');
 });
 
-test('should handle focus correctly', () => {
+test('should handle focus correctly', async () => {
+  const user = userEvent.setup();
   const onFocus = spy();
   const input = renderCheckbox({ onFocus });
   const checkboxIcon = input.parentElement!.querySelector(
     '.Checkbox__overlay'
   ) as HTMLElement;
+
   expect(checkboxIcon).not.toHaveClass('.Checkbox__overlay--focused');
   expect(onFocus.notCalled).toBeTruthy();
 
-  input.focus();
+  await user.tab(); // focus on the input
   expect(input).toHaveFocus();
   expect(checkboxIcon).toHaveClass('Checkbox__overlay--focused');
   expect(onFocus.calledOnce).toBeTruthy();

packages/react/src/components/Checkbox/index.tsx

@@ -41,7 +41,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       ...other
     }: CheckboxProps,
     ref
-  ): JSX.Element => {
+  ): React.JSX.Element => {
     const [isChecked, setIsChecked] = useState(checked);
     const [isIndeterminate, setIsIndeterminate] = useState(indeterminate);
     const [focused, setFocused] = useState(false);

packages/react/src/components/ClickOutsideListener/index.tsx

@@ -21,7 +21,7 @@ function ClickOutsideListener(
     onClickOutside = () => null
   }: ClickOutsideListenerProps,
   ref: React.ForwardedRef<HTMLElement>
-): JSX.Element | null {
+): React.JSX.Element | null {
   const childElementRef = useRef<HTMLElement>();
 
   const handleEvent = (event: MouseEvent | TouchEvent) => {

packages/react/src/components/Combobox/Combobox.test.tsx

@@ -1,6 +1,7 @@
 import React, { createRef } from 'react';
 import { render, screen, fireEvent, createEvent } from '@testing-library/react';
 import { within } from '@testing-library/dom';
+import userEvent from '@testing-library/user-event';
 import { spy } from 'sinon';
 import { axe } from 'jest-axe';
 import Combobox from './Combobox';
@@ -379,6 +380,7 @@ test('should close combobox listbox on "blur"', () => {
 });
 
 test('should close combobox listbox when selecting option via click', async () => {
+  const user = userEvent.setup();
   render(
     <Combobox label="label">
       <ComboboxOption>Apple</ComboboxOption>
@@ -388,9 +390,9 @@ test('should close combobox listbox when selecting option via click', async () =
   );
 
   assertListboxIsOpen(false);
-  screen.getByRole('combobox').focus();
+  await user.tab();
   assertListboxIsOpen(true);
-  fireEvent.click(screen.getAllByRole('option')[0]);
+  await user.click(screen.getAllByRole('option')[0]);
   assertListboxIsOpen(false);
 });
 

packages/react/src/components/Combobox/Combobox.tsx

@@ -51,7 +51,7 @@ interface ComboboxProps
     previousValue: ComboboxValue;
   }) => void;
   onActiveChange?: (option: ListboxOption) => void;
-  renderNoResults?: (() => JSX.Element) | React.ReactElement;
+  renderNoResults?: (() => React.JSX.Element) | React.ReactElement;
   portal?: React.RefObject<HTMLElement> | HTMLElement;
   inputRef?: React.Ref<HTMLInputElement>;
 }
@@ -68,7 +68,7 @@ const ComboboxNoResults = ({
   children
 }: {
   children?: React.ReactNode;
-}): JSX.Element => {
+}): React.JSX.Element => {
   return (
     <div className="ComboboxListbox__empty" role="alert" aria-live="polite">
       {children || 'No results found.'}
@@ -103,7 +103,7 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
       ...props
     },
     ref
-  ): JSX.Element => {
+  ): React.JSX.Element => {
     const [value, setValue] = useState<string>(defaultValue || propValue || '');
     const [matchingOptions, setMatchingOptions] = useState<
       Map<HTMLElement, ComboboxOptionState>
@@ -469,15 +469,15 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
           setFormValue={setFormValue}
         >
           {portal && typeof document !== 'undefined'
-            ? createPortal(
+            ? (createPortal(
                 comboboxListbox,
                 // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
                 portal instanceof HTMLElement
                   ? portal
                   : portal.current ||
                       // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
                       /* istanbul ignore next: default fallback value */ document.body
-              )
+              ) as React.ReactNode)
             : comboboxListbox}
         </ComboboxProvider>
         {hasError && (

packages/react/src/components/Combobox/ComboboxContext.tsx

@@ -46,7 +46,7 @@ function ComboboxProvider({
   setMatchingOptions,
   setFormValue,
   children
-}: ComboboxProvider): JSX.Element {
+}: ComboboxProvider): React.JSX.Element {
   const { Provider } = ComboboxContext as React.Context<ComboboxContext>;
   const contextValue: ComboboxContext = useMemo(
     () => ({

packages/react/src/components/Combobox/ComboboxGroup.tsx

@@ -10,7 +10,7 @@ interface ComboboxGroupProps extends React.HTMLAttributes<HTMLUListElement> {
 }
 
 const ComboboxGroup = forwardRef<HTMLUListElement, ComboboxGroupProps>(
-  ({ className, children, label, ...props }, ref): JSX.Element | null => {
+  ({ className, children, label, ...props }, ref): React.JSX.Element | null => {
     const { inputValue, autocomplete, matchingOptions } = useComboboxContext();
     const comboboxGroupRef = useSharedRef<HTMLUListElement>(ref);
 

packages/react/src/components/Combobox/ComboboxOption.tsx

@@ -23,7 +23,7 @@ const ComboboxMatch = ({
   children: text
 }: {
   children: string;
-}): JSX.Element => {
+}): React.JSX.Element => {
   const { inputValue } = useComboboxContext();
 
   if (!text) {
@@ -67,7 +67,7 @@ const ComboboxOption = forwardRef<HTMLLIElement, ComboboxOptionProps>(
       ...props
     },
     ref
-  ): JSX.Element | null => {
+  ): React.JSX.Element | null => {
     const [id] = propId ? [propId] : useId(1, 'combobox-option');
     const { selected, active } = useListboxContext();
     const { selectedValue, matches, setMatchingOptions, setFormValue } =

packages/react/src/components/Dialog/index.tsx

@@ -171,7 +171,7 @@ export default class Dialog extends React.Component<DialogProps, DialogState> {
     return createPortal(
       Dialog,
       ('current' in portal ? portal.current : portal) || document.body
-    ) as JSX.Element;
+    ) as React.JSX.Element;
   }
 
   close() {

packages/react/src/components/Drawer/index.tsx

@@ -188,7 +188,7 @@ const Drawer = forwardRef<HTMLDivElement, DrawerProps>(
       portalElement ||
         // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
         document?.body
-    );
+    ) as React.JSX.Element;
   }
 );
 

packages/react/src/components/IconButton/index.tsx

@@ -62,7 +62,7 @@ const IconButton = forwardRef(
       ...other
     }: IconButtonProps,
     ref
-  ): JSX.Element => {
+  ): React.JSX.Element => {
     const internalRef = useRef() as MutableRefObject<HTMLElement>;
     useImperativeHandle(ref, () => internalRef.current);
 

packages/react/src/components/Listbox/Listbox.tsx

@@ -60,7 +60,7 @@ const Listbox = forwardRef<HTMLElement, ListboxProps>(
       ...props
     },
     ref
-  ): JSX.Element => {
+  ): React.JSX.Element => {
     const [options, setOptions] = useState<ListboxOption[]>([]);
     const [activeOption, setActiveOption] = useState<ListboxOption | null>(
       null

packages/react/src/components/Listbox/ListboxContext.tsx

@@ -35,7 +35,7 @@ function ListboxProvider<T extends ListboxOption>({
   setOptions,
   onSelect,
   children
-}: ListboxProvider<T>): JSX.Element {
+}: ListboxProvider<T>): React.JSX.Element {
   const { Provider } = ListboxContext as unknown as React.Context<
     ListboxContext<T>
   >;

packages/react/src/components/Listbox/ListboxGroup.tsx

@@ -23,7 +23,7 @@ const ListboxGroup = forwardRef<HTMLElement, ListboxGroupProps>(
       ...props
     },
     ref
-  ): JSX.Element => {
+  ): React.JSX.Element => {
     const [id] = propId ? [propId] : useId(1, 'listbox-group-label');
     return (
       <Component role="group" ref={ref} aria-labelledby={id} {...props}>

packages/react/src/components/Listbox/ListboxOption.tsx

@@ -35,7 +35,7 @@ const ListboxOption = forwardRef<HTMLElement, ListboxOptionProps>(
       ...props
     },
     ref
-  ): JSX.Element => {
+  ): React.JSX.Element => {
     const { active, selected, setOptions, onSelect } = useListboxContext();
     const listboxOptionRef = useSharedRef<HTMLElement>(ref);
     const [id] = propId ? [propId] : useId(1, 'listbox-option');

packages/react/src/components/NavBar/NavItem.tsx

@@ -12,7 +12,7 @@ const NavItem = ({
   active,
   'aria-current': ariaCurrent = true,
   ...other
-}: NavItemProps): JSX.Element => {
+}: NavItemProps): React.JSX.Element => {
   const additionalProps = {} as NavItemProps;
 
   if (active) {