@crowdin/app-project-module 3.3.0 → 3.4.0

package/out/static/ui/main.bundle.js

@@ -18718,6 +18718,11 @@
 	        toast(message);
 	    }
 	}
+	function contactUser(userId) {
+	    AP.getContext(function (context) {
+	        AP.redirect(`${context.organization_id ? '/u' : ''}/messages/create/${userId}`);
+	    });
+	}
 	function reloadLocation() {
 	    ensureInitialized();
 	    window.location.href =
@@ -36165,17 +36170,12 @@ Defaulting to \`null\`.`;
 	function isFolder$1(e) {
 	    return !e.type && (e.nodeType === undefined || e.nodeType === FOLDER_TYPE || e.nodeType === BRANCH_TYPE);
 	}
-	function openModal(modal) {
-	    if (!modal) {
-	        return;
+	// Throws like the old `ref.current.x` access did, instead of silently skipping.
+	function requireRef(ref) {
+	    if (!ref.current) {
+	        throw new Error('Component is not mounted');
 	    }
-	    modal.open();
-	}
-	function closeModal(modal) {
-	    if (!modal) {
-	        return;
-	    }
-	    modal.close();
+	    return ref.current;
 	}
 	function normalizeMenuItems(value) {
 	    let parsed = value;
@@ -36370,9 +36370,6 @@ Defaulting to \`null\`.`;
 	    }
 	    return items.filter((item) => item.schedule && (all || isFile(item)) && !item.disabled);
 	}
-	function parseBoolean(value) {
-	    return value === true || value === 'true' || value === '';
-	}
 	const SimpleIntegration = reactExports.forwardRef(function SimpleIntegration({ name, logo = 'logo.png', syncNewElements, withCronSync, webhooks, integrationOneLevelFetching, integrationSearchListener, filtering, integrationButtonMenuItems = [], crowdinButtonMenuItems = [], onRefreshFilesList, onFolderToggle, onUploadFilesToCrowdin, onUploadFilesToIntegration, onLoadMore, onIntegrationFilterChange, onIntegrationScheduleSync, onCrowdinScheduleSync, onIntegrationDisableSync, onCrowdinDisableSync, }, ref) {
 	    const [providers, setProviders] = reactExports.useState({
 	        crowdin: { ...INITIAL_PROVIDER_STATE },
@@ -36384,7 +36381,7 @@ Defaulting to \`null\`.`;
 	    // getCrowdinSelected has no deps, so it reads the current filter through a ref.
 	    const displayedLanguagesRef = reactExports.useRef([]);
 	    const [progresses, setProgresses] = reactExports.useState({});
-	    const [process, setProcess] = reactExports.useState({ toCrowdin: false, toIntegration: false });
+	    const [syncProcess, setSyncProcess] = reactExports.useState({ toCrowdin: false, toIntegration: false });
 	    const [activeProvider, setActiveProvider] = reactExports.useState('crowdin');
 	    const isMobile = useIsMobile();
 	    const [loadMoreLoadingIds, setLoadMoreLoadingIds] = reactExports.useState([]);
@@ -36482,24 +36479,10 @@ Defaulting to \`null\`.`;
 	        })),
 	        updateCrowdinFileData: async (items) => setProvider('crowdin', (state) => ({ ...state, items: updateItems(state.items, items) })),
 	        updateIntegrationFileData: async (items) => setProvider('integration', (state) => ({ ...state, items: updateItems(state.items, items) })),
-	        querySelector: (selector) => selector === '#crowdin-files'
-	            ? fileHandle('crowdin')
-	            : selector === '#integration-files'
-	                ? fileHandle('integration')
-	                : null,
-	        setAttribute: (attribute, value) => {
-	            var _a;
-	            const booleanValue = parseBoolean(value);
-	            const mapping = {
-	                'is-crowdin-loading': () => setProvider('crowdin', { loading: booleanValue }),
-	                'is-integration-loading': () => setProvider('integration', { loading: booleanValue }),
-	                'is-crowdin-sync-settings-in-progress': () => setProvider('crowdin', { syncSettingsLoading: booleanValue }),
-	                'is-integration-sync-settings-in-progress': () => setProvider('integration', { syncSettingsLoading: booleanValue }),
-	                'is-to-crowdin-process': () => setProcess((current) => ({ ...current, toCrowdin: booleanValue })),
-	                'is-to-integration-process': () => setProcess((current) => ({ ...current, toIntegration: booleanValue })),
-	            };
-	            (_a = mapping[attribute]) === null || _a === void 0 ? void 0 : _a.call(mapping);
-	        },
+	        getFilesHandle: fileHandle,
+	        setLoading: (provider, loading) => setProvider(provider, { loading }),
+	        setSyncSettingsInProgress: (provider, inProgress) => setProvider(provider, { syncSettingsLoading: inProgress }),
+	        setProcess: (next) => setSyncProcess((current) => ({ ...current, ...next })),
 	    }), [fileHandle, setProvider]);
 	    const displayedLanguages = reactExports.useMemo(() => filteredLanguageIds.length
 	        ? languages.filter((language) => filteredLanguageIds.includes(String(language.id)))
@@ -36590,7 +36573,7 @@ Defaulting to \`null\`.`;
 	        ? Object.keys(getCrowdinSelected()).length
 	        : selectedItems(provider).length;
 	    const syncDisabled = (provider) => selectedCount(provider) === 0;
-	    const anyProcess = process.toCrowdin || process.toIntegration;
+	    const anyProcess = syncProcess.toCrowdin || syncProcess.toIntegration;
 	    const scheduleEnabled = (provider) => Boolean((withCronSync === null || withCronSync === void 0 ? void 0 : withCronSync[provider]) || (webhooks === null || webhooks === void 0 ? void 0 : webhooks[provider]));
 	    const upload = (provider, action, item) => {
 	        var _a, _b;
@@ -36789,7 +36772,7 @@ Defaulting to \`null\`.`;
 	        const isCrowdin = provider === 'crowdin';
 	        const displayItems = isCrowdin ? displayCrowdinItems : displayIntegrationItems;
 	        const providerName = isCrowdin ? 'Crowdin' : name;
-	        const syncing = isCrowdin ? process.toIntegration : process.toCrowdin;
+	        const syncing = isCrowdin ? syncProcess.toIntegration : syncProcess.toCrowdin;
 	        const menuItems = isCrowdin ? normalizedCrowdinButtonMenuItems : normalizedIntegrationButtonMenuItems;
 	        // Derived, never stored: as state it went stale whenever items changed without a
 	        // selection change - disableSync cleared the markers but left the button live.
@@ -37014,6 +36997,8 @@ Defaulting to \`null\`.`;
 	    const checkUsersSeqRef = reactExports.useRef(0);
 	    const permissionsOpenSeqRef = reactExports.useRef(0);
 	    const [isLoading, setIsLoading] = reactExports.useState(false);
+	    // Kept apart from isLoading: disabling the focused users input would hide it from assistive tech.
+	    const [isCheckingUsers, setIsCheckingUsers] = reactExports.useState(false);
 	    // Gates Save until the user list loads, so a failed load can't save an empty list.
 	    const [isPermissionsLoaded, setIsPermissionsLoaded] = reactExports.useState(false);
 	    const [permissionUserOptions, setPermissionUserOptions] = reactExports.useState([]);
@@ -37034,10 +37019,12 @@ Defaulting to \`null\`.`;
 	        setIsPermissionsConfirmVisible(true);
 	    }
 	    async function showPermissionsDialog() {
-	        var _a;
+	        var _a, _b;
 	        hideConfirmUsersBlock();
-	        openModal(permissionsModalRef.current);
+	        (_a = permissionsModalRef.current) === null || _a === void 0 ? void 0 : _a.open();
 	        setIsLoading(true);
+	        // The bumped sequence below stops a pending check from clearing this itself.
+	        setIsCheckingUsers(false);
 	        setPermissionsSelectedUsers([]);
 	        // Reset before the async load, so a change event mid-load can't act on the
 	        // previous session's state.
@@ -37069,7 +37056,7 @@ Defaulting to \`null\`.`;
 	            const validUserIds = new Set(users.map((user) => `${user.id}`));
 	            const storedManagers = parsedManagers.filter((id) => validUserIds.has(id));
 	            // Ids are compared as strings; a missing owner id must stay null, not become "undefined".
-	            connectionOwnerIdRef.current = (_a = ownerId === null || ownerId === void 0 ? void 0 : ownerId.toString()) !== null && _a !== void 0 ? _a : null;
+	            connectionOwnerIdRef.current = (_b = ownerId === null || ownerId === void 0 ? void 0 : ownerId.toString()) !== null && _b !== void 0 ? _b : null;
 	            // Baseline for telling additions from removals: stored managers plus the owner
 	            // (who always has access). The acting user is deliberately NOT seeded.
 	            initialManagerIdsRef.current = new Set(storedManagers);
@@ -37114,13 +37101,14 @@ Defaulting to \`null\`.`;
 	            showToast("The integration owner can't be removed from the access list.");
 	        }
 	        setPermissionsSelectedUsers(selectedUsers);
-	        setIsLoading(true);
+	        setIsCheckingUsers(true);
 	        // Stamped on every invocation, the empty-selection early-return included, so a
 	        // cleared selection also invalidates a validation still in flight.
 	        const seq = ++checkUsersSeqRef.current;
+	        const finishChecking = () => setTimeout(() => seq === checkUsersSeqRef.current && setIsCheckingUsers(false), 500);
 	        if (selectedUsers.length === 0) {
 	            hideConfirmUsersBlock();
-	            setTimeout(() => setIsLoading(false), 500);
+	            finishChecking();
 	            return;
 	        }
 	        const user_ids = selectedUsers.filter((id) => parseInt(id));
@@ -37190,9 +37178,7 @@ Defaulting to \`null\`.`;
 	            }
 	        }
 	        finally {
-	            if (seq === checkUsersSeqRef.current) {
-	                setTimeout(() => setIsLoading(false), 500);
-	            }
+	            finishChecking();
 	        }
 	    }
 	    function inviteUsers() {
@@ -37207,7 +37193,7 @@ Defaulting to \`null\`.`;
 	            !!actingUserId &&
 	            !permissionsSelectedUsers.some((id) => `${id}` === actingUserId);
 	        AP.inviteUsers({ user_ids, emails }, async (res) => {
-	            var _a;
+	            var _a, _b;
 	            if (!res.success) {
 	                catchRejection(res, ((_a = res === null || res === void 0 ? void 0 : res.error) === null || _a === void 0 ? void 0 : _a.message) || "Can't invite users");
 	                setTimeout(() => setIsLoading(false), 500);
@@ -37226,7 +37212,7 @@ Defaulting to \`null\`.`;
 	                }
 	                showToast('Users successfully updated');
 	                hideConfirmUsersBlock();
-	                closeModal(permissionsModalRef.current);
+	                (_b = permissionsModalRef.current) === null || _b === void 0 ? void 0 : _b.close();
 	            }
 	            catch (e) {
 	                catchRejection(e, (e === null || e === void 0 ? void 0 : e.error) || "Can't invite users");
@@ -37282,6 +37268,7 @@ Defaulting to \`null\`.`;
 	    }
 	    return {
 	        isLoading,
+	        isCheckingUsers,
 	        isPermissionsLoaded,
 	        permissionUserOptions,
 	        permissionsSelectedUsers,
@@ -37340,7 +37327,7 @@ Defaulting to \`null\`.`;
 	            found = selectedFiles.find((file) => file.node_type === FOLDER_TYPE || file.node_type === BRANCH_TYPE);
 	        }
 	        else {
-	            const files = await appComponent.current.getCrowdinFilesData();
+	            const files = await requireRef(appComponent).getCrowdinFilesData();
 	            const folders = files.filter((file) => file.node_type === FOLDER_TYPE || file.node_type === BRANCH_TYPE);
 	            found = folders.find((folder) => selectedFiles.hasOwnProperty(folder.id));
 	        }
@@ -37355,11 +37342,11 @@ Defaulting to \`null\`.`;
 	            : [];
 	    }
 	    async function openScheduleModal(type, options = {}) {
-	        var _a, _b, _c, _d;
+	        var _a, _b, _c, _d, _e;
 	        const { showAllFolderFiles = false, showNewFiles = true } = options;
 	        let newFileStatus = 'unChecked';
 	        const integrationSyncFolders = ((await ((_b = (_a = appComponent.current) === null || _a === void 0 ? void 0 : _a.getIntegrationScheduleSync) === null || _b === void 0 ? void 0 : _b.call(_a, true))) || []).filter((elements) => elements.node_type === FOLDER_TYPE);
-	        const integrationFiles = (_c = appComponent.current) === null || _c === void 0 ? void 0 : _c.querySelector('#integration-files');
+	        const integrationFiles = (_c = appComponent.current) === null || _c === void 0 ? void 0 : _c.getFilesHandle('integration');
 	        const selectedIntegrationFolders = ((await ((_d = integrationFiles === null || integrationFiles === void 0 ? void 0 : integrationFiles.getSelected) === null || _d === void 0 ? void 0 : _d.call(integrationFiles, true))) || []).filter((elements) => elements.node_type === FOLDER_TYPE);
 	        for (let i = 0; i < selectedIntegrationFolders.length; i++) {
 	            const selectedElement = selectedIntegrationFolders[i];
@@ -37385,7 +37372,7 @@ Defaulting to \`null\`.`;
 	            allFolderFiles: false,
 	        });
 	        setIsScheduleSaveDisabled(false);
-	        openModal(scheduleModalRef.current);
+	        (_e = scheduleModalRef.current) === null || _e === void 0 ? void 0 : _e.open();
 	    }
 	    function onChangeAutoSynchronizationOptions() {
 	        var _a, _b, _c;
@@ -37404,28 +37391,29 @@ Defaulting to \`null\`.`;
 	        setIsScheduleSaveDisabled(!nextState.newFiles && !nextState.selectedFiles && !nextState.allFolderFiles);
 	    }
 	    async function saveScheduleSync() {
+	        var _a;
 	        const { type, newFiles: newFile, selectedFiles, allFolderFiles } = scheduleModalState;
 	        if (type === 'crowdin') {
-	            const crowdinFiles = await appComponent.current.getCrowdinFilesData();
+	            const crowdinFiles = await requireRef(appComponent).getCrowdinFilesData();
 	            const syncedFileIds = Object.keys(syncData.current);
 	            const crowdinFolderIds = crowdinFiles
 	                .filter((file) => file.node_type === FOLDER_TYPE || file.node_type === BRANCH_TYPE)
 	                .filter((file) => syncedFileIds.includes(String(file.id)))
 	                .map((file) => String(file.id));
-	            appComponent.current.setCrowdinScheduleSync(syncData.current, newFile, selectedFiles);
-	            const syncedFiles = await appComponent.current.getCrowdinScheduleSync(true);
-	            appComponent.current.setAttribute('is-crowdin-sync-settings-in-progress', true);
+	            requireRef(appComponent).setCrowdinScheduleSync(syncData.current, newFile, selectedFiles);
+	            const syncedFiles = await requireRef(appComponent).getCrowdinScheduleSync(true);
+	            requireRef(appComponent).setSyncSettingsInProgress('crowdin', true);
 	            updateSyncSettings(syncedFiles, 'schedule', 'crowdin', [], crowdinFolderIds);
 	        }
 	        else if (type === 'integration') {
 	            if (syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.integration) {
-	                appComponent.current.setIntegrationScheduleSync(syncData.current, newFile, selectedFiles);
+	                requireRef(appComponent).setIntegrationScheduleSync(syncData.current, newFile, selectedFiles);
 	            }
 	            else {
-	                appComponent.current.setIntegrationScheduleSync(syncData.current);
+	                requireRef(appComponent).setIntegrationScheduleSync(syncData.current);
 	            }
-	            const syncedFiles = await appComponent.current.getIntegrationScheduleSync(true);
-	            appComponent.current.setAttribute('is-integration-sync-settings-in-progress', true);
+	            const syncedFiles = await requireRef(appComponent).getIntegrationScheduleSync(true);
+	            requireRef(appComponent).setSyncSettingsInProgress('integration', true);
 	            if (integrationOneLevelFetching) {
 	                updateSyncSettings(syncedFiles, 'schedule', 'integration', selectedFiles ? getIntegrationFoldersToExpand(syncData.current, syncedFiles) : []);
 	            }
@@ -37441,7 +37429,7 @@ Defaulting to \`null\`.`;
 	                }
 	            }
 	        }
