tycho-components 0.46.1 → 0.46.3

package/dist/common/AppCard/AppCard.d.ts

@@ -8,6 +8,7 @@ type Props = {
     options?: DropdownMenuItem[];
     className?: string;
     onClick?: () => void;
+    dataTour?: string;
 };
-export default function AppCard({ title, children, extraHeaderActions, footer, options, className, onClick, }: Props): import("react").JSX.Element;
+export default function AppCard({ title, children, extraHeaderActions, footer, options, className, onClick, dataTour, }: Props): import("react").JSX.Element;
 export {};

package/dist/common/AppCard/AppCard.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cx from 'classnames';
 import { DropdownMenu } from 'tycho-storybook';
 import './style.scss';
-export default function AppCard({ title, children, extraHeaderActions, footer, options, className, onClick, }) {
-    return (_jsxs("div", { className: cx('ds-app-card', className), onClick: onClick, children: [title && (_jsxs("div", { className: "header", children: [_jsx("div", { className: "title", children: title }), extraHeaderActions && (_jsx("div", { className: "extra-header-actions", children: extraHeaderActions })), options && _jsx(DropdownMenu, { list: options })] })), _jsx("div", { className: "body", children: children }), footer && _jsx("div", { className: "footer", children: footer })] }));
+export default function AppCard({ title, children, extraHeaderActions, footer, options, className, onClick, dataTour, }) {
+    return (_jsxs("div", { className: cx('ds-app-card', className), onClick: onClick, "data-tour": dataTour, children: [title && (_jsxs("div", { className: "header", children: [_jsx("div", { className: "title", children: title }), extraHeaderActions && (_jsx("div", { className: "extra-header-actions", children: extraHeaderActions })), options && _jsx(DropdownMenu, { list: options })] })), _jsx("div", { className: "body", children: children }), footer && _jsx("div", { className: "footer", children: footer })] }));
 }

package/dist/features/AccessControl/AccessUsers/AccessUsers.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { AccessMode } from '../../../configs/types/Access';
-import './styles.scss';
+import React from "react";
+import { AccessMode } from "../../../configs/types/Access";
+import "./styles.scss";
 export type AccessUsersProps = {
     mode: AccessMode;
     resourceUid: string;

package/dist/features/AccessControl/AccessUsers/AccessUsers.js

@@ -1,25 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Tag } from 'tycho-storybook';
-import { AppCard, AppLoading, AppPicture, AppPlaceholder, AppTable, EMPTY_PAGE, } from '../../../common';
-import DateUtils from '../../../functions/DateUtils';
-import AccessControlService from '../AccessControlService';
-import AccessGrant from '../AccessGrant';
-import AccessUser from '../AccessUser';
-import { EMPTY_ACCESS_SEARCH_FILTER, } from './AccessUsersFilter';
-import './styles.scss';
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Tag } from "tycho-storybook";
+import { AppCard, AppLoading, AppPicture, AppPlaceholder, AppTable, EMPTY_PAGE, } from "../../../common";
+import DateUtils from "../../../functions/DateUtils";
+import AccessControlService from "../AccessControlService";
+import AccessGrant from "../AccessGrant";
+import AccessUser from "../AccessUser";
+import { EMPTY_ACCESS_SEARCH_FILTER, } from "./AccessUsersFilter";
+import "./styles.scss";
 const STATUS_TAG_COLOR = {
-    ACTIVE: 'green',
-    INACTIVE: 'gray',
+    ACTIVE: "green",
+    INACTIVE: "gray",
 };
 const ROLE_TAG_COLOR = {
-    ADMIN: 'violet',
-    EDITOR: 'blue',
-    READER: 'yellow',
+    ADMIN: "violet",
+    EDITOR: "blue",
+    READER: "yellow",
 };
 export default function AccessUsers({ mode, resourceUid }) {
-    const { t } = useTranslation('access');
+    const { t } = useTranslation("access");
     const [filter, setFilter] = useState(EMPTY_ACCESS_SEARCH_FILTER);
     const [open, setOpen] = useState(false);
     const [loading, setLoading] = useState(true);
@@ -47,8 +47,8 @@ export default function AccessUsers({ mode, resourceUid }) {
     });
     const menuOptions = [
         {
-            icon: 'add',
-            label: t('common:button.add'),
+            icon: "add",
+            label: t("common:button.add"),
             onClick: handleCreate,
         },
     ];
