@vanillabp/bc-ui 0.0.3 → 0.0.4

package/dist/components/ListOfTasks.js

@@ -5,31 +5,32 @@ import {
   __spreadValues
 } from "../chunk-YH4NJHER.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Box, CheckBox, Drop, Grid, Grommet, Text, TextInput, Tip } from "grommet";
 import {
-  colorForEndedItemsOrUndefined,
-  colorRowAccordingToUpdateStatus,
+  backgroundColorAccordingToStatus,
   debounce,
   DefaultListCell,
-  ENDED_FONT_COLOR,
   Link,
   ListCell as StyledListCell,
-  ListItemStatus,
+  textColorAccordingToStatus,
   useOnClickOutside,
+  UserDetailsBox,
   useResponsiveScreen
 } from "@vanillabp/bc-shared";
 import {
+  FulltextSearchInput,
   ListCell,
   SearchableAndSortableUpdatingList,
+  sortWithColumnTypeSpecificAttributes,
+  sortWithoutColumnTypeSpecificAttributes,
   TypeOfItem,
   useFederationModules
 } from "../index.js";
 import { Blank, ContactInfo, FormTrash, FormView, Hide, Refresh, User as UserIcon } from "grommet-icons";
 import { User } from "./User.js";
-import { ListColumnHeader } from "./ListColumnHeader.js";
+import { AUTO_SIZE_COLUMN, ListColumnHeader } from "./ListColumnHeader.js";
 import { useTheme } from "styled-components";
-const minWidthOfTitleColumn = "20rem";
 const updateModuleDefinitions = (userTasks, existingModuleDefinitions, setModulesOfTasks, existingUserTaskDefinitions, setDefinitionsOfTasks) => {
   const newModuleDefinitions = userTasks.filter((userTask) => userTask.workflowModuleId !== void 0).reduce((moduleDefinitions, userTask) => moduleDefinitions.includes(userTask) ? moduleDefinitions : moduleDefinitions.concat(userTask), existingModuleDefinitions || []);
   if ((existingModuleDefinitions == null ? void 0 : existingModuleDefinitions.length) !== newModuleDefinitions.length) {
@@ -41,32 +42,38 @@ const updateModuleDefinitions = (userTasks, existingModuleDefinitions, setModule
     }
   }
 };
