:chore: ITEP-66905 - UI components cleanup [PART 2]

web_ui/package.json

@@ -67,7 +67,6 @@
     "react-webcam": "^7.2.0",
     "react-zoom-pan-pinch": "^3.7.0",
     "recharts": "^2.15.1",
-    "screenfull": "^6.0.2",
     "spin-delay": "^2.0.1",
     "static-path": "^0.0.4",
     "svg2pdf.js": "^2.5.0",

web_ui/packages/ui/src/color-thumb/color-thumb.component.tsx

@@ -1,7 +1,7 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { View, ViewProps } from '@react-spectrum/view';
+import { View, ViewProps } from '@adobe/react-spectrum';
 import { StyleProps } from '@react-types/shared';
 
 export interface ColorThumbProps extends StyleProps {

web_ui/packages/ui/src/loading/loading-indicator.component.tsx

@@ -3,7 +3,7 @@
 
 import { DimensionValue, Flex, ProgressCircle } from '@adobe/react-spectrum';
 import { SpectrumProgressCircleProps } from '@react-types/progress';
-import { Responsive } from '@react-types/shared/src/style';
+import { Responsive } from '@react-types/shared';
 
 interface LoadingIndicatorProps extends SpectrumProgressCircleProps {
     height?: Responsive<DimensionValue>;

web_ui/src/pages/analytics/analytics-dashboard-card.component.tsx

@@ -1,9 +1,8 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { Divider, Flex, Text, View } from '@adobe/react-spectrum';
+import { Divider, Flex, Heading, Text, View } from '@adobe/react-spectrum';
 import { Button } from '@geti/ui';
-import { Heading } from '@react-spectrum/text';
 import { motion } from 'framer-motion';
 
 import { AnalyticsIcon, ExternalLinkIcon } from '../../assets/icons';

web_ui/src/pages/annotator/annotation/annotation-filter/corner-indicator.component.tsx

@@ -1,7 +1,7 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { View } from '@react-spectrum/view';
+import { View } from '@adobe/react-spectrum';
 
 interface CornerIndicatorProps {
     isActive: boolean;

web_ui/src/pages/annotator/components/footer/annotator-footer.component.tsx

@@ -1,8 +1,7 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { Flex } from '@adobe/react-spectrum';
-import { FooterProps, Footer as FooterView, View } from '@react-spectrum/view';
+import { Flex, FooterProps, Footer as FooterView, View } from '@adobe/react-spectrum';
 import clsx from 'clsx';
 
 import { MediaItem } from '../../../../core/media/media.interface';

web_ui/src/pages/annotator/components/labels/label-search/label-result-panel.component.tsx

@@ -1,8 +1,7 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { Flex, Text } from '@adobe/react-spectrum';
-import { View } from '@react-spectrum/view';
+import { Flex, Text, View } from '@adobe/react-spectrum';
 import { isEmpty } from 'lodash-es';
 
 import { LabelTreeItem } from '../../../../../core/labels/label-tree-view.interface';

web_ui/src/pages/annotator/components/labels/selectable-label-tag/selectable-label-tag.component.tsx

@@ -1,7 +1,7 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { View } from '@react-spectrum/view';
+import { View } from '@adobe/react-spectrum';
 import { usePress } from 'react-aria';
 
 import { Label } from '../../../../../core/labels/label.interface';

web_ui/src/pages/annotator/components/primary-toolbar/primary-toolbar.component.tsx

@@ -1,9 +1,8 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { Provider } from '@adobe/react-spectrum';
+import { Provider, View } from '@adobe/react-spectrum';
 import { Flex } from '@react-spectrum/layout';
-import { View } from '@react-spectrum/view';
 import { partition } from 'lodash-es';
 
 import { Divider } from '../../../../shared/components/divider/divider.component';

web_ui/src/pages/annotator/components/secondary-toolbar/replace-or-merge-user-annotations-dialog.component.tsx

@@ -1,9 +1,8 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { ButtonGroup, Content, Dialog, Divider, Text } from '@adobe/react-spectrum';
+import { ButtonGroup, Content, Dialog, Divider, Heading, Text } from '@adobe/react-spectrum';
 import { Button } from '@geti/ui';
-import { Heading } from '@react-spectrum/text';
 
 import { usePrediction } from '../../providers/prediction-provider/prediction-provider.component';
 

web_ui/src/pages/annotator/components/sidebar/annotations/annotations-header.component.tsx

@@ -1,8 +1,7 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { Flex } from '@adobe/react-spectrum';
-import { Heading } from '@react-spectrum/text';
+import { Flex, Heading } from '@adobe/react-spectrum';
 import { isEmpty, isNil } from 'lodash-es';
 
 import { DOMAIN } from '../../../../../core/projects/core.interface';

web_ui/src/pages/annotator/components/video-player/propagate-annotations/propagate-annotations-dialog.component.tsx

@@ -1,9 +1,8 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { ButtonGroup, Content, Dialog, Divider, Text } from '@adobe/react-spectrum';
+import { ButtonGroup, Content, Dialog, Divider, Heading, Text } from '@adobe/react-spectrum';
 import { Button } from '@geti/ui';
-import { Heading } from '@react-spectrum/text';
 import { UseMutationResult } from '@tanstack/react-query';
 
 interface PropagateAnnotationsDialogProps {

web_ui/src/pages/annotator/tools/bounding-box/secondary-toolbar.component.tsx

@@ -1,8 +1,7 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { Flex } from '@adobe/react-spectrum';
-import { Text } from '@react-spectrum/text';
+import { Flex, Text } from '@adobe/react-spectrum';
 
 export const SecondaryToolbar = (): JSX.Element => {
     return (

web_ui/src/pages/annotator/tools/circle-tool/secondary-toolbar.component.tsx

@@ -1,9 +1,8 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { Flex } from '@adobe/react-spectrum';
+import { Flex, Text } from '@adobe/react-spectrum';
 import { Slider } from '@geti/ui';
-import { Text } from '@react-spectrum/text';
 
 import { Divider } from '../../../../shared/components/divider/divider.component';
 import { ToolType } from '../../core/annotation-tool-context.interface';

web_ui/src/pages/annotator/tools/explanation-tool/select-model.component.tsx

@@ -26,7 +26,7 @@ export const useCanSelectDifferentInferenceModel = () => {
     return true;
 };
 
-export const SelectInferenceModelPicker = (props: Omit<ComponentProps<typeof Picker>, 'children'>) => {
+const SelectInferenceModelPicker = (props: Omit<ComponentProps<typeof Picker>, 'children'>) => {
     const [selectedModel, setSelectedModel] = useSelectedInferenceModel();
 
     const { useProjectModelsQuery } = useModels();

web_ui/src/pages/annotator/tools/grabcut-tool/secondary-toolbar.component.tsx

@@ -1,8 +1,7 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { Flex, Tooltip, TooltipTrigger } from '@adobe/react-spectrum';
-import { Text } from '@react-spectrum/text';
+import { Flex, Text, Tooltip, TooltipTrigger } from '@adobe/react-spectrum';
 
 import { Combine, New, Subtract } from '../../../../assets/icons';
 import { Label } from '../../../../core/labels/label.interface';

web_ui/src/pages/annotator/tools/keypoint-tool/secondary-toolbar.component.tsx

@@ -1,8 +1,7 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { Flex, Tooltip, TooltipTrigger } from '@adobe/react-spectrum';
-import { Text } from '@react-spectrum/text';
+import { Flex, Text, Tooltip, TooltipTrigger } from '@adobe/react-spectrum';
 
 import { Delete, LineMappingLight, Reject } from '../../../../assets/icons';
 import { isKeypointAnnotation } from '../../../../core/annotations/services/utils';

web_ui/src/pages/annotator/tools/polygon-tool/polygon-tool.interface.ts

@@ -9,7 +9,7 @@ import { WebWorker } from '../../../../webworkers/web-worker.interface';
 import { Hotkeys } from '../../providers/annotator-provider/utils';
 import { PolygonMode } from './polygon-tool.enum';
 
-export interface IntelligentScissorsInstance {
+interface IntelligentScissorsInstance {
     new (imageData: ImageData): IntelligentScissorsMethods;
 }
 

web_ui/src/pages/annotator/tools/polygon-tool/secondary-toolbar.component.tsx

@@ -1,9 +1,8 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { Flex, Tooltip, TooltipTrigger } from '@adobe/react-spectrum';
+import { Flex, Text, Tooltip, TooltipTrigger } from '@adobe/react-spectrum';
 import { Switch } from '@geti/ui';
-import { Text } from '@react-spectrum/text';
 
 import { Divider } from '../../../../shared/components/divider/divider.component';
 import { useDrawingToolsKeyboardShortcut } from '../../../annotator/hot-keys/use-drawing-tools-keyboard-shortcut/use-drawing-tools-keyboard-shortcut';

web_ui/src/pages/annotator/tools/rotated-bounding-box-tool/secondary-toolbar.component.tsx

@@ -1,8 +1,7 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { Flex } from '@adobe/react-spectrum';
-import { Text } from '@react-spectrum/text';
+import { Flex, Text } from '@adobe/react-spectrum';
 
 export const SecondaryToolbar = (): JSX.Element => {
     return (

web_ui/src/pages/annotator/tools/ssim-tool/secondary-toolbar.component.tsx

@@ -1,9 +1,8 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { Flex } from '@adobe/react-spectrum';
+import { Flex, Text } from '@adobe/react-spectrum';
 import { Switch } from '@geti/ui';
-import { Text } from '@react-spectrum/text';
 import { useMediaQuery } from '@react-spectrum/utils';
 import { isEmpty } from 'lodash-es';
 

web_ui/src/pages/annotator/tools/watershed-tool/label-picker.component.tsx

@@ -3,8 +3,7 @@
 
 import { Key } from 'react';
 
-import { Item, Picker, Section } from '@adobe/react-spectrum';
-import { Text } from '@react-spectrum/text';
+import { Item, Picker, Section, Text } from '@adobe/react-spectrum';
 
 import { LabelTag } from '../../components/labels/label-tag/label-tag.component';
 import { WatershedLabel } from './watershed-tool.interface';

web_ui/src/pages/annotator/tools/watershed-tool/secondary-toolbar.component.tsx

@@ -3,8 +3,7 @@
 
 import { Key, useEffect } from 'react';
 
-import { Flex } from '@adobe/react-spectrum';
-import { Text } from '@react-spectrum/text';
+import { Flex, Text } from '@adobe/react-spectrum';
 import { useMediaQuery } from '@react-spectrum/utils';
 import { isEmpty } from 'lodash-es';
 

web_ui/src/pages/create-project/components/project-labels-management/task-labels-management/change-color-button.component.tsx

@@ -3,8 +3,7 @@
 
 import { View } from '@adobe/react-spectrum';
 import { ActionButton } from '@geti/ui';
-import { BorderRadiusValue } from '@react-types/shared/src/dna';
-import { Responsive } from '@react-types/shared/src/style';
+import { BorderRadiusValue, Responsive } from '@react-types/shared';
 
 interface ChangeColorButtonProps {
     size: 'S' | 'L';

web_ui/src/pages/create-project/components/select-project-template/task-chain-template.component.tsx

@@ -3,10 +3,8 @@
 
 import { useEffect } from 'react';
 
-import { Flex, Radio, RadioGroup, Text } from '@adobe/react-spectrum';
-import { Heading } from '@react-spectrum/text';
+import { Flex, Heading, Radio, RadioGroup, Text, View } from '@adobe/react-spectrum';
 import { useMediaQuery } from '@react-spectrum/utils';
-import { View } from '@react-spectrum/view';
 import { isEqual } from 'lodash-es';
 
 import { DOMAIN } from '../../../../core/projects/core.interface';

web_ui/src/pages/create-project/new-project-dialog.component.tsx

@@ -3,11 +3,19 @@
 
 import { CSSProperties, FC, useState } from 'react';
 
-import { ButtonGroup, Content, Dialog, DialogContainer, Divider, Flex, Text } from '@adobe/react-spectrum';
+import {
+    ButtonGroup,
+    Content,
+    Dialog,
+    DialogContainer,
+    Divider,
+    Flex,
+    Heading,
+    Text,
+    View,
+} from '@adobe/react-spectrum';
 import { Button } from '@geti/ui';
-import { Heading } from '@react-spectrum/text';
 import { dimensionValue, useMediaQuery } from '@react-spectrum/utils';
-import { View } from '@react-spectrum/view';
 import { OverlayTriggerState } from '@react-stately/overlays';
 import { isEmpty } from 'lodash-es';
 import { useNavigate } from 'react-router-dom';

web_ui/src/pages/errors/resource-not-found/resource-not-found.component.tsx

@@ -1,9 +1,8 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { Content } from '@adobe/react-spectrum';
+import { Content, Heading } from '@adobe/react-spectrum';
 import { Button } from '@geti/ui';
-import { Heading } from '@react-spectrum/text';
 
 import { NotFound } from '../../../assets/images';
 import { redirectTo } from '../../../shared/utils';

web_ui/src/pages/landing-page/landing-page-workspace/components/no-projects-area/no-projects-area.component.tsx

@@ -1,8 +1,7 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { Flex, Heading, Image, Text } from '@adobe/react-spectrum';
-import { View } from '@react-spectrum/view';
+import { Flex, Heading, Image, Text, View } from '@adobe/react-spectrum';
 import { OverlayTriggerState } from '@react-stately/overlays';
 
 import NoProjectsPlaceholder from '../../../../../assets/images/no-projects-placeholder.webp';

web_ui/src/pages/media/components/field-values/media-filter-value-date.component.tsx

@@ -4,8 +4,8 @@
 import { useEffect, useState } from 'react';
 
 import { DatePicker } from '@geti/ui';
+import { View } from '@adobe/react-spectrum';
 import { DateValue, getLocalTimeZone, parseAbsolute, parseDateTime, today } from '@internationalized/date';
-import { View } from '@react-spectrum/view';
 
 import { SearchRuleValue } from '../../../../core/media/media-filter.interface';
 import { formatLocalToUtc, isDateBetween } from '../../../../shared/utils';

web_ui/src/pages/project-details/components/project-annotations/object-size-distribution/objects-list/objects-list.component.tsx

@@ -3,8 +3,7 @@
 
 import { Dispatch, Key, SetStateAction } from 'react';
 
-import { Flex, Item, Picker, Text, Tooltip, TooltipTrigger, View } from '@adobe/react-spectrum';
-import { Heading } from '@react-spectrum/text';
+import { Flex, Heading, Item, Picker, Text, Tooltip, TooltipTrigger, View } from '@adobe/react-spectrum';
 import { capitalize, isEmpty } from 'lodash-es';
 
 import { PressableElement } from '../../../../../../shared/components/pressable-element/pressable-element.component';

web_ui/src/pages/project-details/components/project-annotations/project-annotations-media/project-annotations-media.component.tsx

@@ -1,8 +1,7 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { Flex } from '@adobe/react-spectrum';
-import { Text } from '@react-spectrum/text';
+import { Flex, Text } from '@adobe/react-spectrum';
 import CountUp from 'react-countup';
 
 import { CardContent } from '../../../../../shared/components/card-content/card-content.component';

web_ui/src/pages/project-details/components/project-annotations/tasks-list/tasks-list.component.tsx

@@ -3,8 +3,7 @@
 
 import { Dispatch, Key, SetStateAction } from 'react';
 
-import { Item, Picker } from '@adobe/react-spectrum';
-import { Text } from '@react-spectrum/text';
+import { Item, Picker, Text } from '@adobe/react-spectrum';
 import { StyleProps } from '@react-types/shared';
 
 import { idMatchingFormat } from '../../../../../test-utils/id-utils';

web_ui/src/pages/project-details/components/project-media/grid-media-item.component.tsx

@@ -3,9 +3,8 @@
 
 import { Key, useRef, useState } from 'react';
 
-import { Flex, Tooltip, TooltipTrigger } from '@adobe/react-spectrum';
+import { Flex, Tooltip, TooltipTrigger, View } from '@adobe/react-spectrum';
 import { Checkbox } from '@geti/ui';
-import { View } from '@react-spectrum/view';
 
 import { MediaItem } from '../../../../core/media/media.interface';
 import { MediaItemView } from '../../../../shared/components/media-item-view/media-item-view.component';

web_ui/src/pages/project-details/components/project-media/loading-overlay.component.tsx

@@ -3,8 +3,7 @@
 
 import { ComponentProps } from 'react';
 
-import { DimensionValue, Flex, ProgressCircle } from '@adobe/react-spectrum';
-import { View } from '@react-spectrum/view';
+import { DimensionValue, Flex, ProgressCircle, View } from '@adobe/react-spectrum';
 import { BackgroundColorValue, BoxAlignmentStyleProps, Responsive, StyleProps } from '@react-types/shared';
 
 interface LoadingOverlayProps extends StyleProps, BoxAlignmentStyleProps {

web_ui/src/pages/project-details/components/project-media/media-content-bucket.component.tsx

@@ -5,8 +5,7 @@ import { Dispatch, FC, ReactNode, SVGProps } from 'react';
 
 import { Divider, Flex, IllustratedMessage, View } from '@adobe/react-spectrum';
 import { useMediaQuery } from '@react-spectrum/utils';
-import { DimensionValue } from '@react-types/shared/src/dna';
-import { Responsive } from '@react-types/shared/src/style';
+import { DimensionValue, Responsive } from '@react-types/shared';
 import NotFound from '@spectrum-icons/illustrations/NotFound';
 import { isEmpty } from 'lodash-es';
 

web_ui/src/pages/project-details/components/project-media/media-item-tooltip-message/media-item-tooltip-message.tsx

@@ -1,8 +1,7 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { Flex } from '@adobe/react-spectrum';
-import { Text } from '@react-spectrum/text';
+import { Flex, Text } from '@adobe/react-spectrum';
 
 import { MEDIA_TYPE } from '../../../../../core/media/base-media.interface';
 import { useUsers } from '../../../../../core/users/hook/use-users.hook';

web_ui/src/pages/project-details/components/project-media/upload-status-bar/upload-status-dialog/upload-status-dialog-item.component.tsx

@@ -5,7 +5,7 @@ import { useMemo } from 'react';
 
 import { DialogTrigger, Flex, Link, ProgressCircle, Text, Tooltip, TooltipTrigger, View } from '@adobe/react-spectrum';
 import { ActionButton } from '@geti/ui';
-import { IconColorValue } from '@react-types/shared/src/dna';
+import { IconColorValue } from '@react-types/shared';
 import AlertCircle from '@spectrum-icons/workflow/AlertCircle';
 
 import { AcceptCircle, Alert, Image, Play, Refresh } from '../../../../../../assets/icons';

web_ui/src/pages/project-details/components/project-media/upload-status-bar/upload-status-dialog/upload-status-error-dialog.component.tsx

@@ -1,8 +1,7 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { Content, Dialog, Divider, Heading, View } from '@adobe/react-spectrum';
-import { Text } from '@react-spectrum/text';
+import { Content, Dialog, Divider, Heading, Text, View } from '@adobe/react-spectrum';
 
 import { ErrorListItem } from '../../../../../../providers/media-upload-provider/media-upload.interface';