@pnp/spfx-controls-react 3.24.0-beta.2252463 → 3.24.0-beta.2280641

package/lib-commonjs/controls/imagePicker/selectFromSharePoint.js

@@ -0,0 +1,275 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectFromSharePoint = void 0;
+var tslib_1 = require("tslib");
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-floating-promises */
+/* eslint-disable require-atomic-updates */
+var React = tslib_1.__importStar(require("react"));
+var ControlStrings_1 = tslib_1.__importDefault(require("ControlStrings"));
+var jotai_1 = require("jotai");
+var react_components_1 = require("@fluentui/react-components");
+var contextState_1 = require("./atoms/contextState");
+var constants_1 = require("./constants/constants");
+var useGrapAPI_1 = require("./hooks/useGrapAPI");
+var useSpAPI_1 = require("./hooks/useSpAPI");
+var useUtils_1 = require("./hooks/useUtils");
+var RenderHeader_1 = require("./renderHeader/RenderHeader");
+var SelectStokImage_1 = require("./SelectStokImage");
+var Upload_1 = require("./Upload");
+var useImagePickerStyles_1 = require("./useImagePickerStyles");
+var lodash_1 = require("lodash");
+var react_theme_provider_1 = require("@fluentui/react-theme-provider");
+var react_migration_v8_v9_1 = require("@fluentui/react-migration-v8-v9");
+var defaultImage = require('./constants/defaultImage.png');
+var TENANT_NAME = window.location.hostname;
+var SOURCE_SHAREPOINT = "AND -path:https://*my.sharepoint.com";
+var SOURCE_ONEDRIVE = "AND path:https://*my.sharepoint.com";
+var SOURCE_STOCK = "stockImages";
+var SOURCE_UPLOAD = "upload";
+var acceptableExtensions = constants_1.IMG_SUPPORTED_EXTENSIONS.split(',');
+var queryExtensions = acceptableExtensions
+    .map(function (ext) { return "fileType:".concat(ext); })
+    .join(' OR ');
+var PAGE_ITEMS = 50;
+var SelectFromSharePoint = function (props) {
+    var isOpen = props.isOpen, onDismiss = props.onDismiss, onFileSelected = props.onFileSelected;
+    var _a = React.useState(false), isAdding = _a[0], setIsAdding = _a[1];
+    var _b = React.useState([]), searchResults = _b[0], setSearchResults = _b[1];
+    var appContext = (0, jotai_1.useAtomValue)(contextState_1.contextState);
+    var context = appContext.context;
+    var searchImages = (0, useGrapAPI_1.useGraphAPI)(context).searchImages;
+    var downLoadSpOrOneDriveContent = (0, useSpAPI_1.useSpAPI)(context).downLoadSpOrOneDriveContent;
+    var _c = React.useState(null), selectedImage = _c[0], setSelectedImage = _c[1];
+    var refSelectedImage = React.useRef(null);
+    var isScrolling = React.useRef(false);
+    var styles = (0, useImagePickerStyles_1.useImagePickerStyles)();
+    var _d = React.useState(false), isLoading = _d[0], setIsLoading = _d[1];
+    var _e = React.useState(SOURCE_SHAREPOINT), source = _e[0], setSource = _e[1];
+    var _f = (0, useUtils_1.useUtils)(), getFileNameFromUrl = _f.getFileNameFromUrl, getFileNameWithoutExtension = _f.getFileNameWithoutExtension, getScrollPosition = _f.getScrollPosition;
+    var refStart = React.useRef(0);
+    var refHasMore = React.useRef(false);
+    var _g = React.useState(), theme = _g[0], setTheme = _g[1];
+    var currentSPTheme = (0, react_theme_provider_1.useTheme)();
+    var _h = React.useState(false), isInitialized = _h[0], setIsInitialized = _h[1];
+    var hasSelectedImage = React.useMemo(function () { return selectedImage !== null; }, [selectedImage]);
+    React.useEffect(function () {
+        (function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+            var teamsContext, teamsTheme;
+            var _a;
+            return tslib_1.__generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!(0, lodash_1.has)(context, 'sdks.microsoftTeams.teamsJs.app.getContext')) return [3 /*break*/, 2];
+                        return [4 /*yield*/, ((_a = context.sdks.microsoftTeams) === null || _a === void 0 ? void 0 : _a.teamsJs.app.getContext())];
+                    case 1:
+                        teamsContext = _b.sent();
+                        teamsTheme = teamsContext.app.theme || 'default';
+                        switch (teamsTheme) {
+                            case 'dark':
+                                setTheme(react_components_1.teamsDarkTheme);
+                                break;
+                            case 'contrast':
+                                setTheme(react_components_1.teamsHighContrastTheme);
+                                break;
+                            case 'default':
+                                setTheme(react_components_1.teamsLightTheme);
+                                break;
+                            default:
+                                setTheme(react_components_1.teamsLightTheme);
+                                break;
+                        }
+                        return [3 /*break*/, 3];
+                    case 2:
+                        setTheme((0, react_migration_v8_v9_1.createV9Theme)(currentSPTheme));
+                        _b.label = 3;
+                    case 3:
+                        setIsInitialized(true);
+                        return [2 /*return*/];
+                }
+            });
+        }); })().catch(function (error) {
+            console.error('Error initializing theme:', error);
+            setTheme((0, react_migration_v8_v9_1.createV9Theme)(currentSPTheme));
+            setIsInitialized(true);
+        });
+    }, [context, currentSPTheme]);
+    var getMoreResultsSearch = React.useCallback(function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        var results, fields_1, hasMoreResults, error_1;
+        return tslib_1.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (source === SOURCE_STOCK || source === SOURCE_UPLOAD)
+                        return [2 /*return*/];
+                    if (!refHasMore.current)
+                        return [2 /*return*/];
+                    refStart.current += PAGE_ITEMS;
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, searchImages("(".concat(queryExtensions, ") ").concat(source), refStart.current)];
+                case 2:
+                    results = _a.sent();
+                    fields_1 = results.fields, hasMoreResults = results.hasMoreResults;
+                    refHasMore.current = hasMoreResults;
+                    setSearchResults(function (prev) { return tslib_1.__spreadArray(tslib_1.__spreadArray([], prev, true), fields_1, true); });
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_1 = _a.sent();
+                    console.error('[getMoreResultsSearch] error:', error_1);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, [searchImages, source]);
+    React.useEffect(function () {
+        (function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+            var results, fields, hasMoreResults, error_2;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!context || source === SOURCE_STOCK || source === SOURCE_UPLOAD)
+                            return [2 /*return*/];
+                        setIsLoading(true);
+                        setSelectedImage(null);
+                        refStart.current = 0;
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, 4, 5]);
+                        return [4 /*yield*/, searchImages("(".concat(queryExtensions, ") ").concat(source), refStart.current)];
+                    case 2:
+                        results = _a.sent();
+                        fields = results.fields, hasMoreResults = results.hasMoreResults;
+                        refHasMore.current = hasMoreResults;
+                        setSearchResults(fields);
+                        return [3 /*break*/, 5];
+                    case 3:
+                        error_2 = _a.sent();
+                        console.error('[useEffect] error:', error_2);
+                        return [3 /*break*/, 5];
+                    case 4:
+                        setIsLoading(false);
+                        return [7 /*endfinally*/];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        }); })();
+    }, [source, context, searchImages]);
+    var onSelectFile = React.useCallback(function () {
+        if (!refSelectedImage.current)
+            return;
+        var _a = refSelectedImage.current, defaultEncodingURL = _a.defaultEncodingURL, driveId = _a.driveId, id = _a.id, filename = _a.filename, fileType = _a.fileType;
+        var image = driveId
+            ? "".concat(window.location.origin, "/_api/v2.1/sites/").concat(TENANT_NAME, "/drives/").concat(driveId, "/items/").concat(id, "/thumbnails/0/c400x999/content?prefer=noredirect,closestavailablesize,extendCacheMaxAge")
+            : fileType === 'svg'
+                ? defaultEncodingURL
+                : defaultImage;
+        var fileResult = {
+            downloadFileContent: function () {
+                return downLoadSpOrOneDriveContent(driveId, id, filename);
+            },
+            fileAbsoluteUrl: defaultEncodingURL,
+            fileName: getFileNameFromUrl(defaultEncodingURL),
+            fileNameWithoutExtension: getFileNameWithoutExtension(defaultEncodingURL),
+            previewDataUrl: image,
+        };
+        onFileSelected(fileResult);
+        onDismiss(true);
+    }, [
+        downLoadSpOrOneDriveContent,
+        onDismiss,
+        onFileSelected,
+        getFileNameFromUrl,
+        getFileNameWithoutExtension,
+    ]);
+    var renderDialogActions = React.useMemo(function () { return (React.createElement(React.Fragment, null,
+        React.createElement(react_components_1.Button, { disabled: !hasSelectedImage, appearance: "primary", onClick: onSelectFile }, ControlStrings_1.default.ImagePickderSelectLabel),
+        React.createElement(react_components_1.Button, { onClick: function () { return onDismiss(false); }, disabled: isAdding }, ControlStrings_1.default.ImagePickerCancelLabel))); }, [hasSelectedImage, onSelectFile, onDismiss, isAdding]);
+    var onSourceSelected = React.useCallback(function (source) {
+        switch (source) {
+            case 'sharePoint':
+                setSource(SOURCE_SHAREPOINT);
+                break;
+            case 'onDrive':
+                setSource(SOURCE_ONEDRIVE);
+                break;
+            case 'stockImage':
+                setSource(SOURCE_STOCK);
+                break;
+            case 'upload':
+                setSource(SOURCE_UPLOAD);
+                break;
+        }
+    }, []);
+    var onScroll = React.useCallback(function (ev) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        var scrollPosition;
+        return tslib_1.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    scrollPosition = getScrollPosition(ev.target);
+                    if (!(scrollPosition > 98 && !isScrolling.current)) return [3 /*break*/, 2];
+                    isScrolling.current = true;
+                    return [4 /*yield*/, getMoreResultsSearch()];
+                case 1:
+                    _a.sent();
+                    isScrolling.current = false;
+                    _a.label = 2;
+                case 2: return [2 /*return*/];
+            }
+        });
+    }); }, [getMoreResultsSearch, getScrollPosition]);
+    var imageFallback = React.useCallback(function (e) {
+        e.currentTarget.src = defaultImage;
+    }, []);
+    var renderSharepointOrOnDriveImages = React.useCallback(function () { return (React.createElement("div", { className: styles.grid, onScroll: onScroll }, searchResults &&
+        searchResults.map(function (item) {
+            var src = item.fileType === 'svg' || !item.driveId
+                ? item.defaultEncodingURL
+                : "".concat(window.location.origin, "/_api/v2.1/sites/").concat(item.siteID, "/drives/").concat(item.driveId, "/items/").concat(item.id, "/thumbnails/0/c400x999/content?prefer=noredirect,closestavailablesize,extendCacheMaxAge}");
+            return (React.createElement(react_components_1.Image, { key: item.id, src: src, alt: item.title, style: { height: '100px' }, fit: "cover", className: (0, react_components_1.mergeClasses)(styles.image, selectedImage === item && styles.selectedImage), onClick: function () {
+                    refSelectedImage.current = item;
+                    setSelectedImage(item);
+                }, onError: imageFallback }));
+        }))); }, [searchResults, selectedImage, styles, onScroll]);
+    var renderSelectedImage = React.useCallback(function () {
+        switch (source) {
+            case SOURCE_SHAREPOINT:
+            case SOURCE_ONEDRIVE:
+                return renderSharepointOrOnDriveImages();
+            case SOURCE_STOCK:
+                return (React.createElement(SelectStokImage_1.SelectStockImage, { onFileSelected: function (file) {
+                        onFileSelected(file);
+                        onDismiss(true);
+                    }, onCancel: function () { return onDismiss(false); }, context: context }));
+            case SOURCE_UPLOAD:
+                return (React.createElement(Upload_1.UploadImageFiles, { context: context, onSelectedFile: function (file) {
+                        refSelectedImage.current = file;
+                        setSelectedImage(file);
+                    } }));
+        }
+    }, [
+        source,
+        renderSharepointOrOnDriveImages,
+        context,
+        onDismiss,
+        onFileSelected,
+    ]);
+    if (!isOpen)
+        return null;
+    return (React.createElement(react_components_1.Dialog, { open: isOpen, modalType: "modal" },
+        React.createElement(react_components_1.FluentProvider, { theme: theme },
+            React.createElement(react_components_1.DialogSurface, { style: { backgroundColor: react_components_1.tokens.colorNeutralBackground2 } },
+                React.createElement(RenderHeader_1.RenderHeader, { title: ControlStrings_1.default.ImagePickderSelectLabel, description: ControlStrings_1.default.ImagePickerPanelHeaderText, icon: 'guidance:tools', onDismiss: onDismiss }),
+                React.createElement(react_components_1.DialogBody, { style: { gap: 0 } },
+                    React.createElement(react_components_1.DialogContent, { style: { marginBottom: 15, minHeight: 500 } },
+                        React.createElement("div", { className: styles.toolbarContainer },
+                            React.createElement(react_components_1.Button, { appearance: source === SOURCE_SHAREPOINT ? 'primary' : 'secondary', shape: "circular", onClick: function () { return onSourceSelected('sharePoint'); } }, ControlStrings_1.default.ImagePickerSharePointTabLabel),
+                            React.createElement(react_components_1.Button, { appearance: source === SOURCE_ONEDRIVE ? 'primary' : 'secondary', shape: "circular", onClick: function () { return onSourceSelected('onDrive'); } }, ControlStrings_1.default.ImagePickerOneDriveTabLabel),
+                            React.createElement(react_components_1.Button, { appearance: source === SOURCE_STOCK ? 'primary' : 'secondary', shape: "circular", onClick: function () { return onSourceSelected('stockImage'); } }, ControlStrings_1.default.ImagePickerStockImagesTabLabel),
+                            React.createElement(react_components_1.Button, { appearance: source === SOURCE_UPLOAD ? 'primary' : 'secondary', shape: "circular", onClick: function () { return onSourceSelected('upload'); } }, ControlStrings_1.default.ImagePickerUploadTabLabel)),
+                        isLoading ? (React.createElement(react_components_1.Spinner, { style: { paddingTop: 60 } })) : (renderSelectedImage())),
+                    source !== SOURCE_STOCK && (React.createElement(react_components_1.DialogActions, { fluid: true, position: "end", style: { marginTop: 10 } }, renderDialogActions)))))));
+};
+exports.SelectFromSharePoint = SelectFromSharePoint;
+//# sourceMappingURL=selectFromSharePoint.js.map