-const loadUserTasks = (tasklistApi, setNumberOfUserTasks, existingModuleDefinitions, setModulesOfTasks, existingUserTaskDefinitions, setDefinitionsOfTasks, pageSize, pageNumber, initialTimestamp, sort, sortAscending, mapToBcUserTask) => __async(void 0, null, function* () {
+const loadUserTasks = (tasklistApi, numberOfUserTask, setNumberOfUserTasks, existingModuleDefinitions, setModulesOfTasks, existingUserTaskDefinitions, setDefinitionsOfTasks, pageSize, pageNumber, initialTimestamp, searchQueries, sort, sortAscending, mapToBcUserTask) => __async(void 0, null, function* () {
   const result = yield tasklistApi.getUserTasks(
     (/* @__PURE__ */ new Date()).getTime().toString(),
     pageNumber,
     pageSize,
     sort,
     sortAscending,
+    searchQueries,
     initialTimestamp
   );
-  setNumberOfUserTasks(result.page.totalElements);
+  if (numberOfUserTask !== result.page.totalElements) {
+    setNumberOfUserTasks(result.page.totalElements);
+  }
   updateModuleDefinitions(result.userTasks, existingModuleDefinitions, setModulesOfTasks, existingUserTaskDefinitions, setDefinitionsOfTasks);
   return {
     serverTimestamp: result.serverTimestamp,
     items: result.userTasks.map((userTask) => mapToBcUserTask(userTask))
   };
 });
-const reloadUserTasks = (tasklistApi, setNumberOfUserTasks, existingModuleDefinitions, setModulesOfTasks, existingUserTaskDefinitions, setDefinitionsOfTasks, numberOfItems, knownItemsIds, initialTimestamp, sort, sortAscending, mapToBcUserTask, allSelected) => __async(void 0, null, function* () {
+const reloadUserTasks = (tasklistApi, numberOfUserTask, setNumberOfUserTasks, existingModuleDefinitions, setModulesOfTasks, existingUserTaskDefinitions, setDefinitionsOfTasks, numberOfItems, knownItemsIds, initialTimestamp, searchQueries, sort, sortAscending, mapToBcUserTask, allSelected) => __async(void 0, null, function* () {
   const result = yield tasklistApi.getUserTasksUpdate(
     (/* @__PURE__ */ new Date()).getTime().toString(),
     numberOfItems,
     knownItemsIds,
     sort,
     sortAscending,
+    searchQueries,
     initialTimestamp
   );
-  setNumberOfUserTasks(result.page.totalElements);
+  if (numberOfUserTask !== result.page.totalElements) {
+    setNumberOfUserTasks(result.page.totalElements);
+  }
   updateModuleDefinitions(result.userTasks, existingModuleDefinitions, setModulesOfTasks, existingUserTaskDefinitions, setDefinitionsOfTasks);
   return {
     serverTimestamp: result.serverTimestamp,
@@ -89,6 +96,7 @@ const SetReadStatusButtons = ({
     Box,
     {
       direction: "row",
+      flex: false,
       round: { size: "0.4rem" },
       border: { color },
       elevation: "small",
@@ -184,10 +192,17 @@ const ClaimButtons = ({
                 justify: "center",
                 children: [
                   /* @__PURE__ */ jsx(
-                    UserIcon,
+                    Box,
                     {
-                      size: "20rem",
-                      color: textColor
+                      pad: { vertical: "0.25rem" },
+                      width: "1.5rem",
+                      height: "2rem",
+                      children: /* @__PURE__ */ jsx(
+                        UserIcon,
+                        {
+                          color: textColor
+                        }
+                      )
                     }
                   ),
                   isNotPhone && /* @__PURE__ */ jsx(
@@ -207,38 +222,43 @@ const ClaimButtons = ({
           Tip,
           {
             content: t("unclaim_tasks"),
-            children: /* @__PURE__ */ jsxs(
+            children: /* @__PURE__ */ jsx(
               Box,
               {
                 hoverIndicator: "light-2",
                 focusIndicator: false,
                 onClick: unclaimTasks,
-                round: { size: "0.4rem", corner: "right" },
-                style: { position: "relative" },
-                width: "2rem",
                 height: "2rem",
+                pad: { horizontal: "0.4rem" },
+                round: { size: "0.4rem", corner: "right" },
                 align: "center",
                 justify: "center",
                 border: { color, side: "left" },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    UserIcon,
-                    {
-                      style: { position: "absolute" },
-                      color: textColor,
-                      size: "20rem"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Blank,
-                    {
-                      style: { position: "absolute" },
-                      color: textColor,
-                      size: "20rem",
-                      children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("line", { x1: "24", y1: "4", x2: "4", y2: "24", strokeWidth: "2" }) })
-                    }
-                  )
-                ]
+                children: /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    style: { position: "relative" },
+                    pad: { vertical: "0.25rem" },
+                    width: "1.5rem",
+                    height: "2rem",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        UserIcon,
+                        {
+                          color: textColor
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Blank,
+                        {
+                          style: { position: "absolute" },
+                          color: textColor,
+                          children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("line", { x1: "24", y1: "4", x2: "4", y2: "24", strokeWidth: "2" }) })
+                        }
+                      )
+                    ]
+                  }
+                )
               }
             )
           }
@@ -288,6 +308,7 @@ const AssignButton = ({
     setEdit(false);
     setHide(false);
   };
+  const { isPhone } = useResponsiveScreen();
   useOnClickOutside(inputRef, hideEdit);
   const findUsersDebounced = useMemo(() => debounce(loadResult, 300), [tasklistApi, currentQuery]);
   const updateResult = (newQuery) => {
@@ -312,7 +333,7 @@ const AssignButton = ({
           Box,
           {
             height: "2rem",
-            width: "15rem",
+            width: isPhone ? "10rem" : "15rem",
             align: "center",
             justify: "center",
             style: { position: "relative" },
@@ -416,6 +437,7 @@ const AssignButton = ({
                         children: /* @__PURE__ */ jsx(
                           User,
                           {
+                            t,
                             user,
                             isUserLoggedIn: false,
                             iconSize: "small",
@@ -445,12 +467,12 @@ const RefreshButton = ({
   return /* @__PURE__ */ jsx(
     Box,
     {
-      hoverIndicator: disabled ? "light-2" : "accent-1",
+      hoverIndicator: disabled ? "light-2" : "list-refresh",
       focusIndicator: false,
       onClick: refresh,
       direction: "row",
       elevation: "small",
-      background: !disabled ? { color: "accent-1", opacity: "strong" } : void 0,
+      background: !disabled ? { color: "list-refresh", opacity: "strong" } : void 0,
       round: { size: "0.4rem" },
       border: { color },
       children: /* @__PURE__ */ jsx(
@@ -461,6 +483,7 @@ const RefreshButton = ({
             Box,
             {
               height: "2rem",
+              width: "2rem",
               pad: { horizontal: "0.4rem" },
               align: "center",
               direction: "row",
@@ -468,7 +491,6 @@ const RefreshButton = ({
               children: /* @__PURE__ */ jsx(
                 Refresh,
                 {
-                  size: "20rem",
                   color: textColor
                 }
               )
@@ -562,8 +584,8 @@ const DefaultFooter = ({
                             height: "100%",
                             align: "center",
                             justify: "center",
-                            background: { color: "accent-3", opacity: 0.1 },
-                            children: /* @__PURE__ */ jsx(Text, { size: "xsmall", children: "T" })
+                            background: "list-new",
+                            children: /* @__PURE__ */ jsx(Text, { size: "xsmall", color: "list-text-new", children: "T" })
                           }
                         )
                       }
@@ -592,8 +614,8 @@ const DefaultFooter = ({
                             height: "100%",
                             align: "center",
                             justify: "center",
-                            background: { color: "accent-1", opacity: 0.35 },
-                            children: /* @__PURE__ */ jsx(Text, { size: "xsmall", children: "T" })
+                            background: "list-updated",
+                            children: /* @__PURE__ */ jsx(Text, { size: "xsmall", color: "list-text-updated", children: "T" })
                           }
                         )
                       }
@@ -622,8 +644,8 @@ const DefaultFooter = ({
                             height: "100%",
                             align: "center",
                             justify: "center",
-                            background: { color: "light-2", opacity: 0.5 },
-                            children: /* @__PURE__ */ jsx(Text, { size: "xsmall", color: ENDED_FONT_COLOR, children: "T" })
+                            background: "list-ended",
+                            children: /* @__PURE__ */ jsx(Text, { size: "xsmall", color: "list-text-ended", children: "T" })
                           }
                         )
                       }
@@ -652,8 +674,8 @@ const DefaultFooter = ({
                             height: "100%",
                             align: "center",
                             justify: "center",
-                            background: { color: "light-2", opacity: 0.5 },
-                            children: /* @__PURE__ */ jsx(Text, { size: "xsmall", children: "T" })
+                            background: "list-removed_from_list",
+                            children: /* @__PURE__ */ jsx(Text, { size: "xsmall", color: "list-text-removed_from_list", children: "T" })
                           }
                         )
                       }
@@ -682,7 +704,10 @@ const DefaultHeader = ({
   unclaimTasks,
   claimTasksDisabled,
   assignTasks,
-  assignDisabled
+  assignDisabled,
+  initialKwicQuery,
+  limitListToKwic,
+  kwic
 }) => {
   return /* @__PURE__ */ jsxs(
     Box,
@@ -729,18 +754,28 @@ const DefaultHeader = ({
             refresh,
             disabled: refreshDisabled
           }
+        ),
+        /* @__PURE__ */ jsx(
+          FulltextSearchInput,
+          {
+            t,
+            initialQuery: initialKwicQuery,
+            limitListToKwic,
+            kwic
+          }
         )
       ]
     }
   );
 };
 const CandidateUsersListCell = ({
+  t,
   item
 }) => {
   var _a, _b;
   const targetRef = useRef(null);
   const [dropIdentifier, setDropIdentifier] = useState(void 0);
-  const background = colorRowAccordingToUpdateStatus(item);
+  const background = backgroundColorAccordingToStatus(item);
   return /* @__PURE__ */ jsx(
     StyledListCell,
     {
@@ -759,29 +794,24 @@ const CandidateUsersListCell = ({
           Drop,
           {
             inline: true,
+            stretch: true,
             round: "xsmall",
             onMouseLeave: () => setDropIdentifier(void 0),
             target: targetRef,
-            children: /* @__PURE__ */ jsx(
-              Box,
-              {
-                direction: "column",
-                margin: "xsmall",
-                gap: "xsmall",
-                children: (_b = item.data.candidateUsers) == null ? void 0 : _b.map((user) => /* @__PURE__ */ jsxs(
-                  Box,
+            children: /* @__PURE__ */ jsx(Grid, { columns: ["auto", "auto"], gap: "xsmall", margin: "xsmall", children: (_b = item.data.candidateUsers) == null ? void 0 : _b.map((user) => {
+              var _a2, _b2;
+              return /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  Text,
                   {
-                    direction: "row",
-                    align: "center",
-                    justify: "center",
-                    children: [
-                      user,
-                      /* @__PURE__ */ jsx(FormTrash, { onClick: () => item.data.unassign(user) })
-                    ]
+                    style: { whiteSpace: "nowrap" },
+                    tip: { content: /* @__PURE__ */ jsx(UserDetailsBox, { user, t }) },
+                    children: (_b2 = (_a2 = user.displayShort) != null ? _a2 : user.email) != null ? _b2 : user.id
                   }
-                ))
-              }
-            )
+                ),
+                /* @__PURE__ */ jsx(FormTrash, { onClick: () => item.data.unassign(user.id) })
+              ] });
+            }) })
           }
         )
       ] }) : void 0
@@ -792,7 +822,7 @@ const SelectDefaultListCell = ({
   item,
   selectItem
 }) => {
-  const background = colorRowAccordingToUpdateStatus(item);
+  const background = backgroundColorAccordingToStatus(item);
   return /* @__PURE__ */ jsx(
     StyledListCell,
     {
@@ -801,6 +831,7 @@ const SelectDefaultListCell = ({
       children: /* @__PURE__ */ jsx(
         CheckBox,
         {
+          id: item.id,
           checked: item.selected,
           onChange: (event) => selectItem(event.currentTarget.checked)
         }
@@ -819,7 +850,8 @@ const TitleDefaultListCell = ({
   } else {
     title = item.data["title"][titleLanguages[0]];
   }
-  const background = colorRowAccordingToUpdateStatus(item);
+  const background = backgroundColorAccordingToStatus(item);
+  const text = textColorAccordingToStatus(item);
   return /* @__PURE__ */ jsx(
     StyledListCell,
     {
@@ -828,12 +860,12 @@ const TitleDefaultListCell = ({
       children: /* @__PURE__ */ jsx(
         Text,
         {
-          color: colorForEndedItemsOrUndefined(item),
           weight: item.read === void 0 ? "bold" : "normal",
           truncate: "tip",
-          children: item.status === ListItemStatus.ENDED ? /* @__PURE__ */ jsx(Fragment, { children: title }) : /* @__PURE__ */ jsx(
+          children: /* @__PURE__ */ jsx(
             Link,
             {
+              color: text,
               onClick: item.data.open,
               children: title
             }
@@ -871,9 +903,11 @@ const ListOfTasks = ({
   t,
   currentLanguage,
   defaultSort,
-  defaultSortAscending,
+  defaultSortAscending = true,
   name,
   columns,
+  minWidthOfColumns = "4rem",
+  minWidthOfAutoColumn = "20rem",
   children,
   headerHeight = "3rem",
   footer,
@@ -884,12 +918,14 @@ const ListOfTasks = ({
   excludeIdColumn = false,
   columnHeader,
   columnHeaderBackground = "dark-3",
-  columnHeaderSeparator
+  columnHeaderSeparator = "light-6",
+  defaultSearchQueries = []
 }) => {
   const { isPhone, isTablet } = useResponsiveScreen();
   const wakeupSseCallback = useRef(void 0);
   const tasklistApi = useTasklistApi(wakeupSseCallback);
   const [refreshIndicator, setRefreshIndicator] = useState(/* @__PURE__ */ new Date());
+  const [searchQueries, setSearchQueries] = useState(defaultSearchQueries);
   const updateListRef = useRef(void 0);
   const updateList = useMemo(() => (ev) => __async(void 0, null, function* () {
     if (!updateListRef.current)
@@ -906,19 +942,22 @@ const ListOfTasks = ({
     return __spreadProps(__spreadValues({}, userTask), {
       open: () => openTask(userTask),
       navigateToWorkflow: () => navigateToWorkflow(userTask),
-      unassign: (userId) => unassign(userTask.id, userId)
+      assign: (userId) => assignFunction(userTask.id, userId, false),
+      unassign: (userId) => assignFunction(userTask.id, userId, true),
+      claim: () => tasklistApi.claimTask(userTask.id, false),
+      unclaim: () => tasklistApi.claimTask(userTask.id, true)
     });
   };
   const userTasks = useRef(void 0);
   const [numberOfTasks, setNumberOfTasks] = useState(0);
   const [modulesOfTasks, setModulesOfTasks] = useState(void 0);
-  const [languagesOfTitles, setLanguagesOfTitles] = useState([currentLanguage]);
   const [definitionsOfTasks, setDefinitionsOfTasks] = useState(void 0);
   useEffect(
     () => {
       const loadMetaInformation = () => __async(void 0, null, function* () {
-        const result = yield loadUserTasks(
+        yield loadUserTasks(
           tasklistApi,
+          numberOfTasks,
           setNumberOfTasks,
           modulesOfTasks,
           setModulesOfTasks,
@@ -927,17 +966,11 @@ const ListOfTasks = ({
           20,
           0,
           void 0,
+          searchQueries,
           void 0,
           true,
           mapToBcUserTask
         );
-        const titleLanguages = result.items.flatMap((userTask) => Object.keys(userTask.title)).reduce((allLanguages, titleLanguage) => {
-          if (!allLanguages.includes(titleLanguage)) {
-            allLanguages.push(titleLanguage);
-          }
-          return allLanguages;
-        }, new Array(currentLanguage));
-        setLanguagesOfTitles(titleLanguages);
       });
       if (userTasks.current === void 0) {
         showLoadingIndicator(true);
@@ -946,7 +979,7 @@ const ListOfTasks = ({
     },
     // tasklistApi is not part of dependency because it changes one time but this is irrelevant to the
     // purpose of preloading modules used by usertasks
-    [userTasks, setNumberOfTasks, setModulesOfTasks, setDefinitionsOfTasks, showLoadingIndicator, refreshIndicator, setLanguagesOfTitles]
+    [userTasks, setNumberOfTasks, setModulesOfTasks, setDefinitionsOfTasks, showLoadingIndicator, refreshIndicator]
   );
   const [columnsOfTasks, setColumnsOfTasks] = useState(void 0);
   const modules = useFederationModules(modulesOfTasks, "UserTaskList");
@@ -983,8 +1016,9 @@ const ListOfTasks = ({
     if (totalColumns.title === void 0) {
       totalColumns.title = {
         title: { [currentLanguage]: t("column_title") },
+        type: "i18n",
         path: "title",
-        width: "",
+        width: AUTO_SIZE_COLUMN,
         priority: 0,
         show: true,
         sortable: true,
@@ -995,8 +1029,9 @@ const ListOfTasks = ({
     if (totalColumns.assignee === void 0) {
       totalColumns.assignee = {
         path: "assignee",
+        type: "person",
         show: true,
-        sortable: false,
+        sortable: true,
         filterable: false,
         title: { [currentLanguage]: t("column_assignee") },
         width: "10rem",
@@ -1028,8 +1063,8 @@ const ListOfTasks = ({
   const [anySelected, setAnySelected] = useState(false);
   const [refreshNecessary, setRefreshNecessary] = useState(false);
   const [effectiveSort, _setSort] = useState(defaultSort);
-  const sort = (effectiveSort == null ? void 0 : effectiveSort.startsWith("title.")) ? "title" : effectiveSort;
-  const [sortAscending, _setSortAscending] = useState(defaultSortAscending === void 0 ? true : defaultSortAscending);
+  const sort = sortWithoutColumnTypeSpecificAttributes(currentLanguage, effectiveSort);
+  const [sortAscending, _setSortAscending] = useState(defaultSortAscending);
   const refreshList = () => {
     userTasks.current = void 0;
     setRefreshNecessary(false);
@@ -1037,40 +1072,43 @@ const ListOfTasks = ({
     setRefreshIndicator(/* @__PURE__ */ new Date());
   };
   const setSort = (column) => {
-    if (column) {
-      if (column.path === "title") {
-        _setSort("title." + languagesOfTitles.join(",title."));
-      } else {
-        _setSort(column.path);
-      }
+    let ascending;
+    if (!column) {
+      ascending = defaultSortAscending;
+      column = columnsOfTasks == null ? void 0 : columnsOfTasks.filter((c) => c.path === defaultSort).at(0);
     } else {
-      _setSort(defaultSort);
+      ascending = true;
     }
-    _setSortAscending(defaultSortAscending === void 0 ? true : defaultSortAscending);
+    _setSort(sortWithColumnTypeSpecificAttributes(currentLanguage, column));
+    _setSortAscending(ascending);
     refreshList();
   };
-  const setSortAscending = (sortAscending2) => {
-    _setSortAscending(sortAscending2);
+  const setSortAscending = (newSortAscending) => {
+    _setSortAscending(newSortAscending);
     refreshList();
   };
-  const unassign = (userTaskId, userId) => {
-    tasklistApi.assignTask(userTaskId, userId, true);
+  const assignFunction = (userTaskId, userId, unassign) => {
+    tasklistApi.assignTask(userTaskId, userId, unassign);
   };
   const [columnWidthAdjustments, setColumnWidthAdjustments] = useState({});
-  const getColumnSize = (column) => {
-    return !column.resizeable ? column.width : column.width !== "" ? `max(4rem, calc(${column.width} + ${columnWidthAdjustments[column.path] ? columnWidthAdjustments[column.path] : 0}px))` : columnWidthAdjustments[column.path] ? `${columnWidthAdjustments[column.path]}px` : void 0;
-  };
-  const setColumnWidthAdjustment = (column, adjustment) => {
-    if (column.width === "") {
-      column.width = `${adjustment}px`;
-      return;
+  const autoColumnWidth = useRef();
+  const getColumnSize = useCallback(
+    (column) => {
+      var _a;
+      return !column.resizeable ? column.width : column.width !== AUTO_SIZE_COLUMN ? `max(${((_a = autoColumnWidth.current) == null ? void 0 : _a.column.path) === column.path ? minWidthOfAutoColumn : minWidthOfColumns}, calc(${column.width} + ${columnWidthAdjustments[column.path] ? columnWidthAdjustments[column.path] : 0}px))` : columnWidthAdjustments[column.path] ? `${columnWidthAdjustments[column.path]}px` : void 0;
+    },
+    [columnWidthAdjustments]
+  );
+  const setColumnWidthAdjustment = useCallback((column, adjustment) => {
+    if (autoColumnWidth.current && autoColumnWidth.current.column.width === AUTO_SIZE_COLUMN) {
+      autoColumnWidth.current.column.width = `${autoColumnWidth.current.width}px`;
     }
     const current = columnWidthAdjustments[column.path];
     if (current === adjustment)
       return;
     setColumnWidthAdjustments(__spreadProps(__spreadValues({}, columnWidthAdjustments), { [column.path]: adjustment }));
-  };
-  const selectAll = (select) => {
+  }, [columnWidthAdjustments, setColumnWidthAdjustments, autoColumnWidth]);
+  const selectAll = useCallback((select) => {
     refreshItemRef.current(
       userTasks.current.reduce((allItemIds, item) => {
         item.selected = select;
@@ -1082,8 +1120,8 @@ const ListOfTasks = ({
     if (anySelected !== select) {
       setAnySelected(select);
     }
-  };
-  const selectItem = (item, select) => {
+  }, [refreshItemRef, userTasks, allSelected, anySelected, setAnySelected, setAllSelected]);
+  const selectItem = useCallback((item, select) => {
     item.selected = select;
     refreshItemRef.current([item.id]);
     const currentlyAllSelected = userTasks.current.reduce((allSelected2, userTask) => allSelected2 && userTask.selected, true);
@@ -1094,48 +1132,70 @@ const ListOfTasks = ({
     if (anySelected !== currentlyAnySelected) {
       setAnySelected(currentlyAnySelected);
     }
-  };
-  const columnsOfList = columnsOfTasks === void 0 ? [] : columnsOfTasks.filter((column) => column.show).filter((column) => columns === void 0 || columns.includes(column.path)).map((column, columnIndex, allColumns) => ({
-    property: column.path,
-    size: getColumnSize(column),
-    plain: true,
-    verticalAlign: "top",
-    header: /* @__PURE__ */ jsx(
-      ListColumnHeader,
-      {
-        t,
-        currentLanguage,
-        nameOfList: name,
-        columnHeader,
-        hasColumnWidthAdjustment: columnWidthAdjustments[column.path] !== void 0,
-        setColumnWidthAdjustment,
-        sort: sort === column.path,
-        setSort,
-        sortAscending,
-        setSortAscending,
-        column,
-        columnIndex,
-        numberOfAllColumns: allColumns.length,
-        allSelected,
-        selectAll
-      }
-    ),
-    render: (item) => /* @__PURE__ */ jsx(
-      ListCell,
-      {
-        modulesAvailable: modules,
-        column,
-        currentLanguage,
-        nameOfList: name,
-        typeOfItem: TypeOfItem.TaskList,
-        showUnreadAsBold: true,
-        t,
-        item,
-        selectItem,
-        defaultListCell: UserTaskDefaultListCell
-      }
-    )
-  }));
+  }, [refreshItemRef, userTasks, allSelected, anySelected, setAnySelected, setAllSelected]);
+  const columnsOfList = useMemo(
+    () => columnsOfTasks === void 0 ? [] : columnsOfTasks.filter((column) => column.show).filter((column) => columns === void 0 || columns.includes(column.path)).map((column, columnIndex, allColumns) => ({
+      property: column.path,
+      size: getColumnSize(column),
+      plain: true,
+      verticalAlign: "top",
+      header: /* @__PURE__ */ jsx(
+        ListColumnHeader,
+        {
+          t,
+          currentLanguage,
+          nameOfList: name,
+          columnHeader,
+          columnWidthAdjustment: columnWidthAdjustments[column.path],
+          setAutoColumnWidth: (column2, width) => autoColumnWidth.current = { column: column2, width },
+          setColumnWidthAdjustment,
+          sort: sort === column.path,
+          setSort,
+          isDefaultSort: column.path === defaultSort,
+          sortAscending,
+          defaultSortAscending,
+          setSortAscending,
+          column,
+          columnIndex,
+          numberOfAllColumns: allColumns.length,
+          allSelected,
+          selectAll
+        }
+      ),
+      render: (item) => /* @__PURE__ */ jsx(
+        ListCell,
+        {
+          modulesAvailable: modules,
+          column,
+          currentLanguage,
+          nameOfList: name,
+          typeOfItem: TypeOfItem.TaskList,
+          showUnreadAsBold: true,
+          t,
+          item,
+          selectItem,
+          defaultListCell: UserTaskDefaultListCell
+        }
+      )
+    })),
+    [
+      modules,
+      currentLanguage,
+      name,
+      columnsOfTasks,
+      setSort,
+      setSortAscending,
+      sortAscending,
+      defaultSortAscending,
+      selectItem,
+      selectAll,
+      allSelected,
+      getColumnSize,
+      columnWidthAdjustments,
+      defaultSort,
+      setColumnWidthAdjustment
+    ]
+  );
   const markAsRead = (unread) => {
     const read = unread ? void 0 : /* @__PURE__ */ new Date();
     const userTaskMarkedIds = userTasks.current.filter((userTask) => userTask.selected).map((userTask) => {
@@ -1177,6 +1237,27 @@ const ListOfTasks = ({
     setAnySelected(false);
     tasklistApi.assignTasks(userTaskMarkedIds, userId);
   };
+  const initialKwicQuery = (columnPath) => {
+    const query = searchQueries.filter((query2) => query2.path === columnPath).map((query2) => query2.query);
+    if (query.length === 0)
+      return "";
+    return query[0];
+  };
+  const setKwic = (columnPath, value) => {
+    const newSearchQueries = searchQueries.filter((query) => query.path !== columnPath);
+    if (value !== void 0 && value.trim().length > 0) {
+      newSearchQueries.push({ path: columnPath, query: value, caseInsensitive: true });
+    }
+    setSearchQueries(newSearchQueries);
+    refreshList();
+  };
+  const kwic = (columnPath, query) => __async(void 0, null, function* () {
+    return yield tasklistApi.kwicUserTasks(
+      query,
+      columnPath,
+      searchQueries
+    );
+  });
   const defaultFooter = () => /* @__PURE__ */ jsx(
     DefaultFooter,
     {
@@ -1200,7 +1281,10 @@ const ListOfTasks = ({
       unclaimTasks: () => claim(true),
       claimTasksDisabled: !anySelected,
       assignTasks: assign,
-      assignDisabled: !anySelected
+      assignDisabled: !anySelected,
+      initialKwicQuery,
+      limitListToKwic: setKwic,
+      kwic
     }
   );
   const themeContext = useTheme();
@@ -1244,7 +1328,7 @@ const ListOfTasks = ({
                 rowSeparator,
                 applyBackgroundColor,
                 showLoadingIndicator,
-                minWidthOfAutoColumn: minWidthOfTitleColumn,
+                minWidthOfAutoColumn,
                 columns: columnsOfList,
                 itemsRef: userTasks,
                 showColumnHeaders,
@@ -1258,6 +1342,7 @@ const ListOfTasks = ({
                     // @ts-ignore
                     yield loadUserTasks(
                       tasklistApi,
+                      numberOfTasks,
                       setNumberOfTasks,
                       modulesOfTasks,
                       setModulesOfTasks,
@@ -1266,6 +1351,7 @@ const ListOfTasks = ({
                       pageSize,
                       pageNumber,
                       initialTimestamp,
+                      searchQueries,
                       effectiveSort,
                       sortAscending,
                       mapToBcUserTask
@@ -1277,6 +1363,7 @@ const ListOfTasks = ({
                     // @ts-ignore
                     yield reloadUserTasks(
                       tasklistApi,
+                      numberOfTasks,
                       setNumberOfTasks,
                       modulesOfTasks,
                       setModulesOfTasks,
@@ -1285,6 +1372,7 @@ const ListOfTasks = ({
                       numberOfItems,
                       updatedItemsIds,
                       initialTimestamp,
+                      searchQueries,
                       effectiveSort,
                       sortAscending,
                       mapToBcUserTask