Merge branch 'develop' into dependabot/npm_and_yarn/http-proxy-middle…

…ware-2.0.7

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.'
   },
   {

docs/pages/components/Table.mdx

@@ -334,6 +334,115 @@ function SortableTableExample() {
 </Table>
 ```
 
+### Grid Layout
+
+The Table component supports an optional css grid layout that can specify column alignment and width definitions per column.
+
+```jsx example
+<Table 
+  layout="grid" 
+  columns={[
+    { width: 'max-content', align: 'start' }, 
+    { width: 'max-content', align: 'start' }, 
+    { width: '1fr', align: 'end' }
+  ]}>
+  <TableHead>
+    <TableRow>
+      <TableHeader scope="col">First Name</TableHeader>
+      <TableHeader scope="col">Last Name</TableHeader>
+      <TableHeader scope="col">Email</TableHeader>
+    </TableRow>
+  </TableHead>
+  <TableBody>
+    <TableRow>
+      <TableCell>Frank</TableCell>
+      <TableCell>Zappa</TableCell>
+      <TableCell>frank@zappa.io</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell>Duane</TableCell>
+      <TableCell>Allman</TableCell>
+      <TableCell>duane@almond.biz</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell>Yamandu</TableCell>
+      <TableCell>Costa</TableCell>
+      <TableCell>yamandu_costa@gmail.br</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell>Jimmy</TableCell>
+      <TableCell>Herring</TableCell>
+      <TableCell>jamesHerring@hotmail.gov</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+For column alignments, all cells will be positioned according to the alignment specified for that column, defaulting to `start`: 
+
+<Table layout="grid" columns={[{ width: 'max-content', align: 'start' }, { align: 'start' }]}>
+  <TableHead>
+    <TableRow>
+      <TableHeader scope="col">Alignment Type</TableHeader>
+      <TableHeader scope="col">Description</TableHeader>
+    </TableRow>
+  </TableHead>
+  <TableBody>
+    <TableRow>
+      <TableCell>`start`</TableCell>
+      <TableCell>Aligns all cells within the column to the start.</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell>`center`</TableCell>
+      <TableCell>Aligns all cells within the column to the center.</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell>`end`</TableCell>
+      <TableCell>Aligns all cells within the column to the center.</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+
+For column sizing, the values are roughly equivalent to [track sizing for grid-template-columns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)
+ and the following values are supported:
+
+<Table layout="grid" columns={[{ width: 'max-content', align: 'start' }, { align: 'start' }]}>
+  <TableHead>
+    <TableRow>
+      <TableHeader scope="col">Width Type</TableHeader>
+      <TableHeader scope="col">Description</TableHeader>
+    </TableRow>
+  </TableHead>
+  <TableBody>
+    <TableRow>
+      <TableCell>`auto`</TableCell>
+      <TableCell>Sizes the column between a range of `min-content` and `max-content`. </TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell>`max-content`</TableCell>
+      <TableCell>Will size the column respective to the largest cell.</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell>`min-content`</TableCell>
+      <TableCell>Will size the column respective to the smallest cell.</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell>`number`</TableCell>
+      <TableCell>Applies a fixed width to the column.</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell>`<number>fr`</TableCell>
+      <TableCell>Applies a flex value that sizes a column proportional to the remaining space from other columns.</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell>`<number>%`</TableCell>
+      <TableCell>Applies a percentage width to the column respective to the size of the table.</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+
+For more advanced usage, the width value does not need to be specified as part of a column but can be specified using `--table-grid-template-columns` to set the respective column sizes relative to the content displayed within the table.
+
 ## Props
 
 ### Table
@@ -346,6 +455,16 @@ function SortableTableExample() {
       name: 'variant',
       type: 'bordered',
       description: 'Use the bordered variant of Table'
+    },
+    {
+      name: 'layout',
+      type: 'grid',
+      description: 'When set, uses a css grid layout instead of a table layout.'
+    },
+    {
+      name: 'columns',
+      type: ['Array<Column>', 'number'],
+      description: 'Only allowed when the table has a grid layout. Sets the column widths and alignments for each column.'
     }
   ]}
 />
@@ -379,6 +498,11 @@ function SortableTableExample() {
       type: 'function',
       description: 'The function that the implementer passes in to control the change of sort direction.',
       defaultValue: 'sorted ascending'
+    },
+    {
+      name: 'align',
+      type: ['start', 'center', 'end'],
+      description: 'Only allowed when the table has a grid layout. Overrides any column alignments for this table header.'
     }
   ]}
 />
@@ -416,4 +540,11 @@ function SortableTableExample() {
 <ComponentProps
   children={true}
   className={true}
+  props={[
+    {
+      name: 'align',
+      type: ['start', 'center', 'end'],
+      description: 'Only allowed when the table has a grid layout. Overrides any column alignments for this table cell.'
+    }
+  ]}
 />

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",
@@ -61,8 +61,8 @@
     "@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);
 });