@vanillabp/bc-ui 0.0.3 → 0.0.5

package/dist/components/ListOfWorkflows.js

@@ -5,27 +5,27 @@ import {
   __spreadValues
 } from "../chunk-YH4NJHER.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { Box, CheckBox, Grid, Text, TextInput, Tip } from "grommet";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Box, CheckBox, Grid, Text, Tip } from "grommet";
 import {
-  colorForEndedItemsOrUndefined,
-  colorRowAccordingToUpdateStatus,
-  debounce,
+  backgroundColorAccordingToStatus,
   DefaultListCell,
-  ENDED_FONT_COLOR,
   Link,
   ListCell as StyledListCell,
+  textColorAccordingToStatus,
   useResponsiveScreen
 } from "@vanillabp/bc-shared";
 import {
+  FulltextSearchInput,
   ListCell,
   SearchableAndSortableUpdatingList,
+  sortWithColumnTypeSpecificAttributes,
+  sortWithoutColumnTypeSpecificAttributes,
   TypeOfItem,
   useFederationModules
 } from "../index.js";
-import { ListColumnHeader } from "./ListColumnHeader.js";
-import { Clear, Refresh, Search } from "grommet-icons";
-const minWidthOfTitleColumn = "20rem";
+import { AUTO_SIZE_COLUMN, ListColumnHeader } from "./ListColumnHeader.js";
+import { Refresh } from "grommet-icons";
 const updateModuleDefinitions = (workflows, existingModuleDefinitions, setModulesOfWorkflows, existingWorkflowDefinitions, setDefinitionsOfWorkflows) => {
   const newModuleDefinitions = workflows.filter((workflow) => workflow.workflowModuleId !== void 0).reduce((moduleDefinitions, workflow) => moduleDefinitions.includes(workflow) ? moduleDefinitions : moduleDefinitions.concat(workflow), existingModuleDefinitions || []);
   if ((existingModuleDefinitions == null ? void 0 : existingModuleDefinitions.length) !== newModuleDefinitions.length) {
@@ -37,16 +37,18 @@ const updateModuleDefinitions = (workflows, existingModuleDefinitions, setModule
     }
   }
 };