package/lib-commonjs/controls/imagePicker/selectFromSharePoint.js.map

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

package/lib-commonjs/controls/imagePicker/uploadFiles/DeleteFile.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeleteFile = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var ControlStrings_1 = tslib_1.__importDefault(require("ControlStrings"));
+var react_components_1 = require("@fluentui/react-components");
+var react_icons_1 = require("@fluentui/react-icons");
+var useUploadFilesStyles_1 = require("./useUploadFilesStyles");
+var DeleteFile = function (props) {
+    var Delete = (0, react_icons_1.bundleIcon)(react_icons_1.Delete16Filled, react_icons_1.Delete16Regular);
+    var styles = (0, useUploadFilesStyles_1.useUploadFilesStyles)();
+    var isWhow = props.isWhow, onDeleteFile = props.onDeleteFile;
+    if (!isWhow) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(react_components_1.Tooltip, { content: ControlStrings_1.default.ImagePickerDeleteLabel, relationship: "label" },
+            React.createElement("div", { "aria-label": ControlStrings_1.default.ImagePickerDeleteLabel },
+                React.createElement(react_components_1.Button, { icon: React.createElement(Delete, { className: styles.deleteStyle }), size: "small", appearance: "transparent", onClick: function (e) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        onDeleteFile();
+                    } })))));
+};
+exports.DeleteFile = DeleteFile;
+//# sourceMappingURL=DeleteFile.js.map

