@zextras/carbonio-ui-commons 1.0.5

package/lib/components/select/folders/folder-selector.js

@@ -0,0 +1,73 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FolderSelector = void 0;
+/* eslint-disable @typescript-eslint/no-use-before-define */
+/*
+ * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+const react_1 = __importStar(require("react"));
+const material_1 = require("@mui/material");
+const carbonio_design_system_1 = require("@zextras/carbonio-design-system");
+const react_i18next_1 = require("react-i18next");
+const flat_folders_1 = require("./flat-folders");
+const folder_accordions_custom_component_1 = require("./folder-accordions-custom-component");
+const folders_accordion_1 = require("./folders-accordion");
+const hooks_1 = require("./hooks");
+const folders_1 = require("../../../constants/folders");
+const hooks_2 = require("../../../store/zustand/folder/hooks");
+const theme_mui_1 = require("../../../theme/theme-mui");
+const FolderSelector = ({ inputLabel, onNewFolderClick, selectedFolderId, onFolderSelected, allowRootSelection, showSharedAccounts, filterChildren }) => {
+    const [inputValue, setInputValue] = (0, react_1.useState)('');
+    const selectedFolder = selectedFolderId && (0, hooks_2.getFolder)(selectedFolderId);
+    const folders = (0, hooks_1.useFolders)();
+    const rootFolders = (0, react_1.useMemo)(() => (showSharedAccounts ? folders : folders.filter((root) => root.id === folders_1.FOLDERS.USER_ROOT)), [folders, showSharedAccounts]);
+    const disabledFolderIdsSelection = allowRootSelection
+        ? []
+        : rootFolders.map((folder) => folder.id);
+    const [t] = (0, react_i18next_1.useTranslation)();
+    const inputName = selectedFolder ? selectedFolder.name : '';
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(carbonio_design_system_1.Input, { "data-testid": 'folder-name-filter', inputName: inputName, label: inputLabel ?? t('label.filter_folders', 'Filter folders'), backgroundColor: "gray5", value: inputValue, onChange: (e) => setInputValue(e.target.value) }),
+        react_1.default.createElement(carbonio_design_system_1.Container, { style: { overflowY: 'auto', display: 'block' }, height: "fit", width: "fill", orientation: "vertical", mainAlignment: "flex-start", minHeight: "30vh", maxHeight: "60vh" }, inputValue.length > 0 ? (react_1.default.createElement(flat_folders_1.FlatFolders, { rootFolders: rootFolders, searchString: inputValue, onFolderSelected: onFolderSelected, selectedFolderId: selectedFolderId, allowRootSelection: allowRootSelection, filterChildren: filterChildren })) : (react_1.default.createElement(material_1.ThemeProvider, { theme: theme_mui_1.themeMui },
+            react_1.default.createElement(carbonio_design_system_1.Padding, { vertical: "medium" }),
+            react_1.default.createElement(folders_accordion_1.FoldersAccordion, { folders: rootFolders, onFolderSelected: onFolderSelected, selectedFolderId: selectedFolderId, disabledFolderIds: disabledFolderIdsSelection, FolderAccordionCustomComponent: folder_accordions_custom_component_1.FolderAccordionCustomComponent, filterChildren: filterChildren })))),
+        onNewFolderClick && (react_1.default.createElement(carbonio_design_system_1.Container, { padding: { top: 'medium', bottom: 'medium' }, mainAlignment: "center", crossAlignment: "flex-start" },
+            react_1.default.createElement(carbonio_design_system_1.Button, { type: "ghost", label: t('label.new_folder', 'New Folder'), color: "primary", onClick: onNewFolderClick })))));
+};
+exports.FolderSelector = FolderSelector;
+//# sourceMappingURL=folder-selector.js.map

package/lib/components/select/folders/folder-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"folder-selector.js","sourceRoot":"","sources":["../../../../src/components/select/folders/folder-selector.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,4DAA4D;AAC5D;;;;GAIG;AACH,+CAA4E;AAE5E,4CAA8C;AAC9C,4EAAoF;AACpF,iDAA+C;AAE/C,iDAA6C;AAC7C,6FAAsF;AACtF,2DAAuD;AACvD,mCAAqC;AACrC,wDAAqD;AACrD,+DAAgE;AAChE,wDAAoD;AAa7C,MAAM,cAAc,GAAG,CAAC,EAC9B,UAAU,EACV,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACO,EAAgB,EAAE;IACvC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IACjD,MAAM,cAAc,GAAG,gBAAgB,IAAI,IAAA,iBAAS,EAAC,gBAAgB,CAAC,CAAC;IACvE,MAAM,OAAO,GAAG,IAAA,kBAAU,GAAE,CAAC;IAC7B,MAAM,WAAW,GAAG,IAAA,eAAO,EAC1B,GAAG,EAAE,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,iBAAO,CAAC,SAAS,CAAC,CAAC,EAC9F,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAC7B,CAAC;IACF,MAAM,0BAA0B,GAAG,kBAAkB;QACpD,CAAC,CAAC,EAAE;QACJ,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAE1C,MAAM,CAAC,CAAC,CAAC,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE7B,MAAM,SAAS,GAAG,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5D,OAAO,CACN;QACC,8BAAC,8BAAK,mBACQ,oBAAoB,EACjC,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,UAAU,IAAI,CAAC,CAAC,sBAAsB,EAAE,gBAAgB,CAAC,EAChE,eAAe,EAAC,OAAO,EACvB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,CAAC,CAAgC,EAAQ,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAClF;QACF,8BAAC,kCAAS,IACT,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,EAC9C,MAAM,EAAC,KAAK,EACZ,KAAK,EAAC,MAAM,EACZ,WAAW,EAAC,UAAU,EACtB,aAAa,EAAC,YAAY,EAC1B,SAAS,EAAC,MAAM,EAChB,SAAS,EAAC,MAAM,IAEf,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACxB,8BAAC,0BAAW,IACX,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,UAAU,EACxB,gBAAgB,EAAE,gBAAgB,EAClC,gBAAgB,EAAE,gBAAgB,EAClC,kBAAkB,EAAE,kBAAkB,EACtC,cAAc,EAAE,cAAc,GAC7B,CACF,CAAC,CAAC,CAAC,CACH,8BAAC,wBAAa,IAAC,KAAK,EAAE,oBAAQ;YAC7B,8BAAC,gCAAO,IAAC,QAAQ,EAAC,QAAQ,GAAG;YAC7B,8BAAC,oCAAgB,IAChB,OAAO,EAAE,WAAW,EACpB,gBAAgB,EAAE,gBAAgB,EAClC,gBAAgB,EAAE,gBAAgB,EAClC,iBAAiB,EAAE,0BAA0B,EAC7C,8BAA8B,EAAE,mEAA8B,EAC9D,cAAc,EAAE,cAAc,GAC7B,CACa,CAChB,CACU;QACX,gBAAgB,IAAI,CACpB,8BAAC,kCAAS,IACT,OAAO,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,EAC5C,aAAa,EAAC,QAAQ,EACtB,cAAc,EAAC,YAAY;YAE3B,8BAAC,+BAAM,IACN,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,CAAC,CAAC,kBAAkB,EAAE,YAAY,CAAC,EAC1C,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,gBAAgB,GACxB,CACS,CACZ,CACC,CACH,CAAC;AACH,CAAC,CAAC;AAjFW,QAAA,cAAc,kBAiFzB"}

package/lib/components/select/folders/folders-accordion.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Folder } from '../../../types';
+type FolderAccordionProps = {
+    folders: Array<Folder>;
+    onFolderSelected: (arg: Folder) => void;
+    selectedFolderId?: string;
+    disabledFolderIds?: Array<string>;
+    FolderAccordionCustomComponent: React.FC<{
+        folder: Folder;
+    }>;
+    filterChildren?: (folder: Folder) => boolean;
+};
+export declare const FoldersAccordion: ({ folders, onFolderSelected, FolderAccordionCustomComponent, selectedFolderId, disabledFolderIds, filterChildren }: FolderAccordionProps) => React.JSX.Element;
+export {};

package/lib/components/select/folders/folders-accordion.js

@@ -0,0 +1,86 @@
+"use strict";
+/*
+ * SPDX-FileCopyrightText: 2021 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FoldersAccordion = void 0;
+const react_1 = __importStar(require("react"));
+const ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
+const material_1 = require("@mui/material");
+const lodash_1 = require("lodash");
+const folders_1 = require("../../../constants/folders");
+const theme_mui_1 = require("../../../theme/theme-mui");
+const handle_message_1 = require("../../../worker/handle-message");
+const FoldersAccordion = ({ folders, onFolderSelected, FolderAccordionCustomComponent, selectedFolderId, disabledFolderIds, filterChildren }) => {
+    const filteredFolders = folders.map((root) => ({
+        ...root,
+        children: (0, lodash_1.filter)(root.children, filterChildren)
+    }));
+    const [openIds, setOpenIds] = (0, react_1.useState)([folders_1.FOLDERS.USER_ROOT]);
+    const handleExpandFolderClick = (folderId, callback) => callback((state) => state.includes(folderId) ? state.filter((id) => id !== folderId) : [...state, folderId]);
+    return (react_1.default.createElement(material_1.Container, { disableGutters: true, "data-testid": 'accordion-folders-selector' }, filteredFolders.map((folder) => (react_1.default.createElement(material_1.Accordion, { disableGutters: true, slotProps: { transition: { unmountOnExit: true } }, expanded: openIds.includes(folder.id), key: folder.id },
+        react_1.default.createElement(material_1.AccordionSummary, { "data-testid": `folder-accordion-item-${folder.id}`, onClick: (e) => {
+                if (disabledFolderIds?.includes(folder.id)) {
+                    e.preventDefault();
+                    return;
+                }
+                onFolderSelected?.(folder);
+            }, expandIcon: folder?.children?.length > 0 &&
+                !(0, handle_message_1.hasId)(folder, 'all') && (react_1.default.createElement(ExpandMore_1.default, { color: "primary", onClick: (e) => {
+                    e.preventDefault();
+                    handleExpandFolderClick(folder.id, setOpenIds);
+                } })), "aria-controls": "panel1a-content", id: folder.id, sx: {
+                margin: 0,
+                backgroundColor: folder.id === selectedFolderId
+                    ? theme_mui_1.theme.palette.highlight.hover
+                    : theme_mui_1.theme.palette.gray6.regular,
+                '&:hover': {
+                    backgroundColor: folder.id === selectedFolderId
+                        ? theme_mui_1.theme.palette.highlight.active
+                        : theme_mui_1.theme.palette.gray6.hover
+                }
+            } },
+            react_1.default.createElement(FolderAccordionCustomComponent, { folder: folder })),
+        folder?.children?.length > 0 && (react_1.default.createElement(material_1.AccordionDetails, null,
+            react_1.default.createElement(exports.FoldersAccordion, { folders: folder.children, selectedFolderId: selectedFolderId, key: folder.id, disabledFolderIds: disabledFolderIds, FolderAccordionCustomComponent: FolderAccordionCustomComponent, onFolderSelected: onFolderSelected, filterChildren: filterChildren }))))))));
+};
+exports.FoldersAccordion = FoldersAccordion;
+//# sourceMappingURL=folders-accordion.js.map

package/lib/components/select/folders/folders-accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"folders-accordion.js","sourceRoot":"","sources":["../../../../src/components/select/folders/folders-accordion.tsx"],"names":[],"mappings":"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"}

package/lib/components/select/folders/hooks.d.ts

@@ -0,0 +1,29 @@
+import { Folder } from '../../../types';
+/**
+ * calculate the sorting criteria for a given folder
+ * system folders are placed before user folders
+ * the trash folder is always the last one
+ * @param folder
+ * @returns the sorting criteria
+ */
+export declare const getSortCriteria: (folder: Folder) => string;
+/**
+ * recursively sort the children of a folder according to a given sort function
+ * @param children
+ * @param sortFunction
+ * @returns the sorted children
+ */
+export declare const sortFolders: ({ children, sortFunction }: {
+    children: Folder[];
+    sortFunction: (folder: Folder) => number | string;
+}) => Folder[];
+/**
+ * sorts the children of the useRootsArray hook according to the specified sort function
+ * @returns the sorted children
+ */
+export declare const useFolders: () => Array<Folder>;
+/**
+ * sorts the children of the getRootsArray hook according to the specified sort function
+ * @returns the sorted children
+ */
+export declare const getFolders: () => Array<Folder>;

