chore(react-aria-components): upgrade to latest version

packages/insomnia/package.json

@@ -165,7 +165,7 @@
     "postcss": "^8.4.6",
     "react": "^18.2.0",
     "react-aria": "3.23.1",
-    "react-aria-components": "^1.0.0-alpha.6",
+    "react-aria-components": "^1.0.0-rc.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.19.0",
     "react-stately": "3.21.0",

packages/insomnia/src/ui/components/dropdowns/project-dropdown.tsx

@@ -5,9 +5,9 @@ import {
   Dialog,
   Heading,
   Input,
-  Item,
   Label,
   Menu,
+  MenuItem,
   MenuTrigger,
   Modal,
   ModalOverlay,
@@ -108,15 +108,15 @@ export const ProjectDropdown: FC<Props> = ({ project, organizationId }) => {
             className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
           >
             {item => (
-              <Item
+              <MenuItem
                 key={item.id}
                 id={item.id}
                 className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
                 aria-label={item.name}
               >
                 <Icon icon={item.icon} />
                 <span>{item.name}</span>
-              </Item>
+              </MenuItem>
             )}
           </Menu>
         </Popover>
@@ -130,12 +130,14 @@ export const ProjectDropdown: FC<Props> = ({ project, organizationId }) => {
         isDismissable
         className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
       >
-        <Modal className="max-w-2xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]">
+        <Modal
+          onOpenChange={isOpen => {
+            setProjectType('');
+            setIsProjectSettingsModalOpen(isOpen);
+          }}
+          className="max-w-2xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]"
+        >
           <Dialog
-            onClose={() => {
-              setIsProjectSettingsModalOpen(false);
-              setProjectType('');
-            }}
             className="outline-none"
           >
             {({ close }) => (

packages/insomnia/src/ui/components/dropdowns/request-actions-dropdown.tsx

@@ -1,6 +1,6 @@
 import { IconName } from '@fortawesome/fontawesome-svg-core';
 import React, { Fragment, useCallback, useState } from 'react';
-import { Button, Item, Menu, MenuTrigger, Popover } from 'react-aria-components';
+import { Button, Menu, MenuItem, MenuTrigger, Popover } from 'react-aria-components';
 import { useFetcher, useParams } from 'react-router-dom';
 
 import { exportHarRequest } from '../../../common/har';
@@ -252,15 +252,15 @@ export const RequestActionsDropdown = ({
           className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
         >
           {item => (
-            <Item
+            <MenuItem
               key={item.id}
               id={item.id}
               className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
               aria-label={item.name}
             >
               <Icon icon={item.icon} />
               <span>{item.name}</span>
-            </Item>
+            </MenuItem>
           )}
         </Menu>
       </Popover>

packages/insomnia/src/ui/components/dropdowns/request-group-actions-dropdown.tsx

@@ -1,6 +1,6 @@
 import { IconName } from '@fortawesome/fontawesome-svg-core';
 import React, { Fragment, useRef, useState } from 'react';
-import { Button, Item, Menu, MenuTrigger, Popover } from 'react-aria-components';
+import { Button, Menu, MenuItem, MenuTrigger, Popover } from 'react-aria-components';
 import { useFetcher, useParams, useRouteLoaderData } from 'react-router-dom';
 
 import { toKebabCase } from '../../../common/misc';
@@ -284,15 +284,15 @@ export const RequestGroupActionsDropdown = ({
           className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
         >
           {item => (
-            <Item
+            <MenuItem
               key={item.id}
               id={item.id}
               className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
               aria-label={item.name}
             >
               <Icon icon={item.icon} />
               <span>{item.name}</span>
-            </Item>
+            </MenuItem>
           )}
         </Menu>
       </Popover>

packages/insomnia/src/ui/components/dropdowns/sync-dropdown.tsx

@@ -1,6 +1,6 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import React, { FC, Fragment, useEffect, useState } from 'react';
-import { Button, Collection, Item, Menu, MenuTrigger, Popover, Section, Tooltip, TooltipTrigger } from 'react-aria-components';
+import { Button, Collection, Menu, MenuItem, MenuTrigger, Popover, Section, Tooltip, TooltipTrigger } from 'react-aria-components';
 import { useFetcher, useParams } from 'react-router-dom';
 import { useInterval } from 'react-use';
 
@@ -320,7 +320,7 @@ export const SyncDropdown: FC<Props> = ({ gitSyncEnabled }) => {
             <Section className='border-b border-solid border-[--hl-sm] pb-2'>
               <Collection items={switchToGitRepoActionList}>
                 {item => (
-                  <Item
+                  <MenuItem
                     textValue={item.name}
                     className={'group aria-disabled:opacity-30 aria-disabled:cursor-not-allowed flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent disabled:cursor-not-allowed focus:outline-none transition-colors'}
                     aria-label={item.name}
@@ -329,46 +329,46 @@ export const SyncDropdown: FC<Props> = ({ gitSyncEnabled }) => {
                       <Icon icon={item.icon} />
                       <div>{item.name}</div>
                     </div>
-                  </Item>
+                  </MenuItem>
                 )}
               </Collection>
             </Section>
             {syncError && (
               <Section className='border-b border-solid border-[--hl-sm]'>
-                <Item
+                <MenuItem
                   className={'flex overflow-hidden gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent disabled:cursor-not-allowed focus:outline-none transition-colors'}
                   aria-label={syncError}
                 >
                   <Icon icon="exclamation-triangle" className="text-[--color-warning]" />
                   <p className='whitespace-normal'>{syncError}</p>
-                </Item>
+                </MenuItem>
               </Section>
             )}
             {!syncError && (
               <Fragment>
                 <Section className='border-b border-solid border-[--hl-sm]'>
                   <Collection items={localBranchesActionList}>
                     {item => (
-                      <Item
+                      <MenuItem
                         className={`aria-disabled:opacity-30 aria-disabled:cursor-not-allowed flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors ${item.isActive ? 'font-bold' : ''}`}
                         aria-label={item.name}
                       >
                         <Icon icon={item.icon} className={item.isActive ? 'text-[--color-success]' : ''} />
                         <span className='truncate'>{item.name}</span>
-                      </Item>
+                      </MenuItem>
                     )}
                   </Collection>
                 </Section>
                 <Section>
                   <Collection items={syncMenuActionList}>
                     {item => (
-                      <Item
+                      <MenuItem
                         className={'aria-disabled:opacity-30 aria-disabled:cursor-not-allowed flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors'}
                         aria-label={item.name}
                       >
                         <Icon icon={item.icon} />
                         <span>{item.name}</span>
-                      </Item>
+                      </MenuItem>
                     )}
                   </Collection>
                 </Section>

packages/insomnia/src/ui/components/dropdowns/workspace-card-dropdown.tsx

@@ -224,11 +224,13 @@ export const WorkspaceCardDropdown: FC<Props> = props => {
           isDismissable
           className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
         >
-          <Modal className="max-w-2xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]">
+          <Modal
+            onOpenChange={() => {
+              setIsDeleteRemoteWorkspaceModalOpen(false);
+            }}
+            className="max-w-2xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]"
+          >
             <Dialog
-              onClose={() => {
-                setIsDeleteRemoteWorkspaceModalOpen(false);
-              }}
               className="outline-none"
             >
               {({ close }) => (

packages/insomnia/src/ui/components/dropdowns/workspace-dropdown.tsx

@@ -1,6 +1,6 @@
 import { IconName } from '@fortawesome/fontawesome-svg-core';
 import React, { FC, ReactNode, useCallback, useState } from 'react';
-import { Button, Dialog, Heading, Item, Menu, MenuTrigger, Modal, ModalOverlay, Popover } from 'react-aria-components';
+import { Button, Dialog, Heading, Menu, MenuItem, MenuTrigger, Modal, ModalOverlay, Popover } from 'react-aria-components';
 import { useFetcher, useParams, useRouteLoaderData } from 'react-router-dom';
 
 import { isLoggedIn } from '../../../account/session';
@@ -216,15 +216,15 @@ export const WorkspaceDropdown: FC = () => {
             className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
           >
             {item => (
-              <Item
+              <MenuItem
                 key={item.id}
                 id={item.id}
                 className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
                 aria-label={item.name}
               >
                 {item.icon}
                 <span>{item.name}</span>
-              </Item>
+              </MenuItem>
             )}
           </Menu>
         </Popover>
@@ -271,11 +271,13 @@ export const WorkspaceDropdown: FC = () => {
           isDismissable
           className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
         >
-          <Modal className="max-w-2xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]">
+          <Modal
+            onOpenChange={() => {
+              setIsDeleteRemoteWorkspaceModalOpen(false);
+            }}
+            className="max-w-2xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]"
+          >
             <Dialog
-              onClose={() => {
-                setIsDeleteRemoteWorkspaceModalOpen(false);
-              }}
               className="outline-none"
             >
               {({ close }) => (

packages/insomnia/src/ui/components/modals/sync-branches-modal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Dialog, GridList, Heading, Input, Item, Label, Modal, ModalOverlay, TextField } from 'react-aria-components';
+import { Button, Dialog, GridList, GridListItem, Heading, Input, Label, Modal, ModalOverlay, TextField } from 'react-aria-components';
 import { useFetcher, useParams } from 'react-router-dom';
 
 import { PromptButton } from '../base/prompt-button';
@@ -169,9 +169,13 @@ export const SyncBranchesModal = ({ onClose, branches, remoteBranches, currentBr
       isDismissable
       className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
     >
-      <Modal className="flex flex-col max-w-4xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]">
+      <Modal
+        onOpenChange={isOpen => {
+          !isOpen && onClose();
+        }}
+        className="flex flex-col max-w-4xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]"
+      >
         <Dialog
-          onClose={onClose}
           className="outline-none flex-1 h-full flex flex-col overflow-hidden"
         >
           {({ close }) => (
@@ -230,14 +234,14 @@ export const SyncBranchesModal = ({ onClose, branches, remoteBranches, currentBr
                   className="divide-y divide-solid divide-[--hl-sm] flex flex-col focus:outline-none overflow-y-auto flex-1 data-[empty]:py-0"
                 >
                   {item => (
-                    <Item
+                    <GridListItem
                       id={item.id}
                       key={item.key}
                       textValue={item.name}
                       className="p-2 w-full focus:outline-none focus:bg-[--hl-sm] transition-colors"
                     >
                       <LocalBranchItem branch={item.name} isCurrent={item.isCurrent} organizationId={organizationId} projectId={projectId} workspaceId={workspaceId} />
-                    </Item>
+                    </GridListItem>
                   )}
                 </GridList>
               </div>
@@ -257,14 +261,14 @@ export const SyncBranchesModal = ({ onClose, branches, remoteBranches, currentBr
                     className="divide-y divide-solid divide-[--hl-sm] flex flex-col focus:outline-none overflow-y-auto flex-1 data-[empty]:py-0"
                   >
                     {item => (
-                      <Item
+                      <GridListItem
                         id={item.id}
                         key={item.key}
                         textValue={item.name}
                         className="p-2 w-full focus:outline-none focus:bg-[--hl-sm] transition-colors"
                       >
                         <RemoteBranchItem branch={item.name} isCurrent={item.isCurrent} organizationId={organizationId} projectId={projectId} workspaceId={workspaceId} />
-                      </Item>
+                      </GridListItem>
                     )}
                   </GridList>
                 </div>

packages/insomnia/src/ui/components/modals/sync-history-modal.tsx

@@ -64,9 +64,13 @@ export const SyncHistoryModal = ({ history, onClose }: Props) => {
       isDismissable
       className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
     >
-      <Modal className="flex flex-col max-w-4xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]">
+      <Modal
+        onOpenChange={isOpen => {
+          !isOpen && onClose();
+        }}
+        className="flex flex-col max-w-4xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]"
+      >
         <Dialog
-          onClose={onClose}
           className="outline-none flex-1 h-full flex flex-col overflow-hidden"
         >
           {({ close }) => (

packages/insomnia/src/ui/components/modals/sync-staging-modal.tsx

@@ -58,9 +58,13 @@ export const SyncStagingModal = ({ onClose, status, syncItems }: Props) => {
       isDismissable
       className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
     >
-      <Modal className="flex flex-col max-w-4xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]">
+      <Modal
+        onOpenChange={isOpen => {
+          !isOpen && onClose();
+        }}
+        className="flex flex-col max-w-4xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]"
+      >
         <Dialog
-          onClose={onClose}
           className="outline-none flex-1 h-full flex flex-col overflow-hidden"
         >
           {({ close }) => (

packages/insomnia/src/ui/components/settings/import-export.tsx

@@ -1,5 +1,5 @@
 import React, { FC, Fragment, useEffect, useState } from 'react';
-import { Button, Heading, Item, ListBox, Popover, Select, SelectValue } from 'react-aria-components';
+import { Button, Heading, ListBox, ListBoxItem, Popover, Select, SelectValue } from 'react-aria-components';
 import { useFetcher, useParams } from 'react-router-dom';
 import { useRouteLoaderData } from 'react-router-dom';
 
@@ -62,7 +62,6 @@ const UntrackedProject = ({
           }}
           selectedKey={selectedOrganizationId}
           isDisabled={organizations.length === 0}
-          items={organizations}
         >
           <Button className="px-4 py-1 disabled:bg-[--hl-xs] disabled:cursor-not-allowed font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] data-[pressed]:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
             <SelectValue<Organization> className="flex truncate items-center justify-center gap-2">
@@ -87,11 +86,12 @@ const UntrackedProject = ({
             <Icon icon="caret-down" />
           </Button>
           <Popover className="min-w-max">
-            <ListBox<Organization>
+            <ListBox
+              items={organizations}
               className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
             >
               {item => (
-                <Item
+                <ListBoxItem
                   id={item.id}
                   key={item.id}
                   className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
@@ -110,7 +110,7 @@ const UntrackedProject = ({
                       )}
                     </Fragment>
                   )}
-                </Item>
+                </ListBoxItem>
               )}
             </ListBox>
           </Popover>