#1117 Update spectrum (#1020)

Author: dwesolow

web_ui/package-lock.json

@@ -45,7 +45,7 @@
     "polylabel": "^1.1.0",
     "react": "^18.3.1",
     "react-app-polyfill": "^3.0.0",
-    "react-aria": "^3.39.0",
+    "react-aria": "^3.42.0",
     "react-colorful": "^5.6.1",
     "react-cool-virtual": "^0.7.0",
     "react-countup": "^6.5.3",
@@ -55,7 +55,7 @@
     "react-notifications-component": "^4.0.1",
     "react-oidc-context": "^2.3.1",
     "react-router-dom": "^6.30.0",
-    "react-stately": "^3.37.0",
+    "react-stately": "^3.40.0",
     "react-webcam": "^7.2.0",
     "react-zoom-pan-pinch": "^3.7.0",
     "recharts": "^2.15.1",

web_ui/package.json

@@ -5,10 +5,10 @@
   "main": "index.ts",
   "type": "module",
   "dependencies": {
-    "@adobe/react-spectrum": "^3.41.0",
-    "react-aria-components": "^1.8.0",
-    "@spectrum-icons/illustrations": "^3.6.17",
-    "@spectrum-icons/workflow": "^4.2.16"
+    "@adobe/react-spectrum": "^3.43.0",
+    "@spectrum-icons/illustrations": "^3.6.24",
+    "@spectrum-icons/workflow": "^4.2.23",
+    "react-aria-components": "^1.11.0"
   },
   "devDependencies": {
     "@geti/config": "*",

web_ui/packages/ui/package.json

@@ -46,7 +46,7 @@ export const OrganizationsStatusesPicker: FC<OrganizationStatusesPickerProps> =
             items={STATUSES.filter(
                 (status) => FEATURE_FLAG_REQ_ACCESS || status.name !== AccountStatus.REQUESTED_ACCESS
             )}
-            onSelectionChange={handleChangedSelectedOrgStatus}
+            onSelectionChange={(key) => key !== null && handleChangedSelectedOrgStatus(key)}
             aria-label={'Organizations status'}
             id={'organizations-filter-status-picker'}
         >

web_ui/src/intel-admin-app/pages/organizations/organizations-statuses-picker.component.tsx

@@ -71,7 +71,7 @@ const ChangeRoleDialogInner: FC<ChangeRoleDialogInnerProps> = ({ membership, onC
                     items={roles}
                     width={'100%'}
                     selectedKey={selectedRole}
-                    onSelectionChange={handleChangeRole}
+                    onSelectionChange={(key) => key !== null && handleChangeRole(key)}
                 >
                     {(item) => <Item key={item.role}>{item.role}</Item>}
                 </Picker>

web_ui/src/intel-admin-app/pages/user/membership-actions/change-role-dialog.component.tsx

@@ -1,10 +1,9 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { createContext, ReactNode, RefObject, useContext, useRef, useState } from 'react';
+import { ReactNode } from 'react';
 
-import { Flex, Grid, useUnwrapDOMRef, type FlexProps } from '@geti/ui';
-import { useInteractOutside } from '@react-aria/interactions';
+import { Flex, Grid, type FlexProps } from '@geti/ui';
 import { clsx } from 'clsx';
 
 import classes from './list-item-grid.module.scss';
@@ -19,35 +18,6 @@ interface ListItemGridProps {
     onHoverStart: () => void;
 }
 
-interface ListItemGridContextProps {
-    isHovered: boolean;
-    setIsHovered: (isHovered: boolean) => void;
-}
-
-interface InteractOutsideProps {
-    containerRef: RefObject<HTMLElement | null>;
-    onClickOutside: () => void;
-}
-
-const ListItemGridContext = createContext<ListItemGridContextProps>({ isHovered: false, setIsHovered: () => {} });
-
-const useListItemGridContext = () => useContext(ListItemGridContext);
-
-const InteractOutside = ({ containerRef, onClickOutside }: InteractOutsideProps) => {
-    useInteractOutside({
-        ref: containerRef,
-        onInteractOutside: (event) => {
-            const target = event.target as Element;
-            if (containerRef.current?.contains(target)) {
-                return;
-            }
-            // add a timeout to ensure this executes after menu-related events are processed
-            setTimeout(onClickOutside, 0);
-        },
-    });
-    return <></>;
-};
-
 export const ListItemGrid = ({
     id,
     isLast,
@@ -57,42 +27,29 @@ export const ListItemGrid = ({
     onHoverStart,
     onHoverEnd,
 }: ListItemGridProps) => {
-    const [isHovered, setIsHovered] = useState(false);
-
-    const handlePointerOver = () => {
-        onHoverStart();
-        setIsHovered(true);
-    };
-
-    const handlePointerOut = () => {
-        onHoverEnd();
-        setIsHovered(false);
-    };
-
     return (
         <div
             id={id}
-            onPointerOver={handlePointerOver}
-            onPointerOut={handlePointerOut}
+            onPointerOver={onHoverStart}
+            onPointerOut={onHoverEnd}
             role={'listitem'}
             aria-label={ariaLabel}
             className={clsx({
                 [classes.annotationItem]: true,
                 [classes.lastAnnotationItem]: isLast,
-                [classes.selectedAnnotation]: isSelected || isHovered,
+                [classes.selectedAnnotation]: isSelected,
             })}
         >
-            <ListItemGridContext.Provider value={{ isHovered, setIsHovered }}>
-                <Grid
-                    justifyContent={'left'}
-                    alignItems={'center'}
-                    minHeight={'size-400'}
-                    columns={['auto', 'auto', '1fr', 'auto', 'auto']}
-                    areas={['checkbox color labels list-menu actions-menu']}
-                >
-                    {children}
-                </Grid>
-            </ListItemGridContext.Provider>
+            <Grid
+                justifyContent={'left'}
+                alignItems={'center'}
+                minHeight={'size-400'}
+                columns={['auto', 'auto', '1fr', 'auto', 'auto']}
+                areas={['checkbox color labels list-menu actions-menu']}
+                UNSAFE_className={classes.listItemGrid}
+            >
+                {children}
+            </Grid>
         </div>
     );
 };
@@ -121,23 +78,8 @@ const Labels = ({ children, ...otherProps }: FlexProps) => {
     );
 };
 
-const ListMenu = ({ children, ...otherProps }: FlexProps) => {
-    const containerRef = useRef<null>(null);
-    const unwrapContainerRef = useUnwrapDOMRef(containerRef);
-    const { isHovered, setIsHovered } = useListItemGridContext();
-
-    if (!isHovered) {
-        return <></>;
-    }
-
-    return (
-        <>
-            <Flex {...otherProps} gridArea={'list-menu'} ref={containerRef}>
-                {children}
-            </Flex>
-            <InteractOutside containerRef={unwrapContainerRef} onClickOutside={() => setIsHovered(false)} />
-        </>
-    );
+const ListMenu = ({ children }: FlexProps) => {
+    return <Flex gridArea={'list-menu'}>{children}</Flex>;
 };
 
 const ActionsMenu = ({ children, ...otherProps }: FlexProps) => {

web_ui/src/pages/annotator/annotation/list-item-grid.component.tsx

@@ -1,4 +1,5 @@
-.selectedAnnotation {
+.selectedAnnotation,
+.annotationItem:hover {
     background-color: var(--spectrum-global-color-gray-300);
 }
 
@@ -16,3 +17,14 @@
         border-bottom: 1px solid var(--spectrum-global-color-gray-50);
     }
 }
+
+.listItemGrid {
+    &:not(:hover) button[aria-label='Show actions'] {
+        visibility: hidden;
+    }
+
+    &:hover button[aria-label='Show actions'],
+    button[aria-label='Show actions'][aria-expanded='true'] {
+        visibility: visible;
+    }
+}

web_ui/src/pages/annotator/annotation/list-item-grid.module.scss

@@ -24,7 +24,7 @@ export const ContentMenu = ({ point, onUpdate }: ContentMenuProps) => {
             items={[option]}
             onAction={() => onUpdate({ ...point, isVisible: !point.isVisible })}
         >
-            <ActionButton isQuiet aria-label='menu trigger'>
+            <ActionButton isQuiet aria-label='Show actions'>
                 <MoreMenu />
             </ActionButton>
         </MenuTrigger>

web_ui/src/pages/annotator/annotation/list-item-grid.test.tsx

@@ -13,7 +13,7 @@ describe('ContentMenu', () => {
 
         render(<ContentMenu point={getMockedKeypointNode({ isVisible: true })} onUpdate={mockedOnUpdate} />);
 
-        fireEvent.click(screen.getByLabelText('menu trigger'));
+        fireEvent.click(screen.getByLabelText('Show actions'));
         fireEvent.click(screen.getByRole('menuitem', { name: OPTION_OCCLUDED }));
 
         expect(mockedOnUpdate).toHaveBeenCalledWith(expect.objectContaining({ isVisible: false }));
@@ -24,7 +24,7 @@ describe('ContentMenu', () => {
 
         render(<ContentMenu point={getMockedKeypointNode({ isVisible: false })} onUpdate={mockedOnUpdate} />);
 
-        fireEvent.click(screen.getByLabelText('menu trigger'));
+        fireEvent.click(screen.getByLabelText('Show actions'));
         fireEvent.click(screen.getByRole('menuitem', { name: OPTION_VISIBLE }));
 
         expect(mockedOnUpdate).toHaveBeenCalledWith(expect.objectContaining({ isVisible: true }));