-	        closeModal(scheduleModalRef.current);
+	        (_a = scheduleModalRef.current) === null || _a === void 0 ? void 0 : _a.close();
 	    }
 	    async function setIntegrationScheduleSync(e) {
 	        var _a;
@@ -37461,8 +37449,8 @@ Defaulting to \`null\`.`;
 	                await openScheduleModal('integration', { showNewFiles, showAllFolderFiles });
 	                return;
 	            }
-	            appComponent.current.setIntegrationScheduleSync(e.detail);
-	            syncedFiles = await appComponent.current.getIntegrationScheduleSync(true);
+	            requireRef(appComponent).setIntegrationScheduleSync(e.detail);
+	            syncedFiles = await requireRef(appComponent).getIntegrationScheduleSync(true);
 	        }
 	        else {
 	            syncData.current = e.detail;
@@ -37471,9 +37459,9 @@ Defaulting to \`null\`.`;
 	                await openScheduleModal('integration', { showNewFiles: false, showAllFolderFiles: true });
 	                return;
 	            }
-	            syncedFiles = await appComponent.current.getIntegrationScheduleSync();
+	            syncedFiles = await requireRef(appComponent).getIntegrationScheduleSync();
 	        }
-	        appComponent.current.setAttribute('is-integration-sync-settings-in-progress', true);
+	        requireRef(appComponent).setSyncSettingsInProgress('integration', true);
 	        if (integrationOneLevelFetching) {
 	            updateSyncSettings(syncedFiles, 'schedule', 'integration', getIntegrationFoldersToExpand(e.detail, syncedFiles));
 	        }
