superdesk · dzonidoo · Nov 12, 2024 · Nov 12, 2024 · Nov 12, 2024 · Nov 13, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -123,7 +123,7 @@
     "sass-loader": "6.0.6",
     "shortid": "2.2.8",
     "style-loader": "0.20.2",
-    "superdesk-ui-framework": "^3.1.28",
+    "superdesk-ui-framework": "^4.0.0",
     "ts-loader": "3.5.0",
     "typescript": "4.9.5",
     "uuid": "8.3.1",

diff --git a/scripts/apps/archive/controllers/file-upload-error-modal.tsx b/scripts/apps/archive/controllers/file-upload-error-modal.tsx
@@ -24,7 +24,6 @@ export function fileUploadErrorModal(
                 return (
                     <Modal
                         visible
-                        zIndex={1050}
                         size="small"
                         position="top"
                         onHide={this.props.closeModal}

diff --git a/scripts/apps/archive/show-spike-dialog.tsx b/scripts/apps/archive/show-spike-dialog.tsx
@@ -45,7 +45,6 @@ export function showSpikeDialog<T>(
                     openModal(
                         <Modal
                             visible
-                            zIndex={1050}
                             size="small"
                             position="top"
                             headerTemplate={

diff --git a/...s/apps/authoring-react/article-widgets/versions-and-item-history/transmission-details.tsx b/...s/apps/authoring-react/article-widgets/versions-and-item-history/transmission-details.tsx
@@ -117,7 +117,6 @@ export class TransmissionDetails extends React.PureComponent<IProps, IState> {
                                     showModal(({closeModal}) => (
                                         <Modal
                                             visible
-                                            zIndex={1050}
                                             size="large"
                                             position="center"
                                             onHide={closeModal}

diff --git a/scripts/apps/authoring-react/authoring-angular-integration.tsx b/scripts/apps/authoring-react/authoring-angular-integration.tsx
@@ -3,7 +3,17 @@
 import {assertNever} from 'core/helpers/typescript-helpers';
 import {DeskAndStage} from './subcomponents/desk-and-stage';
 import {LockInfo} from './subcomponents/lock-info';
-import {Button, ButtonGroup, IconButton, Label, Modal, NavButton, Popover, Spacer} from 'superdesk-ui-framework/react';
+import {
+    Button,
+    ButtonGroup,
+    IconButton,
+    Label,
+    Modal,
+    NavButton,
+    Popover,
+    Spacer,
+    WithPopover,
+} from 'superdesk-ui-framework/react';
 import {
     IArticle,
     ITopBarWidget,
@@ -19,7 +29,6 @@ import {sdApi} from 'api';
 import ng from 'core/services/ng';
 import {AuthoringIntegrationWrapper} from './authoring-integration-wrapper';
 import {MarkedDesks} from './toolbar/mark-for-desks/mark-for-desks-popover';
-import {WithPopover} from 'core/helpers/with-popover';
 import {HighlightsCardContent} from './toolbar/highlights-management';
 import {
     authoringStorageIArticle,
@@ -168,7 +177,6 @@ function getInlineToolbarActions(
                     />
                 )}
                 placement="right-end"
-                zIndex={1050}
             >
                 {
                     (togglePopup) => (
@@ -313,7 +321,6 @@ function getInlineToolbarActions(
                             size="small"
                             position="center"
                             onHide={closeModal}
-                            zIndex={2001}
                             headerTemplate={gettext('Confirm Unpublishing')}
                             footerTemplate={(
                                 <Spacer h gap="4" justifyContent="end" noGrow>
@@ -450,7 +457,6 @@ function getInlineToolbarActions(
             component: () => (
                 <>
                     <Popover
-                        zIndex={1050}
                         triggerSelector="#marked-for-desks"
                         title={gettext('Marked for')}
                         placement="bottom-end"

diff --git a/scripts/apps/authoring-react/compare-articles/compare-articles.tsx b/scripts/apps/authoring-react/compare-articles/compare-articles.tsx
@@ -116,7 +116,6 @@ export class CompareAuthoringEntities<T> extends React.PureComponent<IProps<T>,
         return (
             <Modal
                 visible
-                zIndex={1050}
                 size="x-large"
                 position="center"
                 maximized

diff --git a/scripts/apps/authoring-react/fields/dropdown/dropdown-vocabulary/config.tsx b/scripts/apps/authoring-react/fields/dropdown/dropdown-vocabulary/config.tsx
@@ -41,7 +41,6 @@ export class ConfigFromVocabulary extends React.PureComponent<IConfigComponentPr
                         });
                     }}
                     getLabel={(item) => item.display_name}
-                    zIndex={1050}
                 />
             </div>
         );

diff --git a/scripts/apps/authoring-react/multi-edit-modal.tsx b/scripts/apps/authoring-react/multi-edit-modal.tsx
@@ -68,7 +68,6 @@ export class MultiEditModal extends React.PureComponent<IProps, IState> {
             priority: 0.1,
             component: () => (
                 <Menu
-                    zIndex={1050}
                     items={
                         availableArticles.map((article) => {
                             const leaf: IMenuItem = {
@@ -205,7 +204,6 @@ export class MultiEditModal extends React.PureComponent<IProps, IState> {
         return (
             <Modal
                 contentPadding="none"
-                zIndex={1050}
                 maximized
                 onHide={this.props.onClose}
                 visible
@@ -252,7 +250,6 @@ export class MultiEditModal extends React.PureComponent<IProps, IState> {
                     {availableArticles.length > 0 && (
                         <div className="multi-edit-add-button">
                             <Menu
-                                zIndex={1050}
                                 items={availableArticles.map((a) => {
                                     const leaf: IMenuItem = {
                                         onClick: () => this.add(a._id),

diff --git a/scripts/apps/authoring-react/toolbar/compare-article-versions.tsx b/scripts/apps/authoring-react/toolbar/compare-article-versions.tsx
@@ -126,7 +126,6 @@ export class CompareArticleVersionsModal extends React.PureComponent<IProps, ISt
                 onHide={this.props.closeModal}
                 visible
                 maximized
-                zIndex={1050}
                 headerTemplate={gettext('Compare article versions')}
                 contentPadding="none"
             >

diff --git a/scripts/apps/authoring-react/toolbar/export-modal.tsx b/scripts/apps/authoring-react/toolbar/export-modal.tsx
@@ -79,7 +79,6 @@ export class ExportModal extends React.PureComponent<IProps, IState> {
                 size="medium"
                 onHide={this.props.closeModal}
                 visible
-                zIndex={1050}
                 headerTemplate={gettext('Export')}
             >
                 <Spacer v gap="32">

diff --git a/scripts/apps/authoring-react/toolbar/highlights-modal.tsx b/scripts/apps/authoring-react/toolbar/highlights-modal.tsx
@@ -69,7 +69,6 @@ export class HighlightsModal extends React.PureComponent<IProps, IState> {
         return (
             <Modal
                 onHide={this.props.closeModal}
-                zIndex={1050}
                 size="small"
                 visible
                 headerTemplate={gettext('Highlights')}

diff --git a/scripts/apps/authoring-react/toolbar/mark-for-desks/mark-for-desks-modal.tsx b/scripts/apps/authoring-react/toolbar/mark-for-desks/mark-for-desks-modal.tsx
@@ -32,7 +32,6 @@ export class MarkForDesksModal extends React.PureComponent<IProps, IState> {
         return (
             <Modal
                 visible
-                zIndex={1050}
                 onHide={this.props.closeModal}
                 size="medium"
                 headerTemplate={gettext('Marked for desks')}

diff --git a/scripts/apps/authoring-react/toolbar/multi-edit-toolbar-action.tsx b/scripts/apps/authoring-react/toolbar/multi-edit-toolbar-action.tsx
@@ -30,7 +30,6 @@ export class MultiEditToolbarAction extends React.Component<IProps, IState> {
         return (
             <Modal
                 contentPadding="none"
-                zIndex={1050}
                 onHide={this.props.onClose}
                 visible
                 headerTemplate={gettext('Select articles')}
@@ -41,7 +40,6 @@ export class MultiEditToolbarAction extends React.Component<IProps, IState> {
                         label=""
                         inlineLabel
                         labelHidden
-                        zIndex={1050}
                         optionLabel={(article) => getArticleLabel(article)}
                         value={this.state.selectedArticles}
                         onChange={(values) => {

diff --git a/scripts/apps/authoring-react/toolbar/proofreading-theme-modal.tsx b/scripts/apps/authoring-react/toolbar/proofreading-theme-modal.tsx
@@ -84,7 +84,6 @@ export class ProofreadingThemeModal extends React.Component<IProps, IState> {
         return (
             <Modal
                 size="x-large"
-                zIndex={1050}
                 visible
                 onHide={this.props.onHide}
                 headerTemplate={gettext('Configure Editor themes')}

diff --git a/scripts/apps/authoring-react/toolbar/template-modal.tsx b/scripts/apps/authoring-react/toolbar/template-modal.tsx
@@ -62,7 +62,6 @@ export class TemplateModal extends React.PureComponent<IProps, IState> {
                 visible
                 onHide={() => this.props.closeModal()}
                 size="medium"
-                zIndex={1050}
                 headerTemplate={gettext('Save as template')}
             >
                 <Spacer v gap="16">

diff --git a/scripts/apps/authoring-react/toolbar/translate-modal.tsx b/scripts/apps/authoring-react/toolbar/translate-modal.tsx
@@ -97,7 +97,6 @@ export class TranslateModal extends React.PureComponent<IProps, IState> {
                 visible
                 onHide={() => this.props.closeModal()}
                 size="small"
-                zIndex={1050}
                 headerTemplate={gettext('Translate')}
             >
                 <Spacer v gap="16">

diff --git a/scripts/apps/authoring/attachments/AttachmentsEditorModal.tsx b/scripts/apps/authoring/attachments/AttachmentsEditorModal.tsx
@@ -35,7 +35,6 @@ export class AttachmentsEditorModal extends React.Component<IProps, IState> {
         return (
             <Modal
                 visible
-                zIndex={1050}
                 size="small"
                 position="top"
                 onHide={this.props.closeEdit}

diff --git a/scripts/apps/authoring/attachments/UploadAttachmentsModal.tsx b/scripts/apps/authoring/attachments/UploadAttachmentsModal.tsx
@@ -117,7 +117,6 @@ export class UploadAttachmentsModal extends React.PureComponent<IProps, IState>
         return (
             <Modal
                 visible
-                zIndex={1050}
                 size="x-large"
                 position="center"
                 onHide={this.state.saving ? noop : this.props.closeModal}

diff --git a/scripts/apps/authoring/authoring/components/CharacterCountConfigButton.tsx b/scripts/apps/authoring/authoring/components/CharacterCountConfigButton.tsx
@@ -119,7 +119,6 @@ export class CharacterCountConfigModal extends React.PureComponent<IModalProps,
         return (
             <Modal
                 visible
-                zIndex={1050}
                 size="medium"
                 position="top"
                 headerTemplate={gettext('Character limit settings')}

diff --git a/scripts/apps/authoring/authoring/components/publish-warning-confirm-modal.tsx b/scripts/apps/authoring/authoring/components/publish-warning-confirm-modal.tsx
@@ -18,7 +18,6 @@ export function getPublishWarningConfirmModal(
                 return (
                     <Modal
                         visible
-                        zIndex={1050}
                         size="small"
                         position="top"
                         onHide={this.props.closeModal}

diff --git a/scripts/apps/authoring/authoring/components/unpublish-confirm-modal.tsx b/scripts/apps/authoring/authoring/components/unpublish-confirm-modal.tsx
@@ -35,7 +35,6 @@ export function getUnpublishConfirmModal(
             return (
                 <Modal
                     visible
-                    zIndex={1050}
                     position="top"
                     size="small"
                     onHide={this.props.closeModal}

diff --git a/scripts/apps/authoring/authoring/services/quick-publish-modal.tsx b/scripts/apps/authoring/authoring/services/quick-publish-modal.tsx
@@ -19,7 +19,6 @@ export function confirmPublish(items: Array<IArticle>): Promise<void> {
                 return (
                     <Modal
                         visible
-                        zIndex={1050}
                         size="small"
                         position="top"
                         onHide={this.props.closeModal}

diff --git a/scripts/apps/highlights/components/SetHighlightsForMultipleArticlesModal.tsx b/scripts/apps/highlights/components/SetHighlightsForMultipleArticlesModal.tsx
@@ -86,7 +86,6 @@ export function getModalForMultipleHighlights(articles: Array<IArticle>, deskId:
 
                     <Modal
                         visible
-                        zIndex={1050}
                         size="small"
                         position="top"
                         onHide={this.props.closeModal}

diff --git a/scripts/apps/ingest/directives/authenticate-ingest-provider.tsx b/scripts/apps/ingest/directives/authenticate-ingest-provider.tsx
@@ -14,7 +14,6 @@ export function authenticateIngestProvider(actions: Array<{label: string; onClic
             return (
                 <Modal
                     visible
-                    zIndex={1050}
                     size="small"
                     position="top"
                     onHide={this.props.closeModal}

diff --git a/scripts/apps/publish-preview/previewModal.tsx b/scripts/apps/publish-preview/previewModal.tsx
@@ -82,7 +82,6 @@ export class PreviewModal extends React.Component<IProps> {
         return (
             <Modal
                 visible
-                zIndex={1050}
                 size="small"
                 position="top"
                 headerTemplate={gettext('Select preview target')}

diff --git a/scripts/apps/search/components/fields/authors.tsx b/scripts/apps/search/components/fields/authors.tsx
@@ -113,7 +113,6 @@ export class Authors extends SuperdeskReactComponent<IPropsItemListInfo> {
                                 title={gettext('Authors')}
                                 placement="bottom-end"
                                 triggerSelector="#more-authors-button"
-                                zIndex={1031}
                             >
                                 <table style={{lineHeight: 1.5}}>
                                     <tbody>

diff --git a/scripts/apps/search/components/fields/translations.tsx b/scripts/apps/search/components/fields/translations.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {gettext, gettextPlural} from 'core/utils';
 import {IArticle} from 'superdesk-api';
 import {TranslationsListWrapper} from '../translations-list-wrapper';
-import {showPopup} from 'core/ui/components/popupNew';
+import {showPopup} from 'superdesk-ui-framework/react';
 
 interface IProps {
     item: IArticle;
@@ -41,7 +41,6 @@ export class Translations extends React.PureComponent<IProps> {
                     close={closePopup}
                 />
             ),
-            100,
         );
     }
 

diff --git a/scripts/apps/search/controllers/get-bulk-actions.tsx b/scripts/apps/search/controllers/get-bulk-actions.tsx
@@ -159,7 +159,6 @@ export function getBulkActions(
                 onTrigger: () => {
                     showModal(({closeModal}) => (
                         <Modal
-                            zIndex={1050}
                             size="medium"
                             visible
                             onHide={closeModal}

diff --git a/scripts/apps/vocabularies/components/UploadConfigModal.tsx b/scripts/apps/vocabularies/components/UploadConfigModal.tsx
@@ -63,7 +63,6 @@ export function UploadConfig(updateVocabulary) {
             return (
                 <Modal
                     visible
-                    zIndex={1050}
                     size="large"
                     position="center"
                     onHide={this.props.closeModal}

diff --git a/scripts/apps/workspace/content/components/new-field-select.tsx b/scripts/apps/workspace/content/components/new-field-select.tsx
@@ -21,7 +21,6 @@ export class NewFieldSelect extends React.PureComponent<IProps> {
                             : <>{label}</>;
                     }}
                     getLabel={({label}) => label}
-                    zIndex={1050}
                     getOptions={() => availableFields
                         .map((field) => ({
                             value: field,

diff --git a/scripts/apps/workspace/content/views/FormattingOptionsMultiSelect.tsx b/scripts/apps/workspace/content/views/FormattingOptionsMultiSelect.tsx
@@ -34,7 +34,6 @@ export class FormattingOptionsTreeSelect extends React.Component<IProps> {
                 label={gettext('Formatting options')}
                 labelHidden
                 inlineLabel
-                zIndex={1051}
             />
         );
     }

diff --git a/scripts/core/ArticlesListByQueryWithFilters.tsx b/scripts/core/ArticlesListByQueryWithFilters.tsx
@@ -230,7 +230,7 @@ export class ArticlesListByQueryWithFilters extends React.PureComponent<IProps,
         const sortFilterToolbar = (
             <ResizeObserverComponent position="relative">
                 {(dimensions) => (
-                    <SubNav zIndex={4}>
+                    <SubNav>
                         {getTypeFilteringComponent(dimensions.width < COMPACT_WIDTH)}
 
                         <SortBar
@@ -338,7 +338,7 @@ export class ArticlesListByQueryWithFilters extends React.PureComponent<IProps,
                     const header = (itemsCount: number): JSX.Element => {
                         return (
                             <div data-test-id="articles-list--toolbar">
-                                <SubNav zIndex={5}>
+                                <SubNav>
                                     <div className="space-between">
                                         <h3
                                             className="subnav__page-title sd-flex-no-grow"

diff --git a/scripts/core/editor3/components/annotations/AnnotationInput.tsx b/scripts/core/editor3/components/annotations/AnnotationInput.tsx
@@ -298,7 +298,6 @@ class AnnotationInputBody extends React.Component<IProps, IState> {
                 ref={(component) => {
                     this.positionerRef = component;
                 }}
-                zIndex={1051}
             >
                 <Card padding={10}>
                     <div className="annotation-input" style={{width: 460}}>

diff --git a/scripts/core/editor3/components/toolbar/index.tsx b/scripts/core/editor3/components/toolbar/index.tsx
@@ -325,7 +325,6 @@ class ToolbarComponent extends React.Component<IProps, IState> {
                         return (
                             <div style={{display: 'inline-flex'}}>
                                 <TreeMenu
-                                    zIndex={1051}
                                     getOptions={() => options}
                                     getLabel={(item) => item}
                                     getId={(item) => item}

diff --git a/scripts/core/get-superdesk-api-implementation.tsx b/scripts/core/get-superdesk-api-implementation.tsx
@@ -109,7 +109,6 @@ import {
     LockInfo,
 } from 'apps/authoring-react/subcomponents/lock-info-generic';
 import {tryLocking, tryUnlocking} from './helpers/locking-helpers';
-import {showPopup} from './ui/components/popupNew';
 import {Card} from './ui/components/Card';
 import {getTextColor} from './helpers/utils';
 import {showModal} from '@superdesk/common';
@@ -120,6 +119,7 @@ import {getLabelNameResolver} from 'apps/workspace/helpers/getLabelForFieldId';
 import {getSortedFields, getSortedFieldsFiltered} from 'apps/authoring/preview/utils';
 import {editor3ToOperationalFormat} from 'apps/authoring-react/fields/editor3';
 import {prepareSuperdeskQuery} from './helpers/universal-query';
+import {showPopup} from 'superdesk-ui-framework/react';
 
 export function openArticle(
     id: IArticle['_id'],