package/lib-commonjs/controls/imagePicker/uploadFiles/DeleteFile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeleteFile.js","sourceRoot":"","sources":["../../../../src/controls/imagePicker/uploadFiles/DeleteFile.tsx"],"names":[],"mappings":";;;;AAAA,mDAA+B;AAE/B,0EAAqC;AAErC,+DAGoC;AACpC,qDAI+B;AAE/B,+DAA8D;AAOvD,IAAM,UAAU,GAA8C,UAEnE,KAAgD;IAEhD,IAAM,MAAM,GAAG,IAAA,wBAAU,EAAC,4BAAc,EAAE,6BAAe,CAAC,CAAC;IAC3D,IAAM,MAAM,GAAG,IAAA,2CAAoB,GAAE,CAAC;IAC9B,IAAA,MAAM,GAAmB,KAAK,OAAxB,EAAG,YAAY,GAAI,KAAK,aAAT,CAAU;IACvC,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,CACL;QACE,oBAAC,0BAAO,IAAC,OAAO,EAAE,wBAAO,CAAC,sBAAsB,EAAE,YAAY,EAAE,OAAO;YACrE,2CAAiB,wBAAO,CAAC,sBAAsB;gBAC7C,oBAAC,yBAAM,IACL,IAAI,EAAE,oBAAC,MAAM,IAAC,SAAS,EAAE,MAAM,CAAC,WAAW,GAAI,EAC/C,IAAI,EAAC,OAAO,EACZ,UAAU,EAAC,aAAa,EACxB,OAAO,EAAE,UAAC,CAAsC;wBAC9C,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;wBACpB,YAAY,EAAE,CAAC;oBACjB,CAAC,GACD,CAEE,CACE,CACT,CACJ,CAAC;AACJ,CAAC,CAAC;AA7BW,QAAA,UAAU,cA6BrB"}

