@vanillabp/bc-ui 0.0.3 → 0.0.4

package/dist/components/SearchableAndSortableUpdatingList.d.ts

@@ -1,4 +1,4 @@
-import React__default, { MutableRefObject, ReactNode } from 'react';
+import React, { MutableRefObject, ReactNode } from 'react';
 import { ColumnConfig } from 'grommet';
 import { ListItemStatus, ShowLoadingIndicatorFunction } from '@vanillabp/bc-shared';
 import { BackgroundType, ColorType } from 'grommet/utils';
@@ -29,9 +29,9 @@ declare type RefreshNecessaryFunction = () => void;
 declare type ReloadCallbackFunction = (updatedItemsIds: Array<string>) => Promise<void>;
 declare type RefreshItemCallbackFunction = (itemIds: Array<string>) => void;
 declare const SearchableAndSortableUpdatingList: <T extends ListItemData>({ itemsRef, updateListRef, refreshItemRef, retrieveItems, reloadItems, refreshNecessaryCallback, columns, showLoadingIndicator, additionalHeader, minWidthOfAutoColumn, rowSeparator, applyBackgroundColor, showColumnHeaders, columnHeaderBackground, columnHeaderSeparator, }: {
-    itemsRef: React__default.MutableRefObject<ListItem<T>[] | undefined>;
+    itemsRef: React.MutableRefObject<ListItem<T>[] | undefined>;
     updateListRef: MutableRefObject<ReloadCallbackFunction | undefined>;
-    refreshItemRef?: React__default.MutableRefObject<RefreshItemCallbackFunction | undefined> | undefined;
+    refreshItemRef?: React.MutableRefObject<RefreshItemCallbackFunction | undefined> | undefined;
     retrieveItems: RetrieveItemsFunction;
     reloadItems: ReloadItemsFunction;
     refreshNecessaryCallback?: RefreshNecessaryFunction | undefined;

package/dist/components/SearchableAndSortableUpdatingList.js

@@ -155,14 +155,14 @@ const SearchableAndSortableUpdatingList = ({
     if (item.status === void 0) {
       return __spreadProps(__spreadValues({}, props), {
         [item.id]: {
-          background: { color: "light-2", opacity: 0.5 }
+          background: "list-ended"
         }
       });
     }
     if (item.status !== ListItemStatus.INITIAL) {
       return __spreadProps(__spreadValues({}, props), {
         [item.id]: {
-          background: item.status === ListItemStatus.NEW ? { color: "accent-3", opacity: 0.1 } : item.status === ListItemStatus.UPDATED ? { color: "accent-1", opacity: 0.15 } : item.status === ListItemStatus.ENDED ? { color: "light-2", opacity: 0.5 } : item.status === ListItemStatus.REMOVED_FROM_LIST ? { color: "light-2", opacity: 0.5 } : void 0
+          background: item.status === ListItemStatus.NEW ? "list-new" : item.status === ListItemStatus.UPDATED ? "list-updated" : item.status === ListItemStatus.ENDED ? "list-ended" : item.status === ListItemStatus.REMOVED_FROM_LIST ? "list-removed_from_list" : void 0
         }
       });
     }
@@ -172,6 +172,7 @@ const SearchableAndSortableUpdatingList = ({
     Box,
     {
       fill: true,
+      background: columnHeaderSeparator,
       children: /* @__PURE__ */ jsx(
         SnapScrollingDataTable,
         {

package/dist/components/SnapScrolling.d.ts

@@ -1,15 +1,15 @@
-import * as styled_components from 'styled-components';
-import * as React from 'react';
 import { GridExtendedProps, BoxExtendedProps } from 'grommet';
+import { StyledComponent } from 'styled-components';
 import * as CSS from 'csstype';
+import { FC } from 'react';
 
 interface SnapScrollingGridProps extends GridExtendedProps {
     snapDirection: 'horizontal' | 'vertical';
 }
-declare const SnapScrollingGrid: styled_components.StyledComponent<React.FC<GridExtendedProps>, any, SnapScrollingGridProps, never>;
+declare const SnapScrollingGrid: StyledComponent<FC<GridExtendedProps>, any, SnapScrollingGridProps, never>;
 interface SnapAlignBoxProps extends BoxExtendedProps {
     snapAlign: CSS.Property.ScrollSnapAlign;
 }
-declare const SnapAlignBox: styled_components.StyledComponent<React.FC<BoxExtendedProps>, any, SnapAlignBoxProps, never>;
+declare const SnapAlignBox: StyledComponent<FC<BoxExtendedProps>, any, SnapAlignBoxProps, never>;
 
 export { SnapAlignBox, SnapScrollingGrid };

package/dist/components/SnapScrolling.js

@@ -3,7 +3,7 @@ import { Box, Grid } from "grommet";
 import styled from "styled-components";
 ;
 const SnapScrollingGrid = styled(Grid)`
-    overflow-${(props) => props.snapDirection === "horizontal" ? "x" : "y"}: auto;
+    overflow-${(props) => props.snapDirection === "horizontal" ? "x" : "y"}: overlay;
     scroll-snap-type: ${(props) => props.snapDirection === "horizontal" ? "x" : "y"} mandatory;
     scroll-behavior: smooth;
   `;

package/dist/components/SnapScrollingDataTable.d.ts

@@ -1,5 +1,5 @@
 import { DataTableExtendedProps, ColumnConfig } from 'grommet';
-import React__default, { PropsWithChildren, ReactNode, UIEventHandler } from 'react';
+import React, { PropsWithChildren, ReactNode, UIEventHandler } from 'react';
 import { BackgroundType, ColorType } from 'grommet/utils';
 
 interface SnapScrollingDataTableProps<TRowType = any> extends PropsWithChildren<Omit<DataTableExtendedProps<TRowType>, 'columns' | 'ref'>> {
@@ -12,6 +12,6 @@ interface SnapScrollingDataTableProps<TRowType = any> extends PropsWithChildren<
     columnHeaderBackground?: BackgroundType;
     columnHeaderSeparator?: ColorType | null;
 }
-declare const SnapScrollingDataTable: React__default.ForwardRefExoticComponent<SnapScrollingDataTableProps<any> & React__default.RefAttributes<unknown>>;
+declare const SnapScrollingDataTable: React.ForwardRefExoticComponent<SnapScrollingDataTableProps<any> & React.RefAttributes<unknown>>;
 
 export { SnapScrollingDataTable };

package/dist/components/SnapScrollingDataTable.js

@@ -34,6 +34,7 @@ const SnapScrollingDataTable = forwardRef((_a, ref) => {
     "columnHeaderBackground",
     "columnHeaderSeparator"
   ]);
+  const hasAutoWidthColumn = columns.filter((column) => column.size === void 0).length > 0;
   const columnsWidth = columns.reduce((width, column) => calculateColumWidth(minWidthOfAutoColumn, width, column), "");
   const dataTableColumns = columns.map((column) => __spreadProps(__spreadValues({}, column), { header: void 0 }));
   return columns ? /* @__PURE__ */ jsxs(
@@ -41,7 +42,7 @@ const SnapScrollingDataTable = forwardRef((_a, ref) => {
     {
       fill: true,
       rows: ["max-content", "auto"],
-      style: { overflow: "auto" },
+      style: { overflow: "overlay" },
       snapDirection: "horizontal",
       onScroll,
       children: [
@@ -55,6 +56,7 @@ const SnapScrollingDataTable = forwardRef((_a, ref) => {
               zIndex: 2,
               minWidth: "auto"
             },
+            overflow: "hidden",
             background: columnHeaderBackground,
             align: "center",
             children: [
@@ -71,23 +73,34 @@ const SnapScrollingDataTable = forwardRef((_a, ref) => {
                     marginRight: "auto",
                     zIndex: "2"
                   },
-                  children: columns.map((column, index) => /* @__PURE__ */ jsx(
+                  children: columns.map((column, index, allColumns) => /* @__PURE__ */ jsxs(
                     SnapAlignBox,
                     {
-                      style: column.size === void 0 ? { minWidth: columnHeaderSeparator === null ? minWidthOfAutoColumn : `calc(${minWidthOfAutoColumn} - 1px)` } : { width: columnHeaderSeparator === null ? column.size : `calc(${column.size} - 1px)` },
+                      style: column.size === void 0 ? { position: "relative", minWidth: minWidthOfAutoColumn } : { position: "relative", width: column.size },
                       align: "left",
                       justify: "center",
                       height: "100%",
                       border: index === 0 || columnHeaderSeparator === null ? void 0 : { side: "left", color: columnHeaderSeparator },
                       snapAlign: "center",
-                      children: column.header instanceof String ? /* @__PURE__ */ jsx(
-                        Text,
-                        {
-                          color: "light-2",
-                          truncate: "tip",
-                          children: column.header
-                        }
-                      ) : column.header
+                      children: [
+                        index + 1 === allColumns.length ? /* @__PURE__ */ jsx(
+                          Box,
+                          {
+                            style: { position: "absolute", left: "100%", top: "0px", zIndex: "3" },
+                            width: "1px",
+                            height: "100%",
+                            background: columnHeaderSeparator
+                          }
+                        ) : void 0,
+                        column.header instanceof String ? /* @__PURE__ */ jsx(
+                          Text,
+                          {
+                            color: "light-2",
+                            truncate: "tip",
+                            children: column.header
+                          }
+                        ) : column.header
+                      ]
                     },
                     `column${index}`
                   ))
@@ -97,12 +110,24 @@ const SnapScrollingDataTable = forwardRef((_a, ref) => {
           }
         ),
         /* @__PURE__ */ jsx(
-          DataTable,
-          __spreadValues({
-            pad: "none",
-            width: columnsWidth,
-            columns: dataTableColumns
-          }, props)
+          Box,
+          {
+            style: {
+              minHeight: "100%",
+              height: "fit-content",
+              minWidth: hasAutoWidthColumn ? `calc(${columnsWidth})` : void 0,
+              width: hasAutoWidthColumn ? "100%" : `calc(${columnsWidth})`
+            },
+            background: "white",
+            children: /* @__PURE__ */ jsx(
+              DataTable,
+              __spreadValues({
+                fill: "vertical",
+                pad: "none",
+                columns: dataTableColumns
+              }, props)
+            )
+          }
         )
       ]
     }

package/dist/components/User.d.ts

@@ -1,11 +1,13 @@
-import { User as User$1 } from '@vanillabp/bc-official-gui-client';
+import { Person } from '@vanillabp/bc-official-gui-client';
+import { TranslationFunction } from '@vanillabp/bc-shared';
 
-declare type CurrentUserProps = {
-    user: User$1;
+declare type UserProps = {
+    t: TranslationFunction;
+    user: Person;
     isUserLoggedIn?: boolean;
     size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | string;
     iconSize?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | string;
 };
-declare const User: ({ user, isUserLoggedIn, size, iconSize, }: CurrentUserProps) => JSX.Element;
+declare const User: ({ t, user, isUserLoggedIn, size, iconSize, }: UserProps) => JSX.Element;
 
 export { User };

package/dist/components/User.js

@@ -2,38 +2,45 @@ import "../chunk-YH4NJHER.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Grid, Text } from "grommet";
 import { UserAvatar } from "./UserAvatar.js";
+import { UserDetailsBox } from "@vanillabp/bc-shared";
 const User = ({
+  t,
   user,
   isUserLoggedIn = false,
   size = "medium",
   iconSize
-}) => /* @__PURE__ */ jsxs(
-  Grid,
-  {
-    fill: "horizontal",
-    gap: "small",
-    columns: ["auto", "auto", "flex"],
-    align: "center",
-    children: [
-      /* @__PURE__ */ jsx(
-        UserAvatar,
-        {
-          user,
-          isUserLoggedIn,
-          size: iconSize !== void 0 ? iconSize : size
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Text,
-        {
-          size,
-          truncate: "tip",
-          children: !Boolean(user.lastName) ? !Boolean(user.email) ? user.id : user.email : Boolean(user.firstName) ? `${user.firstName} ${user.lastName}` : user.lastName
-        }
-      )
-    ]
-  }
-);
+}) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsxs(
+    Grid,
+    {
+      fill: "horizontal",
+      gap: "small",
+      columns: ["auto", "auto", "flex"],
+      align: "center",
+      children: [
+        user.avatar === void 0 ? void 0 : /* @__PURE__ */ jsx(
+          UserAvatar,
+          {
+            t,
+            user,
+            isUserLoggedIn,
+            size: iconSize !== void 0 ? iconSize : size
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            size,
+            tip: { content: /* @__PURE__ */ jsx(UserDetailsBox, { user, t }) },
+            truncate: true,
+            children: (_b = (_a = user.displayShort) != null ? _a : user.email) != null ? _b : user.id
+          }
+        )
+      ]
+    }
+  );
+};
 export {
   User
 };

package/dist/components/UserAvatar.d.ts

@@ -1,12 +1,14 @@
-import { User } from '@vanillabp/bc-official-gui-client';
+import { Person } from '@vanillabp/bc-official-gui-client';
 import { BorderType } from 'grommet/utils';
+import { TranslationFunction } from '@vanillabp/bc-shared';
 
 declare type UserAvatarProps = {
-    user: User;
+    t: TranslationFunction;
+    user: Person;
     isUserLoggedIn?: boolean;
     border?: BorderType;
     size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | string;
 };
-declare const UserAvatar: ({ user, isUserLoggedIn, border, size, }: UserAvatarProps) => JSX.Element;
+declare const UserAvatar: ({ t, user, isUserLoggedIn, border, size, }: UserAvatarProps) => JSX.Element;
 
 export { UserAvatar };

package/dist/components/UserAvatar.js

@@ -2,13 +2,13 @@ import {
   __async
 } from "../chunk-YH4NJHER.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Sex } from "@vanillabp/bc-official-gui-client";
-import { User as UserMale, UserFemale } from "grommet-icons";
-import { Anchor, Avatar, Box, Text } from "grommet";
+import { User as UserMale } from "grommet-icons";
+import { Avatar, Box } from "grommet";
 import { useRef, useState } from "react";
-import { useOnClickOutside, useResponsiveScreen } from "@vanillabp/bc-shared";
+import { useOnClickOutside, UserDetailsBox, useResponsiveScreen } from "@vanillabp/bc-shared";
 const hashCode = (value) => value.split("").reduce((s, c) => Math.imul(31, s) + c.charCodeAt(0) | 0, 0);
 const UserAvatar = ({
+  t,
   user,
   isUserLoggedIn = false,
   border,
@@ -61,7 +61,7 @@ const UserAvatar = ({
       style: { position: "relative" },
       onMouseDown: () => loadAndShowDetails(),
       children: [
-        showDetails ? /* @__PURE__ */ jsxs(
+        showDetails ? /* @__PURE__ */ jsx(
           Box,
           {
             ref,
@@ -82,35 +82,7 @@ const UserAvatar = ({
               left: `calc(${symbolSize} * 0.15)`,
               top: "0.3rem"
             },
-            children: [
-              /* @__PURE__ */ jsx(
-                Text,
-                {
-                  weight: "bold",
-                  children: user.id
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                Box,
-                {
-                  pad: { bottom: isPhone ? "medium" : "small" },
-                  children: [
-                    /* @__PURE__ */ jsxs(Text, { truncate: "tip", children: [
-                      showDetails.firstName,
-                      " ",
-                      showDetails.lastName
-                    ] }),
-                    /* @__PURE__ */ jsx(
-                      Anchor,
-                      {
-                        href: `mailto:${showDetails.email}`,
-                        children: showDetails.email
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
+            children: /* @__PURE__ */ jsx(UserDetailsBox, { user, t })
           }
         ) : void 0,
         /* @__PURE__ */ jsx(
@@ -121,7 +93,7 @@ const UserAvatar = ({
             size,
             border,
             src: user.avatar ? `/api/v1/gui/user/${user.id}/avatar?ts=${user.avatar}` : void 0,
-            children: user.sex === Sex.Female ? /* @__PURE__ */ jsx(UserFemale, { color: "accent-1", size: symbolSize }) : /* @__PURE__ */ jsx(UserMale, { color: "accent-1", size: symbolSize })
+            children: /* @__PURE__ */ jsx(UserMale, { color: "light-3", size: symbolSize })
           }
         )
       ]

package/dist/components/UserTaskPage.d.ts

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { ShowLoadingIndicatorFunction, ToastFunction, TranslationFunction, BcUserTask, UserTaskForm } from '@vanillabp/bc-shared';
 import { OpenTaskFunction, NavigateToWorkflowFunction } from '../types/navigate.js';
 import { TasklistApiHook } from '../types/apis.js';
-import { AssignTaskFunction } from '../types/lists.js';
+import { AssignTaskFunction, ClaimTaskFunction } from '../types/lists.js';
 import '@vanillabp/bc-official-gui-client';
 import '@vanillabp/bc-official-gui-client/dist/models/UserTasks';
 
@@ -13,6 +13,7 @@ interface UserTaskPageProps {
     openTask: OpenTaskFunction;
     navigateToWorkflow: NavigateToWorkflowFunction;
     assignTask: AssignTaskFunction;
+    claimTask: ClaimTaskFunction;
     useTasklistApi: TasklistApiHook;
     t: TranslationFunction;
     header?: React.ReactNode;

package/dist/components/UserTaskPage.js

@@ -3,7 +3,7 @@ import {
   __spreadValues
 } from "../chunk-YH4NJHER.js";
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 import {
   UserTaskAppLayout
 } from "@vanillabp/bc-shared";
@@ -11,12 +11,15 @@ import {
   NoUserTaskGiven,
   useFederationModule
 } from "../index.js";
-const loadUserTask = (tasklistApi, userTaskId, setUserTask, navigateToWorkflow, openTask, unassign) => {
+const loadUserTask = (tasklistApi, userTaskId, setUserTask, navigateToWorkflow, openTask, assign, unassign, claim, unclaim) => {
   tasklistApi.getUserTask(userTaskId, true).then((value) => {
     const bcUserTask = __spreadProps(__spreadValues({}, value), {
       open: () => openTask(value),
       navigateToWorkflow: () => navigateToWorkflow(value),
-      unassign: (userId) => unassign(value, userId)
+      assign: (userId) => assign(value, userId),
+      unassign: (userId) => unassign(value, userId),
+      claim: () => claim(value),
+      unclaim: () => unclaim(value)
     });
     setUserTask(bcUserTask);
   }).catch((error) => {
@@ -33,6 +36,7 @@ const UserTaskPage = ({
   navigateToWorkflow,
   useTasklistApi,
   assignTask,
+  claimTask,
   t,
   children,
   header,
@@ -50,7 +54,10 @@ const UserTaskPage = ({
       setUserTask,
       (userTask2) => navigateToWorkflow(userTask2),
       (userTask2) => openTask(userTask2),
-      (userTask2, userId) => assignTask(userTask2, userId, true)
+      (userTask2, userId) => assignTask(userTask2, userId, false),
+      (userTask2, userId) => assignTask(userTask2, userId, true),
+      (userTask2) => claimTask(userTask2, false),
+      (userTask2) => claimTask(userTask2, true)
     );
   }, [userTaskId]);
   const module = useFederationModule(userTask, "UserTaskForm");
@@ -83,7 +90,10 @@ const UserTaskPage = ({
           setUserTask,
           (userTask2) => navigateToWorkflow(userTask2),
           (userTask2) => openTask(userTask2),
-          (userTask2, userId) => assignTask(userTask2, userId, true)
+          (userTask2, userId) => assignTask(userTask2, userId, false),
+          (userTask2, userId) => assignTask(userTask2, userId, true),
+          (userTask2) => claimTask(userTask2, false),
+          (userTask2) => claimTask(userTask2, true)
         )
       }
     );
@@ -112,9 +122,13 @@ const UserTaskPage = ({
   const Form = module.UserTaskForm;
   const bcUserTask = __spreadProps(__spreadValues({}, userTask), {
     open: () => openTask(userTask),
-    navigateToWorkflow: () => navigateToWorkflow(userTask)
+    navigateToWorkflow: () => navigateToWorkflow(userTask),
+    assign: (userId) => assignTask(userTask, userId, false),
+    unassign: (userId) => assignTask(userTask, userId, true),
+    claim: () => claimTask(userTask, false),
+    unclaim: () => claimTask(userTask, true)
   });
-  return children === void 0 ? /* @__PURE__ */ jsx(UserTaskAppLayout, { header, footer, children: /* @__PURE__ */ jsx(Form, { userTask: bcUserTask }) }) : children(userTask, Form);
+  return /* @__PURE__ */ jsx(Suspense, { children: children === void 0 ? /* @__PURE__ */ jsx(UserTaskAppLayout, { header, footer, children: /* @__PURE__ */ jsx(Form, { userTask: bcUserTask }) }) : children(userTask, Form) });
 };
 export {
   UserTaskPage

package/dist/components/WorkflowPage.d.ts

@@ -1,14 +1,15 @@
 import { ShowLoadingIndicatorFunction, ToastFunction, TranslationFunction } from '@vanillabp/bc-shared';
 import { OpenTaskFunction } from '../types/navigate.js';
-import { WorkflowlistApiHook } from '../types/apis.js';
+import { WorkflowlistApiHook, TasklistApiHook } from '../types/apis.js';
 import '@vanillabp/bc-official-gui-client';
 import '@vanillabp/bc-official-gui-client/dist/models/UserTasks';
 
-declare const WorkflowPage: ({ workflowId, showLoadingIndicator, toast, useWorkflowlistApi, openTask, t, }: {
+declare const WorkflowPage: ({ workflowId, showLoadingIndicator, toast, useWorkflowlistApi, useTasklistApi, openTask, t, }: {
     workflowId: string | undefined;
     showLoadingIndicator: ShowLoadingIndicatorFunction;
     toast: ToastFunction;
     useWorkflowlistApi: WorkflowlistApiHook;
+    useTasklistApi: TasklistApiHook;
     openTask: OpenTaskFunction;
     t: TranslationFunction;
 }) => JSX.Element;

package/dist/components/WorkflowPage.js

@@ -4,13 +4,13 @@ import {
   __spreadValues
 } from "../chunk-YH4NJHER.js";
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { Suspense, useEffect, useRef, useState } from "react";
 import {
   NoWorkflowGiven,
   useFederationModule
 } from "../index.js";
 import { Box } from "grommet";
-const loadWorkflow = (workflowId, workflowListApi, openTask, setWorkflow) => __async(void 0, null, function* () {
+const loadWorkflow = (workflowId, workflowListApi, tasklistApi, openTask, setWorkflow) => __async(void 0, null, function* () {
   const workflow = yield workflowListApi.getWorkflow(workflowId);
   const getUserTasksFunction = (activeOnly, limitListAccordingToCurrentUsersPermissions) => __async(void 0, null, function* () {
     return (yield workflowListApi.getUserTasksOfWorkflow(
@@ -20,8 +20,12 @@ const loadWorkflow = (workflowId, workflowListApi, openTask, setWorkflow) => __a
     )).map((userTask) => __spreadProps(__spreadValues({}, userTask), {
       open: () => openTask(userTask),
       navigateToWorkflow: () => {
-      }
+      },
       // don't change view because workflow is already shown
+      assign: (userId) => tasklistApi.assignTask(userTask.id, userId, false),
+      unassign: (userId) => tasklistApi.assignTask(userTask.id, userId, false),
+      claim: () => tasklistApi.claimTask(userTask.id, false),
+      unclaim: () => tasklistApi.claimTask(userTask.id, true)
     }));
   });
   const bcWorkflows = __spreadProps(__spreadValues({}, workflow), {
@@ -36,12 +40,14 @@ const WorkflowPage = ({
   showLoadingIndicator,
   toast,
   useWorkflowlistApi,
+  useTasklistApi,
   openTask,
   t
 }) => {
   const loadingWorkflow = useRef(false);
   const [workflow, setWorkflow] = useState(void 0);
   const workflowListApi = useWorkflowlistApi();
+  const taskListApi = useTasklistApi();
   useEffect(() => {
     if (workflowId === void 0) {
       return;
@@ -57,10 +63,11 @@ const WorkflowPage = ({
     loadWorkflow(
       workflowId,
       workflowListApi,
+      taskListApi,
       (userTask) => openTask(userTask),
       setWorkflow
     );
-  }, [workflowListApi, workflowId, workflow, loadingWorkflow, showLoadingIndicator, setWorkflow]);
+  }, [workflowListApi, taskListApi, workflow, loadingWorkflow, showLoadingIndicator, setWorkflow]);
   const module = useFederationModule(workflow, "WorkflowPage");
   useEffect(() => {
     if (!module) {
@@ -90,6 +97,7 @@ const WorkflowPage = ({
         retry: () => loadWorkflow(
           workflowId,
           workflowListApi,
+          taskListApi,
           (userTask) => openTask(userTask),
           setWorkflow
         )
@@ -117,7 +125,7 @@ const WorkflowPage = ({
     );
   }
   const Page = module.WorkflowPage;
-  return /* @__PURE__ */ jsx(Box, { fill: true, children: /* @__PURE__ */ jsx(Page, { workflow }) });
+  return /* @__PURE__ */ jsx(Box, { fill: true, children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(Page, { workflow }) }) });
 };
 export {
   WorkflowPage

package/dist/components/index.d.ts

@@ -2,6 +2,7 @@ export { NoElementGivenByModule } from './NoElementGivenByModule.js';
 export { SnapAlignBox, SnapScrollingGrid } from './SnapScrolling.js';
 export { SnapScrollingDataTable } from './SnapScrollingDataTable.js';
 export { ListItem, ListItemData, ListItems, RefreshItemCallbackFunction, ReloadCallbackFunction, SearchableAndSortableUpdatingList } from './SearchableAndSortableUpdatingList.js';
+export { FulltextSearchInput } from './FulltextSearchInput.js';
 export { ListCell, TypeOfItem } from './ListCell.js';
 export { ListOfTasks } from './ListOfTasks.js';
 export { ListOfWorkflows } from './ListOfWorkflows.js';
@@ -11,15 +12,16 @@ export { NoUserTaskGiven } from './NoUserTaskGiven.js';
 export { UserTaskPage } from './UserTaskPage.js';
 export { UserAvatar } from './UserAvatar.js';
 export { User } from './User.js';
-import '../utils/module-federation.js';
-import '../types/navigate.js';
-import '../types/apis.js';
-import '../types/lists.js';
+export { CustomWorkflowModuleComponent } from './CustomWorkflowModuleComponent.js';
 import '@vanillabp/bc-shared';
-import 'styled-components';
-import 'react';
 import 'grommet';
+import 'styled-components';
 import 'csstype';
+import 'react';
 import 'grommet/utils';
+import '../utils/module-federation.js';
 import '@vanillabp/bc-official-gui-client';
+import '../types/navigate.js';
+import '../types/apis.js';
 import '@vanillabp/bc-official-gui-client/dist/models/UserTasks';
+import '../types/lists.js';

package/dist/components/index.js

@@ -2,6 +2,7 @@ export * from "./NoElementGivenByModule.js";
 export * from "./SnapScrolling.js";
 export * from "./SnapScrollingDataTable.js";
 export * from "./SearchableAndSortableUpdatingList.js";
+export * from "./FulltextSearchInput.js";
 export * from "./ListCell.js";
 export * from "./ListOfTasks.js";
 export * from "./ListOfWorkflows.js";
@@ -11,3 +12,4 @@ export * from "./NoUserTaskGiven.js";
 export * from "./UserTaskPage.js";
 export * from "./UserAvatar.js";
 export * from "./User.js";
+export * from "./CustomWorkflowModuleComponent.js";

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { NoElementGivenByModule } from './components/NoElementGivenByModule.js';
 export { SnapAlignBox, SnapScrollingGrid } from './components/SnapScrolling.js';
 export { SnapScrollingDataTable } from './components/SnapScrollingDataTable.js';
 export { ListItem, ListItemData, ListItems, RefreshItemCallbackFunction, ReloadCallbackFunction, SearchableAndSortableUpdatingList } from './components/SearchableAndSortableUpdatingList.js';
+export { FulltextSearchInput } from './components/FulltextSearchInput.js';
 export { ListCell, TypeOfItem } from './components/ListCell.js';
 export { ListOfTasks } from './components/ListOfTasks.js';
 export { ListOfWorkflows } from './components/ListOfWorkflows.js';
@@ -11,15 +12,17 @@ export { NoUserTaskGiven } from './components/NoUserTaskGiven.js';
 export { UserTaskPage } from './components/UserTaskPage.js';
 export { UserAvatar } from './components/UserAvatar.js';
 export { User } from './components/User.js';
-export { Module, ModuleDefinition, TasklistCellProps, UiUriType, UseCase, WorkflowCellProps, attachScript, detachScript, useFederationModule, useFederationModules } from './utils/module-federation.js';
+export { CustomWorkflowModuleComponent } from './components/CustomWorkflowModuleComponent.js';
+export { Module, ModuleDefinition, TasklistCellProps, UiUriType, WorkflowCellProps, attachScript, detachScript, useFederationModule, useFederationModules } from './utils/module-federation.js';
+export { sortWithColumnTypeSpecificAttributes, sortWithoutColumnTypeSpecificAttributes } from './utils/column-type.js';
 export { NavigateToWorkflowFunction, OpenTaskFunction } from './types/navigate.js';
 export { TasklistApi, TasklistApiHook, WakeupSseCallbackReference, WorkflowlistApi, WorkflowlistApiHook } from './types/apis.js';
-export { AssignTaskFunction, ListOfTasksHeaderFooterFunction, ListOfWorkflowsHeaderFooterFunction } from './types/lists.js';
+export { AssignTaskFunction, ClaimTaskFunction, ListOfTasksHeaderFooterFunction, ListOfWorkflowsHeaderFooterFunction } from './types/lists.js';
 import '@vanillabp/bc-shared';
-import 'styled-components';
-import 'react';
 import 'grommet';
+import 'styled-components';
 import 'csstype';
+import 'react';
 import 'grommet/utils';
 import '@vanillabp/bc-official-gui-client';
 import '@vanillabp/bc-official-gui-client/dist/models/UserTasks';