@apia/uploader-component 4.0.46

package/dist/index.js

@@ -0,0 +1,1590 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Box, getVariant, Textarea, Input, Select } from '@apia/theme';
+import { getLabel, parseAsSize, arrayOrArray, toBoolean } from '@apia/util';
+import React, { createContext, useContext, forwardRef, useCallback, useEffect, useMemo, createElement } from 'react';
+import { Permissions as Permissions$1, CollapsiblePanel, FileCard, Dropzone, SimpleButton, ApiaUtil, DateInput, AutocompleteController, Autocomplete, IconButton, RequiredMark, NumberInput, SwitchCard } from '@apia/components';
+import { observer } from 'mobx-react-lite';
+import { ApiaMonDocModal2 } from '@apia/api';
+import { Tree } from '@apia/tree2-component';
+import { FilePicker } from '@apia/uploader-controller';
+import { makeObservable, action, observable } from 'mobx';
+import { FileIcon, Icon } from '@apia/icons';
+
+function makeDocTypeTooltip(api, docTypes) {
+  const docTypesInfo = docTypes || getTooltipsToShow(api);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: "docTypes__tooltipWrapper",
+      ...getVariant("layout.common.components.uploader.tooltip"),
+      children: docTypesInfo.map((currentDocType) => /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Box, { className: "head", as: "strong", children: currentDocType.label }),
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsxs(Box, { as: "strong", children: [
+            window.LBL_ALLOWED_EXTENSIONS,
+            " "
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { as: "span", children: [
+            currentDocType.extensions.length > 0 ? currentDocType.extensions.join(", ") : getLabel("lblAllDcTypeAcc").text,
+            "."
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsxs(Box, { as: "strong", children: [
+            window.LBL_MAX_SIZE,
+            " "
+          ] }),
+          /* @__PURE__ */ jsx(Box, { as: "span", children: parseAsSize(currentDocType.maxSize) })
+        ] })
+      ] }, currentDocType.id))
+    }
+  );
+}
+function buildExtensionsArray(ext) {
+  return (ext ?? "").split(";").filter((current) => current !== "").map((current) => `.${current}`);
+}
+function addDocTypeInfoToArray(arr, docType) {
+  arr.push({
+    extensions: buildExtensionsArray(docType.docExts),
+    id: docType.id,
+    label: docType.title,
+    maxSize: docType.maxSize
+  });
+}
+function getTooltipsToShow(api) {
+  try {
+    const hasOneClickUpload = api.props.modalConfig.oneClickUpload;
+    const docTypes = api.state.allowedTypes;
+    const docTypesInfo = [];
+    const generic = docTypes.find((c) => String(c.id) === "1");
+    if (generic) {
+      addDocTypeInfoToArray(docTypesInfo, generic);
+    } else if (hasOneClickUpload) {
+      const docType = docTypes[0];
+      addDocTypeInfoToArray(docTypesInfo, docType);
+    } else {
+      docTypes.forEach((docType) => {
+        addDocTypeInfoToArray(docTypesInfo, docType);
+      });
+    }
+    return docTypesInfo;
+  } catch (e) {
+    return [];
+  }
+}
+
+const FileUploadContext = createContext(
+  void 0
+);
+const FileUploadProvider = ({
+  store,
+  children
+}) => {
+  return /* @__PURE__ */ jsx(FileUploadContext.Provider, { value: store, children });
+};
+const useFileUploadContext = () => {
+  const context = useContext(FileUploadContext);
+  if (context === void 0) {
+    throw new Error("There is no FileUploadContext");
+  }
+  return context;
+};
+
+const Permissions = observer(() => {
+  const controller = useFileUploadContext();
+  const modalConfig = controller.modalConfig;
+  const state = controller.state;
+  return /* @__PURE__ */ jsx(
+    Permissions$1,
+    {
+      everyonePermissionsValue: state.permissions.allowAllType,
+      onChangeEveryonePermissions: (ev) => {
+        state.permissions.allowAllType = ev;
+      },
+      onChangePools: (pools) => {
+        controller.state.permissions.pools = pools;
+      },
+      onChangeUsers: (users) => {
+        controller.state.permissions.users = users;
+      },
+      permissions: controller.state.permissions,
+      collapsePermissions: modalConfig.collapsePermissions,
+      disabled: state.isReadonly
+    }
+  );
+});
+
+const FilesList = observer(
+  forwardRef(({ iconsSize, ...props }, ref) => {
+    const controller = useFileUploadContext();
+    const files = controller.inProgressFiles;
+    const fromDirectoryFile = controller.state.fromDirectoryFile;
+    const handleClose = useCallback(
+      (name) => {
+        controller.clearFile(name);
+      },
+      [controller]
+    );
+    return /* @__PURE__ */ jsx(
+      CollapsiblePanel,
+      {
+        label: /* @__PURE__ */ jsx("span", { children: getLabel("lblPrevDocsToAdd").text }),
+        id: "selectedFiles",
+        collapseIconToRight: true,
+        closedIcon: "ArrowUpThin",
+        openIcon: "ArrowDownThin",
+        rememberCollapsedState: false,
+        children: /* @__PURE__ */ jsxs(
+          Box,
+          {
+            ...props,
+            as: "ul",
+            className: "filesList",
+            ...getVariant("layout.common.filesList"),
+            ref,
+            children: [
+              !fromDirectoryFile ? files.map((c) => {
+                return /* @__PURE__ */ jsx(
+                  FileCard,
+                  {
+                    name: c.name,
+                    iconsSize,
+                    handleClose,
+                    className: "fileList__modal"
+                  }
+                );
+              }) : /* @__PURE__ */ jsx(
+                FileCard,
+                {
+                  name: fromDirectoryFile.docName,
+                  className: "fileList__modal",
+                  handleClose: () => {
+                    controller.clearPartialState();
+                    controller.clearDirectoryFile();
+                  }
+                }
+              ),
+              files.length === 0 && !fromDirectoryFile && getLabel("lblNoUpType").text
+            ]
+          }
+        )
+      }
+    );
+  })
+);
+var FilesList$1 = React.memo(FilesList);
+
+const AddFileSection = observer(() => {
+  const controller = useFileUploadContext();
+  const modalConfig = controller.modalConfig;
+  const handleOnChange = (e) => {
+    const newFiles = Array.from(e);
+    controller.addFiles(newFiles);
+  };
+  const filePicker = new FilePicker(controller.api);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Box, { className: "uploader__dropzone_description_section", children: /* @__PURE__ */ jsxs(Box, { className: "uploader__dropzone", children: [
+      controller.conf?.versionFile && /* @__PURE__ */ jsx("strong", { children: getLabel("lblNameMustBe", {
+        text: { TOK1: controller.conf?.versionFile.docName ?? "" }
+      }).text }),
+      /* @__PURE__ */ jsx(
+        Dropzone,
+        {
+          progress: controller.progress,
+          className: "dropzoneModal",
+          messageError: controller.state.fileReqError ? getLabel("msgReqField").text : void 0,
+          onChange: handleOnChange
+        }
+      ),
+      (modalConfig.allowDocumentsMonitor || modalConfig.allowPickFromDirectories) && !controller.conf?.versionFile && /* @__PURE__ */ jsxs(Box, { className: "uploader__dropzone_actions", children: [
+        modalConfig.allowPickFromDirectories && /* @__PURE__ */ jsx(
+          SimpleButton,
+          {
+            variant: "outline",
+            onClick: () => {
+              let modal = null;
+              const handleSelection = () => {
+                const firstElement = filePicker.selectedItems.values().next().value;
+                if (firstElement?.id)
+                  controller.api.pickFileById(
+                    firstElement.state.nodeProps.id
+                  );
+                modal?.close();
+              };
+              modal = ApiaUtil.instance.modals.open({
+                title: getLabel("btnSelDcFrmTree").text,
+                children: /* @__PURE__ */ jsx(
+                  Tree,
+                  {
+                    id: controller.api.id,
+                    isMultiple: false,
+                    onNodeDoubleClick: handleSelection,
+                    store: filePicker
+                  }
+                ),
+                onConfirm: handleSelection,
+                onCancel: () => modal?.close()
+              });
+            },
+            children: getLabel("btnSelDcFrmTree").text
+          }
+        ),
+        modalConfig.allowDocumentsMonitor && modalConfig.monitorId && /* @__PURE__ */ jsx(
+          SimpleButton,
+          {
+            variant: "outline",
+            onClick: () => new ApiaMonDocModal2().openModal({
+              monitorProperties: {
+                docTypeId: controller.docTypes.map((d) => d.id),
+                docTypeSel: controller.selectedDocTypeId ?? "1",
+                monDocId: controller.api.props.modalConfig.monitorId ?? 1
+              }
+            }).then((res) => {
+              if (res[0]?.row?.id)
+                controller.api.pickFileById(res[0].row.id);
+            }),
+            children: getLabel("btnMonDoc").text
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(FilesList$1, {}),
+    /* @__PURE__ */ jsxs(Box, { className: "uploader__dropzone_description_section", children: [
+      /* @__PURE__ */ jsxs("label", { children: [
+        /* @__PURE__ */ jsx("span", { children: getLabel("lblDes").text }),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            disabled: controller.state.isReadonly,
+            value: controller.description,
+            onChange: (e) => {
+              controller.setDescription(e.target.value);
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { children: [
+        /* @__PURE__ */ jsx("span", { children: getLabel("lblExpDate").text }),
+        /* @__PURE__ */ jsx(
+          DateInput,
+          {
+            disabled: controller.state.isReadonly,
+            value: controller.state.docExpDate,
+            onChange: (d) => {
+              controller.state.docExpDate = d ?? void 0;
+            }
+          }
+        )
+      ] })
+    ] })
+  ] });
+});
+
+const UploaderFileHeader = observer(() => {
+  const controller = useFileUploadContext();
+  const docTypes = controller.docTypes.map((c) => ({
+    label: c.title,
+    value: String(c.id)
+  }));
+  const selectedDocTypeId = controller.selectedDocTypeId;
+  useEffect(() => {
+    handler.setValue(selectedDocTypeId, { force: true });
+  }, [selectedDocTypeId]);
+  const properties = {
+    disabled: controller.state.fromDirectoryFile || controller.conf?.versionFile ? true : false,
+    caseInsensitive: true,
+    options: docTypes,
+    onChange(id) {
+      controller.changeDocType(id);
+    }
+  };
+  const handler = useMemo(() => {
+    return new AutocompleteController(properties);
+  }, []);
+  return /* @__PURE__ */ jsxs("label", { children: [
+    /* @__PURE__ */ jsx("span", { children: getLabel("lblDocType").text }),
+    /* @__PURE__ */ jsxs(Box, { className: "uploader__file_selection", children: [
+      /* @__PURE__ */ jsx(Autocomplete, { handler, properties }),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          variant: "outline",
+          className: "uploader__file_infoBtn",
+          icon: "Info",
+          size: "Xl",
+          iconSize: 20,
+          onMouseEnter: (e) => {
+            ApiaUtil.instance.tooltips.open({
+              attachToElement: () => e.target,
+              children: makeDocTypeTooltip(
+                controller.api,
+                arrayOrArray(controller.selectedDocType).map((c) => ({
+                  extensions: c.docExts.split(";"),
+                  id: c.id,
+                  label: c.title,
+                  maxSize: c.maxSize
+                }))
+              )
+            });
+          }
+        }
+      )
+    ] })
+  ] });
+});
+
+const MetadataLabel = observer(
+  forwardRef(
+    ({ metadata, i }, ref) => {
+      const controller = useFileUploadContext();
+      return /* @__PURE__ */ jsxs(
+        Box,
+        {
+          tabIndex: i === 0 ? 0 : -1,
+          className: "metadata__render_container",
+          ref: metadata.free !== "Y" ? ref : null,
+          children: [
+            /* @__PURE__ */ jsx(RequiredMark, { isRequired: metadata.required === "Y" }),
+            metadata.free === "Y" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  value: metadata.title,
+                  disabled: controller.state.isReadonly,
+                  tabIndex: i === 0 ? 0 : -1,
+                  ref,
+                  className: "metadata__field",
+                  onChange: (e) => {
+                    metadata.title = e.target.value;
+                    metadata.labelErrorMessage = "";
+                  }
+                }
+              ),
+              metadata.labelErrorMessage && /* @__PURE__ */ jsx(Box, { as: "span", className: "errorRequired", children: metadata.labelErrorMessage })
+            ] }) : /* @__PURE__ */ jsx("span", { children: metadata.title })
+          ]
+        }
+      );
+    }
+  )
+);
+
+const MetadataField = observer(
+  forwardRef(({ metadata }, ref) => {
+    let component = null;
+    const controller = useFileUploadContext();
+    if (metadata.type === "D") {
+      component = /* @__PURE__ */ jsx(
+        DateInput,
+        {
+          disabled: controller.state.isReadonly,
+          className: "metadata__field",
+          value: metadata.value,
+          tabIndex: -1,
+          ref,
+          onChange: (e) => {
+            metadata.value = e;
+            metadata.errorMessage = "";
+          }
+        }
+      );
+    } else if (metadata.type === "N") {
+      component = /* @__PURE__ */ jsx(
+        NumberInput,
+        {
+          value: metadata.value,
+          disabled: controller.state.isReadonly,
+          className: "metadata__field",
+          tabIndex: -1,
+          ref,
+          onChange: (e) => {
+            if (e.error) {
+              metadata.errorMessage = getLabel("msgMustBeNum").text;
+            } else {
+              metadata.errorMessage = "";
+            }
+            metadata.value = e.value;
+          }
+        }
+      );
+    } else {
+      component = /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: metadata.value,
+          disabled: controller.state.isReadonly,
+          tabIndex: -1,
+          ref,
+          className: "metadata__field",
+          onChange: (e) => {
+            metadata.value = e.target.value;
+            metadata.errorMessage = "";
+          }
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(Box, { className: "metadata__render_container", children: [
+      /* @__PURE__ */ jsx(
+        RequiredMark,
+        {
+          isRequired: metadata.required === "Y" || metadata.free === "Y"
+        }
+      ),
+      component,
+      metadata.errorMessage && /* @__PURE__ */ jsx(Box, { as: "span", className: "errorRequired", children: metadata.errorMessage })
+    ] });
+  })
+);
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+let MetadataTable$1 = class MetadataTable {
+  constructor() {
+    __publicField(this, "activeCell", null);
+    __publicField(this, "lastSelectedIndex", null);
+    __publicField(this, "selectedIndices", []);
+    __publicField(this, "cellRefs", {});
+    __publicField(this, "onDelete");
+    __publicField(this, "component", observer(() => {
+      const controller = useFileUploadContext();
+      const modalConfig = controller.modalConfig;
+      const columns = [
+        { name: "metadataName", label: getLabel("lblTit").text },
+        { name: "metadataValue", label: getLabel("lblValue").text }
+      ];
+      const metadata = controller.allMetadata;
+      const isRowSelectable = (rowIndex) => metadata[rowIndex].free === "Y";
+      this.onDelete = () => {
+        controller.deleteMetadata(this.selectedIndices);
+        const offset = controller.state.metadata.metadataArray.length;
+        const newLength = metadata.length - 1;
+        if (newLength - offset > 0) {
+          this.selectedIndices = [newLength - 1];
+          this.setActiveCell({ row: newLength - 1, col: 0 });
+          this.setLastSelectedIndex(newLength - 1);
+          this.focusCell(newLength - 1, 0);
+        } else {
+          this.selectedIndices = [];
+          this.setLastSelectedIndex(newLength - 1);
+          this.focusCell(newLength - 1, 0);
+        }
+      };
+      return /* @__PURE__ */ jsxs(
+        CollapsiblePanel,
+        {
+          label: /* @__PURE__ */ jsx("span", { children: getLabel("titMetadata").text }),
+          id: "metadata",
+          collapseIconToRight: true,
+          closedIcon: "ArrowUpThin",
+          openIcon: "ArrowDownThin",
+          "aria-label": getLabel("titMetadata").text,
+          collapsed: modalConfig.collapseMetadata,
+          children: [
+            (metadata.length > 0 || controller.state.metadata.isFreeMetadata) && /* @__PURE__ */ jsxs(
+              Box,
+              {
+                className: "metadata__container",
+                tabIndex: 0,
+                onKeyDown: (e) => this.handleKeyDown(e, columns, metadata.length, isRowSelectable),
+                children: [
+                  /* @__PURE__ */ jsx(Box, { className: "metadata__table_container", children: /* @__PURE__ */ jsxs(
+                    Box,
+                    {
+                      as: "table",
+                      role: "table",
+                      "aria-label": "Metadata Table",
+                      "aria-describedby": "metadata-table-description",
+                      children: [
+                        /* @__PURE__ */ jsx("thead", { role: "rowgroup", children: /* @__PURE__ */ jsx("tr", { role: "row", children: columns.map((col) => /* @__PURE__ */ jsx("th", { role: "columnheader", scope: "col", children: col.label }, col.name)) }) }),
+                        /* @__PURE__ */ jsx("tbody", { role: "rowgroup", children: metadata.map((c, rowIndex) => {
+                          const isRowSelected = this.selectedIndices?.includes(rowIndex);
+                          return /* @__PURE__ */ jsx(
+                            "tr",
+                            {
+                              role: "row",
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                this.handleRowClick(
+                                  rowIndex,
+                                  e,
+                                  isRowSelectable(rowIndex)
+                                );
+                              },
+                              className: `${isRowSelected ? "selected" : ""}`,
+                              children: columns.map((col, colIndex) => /* @__PURE__ */ jsx(
+                                "td",
+                                {
+                                  role: "cell",
+                                  style: {
+                                    cursor: !isRowSelectable(rowIndex) ? "not-allowed" : "default"
+                                  },
+                                  onClick: (e) => {
+                                    e.stopPropagation();
+                                    this.handleRowClick(
+                                      rowIndex,
+                                      e,
+                                      isRowSelectable(rowIndex),
+                                      colIndex
+                                    );
+                                  },
+                                  children: colIndex === 0 ? /* @__PURE__ */ jsx(
+                                    MetadataLabel,
+                                    {
+                                      i: rowIndex,
+                                      metadata: metadata[rowIndex],
+                                      ref: (el) => this.updateCellRef(
+                                        `cell-${rowIndex}-${colIndex}`,
+                                        el
+                                      )
+                                    }
+                                  ) : /* @__PURE__ */ jsx(
+                                    MetadataField,
+                                    {
+                                      metadata: metadata[rowIndex],
+                                      ref: (el) => this.updateCellRef(
+                                        `cell-${rowIndex}-${colIndex}`,
+                                        el
+                                      )
+                                    }
+                                  )
+                                },
+                                col.name
+                              ))
+                            },
+                            c.id
+                          );
+                        }) })
+                      ]
+                    }
+                  ) }),
+                  metadata.length < 1 && /* @__PURE__ */ jsx(Box, { children: getLabel("lblNoMetadataForThisDocType").text }),
+                  controller.state.metadata.isFreeMetadata && /* @__PURE__ */ jsxs(Box, { className: "metadata__actions", children: [
+                    /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        disabled: controller.state.isReadonly,
+                        icon: "Plus",
+                        ...getVariant("outline"),
+                        className: "addMetadata",
+                        onClick: () => {
+                          controller.addMetadata();
+                          setTimeout(() => {
+                            const newRowI = metadata.length;
+                            const newField = document.querySelector(
+                              "tr:last-child .metadata__field"
+                            );
+                            if (newField) {
+                              newField.scrollIntoView({
+                                behavior: "smooth",
+                                block: "nearest",
+                                inline: "nearest"
+                              });
+                              newField.focus();
+                            }
+                            this.selectedIndices = [newRowI];
+                            this.setActiveCell({ row: newRowI, col: 0 });
+                            this.setLastSelectedIndex(newRowI);
+                            const container = document.querySelector(
+                              ".uploader__content"
+                            );
+                            if (container) {
+                              container.scrollTo({
+                                top: container.scrollHeight,
+                                behavior: "smooth"
+                              });
+                            }
+                          }, 0);
+                        },
+                        type: "button",
+                        "aria-label": "Add Metadata",
+                        "aria-description": "Adds a new metadata row to the table"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        disabled: controller.state.isReadonly || this.selectedIndices.length === 0,
+                        icon: "Trash",
+                        ...getVariant("outline-danger"),
+                        onClick: () => this.onDelete && this.onDelete(),
+                        type: "button",
+                        className: "deleteMetadata",
+                        "aria-label": "Delete Metadata",
+                        "aria-description": "Deletes the selected metadata row"
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            metadata.length < 1 && !controller.state.metadata.isFreeMetadata && /* @__PURE__ */ jsx(Fragment, { children: getLabel("lblNoMetadataForThisDocType").text })
+          ]
+        }
+      );
+    }));
+    makeObservable(this, {
+      activeCell: observable,
+      lastSelectedIndex: observable,
+      selectedIndices: observable,
+      cellRefs: observable,
+      setActiveCell: action,
+      setLastSelectedIndex: action,
+      setSelectedIndices: action,
+      updateCellRef: action,
+      handleRowClick: action,
+      handleKeyDown: action
+    });
+  }
+  setActiveCell(cell) {
+    this.activeCell = cell;
+  }
+  setLastSelectedIndex(index) {
+    this.lastSelectedIndex = index;
+  }
+  setSelectedIndices(indices) {
+    this.selectedIndices = indices;
+  }
+  updateCellRef(key, el) {
+    this.cellRefs[key] = el;
+  }
+  // Helper: returns an inclusive range between two indices.
+  getRange(start, end) {
+    const range = [];
+    const min = Math.min(start, end);
+    const max = Math.max(start, end);
+    for (let i = min; i <= max; i++) {
+      range.push(i);
+    }
+    return range;
+  }
+  focusCell(rowI, colI) {
+    const cellKey = `cell-${rowI}-${colI}`;
+    const cellEl = this.cellRefs[cellKey];
+    cellEl?.focus();
+    cellEl?.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "nearest"
+    });
+  }
+  // Modified handleRowClick: now accepts an optional colIndex.
+  handleRowClick(index, e, isSelectable = true, colIndex) {
+    const newCol = colIndex !== void 0 ? colIndex : 0;
+    if (isSelectable) {
+      if (e && e.ctrlKey) {
+        if (this.selectedIndices.includes(index)) {
+          this.selectedIndices = this.selectedIndices.filter(
+            (i) => i !== index
+          );
+        } else {
+          this.selectedIndices.push(index);
+        }
+        this.lastSelectedIndex = index;
+        this.activeCell = { row: index, col: newCol };
+      } else if (e && e.shiftKey && this.lastSelectedIndex !== null) {
+        const range = this.getRange(this.lastSelectedIndex, index);
+        this.selectedIndices = Array.from(
+          /* @__PURE__ */ new Set([...this.selectedIndices, ...range])
+        );
+        this.lastSelectedIndex = index;
+        this.activeCell = { row: index, col: newCol };
+      } else {
+        this.selectedIndices = [index];
+        this.lastSelectedIndex = index;
+        this.activeCell = { row: index, col: newCol };
+      }
+    } else {
+      this.activeCell = { row: index, col: newCol };
+    }
+    this.focusCell(index, newCol);
+  }
+  // Handle key navigation.
+  // isRowSelectable is a predicate function that returns true if a given row is selectable.
+  handleKeyDown(e, columns, listLength, isRowSelectable) {
+    if (listLength === 0)
+      return;
+    if (this.selectedIndices.length > 0 && e.key === "Delete" || e.key === "Del" || e.key === "Supr") {
+      e.preventDefault();
+      if (this.onDelete) {
+        this.onDelete();
+      }
+      return;
+    }
+    const maxColIndex = columns.length - 1;
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const currentRow = this.lastSelectedIndex !== null ? this.lastSelectedIndex : 0;
+      let newRow = currentRow;
+      if (e.key === "ArrowDown") {
+        newRow = (currentRow + 1) % listLength;
+      } else if (e.key === "ArrowUp") {
+        newRow = (currentRow - 1 + listLength) % listLength;
+      }
+      if (isRowSelectable(newRow)) {
+        if (e.shiftKey) {
+          this.selectedIndices = Array.from(
+            /* @__PURE__ */ new Set([...this.selectedIndices, newRow])
+          );
+        } else {
+          this.selectedIndices = [newRow];
+        }
+        this.lastSelectedIndex = newRow;
+      } else {
+        this.lastSelectedIndex = newRow;
+      }
+      const newCol = this.activeCell ? this.activeCell.col : 0;
+      this.activeCell = { row: newRow, col: newCol };
+      const cellKey = `cell-${newRow}-${newCol}`;
+      const cellEl = this.cellRefs[cellKey];
+      cellEl?.focus();
+      cellEl?.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "nearest"
+      });
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+      e.preventDefault();
+      let currentCell = this.activeCell;
+      if (!currentCell) {
+        const row = this.lastSelectedIndex !== null ? this.lastSelectedIndex : 0;
+        currentCell = { row, col: 0 };
+      }
+      if (e.key === "ArrowLeft") {
+        const newCol = currentCell.col - 1;
+        if (newCol >= 0 && this.cellRefs[`cell-${currentCell.row}-${newCol}`]) {
+          this.activeCell = { row: currentCell.row, col: newCol };
+        } else {
+          let found = false;
+          let target = null;
+          for (let r = currentCell.row + 1; r < listLength; r++) {
+            for (let c = currentCell.col - 1; c >= 0; c--) {
+              if (this.cellRefs[`cell-${r}-${c}`]) {
+                target = { row: r, col: c };
+                found = true;
+                break;
+              }
+            }
+            if (found)
+              break;
+          }
+          if (found && target) {
+            this.activeCell = target;
+          } else {
+            this.activeCell = { row: currentCell.row, col: 0 };
+          }
+        }
+      } else if (e.key === "ArrowRight") {
+        let newCol = currentCell.col + 1;
+        if (newCol > maxColIndex || !this.cellRefs[`cell-${currentCell.row}-${newCol}`]) {
+          newCol = maxColIndex;
+        }
+        this.activeCell = { row: currentCell.row, col: newCol };
+      }
+      if (this.activeCell) {
+        const cellKey = `cell-${this.activeCell.row}-${this.activeCell.col}`;
+        const cellEl = this.cellRefs[cellKey];
+        cellEl?.focus();
+        cellEl?.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+          inline: "nearest"
+        });
+      }
+    }
+  }
+  reset() {
+    this.activeCell = null;
+    this.lastSelectedIndex = null;
+    this.selectedIndices = [];
+    this.cellRefs = {};
+  }
+};
+
+const Directory = observer(() => {
+  const controller = useFileUploadContext();
+  const modalConfig = controller.modalConfig;
+  if (controller.state.isReadonly)
+    return null;
+  return /* @__PURE__ */ jsxs(
+    CollapsiblePanel,
+    {
+      label: /* @__PURE__ */ jsx("span", { children: getLabel("lblDocFolders").text }),
+      id: "direcotry",
+      collapseIconToRight: true,
+      closedIcon: "ArrowUpThin",
+      openIcon: "ArrowDownThin",
+      className: "uploader__directory",
+      collapsed: modalConfig.collapseDirectories,
+      children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            className: "uploader__directory__clear-directory",
+            icon: "Close",
+            title: "",
+            onClick: () => {
+              controller.directories.selectedItems.clear();
+              controller.state.docFolder = void 0;
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Tree,
+          {
+            id: controller.api.id,
+            isMultiple: false,
+            onSelect: (nodes) => {
+              const node = nodes.values().next().value;
+              if (node && node.state.nodeProps.canWrite)
+                controller.state.docFolder = Number(node.id);
+            },
+            store: controller.directories
+          }
+        )
+      ]
+    }
+  );
+});
+
+const Metadata = new MetadataTable$1();
+const UploaderContent = observer(() => {
+  const controller = useFileUploadContext();
+  const modalConfig = controller.modalConfig;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: "uploader__container",
+      ...getVariant("layout.common.components.uploader.defaultView"),
+      children: [
+        /* @__PURE__ */ jsx(UploaderFileHeader, {}),
+        /* @__PURE__ */ jsxs(Box, { className: "uploader__content", children: [
+          /* @__PURE__ */ jsx(AddFileSection, {}),
+          modalConfig.showPermissions && /* @__PURE__ */ jsx(Permissions, {}),
+          modalConfig.showDirectoriesStructure && /* @__PURE__ */ jsx(Directory, {}),
+          modalConfig.showMetadata && /* @__PURE__ */ jsx(Metadata.component, {})
+        ] })
+      ]
+    }
+  );
+});
+
+function openUploaderModal(c) {
+  ApiaUtil.instance.modals.open({
+    children: /* @__PURE__ */ jsx(FileUploadProvider, { store: c, children: /* @__PURE__ */ jsx(UploaderContent, {}) }),
+    size: "fileModal",
+    noHeader: true,
+    initialFocusGetter(ref) {
+      return ref.querySelector(".dropzone");
+    },
+    onConfirm: async () => {
+      const isValid = await c.confirm();
+      if (isValid) {
+        c.onCloseModal();
+        return true;
+      }
+      const dropzone = document.querySelector(".dropzoneModal");
+      if (dropzone && c.state.fileReqError) {
+        dropzone.focus();
+      } else {
+        document.querySelector(
+          ".metadata__table_container .metadata__field:has(+ .errorRequired)"
+        )?.focus();
+      }
+      return false;
+    },
+    onCancel() {
+      c.onCloseModal();
+    },
+    onExited() {
+      c.onCloseModal();
+    },
+    onClose() {
+      c.onCloseModal();
+    }
+  });
+}
+
+const FileIconRenderer = observer(({ node }) => {
+  return /* @__PURE__ */ jsx(FileIcon, { iconSize: "sm", docName: node.state.label });
+});
+
+const FolderIconRenderer = observer(({ node }) => {
+  return node.state.isExpanded ? /* @__PURE__ */ jsx(Icon, { title: "", name: "FolderOpen" }) : /* @__PURE__ */ jsx(Icon, { title: "", name: "FolderClosed" });
+});
+
+const LoadMoreRenderer = observer(({ node }) => {
+  return /* @__PURE__ */ jsx(
+    SimpleButton,
+    {
+      isLoading: node.state.nodeProps.isLoadingMore,
+      tabIndex: -1,
+      variant: "inherit-sm",
+      children: node.state.label
+    }
+  );
+});
+
+const LockedFolderIconRenderer = observer(() => {
+  return /* @__PURE__ */ jsx(Box, { sx: { "& *": { color: "palette.error.main" } }, children: /* @__PURE__ */ jsx(Icon, { title: "", name: "Locked" }) });
+});
+
+const DeleteDocument = (api, f, props) => {
+  return {
+    children: /* @__PURE__ */ jsx(Box, { children: getLabel("btnDel").text }),
+    key: "7",
+    onClick: async () => {
+      const file = api.getDocument(f.docId);
+      if (await ApiaUtil.instance.dialogs.confirm({
+        children: (
+          // !window.langId &&
+          Object.values(api.state.translatedFiles.get(file.docId) ?? {}).length > 0 ? getLabel("msgDelFileTrans").text : window.MSG_CONFIG_DELETE_DOCUMENT_FILE_INPUT_NAME.replace(
+            "<TOK>",
+            file.docName ?? file.name ?? "NONAME"
+          )
+        ),
+        title: window.BTN_FILE_ERASE_LBL
+      })) {
+        await api.ajaxDeleteDocument(file.docId, props?.langId);
+      }
+    }
+  };
+};
+
+const DownloadDocument = (api, file) => {
+  return {
+    children: /* @__PURE__ */ jsx(Box, { children: getLabel("lblDownFile").text }),
+    key: "3",
+    onClick: () => {
+      api.checkWebDavLock(file.docId);
+      api.downloadDocument(file.docId);
+    }
+  };
+};
+
+const EditDocument = (api, file) => {
+  return {
+    children: /* @__PURE__ */ jsx(Box, { children: getLabel("lblEdit").text }),
+    key: "2",
+    onClick: () => {
+      api.editDocument(file.docId);
+    }
+  };
+};
+
+const LockDocument = (api, file) => {
+  return {
+    icon: (file.isLocked || toBoolean(file.lock) || file.locked) && "Check",
+    children: /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 3
+        },
+        children: file.isLocked || toBoolean(file.lock) || file.locked ? getLabel("lblDocLockedBy", {
+          text: { TOK1: file.lockingUser || file?.lockedBy || "" }
+        }).text : getLabel("btnLock").text
+      }
+    ),
+    key: "5",
+    onClick: () => {
+      api.lockDocument(file.docId);
+    }
+  };
+};
+
+function getUploaderShownMenuOptions({
+  showDownload,
+  showEdition,
+  showLock,
+  showVersion,
+  showDelete,
+  showTranslate
+}, file) {
+  const showEditOption = showEdition !== false && file.canEdit !== false && Number(file?.docId) >= 0 && !window.IN_MONITOR;
+  const showLockOption = showLock !== false && file.canWrite !== false && Number(file?.docId) >= 0 && !window.IN_MONITOR;
+  const showDownloadOption = showDownload !== false;
+  const showVersionOption = showVersion !== false && file.canWrite !== false && Number(file?.docId) >= 0 && !window.IN_MONITOR;
+  const showDeleteOption = showDelete !== false && file.canWrite !== false && !window.IN_MONITOR;
+  const showTranslateOption = showTranslate !== false && file.canWrite !== false && !window.IN_MONITOR;
+  return {
+    showEditOption,
+    showLockOption,
+    showDownloadOption,
+    showVersionOption,
+    showDeleteOption,
+    showTranslateOption
+  };
+}
+
+const VersionTable = ({
+  data,
+  api,
+  file
+}) => {
+  return /* @__PURE__ */ jsx(
+    CollapsiblePanel,
+    {
+      label: /* @__PURE__ */ jsx("span", { children: getLabel("sbtDocVer").text }),
+      id: "versions_infoModal",
+      collapseIconToRight: true,
+      closedIcon: "ArrowUpThin",
+      openIcon: "ArrowDownThin",
+      defaultCollapsed: true,
+      children: /* @__PURE__ */ jsx(Box, { className: "doc_info_table_container", children: /* @__PURE__ */ jsxs("table", { className: "doc_info_table versions_table", children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("th", { children: getLabel("lblVer").text }),
+          /* @__PURE__ */ jsx("th", { children: getLabel("lblUsu").text }),
+          /* @__PURE__ */ jsx("th", { children: getLabel("lblDate").text })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: data.map((version, index) => /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
+            SimpleButton,
+            {
+              variant: "link",
+              onClick: () => {
+                api.downloadVersion(file.docId, version.verNumber);
+              },
+              children: version.verNumber
+            }
+          ) }),
+          /* @__PURE__ */ jsx("td", { children: version.verUser }),
+          /* @__PURE__ */ jsx("td", { children: version.verDate })
+        ] }, index)) })
+      ] }) })
+    }
+  );
+};
+
+const PermissionsInfo = ({ data }) => {
+  return /* @__PURE__ */ jsxs(
+    CollapsiblePanel,
+    {
+      label: /* @__PURE__ */ jsx("span", { children: getLabel("lblPer").text }),
+      id: "permissions_infoModal",
+      collapseIconToRight: true,
+      closedIcon: "ArrowUpThin",
+      openIcon: "ArrowDownThin",
+      className: "uploader__permissions",
+      defaultCollapsed: true,
+      children: [
+        /* @__PURE__ */ jsxs(Box, { className: "allPermissions", children: [
+          /* @__PURE__ */ jsx("span", { children: getLabel("lblTod").text }),
+          /* @__PURE__ */ jsxs(Select, { disabled: true, value: data.allPoolPermission, children: [
+            /* @__PURE__ */ jsx("option", { value: "M", children: getLabel("lblPerMod").text }),
+            /* @__PURE__ */ jsx("option", { value: "R", children: getLabel("lblPerVer").text }),
+            /* @__PURE__ */ jsx("option", { value: "", children: getLabel("lblAccessDenied").text })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { className: "permissions__list", children: /* @__PURE__ */ jsxs(Box, { as: "ul", children: [
+          arrayOrArray(data.permissions?.user).map((c) => {
+            return /* @__PURE__ */ jsx(Box, { as: "li", children: /* @__PURE__ */ jsx(
+              SwitchCard,
+              {
+                label: c.name,
+                align: "right",
+                icon: "User2",
+                value: c.permType === "M" ? true : false,
+                switchProps: { disabled: true }
+              }
+            ) }, c.id);
+          }),
+          arrayOrArray(data.permissions?.pool).map((c) => {
+            return /* @__PURE__ */ jsx(Box, { as: "li", children: /* @__PURE__ */ jsx(
+              SwitchCard,
+              {
+                label: c.name,
+                align: "right",
+                icon: "Groups",
+                value: c.permType === "M" ? true : false,
+                switchProps: { disabled: true }
+              }
+            ) }, c.id);
+          })
+        ] }) })
+      ]
+    }
+  );
+};
+
+const InfoTable = ({
+  data,
+  docId
+}) => {
+  return /* @__PURE__ */ jsx(Box, { as: "table", variant: "layout.common.tables.information", children: /* @__PURE__ */ jsxs("tbody", { children: [
+    /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsxs("span", { children: [
+        getLabel("lblDocType").text,
+        ":"
+      ] }) }),
+      /* @__PURE__ */ jsx("td", { children: data.type })
+    ] }),
+    /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsxs("span", { children: [
+        getLabel("lblDocName").text,
+        ":"
+      ] }) }),
+      /* @__PURE__ */ jsx("td", { children: data.name })
+    ] }),
+    /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsxs("span", { children: [
+        getLabel("lblDes").text,
+        ":"
+      ] }) }),
+      /* @__PURE__ */ jsx("td", { children: data.description })
+    ] }),
+    /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsxs("span", { children: [
+        getLabel("lblExpDate").text,
+        ":"
+      ] }) }),
+      /* @__PURE__ */ jsx("td", { children: data.expirationDate })
+    ] }),
+    data.folderPath && /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsxs("span", { children: [
+        getLabel("lblDir").text,
+        ":"
+      ] }) }),
+      /* @__PURE__ */ jsx("td", { children: data.folderPath })
+    ] }),
+    /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsxs("span", { children: [
+        getLabel("lblDwnLink").text,
+        ":"
+      ] }) }),
+      Number(docId) > 0 && /* @__PURE__ */ jsxs(Box, { as: "td", className: "table__buttons", children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            icon: "Download",
+            size: "Lg",
+            onClick: () => {
+              window.open(data.downloadLink, "_blank");
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            icon: "Copy",
+            size: "Lg",
+            title: getLabel("lblCpyLink").text,
+            onClick: () => {
+              navigator.clipboard.writeText(data.downloadLink).then(() => {
+                ApiaUtil.instance.notifications.notify({
+                  message: getLabel("lblCopiedLink").text,
+                  type: "success"
+                });
+                console.log("Download link copied to clipboard");
+              }).catch((err) => {
+                console.error("Failed to copy download link:", err);
+              });
+            }
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+};
+
+const MetadataTable = ({
+  data
+}) => {
+  return /* @__PURE__ */ jsx(
+    CollapsiblePanel,
+    {
+      label: /* @__PURE__ */ jsx("span", { children: getLabel("titMetadata").text }),
+      id: "metadata_infoModal",
+      collapseIconToRight: true,
+      closedIcon: "ArrowUpThin",
+      openIcon: "ArrowDownThin",
+      defaultCollapsed: true,
+      children: /* @__PURE__ */ jsx(Box, { className: "doc_info_table_container", children: /* @__PURE__ */ jsxs("table", { className: "doc_info_table", children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("th", { children: getLabel("lblTit").text }),
+          /* @__PURE__ */ jsx("th", { children: getLabel("lblVal").text })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: data.map((item, index) => /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("td", { children: item.title }),
+          /* @__PURE__ */ jsx("td", { children: item.value })
+        ] }, index)) })
+      ] }) })
+    }
+  );
+};
+
+const DocInfoModal = (api, file) => {
+  return {
+    children: /* @__PURE__ */ jsx(Box, { children: getLabel("btnInfo").text }),
+    key: "1",
+    onClick: async () => {
+      const data = {
+        ...parseDocumentInfo(await api.getDocumentInfo({ docId: file.docId }))
+      };
+      ApiaUtil.instance.modals.open({
+        children: /* @__PURE__ */ jsx(DocModalComponent, { data, file, api }),
+        size: "flex",
+        title: getLabel("btnInfo").text
+      });
+    }
+  };
+};
+const DocModalComponent = ({
+  data,
+  file,
+  api
+}) => {
+  return /* @__PURE__ */ jsxs(Box, { ...getVariant("layout.common.components.uploader.infoModal"), children: [
+    /* @__PURE__ */ jsx(InfoTable, { data, docId: file.docId }),
+    /* @__PURE__ */ jsx(PermissionsInfo, { data }),
+    data.versions.length > 0 && /* @__PURE__ */ jsx(VersionTable, { data: data.versions, api, file }),
+    data.metadata.length > 0 && /* @__PURE__ */ jsx(MetadataTable, { data: data.metadata })
+  ] });
+};
+function parseDocumentInfo(data) {
+  if (!data)
+    throw new Error("There is no data in DocumentInfoModal");
+  const { general } = data.function.data;
+  return {
+    docId: general.docId,
+    allPoolPermission: general.docAllPoolPerm,
+    description: general.docDesc,
+    downloadLink: general.docDwnExternal,
+    expirationDate: general.docExpDate ?? "",
+    metadata: arrayOrArray(data.function.metadatas?.metadata),
+    name: general.docName,
+    permissions: data.function.data?.permissions,
+    type: general.docTypeLabel,
+    versions: arrayOrArray(data.function.data?.versions?.version),
+    folderPath: data.function.data.general.docFolderPath
+  };
+}
+
+const VersionDocument = (api, file) => {
+  return {
+    children: /* @__PURE__ */ jsx(Box, { children: getLabel("lblUploadNewVersion").text }),
+    key: "6",
+    onClick: async () => {
+      if (!api.modalConfig.oneClickUpload) {
+        api.onVersionUpload(file);
+        return;
+      }
+      const input = document.createElement("input");
+      input.type = "file";
+      input.multiple = true;
+      input.style.display = "none";
+      const cleanup = () => {
+        input.removeEventListener("change", onChange);
+        if (input.parentNode)
+          input.parentNode.removeChild(input);
+      };
+      const onChange = (e) => {
+        try {
+          const target = e.target;
+          if (target && target.files && target.files.length > 0) {
+            const newFiles = Array.from(target.files);
+            api.onVersionUpload(file, { newFiles });
+          }
+        } finally {
+          cleanup();
+        }
+      };
+      input.addEventListener("change", onChange);
+      document.body.appendChild(input);
+      if (api.modalConfig.oneClickUpload) {
+        const checkLock = await api.checkLockDocument(file.docId, true);
+        const isLocked = await api.checkWebDavLock(file.docId);
+        if (checkLock === true && isLocked) {
+          input.click();
+        }
+      } else {
+        input.click();
+      }
+    }
+  };
+};
+
+function openUploaderMenu(anchor, uploaderApi, props, file, langId) {
+  const {
+    showDeleteOption,
+    showDownloadOption,
+    showEditOption,
+    showLockOption,
+    showTranslateOption,
+    showVersionOption
+  } = getUploaderShownMenuOptions(props, file);
+  ApiaUtil.instance.menu.open({
+    items: [
+      DocInfoModal(uploaderApi, file),
+      showEditOption && EditDocument(uploaderApi, file),
+      showDownloadOption && DownloadDocument(uploaderApi, file),
+      /**
+       * Lock version and delete section
+       */
+      showLockOption || showVersionOption || showDeleteOption ? "separator" : null,
+      showLockOption && LockDocument(uploaderApi, file),
+      showVersionOption && VersionDocument(uploaderApi, file),
+      showDeleteOption && DeleteDocument(uploaderApi, file, {
+        langId: langId ? Number(langId) : void 0
+      }),
+      /**
+       * Sign and translation section
+       */
+      showTranslateOption ? "separator" : null,
+      showTranslateOption && TranslateDocument(uploaderApi, file)
+    ].filter(Boolean),
+    menuProps: {
+      anchorRef: {
+        current: anchor.closest("button")
+      }
+    }
+  });
+}
+
+const TranslateDocument = (api, file) => {
+  const translationsCount = [
+    ...api.state.translatedFiles.get(file.docId)?.values() ?? []
+  ].length;
+  return {
+    children: /* @__PURE__ */ jsxs(Box, { children: [
+      getLabel("btnTrans").text,
+      " (",
+      translationsCount,
+      ")"
+    ] }),
+    key: "9",
+    onClick: () => {
+      ApiaUtil.instance.modals.open({
+        title: getLabel("titTra").text,
+        children: /* @__PURE__ */ jsx(TranslateDocumentModal, { api, file }),
+        initialFocusGetter(ref) {
+          return ref.querySelector(".dropzone");
+        }
+      });
+    }
+  };
+};
+const TranslateDocumentModal = observer(
+  ({ api, file }) => {
+    const langs = Object.entries(api.langs ?? {}).map(([key, value]) => ({
+      id: key,
+      title: String(value)
+    }));
+    const translateFileMap = api.state.translatedFiles.get(file.docId);
+    return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 3 }, children: [
+      /* @__PURE__ */ jsx(Box, { sx: { fontWeight: "bold" }, children: getLabel("lblTranslatesForFile", {
+        text: { TOK1: file.docName ?? "" }
+      }).text }),
+      langs.map((c) => {
+        const translatedFile = translateFileMap?.get(Number(c.id));
+        return /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx("span", { children: c.title }),
+          translateFileMap && translatedFile ? /* @__PURE__ */ jsx(
+            FileCard,
+            {
+              name: translatedFile.docName ?? "",
+              width: "100%",
+              additionalButtons: [
+                {
+                  icon: "Download",
+                  size: "Lg",
+                  iconSize: 20,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    api.checkWebDavLock(translatedFile.docId);
+                    api.downloadDocument(translatedFile.docId);
+                  }
+                },
+                {
+                  icon: "Ellipsis",
+                  size: "Lg",
+                  iconSize: 20,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    openUploaderMenu(
+                      e.target,
+                      api,
+                      {
+                        showTranslate: false,
+                        showEdition: false,
+                        showLock: true,
+                        showDelete: true,
+                        showDownload: true,
+                        showVersion: false
+                      },
+                      translatedFile,
+                      c.id
+                    );
+                  },
+                  onDoubleClick: (e) => {
+                    e.stopPropagation();
+                  }
+                }
+              ]
+            }
+          ) : /* @__PURE__ */ jsx(
+            Dropzone,
+            {
+              onClick: (ev) => {
+                if (!api.modalConfig.oneClickUpload) {
+                  ev.preventDefault();
+                  api.onTranslateUpload({
+                    langId: Number(c.id),
+                    translatingFile: file
+                  });
+                }
+              },
+              onChange: (e) => {
+                api.onTranslateUpload(
+                  {
+                    langId: Number(c.id),
+                    translatingFile: file
+                  },
+                  e
+                );
+              }
+            }
+          )
+        ] });
+      })
+    ] });
+  }
+);
+
+const UploadedFiles = observer(
+  ({
+    uploaderApi,
+    hideDropzone,
+    openContextMenu
+  }) => {
+    const existingFiles = uploaderApi.filesArray;
+    const handleFileClick = (e, file) => {
+      if (e.ctrlKey) {
+        uploaderApi.state.selectedFiles = uploaderApi.state.selectedFiles.filter((id) => id !== file.docId);
+      } else {
+        if (!uploaderApi.state.selectedFiles.includes(file.docId)) {
+          uploaderApi.state.selectedFiles.push(file.docId);
+        }
+      }
+    };
+    const handleInfoButton = useCallback(
+      (ev) => ApiaUtil.instance.tooltips.open({
+        attachToElement: () => ev.target,
+        children: makeDocTypeTooltip(uploaderApi)
+      }),
+      [uploaderApi]
+    );
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          p: 4,
+          display: "flex",
+          flexDirection: "column",
+          gap: 4
+        },
+        children: [
+          !hideDropzone && /* @__PURE__ */ jsx(
+            Dropzone,
+            {
+              progress: uploaderApi.state.progress,
+              className: "dropzone__uploadedfiles",
+              onClick: (ev) => {
+                if (!uploaderApi.modalConfig.oneClickUpload) {
+                  ev.preventDefault();
+                  uploaderApi.onStartUpload();
+                }
+              },
+              onChange: (e) => {
+                uploaderApi.onStartUpload(e);
+              },
+              handleInfoButton: (e) => handleInfoButton(e)
+            }
+          ),
+          /* @__PURE__ */ jsxs(Box, { className: "uploadedFiles__container", children: [
+            existingFiles.length > 0 && /* @__PURE__ */ jsx(
+              Box,
+              {
+                ...getVariant("layout.common.components.uploader.filesList"),
+                className: "uploadedFiles",
+                children: uploaderApi.filesArray.map((c) => {
+                  return /* @__PURE__ */ createElement(
+                    FileCard,
+                    {
+                      ...Number(c.docId) >= 0 ? {
+                        onDropFiles: (files) => {
+                          uploaderApi.onVersionUpload(
+                            uploaderApi.state.files[c.docId],
+                            { newFiles: files }
+                          );
+                        }
+                      } : {},
+                      className: `${uploaderApi.state.selectedFiles.find((current) => current === c.docId) ? "selected" : ""}`,
+                      key: c.docId,
+                      name: c.docName ?? "",
+                      width: "100%",
+                      onClick: (e) => handleFileClick(e, c),
+                      onDoubleClick: () => {
+                        uploaderApi.downloadDocument(c.docId);
+                      },
+                      additionalButtons: [
+                        {
+                          icon: "Download",
+                          size: "Lg",
+                          iconSize: 20,
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            uploaderApi.downloadDocument(c.docId);
+                          }
+                        },
+                        {
+                          icon: "Ellipsis",
+                          size: "Lg",
+                          iconSize: 20,
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            (openContextMenu ? openContextMenu : openUploaderMenu)(
+                              e.target,
+                              uploaderApi,
+                              {
+                                showEdition: toBoolean(window.IS_EDITION_ALLOWED),
+                                showTranslate: uploaderApi.context.allowTranslation
+                              },
+                              c
+                            );
+                          },
+                          onDoubleClick: (e) => {
+                            e.stopPropagation();
+                          }
+                        }
+                      ]
+                    }
+                  );
+                })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              SimpleButton,
+              {
+                variant: "outline-sm",
+                className: "download_Button",
+                onClick: () => {
+                  uploaderApi.downloadMultipleDocuments();
+                },
+                children: getLabel("btnDow").text
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+
+export { AddFileSection, DeleteDocument, Directory, DocInfoModal, DownloadDocument, EditDocument, FileIconRenderer, FileUploadProvider, FolderIconRenderer, InfoTable, LoadMoreRenderer, LockDocument, LockedFolderIconRenderer, MetadataTable$1 as MetadataTable, Permissions, PermissionsInfo, TranslateDocument, TranslateDocumentModal, UploadedFiles, UploaderContent, UploaderFileHeader, VersionDocument, VersionTable, getUploaderShownMenuOptions, makeDocTypeTooltip, openUploaderMenu, openUploaderModal, parseDocumentInfo, useFileUploadContext };
+//# sourceMappingURL=index.js.map