package/lib-commonjs/controls/imagePicker/uploadFiles/FileError.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileError = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var react_components_1 = require("@fluentui/react-components");
+var react_icons_1 = require("@fluentui/react-icons");
+var useStyles = (0, react_components_1.makeStyles)({
+    root: tslib_1.__assign(tslib_1.__assign({ display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "start" }, react_components_1.shorthands.gap("5px")), { paddingTop: "10px" }),
+    iconErrorStyle: {
+        width: "18px",
+        height: "18px",
+        color: react_components_1.tokens.colorStatusWarningForeground1,
+    },
+    errorTextStyles: {
+        color: react_components_1.tokens.colorStatusWarningForeground1,
+        paddingLeft: "5px",
+    },
+});
+var FileError = function (props) {
+    var isShow = props.isShow, error = props.error;
+    if (!isShow) {
+        return null;
+    }
+    var styles = useStyles();
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: styles.root },
+            React.createElement(react_icons_1.ErrorCircleRegular, { className: styles.iconErrorStyle }),
+            React.createElement(react_components_1.Caption1Strong, { className: styles.errorTextStyles }, error))));
+};
+exports.FileError = FileError;
+//# sourceMappingURL=FileError.js.map

package/lib-commonjs/controls/imagePicker/uploadFiles/FileError.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileError.js","sourceRoot":"","sources":["../../../../src/controls/imagePicker/uploadFiles/FileError.tsx"],"names":[],"mappings":";;;;AAAA,mDAA+B;AAE/B,+DAKoC;AACpC,qDAA2D;AAO3D,IAAM,SAAS,GAAG,IAAA,6BAAU,EAAC;IAC3B,IAAI,sCACF,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,KAAK,EACpB,UAAU,EAAE,QAAQ,EACpB,cAAc,EAAE,OAAO,IACpB,6BAAU,CAAC,GAAG,CAAC,KAAK,CAAC,KACxB,UAAU,EAAE,MAAM,GACnB;IACD,cAAc,EAAE;QACd,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,yBAAM,CAAC,6BAA6B;KAC5C;IAED,eAAe,EAAE;QACf,KAAK,EAAE,yBAAM,CAAC,6BAA6B;QAC3C,WAAW,EAAE,KAAK;KACnB;CACF,CAAC,CAAC;AAEI,IAAM,SAAS,GAA6C,UACjE,KAA+C;IAEvC,IAAA,MAAM,GAAY,KAAK,OAAjB,EAAG,KAAK,GAAI,KAAK,MAAT,CAAU;IAChC,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,OAAO,IAAI,CAAC;IACd,CAAC;IACD,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,OAAO,CACL;QACE,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;YACzB,oBAAC,gCAAkB,IAAC,SAAS,EAAE,MAAM,CAAC,cAAc,GAAI;YACxD,oBAAC,iCAAc,IAAC,SAAS,EAAE,MAAM,CAAC,eAAe,IAAG,KAAK,CAAkB,CACvE,CACL,CACJ,CAAC;AACJ,CAAC,CAAC;AAjBW,QAAA,SAAS,aAiBpB"}