package/lib/components/select/folders/hooks.js

@@ -0,0 +1,61 @@
+"use strict";
+/*
+ * SPDX-FileCopyrightText: 2025 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFolders = exports.useFolders = exports.sortFolders = exports.getSortCriteria = void 0;
+const react_1 = require("react");
+const lodash_1 = require("lodash");
+const folders_1 = require("../../../constants/folders");
+const folders_2 = require("../../../helpers/folders");
+const hooks_1 = require("../../../store/zustand/folder/hooks");
+/**
+ * calculate the sorting criteria for a given folder
+ * system folders are placed before user folders
+ * the trash folder is always the last one
+ * @param folder
+ * @returns the sorting criteria
+ */
+const getSortCriteria = (folder) => {
+    const { id } = (0, folders_2.getFolderIdParts)(folder.id);
+    if (id === folders_1.FOLDERS.TRASH) {
+        return folders_1.FOLDERS.LAST_SYSTEM_FOLDER_POSITION;
+    }
+    return parseInt(id ?? '', 10) < 17 ? `   ${id}` : folder.name.toLowerCase();
+};
+exports.getSortCriteria = getSortCriteria;
+/**
+ * recursively sort the children of a folder according to a given sort function
+ * @param children
+ * @param sortFunction
+ * @returns the sorted children
+ */
+const sortFolders = ({ children, sortFunction }) => {
+    const childrenSorted = (0, lodash_1.sortBy)(children, sortFunction);
+    return childrenSorted.map((folder) => ({
+        ...folder,
+        children: (0, exports.sortFolders)({ children: folder.children, sortFunction })
+    }));
+};
+exports.sortFolders = sortFolders;
+/**
+ * sorts the children of the useRootsArray hook according to the specified sort function
+ * @returns the sorted children
+ */
+const useFolders = () => {
+    const roots = (0, hooks_1.useRootsArray)();
+    return (0, react_1.useMemo)(() => (0, exports.sortFolders)({ children: roots, sortFunction: exports.getSortCriteria }), [roots]);
+};
+exports.useFolders = useFolders;
+/**
+ * sorts the children of the getRootsArray hook according to the specified sort function
+ * @returns the sorted children
+ */
+const getFolders = () => {
+    const roots = (0, hooks_1.getRootsArray)();
+    return (0, exports.sortFolders)({ children: roots, sortFunction: exports.getSortCriteria });
+};
+exports.getFolders = getFolders;
+//# sourceMappingURL=hooks.js.map