@@ -37504,13 +37492,13 @@ Defaulting to \`null\`.`;
 	                await openScheduleModal('crowdin');
 	                return;
 	            }
-	            appComponent.current.setCrowdinScheduleSync(e.detail);
-	            syncedFiles = await appComponent.current.getCrowdinScheduleSync(true);
+	            requireRef(appComponent).setCrowdinScheduleSync(e.detail);
+	            syncedFiles = await requireRef(appComponent).getCrowdinScheduleSync(true);
 	        }
 	        else {
-	            syncedFiles = await appComponent.current.getCrowdinScheduleSync();
+	            syncedFiles = await requireRef(appComponent).getCrowdinScheduleSync();
 	        }
-	        appComponent.current.setAttribute('is-crowdin-sync-settings-in-progress', true);
+	        requireRef(appComponent).setSyncSettingsInProgress('crowdin', true);
 	        updateSyncSettings(syncedFiles, 'schedule', 'crowdin');
 	    }
 	    async function disableIntegrationSync(e) {
@@ -37518,10 +37506,10 @@ Defaulting to \`null\`.`;
 	            showToast('Select templates which will be pushed to Crowdin');
 	            return;
 	        }
-	        appComponent.current.setAttribute('is-integration-sync-settings-in-progress', true);
+	        requireRef(appComponent).setSyncSettingsInProgress('integration', true);
 	        const syncedFiles = (syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.integration)
-	            ? await appComponent.current.getIntegrationScheduleSync(true)
-	            : await appComponent.current.getIntegrationScheduleSync();
+	            ? await requireRef(appComponent).getIntegrationScheduleSync(true)
+	            : await requireRef(appComponent).getIntegrationScheduleSync();
 	        updateSyncSettings(syncedFiles, 'schedule', 'integration');
 	    }
 	    async function disableCrowdinSync(e) {
@@ -37529,10 +37517,10 @@ Defaulting to \`null\`.`;
 	            showToast('Select templates which will be pushed to Crowdin');
 	            return;
 	        }
-	        appComponent.current.setAttribute('is-crowdin-sync-settings-in-progress', true);
+	        requireRef(appComponent).setSyncSettingsInProgress('crowdin', true);
 	        const syncedFiles = (syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.crowdin)