package/lib-commonjs/controls/imagePicker/uploadFiles/FileProgress.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileProgress = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var react_components_1 = require("@fluentui/react-components");
+var useStyles = (0, react_components_1.makeStyles)({
+    root: tslib_1.__assign(tslib_1.__assign({ paddingTop: "15px", display: "flex" }, react_components_1.shorthands.gap("5px")), { alignItems: "center" }),
+});
+var FileProgress = function (props) {
+    var percentageCompleted = props.percentageCompleted, isShow = props.isShow;
+    var percentage = percentageCompleted * 100;
+    var styles = useStyles();
+    if (!isShow) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: styles.root },
+            React.createElement(react_components_1.ProgressBar, { thickness: "medium", max: 100, value: percentage }),
+            React.createElement(react_components_1.Caption1, null,
+                " ",
+                percentage.toFixed(0),
+                "%"))));
+};
+exports.FileProgress = FileProgress;
+//# sourceMappingURL=FileProgress.js.map

package/lib-commonjs/controls/imagePicker/uploadFiles/FileProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileProgress.js","sourceRoot":"","sources":["../../../../src/controls/imagePicker/uploadFiles/FileProgress.tsx"],"names":[],"mappings":";;;;AAAA,mDAA+B;AAE/B,+DAKoC;AAOpC,IAAM,SAAS,GAAG,IAAA,6BAAU,EAAC;IAC3B,IAAI,sCACF,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,MAAM,IACZ,6BAAU,CAAC,GAAG,CAAC,KAAK,CAAC,KACxB,UAAU,EAAE,QAAQ,GACrB;CACF,CAAC,CAAC;AAEI,IAAM,YAAY,GAAgD,UACvE,KAAkD;IAE1C,IAAA,mBAAmB,GAAa,KAAK,oBAAlB,EAAE,MAAM,GAAK,KAAK,OAAV,CAAW;IAE9C,IAAM,UAAU,GAAG,mBAAmB,GAAG,GAAG,CAAC;IAE7C,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,CACL;QACE,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;YACzB,oBAAC,8BAAW,IAAC,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,UAAU,GAAI;YAC/D,oBAAC,2BAAQ;;gBAAG,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;oBAAa,CAC1C,CACL,CACJ,CAAC;AACJ,CAAC,CAAC;AApBW,QAAA,YAAY,gBAoBvB"}

package/lib-commonjs/controls/imagePicker/uploadFiles/RetryUpload.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RetryUpload = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var ControlStrings_1 = tslib_1.__importDefault(require("ControlStrings"));
+var react_components_1 = require("@fluentui/react-components");
+var react_icons_1 = require("@fluentui/react-icons");
+var useUploadFilesStyles_1 = require("./useUploadFilesStyles");
+var RetryUpload = function (props) {
+    var isShow = props.isShow;
+    var Retry = (0, react_icons_1.bundleIcon)(react_icons_1.ArrowClockwiseFilled, react_icons_1.ArrowClockwiseRegular);
+    var styles = (0, useUploadFilesStyles_1.useUploadFilesStyles)();
+    if (!isShow) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(react_components_1.Tooltip, { content: ControlStrings_1.default.ImagePickerRetryButtonLabel, relationship: "label" },
+            React.createElement("div", { "aria-label": ControlStrings_1.default.ImagePickerRetryButtonLabel },
+                React.createElement(react_components_1.Button, { icon: React.createElement(Retry, { className: styles.iconRefreshStyle }), size: "small", appearance: "transparent", onClick: function (e) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        props.onRetry();
+                    } })))));
+};
+exports.RetryUpload = RetryUpload;
+//# sourceMappingURL=RetryUpload.js.map