package/lib/components/select/folders/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../../src/components/select/folders/hooks.ts"],"names":[],"mappings":";AAAA;;;;GAIG;;;AAEH,iCAAgC;AAEhC,mCAAgC;AAEhC,wDAAqD;AACrD,sDAA4D;AAC5D,+DAAmF;AAGnF;;;;;;GAMG;AACI,MAAM,eAAe,GAAG,CAAC,MAAc,EAAU,EAAE;IACzD,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,0BAAgB,EAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAC3C,IAAI,EAAE,KAAK,iBAAO,CAAC,KAAK,EAAE,CAAC;QAC1B,OAAO,iBAAO,CAAC,2BAA2B,CAAC;IAC5C,CAAC;IACD,OAAO,QAAQ,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;AAC7E,CAAC,CAAC;AANW,QAAA,eAAe,mBAM1B;AAEF;;;;;GAKG;AACI,MAAM,WAAW,GAAG,CAAC,EAC3B,QAAQ,EACR,YAAY,EAIZ,EAAY,EAAE;IACd,MAAM,cAAc,GAAG,IAAA,eAAM,EAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IACtD,OAAO,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QACtC,GAAG,MAAM;QACT,QAAQ,EAAE,IAAA,mBAAW,EAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,YAAY,EAAE,CAAC;KAClE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAZW,QAAA,WAAW,eAYtB;AAEF;;;GAGG;AACI,MAAM,UAAU,GAAG,GAAkB,EAAE;IAC7C,MAAM,KAAK,GAAG,IAAA,qBAAa,GAAE,CAAC;IAC9B,OAAO,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAA,mBAAW,EAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,EAAE,uBAAe,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AAChG,CAAC,CAAC;AAHW,QAAA,UAAU,cAGrB;AAEF;;;GAGG;AACI,MAAM,UAAU,GAAG,GAAkB,EAAE;IAC7C,MAAM,KAAK,GAAG,IAAA,qBAAa,GAAE,CAAC;IAC9B,OAAO,IAAA,mBAAW,EAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,EAAE,uBAAe,EAAE,CAAC,CAAC;AACxE,CAAC,CAAC;AAHW,QAAA,UAAU,cAGrB"}

