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

package/lib-commonjs/controls/uploadFiles/components/File/FileInfo.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileInfo = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var date_fns_1 = require("date-fns");
+var Checkbox_1 = require("@fluentui/react/lib/Checkbox");
+var DocumentCard_1 = require("@fluentui/react/lib/DocumentCard");
+var Image_1 = require("@fluentui/react/lib/Image");
+var Stack_1 = require("@fluentui/react/lib/Stack");
+var Text_1 = require("@fluentui/react/lib/Text");
+var react_file_type_icons_1 = require("@fluentui/react-file-type-icons");
+var useUtils_1 = require("../../hooks/useUtils");
+var useFileStyles_1 = require("./useFileStyles");
+(0, react_file_type_icons_1.initializeFileTypeIcons)();
+var FileInfo = function (props) {
+    var fileInfo = props.fileInfo, onSelected = props.onSelected, isSelected = props.isSelected;
+    var name = fileInfo.name, size = fileInfo.size, lastModified = fileInfo.lastModified;
+    var _a = (0, useFileStyles_1.useFileStyles)(), checkBoxStyles = _a.checkBoxStyles, documentCardStyles = _a.documentCardStyles, stackCheckboxStyles = _a.stackCheckboxStyles, fileNameStyles = _a.fileNameStyles, documentImageStyles = _a.documentImageStyles;
+    var _b = (0, useUtils_1.useUtils)(), getShortText = _b.getShortText, getFileExtension = _b.getFileExtension, getFileSize = _b.getFileSize;
+    var fileSize = getFileSize(size);
+    var fileExtension = getFileExtension(name);
+    var fileModified = (0, date_fns_1.format)(new Date(lastModified), "dd, MMM yyyy");
+    var _c = React.useState(false), isChecked = _c[0], setIsChecked = _c[1];
+    var fileIcon = React.useMemo(function () {
+        return tslib_1.__assign(tslib_1.__assign({}, (0, react_file_type_icons_1.getFileTypeIconProps)({ extension: fileExtension, size: 48, imageFileType: "svg" })), { styles: { root: { fontSize: 0 } } });
+    }, [fileExtension]);
+    var onCheckboxChange = React.useCallback(function (ev, checked) {
+        setIsChecked(checked);
+        if (onSelected) {
+            onSelected(checked, fileInfo);
+        }
+    }, [fileInfo, onSelected]);
+    React.useEffect(function () {
+        setIsChecked(isSelected);
+    }, [isSelected]);
+    var renderNormalCard = React.useCallback(function () {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Stack_1.Stack, null,
+                React.createElement(DocumentCard_1.DocumentCard, { styles: documentCardStyles, title: name },
+                    React.createElement(DocumentCard_1.DocumentCardImage, { height: 100, imageFit: Image_1.ImageFit.cover, iconProps: fileIcon, styles: documentImageStyles }),
+                    React.createElement(Stack_1.Stack, { horizontal: true, horizontalAlign: "end", tokens: { childrenGap: 5, padding: 7 }, styles: stackCheckboxStyles },
+                        React.createElement(Checkbox_1.Checkbox, { styles: checkBoxStyles, checked: isChecked, onChange: onCheckboxChange })),
+                    React.createElement(DocumentCard_1.DocumentCardDetails, null,
+                        React.createElement(Stack_1.Stack, { tokens: { padding: 10, childrenGap: 5 }, horizontalAlign: "center", verticalAlign: "center" },
+                            React.createElement(Text_1.Text, { title: name, styles: fileNameStyles, variant: "medium" }, getShortText(name, 15)),
+                            React.createElement(Text_1.Text, { variant: "small" }, fileSize),
+                            React.createElement(Text_1.Text, { block: true, nowrap: true, variant: "small" }, fileModified)))))));
+    }, [
+        documentCardStyles,
+        name,
+        fileIcon,
+        documentImageStyles,
+        stackCheckboxStyles,
+        checkBoxStyles,
+        isChecked,
+        onCheckboxChange,
+        fileNameStyles,
+        getShortText,
+        fileSize,
+        fileModified,
+    ]);
+    return React.createElement(React.Fragment, null, renderNormalCard());
+};
+exports.FileInfo = FileInfo;
+//# sourceMappingURL=FileInfo.js.map

package/lib-commonjs/controls/uploadFiles/components/File/FileInfo.js.map

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

package/lib-commonjs/controls/uploadFiles/components/File/IFileProps.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=IFileProps.js.map