package/lib-commonjs/controls/imagePicker/uploadFiles/RetryUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RetryUpload.js","sourceRoot":"","sources":["../../../../src/controls/imagePicker/uploadFiles/RetryUpload.tsx"],"names":[],"mappings":";;;;AAAA,mDAA+B;AAE/B,0EAAqC;AAErC,+DAGoC;AACpC,qDAI+B;AAE/B,+DAA8D;AAOvD,IAAM,WAAW,GAA+C,UACrE,KAAiD;IAEzC,IAAA,MAAM,GAAK,KAAK,OAAV,CAAW;IAEzB,IAAM,KAAK,GAAG,IAAA,wBAAU,EAAC,kCAAoB,EAAE,mCAAqB,CAAC,CAAC;IACtE,IAAM,MAAM,GAAG,IAAA,2CAAoB,GAAE,CAAC;IAEtC,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,CACL;QACE,oBAAC,0BAAO,IAAC,OAAO,EAAE,wBAAO,CAAC,2BAA2B,EAAE,YAAY,EAAE,OAAO;YAC1E,2CAAiB,wBAAO,CAAC,2BAA2B;gBAClD,oBAAC,yBAAM,IACL,IAAI,EAAE,oBAAC,KAAK,IAAC,SAAS,EAAE,MAAM,CAAC,gBAAgB,GAAI,EACnD,IAAI,EAAC,OAAO,EACZ,UAAU,EAAC,aAAa,EACxB,OAAO,EAAE,UAAC,CAAsC;wBAC9C,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;wBACpB,KAAK,CAAC,OAAO,EAAE,CAAC;oBAClB,CAAC,GACD,CACE,CACE,CACT,CACJ,CAAC;AACJ,CAAC,CAAC;AA7BW,QAAA,WAAW,eA6BtB"}

package/lib-commonjs/controls/imagePicker/uploadFiles/SelectUploadLocation.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectUploadLocation = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var ControlStrings_1 = tslib_1.__importDefault(require("ControlStrings"));
+var react_components_1 = require("@fluentui/react-components");
+var react_icons_1 = require("@fluentui/react-icons");
+var EUploadLocations_1 = require("../constants/EUploadLocations");
+var useStyles = (0, react_components_1.makeStyles)({
+    root: tslib_1.__assign({ display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "start" }, react_components_1.shorthands.gap("5px")),
+    iconStyles: {
+        width: "18px",
+        height: "18px",
+        color: react_components_1.tokens.colorBrandForeground1,
+    },
+});
+var RenderLabel = function () {
+    var styles = useStyles();
+    return (React.createElement("div", { className: styles.root },
+        React.createElement(react_icons_1.WebAssetRegular, { className: styles.iconStyles }),
+        React.createElement(react_components_1.Body1, null, ControlStrings_1.default.ImagePickerUploadLocationLabel)));
+};
+var SelectUploadLocation = function (props) {
+    var _a = React.useState(EUploadLocations_1.EUploadLocations.CurrentSite), value = _a[0], setValue = _a[1];
+    var onSelectedLocation = props.onSelectedLocation;
+    var onChange = React.useCallback(function (data) {
+        setValue(data.value);
+        if (onSelectedLocation) {
+            onSelectedLocation(data.value);
+        }
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(react_components_1.Field, { label: React.createElement(RenderLabel, null), style: { paddingBottom: 10 } },
+            React.createElement(react_components_1.RadioGroup, { value: value, onChange: function (_, data) { return onChange(data); }, layout: "horizontal" },
+                React.createElement(react_components_1.Radio, { value: EUploadLocations_1.EUploadLocations.OneDrive, label: ControlStrings_1.default.ImagePickerUploadLocationOndriveLabel }),
+                React.createElement(react_components_1.Radio, { value: EUploadLocations_1.EUploadLocations.CurrentSite, label: ControlStrings_1.default.ImagePickerUploadLocationSharePointLabel })))));
+};
+exports.SelectUploadLocation = SelectUploadLocation;
+//# sourceMappingURL=SelectUploadLocation.js.map