@@ -57,7 +57,7 @@ export default function AccessUsers({ mode, resourceUid }) {
     };
     const addStatusToCell = (props) => {
         const status = props.row.original.status;
-        return (_jsx(Tag, { text: t(`status.label.${status?.toLowerCase() ?? ''}`), color: status ? STATUS_TAG_COLOR[status] : 'gray', size: "small" }));
+        return (_jsx(Tag, { text: t(`status.label.${status?.toLowerCase() ?? ""}`), color: status ? STATUS_TAG_COLOR[status] : "gray", size: "small" }));
     };
     const addRoleToCell = (props) => {
         const role = props.row.original.role;
@@ -69,29 +69,29 @@ export default function AccessUsers({ mode, resourceUid }) {
     };
     const columns = React.useMemo(() => [
         {
-            id: 'original',
-            header: '',
+            id: "original",
+            header: "",
             cell: addImageToCell,
             size: 10,
         },
         {
-            id: 'name',
-            header: t('table.label.name'),
+            id: "name",
+            header: t("table.label.name"),
             accessorFn: (row) => row.name || row.email,
             cell: addNameToCell,
             size: 35,
         },
         {
-            id: 'status',
-            header: t('table.label.status'),
-            accessorKey: 'status',
+            id: "status",
+            header: t("table.label.status"),
+            accessorKey: "status",
             cell: addStatusToCell,
             size: 15,
         },
         {
-            id: 'role',
-            header: t('table.label.role'),
-            accessorKey: 'role',
+            id: "role",
+            header: t("table.label.role"),
+            accessorKey: "role",
             cell: addRoleToCell,
             size: 35,
         },
@@ -99,11 +99,11 @@ export default function AccessUsers({ mode, resourceUid }) {
     useEffect(() => {
         paginate();
     }, [filter, resourceUid, mode]);
-    return (_jsxs(AppCard, { title: t('title.users'), options: menuOptions, className: "access-users-container", children: [loading && _jsx(AppLoading, { pageLoading: true }), !loading && data.totalElements > 0 && (_jsx(AppTable, { columns: columns, data: data, className: "users-table", onClickRow: onClickRow, pagination: { pageIndex: filter.page, pageSize: filter.size }, setPagination: (p) => {
+    return (_jsxs(AppCard, { title: t("title.users"), options: menuOptions, className: "access-users-container", "data-tour": "admin-access-users-panel", children: [loading && _jsx(AppLoading, { pageLoading: true }), !loading && data.totalElements > 0 && (_jsx(AppTable, { columns: columns, data: data, className: "users-table", onClickRow: onClickRow, pagination: { pageIndex: filter.page, pageSize: filter.size }, setPagination: (p) => {
                     setFilter({ ...filter, page: p.pageIndex, size: p.pageSize });
                 }, sorting: filter.sort || [], setSorting: (s) => {
                     setFilter({ ...filter, sort: s });
-                } })), !loading && data.totalElements === 0 && (_jsx(AppPlaceholder, { text: t('access.placeholder') })), selected && (_jsx(AccessUser, { mode: mode, resourceUid: resourceUid, user: selected, setItems: setData, onClose: () => {
+                } })), !loading && data.totalElements === 0 && (_jsx(AppPlaceholder, { text: t("access.placeholder"), useMarginTop: true })), selected && (_jsx(AccessUser, { mode: mode, resourceUid: resourceUid, user: selected, setItems: setData, onClose: () => {
                     setSelected(undefined);
                 }, onReload: () => {
                     setSelected(undefined);

package/dist/features/PageRender/PageRenderView.d.ts

@@ -1,4 +1,6 @@
 import './style.scss';
-import { CollapsedPageRenderElement, PageRenderViewProps } from './types';
+import { CollapsedPageRenderElement, PageRenderElement, PageRenderViewProps } from './types';
+/** Ensure PARTICIPANT elements carry a sentence uid (API or next-token look-ahead). */
+export declare function withParticipantSentenceUids(elements: PageRenderElement[]): PageRenderElement[];
 export default function PageRenderView({ elements, selectedTier, corpus, displayTags, showLineNumbers, highlightSentenceUid, activeTokenKey, selectedTokenKeys, tokenSelectionKey, getDisplayValue, getTokenStyle, getTokenClassName, isTokenEdited, getParticipantName, getParticipantColor, onTokenClick, onTokenHover, onParticipantHover, onParticipantClick, wrapToken, renderTokenSuffix, }: PageRenderViewProps): import("react").JSX.Element;
 export declare function findPunctuationAfterCollapsedJunction(items: CollapsedPageRenderElement[], junctionIndex: number): number | undefined;

package/dist/features/PageRender/PageRenderView.js

@@ -1,12 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Fragment } from 'react';
+import { Fragment, useMemo } from 'react';
 import cx from 'classnames';
 import './style.scss';
 import collapseElementsForTier from './collapseElementsForTier';
 import isTokenRefVisible, { tokenRefToToken } from './tokenUtils';
 import { PageRenderElementType, } from './types';
+/** Ensure PARTICIPANT elements carry a sentence uid (API or next-token look-ahead). */
+export function withParticipantSentenceUids(elements) {
+    return elements.map((element, index) => {
+        if (element.type !== PageRenderElementType.PARTICIPANT ||
+            !element.participant ||
+            element.uid) {
+            return element;
+        }
+        for (let i = index + 1; i < elements.length; i++) {
+            const next = elements[i];
+            if (next.type === PageRenderElementType.PARTICIPANT)
+                break;
+            if (next.token?.uid) {
+                return { ...element, uid: next.token.uid };
+            }
+        }
+        return element;
+    });
+}
 export default function PageRenderView({ elements, selectedTier, corpus, displayTags = false, showLineNumbers = true, highlightSentenceUid, activeTokenKey, selectedTokenKeys, tokenSelectionKey, getDisplayValue, getTokenStyle, getTokenClassName, isTokenEdited, getParticipantName, getParticipantColor, onTokenClick, onTokenHover, onParticipantHover, onParticipantClick, wrapToken, renderTokenSuffix, }) {
-    const collapsed = collapseElementsForTier(elements, selectedTier, corpus);
+    const elementsWithUids = useMemo(() => withParticipantSentenceUids(elements), [elements]);
+    const collapsed = collapseElementsForTier(elementsWithUids, selectedTier, corpus);
     const punctuationBeforeBreak = new Map();
     const punctuationIndexes = new Set();
     collapsed.forEach((item, index) => {
@@ -74,9 +94,11 @@ function PageRenderElementItem({ item, highlight, showLineNumbers, displayTags,
             return (_jsx("span", { className: "participant", style: getParticipantColor
                     ? { backgroundColor: getParticipantColor(element.participant) }
                     : undefined, onMouseEnter: () => onParticipantHover?.(element.participant), onMouseLeave: () => onParticipantHover?.(undefined), onClick: (event) => {
-                    if (!onParticipantClick || !element.uid)
+                    if (!onParticipantClick)
                         return;
                     event.stopPropagation();
+                    if (!element.uid)
+                        return;
                     onParticipantClick(element.participant, element.uid);
                 }, children: getParticipantName
                     ? getParticipantName(element.participant)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.46.1",
+  "version": "0.46.3",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -90,7 +90,7 @@
     "react-i18next": "^13.0.2",
     "react-router-dom": "^6.14.2",
     "react-toastify": "^9.1.3",
-    "tycho-storybook": "0.12.7",
+    "tycho-storybook": "0.12.8",
     "wavesurfer-react": "^2.2.2",
     "wavesurfer.js": "^6.6.3"
   },
@@ -120,7 +120,7 @@
     "react-toastify": "^9.1.3",
     "sass-embedded": "^1.97.2",
     "storybook": "^10.1.11",
-    "tycho-storybook": "^0.12.7",
+    "tycho-storybook": "^0.12.8",
     "typescript": "^5.7.3",
     "vite": "^7.0.0",
     "vitest": "^3.2.6",