-const loadWorkflows = (workflowlistApi, setNumberOfWorkflows, existingModuleDefinitions, setModulesOfWorkflows, existingWorkflowDefinitions, setDefinitionsOfWorkflows, pageSize, pageNumber, initialTimestamp, searchQueries, sort, sortAscending, mapToBcWorkflow) => __async(void 0, null, function* () {
+const loadWorkflows = (workflowlistApi, numberOfWorkflows, setNumberOfWorkflows, existingModuleDefinitions, setModulesOfWorkflows, existingWorkflowDefinitions, setDefinitionsOfWorkflows, pageSize, pageNumber, initialTimestamp, searchQueries, sort, sortAscending, mapToBcWorkflow) => __async(void 0, null, function* () {
   const result = yield workflowlistApi.getWorkflows((/* @__PURE__ */ new Date()).getTime().toString(), pageNumber, pageSize, sort, sortAscending, searchQueries, initialTimestamp);
-  setNumberOfWorkflows(result.page.totalElements);
+  if (numberOfWorkflows !== result.page.totalElements) {
+    setNumberOfWorkflows(result.page.totalElements);
+  }
   updateModuleDefinitions(result.workflows, existingModuleDefinitions, setModulesOfWorkflows, existingWorkflowDefinitions, setDefinitionsOfWorkflows);
   return {
     serverTimestamp: result.serverTimestamp,
     items: result.workflows.map((workflow) => mapToBcWorkflow(workflow))
   };
 });
-const reloadWorkflows = (workflowlistApi, setNumberOfWorkflows, existingModuleDefinitions, setModulesOfWorkflows, existingWorkflowDefinitions, setDefinitionsOfWorkflows, numberOfItems, knownItemsIds, initialTimestamp, searchQueries, sort, sortAscending, mapToBcWorkflow) => __async(void 0, null, function* () {
+const reloadWorkflows = (workflowlistApi, numberOfWorkflows, setNumberOfWorkflows, existingModuleDefinitions, setModulesOfWorkflows, existingWorkflowDefinitions, setDefinitionsOfWorkflows, numberOfItems, knownItemsIds, initialTimestamp, searchQueries, sort, sortAscending, mapToBcWorkflow) => __async(void 0, null, function* () {
   const result = yield workflowlistApi.getWorkflowsUpdate(
     (/* @__PURE__ */ new Date()).getTime().toString(),
     numberOfItems,
@@ -56,162 +58,15 @@ const reloadWorkflows = (workflowlistApi, setNumberOfWorkflows, existingModuleDe
     searchQueries,
     initialTimestamp
   );
-  setNumberOfWorkflows(result.page.totalElements);
+  if (numberOfWorkflows !== result.page.totalElements) {
+    setNumberOfWorkflows(result.page.totalElements);
+  }
   updateModuleDefinitions(result.workflows, existingModuleDefinitions, setModulesOfWorkflows, existingWorkflowDefinitions, setDefinitionsOfWorkflows);
   return {
     serverTimestamp: result.serverTimestamp,
     items: result.workflows.map((workflow) => mapToBcWorkflow(workflow))
   };
 });
-const FulltextSearch = ({
-  t,
-  initialQuery,
-  limitListToKwic,
-  kwic
-  // focus = false,
-}) => {
-  const { isPhone } = useResponsiveScreen();
-  const textFieldRef = useRef(null);
-  const [query, setQuery] = useState(initialQuery);
-  const currentQuery = useRef(initialQuery(void 0));
-  const [suggestions, setSuggestions] = useState(void 0);
-  const ignoreKeyEnter = useRef(false);
-  const select = (value, suggestion) => {
-    if (suggestion) {
-      ignoreKeyEnter.current = true;
-    } else if (ignoreKeyEnter.current) {
-      ignoreKeyEnter.current = false;
-      return;
-    }
-    if (value === void 0)
-      return;
-    setSuggestions(void 0);
-    setQuery(value);
-    currentQuery.current = value;
-    limitListToKwic(void 0, value);
-  };
-  const kwicDebounced = useMemo(() => debounce(() => __async(void 0, null, function* () {
-    const result = yield kwic(void 0, currentQuery.current);
-    const newSuggestions = result.map((r) => ({
-      value: r.item,
-      label: /* @__PURE__ */ jsxs(
-        Box,
-        {
-          direction: "row",
-          justify: "between",
-          pad: "xsmall",
-          children: [
-            /* @__PURE__ */ jsx(
-              Text,
-              {
-                weight: "bold",
-                truncate: "tip",
-                children: r.item
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Box,
-              {
-                align: "right",
-                children: r.count
-              }
-            )
-          ]
-        }
-      )
-    }));
-    setSuggestions(
-      newSuggestions.length > 20 ? [...newSuggestions.slice(0, 20), { value: void 0, label: /* @__PURE__ */ jsx(Box, { pad: "xsmall", children: t("kwic_to-many-hits") }) }] : newSuggestions
-    );
-  }), 300), [currentQuery, setSuggestions]);
-  const updateResult = (newQuery) => {
-    currentQuery.current = newQuery;
-    setQuery(newQuery);
-    if (newQuery.length < 3) {
-      if (suggestions) {
-        setSuggestions(void 0);
-      }
-      return;
-    }
-    kwicDebounced();
-  };
-  const clear = () => {
-    currentQuery.current = "";
-    setQuery("");
-    setSuggestions(void 0);
-    textFieldRef.current.focus();
-    limitListToKwic(void 0, void 0);
-  };
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      width: isPhone ? "100%" : "min(100%, 30rem)",
-      elevation: "small",
-      alignContent: "center",
-      hoverIndicator: "white",
-      focusIndicator: false,
-      round: { size: "0.4rem" },
-      border: { color: "dark-4" },
-      children: /* @__PURE__ */ jsxs(
-        Grid,
-        {
-          columns: ["auto", "2rem"],
-          fill: true,
-          children: [
-            /* @__PURE__ */ jsx(
-              Box,
-              {
-                pad: { horizontal: "0.4rem", vertical: "0.25rem" },
-                direction: "row",
-                justify: "center",
-                children: /* @__PURE__ */ jsx(
-                  TextInput,
-                  {
-                    plain: "full",
-                    ref: textFieldRef,
-                    value: query,
-                    placeholder: t("kwic_placeholder"),
-                    onKeyDown: (event) => event.key === "Enter" ? select(query, false) : void 0,
-                    onChange: (event) => updateResult(event.target.value),
-                    suggestions: suggestions === void 0 ? [] : suggestions.length === 0 ? [{ value: void 0, label: /* @__PURE__ */ jsx(Box, { pad: "xsmall", children: t("kwic_no-hit") }) }] : suggestions,
-                    onSuggestionSelect: (x) => select(x.suggestion.value, true),
-                    focusIndicator: false,
-                    reverse: true
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Tip,
-              {
-                content: t("kwic_tooltip"),
-                children: /* @__PURE__ */ jsx(
-                  Box,
-                  {
-                    align: "center",
-                    justify: "center",
-                    children: Boolean(query) ? /* @__PURE__ */ jsx(
-                      Clear,
-                      {
-                        onMouseUp: clear,
-                        color: "dark-4"
-                      }
-                    ) : /* @__PURE__ */ jsx(
-                      Search,
-                      {
-                        color: "dark-4"
-                      }
-                    )
-                  }
-                )
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-};
 const RefreshButton = ({
   t,
   disabled,
@@ -222,12 +77,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(
@@ -238,6 +93,7 @@ const RefreshButton = ({
             Box,
             {
               height: "2rem",
+              width: "2rem",
               pad: { horizontal: "0.4rem" },
               align: "center",
               direction: "row",
@@ -245,7 +101,6 @@ const RefreshButton = ({
               children: /* @__PURE__ */ jsx(
                 Refresh,
                 {
-                  size: "20rem",
                   color: textColor
                 }
               )
@@ -339,8 +194,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" })
                           }
                         )
                       }
@@ -369,8 +224,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" })
                           }
                         )
                       }
@@ -399,8 +254,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" })
                           }
                         )
                       }
@@ -429,8 +284,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" })
                           }
                         )
                       }
@@ -472,7 +327,7 @@ const DefaultHeader = ({
       pad: { horizontal: "xsmall" },
       children: [
         /* @__PURE__ */ jsx(
-          FulltextSearch,
+          FulltextSearchInput,
           {
             t,
             initialQuery: initialKwicQuery,
@@ -496,7 +351,7 @@ const SelectDefaultListCell = ({
   item,
   selectItem
 }) => {
-  const background = colorRowAccordingToUpdateStatus(item);
+  const background = backgroundColorAccordingToStatus(item);
   return /* @__PURE__ */ jsx(
     StyledListCell,
     {
@@ -505,6 +360,7 @@ const SelectDefaultListCell = ({
       children: /* @__PURE__ */ jsx(
         CheckBox,
         {
+          id: item.id,
           checked: item.selected,
           onChange: (event) => selectItem(event.currentTarget.checked)
         }
@@ -523,7 +379,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,
     {
@@ -532,12 +389,12 @@ const TitleDefaultListCell = ({
       children: /* @__PURE__ */ jsx(
         Text,
         {
-          color: colorForEndedItemsOrUndefined(item),
           weight: item.read === void 0 ? "bold" : "normal",
           truncate: "tip",
           children: /* @__PURE__ */ jsx(
             Link,
             {
+              color: text,
               onClick: item.data.navigateToWorkflow,
               children: title
             }
@@ -568,12 +425,15 @@ const ListOfWorkflows = ({
   showLoadingIndicator,
   useGuiSse,
   useWorkflowlistApi,
+  useTasklistApi,
   openTask,
   navigateToWorkflow,
   currentLanguage,
   defaultSort,
-  defaultSortAscending,
+  defaultSortAscending = true,
   name,
+  minWidthOfColumns = "4rem",
+  minWidthOfAutoColumn = "20rem",
   columns,
   children,
   headerHeight = "3rem",
@@ -586,12 +446,13 @@ const ListOfWorkflows = ({
   excludeIdColumn = false,
   columnHeader,
   columnHeaderBackground = "dark-3",
-  columnHeaderSeparator,
+  columnHeaderSeparator = "light-6",
   defaultSearchQueries = []
 }) => {
   const { isPhone, isTablet, isNotPhone } = useResponsiveScreen();
   const wakeupSseCallback = useRef(void 0);
   const workflowlistApi = useWorkflowlistApi(wakeupSseCallback);
+  const tasklistApi = useTasklistApi(wakeupSseCallback);
   const [refreshIndicator, setRefreshIndicator] = useState(/* @__PURE__ */ new Date());
   const [searchQueries, setSearchQueries] = useState(defaultSearchQueries);
   const updateListRef = useRef(void 0);
@@ -615,8 +476,16 @@ const ListOfWorkflows = ({
       )).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, true);
+        },
+        claim: () => tasklistApi.claimTask(userTask.id, false),
+        unclaim: () => tasklistApi.claimTask(userTask.id, true)
       }));
     });
     return __spreadProps(__spreadValues({}, workflow), {
@@ -627,13 +496,13 @@ const ListOfWorkflows = ({
   const workflows = useRef(void 0);
   const [numberOfWorkflows, setNumberOfWorkflows] = useState(-1);
   const [modulesOfWorkflows, setModulesOfWorkflows] = useState(void 0);
-  const [languagesOfTitles, setLanguagesOfTitles] = useState([currentLanguage]);
   const [definitionsOfWorkflows, setDefinitionsOfWorkflows] = useState(void 0);
   useEffect(
     () => {
       const loadMetaInformation = () => __async(void 0, null, function* () {
-        const result = yield loadWorkflows(
+        yield loadWorkflows(
           workflowlistApi,
+          numberOfWorkflows,
           setNumberOfWorkflows,
           modulesOfWorkflows,
           setModulesOfWorkflows,
@@ -643,17 +512,10 @@ const ListOfWorkflows = ({
           0,
           void 0,
           searchQueries,
-          effectiveSort,
-          sortAscending,
+          void 0,
+          true,
           mapToBcWorkflow
         );
-        const titleLanguages = result.items.flatMap((workflow) => Object.keys(workflow.title)).reduce((allLanguages, titleLanguage) => {
-          if (!allLanguages.includes(titleLanguage)) {
-            allLanguages.push(titleLanguage);
-          }
-          return allLanguages;
-        }, new Array(currentLanguage));
-        setLanguagesOfTitles(titleLanguages);
       });
       if (workflows.current === void 0) {
         showLoadingIndicator(true);
@@ -662,7 +524,7 @@ const ListOfWorkflows = ({
     },
     // workflowlistApi is not part of dependency because it changes one time but this is irrelevant to the
     // purpose of preloading modules used by workflows
-    [workflows, setNumberOfWorkflows, setModulesOfWorkflows, setDefinitionsOfWorkflows, showLoadingIndicator, refreshIndicator, setLanguagesOfTitles]
+    [workflows, setNumberOfWorkflows, setModulesOfWorkflows, setDefinitionsOfWorkflows, showLoadingIndicator, refreshIndicator]
   );
   const [columnsOfWorkflows, setColumnsOfWorkflows] = useState(void 0);
   const modules = useFederationModules(modulesOfWorkflows, "WorkflowList");
@@ -700,7 +562,8 @@ const ListOfWorkflows = ({
       totalColumns.title = {
         title: { [currentLanguage]: t("column_title") },
         path: "title",
-        width: "",
+        type: "i18n",
+        width: AUTO_SIZE_COLUMN,
         priority: 0,
         show: true,
         sortable: true,
@@ -720,8 +583,8 @@ const ListOfWorkflows = ({
   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 = () => {
     workflows.current = void 0;
     setRefreshNecessary(false);
@@ -729,37 +592,40 @@ const ListOfWorkflows = ({
     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 = columnsOfWorkflows == null ? void 0 : columnsOfWorkflows.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 [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(
       workflows.current.reduce((allItemIds, item) => {
         item.selected = select;
@@ -771,8 +637,8 @@ const ListOfWorkflows = ({
     if (anySelected !== select) {
       setAnySelected(select);
     }
-  };
-  const selectItem = (item, select) => {
+  }, [refreshItemRef, workflows, setAllSelected, setAnySelected, anySelected]);
+  const selectItem = useCallback((item, select) => {
     item.selected = select;
     refreshItemRef.current([item.id]);
     const currentlyAllSelected = workflows.current.reduce((allSelected2, userTask) => allSelected2 && userTask.selected, true);
@@ -783,48 +649,70 @@ const ListOfWorkflows = ({
     if (anySelected !== currentlyAnySelected) {
       setAnySelected(currentlyAnySelected);
     }
-  };
-  const columnsOfList = columnsOfWorkflows === void 0 ? [] : columnsOfWorkflows.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.WorkflowList,
-        showUnreadAsBold: false,
-        t,
-        item,
-        selectItem,
-        defaultListCell: WorkflowDefaultListCell
-      }
-    )
-  }));
+  }, [refreshItemRef, workflows, allSelected, anySelected, setAnySelected, setAllSelected]);
+  const columnsOfList = useMemo(
+    () => columnsOfWorkflows === void 0 ? [] : columnsOfWorkflows.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,
+          setSortAscending,
+          defaultSortAscending,
+          column,
+          columnIndex,
+          numberOfAllColumns: allColumns.length,
+          allSelected,
+          selectAll
+        }
+      ),
+      render: (item) => /* @__PURE__ */ jsx(
+        ListCell,
+        {
+          modulesAvailable: modules,
+          column,
+          currentLanguage,
+          nameOfList: name,
+          typeOfItem: TypeOfItem.WorkflowList,
+          showUnreadAsBold: false,
+          t,
+          item,
+          selectItem,
+          defaultListCell: WorkflowDefaultListCell
+        }
+      )
+    })),
+    [
+      modules,
+      currentLanguage,
+      name,
+      columnsOfWorkflows,
+      setSort,
+      setSortAscending,
+      sortAscending,
+      defaultSortAscending,
+      selectItem,
+      selectAll,
+      allSelected,
+      getColumnSize,
+      columnWidthAdjustments,
+      defaultSort,
+      setColumnWidthAdjustment
+    ]
+  );
   const initialKwicQuery = (columnPath) => {
     const query = searchQueries.filter((query2) => query2.path === columnPath).map((query2) => query2.query);
     if (query.length === 0)
@@ -834,7 +722,7 @@ const ListOfWorkflows = ({
   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 });
+      newSearchQueries.push({ path: columnPath, query: value, caseInsensitive: true });
     }
     setSearchQueries(newSearchQueries);
     refreshList();
@@ -901,7 +789,7 @@ const ListOfWorkflows = ({
             rowSeparator,
             applyBackgroundColor,
             showLoadingIndicator,
-            minWidthOfAutoColumn: minWidthOfTitleColumn,
+            minWidthOfAutoColumn,
             showColumnHeaders,
             columnHeaderBackground,
             columnHeaderSeparator,
@@ -914,6 +802,7 @@ const ListOfWorkflows = ({
               // @ts-ignore
               loadWorkflows(
                 workflowlistApi,
+                numberOfWorkflows,
                 setNumberOfWorkflows,
                 modulesOfWorkflows,
                 setModulesOfWorkflows,
@@ -932,6 +821,7 @@ const ListOfWorkflows = ({
               // @ts-ignore
               reloadWorkflows(
                 workflowlistApi,
+                numberOfWorkflows,
                 setNumberOfWorkflows,
                 modulesOfWorkflows,
                 setModulesOfWorkflows,