package/lib-commonjs/controls/imagePicker/uploadFiles/SelectUploadLocation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectUploadLocation.js","sourceRoot":"","sources":["../../../../src/controls/imagePicker/uploadFiles/SelectUploadLocation.tsx"],"names":[],"mappings":";;;;AAAA,mDAA+B;AAE/B,0EAAqC;AAErC,+DASoC;AACpC,qDAAwD;AAExD,kEAAiE;AAMjE,IAAM,SAAS,GAAG,IAAA,6BAAU,EAAC;IAC3B,IAAI,qBACF,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,KAAK,EACpB,UAAU,EAAE,QAAQ,EACpB,cAAc,EAAE,OAAO,IACpB,6BAAU,CAAC,GAAG,CAAC,KAAK,CAAC,CACzB;IACD,UAAU,EAAE;QACV,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,yBAAM,CAAC,qBAAqB;KACpC;CACF,CAAC,CAAC;AAEH,IAAM,WAAW,GAAG;IAClB,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;QACzB,oBAAC,6BAAe,IAAC,SAAS,EAAE,MAAM,CAAC,UAAU,GAAI;QACjD,oBAAC,wBAAK,QAAE,wBAAO,CAAC,8BAA8B,CAAS,CACnD,CACP,CAAC;AACJ,CAAC,CAAC;AAEK,IAAM,oBAAoB,GAAwD,UACvF,KAA0D;IAEpD,IAAA,KAAoB,KAAK,CAAC,QAAQ,CAAS,mCAAgB,CAAC,WAAW,CAAC,EAAvE,KAAK,QAAA,EAAE,QAAQ,QAAwD,CAAC;IAEvE,IAAA,kBAAkB,GAAK,KAAK,mBAAV,CAAW;IAErC,IAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,UAAC,IAA4B;QAC9D,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACrB,IAAI,kBAAkB,EAAE,CAAC;YACvB,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,CACL;QACE,oBAAC,wBAAK,IAAC,KAAK,EAAE,oBAAC,WAAW,OAAG,EAAE,KAAK,EAAE,EAAE,aAAa,EAAE,EAAE,EAAE;YACzD,oBAAC,6BAAU,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAC,CAAC,EAAE,IAAI,IAAK,OAAA,QAAQ,CAAC,IAAI,CAAC,EAAd,CAAc,EAAE,MAAM,EAAC,YAAY;gBAClF,oBAAC,wBAAK,IAAC,KAAK,EAAE,mCAAgB,CAAC,QAAQ,EAAE,KAAK,EAAE,wBAAO,CAAC,qCAAqC,GAAI;gBACjG,oBAAC,wBAAK,IAAC,KAAK,EAAE,mCAAgB,CAAC,WAAW,EAAE,KAAK,EAAE,wBAAO,CAAC,wCAAwC,GAAI,CAC5F,CACP,CACP,CACJ,CAAC;AACJ,CAAC,CAAC;AAvBW,QAAA,oBAAoB,wBAuB/B"}

package/lib-commonjs/controls/imagePicker/uploadFiles/UploadFile.js