package/lib-commonjs/controls/uploadFiles/components/File/IFileProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IFileProps.js","sourceRoot":"","sources":["../../../../../src/controls/uploadFiles/components/File/IFileProps.ts"],"names":[],"mappings":""}

package/lib-commonjs/controls/uploadFiles/components/File/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./FileInfo"), exports);
+tslib_1.__exportStar(require("./IFileProps"), exports);
+tslib_1.__exportStar(require("./useFileStyles"), exports);
+//# sourceMappingURL=index.js.map

package/lib-commonjs/controls/uploadFiles/components/File/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/controls/uploadFiles/components/File/index.ts"],"names":[],"mappings":";;;AAAA,qDAA2B;AAC3B,uDAA6B;AAC7B,0DAAgC"}

package/lib-commonjs/controls/uploadFiles/components/File/useFileStyles.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFileStyles = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var jotai_1 = require("jotai");
+var Styling_1 = require("@fluentui/react/lib/Styling");
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+var atoms_1 = require("../../jotai/atoms");
+var useFileStyles = function () {
+    var appGlobalState = (0, jotai_1.useAtom)(atoms_1.globalState)[0];
+    var themeVariant = appGlobalState.themeVariant;
+    var documentImageStyles = React.useMemo(function () {
+        return {
+            root: {},
+        };
+    }, []);
+    var checkBoxStyles = React.useCallback(function (props) {
+        var _a, _b, _c, _d, _e;
+        return {
+            checkbox: {
+                color: "".concat((_a = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors) === null || _a === void 0 ? void 0 : _a.bodyText, " !important"),
+                borderRadius: "50%",
+                borderWidth: 1,
+                borderStyle: "solid",
+                borderColor: (_b = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _b === void 0 ? void 0 : _b.neutralQuaternaryAlt,
+                ":hover": {
+                    borderColor: "".concat((_c = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _c === void 0 ? void 0 : _c.themePrimary, " !important"),
+                },
+                backgroundColor: !props.checked ? themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette.white : themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette.themeLighter,
+            },
+            root: {
+                ":hover": {
+                    borderColor: "".concat((_d = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _d === void 0 ? void 0 : _d.themePrimary, " !important"),
+                    color: "".concat(themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors.bodyText, " !important"),
+                    ":hover": {
+                        ".ms-Checkbox-checkbox": {
+                            backgroundColor: "".concat(themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette.themeLight, " !important"),
+                        }
+                    },
+                },
+            },
+            checkmark: {
+                color: "".concat((_e = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors) === null || _e === void 0 ? void 0 : _e.bodyText, " !important"),
+            },
+        };
+    }, [themeVariant]);
+    var documentCardStyles = React.useMemo(function () {
+        var _a;
+        return {
+            root: {
+                color: themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors.bodyText,
+                backgroundColor: themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors.bodyBackground,
+                borderColor: themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette.neutralLight,
+                minWidth: 160,
+                minHeight: 180,
+                ":hover": {
+                    borderColor: (_a = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _a === void 0 ? void 0 : _a.neutralQuaternary,
+                },
+            },
+        };
+    }, [themeVariant]);
+    var documentCardCompactStyles = React.useMemo(function () {
+        var _a;
+        return {
+            root: {
+                width: "100%",
+                maxWidth: "100%",
+                ":hover": {
+                    borderColor: (_a = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _a === void 0 ? void 0 : _a.themeLight,
+                },
+            },
+        };
+    }, [themeVariant]);
+    var stackCheckboxStyles = React.useMemo(function () {
+        return { root: { position: "absolute", top: 0, right: 0, zIndex: 1, padding: 5 } };
+    }, []);
+    var fileNameStyles = React.useMemo(function () {
+        return { root: { fontWeight: Styling_1.FontWeights.semibold,
+                color: themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors.bodyText,
+            } };
+    }, [themeVariant]);
+    var nameStyles = React.useMemo(function () {
+        return {
+            root: {
+                textTransform: "uppercase",
+                fontSize: Styling_1.FontSizes.size12,
+                fontWeight: 600,
+                display: "-webkit-box",
+                "-webkit-line-clamp": "1",
+                "-webkit-box-orient": "vertical",
+                overflow: "hidden",
+                textAlign: "start",
+                wordBreak: "break-word",
+                color: themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors.bodyText,
+            },
+        };
+    }, [themeVariant]);
+    var controlStyles = React.useMemo(function () {
+        var _a;
+        return (0, Styling_1.mergeStyleSets)({
+            ".ms-Checkbox-text": {
+                color: "".concat((_a = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors) === null || _a === void 0 ? void 0 : _a.bodyText, " !important"),
+            },
+        });
+    }, [themeVariant]);
+    return {
+        documentCardCompactStyles: documentCardCompactStyles,
+        checkBoxStyles: checkBoxStyles,
+        documentCardStyles: documentCardStyles,
+        stackCheckboxStyles: stackCheckboxStyles,
+        fileNameStyles: fileNameStyles,
+        nameStyles: nameStyles,
+        documentImageStyles: documentImageStyles,
+        controlStyles: controlStyles
+    };
+};
+exports.useFileStyles = useFileStyles;
+//# sourceMappingURL=useFileStyles.js.map

package/lib-commonjs/controls/uploadFiles/components/File/useFileStyles.js.map

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

package/lib-commonjs/controls/uploadFiles/components/FileCommandBar/FileCommandBar.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileCommandBar = void 0;
+var tslib_1 = require("tslib");
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-floating-promises */
+/* eslint-disable @typescript-eslint/no-use-before-define */
+var React = tslib_1.__importStar(require("react"));
+var ControlStrings_1 = tslib_1.__importDefault(require("ControlStrings"));
+var jotai_1 = require("jotai");
+var Button_1 = require("@fluentui/react/lib/Button");
+var Checkbox_1 = require("@fluentui/react/lib/Checkbox");
+var CommandBar_1 = require("@fluentui/react/lib/CommandBar");
+var Stack_1 = require("@fluentui/react/lib/Stack");
+var atoms_1 = require("../../jotai/atoms");
+var UploadButton_1 = require("../UploadButton/UploadButton");
+var useFileCommandBarStyles_1 = require("./useFileCommandBarStyles");
+var FileCommandBar = function (props) {
+    var _a = (0, useFileCommandBarStyles_1.useFileCommandBarStyles)(), stackContainerStyles = _a.stackContainerStyles, commandBarStyles = _a.commandBarStyles, controlStyles = _a.controlStyles, commandbarButtonStyles = _a.commandbarButtonStyles, checkBoxStyles = _a.checkBoxStyles, buttonIconStyles = _a.buttonIconStyles;
+    var _b = (0, jotai_1.useAtom)(atoms_1.globalState), appGlobalState = _b[0], setGlobalState = _b[1];
+    var selectedFiles = appGlobalState.selectedFiles, files = appGlobalState.files;
+    var _c = React.useState([]), commandbarItems = _c[0], setCOmmandBarItems = _c[1];
+    var _d = React.useState(false), isAllSelected = _d[0], setIsAllSelected = _d[1];
+    var onUpload = props.onUpload, onDelete = props.onDelete, onSelectedAll = props.onSelectedAll;
+    var commandDeleteButton = React.useCallback(function (props) {
+        return (React.createElement(Button_1.ActionButton, { iconProps: { iconName: "Delete", styles: buttonIconStyles }, styles: commandbarButtonStyles, onClick: function () {
+                setIsAllSelected(false);
+                onDelete();
+            }, text: ControlStrings_1.default.UpLoadFilesDeleteButtonLabel }));
+    }, [selectedFiles, commandbarButtonStyles]);
+    React.useEffect(function () {
+        if (isAllSelected) {
+            setGlobalState(function (prevState) {
+                return tslib_1.__assign(tslib_1.__assign({}, prevState), { selectedFiles: files });
+            });
+        }
+        else {
+            setGlobalState(function (prevState) {
+                return tslib_1.__assign(tslib_1.__assign({}, prevState), { selectedFiles: [] });
+            });
+        }
+    }, [isAllSelected, files]);
+    var commanbarSelectAllButton = React.useCallback(function (props) {
+        var selectedAll = files.length > 0 && files.length === selectedFiles.length;
+        return (React.createElement(Stack_1.Stack, { horizontal: true, verticalAlign: "center", horizontalAlign: "start", tokens: { childrenGap: 15 } },
+            files.length > 0 ? (React.createElement(Checkbox_1.Checkbox, { styles: checkBoxStyles, label: ControlStrings_1.default.UpLoadFilesSelectAllLabel, checked: selectedAll, onChange: function (ev, checked) {
+                    setIsAllSelected(checked);
+                    onSelectedAll(checked);
+                } })) : null,
+            selectedFiles.length ? React.createElement("div", { className: controlStyles.separatorVertrical }) : null));
+    }, [files.length, selectedFiles.length, checkBoxStyles, controlStyles.separatorVertrical, onSelectedAll]);
+    React.useEffect(function () {
+        var items = [];
+        items.push({
+            key: "selectedFiles",
+            commandBarButtonAs: commanbarSelectAllButton,
+        });
+        items.push({
+            key: "delete",
+            commandBarButtonAs: commandDeleteButton,
+        });
+        setCOmmandBarItems(items);
+    }, [commanbarSelectAllButton, commandDeleteButton]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Stack_1.Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", styles: stackContainerStyles },
+            React.createElement(CommandBar_1.CommandBar, { items: commandbarItems, styles: commandBarStyles }),
+            React.createElement(UploadButton_1.UploadButton, { text: ControlStrings_1.default.UploadFilesButtonLabel, onUpload: onUpload, iconName: "Add" })),
+        React.createElement("div", { className: controlStyles.separator })));
+};
+exports.FileCommandBar = FileCommandBar;
+//# sourceMappingURL=FileCommandBar.js.map

package/lib-commonjs/controls/uploadFiles/components/FileCommandBar/FileCommandBar.js.map

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

package/lib-commonjs/controls/uploadFiles/components/FileCommandBar/IFileCommandBarProps.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=IFileCommandBarProps.js.map

package/lib-commonjs/controls/uploadFiles/components/FileCommandBar/IFileCommandBarProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IFileCommandBarProps.js","sourceRoot":"","sources":["../../../../../src/controls/uploadFiles/components/FileCommandBar/IFileCommandBarProps.ts"],"names":[],"mappings":""}

package/lib-commonjs/controls/uploadFiles/components/FileCommandBar/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./FileCommandBar"), exports);
+tslib_1.__exportStar(require("./IFileCommandBarProps"), exports);
+tslib_1.__exportStar(require("./useFileCommandBarStyles"), exports);
+//# sourceMappingURL=index.js.map

package/lib-commonjs/controls/uploadFiles/components/FileCommandBar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/controls/uploadFiles/components/FileCommandBar/index.ts"],"names":[],"mappings":";;;AAAA,2DAAiC;AACjC,iEAAuC;AACvC,oEAA0C"}

package/lib-commonjs/controls/uploadFiles/components/FileCommandBar/useFileCommandBarStyles.js

@@ -0,0 +1,140 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFileCommandBarStyles = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var jotai_1 = require("jotai");
+var Styling_1 = require("@fluentui/react/lib/Styling");
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+var atoms_1 = require("../../jotai/atoms");
+var useFileCommandBarStyles = function () {
+    var appGlobalState = (0, jotai_1.useAtom)(atoms_1.globalState)[0];
+    var themeVariant = appGlobalState.themeVariant, selectedFiles = appGlobalState.selectedFiles;
+    var checkBoxStyles = React.useCallback(function (props) {
+        var _a, _b, _c, _d;
+        return {
+            checkbox: {
+                borderRadius: "50%",
+                borderWidth: 1,
+                borderStyle: "solid",
+                borderColor: "".concat((_a = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _a === void 0 ? void 0 : _a.themePrimary, " !important"),
+                color: "".concat(themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors.bodyText, " !important"),
+                backgroundColor: !props.checked ? themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette.white : themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette.themeLighter,
+            },
+            root: {
+                alignItems: "center",
+                borderColor: "".concat((_b = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _b === void 0 ? void 0 : _b.themePrimary, " !important"),
+                color: "".concat(themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors.bodyText, " !important"),
+                ":hover": {
+                    ".ms-Checkbox-checkbox": {
+                        backgroundColor: "".concat(themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette.themeLight, " !important"),
+                    },
+                },
+            },
+            checkmark: {
+                color: "".concat((_c = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors) === null || _c === void 0 ? void 0 : _c.bodyText, " !important"),
+            },
+            text: {
+                color: "".concat(themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors.bodyText, " !important"),
+                ":hover": {
+                    color: "".concat(themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors.bodyText, " !important"),
+                },
+            },
+            label: {
+                color: "".concat(themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors.bodyText, " !important"),
+                ":hover": {
+                    borderColor: "".concat((_d = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _d === void 0 ? void 0 : _d.themePrimary, " !important"),
+                    color: "".concat(themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors.bodyText, " !important"),
+                },
+            },
+        };
+    }, [themeVariant]);
+    var buttonIconStyles = React.useMemo(function () {
+        return {
+            root: {
+                color: "".concat(themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors.bodyText, " !important"),
+            },
+        };
+    }, [themeVariant]);
+    var controlStyles = React.useMemo(function () {
+        var _a, _b;
+        return (0, Styling_1.mergeStyleSets)({
+            fileIconHeaderIcon: {
+                padding: 0,
+                fontSize: "16px",
+            },
+            fileIconCell: (0, Styling_1.mergeStyles)({
+                textAlign: "center",
+                selectors: {
+                    "&:before": {
+                        content: ".",
+                        display: "inline-block",
+                        verticalAlign: "middle",
+                        height: "100%",
+                        width: "0px",
+                        visibility: "hidden",
+                    },
+                },
+            }),
+            fileIconImg: (0, Styling_1.mergeStyles)({
+                verticalAlign: "middle",
+                maxHeight: "16px",
+                maxWidth: "16px",
+            }),
+            separator: (0, Styling_1.mergeStyles)({
+                margin: 20,
+                height: "1px",
+                backgroundColor: (_a = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _a === void 0 ? void 0 : _a.neutralLight,
+                opacity: (themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.isInverted) ? "0.2" : "1",
+            }),
+            separatorVertrical: (0, Styling_1.mergeStyles)({
+                height: 25,
+                width: "1px",
+                borderLeftStyle: "solid",
+                borderLeftWidth: "1px",
+                borderLeftColor: (_b = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _b === void 0 ? void 0 : _b.themePrimary,
+            }),
+        });
+    }, [themeVariant]);
+    var commandBarStyles = React.useMemo(function () {
+        return {
+            root: {
+                paddingLeft: 0,
+                backgroundColor: themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors.bodyBackground,
+            },
+        };
+    }, [themeVariant]);
+    var commandbarButtonStyles = React.useMemo(function () {
+        return {
+            rootHovered: {
+                color: "".concat(themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors.bodyText, " !important"),
+            },
+            labelHovered: {
+                color: "".concat(themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors.bodyText, " !important"),
+            },
+            root: {
+                paddingLeft: 15,
+                display: selectedFiles.length ? "block" : "none",
+                color: themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors.bodyText,
+            },
+        };
+    }, [selectedFiles]);
+    var stackContainerStyles = React.useMemo(function () {
+        return {
+            root: {
+                width: "100%",
+                padding: "0 20px",
+            },
+        };
+    }, [themeVariant]);
+    return {
+        buttonIconStyles: buttonIconStyles,
+        checkBoxStyles: checkBoxStyles,
+        stackContainerStyles: stackContainerStyles,
+        controlStyles: controlStyles,
+        commandBarStyles: commandBarStyles,
+        commandbarButtonStyles: commandbarButtonStyles,
+    };
+};
+exports.useFileCommandBarStyles = useFileCommandBarStyles;
+//# sourceMappingURL=useFileCommandBarStyles.js.map

package/lib-commonjs/controls/uploadFiles/components/FileCommandBar/useFileCommandBarStyles.js.map

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

package/lib-commonjs/controls/uploadFiles/components/NoDocuments/NoDocuments.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NoDocuments = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var ControlStrings_1 = tslib_1.__importDefault(require("ControlStrings"));
+var Icon_1 = require("@fluentui/react/lib/Icon");
+var Stack_1 = require("@fluentui/react/lib/Stack");
+var Text_1 = require("@fluentui/react/lib/Text");
+var useNoDocumentsStyles_1 = require("./useNoDocumentsStyles");
+var NoDocuments = function (props) {
+    var _a = (0, useNoDocumentsStyles_1.useNoDocumentsStyles)(), stackContainerStyles = _a.stackContainerStyles, controlStyles = _a.controlStyles;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Stack_1.Stack, { styles: stackContainerStyles, verticalAlign: "center", horizontal: true, horizontalAlign: "center", tokens: { padding: 20, childrenGap: 10 } },
+            React.createElement(Icon_1.FontIcon, { iconName: "BulkUpload", className: controlStyles.iconStyles }),
+            React.createElement(Text_1.Text, { variant: "mediumPlus" },
+                ControlStrings_1.default.UpLoadFilesDragDropLabel,
+                " "))));
+};
+exports.NoDocuments = NoDocuments;
+//# sourceMappingURL=NoDocuments.js.map

package/lib-commonjs/controls/uploadFiles/components/NoDocuments/NoDocuments.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoDocuments.js","sourceRoot":"","sources":["../../../../../src/controls/uploadFiles/components/NoDocuments/NoDocuments.tsx"],"names":[],"mappings":";;;;AAAA,mDAA+B;AAE/B,0EAAqC;AACrC,iDAAoD;AACpD,mDAAkD;AAClD,iDAAgD;AAEhD,+DAA8D;AAIvD,IAAM,WAAW,GAA+C,UACrE,KAAiD;IAE3C,IAAA,KAAyC,IAAA,2CAAoB,GAAE,EAA7D,oBAAoB,0BAAA,EAAC,aAAa,mBAA2B,CAAC;IACtE,OAAO,CACL;QACE,oBAAC,aAAK,IACJ,MAAM,EAAE,oBAAoB,EAC5B,aAAa,EAAC,QAAQ,EACtB,UAAU,QACV,eAAe,EAAC,QAAQ,EACxB,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE;YAExC,oBAAC,eAAQ,IAAC,QAAQ,EAAC,YAAY,EAAC,SAAS,EAAE,aAAa,CAAC,UAAU,GAAG;YACtE,oBAAC,WAAI,IAAC,OAAO,EAAC,YAAY;gBAAE,wBAAO,CAAC,wBAAwB;oBAAS,CAC/D,CACP,CACJ,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,WAAW,eAkBtB"}

package/lib-commonjs/controls/uploadFiles/components/NoDocuments/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./NoDocuments"), exports);
+tslib_1.__exportStar(require("./useNoDocumentsStyles"), exports);
+//# sourceMappingURL=index.js.map

package/lib-commonjs/controls/uploadFiles/components/NoDocuments/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/controls/uploadFiles/components/NoDocuments/index.ts"],"names":[],"mappings":";;;AAAA,wDAA8B;AAC9B,iEAAuC"}

package/lib-commonjs/controls/uploadFiles/components/NoDocuments/useNoDocumentsStyles.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNoDocumentsStyles = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var jotai_1 = require("jotai");
+var Styling_1 = require("@fluentui/react/lib/Styling");
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+var atoms_1 = require("../../jotai/atoms");
+var useNoDocumentsStyles = function () {
+    var appGlobalState = (0, jotai_1.useAtom)(atoms_1.globalState)[0];
+    var themeVariant = appGlobalState.themeVariant;
+    var controlStyles = React.useMemo(function () {
+        var _a;
+        return (0, Styling_1.mergeStyleSets)({
+            iconStyles: (0, Styling_1.mergeStyles)({
+                fontSize: 34,
+                color: (_a = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _a === void 0 ? void 0 : _a.themePrimary,
+            }),
+        });
+    }, [themeVariant]);
+    var stackContainerStyles = React.useMemo(function () {
+        var _a, _b;
+        return {
+            root: {
+                width: "100%",
+                height: 450,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: (_a = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _a === void 0 ? void 0 : _a.neutralLighterAlt,
+                borderWidth: 1,
+                borderStyle: "dashed",
+                borderColor: (_b = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _b === void 0 ? void 0 : _b.neutralTertiaryAlt,
+            },
+        };
+    }, [themeVariant,]);
+    return { stackContainerStyles: stackContainerStyles, controlStyles: controlStyles };
+};
+exports.useNoDocumentsStyles = useNoDocumentsStyles;
+//# sourceMappingURL=useNoDocumentsStyles.js.map

package/lib-commonjs/controls/uploadFiles/components/NoDocuments/useNoDocumentsStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNoDocumentsStyles.js","sourceRoot":"","sources":["../../../../../src/controls/uploadFiles/components/NoDocuments/useNoDocumentsStyles.ts"],"names":[],"mappings":";;;;AAAA,mDAA+B;AAE/B,+BAAgC;AAGhC,uDAGqC;AAErC,qEAAqE;AACrE,2CAAgD;AAEzC,IAAM,oBAAoB,GAAG;IAC3B,IAAA,cAAc,GAAI,IAAA,eAAO,EAAC,mBAAW,CAAC,GAAxB,CAAyB;IACtC,IAAA,YAAY,GAAM,cAAc,aAApB,CAAqB;IAGzC,IAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CACjC;;QACE,OAAA,IAAA,wBAAc,EAAC;YACb,UAAU,EAAE,IAAA,qBAAW,EAAC;gBACtB,QAAQ,EAAE,EAAE;gBACZ,KAAK,EAAE,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,0CAAE,YAAY;aAC3C,CAAgB;SAClB,CAAC,CAAA;KAAA,EACJ,CAAC,YAAY,CAAC,CACf,CAAC;IAEF,IAAM,oBAAoB,GAAiB,KAAK,CAAC,OAAO,CAAC;;QACvD,OAAO;YACL,IAAI,EAAE;gBACJ,KAAK,EAAE,MAAM;gBACb,MAAM,EAAG,GAAG;gBACZ,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,cAAc,EAAE,QAAQ;gBACxB,eAAe,EAAE,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,0CAAE,iBAAiB;gBACzD,WAAW,EAAE,CAAC;gBACd,WAAW,EAAE,QAAQ;gBACrB,WAAW,EAAE,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,0CAAE,kBAAkB;aACvD;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAI,CAAC,CAAC;IAEtB,OAAO,EAAE,oBAAoB,sBAAA,EAAE,aAAa,eAAA,EAAE,CAAC;AACjD,CAAC,CAAC;AAjCW,QAAA,oBAAoB,wBAiC/B"}

package/lib-commonjs/controls/uploadFiles/components/UploadButton/UploadButton.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UploadButton = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var Button_1 = require("@fluentui/react/lib/Button");
+var UploadButton = function (props) {
+    var onUpload = props.onUpload, text = props.text, styles = props.styles, iconName = props.iconName;
+    var onClick = React.useCallback(function (ev) {
+        var input = document.createElement("input");
+        input.type = "file";
+        input.onchange = function (e) {
+            var file = e.target.files[0];
+            onUpload(file);
+        };
+        input.click();
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button_1.PrimaryButton, { styles: styles !== null && styles !== void 0 ? styles : undefined, iconProps: { iconName: iconName !== null && iconName !== void 0 ? iconName : "upload" }, onClick: onClick }, text)));
+};
+exports.UploadButton = UploadButton;
+//# sourceMappingURL=UploadButton.js.map

package/lib-commonjs/controls/uploadFiles/components/UploadButton/UploadButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadButton.js","sourceRoot":"","sources":["../../../../../src/controls/uploadFiles/components/UploadButton/UploadButton.tsx"],"names":[],"mappings":";;;;AAAA,mDAA+B;AAE/B,qDAGoC;AAS7B,IAAM,YAAY,GAAgD,UACvE,KAAkD;IAE1C,IAAA,QAAQ,GAA6B,KAAK,SAAlC,EAAE,IAAI,GAAuB,KAAK,KAA5B,EAAE,MAAM,GAAe,KAAK,OAApB,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAW;IACnD,IAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC,UAAC,EAAmD;QACpF,IAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC9C,KAAK,CAAC,IAAI,GAAG,MAAM,CAAC;QACpB,KAAK,CAAC,QAAQ,GAAG,UAAC,CAAC;YACjB,IAAM,IAAI,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACrD,QAAQ,CAAC,IAAI,CAAC,CAAC;QACjB,CAAC,CAAC;QACF,KAAK,CAAC,KAAK,EAAE,CAAC;IAChB,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,CACL;QACE,oBAAC,sBAAa,IAAC,MAAM,EAAE,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,SAAS,EAAE,SAAS,EAAE,EAAE,QAAQ,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,QAAQ,EAAE,EAAE,OAAO,EAAE,OAAO,IACxG,IAAI,CACS,CACf,CACJ,CAAC;AACJ,CAAC,CAAC;AApBW,QAAA,YAAY,gBAoBvB"}

package/lib-commonjs/controls/uploadFiles/components/UploadButton/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./UploadButton"), exports);
+//# sourceMappingURL=index.js.map

package/lib-commonjs/controls/uploadFiles/components/UploadButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/controls/uploadFiles/components/UploadButton/index.ts"],"names":[],"mappings":";;;AAAA,yDAA+B"}

package/lib-commonjs/controls/uploadFiles/components/UploadFiles/IUploadFilesProps.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=IUploadFilesProps.js.map

package/lib-commonjs/controls/uploadFiles/components/UploadFiles/IUploadFilesProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IUploadFilesProps.js","sourceRoot":"","sources":["../../../../../src/controls/uploadFiles/components/UploadFiles/IUploadFilesProps.ts"],"names":[],"mappings":""}