tycho-components 0.19.17 → 0.21.1

package/dist/configs/Localization.js

@@ -2,67 +2,62 @@ import i18n from 'i18next';
 import languageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 import { BaseTexts } from './localization/BaseTexts';
-import { CommentsTexts } from './localization/CommentsTexts';
 import { CommonTexts } from './localization/CommonTexts';
 import { ConsentTexts } from './localization/ConsentTexts';
 import { HeaderAppTexts } from './localization/HeaderAppTexts';
 import { HeaderTexts } from './localization/HeaderTexts';
 import { HelpTexts } from './localization/HelpTexts';
+import { UploadTexts } from './localization/UploadTexts';
+import { CommentsTexts } from './localization/CommentsTexts';
 import { ParticipantsTexts } from './localization/ParticipantsTexts';
 import { SentenceTexts } from './localization/SentenceTexts';
 import { TreeTexts } from './localization/TreeTexts';
-import { UploadTexts } from './localization/UploadTexts';
 import { ParametersTexts } from './localization/ParametersTexts';
-export const commonResources = {
-    en: {
-        base: BaseTexts.en,
-        comments: CommentsTexts.en,
-        common: CommonTexts.en,
-        header: HeaderTexts.en,
-        'header-app': HeaderAppTexts.en,
-        participants: ParticipantsTexts.en,
-        tree: TreeTexts.en,
-        sentence: SentenceTexts.en,
-        upload: UploadTexts.en,
-        help: HelpTexts.en,
-        consent: ConsentTexts.en,
-        parameters: ParametersTexts.en,
-    },
-    'pt-BR': {
-        base: BaseTexts['pt-BR'],
-        comments: CommentsTexts['pt-BR'],
-        common: CommonTexts['pt-BR'],
-        header: HeaderTexts['pt-BR'],
-        'header-app': HeaderAppTexts['pt-BR'],
-        participants: ParticipantsTexts['pt-BR'],
-        sentence: SentenceTexts['pt-BR'],
-        tree: TreeTexts['pt-BR'],
-        upload: UploadTexts['pt-BR'],
-        help: HelpTexts['pt-BR'],
-        consent: ConsentTexts['pt-BR'],
-        parameters: ParametersTexts['pt-BR'],
-    },
-    it: {
-        base: BaseTexts.it,
-        comments: CommentsTexts.it,
-        common: CommonTexts.it,
-        header: HeaderTexts.it,
-        'header-app': HeaderAppTexts.it,
-        participants: ParticipantsTexts.it,
-        sentence: SentenceTexts.it,
-        tree: TreeTexts.it,
-        upload: UploadTexts.it,
-        help: HelpTexts.it,
-        consent: ConsentTexts.it,
-        parameters: ParametersTexts.it,
-    },
+import { SentenceSplitTexts } from '../features/SentenceSplit/localization/SentenceSplitTexts';
+function buildResources(namespaces) {
+    return {
+        en: Object.fromEntries(Object.entries(namespaces).map(([key, texts]) => [key, texts.en])),
+        'pt-BR': Object.fromEntries(Object.entries(namespaces).map(([key, texts]) => [key, texts['pt-BR']])),
+        it: Object.fromEntries(Object.entries(namespaces).map(([key, texts]) => [key, texts.it])),
+    };
+}
+const CORE_NAMESPACES = {
+    base: BaseTexts,
+    common: CommonTexts,
+    header: HeaderTexts,
+    'header-app': HeaderAppTexts,
+    upload: UploadTexts,
+    help: HelpTexts,
+    consent: ConsentTexts,
+};
+const FEATURE_NAMESPACES = {
+    comments: CommentsTexts,
+    participants: ParticipantsTexts,
+    tree: TreeTexts,
+    sentence: SentenceTexts,
+    parameters: ParametersTexts,
+    sentenceSplit: SentenceSplitTexts,
 };
-export default function commonLocalization() {
+export const commonResources = buildResources(CORE_NAMESPACES);
+export const featureResources = buildResources(FEATURE_NAMESPACES);
+export function mergeResources(core = commonResources, features = featureResources) {
+    const locales = ['en', 'pt-BR', 'it'];
+    return Object.fromEntries(locales.map((locale) => [
+        locale,
+        {
+            ...core[locale],
+            ...features[locale],
+        },
+    ]));
+}
+export function commonLocalization(includeFeatures = true) {
     i18n
         .use(initReactI18next)
         .use(languageDetector)
         .init({
-        resources: commonResources,
+        resources: includeFeatures
+            ? mergeResources()
+            : commonResources,
         fallbackLng: 'en',
         defaultNS: 'common',
         interpolation: {

package/dist/configs/index.d.ts

@@ -0,0 +1,27 @@
+export { CommonProvider } from './CommonContext';
+export { default as CommonContext } from './CommonContext';
+export { default as CookieStorage } from './CookieStorage';
+export { commonResources, featureResources, mergeResources, commonLocalization, } from './Localization';
+export { default as LexiconListService } from './services/LexiconListService';
+export { default as ParserListService } from './services/ParserListService';
+export type { Corpus, CorpusRequest, Github } from './types/Corpus';
+export { CorpusStatusNames } from './types/CorpusStatus';
+export type { CorpusStatus } from './types/CorpusStatus';
+export { DocumentStatusNames } from './types/Document';
+export type { DocumentStatus, default as Document } from './types/Document';
+export { CorpusImageTypeNames } from './types/CorpusImage';
+export type { CorpusImage, CorpusImageType } from './types/CorpusImage';
+export { EditionTiers } from './types/EditionTiers';
+export type { Parameter, ParameterType } from './types/Parameter';
+export { SentenceStatusNames } from './types/SentenceStatus';
+export type { SentenceStatus } from './types/SentenceStatus';
+export type { Mark, Break, Format as SentenceFormat, SentenceTier, Translation, } from './types/Sentence';
+export type { default as Sentence } from './types/Sentence';
+export type { Chunk, Edition, Format, Morpheme, Split, Struct, Token, ConlluToken, } from './types/Struct';
+export type { CytoscapeTree, Tree } from './types/Tree';
+export { UserStatusNames } from './types/User';
+export type { User, UserStatus } from './types/User';
+export { useCorpusUtils } from './useCorpusUtils';
+export { useLoggedUtils } from './useLoggedUtils';
+export { useMessageUtils } from './useMessageUtils';
+export { useTourUtils } from './useTourUtils';

package/dist/configs/index.js

@@ -0,0 +1,16 @@
+export { CommonProvider } from './CommonContext';
+export { default as CommonContext } from './CommonContext';
+export { default as CookieStorage } from './CookieStorage';
+export { commonResources, featureResources, mergeResources, commonLocalization, } from './Localization';
+export { default as LexiconListService } from './services/LexiconListService';
+export { default as ParserListService } from './services/ParserListService';
+export { CorpusStatusNames } from './types/CorpusStatus';
+export { DocumentStatusNames } from './types/Document';
+export { CorpusImageTypeNames } from './types/CorpusImage';
+export { EditionTiers } from './types/EditionTiers';
+export { SentenceStatusNames } from './types/SentenceStatus';
+export { UserStatusNames } from './types/User';
+export { useCorpusUtils } from './useCorpusUtils';
+export { useLoggedUtils } from './useLoggedUtils';
+export { useMessageUtils } from './useMessageUtils';
+export { useTourUtils } from './useTourUtils';

package/dist/configs/mock/MockStructs.d.ts

@@ -1,4 +1,4 @@
-import { Struct } from '../../configs/types/Struct';
+import { Struct } from '../types/Struct';
 export declare const structWithMorphemes: Struct;
 export declare const structNotParsed: Struct;
 export declare const structWithEditionTiers: Struct;

package/dist/configs/store/actions.d.ts

@@ -1,4 +1,4 @@
-import ToastMessage from '../../AppToast/ToastMessage';
+import ToastMessage from '../../common/AppToast/ToastMessage';
 import { Corpus } from '../types/Corpus';
 import { User } from '../types/User';
 import { StoreAction } from './types';

package/dist/configs/store/store.js

@@ -1,4 +1,4 @@
-import { EMPTY_TOAST } from '../../AppToast/ToastMessage';
+import { EMPTY_TOAST } from '../../common/AppToast/ToastMessage';
 const store = {
     corpus: undefined,
     logged: undefined,

package/dist/configs/store/types.d.ts

@@ -1,4 +1,4 @@
-import ToastMessage from '../../AppToast/ToastMessage';
+import ToastMessage from '../../common/AppToast/ToastMessage';
 import { Corpus } from '../types/Corpus';
 import { User } from '../types/User';
 export type UserStore = {

package/dist/configs/types/Document.d.ts

@@ -1,4 +1,4 @@
-import Participant from '../../Participants/types/Participant';
+import Participant from '../../features/Participants/types/Participant';
 import { PlatformTools } from '../../functions/ToolsUtils';
 export type DocumentStatus = 'EDITING' | 'EDITED' | 'SYNTACTIC' | 'COMPLETED';
 export declare const DocumentStatusNames: {

package/dist/configs/types/Sentence.d.ts

@@ -2,7 +2,7 @@ import { Token } from "./Struct";
 import { Edition } from "./Struct";
 import { Struct } from "./Struct";
 import { SentenceStatus } from "./SentenceStatus";
-import { UploadedFile } from "../../AppDropzone/UploadedFile";
+import { UploadedFile } from "../../common/AppDropzone/UploadedFile";
 export type Mark = {
     id: string;
     tokens: Token[];

package/dist/cytoscape-context-menus.d.ts

@@ -2,4 +2,4 @@
  * Cytoscape context menus extension.
  * Use: import contextMenus from 'tycho-components/cytoscape-context-menus'
  */
-export { contextMenus as default } from './CytoscapeMenu/cytoscape-context-menus';
+export { contextMenus as default } from './features/CytoscapeMenu/cytoscape-context-menus';

package/dist/cytoscape-context-menus.js

@@ -2,4 +2,4 @@
  * Cytoscape context menus extension.
  * Use: import contextMenus from 'tycho-components/cytoscape-context-menus'
  */
-export { contextMenus as default } from './CytoscapeMenu/cytoscape-context-menus';
+export { contextMenus as default } from './features/CytoscapeMenu/cytoscape-context-menus';

package/dist/{Comments → features/Comments}/CommentAdd.d.ts

@@ -1,4 +1,4 @@
-import { User } from '../configs/types/User';
+import { User } from '../../configs/types/User';
 import './style.scss';
 import { Comment } from './types/Comment';
 type Props = {

package/dist/{Comments → features/Comments}/CommentAdd.js

@@ -4,11 +4,11 @@ import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { Button, SelectField, TextField } from 'tycho-storybook';
 import * as yup from 'yup';
-import { useMessageUtils } from '../configs/useMessageUtils';
-import FormUtils from '../functions/FormUtils';
+import { useMessageUtils } from '../../configs/useMessageUtils';
+import FormUtils from '../../functions/FormUtils';
 import './style.scss';
 import { EMPTY_COMMENT_REQUEST, } from './types/Comment';
-import CommentService from './types/CommentService';
+import CommentService from './CommentService';
 export default function CommentAdd({ uid, mode, users, references, keywords, comment, reply, onClose, onChange, }) {
     const { t } = useTranslation('comments');
     const { isLoading, dispatchLoading } = useMessageUtils();

package/dist/{Comments → features/Comments}/CommentInfo.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Avatar, IconButton } from 'tycho-storybook';
-import CommonContext from '../configs/CommonContext';
-import DateUtils from '../functions/DateUtils';
+import CommonContext from '../../configs/CommonContext';
+import DateUtils from '../../functions/DateUtils';
 import './style.scss';
-import CommentService from './types/CommentService';
+import CommentService from './CommentService';
 export default function CommentInfo({ comment, onRemove, onUpdate, onEdit, onReply, }) {
     const { t } = useTranslation('comments');
     const { state } = useContext(CommonContext);

package/dist/{Comments/types → features/Comments}/CommentService.d.ts

@@ -1,5 +1,5 @@
 import { User } from '../../configs/types/User';
-import { Comment, CommentRequest } from './Comment';
+import { Comment, CommentRequest } from './types/Comment';
 declare function findNotifications(uid: string, mode: string): Promise<import("axios").AxiosResponse<Comment[], any, {}>>;
 declare function findReadNotifications(uid: string, mode: string): Promise<import("axios").AxiosResponse<Comment[], any, {}>>;
 declare function markRead(id: string): Promise<import("axios").AxiosResponse<Comment, any, {}>>;

package/dist/{Comments → features/Comments}/Comments.js

@@ -3,14 +3,14 @@ import { Drawer } from '@mui/material';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, IconButton } from 'tycho-storybook';
-import AppLoading from '../AppLoading';
-import AppPlaceholder from '../AppPlaceholder';
-import SecurityUtils from '../functions/SecurityUtils';
-import UsabilityUtils from '../functions/UsabilityUtils';
+import AppLoading from '../../common/AppLoading';
+import AppPlaceholder from '../../common/AppPlaceholder';
+import SecurityUtils from '../../functions/SecurityUtils';
+import UsabilityUtils from '../../functions/UsabilityUtils';
 import CommentAdd from './CommentAdd';
 import CommentInfo from './CommentInfo';
 import './style.scss';
-import CommentService from './types/CommentService';
+import CommentService from './CommentService';
 export default function Comments({ uid, keywords, references, mode, onClose, onChange, }) {
     const { t } = useTranslation('comments');
     const [openAddComment, setOpenAddComment] = useState(false);

package/dist/{Comments → features/Comments}/HeaderNotifications/HeaderNotifications.js

@@ -3,8 +3,8 @@ import { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { Avatar, IconButton } from 'tycho-storybook';
-import DateUtils from '../../functions/DateUtils';
-import CommentService from '../types/CommentService';
+import DateUtils from '../../../functions/DateUtils';
+import CommentService from '../CommentService';
 import './style.scss';
 export default function HeaderNotifications({ uid, mode, mobile }) {
     const navigate = useNavigate();

package/dist/{Parameters → features/Parameters}/Parameters.js

@@ -4,7 +4,7 @@ import Switch from '@mui/material/Switch';
 import Tooltip from '@mui/material/Tooltip';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLoggedUtils } from '../configs/useLoggedUtils';
+import { useLoggedUtils } from '../../configs/useLoggedUtils';
 import { Icon } from 'tycho-storybook';
 import './style.scss';
 export default function Parameters({ parameters, onChange }) {

package/dist/{Participants → features/Participants}/ParticipantCreate/ParticipantCreate.js

@@ -5,10 +5,10 @@ import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { TextField } from 'tycho-storybook';
 import * as yup from 'yup';
-import AppModal from '../../AppModal';
-import CommonContext from '../../configs/CommonContext';
-import ParticipantService from '../types/ParticipantService';
-import { useMessageUtils } from '../../configs/useMessageUtils';
+import AppModal from '../../../common/AppModal';
+import CommonContext from '../../../configs/CommonContext';
+import ParticipantService from '../ParticipantService';
+import { useMessageUtils } from '../../../configs/useMessageUtils';
 export default function ParticipantCreate({ document, onClose, onCreate, }) {
     const { t } = useTranslation('participants');
     const { state } = useContext(CommonContext);

package/dist/{Participants → features/Participants}/ParticipantRemove/ParticipantRemove.js

@@ -3,10 +3,10 @@ import { Box, Modal } from '@mui/material';
 import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Icon, SelectField } from 'tycho-storybook';
-import { modalRemoveStyle } from '../../AppModal/AppModalRemove';
-import CommonContext from '../../configs/CommonContext';
-import { useMessageUtils } from '../../configs/useMessageUtils';
-import ParticipantService from '../types/ParticipantService';
+import { modalRemoveStyle } from '../../../common/AppModal/AppModalRemove';
+import CommonContext from '../../../configs/CommonContext';
+import { useMessageUtils } from '../../../configs/useMessageUtils';
+import ParticipantService from '../ParticipantService';
 import { useForm } from 'react-hook-form';
 import './style.scss';
 export default function ParticipantRemove({ participant, participants, document, onClose, onChange, }) {

package/dist/{Participants/types → features/Participants}/ParticipantService.d.ts

@@ -1,5 +1,5 @@
-import { AppEditableField } from '../../AppEditable/AppEditableField';
-import Participant, { ParticipantCreateRequest } from './Participant';
+import { AppEditableField } from '../../common/AppEditable/AppEditableField';
+import Participant, { ParticipantCreateRequest } from './types/Participant';
 declare function add(uid: string, request: ParticipantCreateRequest): Promise<import("axios").AxiosResponse<Participant, any, {}>>;
 declare function update(field: AppEditableField): Promise<import("axios").AxiosResponse<any, any, {}>>;
 declare function remove(document: string, code: string, transfer?: string): Promise<import("axios").AxiosResponse<any, any, {}>>;

package/dist/{Participants → features/Participants}/Participants.js

@@ -3,13 +3,13 @@ import { MenuItem, Select } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from 'tycho-storybook';
-import AppEditable from '../AppEditable';
-import { useMessageUtils } from '../configs/useMessageUtils';
+import AppEditable from '../../common/AppEditable';
+import { useMessageUtils } from '../../configs/useMessageUtils';
 import ParticipantCreate from './ParticipantCreate';
 import ParticipantRemove from './ParticipantRemove';
 import './style.scss';
 import { CHAT_FIELDS, PARTICIPANT_FIELDS, } from './types/Participant';
-import ParticipantService from './types/ParticipantService';
+import ParticipantService from './ParticipantService';
 export default function Participants({ document, participants, onChange, useChat, }) {
     const { t } = useTranslation('participants');
     const { dispatchMessage } = useMessageUtils();

package/dist/{Participants → features/Participants}/types/Participant.d.ts

@@ -1,4 +1,4 @@
-import { FormField } from '../../AppEditable/FormField';
+import { FormField } from '../../../common/AppEditable/FormField';
 type Participant = {
     order: number;
     code: string;

package/dist/features/SentenceSplit/SentenceSplit.d.ts

@@ -0,0 +1,28 @@
+import { Parameter } from '../../configs/types/Parameter';
+import { Struct } from '../../configs/types/Struct';
+import { type ButtonDSModes, type ButtonDSSizes, type TooltipPlacements } from 'tycho-storybook';
+import SentenceSplitLanguage from './types/Language';
+import './style.scss';
+export type SentenceSplitTranslationsInput = {
+    values: Record<string, string>;
+};
+export type SentenceSplitIconButtonProps = {
+    mode?: ButtonDSModes;
+    size?: ButtonDSSizes;
+    iconSize?: ButtonDSSizes;
+    tooltipPlacement?: TooltipPlacements;
+};
+type Props = {
+    struct: Struct;
+    documentUid: string;
+    wordTiers: Parameter[];
+    languages: SentenceSplitLanguage[];
+    translations: SentenceSplitTranslationsInput;
+    sound: string;
+    /** When set, pre-selects the split after the word with this token position (`tok.p`). */
+    selected?: number;
+    onSuccess?: () => void;
+    iconButtonProps?: SentenceSplitIconButtonProps;
+};
+export default function SentenceSplit({ struct, documentUid, wordTiers, languages, translations, sound, selected, onSuccess, iconButtonProps, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/SentenceSplit/SentenceSplit.js

@@ -0,0 +1,180 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import AppModal from '../../common/AppModal/AppModal';
+import SentenceUtils from '../../functions/SentenceUtils';
+import { useCorpusUtils } from '../../configs/useCorpusUtils';
+import { useMessageUtils } from '../../configs/useMessageUtils';
+import { Badge, Button, IconButton, } from 'tycho-storybook';
+import SentenceSplitAudioStep from './SentenceSplitAudio';
+import SentenceSplitChoose from './SentenceSplitChoose';
+import SentenceSplitCommentsStep from './SentenceSplitComments';
+import SentenceSplitPreviewStep from './SentenceSplitPreview';
+import SentenceSplitTranslationsStep from './SentenceSplitTranslations';
+import SentenceSplitService from './SentenceSplitService';
+import SentenceSplitUtils from './SentenceSplitUtils';
+import { emptySentenceSplitRequest, } from './types/SentenceSplitRequest';
+import './style.scss';
+const STEP_CHOOSE = 0;
+const STEP_PREVIEW = 1;
+const STEP_TRANSLATIONS = 2;
+const STEP_AUDIO = 3;
+const STEP_COMMENTS = 4;
+const DEFAULT_ICON_BUTTON_PROPS = {
+    mode: 'ghost',
+    size: 'medium',
+    iconSize: 'medium',
+    tooltipPlacement: 'bottom',
+};
+/** Split is after this token's word; must not be the last visible word. */
+function resolveInitialSplitToken(selected, wordTokens) {
+    if (selected === undefined)
+        return 0;
+    const idx = wordTokens.findIndex((tok) => tok.p === selected);
+    if (idx === -1 || idx === wordTokens.length - 1)
+        return 0;
+    return selected;
+}
+export default function SentenceSplit({ struct, documentUid, wordTiers, languages, translations, sound, selected, onSuccess, iconButtonProps, }) {
+    const { t } = useTranslation('sentenceSplit');
+    const { getCorpus } = useCorpusUtils();
+    const { dispatchError, isLoading, dispatchLoading } = useMessageUtils();
+    const [open, setOpen] = useState(false);
+    const [step, setStep] = useState(STEP_CHOOSE);
+    const [request, setRequest] = useState(emptySentenceSplitRequest);
+    const [hasComments, setHasComments] = useState(null);
+    const stepsContentRef = useRef(null);
+    const stepItemRefs = useRef({});
+    const load = () => {
+        if (open) {
+            setStep(STEP_CHOOSE);
+            const baseValues = { ...(translations?.values || {}) };
+            const sorted = SentenceUtils.sort(struct);
+            const tokens = sorted.filter((tok) => SentenceUtils.isVisible(tok) && !SentenceSplitUtils.skipToken(tok));
+            setRequest({
+                uid: struct.uid,
+                token: resolveInitialSplitToken(selected, tokens),
+                translationsFirst: baseValues,
+                translationsSecond: { ...baseValues },
+            });
+        }
+    };
+    const wordTokens = useMemo(() => {
+        const sorted = SentenceUtils.sort(struct);
+        return sorted.filter((tok) => SentenceUtils.isVisible(tok) && !SentenceSplitUtils.skipToken(tok));
+    }, [struct]);
+    const canProceedFromChoose = request.token && wordTokens.length >= 2;
+    const hasTranslations = useMemo(() => {
+        if (!languages?.length)
+            return false;
+        const values = translations?.values ?? {};
+        return Object.values(values).some((v) => String(v ?? '').trim().length > 0);
+    }, [languages, translations]);
+    const hasAudio = Boolean(sound?.trim());
+    const visibleStepIds = useMemo(() => {
+        const ids = [STEP_CHOOSE, STEP_PREVIEW];
+        if (hasTranslations)
+            ids.push(STEP_TRANSLATIONS);
+        if (hasAudio)
+            ids.push(STEP_AUDIO);
+        if (hasComments === true)
+            ids.push(STEP_COMMENTS);
+        return ids;
+    }, [hasTranslations, hasAudio, hasComments]);
+    const stepIndex = visibleStepIds.indexOf(step);
+    const isLastStep = stepIndex >= 0 && stepIndex === visibleStepIds.length - 1;
+    const canGoBack = stepIndex > 0;
+    const handleBack = () => {
+        if (canGoBack)
+            setStep(visibleStepIds[stepIndex - 1]);
+    };
+    const handleNext = () => {
+        if (stepIndex >= 0 && stepIndex < visibleStepIds.length - 1) {
+            setStep(visibleStepIds[stepIndex + 1]);
+        }
+    };
+    const handleFinishSplit = () => {
+        if (isLoading())
+            return;
+        dispatchLoading(true);
+        SentenceSplitService.split(struct.uid, request)
+            .then(() => onSuccess?.())
+            .catch((err) => {
+            dispatchLoading(false);
+            dispatchError({ err, t });
+        });
+    };
+    const commentsCheckPending = hasComments === null;
+    const disablePrimary = (step === STEP_CHOOSE && !canProceedFromChoose) ||
+        (step === STEP_PREVIEW && request.token === null) ||
+        (step === STEP_COMMENTS && isLoading()) ||
+        commentsCheckPending;
+    const canOpenSplit = wordTokens.length >= 2;
+    const steps = useMemo(() => {
+        const definitions = [
+            { id: STEP_CHOOSE, label: t('split.words.title') },
+            { id: STEP_PREVIEW, label: t('split.preview.title') },
+            { id: STEP_TRANSLATIONS, label: t('split.translations.title') },
+            { id: STEP_AUDIO, label: t('split.audio.title') },
+            { id: STEP_COMMENTS, label: t('split.comments.title') },
+        ];
+        return definitions
+            .filter((item) => visibleStepIds.includes(item.id))
+            .map((item, index) => ({ ...item, displayNumber: index + 1 }));
+    }, [visibleStepIds, t]);
+    useEffect(() => {
+        load();
+    }, [open, translations, struct.uid, selected]);
+    useEffect(() => {
+        if (!open) {
+            setHasComments(null);
+            return;
+        }
+        let cancelled = false;
+        SentenceSplitService.findComments(getCorpus().uid, {
+            sentence: struct.uid,
+            document: documentUid,
+            page: struct.page,
+        })
+            .then((r) => {
+            if (!cancelled)
+                setHasComments(r.data.length > 0);
+        })
+            .catch((err) => {
+            if (!cancelled) {
+                setHasComments(false);
+                dispatchError({ err, t });
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [open, struct.uid, documentUid, struct.page, getCorpus, dispatchError, t]);
+    useEffect(() => {
+        if (!open || visibleStepIds.includes(step))
+            return;
+        setStep(visibleStepIds[0] ?? STEP_CHOOSE);
+    }, [open, visibleStepIds, step]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const activeStepItem = stepItemRefs.current[step];
+        if (activeStepItem) {
+            activeStepItem.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'center',
+            });
+        }
+        stepsContentRef.current?.scrollTo({
+            top: 0,
+            behavior: 'smooth',
+        });
+    }, [step, open]);
+    const mergedIconProps = { ...DEFAULT_ICON_BUTTON_PROPS, ...iconButtonProps };
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { name: "link_off", onClick: () => setOpen(true), title: canOpenSplit
+                    ? t('button.label.split')
+                    : t('split.button.disabledTooFewWords'), disabled: !canOpenSplit, ...mergedIconProps }), open && (_jsxs(AppModal, { title: t('modal.split.sentence.title'), className: "sentence-split-modal", close: () => setOpen(false), hideFooter: true, disableEscapeClose: true, disableBackdropClose: true, children: [_jsx("div", { className: "steps-navigation", children: steps.map((stepItem) => (_jsxs("div", { className: `step-item ${step === stepItem.id ? 'active' : ''}`, onClick: () => setStep(stepItem.id), ref: (element) => {
+                                stepItemRefs.current[stepItem.id] = element;
+                            }, children: [_jsx(Badge, { text: stepItem.displayNumber.toString(), size: "medium", color: step === stepItem.id ? 'blue' : 'none' }), _jsx("div", { className: "step-label", children: stepItem.label })] }, stepItem.id))) }), _jsxs("div", { className: "steps-content", ref: stepsContentRef, children: [_jsxs("div", { className: "sentence-split-body", children: [step === STEP_CHOOSE && (_jsx(SentenceSplitChoose, { struct: struct, request: request, onChange: setRequest })), step === STEP_PREVIEW && request.token !== null && (_jsx(SentenceSplitPreviewStep, { struct: struct, request: request, wordTiers: wordTiers })), step === STEP_TRANSLATIONS && (_jsx(SentenceSplitTranslationsStep, { languages: languages, request: request, onChange: setRequest })), step === STEP_AUDIO && (_jsx(SentenceSplitAudioStep, { sound: sound, request: request, onChange: setRequest })), step === STEP_COMMENTS && request.token !== null && (_jsx(SentenceSplitCommentsStep, { struct: struct, documentUid: documentUid, request: request, onChange: setRequest }))] }), _jsxs("div", { className: "steps-footer", children: [canGoBack && (_jsx(Button, { text: t('split.button.back'), onClick: handleBack, size: "medium", mode: "ghost" })), _jsx(Button, { text: isLastStep ? t('split.button.finish') : t('split.button.next'), onClick: isLastStep ? handleFinishSplit : handleNext, size: "medium", disabled: disablePrimary })] })] })] }))] }));
+}

package/dist/features/SentenceSplit/SentenceSplitAudio/SentenceSplitAudioStep.d.ts

@@ -0,0 +1,9 @@
+import { SentenceSplitRequest } from '../types/SentenceSplitRequest';
+import './style.scss';
+type Props = {
+    sound: string;
+    request: SentenceSplitRequest;
+    onChange: (request: SentenceSplitRequest) => void;
+};
+export default function SentenceSplitAudioStep({ sound, request, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};