@@ -0,0 +1,162 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UpLoadFile = void 0;
+var tslib_1 = require("tslib");
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-floating-promises */
+var React = tslib_1.__importStar(require("react"));
+var jotai_1 = require("jotai");
+var react_components_1 = require("@fluentui/react-components");
+var contextState_1 = require("../atoms/contextState");
+var constants_1 = require("../constants/constants");
+var useGrapAPI_1 = require("../hooks/useGrapAPI");
+var useUploadFile_1 = require("../hooks/useUploadFile");
+var useUtils_1 = require("../hooks/useUtils");
+var DeleteFile_1 = require("./DeleteFile");
+var FileError_1 = require("./FileError");
+var FileProgress_1 = require("./FileProgress");
+var RetryUpload_1 = require("./RetryUpload");
+var useUploadFilesStyles_1 = require("./useUploadFilesStyles");
+var UpLoadFile = function (props) {
+    var file = props.file, onFileSelected = props.onFileSelected, selectedFileId = props.selectedFileId, uploadLocation = props.uploadLocation, onDelete = props.onDelete;
+    var name = file.name, size = file.size, preview = file.preview;
+    var styles = (0, useUploadFilesStyles_1.useUploadFilesStyles)();
+    var appGlobalState = (0, jotai_1.useAtomValue)(contextState_1.contextState);
+    var context = appGlobalState.context;
+    var getSiteAssetsLibrary = (0, useGrapAPI_1.useGraphAPI)(context).getSiteAssetsLibrary;
+    var _a = React.useState(null), errorInfo = _a[0], setErrorInfo = _a[1];
+    var _b = (0, useUploadFile_1.useUploadFile)(context), uploadFile = _b[0], showProgressBar = _b[1], percentComplete = _b[2], isUploadFinished = _b[4];
+    var _c = React.useState({}), fileSearchResult = _c[0], setFileSearchResult = _c[1];
+    var hasErrorOnUpload = React.useMemo(function () {
+        if (errorInfo && errorInfo.origemFunction === "uploadFile") {
+            return true;
+        }
+        return false;
+    }, [errorInfo]);
+    var hasErrorOnDelete = React.useMemo(function () {
+        if (errorInfo && errorInfo.origemFunction === "deleteFile") {
+            return true;
+        }
+        return false;
+    }, [errorInfo]);
+    var _d = React.useState(false), retryUpload = _d[0], setRetryUpload = _d[1];
+    React.useEffect(function () {
+        (function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+            var assetLibraryInfo, libraryId, parentReference, siteId, rs, fileSearchResult_1, error_1;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 3, , 4]);
+                        return [4 /*yield*/, getSiteAssetsLibrary(appGlobalState.context.pageContext.site.absoluteUrl)];
+                    case 1:
+                        assetLibraryInfo = _a.sent();
+                        libraryId = assetLibraryInfo.id, parentReference = assetLibraryInfo.parentReference;
+                        siteId = parentReference.siteId;
+                        return [4 /*yield*/, uploadFile(file, constants_1.UPLOAD_FOLDER_NAME, siteId, libraryId, uploadLocation)];
+                    case 2:
+                        rs = _a.sent();
+                        fileSearchResult_1 = {
+                            driveId: rs.parentReference.driveId,
+                            title: rs.name,
+                            path: rs.parentReference.path,
+                            filename: rs.name,
+                            siteID: rs.parentReference.siteId,
+                            fileType: rs.file.mimeType,
+                            spWebUrl: rs.webUrl,
+                            id: rs.id,
+                            modifiedBy: rs.lastModifiedBy.user.email,
+                            lastModifiedTime: rs.lastModifiedDateTime,
+                            fileExtension: rs.name.split(".").pop(),
+                            created: "",
+                            author: "",
+                            editorOwsUser: "",
+                            siteTitle: "",
+                            parentLink: "",
+                            listID: "",
+                            listItemID: "",
+                            spSiteURL: "",
+                            webId: "",
+                            uniqueID: "",
+                            defaultEncodingURL: rs.webUrl,
+                        };
+                        setFileSearchResult(fileSearchResult_1);
+                        setRetryUpload(false);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        error_1 = _a.sent();
+                        setErrorInfo({ origemFunction: "uploadFile", error: "Uploaderror" });
+                        setFileSearchResult({});
+                        setRetryUpload(false);
+                        console.error("[UploadFIle, File Upload Error]", error_1);
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); })();
+        return function () {
+            URL.revokeObjectURL(preview);
+        };
+    }, [uploadFile, preview, retryUpload, uploadLocation, appGlobalState.context.pageContext.site.absoluteUrl]);
+    var opacity = React.useMemo(function () { return (!isUploadFinished || hasErrorOnUpload ? 0.5 : 1); }, [
+        isUploadFinished,
+        hasErrorOnUpload,
+    ]);
+    var showDelete = React.useMemo(function () { return isUploadFinished; }, [isUploadFinished]);
+    var showRetry = React.useMemo(function () { return hasErrorOnUpload; }, [hasErrorOnUpload]);
+    var formatBytes = (0, useUtils_1.useUtils)().formatBytes;
+    var selected = React.useMemo(function () { return selectedFileId === fileSearchResult.id; }, [fileSearchResult, selectedFileId]);
+    var onDeleteFile = React.useCallback(function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        var _a, driveId, siteID, id, name, isDeleted;
+        return tslib_1.__generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = fileSearchResult || {}, driveId = _a.driveId, siteID = _a.siteID, id = _a.id;
+                    name = file.name;
+                    return [4 /*yield*/, onDelete(name, driveId, siteID, id)];
+                case 1:
+                    isDeleted = _b.sent();
+                    return [2 /*return*/, isDeleted];
+            }
+        });
+    }); }, [fileSearchResult, onDelete]);
+    var onRetry = React.useCallback(function () {
+        setRetryUpload(true);
+    }, [fileSearchResult]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(react_components_1.Card, { className: styles.card, selected: selected, onClick: function (e) {
+                e.stopPropagation();
+                if (fileSearchResult === null || fileSearchResult === void 0 ? void 0 : fileSearchResult.id) {
+                    onFileSelected(fileSearchResult);
+                }
+            } },
+            React.createElement(react_components_1.CardPreview, null,
+                React.createElement(react_components_1.Image, { style: { height: 120, opacity: opacity, objectPosition: "0px 0px" }, fit: "cover", src: preview, alt: "image " })),
+            React.createElement("div", { className: styles.itemBody },
+                React.createElement(react_components_1.Body1Strong, { className: styles.headerTitle }, name),
+                React.createElement(react_components_1.Caption1, null,
+                    formatBytes(size, 2),
+                    " "),
+                React.createElement(FileProgress_1.FileProgress, { isShow: showProgressBar, percentageCompleted: percentComplete }),
+                React.createElement(FileError_1.FileError, { isShow: hasErrorOnUpload || hasErrorOnDelete, error: errorInfo === null || errorInfo === void 0 ? void 0 : errorInfo.error })),
+            React.createElement("div", { className: styles.bottomContainer },
+                React.createElement(DeleteFile_1.DeleteFile, { isWhow: showDelete, onDeleteFile: function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+                        var isDeleted;
+                        return tslib_1.__generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0: return [4 /*yield*/, onDeleteFile()];
+                                case 1:
+                                    isDeleted = _a.sent();
+                                    if (!isDeleted) {
+                                        setErrorInfo({ origemFunction: "deleteFile", error: "Delete Error" });
+                                    }
+                                    else {
+                                        setErrorInfo(null);
+                                    }
+                                    return [2 /*return*/];
+                            }
+                        });
+                    }); } }),
+                React.createElement(RetryUpload_1.RetryUpload, { isShow: showRetry, onRetry: onRetry })))));
+};
+exports.UpLoadFile = UpLoadFile;
+//# sourceMappingURL=UploadFile.js.map