Merge branch 'main' into fix/update-page-layout-to-only-respond-on-left-click

Author: joshblack

.changeset/itchy-jokes-compare.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Changes the focus styling of input components such as `Textarea`, `TextInput`, `TextInputWithTokens` and `Select` from using `border` and `box-shadow` to use `outline` only for better border rendering and scrollbar support.

.changeset/little-apples-own.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Update SSRProvider, useSSRSafeId to use the native React 18 useId() instead of @react-aria/ssr

.changeset/thin-ladybugs-travel.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Ensure ConfirmationDialog adds host element to the DOM

.eslintrc.js

@@ -138,11 +138,6 @@ module.exports = {
           'error',
           {
             paths: [
-              {
-                name: '@react-aria/ssr',
-                importNames: ['useSSRSafeId'],
-                message: 'Please use the `useId` hook from `src/hooks/useId.ts` instead',
-              },
               {
                 name: 'react',
                 importNames: ['useLayoutEffect'],

.github/workflows/release-schedule.yml

@@ -6,7 +6,7 @@ on:
         type: boolean
         description: 'Run in dry mode. This option will disable creating and closing issues'
   schedule:
-    - cron: '30 15 * * MON'
+    - cron: '30 16 * * MON'
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

package-lock.json

@@ -103,7 +103,6 @@
     "@primer/behaviors": "^1.5.1",
     "@primer/octicons-react": "^19.8.0",
     "@primer/primitives": "^7.11.11",
-    "@react-aria/ssr": "^3.5.0",
     "@styled-system/css": "^5.1.5",
     "@styled-system/props": "^5.1.5",
     "@styled-system/theme-get": "^5.1.2",
@@ -147,7 +146,7 @@
     "@rollup/plugin-node-resolve": "15.1.0",
     "@rollup/plugin-replace": "5.0.2",
     "@rollup/plugin-terser": "0.4.3",
-    "@rollup/plugin-typescript": "11.1.0",
+    "@rollup/plugin-typescript": "11.1.5",
     "@rollup/plugin-virtual": "3.0.2",
     "@size-limit/preset-big-lib": "8.2.6",
     "@storybook/addon-a11y": "7.1.0",
@@ -172,10 +171,10 @@
     "@types/jest": "29.5.6",
     "@types/jest-axe": "3.5.5",
     "@types/lodash.groupby": "4.6.7",
-    "@types/lodash.isempty": "4.4.7",
+    "@types/lodash.isempty": "4.4.9",
     "@types/lodash.isobject": "3.0.7",
     "@types/lodash.keyby": "4.6.7",
-    "@types/node": "18.16.19",
+    "@types/node": "20.10.3",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.6",
     "@types/semver": "7.5.3",
@@ -258,7 +257,7 @@
     "ts-node": "10.9.1",
     "ts-toolbelt": "9.6.0",
     "typescript": "5.2.2",
-    "typescript-plugin-css-modules": "5.0.1",
+    "typescript-plugin-css-modules": "5.0.2",
     "unist-util-find": "3.0.0",
     "unist-util-find-before": "4.0.0",
     "unist-util-flat-filter": "2.0.0",

package.json

@@ -16,7 +16,7 @@ export interface ConfirmationDialogProps {
    * Required. This callback is invoked when a gesture to close the dialog
    * is performed. The first argument indicates the gesture.
    */
-  onClose: (gesture: 'confirm' | 'cancel' | 'close-button' | 'cancel' | 'escape') => void
+  onClose: (gesture: 'confirm' | 'close-button' | 'cancel' | 'escape') => void
 
   /**
    * Required. The title of the ConfirmationDialog. This is usually a brief
@@ -145,11 +145,14 @@ export const ConfirmationDialog: React.FC<React.PropsWithChildren<ConfirmationDi
   )
 }
 
+let hostElement: Element | null = null
 export type ConfirmOptions = Omit<ConfirmationDialogProps, 'onClose'> & {content: React.ReactNode}
 async function confirm(themeProps: ThemeProviderProps, options: ConfirmOptions): Promise<boolean> {
   const {content, ...confirmationDialogProps} = options
   return new Promise(resolve => {
-    const root = createRoot(document.createElement('div'))
+    hostElement = document.createElement('div')
+    if (!hostElement.isConnected) document.body.append(hostElement)
+    const root = createRoot(hostElement)
     const onClose: ConfirmationDialogProps['onClose'] = gesture => {
       root.unmount()
       if (gesture === 'confirm') {