package/lib/components/select/folders/status-icon.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Folder } from '../../../types';
+export declare const StatusIcon: ({ folder }: {
+    folder: Folder;
+}) => React.JSX.Element;

package/lib/components/select/folders/status-icon.js

@@ -0,0 +1,35 @@
+"use strict";
+/*
+ * SPDX-FileCopyrightText: 2025 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const carbonio_design_system_1 = require("@zextras/carbonio-design-system");
+const i18next_1 = require("i18next");
+const RowWithIcon = (icon, color, tooltipText) => (react_1.default.createElement(carbonio_design_system_1.Padding, { left: "small" },
+    react_1.default.createElement(carbonio_design_system_1.Tooltip, { placement: "right", label: tooltipText },
+        react_1.default.createElement(carbonio_design_system_1.Row, null,
+            react_1.default.createElement(carbonio_design_system_1.Icon, { icon: icon, color: color, size: "medium" })))));
+const StatusIcon = ({ folder }) => {
+    if (folder.acl?.grant) {
+        const tooltipText = (0, i18next_1.t)('tooltip.folder_sharing_status', {
+            count: folder.acl.grant.length,
+            defaultValue_one: 'Shared with {{count}} person',
+            defaultValue: 'Shared with {{count}} people'
+        });
+        return RowWithIcon('Shared', 'shared', tooltipText);
+    }
+    if (folder.isLink) {
+        const tooltipText = (0, i18next_1.t)('tooltip.folder_linked_status', 'Linked to me');
+        return RowWithIcon('Linked', 'linked', tooltipText);
+    }
+    return react_1.default.createElement(react_1.default.Fragment, null);
+};
+exports.StatusIcon = StatusIcon;
+//# sourceMappingURL=status-icon.js.map

package/lib/components/select/folders/status-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-icon.js","sourceRoot":"","sources":["../../../../src/components/select/folders/status-icon.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;;;;;;AAEH,kDAA0B;AAE1B,4EAA8E;AAC9E,qCAA4B;AAI5B,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,KAAa,EAAE,WAAmB,EAAqB,EAAE,CAAC,CAC5F,8BAAC,gCAAO,IAAC,IAAI,EAAC,OAAO;IACpB,8BAAC,gCAAO,IAAC,SAAS,EAAC,OAAO,EAAC,KAAK,EAAE,WAAW;QAC5C,8BAAC,4BAAG;YACH,8BAAC,6BAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,GAAG,CAC3C,CACG,CACD,CACV,CAAC;AAEK,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAsB,EAAqB,EAAE;IAC/E,IAAI,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,CAAC;QACvB,MAAM,WAAW,GAAG,IAAA,WAAC,EAAC,+BAA+B,EAAE;YACtD,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM;YAC9B,gBAAgB,EAAE,8BAA8B;YAChD,YAAY,EAAE,8BAA8B;SAC5C,CAAC,CAAC;QACH,OAAO,WAAW,CAAC,QAAQ,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;IACrD,CAAC;IACD,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC;QACnB,MAAM,WAAW,GAAG,IAAA,WAAC,EAAC,8BAA8B,EAAE,cAAc,CAAC,CAAC;QACtE,OAAO,WAAW,CAAC,QAAQ,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;IACrD,CAAC;IACD,OAAO,6DAAK,CAAC;AACd,CAAC,CAAC;AAdW,QAAA,UAAU,cAcrB"}

package/lib/components/select/folders/utils.d.ts

@@ -0,0 +1,12 @@
+import { AccordionItemType } from '@zextras/carbonio-design-system';
+import { Folder } from '../../../types';
+export declare function flattenAndFilterFoldersWithCap(folders: Array<Folder>, search: string, limit: number, filterFolders?: ((folder: Folder) => boolean) | undefined): Array<Folder>;
+export declare const getFolderIconColor: (f: Folder | AccordionItemType) => string;
+export declare const getFolderIconName: (folder: Folder | AccordionItemType) => string | null;
+type GetSystemFolderProps = {
+    folderId?: string;
+    folderName: string;
+};
+export declare const getSystemFolderTranslatedName: ({ folderName }: GetSystemFolderProps) => string;
+export declare const getFolderTranslatedName: ({ folderId, folderName }: GetSystemFolderProps) => string;
+export {};

package/lib/components/select/folders/utils.js

@@ -0,0 +1,100 @@
+"use strict";
+/*
+ * SPDX-FileCopyrightText: 2025 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFolderTranslatedName = exports.getSystemFolderTranslatedName = exports.getFolderIconName = exports.getFolderIconColor = void 0;
+exports.flattenAndFilterFoldersWithCap = flattenAndFilterFoldersWithCap;
+const carbonio_shell_ui_1 = require("@zextras/carbonio-shell-ui");
+const lodash_1 = require("lodash");
+const folders_1 = require("../../../constants/folders");
+const utils_1 = require("../../../constants/utils");
+const folders_2 = require("../../../helpers/folders");
+function flattenAndFilterFoldersWithCap(folders, search, limit, filterFolders) {
+    if (limit <= 0)
+        return [];
+    const lowerCaseSearch = search.toLowerCase();
+    const flattenAndFilter = (foldersToProcess) => (0, lodash_1.filter)(foldersToProcess, filterFolders).flatMap((folder) => {
+        const isMatch = folder.name.toLowerCase().includes(lowerCaseSearch);
+        const matched = isMatch ? [{ ...folder, children: [] }] : [];
+        return [...matched, ...flattenAndFilter(folder.children)];
+    });
+    return flattenAndFilter(folders).slice(0, limit);
+}
+const getFolderIconColor = (f) => {
+    if ('color' in f && f?.color) {
+        return Number(f.color) < 10
+            ? utils_1.ZIMBRA_STANDARD_COLORS[Number(f.color)].hex
+            : (f?.rgb ?? utils_1.ZIMBRA_STANDARD_COLORS[0].hex);
+    }
+    return utils_1.ZIMBRA_STANDARD_COLORS[0].hex;
+};
+exports.getFolderIconColor = getFolderIconColor;
+const getFolderDefaultIcon = (folder) => {
+    const folderView = 'view' in folder && folder.view;
+    switch (folderView) {
+        case utils_1.FOLDER_VIEW.appointment:
+            return 'Calendar2';
+        default:
+            return 'FolderOutline';
+    }
+};
+const getFolderIconName = (folder) => {
+    const { id } = (0, folders_2.getFolderIdParts)(folder.id);
+    if (id === folders_1.FOLDERS.USER_ROOT ||
+        ('isLink' in folder && folder.isLink && folder.oname === utils_1.ROOT_NAME)) {
+        return null;
+    }
+    const folderDefaultIcon = getFolderDefaultIcon(folder);
+    if (id && (0, folders_2.isSystemFolder)(id)) {
+        switch (id) {
+            case folders_1.FOLDERS.INBOX:
+                return 'InboxOutline';
+            case folders_1.FOLDERS.DRAFTS:
+                return 'FileOutline';
+            case folders_1.FOLDERS.SENT:
+                return 'PaperPlaneOutline';
+            case folders_1.FOLDERS.SPAM:
+                return 'SlashOutline';
+            case folders_1.FOLDERS.TRASH:
+                return 'Trash2Outline';
+            default:
+                return folderDefaultIcon;
+        }
+    }
+    return folderDefaultIcon;
+};
+exports.getFolderIconName = getFolderIconName;
+const getSystemFolderTranslatedName = ({ folderName }) => {
+    if (folderName) {
+        switch (folderName) {
+            case 'Inbox':
+                return (0, carbonio_shell_ui_1.t)('folders.inbox', 'Inbox');
+            case 'Sent':
+                return (0, carbonio_shell_ui_1.t)('folders.sent', 'Sent');
+            case 'Drafts':
+                return (0, carbonio_shell_ui_1.t)('folders.drafts', 'Drafts');
+            case 'Trash':
+                return (0, carbonio_shell_ui_1.t)('folders.trash', 'Trash');
+            case 'Spam':
+                return (0, carbonio_shell_ui_1.t)('folders.spam', 'Spam');
+            case 'Junk':
+                return (0, carbonio_shell_ui_1.t)('folders.junk', 'Junk');
+            default:
+                return folderName;
+        }
+    }
+    return folderName;
+};
+exports.getSystemFolderTranslatedName = getSystemFolderTranslatedName;
+const getFolderTranslatedName = ({ folderId, folderName }) => {
+    const { id } = (0, folders_2.getFolderIdParts)(folderId ?? '');
+    if (id && (0, folders_2.isSystemFolder)(id)) {
+        return (0, exports.getSystemFolderTranslatedName)({ folderName });
+    }
+    return folderName;
+};
+exports.getFolderTranslatedName = getFolderTranslatedName;
+//# sourceMappingURL=utils.js.map

package/lib/components/select/folders/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/select/folders/utils.ts"],"names":[],"mappings":"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"}

package/lib/components/select/folders-selector.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+import type { FolderSelectorItem, OnChangeSelect } from '../../types/select';
+type FolderSelectorProps = {
+    defaultFolderId: string;
+    onChange: OnChangeSelect;
+    label?: string;
+    folderItems: FolderSelectorItem[];
+    disabled?: boolean;
+};
+export declare const FoldersSelector: ({ defaultFolderId, onChange, label, folderItems, disabled }: FolderSelectorProps) => ReactElement | null;
+export {};

package/lib/components/select/folders-selector.js

@@ -0,0 +1,78 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FoldersSelector = void 0;
+/*
+ * SPDX-FileCopyrightText: 2021 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+const react_1 = __importStar(require("react"));
+const carbonio_design_system_1 = require("@zextras/carbonio-design-system");
+const lodash_1 = require("lodash");
+const color_select_1 = require("./color-select");
+const select_label_factory_1 = require("./select-label-factory");
+const folders_1 = require("../../constants/folders");
+const hooks_1 = require("../../store/zustand/folder/hooks");
+const FolderNameRender = ({ folder }) => {
+    const root = (0, hooks_1.useRoot)(folder.value ?? '');
+    return (react_1.default.createElement(carbonio_design_system_1.Row, { wrap: 'nowrap' },
+        react_1.default.createElement(carbonio_design_system_1.Padding, { right: "small" },
+            react_1.default.createElement(select_label_factory_1.Square, { "$color": folder.color })),
+        react_1.default.createElement(color_select_1.TextUpperCase, null, folder.label),
+        react_1.default.createElement(carbonio_design_system_1.Row, { takeAvailableSpace: true }, root && root.id !== folders_1.FOLDERS.USER_ROOT && (react_1.default.createElement(carbonio_design_system_1.Padding, { left: "small", style: { overflow: 'hidden' } },
+            react_1.default.createElement(color_select_1.TextUpperCase, { color: 'gray1' }, `(${root.name})`))))));
+};
+const FoldersSelector = ({ defaultFolderId, onChange, label, folderItems, disabled }) => {
+    const items = (0, react_1.useMemo)(() => (0, lodash_1.map)(folderItems, (item) => ({
+        label: item.label,
+        value: item.value,
+        color: item.color,
+        customComponent: react_1.default.createElement(FolderNameRender, { folder: item })
+    })), [folderItems]);
+    const defaultFolderSelection = (0, react_1.useMemo)(() => {
+        const defaultFold = (0, lodash_1.find)(items, ['value', defaultFolderId]);
+        const defaultFolder = {
+            value: defaultFold?.value ?? items?.[0]?.value,
+            label: defaultFold?.label ?? items?.[0]?.label,
+            color: defaultFold?.color ?? items?.[0]?.color
+        };
+        return (0, lodash_1.find)(items, ['value', defaultFolderId]) ?? defaultFolder;
+    }, [items, defaultFolderId]);
+    const onSelectedFolderChange = (0, react_1.useCallback)((id) => onChange(id), [onChange]);
+    return items && defaultFolderSelection ? (react_1.default.createElement(carbonio_design_system_1.Select, { label: label, onChange: onSelectedFolderChange, items: items, defaultSelection: defaultFolderSelection, disablePortal: true, disabled: disabled, LabelFactory: select_label_factory_1.FolderSelectorLabelFactory })) : null;
+};
+exports.FoldersSelector = FoldersSelector;
+//# sourceMappingURL=folders-selector.js.map

package/lib/components/select/folders-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"folders-selector.js","sourceRoot":"","sources":["../../../src/components/select/folders-selector.tsx"],"names":[],"mappings":"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"}

package/lib/components/select/select-label-factory.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactElement } from 'react';
+import { CustomLabelFactoryProps } from '../../types/select';
+export declare const Square: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $disabled?: boolean;
+    $color: string | undefined;
+}>> & string;
+export declare const FolderSelectorLabelFactory: ({ selected, label, open, focus, disabled }: CustomLabelFactoryProps) => ReactElement;

package/lib/components/select/select-label-factory.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FolderSelectorLabelFactory = exports.Square = void 0;
+/*
+ * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+const react_1 = __importDefault(require("react"));
+const carbonio_design_system_1 = require("@zextras/carbonio-design-system");
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.Square = styled_components_1.default.div `
+	width: 1rem;
+	height: 1rem;
+	background: ${({ $color }) => $color};
+	border-radius: 0.25rem;
+	opacity: ${({ $disabled }) => ($disabled ? 0.5 : 1)};
+`;
+const ColorContainer = (0, styled_components_1.default)(carbonio_design_system_1.Container) `
+	border-bottom: 0.0625rem solid ${({ theme }) => theme.palette.gray2.regular};
+	transition: background 0.2s ease-out;
+	&:hover {
+		background: ${({ theme, background }) => (0, carbonio_design_system_1.getColor)(`${background}.hover`, theme)};
+	}
+`;
+const TextUpperCase = (0, styled_components_1.default)(carbonio_design_system_1.Text) `
+	text-transform: capitalize;
+	color: ${({ theme, disabled }) => disabled ? theme.palette.text.disabled : theme.palette.text.regular};
+`;
+const FolderSelectorLabelFactory = ({ selected, label, open, focus, disabled }) => (react_1.default.createElement(ColorContainer, { orientation: "horizontal", width: "fill", crossAlignment: "center", mainAlignment: "space-between", borderRadius: "half", padding: {
+        all: 'small'
+    }, background: "gray5", style: { cursor: disabled ? 'no-drop' : 'pointer' } },
+    react_1.default.createElement(carbonio_design_system_1.Row, { width: "100%", takeAvailableSpace: true, mainAlignment: "space-between" },
+        react_1.default.createElement(carbonio_design_system_1.Row, { orientation: "vertical", crossAlignment: "flex-start", mainAlignment: "flex-start", padding: { left: 'small' } },
+            react_1.default.createElement(carbonio_design_system_1.Text, { size: "small", disabled: disabled, color: (disabled && 'text.disabled') || ((open || focus) && 'primary') || 'secondary' }, label),
+            react_1.default.createElement(carbonio_design_system_1.Row, null,
+                react_1.default.createElement(carbonio_design_system_1.Padding, { right: "small" },
+                    react_1.default.createElement(exports.Square, { "$color": selected[0].color, "$disabled": disabled })),
+                react_1.default.createElement(TextUpperCase, { disabled: disabled }, selected[0].label)))),
+    react_1.default.createElement(carbonio_design_system_1.Icon, { size: "large", icon: open ? 'ChevronUpOutline' : 'ChevronDownOutline', disabled: disabled, color: (disabled && 'text.disabled') || ((open || focus) && 'primary') || 'secondary', style: { alignSelf: 'center' } })));
+exports.FolderSelectorLabelFactory = FolderSelectorLabelFactory;
+//# sourceMappingURL=select-label-factory.js.map

package/lib/components/select/select-label-factory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-label-factory.js","sourceRoot":"","sources":["../../../src/components/select/select-label-factory.tsx"],"names":[],"mappings":";;;;;;AAAA;;;;GAIG;AACH,kDAA4C;AAE5C,4EAAgG;AAChG,0EAAuC;AAI1B,QAAA,MAAM,GAAG,2BAAM,CAAC,GAAG,CAAqD;;;eAGtE,CAAC,EAAE,MAAM,EAAE,EAAsB,EAAE,CAAC,MAAM;;YAE7C,CAAC,EAAE,SAAS,EAAE,EAAU,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;CAC3D,CAAC;AAEF,MAAM,cAAc,GAAG,IAAA,2BAAM,EAAC,kCAAS,CAAC,CAAA;kCACN,CAAC,EAAE,KAAK,EAAE,EAAU,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO;;;gBAGpE,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAU,EAAE,CAAC,IAAA,iCAAQ,EAAC,GAAG,UAAU,QAAQ,EAAE,KAAK,CAAC;;CAExF,CAAC;AAEF,MAAM,aAAa,GAAG,IAAA,2BAAM,EAAC,6BAAI,CAAC,CAAA;;UAExB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAU,EAAE,CACxC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO;CACpE,CAAC;AAEK,MAAM,0BAA0B,GAAG,CAAC,EAC1C,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,KAAK,EACL,QAAQ,EACiB,EAAgB,EAAE,CAAC,CAC5C,8BAAC,cAAc,IACd,WAAW,EAAC,YAAY,EACxB,KAAK,EAAC,MAAM,EACZ,cAAc,EAAC,QAAQ,EACvB,aAAa,EAAC,eAAe,EAC7B,YAAY,EAAC,MAAM,EACnB,OAAO,EAAE;QACR,GAAG,EAAE,OAAO;KACZ,EACD,UAAU,EAAC,OAAO,EAClB,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE;IAEnD,8BAAC,4BAAG,IAAC,KAAK,EAAC,MAAM,EAAC,kBAAkB,QAAC,aAAa,EAAC,eAAe;QACjE,8BAAC,4BAAG,IACH,WAAW,EAAC,UAAU,EACtB,cAAc,EAAC,YAAY,EAC3B,aAAa,EAAC,YAAY,EAC1B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAE1B,8BAAC,6BAAI,IACJ,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,CAAC,QAAQ,IAAI,eAAe,CAAC,IAAI,CAAC,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,SAAS,CAAC,IAAI,WAAW,IAEpF,KAAK,CACA;YACP,8BAAC,4BAAG;gBACH,8BAAC,gCAAO,IAAC,KAAK,EAAC,OAAO;oBACrB,8BAAC,cAAM,cAAS,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,eAAa,QAAQ,GAAI,CACjD;gBACV,8BAAC,aAAa,IAAC,QAAQ,EAAE,QAAQ,IAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAiB,CACjE,CACD,CACD;IACN,8BAAC,6BAAI,IACJ,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,oBAAoB,EACtD,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,CAAC,QAAQ,IAAI,eAAe,CAAC,IAAI,CAAC,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,SAAS,CAAC,IAAI,WAAW,EACrF,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAC7B,CACc,CACjB,CAAC;AAjDW,QAAA,0BAA0B,8BAiDrC"}

package/lib/components/sidebar/sidebar-accordion-mui.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import type { SidebarAccordionProps } from '../../types/sidebar';
+export declare const SidebarAccordionMui: FC<SidebarAccordionProps>;