-	            ? await appComponent.current.getCrowdinScheduleSync(true)
-	            : await appComponent.current.getCrowdinScheduleSync();
+	            ? await requireRef(appComponent).getCrowdinScheduleSync(true)
+	            : await requireRef(appComponent).getCrowdinScheduleSync();
 	        updateSyncSettings(syncedFiles, 'schedule', 'crowdin');
 	    }
 	    return {
@@ -37608,7 +37596,7 @@ Defaulting to \`null\`.`;
 	        setTimeout(refreshDependencies, 100);
 	    }
 	    async function saveSettings() {
-	        var _a, _b;
+	        var _a, _b, _c;
 	        setIsLoading(true);
 	        const configReq = {};
 	        for (const tab of configurationFields || []) {
@@ -37663,10 +37651,11 @@ Defaulting to \`null\`.`;
 	                        showToast("Can't save settings");
 	                    },
 	                    onFinally: () => {
+	                        var _a;
 	                        setTimeout(() => setIsLoading(false), 500);
 	                        setIsSettingsSaveDisabled(false);
 	                        if (!isValidationError && !isSettingsSaveFailed) {
-	                            closeModal(settingsModalRef.current);
+	                            (_a = settingsModalRef.current) === null || _a === void 0 ? void 0 : _a.close();
 	                            if (reloadOnConfigSave) {
 	                                getIntegrationData({ hardReload: true });
 	                                getCrowdinData();
@@ -37706,7 +37695,7 @@ Defaulting to \`null\`.`;
 	            setTimeout(() => setIsLoading(false), 500);
 	            setIsSettingsSaveDisabled(false);
 	            if (!isValidationError) {
-	                closeModal(settingsModalRef.current);
+	                (_c = settingsModalRef.current) === null || _c === void 0 ? void 0 : _c.close();
 	                if (reloadOnConfigSave) {
 	                    getIntegrationData({ hardReload: true });
 	                    getCrowdinData();
@@ -37771,7 +37760,7 @@ Defaulting to \`null\`.`;
 	    }
 	    async function handleLoadMore(detail) {
 	        var _a;
-	        const fileComponent = (_a = appComponent.current) === null || _a === void 0 ? void 0 : _a.querySelector('#integration-files');
+	        const fileComponent = (_a = appComponent.current) === null || _a === void 0 ? void 0 : _a.getFilesHandle('integration');
 	        if (!fileComponent) {
 	            return;
 	        }
@@ -37789,15 +37778,15 @@ Defaulting to \`null\`.`;
 	        }
 	        const isEmptySearch = !search || search.trim() === '';
 	        if (isEmptySearch && savedIntegrationData.current && hasLoadMoreElements.current) {
-	            appComponent.current.setIntegrationFilesData(savedIntegrationData.current);
-	            appComponent.current.setIntegrationOpenedFolders(currentOpenedFolders.current);
+	            requireRef(appComponent).setIntegrationFilesData(savedIntegrationData.current);
+	            requireRef(appComponent).setIntegrationOpenedFolders(currentOpenedFolders.current);
 	            savedIntegrationData.current = null;
 	            currentOpenedFolders.current = null;
 	            return;
 	        }
 	        if (!isEmptySearch && hasLoadMoreElements.current && !savedIntegrationData.current) {
-	            savedIntegrationData.current = await appComponent.current.getIntegrationFilesData();
-	            currentOpenedFolders.current = await appComponent.current.getIntegrationOpenedFolders();
+	            savedIntegrationData.current = await requireRef(appComponent).getIntegrationFilesData();
+	            currentOpenedFolders.current = await requireRef(appComponent).getIntegrationOpenedFolders();
 	        }
 	        getIntegrationData({ search });
 	    }
@@ -37824,7 +37813,7 @@ Defaulting to \`null\`.`;
 	    }
 	    async function getCrowdinData() {
 	        var _a, _b, _c, _d, _f;
-	        (_a = appComponent.current) === null || _a === void 0 ? void 0 : _a.setAttribute('is-crowdin-loading', 'true');
+	        (_a = appComponent.current) === null || _a === void 0 ? void 0 : _a.setLoading('crowdin', true);
 	        try {
 	            const restParams = await checkOrigin();
 	            if (progressiveCrowdinFilesLoading) {
@@ -37866,7 +37855,7 @@ Defaulting to \`null\`.`;
 	                ]);
 	                const tree = files.map(transformCrowdinItemToTree);
 	                crowdinData.current = tree;
-	                appComponent.current.setCrowdinFilesData(tree);
+	                requireRef(appComponent).setCrowdinFilesData(tree);
 	                project.current = projectData;
 	                const languagesSorted = project.current.targetLanguages
 	                    .map((language) => ({
@@ -37879,7 +37868,7 @@ Defaulting to \`null\`.`;
 	                    languagesSorted.push({ ...project.current.inContextPseudoLanguage, inContext: true });
 	                }
 	                setLanguagesForTranslation(languagesSorted);
-	                appComponent.current.setCrowdinLanguagesData(languagesSorted);
+	                requireRef(appComponent).setCrowdinLanguagesData(languagesSorted);
 	            }
 	            if (withCronSync || webhooks) {
 	                await getSyncSettings('crowdin');
@@ -37889,12 +37878,12 @@ Defaulting to \`null\`.`;
 	            catchRejection(e, "Can't fetch Crowdin data");
 	        }
 	        finally {
-	            appComponent.current.setAttribute('is-crowdin-loading', false);
+	            requireRef(appComponent).setLoading('crowdin', false);
 	        }
 	    }
 	    async function getIntegrationData({ hardReload = false, parentId = '', search = '', page = 0, recursion = false, paginationData } = {}, recursionState = null) {
 	        if (!paginationData) {
-	            appComponent.current.setAttribute('is-integration-loading', true);
+	            requireRef(appComponent).setLoading('integration', true);
 	        }
 	        let recursionStateLocal = recursionState;
 	        try {
@@ -37909,12 +37898,14 @@ Defaulting to \`null\`.`;
 	            if ((!paginationData && !parentId && !search) || hardReload) {
 	                hasLoadMoreElements.current = tree.some((item) => item.node_type === 'load-more');
 	            }
-	            const appIntegrationFiles = appComponent.current.querySelector('#integration-files');
+	            const appIntegrationFiles = requireRef(appComponent).getFilesHandle('integration');
 	            if (hardReload) {
-	                appComponent.current.setIntegrationFilesData(tree);
+	                requireRef(appComponent).setIntegrationFilesData(tree);
 	            }
 	            else if (tree.length) {
-	                appComponent.current.pushIntegrationFilesData(tree).then(async () => {
+	                requireRef(appComponent)
+	                    .pushIntegrationFilesData(tree)
+	                    .then(async () => {
 	                    if (parentId) {
 	                        const selection = await appIntegrationFiles.getSelected();
 	                        const selectedIds = selection === null || selection === void 0 ? void 0 : selection.filter((node) => node).map(({ id }) => id.toString());
@@ -37929,7 +37920,7 @@ Defaulting to \`null\`.`;
 	            }
 	            if (search) {
 	                const openIds = files.filter((e) => !e.type).map((e) => e.id);
-	                appComponent.current.setIntegrationOpenedFolders(openIds);
+	                requireRef(appComponent).setIntegrationOpenedFolders(openIds);
 	            }
 	            if (recursion) {
 	                if (!recursionStateLocal) {
@@ -37937,7 +37928,7 @@ Defaulting to \`null\`.`;
 	                        openedFolders: new Set(),
 	                        calls: 0,
 	                        setLoading(isLoading) {
-	                            appComponent.current.setAttribute('is-integration-loading', isLoading);
+	                            requireRef(appComponent).setLoading('integration', isLoading);
 	                        },
 	                    };
 	                    recursionStateLocal.setLoading(true);
@@ -37947,8 +37938,8 @@ Defaulting to \`null\`.`;
 	                }
 	                const folderItems = files.filter(isFolder$1);
 	                folderItems.forEach((folder) => recursionStateLocal.openedFolders.add(folder.id));
-	                const openedFoldersNow = await appComponent.current.getIntegrationOpenedFolders();
-	                appComponent.current.setIntegrationOpenedFolders([
+	                const openedFoldersNow = await requireRef(appComponent).getIntegrationOpenedFolders();
+	                requireRef(appComponent).setIntegrationOpenedFolders([
 	                    ...new Set([...openedFoldersNow, ...recursionStateLocal.openedFolders]),
 	                ]);
 	                if (folderItems.length > 0) {
@@ -37975,10 +37966,10 @@ Defaulting to \`null\`.`;
 	        }
 	        finally {
 	            if (!recursionStateLocal && !recursion) {
-	                appComponent.current.setAttribute('is-integration-loading', false);
+	                requireRef(appComponent).setLoading('integration', false);
 	            }
 	            else if (recursionStateLocal && recursionStateLocal.calls === 0) {
-	                appComponent.current.setAttribute('is-integration-loading', false);
+	                requireRef(appComponent).setLoading('integration', false);
 	            }
 	        }
 	    }
@@ -38039,18 +38030,18 @@ Defaulting to \`null\`.`;
 	            const res = await checkResponse(await fetch(`/api/sync-settings/${provider}` + restParams));
 	            if (provider === 'crowdin') {
 	                if (syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.crowdin) {
-	                    appComponent.current.setCrowdinScheduleSync(res, true, true);
+	                    requireRef(appComponent).setCrowdinScheduleSync(res, true, true);
 	                }
 	                else {
-	                    appComponent.current.setCrowdinScheduleSync(res);
+	                    requireRef(appComponent).setCrowdinScheduleSync(res);
 	                }
 	            }
 	            else {
 	                if (syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.integration) {
-	                    appComponent.current.setIntegrationScheduleSync(res, true, true);
+	                    requireRef(appComponent).setIntegrationScheduleSync(res, true, true);
 	                }
 	                else {
-	                    appComponent.current.setIntegrationScheduleSync(res);
+	                    requireRef(appComponent).setIntegrationScheduleSync(res);
 	                }
 	            }
 	            await applyAutoSyncPausedMarkers(provider, res);
@@ -38063,7 +38054,7 @@ Defaulting to \`null\`.`;
 	        try {
 	            const restParams = await checkOrigin();
 	            const res = await checkResponse(await fetch(`api/crowdin/file-progress/${fileId}` + restParams));
-	            appComponent.current.addCrowdinFileProgress(Array.isArray(res) ? { [fileId]: res } : res);
+	            requireRef(appComponent).addCrowdinFileProgress(Array.isArray(res) ? { [fileId]: res } : res);
 	        }
 	        catch (e) {
 	            catchRejection(e, "Can't fetch file progress");
@@ -38102,7 +38093,7 @@ Defaulting to \`null\`.`;
 	            showToast('Select templates which will be pushed to Crowdin');
 	            return;
 	        }
-	        appComponent.current.setAttribute('is-to-crowdin-process', true);
+	        requireRef(appComponent).setProcess({ toCrowdin: true });
 	        let req;
 	        if (integrationOneLevelFetching) {
 	            req = files.map((f) => ({
@@ -38149,16 +38140,16 @@ Defaulting to \`null\`.`;
 	                switch (job.type) {
 	                    case JOB_TYPE.updateCrowdin:
 	                    case JOB_TYPE.updateTargetLanguages:
-	                        appComponent.current.setAttribute('is-to-crowdin-process', true);
+	                        requireRef(appComponent).setProcess({ toCrowdin: true });
 	                        break;
 	                    case JOB_TYPE.updateIntegration:
-	                        appComponent.current.setAttribute('is-to-integration-process', true);
+	                        requireRef(appComponent).setProcess({ toIntegration: true });
 	                        break;
 	                    case JOB_TYPE.crowdinSyncSettingsSave:
-	                        appComponent.current.setAttribute('is-crowdin-sync-settings-in-progress', true);
+	                        requireRef(appComponent).setSyncSettingsInProgress('crowdin', true);
 	                        break;
 	                    case JOB_TYPE.integrationSyncSettingsSave:
-	                        appComponent.current.setAttribute('is-integration-sync-settings-in-progress', true);
+	                        requireRef(appComponent).setSyncSettingsInProgress('integration', true);
 	                        break;
 	                    default:
 	                }
@@ -38192,24 +38183,24 @@ Defaulting to \`null\`.`;
 	            case JOB_TYPE.updateTargetLanguages:
 	                if (!onFinally) {
 	                    onFinally = () => {
-	                        appComponent.current.setAttribute('is-to-crowdin-process', false);
+	                        requireRef(appComponent).setProcess({ toCrowdin: false });
 	                        getCrowdinData();
 	                    };
 	                }
 	                break;
 	            case JOB_TYPE.updateIntegration:
 	                if (!onFinally) {
-	                    onFinally = () => appComponent.current.setAttribute('is-to-integration-process', false);
+	                    onFinally = () => requireRef(appComponent).setProcess({ toIntegration: false });
 	                }
 	                break;
 	            case JOB_TYPE.crowdinSyncSettingsSave:
 	                if (!onFinally) {
-	                    onFinally = () => appComponent.current.setAttribute('is-crowdin-sync-settings-in-progress', false);
+	                    onFinally = () => requireRef(appComponent).setSyncSettingsInProgress('crowdin', false);
 	                }
 	                break;
 	            case JOB_TYPE.integrationSyncSettingsSave:
 	                if (!onFinally) {
-	                    onFinally = () => appComponent.current.setAttribute('is-integration-sync-settings-in-progress', false);
+	                    onFinally = () => requireRef(appComponent).setSyncSettingsInProgress('integration', false);
 	                }
 	                break;
 	        }
@@ -38288,7 +38279,7 @@ Defaulting to \`null\`.`;
 	            showToast(`Select files which will be uploaded to ${name}`);
 	            return;
 	        }
-	        appComponent.current.setAttribute('is-to-integration-process', true);
+	        requireRef(appComponent).setProcess({ toIntegration: true });
 	        const req = {};
 	        Object.keys(files)
 	            .filter((id) => { var _a; return ((_a = crowdinData.current.find((c) => c.id === id)) === null || _a === void 0 ? void 0 : _a.node_type) === FILE_TYPE; })
@@ -38311,7 +38302,7 @@ Defaulting to \`null\`.`;
 	            showToast('Select files to sync');
 	            return;
 	        }
-	        appComponent.current.setAttribute('is-to-crowdin-process', true);
+	        requireRef(appComponent).setProcess({ toCrowdin: true });
 	        const req = {};
 	        Object.keys(files)
 	            .filter((id) => { var _a; return ((_a = crowdinData.current.find((c) => c.id === id)) === null || _a === void 0 ? void 0 : _a.node_type) === FILE_TYPE; })
@@ -38334,7 +38325,7 @@ Defaulting to \`null\`.`;
 	            showToast('Select files to sync');
 	            return;
 	        }
-	        appComponent.current.setAttribute('is-to-integration-process', true);
+	        requireRef(appComponent).setProcess({ toIntegration: true });
 	        const req = files
 	            .filter((f) => f.node_type !== FOLDER_TYPE)
 	            .map((f) => ({ name: f.name, id: f.id, type: f.type, parentId: f.parent_id }));
@@ -38352,6 +38343,7 @@ Defaulting to \`null\`.`;
 	        }
 	    }
 	    function openLanguageModal() {
+	        var _a;
 	        setLanguageModalState((state) => {
 	            var _a, _b;
 	            return ({
@@ -38359,9 +38351,10 @@ Defaulting to \`null\`.`;
 	                action: 'syncToCrowdin',
 	            });
 	        });
-	        openModal(languageModal.current);
+	        (_a = languageModal.current) === null || _a === void 0 ? void 0 : _a.open();
 	    }
 	    function openLanguageModalForCrowdinFiles() {
+	        var _a;
 	        setLanguageModalState((state) => {
 	            var _a, _b;
 	            return ({
@@ -38369,22 +38362,24 @@ Defaulting to \`null\`.`;
 	                action: 'updateCrowdinTargetLanguages',
 	            });
 	        });
-	        openModal(languageModal.current);
+	        (_a = languageModal.current) === null || _a === void 0 ? void 0 : _a.open();
 	    }
 	    async function uploadFilesToCrowdinWithExcludedLanguages() {
+	        var _a;
 	        const selectedLanguages = await languageSelectRef.current.getValue();
-	        closeModal(languageModal.current);
+	        (_a = languageModal.current) === null || _a === void 0 ? void 0 : _a.close();
 	        uploadFilesToCrowdin({ detail: fileToSync.current }, selectedLanguages);
 	    }
 	    async function updateCrowdinFilesTargetLanguages() {
+	        var _a;
 	        const selectedLanguages = await languageSelectRef.current.getValue();
-	        closeModal(languageModal.current);
+	        (_a = languageModal.current) === null || _a === void 0 ? void 0 : _a.close();
 	        const fileIds = Object.keys(crowdinFilesToUpdateTargetLanguages.current).map((id) => parseInt(id, 10));
 	        if (fileIds.length === 0) {
 	            showToast('Select files to update');
 	            return;
 	        }
-	        appComponent.current.setAttribute('is-to-crowdin-process', true);
+	        requireRef(appComponent).setProcess({ toCrowdin: true });
 	        try {
 	            const restParams = await checkOrigin();
 	            const res = await checkResponse(await fetch(`api/crowdin/files-target-languages${restParams}`, {
@@ -49450,8 +49445,10 @@ Defaulting to \`null\`.`;
 	    }
 	    return (jsxRuntimeExports.jsx("div", { className: row.isWarning ? 'mt-1 text-xs text-destructive' : 'mt-1 text-xs text-muted-foreground', children: row.description }));
 	}
-	const PermissionsModal = ({ modalRef, isLoading, permissionUserOptions, selectedUsers, isConfirmVisible, permissionsSummary, hasOrganization, zenModeUrl, saveDisabled, onUsersChange, onSave, }) => {
-	    return (jsxRuntimeExports.jsxs(AppDialog, { ref: modalRef, id: "permissions-modal", title: "Share", description: "Invite people who manage content and give them access to this integration, so they can send new content for translation as soon as it's added.", footer: jsxRuntimeExports.jsx(Button, { id: "confirm-users-btn", disabled: saveDisabled, onClick: onSave, children: "Save" }), children: [jsxRuntimeExports.jsx("div", { className: isLoading ? 'absolute inset-0 z-[4] flex items-center justify-center bg-background/30' : 'hidden', children: jsxRuntimeExports.jsx(Spinner, {}) }), jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx(UsersMultiSelect, { options: permissionUserOptions, value: selectedUsers, disabled: isLoading, onValueChange: onUsersChange }), jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("div", { className: isConfirmVisible ? 'mt-4' : 'hidden', children: jsxRuntimeExports.jsxs(Table, { className: "min-w-[640px] table-fixed", children: [jsxRuntimeExports.jsx(TableHeader, { children: jsxRuntimeExports.jsxs(TableRow, { children: [jsxRuntimeExports.jsx(TableHead, { className: "w-[40%] px-4", children: "Access" }), jsxRuntimeExports.jsx(TableHead, { className: "w-[35%] px-4", children: "Users" }), jsxRuntimeExports.jsx(TableHead, { className: "w-[25%] px-4 text-right", children: "Upcoming changes" })] }) }), jsxRuntimeExports.jsxs(TableBody, { children: [hasOrganization && (jsxRuntimeExports.jsxs(TableRow, { children: [jsxRuntimeExports.jsxs(TableCell, { className: "whitespace-normal px-4 py-3 align-top", children: [jsxRuntimeExports.jsx("p", { className: "m-0 text-sm", children: "Registration in Organization" }), renderPermissionRowDescription(permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.organization)] }), jsxRuntimeExports.jsx(TableCell, { className: "whitespace-normal px-4 py-3 align-top", children: renderPermissionUsers(permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.organization) }), jsxRuntimeExports.jsx(TableCell, { className: "whitespace-normal px-4 py-3 text-right align-top", children: (permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.organization) &&
+	const PermissionsModal = ({ modalRef, isLoading, isCheckingUsers = false, permissionUserOptions, selectedUsers, isConfirmVisible, permissionsSummary, hasOrganization, zenModeUrl, saveDisabled, onUsersChange, onSave, }) => {
+	    return (jsxRuntimeExports.jsxs(AppDialog, { ref: modalRef, id: "permissions-modal", title: "Share", description: "Invite people who manage content and give them access to this integration, so they can send new content for translation as soon as it's added.", footer: jsxRuntimeExports.jsx(Button, { id: "confirm-users-btn", disabled: saveDisabled, onClick: onSave, children: "Save" }), children: [jsxRuntimeExports.jsx("div", { className: isLoading || isCheckingUsers
+	                    ? 'absolute inset-0 z-[4] flex items-center justify-center bg-background/30'
+	                    : 'hidden', children: jsxRuntimeExports.jsx(Spinner, {}) }), jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx(UsersMultiSelect, { options: permissionUserOptions, value: selectedUsers, disabled: isLoading, onValueChange: onUsersChange }), jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("div", { className: isConfirmVisible ? 'mt-4' : 'hidden', children: jsxRuntimeExports.jsxs(Table, { className: "min-w-[640px] table-fixed", children: [jsxRuntimeExports.jsx(TableHeader, { children: jsxRuntimeExports.jsxs(TableRow, { children: [jsxRuntimeExports.jsx(TableHead, { className: "w-[40%] px-4", children: "Access" }), jsxRuntimeExports.jsx(TableHead, { className: "w-[35%] px-4", children: "Users" }), jsxRuntimeExports.jsx(TableHead, { className: "w-[25%] px-4 text-right", children: "Upcoming changes" })] }) }), jsxRuntimeExports.jsxs(TableBody, { children: [hasOrganization && (jsxRuntimeExports.jsxs(TableRow, { children: [jsxRuntimeExports.jsxs(TableCell, { className: "whitespace-normal px-4 py-3 align-top", children: [jsxRuntimeExports.jsx("p", { className: "m-0 text-sm", children: "Registration in Organization" }), renderPermissionRowDescription(permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.organization)] }), jsxRuntimeExports.jsx(TableCell, { className: "whitespace-normal px-4 py-3 align-top", children: renderPermissionUsers(permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.organization) }), jsxRuntimeExports.jsx(TableCell, { className: "whitespace-normal px-4 py-3 text-right align-top", children: (permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.organization) &&
 	                                                                renderPermissionStatus(permissionsSummary.organization.status) })] })), jsxRuntimeExports.jsxs(TableRow, { children: [jsxRuntimeExports.jsx(TableCell, { className: "whitespace-normal px-4 py-3 align-top", children: jsxRuntimeExports.jsx("p", { className: "m-0 text-sm", children: "Project Manager Access" }) }), jsxRuntimeExports.jsx(TableCell, { className: "whitespace-normal px-4 py-3 align-top", children: renderPermissionUsers(permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.project) }), jsxRuntimeExports.jsx(TableCell, { className: "whitespace-normal px-4 py-3 text-right align-top", children: (permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.project) &&
 	                                                                renderPermissionStatus(permissionsSummary.project.status) })] }), jsxRuntimeExports.jsxs(TableRow, { children: [jsxRuntimeExports.jsxs(TableCell, { className: "whitespace-normal px-4 py-3 align-top", children: [jsxRuntimeExports.jsx("p", { className: "m-0 text-sm", children: "Application Visibility Access" }), renderPermissionRowDescription(permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.applicationSettings)] }), jsxRuntimeExports.jsx(TableCell, { className: "whitespace-normal px-4 py-3 align-top", children: renderPermissionUsers(permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.applicationSettings) }), jsxRuntimeExports.jsx(TableCell, { className: "whitespace-normal px-4 py-3 text-right align-top", children: (permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.applicationSettings) &&
 	                                                                renderPermissionStatus(permissionsSummary.applicationSettings.status) })] }), jsxRuntimeExports.jsxs(TableRow, { children: [jsxRuntimeExports.jsxs(TableCell, { className: "whitespace-normal px-4 py-3 align-top", children: [jsxRuntimeExports.jsx("p", { className: "m-0 text-sm", children: "Access to the Integration" }), jsxRuntimeExports.jsx("div", { className: "mt-1 text-xs text-muted-foreground", children: "This provides access to sync files and modify the current integration settings." })] }), jsxRuntimeExports.jsx(TableCell, { className: "whitespace-normal px-4 py-3 align-top", children: renderPermissionUsers(permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.applicationCredentials) }), jsxRuntimeExports.jsx(TableCell, { className: "whitespace-normal px-4 py-3 text-right align-top", children: (permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.applicationCredentials) &&
@@ -49492,15 +49489,13 @@ Defaulting to \`null\`.`;
 	            return null;
 	    }
 	}
-	const DisconnectSection = ({ name, isOwner, hasAutoSync, isDisconnecting, onDisconnect, }) => {
+	const DisconnectSection = ({ name, isOwner, owner, hasAutoSync, isDisconnecting, onDisconnect, }) => {
 	    const [isOpen, setIsOpen] = reactExports.useState(false);
-	    return (jsxRuntimeExports.jsxs("div", { id: "disconnect-section", className: "flex flex-col gap-4 rounded-lg border border-destructive/20 bg-destructive/5 p-4 sm:flex-row sm:items-center", children: [jsxRuntimeExports.jsx(TriangleAlert, { className: "hidden size-5 shrink-0 self-start text-destructive sm:block" }), jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [jsxRuntimeExports.jsx("p", { className: "m-0 text-sm font-medium text-destructive", children: "Disconnect integration" }), jsxRuntimeExports.jsx("p", { className: "m-0 text-sm text-muted-foreground", children: isOwner
-	                            ? `Disconnects ${name} and removes its saved settings for this project.${hasAutoSync ? ' Auto Sync will stop.' : ''}`
-	                            : 'Only the integration owner can disconnect it.' })] }), jsxRuntimeExports.jsxs(Dialog, { open: isOpen, onOpenChange: (open) => !isDisconnecting && setIsOpen(open), children: [jsxRuntimeExports.jsx(DialogTrigger, { asChild: true, children: jsxRuntimeExports.jsx(Button, { id: "disconnect-btn", variant: "destructive", disabled: !isOwner, className: "shrink-0 self-start sm:self-auto", children: "Disconnect" }) }), jsxRuntimeExports.jsxs(DialogContent, { role: "alertdialog", showCloseButton: false, className: "sm:max-w-md", children: [jsxRuntimeExports.jsxs(DialogHeader, { className: "items-center text-center sm:items-start sm:text-left", children: [jsxRuntimeExports.jsx("div", { className: "mb-2 flex size-10 items-center justify-center rounded-full bg-destructive/10", children: jsxRuntimeExports.jsx(TriangleAlert, { className: "size-5 text-destructive" }) }), jsxRuntimeExports.jsxs(DialogTitle, { children: ["Disconnect ", name, "?"] }), jsxRuntimeExports.jsxs(DialogDescription, { children: [name, " settings", hasAutoSync ? ', Auto Sync selections,' : '', " and logs for this project will be deleted. To use ", name, " again, you'll need to reconnect and set it up again."] })] }), jsxRuntimeExports.jsxs(DialogFooter, { children: [jsxRuntimeExports.jsx(Button, { variant: "outline", disabled: isDisconnecting, onClick: () => setIsOpen(false), children: "Cancel" }), jsxRuntimeExports.jsxs(Button, { id: "disconnect-confirm-btn", variant: "destructive", disabled: isDisconnecting, onClick: onDisconnect, children: [isDisconnecting && jsxRuntimeExports.jsx(Spinner, {}), "Disconnect"] })] })] })] })] }));
+	    return (jsxRuntimeExports.jsxs("div", { id: "disconnect-section", className: "flex flex-col gap-4 rounded-lg border border-destructive/20 bg-destructive/5 p-4 sm:flex-row sm:items-center", children: [jsxRuntimeExports.jsx(TriangleAlert, { className: "hidden size-5 shrink-0 self-start text-destructive sm:block" }), jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [jsxRuntimeExports.jsx("p", { className: "m-0 text-sm font-medium text-destructive", children: "Disconnect integration" }), jsxRuntimeExports.jsx("p", { className: "m-0 text-sm text-muted-foreground", children: isOwner ? (`Disconnects ${name} and removes its saved settings for this project.${hasAutoSync ? ' Auto Sync will stop.' : ''}`) : owner ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: ["Only the integration owner (", jsxRuntimeExports.jsx(Button, { type: "button", variant: "link", id: "integration-owner-link", className: "h-auto p-0 align-baseline font-normal", onClick: () => contactUser(owner.id), children: owner.name }), ") can disconnect it."] })) : ('Only the integration owner can disconnect it.') })] }), jsxRuntimeExports.jsxs(Dialog, { open: isOpen, onOpenChange: (open) => !isDisconnecting && setIsOpen(open), children: [jsxRuntimeExports.jsx(DialogTrigger, { asChild: true, children: jsxRuntimeExports.jsx(Button, { id: "disconnect-btn", variant: "destructive", disabled: !isOwner, className: "shrink-0 self-start sm:self-auto", children: "Disconnect" }) }), jsxRuntimeExports.jsxs(DialogContent, { role: "alertdialog", showCloseButton: false, className: "sm:max-w-md", children: [jsxRuntimeExports.jsxs(DialogHeader, { className: "items-center text-center sm:items-start sm:text-left", children: [jsxRuntimeExports.jsx("div", { className: "mb-2 flex size-10 items-center justify-center rounded-full bg-destructive/10", children: jsxRuntimeExports.jsx(TriangleAlert, { className: "size-5 text-destructive" }) }), jsxRuntimeExports.jsxs(DialogTitle, { children: ["Disconnect ", name, "?"] }), jsxRuntimeExports.jsxs(DialogDescription, { children: [name, " settings", hasAutoSync ? ', Auto Sync selections,' : '', " and logs for this project will be deleted. To use ", name, " again, you'll need to reconnect and set it up again."] })] }), jsxRuntimeExports.jsxs(DialogFooter, { children: [jsxRuntimeExports.jsx(Button, { variant: "outline", disabled: isDisconnecting, onClick: () => setIsOpen(false), children: "Cancel" }), jsxRuntimeExports.jsxs(Button, { id: "disconnect-confirm-btn", variant: "destructive", disabled: isDisconnecting, onClick: onDisconnect, children: [isDisconnecting && jsxRuntimeExports.jsx(Spinner, {}), "Disconnect"] })] })] })] })] }));
 	};
-	const SettingsModal = ({ modalRef, isLoading, configurationFields, isSaveDisabled, settingsFieldChange, registerSettingsField, fieldErrors, onSave, name, isOwner, hasAutoSync, isDisconnecting, onDisconnect, }) => {
+	const SettingsModal = ({ modalRef, isLoading, configurationFields, isSaveDisabled, settingsFieldChange, registerSettingsField, fieldErrors, onSave, name, isOwner, owner, hasAutoSync, isDisconnecting, onDisconnect, }) => {
 	    const hasFields = configurationFields.length > 0;
-	    const disconnectSection = (jsxRuntimeExports.jsx(DisconnectSection, { name: name, isOwner: isOwner, hasAutoSync: hasAutoSync, isDisconnecting: isDisconnecting, onDisconnect: onDisconnect }));
+	    const disconnectSection = (jsxRuntimeExports.jsx(DisconnectSection, { name: name, isOwner: isOwner, owner: owner, hasAutoSync: hasAutoSync, isDisconnecting: isDisconnecting, onDisconnect: onDisconnect }));
 	    const contentRef = reactExports.useRef(null);
 	    const observerRef = reactExports.useRef(null);
 	    const [contentHeight, setContentHeight] = reactExports.useState();
@@ -49596,7 +49591,7 @@ Defaulting to \`null\`.`;
 	const USER_ERRORS_PER_PAGE = 10;
 	const USER_ERRORS_SEARCH_DEBOUNCE = 300;
 	const MainPage = (props) => {
-	    const { name, userId, notice, checkSubscription, isManager, isOwner, infoModal, configurationFields, config: configString, syncNewElements, withCronSync, webhooks, integrationOneLevelFetching, integrationSearchListener, excludedTargetLanguages, filtering, hasOrganization, zenModeUrl, asyncProgress = { checkInterval: 3000 }, reloadOnConfigSave, progressiveCrowdinFilesLoading, integrationButtonMenuItems, crowdinButtonMenuItems, } = props;
+	    const { name, userId, notice, checkSubscription, isManager, isOwner, owner, infoModal, configurationFields, config: configString, syncNewElements, withCronSync, webhooks, integrationOneLevelFetching, integrationSearchListener, excludedTargetLanguages, filtering, hasOrganization, zenModeUrl, asyncProgress = { checkInterval: 3000 }, reloadOnConfigSave, progressiveCrowdinFilesLoading, integrationButtonMenuItems, crowdinButtonMenuItems, } = props;
 	    const config = reactExports.useRef(configString ? JSON.parse(configString.replace(/\\n/g, '\\\\n')) : {});
 	    const appComponent = reactExports.useRef(null);
 	    const asyncProgressRef = reactExports.useRef(null);
@@ -49663,13 +49658,12 @@ Defaulting to \`null\`.`;
 	    });
 	    reactExports.useEffect(() => {
 	        const handleKeydown = (event) => {
+	            var _a, _b, _c, _d;
 	            if (event.keyCode === 27) {
-	                closeModal(permissionsModalRef.current);
-	                closeModal(infoModalRef.current);
-	                closeModal(scheduleModalRef.current);
-	                if (syncOps.languageModalRef.current) {
-	                    closeModal(syncOps.languageModalRef.current);
-	                }
+	                (_a = permissionsModalRef.current) === null || _a === void 0 ? void 0 : _a.close();
+	                (_b = infoModalRef.current) === null || _b === void 0 ? void 0 : _b.close();
+	                (_c = scheduleModalRef.current) === null || _c === void 0 ? void 0 : _c.close();
+	                (_d = syncOps.languageModalRef.current) === null || _d === void 0 ? void 0 : _d.close();
 	            }
 	        };
 	        document.body.addEventListener('keydown', handleKeydown);
@@ -49683,10 +49677,11 @@ Defaulting to \`null\`.`;
 	    // A 402 from any API call means the subscription lapsed: show the subscribe modal.
 	    reactExports.useEffect(() => {
 	        setPaymentRequiredHandler((subscribeLink) => {
+	            var _a;
 	            if (subscribeLink) {
 	                subscriptionLink.current = subscribeLink;
 	            }
-	            openModal(subscriptionModal.current);
+	            (_a = subscriptionModal.current) === null || _a === void 0 ? void 0 : _a.open();
 	        });
 	        return () => setPaymentRequiredHandler(null);
 	    }, []);
@@ -49778,10 +49773,11 @@ Defaulting to \`null\`.`;
 	        loadUserErrors({ currentPage, rowsPerPage, searchText, isSortedAsc });
 	    }
 	    async function openUserErrorDetail(item) {
+	        var _a, _b;
 	        // the list response carries no `data` - the heavy payload is loaded for this record only
 	        const requestId = ++userErrorDetailRequestId.current;
 	        setSelectedUserError({ ...item, data: null });
-	        openModal(userErrorDetailModalRef.current);
+	        (_a = userErrorDetailModalRef.current) === null || _a === void 0 ? void 0 : _a.open();
 	        try {
 	            const restParams = await checkOrigin();
 	            const res = await checkResponse(await fetch(`api/user-errors/${item.id}` + restParams));
@@ -49793,7 +49789,7 @@ Defaulting to \`null\`.`;
 	                return;
 	            }
 	            catchRejection(e, "Can't fetch error log details");
-	            closeModal(userErrorDetailModalRef.current);
+	            (_b = userErrorDetailModalRef.current) === null || _b === void 0 ? void 0 : _b.close();
 	            setSelectedUserError(null);
 	        }
 	    }
@@ -49810,10 +49806,11 @@ Defaulting to \`null\`.`;
 	    function showIntegration() {
 	        setIsErrorLogsVisible(false);
 	    }
-	    return (jsxRuntimeExports.jsxs("div", { className: cn('flex flex-col', isErrorLogsVisible ? 'min-h-full' : 'h-full'), children: [jsxRuntimeExports.jsxs("div", { className: "mx-auto flex min-h-0 w-full max-w-[1420px] flex-1 flex-col px-6 py-4", children: [jsxRuntimeExports.jsx(TopBar, { notice: notice, isNoticeVisible: isNoticeVisible, checkSubscription: checkSubscription, subscriptionInfo: subscriptionInfo, isErrorLogsVisible: isErrorLogsVisible, isManager: isManager, infoModal: infoModal, onCloseNotice: closeAlert, onShowIntegration: showIntegration, onShowErrorLogs: showErrorLogs, onShowPermissions: permissions.showPermissionsDialog, onOpenInfoModal: () => openModal(infoModalRef.current), onOpenSettings: () => {
-	                            openModal(settingsModalRef.current);
+	    return (jsxRuntimeExports.jsxs("div", { className: cn('flex flex-col', isErrorLogsVisible ? 'min-h-full' : 'h-full'), children: [jsxRuntimeExports.jsxs("div", { className: "mx-auto flex min-h-0 w-full max-w-[1420px] flex-1 flex-col px-6 py-4", children: [jsxRuntimeExports.jsx(TopBar, { notice: notice, isNoticeVisible: isNoticeVisible, checkSubscription: checkSubscription, subscriptionInfo: subscriptionInfo, isErrorLogsVisible: isErrorLogsVisible, isManager: isManager, infoModal: infoModal, onCloseNotice: closeAlert, onShowIntegration: showIntegration, onShowErrorLogs: showErrorLogs, onShowPermissions: permissions.showPermissionsDialog, onOpenInfoModal: () => { var _a; return (_a = infoModalRef.current) === null || _a === void 0 ? void 0 : _a.open(); }, onOpenSettings: () => {
+	                            var _a;
+	                            (_a = settingsModalRef.current) === null || _a === void 0 ? void 0 : _a.open();
 	                            setTimeout(settings.fillSettingsForm, 0);
-	                        } }), jsxRuntimeExports.jsx(IntegrationView, { appComponentRef: appComponent, userErrors: userErrors, isUserErrorsLoading: isUserErrorsLoading, userErrorsTotal: userErrorsTotal, userErrorsCurrentPage: userErrorsCurrentPage, userErrorsRowsPerPage: userErrorsRowsPerPage, userErrorsSearchText: userErrorsSearchText, userErrorsIsSortedAsc: userErrorsIsSortedAsc, onSelectUserError: openUserErrorDetail, onUserErrorsOptionsChange: onUserErrorsOptionsChange, name: name, isErrorLogsVisible: isErrorLogsVisible, syncNewElements: syncNewElements, withCronSync: withCronSync, webhooks: webhooks, integrationOneLevelFetching: integrationOneLevelFetching, integrationSearchListener: integrationSearchListener, filtering: filtering, integrationButtonMenuItems: integrationButtonMenuItems, crowdinButtonMenuItems: crowdinButtonMenuItems, onRefreshFilesList: syncOps.handleRefreshFilesList, onFolderToggle: syncOps.handleFolderToggle, onUploadFilesToCrowdin: (detail) => syncOps.uploadFilesToCrowdin({ detail }), onUploadFilesToIntegration: (detail) => syncOps.uploadFilesToIntegration({ detail }), onLoadMore: syncOps.handleLoadMore, onIntegrationFilterChange: syncOps.handleIntegrationFilterChange, onIntegrationScheduleSync: (detail) => schedule.setIntegrationScheduleSync({ detail }), onCrowdinScheduleSync: (detail) => schedule.setCrowdinScheduleSync({ detail }), onIntegrationDisableSync: (detail) => schedule.disableIntegrationSync({ detail }), onCrowdinDisableSync: (detail) => schedule.disableCrowdinSync({ detail }) })] }), jsxRuntimeExports.jsx(Toaster, {}), jsxRuntimeExports.jsx(AsyncProgress, { ref: asyncProgressRef, onCancelJob: syncOps.cancelJob }), jsxRuntimeExports.jsx(SubscriptionModal, { modalRef: subscriptionModal, subscriptionLink: subscriptionLink, name: name, isDisconnecting: isDisconnecting, onLogout: integrationLogout }), jsxRuntimeExports.jsx(PermissionsModal, { modalRef: permissionsModalRef, isLoading: permissions.isLoading, permissionUserOptions: permissions.permissionUserOptions, selectedUsers: permissions.permissionsSelectedUsers, isConfirmVisible: permissions.isPermissionsConfirmVisible, permissionsSummary: permissions.permissionsSummary, hasOrganization: hasOrganization, zenModeUrl: zenModeUrl, saveDisabled: !permissions.isPermissionsLoaded, onUsersChange: permissions.checkUsers, onSave: permissions.inviteUsers }), excludedTargetLanguages && (jsxRuntimeExports.jsx(ExcludedLanguagesModal, { modalRef: syncOps.languageModalRef, languageSelectRef: syncOps.languageSelectRef, languageModalState: syncOps.languageModalState, onUpdateTargetLanguages: syncOps.updateCrowdinFilesTargetLanguages, onSyncToCrowdin: syncOps.uploadFilesToCrowdinWithExcludedLanguages })), infoModal && jsxRuntimeExports.jsx(InfoModal, { modalRef: infoModalRef, infoModal: infoModal }), jsxRuntimeExports.jsx(SettingsModal, { modalRef: settingsModalRef, isLoading: settings.isLoading, configurationFields: configurationFields !== null && configurationFields !== void 0 ? configurationFields : [], isSaveDisabled: settings.isSettingsSaveDisabled, settingsFieldChange: settings.settingsFieldChange, registerSettingsField: settings.registerSettingsField, fieldErrors: settings.fieldErrors, onSave: settings.saveSettings, name: name, isOwner: isOwner, hasAutoSync: !!(withCronSync || webhooks), isDisconnecting: isDisconnecting, onDisconnect: integrationLogout }), ((syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.crowdin) || (syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.integration)) && (jsxRuntimeExports.jsx(ScheduleModal, { modalRef: scheduleModalRef, selectedFilesCheckboxRef: schedule.selectedFilesCheckboxRef, allFolderFilesCheckboxRef: schedule.allFolderFilesCheckboxRef, newFilesCheckboxRef: schedule.newFilesCheckboxRef, scheduleModalState: schedule.scheduleModalState, isSaveDisabled: schedule.isScheduleSaveDisabled, onChangeOptions: schedule.onChangeAutoSynchronizationOptions, onSave: schedule.saveScheduleSync })), jsxRuntimeExports.jsx(UserErrorDetailModal, { modalRef: userErrorDetailModalRef, selectedUserError: selectedUserError, onClose: onUserErrorDetailClose })] }));
+	                        } }), jsxRuntimeExports.jsx(IntegrationView, { appComponentRef: appComponent, userErrors: userErrors, isUserErrorsLoading: isUserErrorsLoading, userErrorsTotal: userErrorsTotal, userErrorsCurrentPage: userErrorsCurrentPage, userErrorsRowsPerPage: userErrorsRowsPerPage, userErrorsSearchText: userErrorsSearchText, userErrorsIsSortedAsc: userErrorsIsSortedAsc, onSelectUserError: openUserErrorDetail, onUserErrorsOptionsChange: onUserErrorsOptionsChange, name: name, isErrorLogsVisible: isErrorLogsVisible, syncNewElements: syncNewElements, withCronSync: withCronSync, webhooks: webhooks, integrationOneLevelFetching: integrationOneLevelFetching, integrationSearchListener: integrationSearchListener, filtering: filtering, integrationButtonMenuItems: integrationButtonMenuItems, crowdinButtonMenuItems: crowdinButtonMenuItems, onRefreshFilesList: syncOps.handleRefreshFilesList, onFolderToggle: syncOps.handleFolderToggle, onUploadFilesToCrowdin: (detail) => syncOps.uploadFilesToCrowdin({ detail }), onUploadFilesToIntegration: (detail) => syncOps.uploadFilesToIntegration({ detail }), onLoadMore: syncOps.handleLoadMore, onIntegrationFilterChange: syncOps.handleIntegrationFilterChange, onIntegrationScheduleSync: (detail) => schedule.setIntegrationScheduleSync({ detail }), onCrowdinScheduleSync: (detail) => schedule.setCrowdinScheduleSync({ detail }), onIntegrationDisableSync: (detail) => schedule.disableIntegrationSync({ detail }), onCrowdinDisableSync: (detail) => schedule.disableCrowdinSync({ detail }) })] }), jsxRuntimeExports.jsx(Toaster, {}), jsxRuntimeExports.jsx(AsyncProgress, { ref: asyncProgressRef, onCancelJob: syncOps.cancelJob }), jsxRuntimeExports.jsx(SubscriptionModal, { modalRef: subscriptionModal, subscriptionLink: subscriptionLink, name: name, isDisconnecting: isDisconnecting, onLogout: integrationLogout }), jsxRuntimeExports.jsx(PermissionsModal, { modalRef: permissionsModalRef, isLoading: permissions.isLoading, isCheckingUsers: permissions.isCheckingUsers, permissionUserOptions: permissions.permissionUserOptions, selectedUsers: permissions.permissionsSelectedUsers, isConfirmVisible: permissions.isPermissionsConfirmVisible, permissionsSummary: permissions.permissionsSummary, hasOrganization: hasOrganization, zenModeUrl: zenModeUrl, saveDisabled: !permissions.isPermissionsLoaded, onUsersChange: permissions.checkUsers, onSave: permissions.inviteUsers }), excludedTargetLanguages && (jsxRuntimeExports.jsx(ExcludedLanguagesModal, { modalRef: syncOps.languageModalRef, languageSelectRef: syncOps.languageSelectRef, languageModalState: syncOps.languageModalState, onUpdateTargetLanguages: syncOps.updateCrowdinFilesTargetLanguages, onSyncToCrowdin: syncOps.uploadFilesToCrowdinWithExcludedLanguages })), infoModal && jsxRuntimeExports.jsx(InfoModal, { modalRef: infoModalRef, infoModal: infoModal }), jsxRuntimeExports.jsx(SettingsModal, { modalRef: settingsModalRef, isLoading: settings.isLoading, configurationFields: configurationFields !== null && configurationFields !== void 0 ? configurationFields : [], isSaveDisabled: settings.isSettingsSaveDisabled, settingsFieldChange: settings.settingsFieldChange, registerSettingsField: settings.registerSettingsField, fieldErrors: settings.fieldErrors, onSave: settings.saveSettings, name: name, isOwner: isOwner, owner: owner, hasAutoSync: !!(withCronSync || webhooks), isDisconnecting: isDisconnecting, onDisconnect: integrationLogout }), ((syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.crowdin) || (syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.integration)) && (jsxRuntimeExports.jsx(ScheduleModal, { modalRef: scheduleModalRef, selectedFilesCheckboxRef: schedule.selectedFilesCheckboxRef, allFolderFilesCheckboxRef: schedule.allFolderFilesCheckboxRef, newFilesCheckboxRef: schedule.newFilesCheckboxRef, scheduleModalState: schedule.scheduleModalState, isSaveDisabled: schedule.isScheduleSaveDisabled, onChangeOptions: schedule.onChangeAutoSynchronizationOptions, onSave: schedule.saveScheduleSync })), jsxRuntimeExports.jsx(UserErrorDetailModal, { modalRef: userErrorDetailModalRef, selectedUserError: selectedUserError, onClose: onUserErrorDetailClose })] }));
 	};
 
 	initializeCrowdinIframeContext();