Update branch

frontend/taipy-gui/base/src/app.ts

@@ -243,7 +243,7 @@ export class TaipyApp {
     }
 
     upload(encodedName: string, files: FileList, progressCallback: (val: number) => void) {
-        return uploadFile(encodedName, files, progressCallback, this.clientId);
+        return uploadFile(encodedName, undefined, undefined, undefined, files, progressCallback, this.clientId);
     }
 
     getPageMetadata() {

frontend/taipy-gui/package.json

@@ -5,8 +5,8 @@
   "dependencies": {
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
-    "@mui/icons-material": "^5.0.5",
-    "@mui/material": "^5.0.6",
+    "@mui/icons-material": "^6.0.1",
+    "@mui/material": "^6.0.1",
     "@mui/x-date-pickers": "^7.0.0",
     "@mui/x-tree-view": "^7.0.0",
     "apache-arrow": "^14.0.2",

frontend/taipy-gui/packaging/taipy-gui.d.ts

@@ -148,6 +148,23 @@ export interface TableSortProps {
 
 export declare const TableSort: (props: TableSortProps) => JSX.Element;
 
+export interface FileSelectorProps extends TaipyActiveProps {
+    onAction?: string;
+    defaultLabel?: string;
+    label?: string;
+    multiple?: boolean;
+    extensions?: string;
+    dropMessage?: string;
+    notify?: boolean;
+    width?: string | number;
+    icon?: React.ReactNode;
+    withBorder?: boolean;
+    onUploadAction?: string;
+    uploadData?: string;
+}
+
+export declare const FileSelector: (props: FileSelectorProps) => JSX.Element;
+
 export declare const Router: () => JSX.Element;
 
 /**

frontend/taipy-gui/src/components/Taipy/Expandable.spec.tsx

@@ -33,7 +33,7 @@ describe("Expandable Component", () => {
             </Expandable>
         );
         const elt = getByText("foo");
-        expect(elt.parentElement?.parentElement).toHaveClass("taipy-expandable");
+        expect(elt.parentElement?.parentElement?.parentElement).toHaveClass("taipy-expandable");
     });
     it("displays the default value", async () => {
         const { getByText } = render(

frontend/taipy-gui/src/components/Taipy/FileSelector.tsx

@@ -11,7 +11,17 @@
  * specific language governing permissions and limitations under the License.
  */
 
-import React, { ChangeEvent, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, {
+    ChangeEvent,
+    CSSProperties,
+    ReactNode,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from "react";
 import Button from "@mui/material/Button";
 import LinearProgress from "@mui/material/LinearProgress";
 import Tooltip from "@mui/material/Tooltip";
@@ -20,8 +30,9 @@ import UploadFile from "@mui/icons-material/UploadFile";
 import { TaipyContext } from "../../context/taipyContext";
 import { createAlertAction, createSendActionNameAction } from "../../context/taipyReducers";
 import { useClassNames, useDynamicProperty, useModule } from "../../utils/hooks";
-import { getCssSize, noDisplayStyle, TaipyActiveProps } from "./utils";
+import { expandSx, getCssSize, noDisplayStyle, TaipyActiveProps } from "./utils";
 import { uploadFile } from "../../workers/fileupload";
+import { SxProps } from "@mui/material";
 
 interface FileSelectorProps extends TaipyActiveProps {
     onAction?: string;
@@ -32,6 +43,10 @@ interface FileSelectorProps extends TaipyActiveProps {
     dropMessage?: string;
     notify?: boolean;
     width?: string | number;
+    icon?: ReactNode;
+    withBorder?: boolean;
+    onUploadAction?: string;
+    uploadData?: string;
 }
 
 const handleDragOver = (evt: DragEvent) => {
@@ -53,9 +68,10 @@ const FileSelector = (props: FileSelectorProps) => {
         dropMessage = "Drop here to Upload",
         label,
         notify = true,
+        withBorder = true,
     } = props;
     const [dropLabel, setDropLabel] = useState("");
-    const [dropSx, setDropSx] = useState(defaultSx);
+    const [dropSx, setDropSx] = useState<SxProps>(defaultSx);
     const [upload, setUpload] = useState(false);
     const [progress, setProgress] = useState(0);
     const { state, dispatch } = useContext(TaipyContext);
@@ -67,15 +83,33 @@ const FileSelector = (props: FileSelectorProps) => {
     const active = useDynamicProperty(props.active, props.defaultActive, true);
     const hover = useDynamicProperty(props.hoverText, props.defaultHoverText, undefined);
 
-    useEffect(() => setDropSx((sx) => (props.width ? { ...sx, width: getCssSize(props.width) } : sx)), [props.width]);
+    useEffect(
+        () =>
+            setDropSx((sx: SxProps) =>
+                expandSx(
+                    sx,
+                    props.width ? { width: getCssSize(props.width) } : undefined,
+                    withBorder ? undefined : { border: "none" }
+                )
+            ),
+        [props.width, withBorder]
+    );
 
     const handleFiles = useCallback(
         (files: FileList | undefined | null, evt: Event | ChangeEvent) => {
             evt.stopPropagation();
             evt.preventDefault();
             if (files?.length) {
                 setUpload(true);
-                uploadFile(updateVarName, files, setProgress, state.id).then(
+                uploadFile(
+                    updateVarName,
+                    module,
+                    props.onUploadAction,
+                    props.uploadData,
+                    files,
+                    setProgress,
+                    state.id
+                ).then(
                     (value) => {
                         setUpload(false);
                         onAction && dispatch(createSendActionNameAction(id, module, onAction));
@@ -94,7 +128,7 @@ const FileSelector = (props: FileSelectorProps) => {
                 );
             }
         },
-        [state.id, id, onAction, notify, updateVarName, dispatch, module]
+        [state.id, id, onAction, props.onUploadAction, props.uploadData, notify, updateVarName, dispatch, module]
     );
 
     const handleChange = useCallback(
@@ -105,23 +139,27 @@ const FileSelector = (props: FileSelectorProps) => {
     const handleDrop = useCallback(
         (e: DragEvent) => {
             setDropLabel("");
-            setDropSx((sx) => ({ ...sx, ...defaultSx }));
+            setDropSx((sx: SxProps) => ({ ...sx, ...defaultSx }));
             handleFiles(e.dataTransfer?.files, e);
         },
         [handleFiles]
     );
 
     const handleDragLeave = useCallback(() => {
         setDropLabel("");
-        setDropSx((sx) => ({ ...sx, ...defaultSx }));
+        setDropSx((sx: SxProps) => ({ ...sx, ...defaultSx }));
     }, []);
 
     const handleDragOverWithLabel = useCallback(
         (evt: DragEvent) => {
-            console.log(evt);
             const target = evt.currentTarget as HTMLElement;
-            setDropSx((sx) =>
-                sx.minWidth === defaultSx.minWidth && target ? { ...sx, minWidth: target.clientWidth + "px" } : sx
+            setDropSx((sx: SxProps) =>
+                expandSx(
+                    sx,
+                    (sx as CSSProperties).minWidth === defaultSx.minWidth && target
+                        ? { minWidth: target.clientWidth + "px" }
+                        : undefined
+                )
             );
             setDropLabel(dropMessage);
             handleDragOver(evt);
@@ -164,12 +202,12 @@ const FileSelector = (props: FileSelectorProps) => {
                         id={id}
                         component="span"
                         aria-label="upload"
-                        variant="outlined"
+                        variant={withBorder ? "outlined" : undefined}
                         disabled={!active || upload}
                         sx={dropSx}
                         ref={butRef}
                     >
-                        <UploadFile /> {dropLabel || label || defaultLabel}
+                        {props.icon || <UploadFile />} {dropLabel || label || defaultLabel}
                     </Button>
                 </span>
             </Tooltip>

frontend/taipy-gui/src/components/Taipy/PaginatedTable.spec.tsx

@@ -727,7 +727,7 @@ describe("PaginatedTable Component", () => {
         const option = queryByRole("option", { selected: false, name: "50" });
         fireEvent.click(option as Element);
         const table = document.querySelector(
-            'table[aria-labelledby="tableTitle"].MuiTable-root.MuiTable-stickyHeader.css-cz602z-MuiTable-root'
+            'table[aria-labelledby="tableTitle"].MuiTable-root.MuiTable-stickyHeader'
         );
         expect(table).toBeInTheDocument();
     });

frontend/taipy-gui/src/components/Taipy/Part.spec.tsx

@@ -29,6 +29,16 @@ describe("Part Component", () => {
         const elt = getByText("bar");
         expect(elt).toHaveClass("taipy-part");
     })
+    it("displays with width=70%", async () => {
+        const { getByText } = render(<Part width="70%">bar</Part>);
+        const elt = getByText("bar");
+        expect(elt).toHaveStyle('width: 70%');
+    });
+    it("displays with width=500", async () => {
+        const { getByText } = render(<Part width={500}>bar</Part>);
+        const elt = getByText("bar");
+        expect(elt).toHaveStyle('width: 500px');
+    });
     it("renders an iframe", async () => {
         const {getByText} = render(<Part className="taipy-part" page="http://taipy.io">bar</Part>);
         const elt = getByText("bar");

frontend/taipy-gui/src/components/Taipy/Part.tsx

@@ -16,7 +16,7 @@ import Box from "@mui/material/Box";
 
 import { useClassNames, useDynamicProperty } from "../../utils/hooks";
 import TaipyRendered from "../pages/TaipyRendered";
-import { TaipyBaseProps } from "./utils";
+import { expandSx, getCssSize, TaipyBaseProps } from "./utils";
 import { TaipyContext } from "../../context/taipyContext";
 
 interface PartProps extends TaipyBaseProps {
@@ -29,6 +29,7 @@ interface PartProps extends TaipyBaseProps {
     partial?: boolean;
     height?: string;
     defaultHeight?: string;
+    width?: string | number;
 }
 
 const IframeStyle = {
@@ -55,7 +56,7 @@ const Part = (props: PartProps) => {
         return false;
     }, [state.locations, page, defaultPartial]);
 
-    const boxSx = useMemo(() => (height ? { height: height } : undefined), [height]);
+    const boxSx = useMemo(() => expandSx({}, height ? { height: height } : undefined, props.width ? {width: getCssSize(props.width)}: undefined), [height, props.width]);
     return render ? (
         <Box id={id} className={className} sx={boxSx}>
             {iFrame ? (

frontend/taipy-gui/src/components/Taipy/utils.ts

@@ -12,6 +12,7 @@
  */
 
 import { MouseEvent } from "react";
+import { SxProps } from "@mui/material";
 
 export interface TaipyActiveProps extends TaipyDynamicProps, TaipyHoverProps {
     defaultActive?: boolean;
@@ -146,3 +147,12 @@ export const getProps = (p: DateProps, start: boolean, val: Date | null, withTim
     }
     return { ...p, [propName]: val };
 };
+
+export const expandSx = (sx: SxProps, ...partials: (SxProps | undefined)[]) => {
+    return partials.reduce((prevSx: SxProps, partialSx) => {
+        if (partialSx) {
+            return { ...prevSx, ...partialSx } as SxProps;
+        }
+        return prevSx;
+    }, sx);
+};

frontend/taipy-gui/src/extensions/exports.ts

@@ -13,6 +13,7 @@
 
 import Chart from "../components/Taipy/Chart";
 import Dialog from "../components/Taipy/Dialog";
+import FileSelector from "../components/Taipy/FileSelector";
 import Login from "../components/Taipy/Login";
 import Router from "../components/Router";
 import Table from "../components/Taipy/Table";
@@ -43,6 +44,7 @@ import {
 export {
     Chart,
     Dialog,
+    FileSelector,
     Login,
     Router,
     Table,

frontend/taipy-gui/src/workers/fileupload.ts

@@ -19,6 +19,9 @@ const UPLOAD_URL = "/taipy-uploads";
 
 export const uploadFile = (
     varName: string,
+    context: string | undefined,
+    onAction: string | undefined,
+    uploadData: string | undefined,
     files: FileList,
     progressCallback: (val: number) => void,
     id: string,
@@ -35,6 +38,6 @@ export const uploadFile = (
             }
         };
         worker.onerror = (evt: ErrorEvent) => reject(evt);
-        worker.postMessage({ files: files, uploadUrl: uploadUrl, varName: varName, id: id } as FileUploadData);
+        worker.postMessage({ files, uploadUrl, varName, context, onAction, uploadData, id } as FileUploadData);
     });
 };

frontend/taipy-gui/src/workers/fileupload.utils.ts

@@ -13,6 +13,9 @@
 
 export interface FileUploadData {
     varName: string;
+    context?: string;
+    onAction?: string;
+    uploadData?: string;
     files: FileList;
     uploadUrl: string;
     id: string;

frontend/taipy-gui/src/workers/fileupload.worker.ts

@@ -17,6 +17,9 @@ const uploadFile = (
     blobOrFile: Blob,
     uploadUrl: string,
     varName: string,
+    context: string | undefined,
+    onAction: string | undefined,
+    uploadData: string | undefined,
     part: number,
     total: number,
     fileName: string,
@@ -33,6 +36,9 @@ const uploadFile = (
     fdata.append("part", part.toString());
     fdata.append("total", total.toString());
     fdata.append("var_name", varName);
+    context && fdata.append("context", context);
+    onAction && fdata.append("on_action", onAction);
+    uploadData && fdata.append("upload_data", uploadData);
     fdata.append("multiple", multiple ? "True" : "False");
     xhr.send(fdata);
 };
@@ -46,7 +52,15 @@ const getProgressCallback = (globalSize: number, offset: number) => (uploaded: n
         done: false,
     } as FileUploadReturn);
 
-const process = (files: FileList, uploadUrl: string, varName: string, id: string) => {
+const process = (
+    files: FileList,
+    uploadUrl: string,
+    varName: string,
+    context: string | undefined,
+    onAction: string | undefined,
+    uploadData: string | undefined,
+    id: string
+) => {
     if (files) {
         let globalSize = 0;
         for (let i = 0; i < files.length; i++) {
@@ -70,6 +84,9 @@ const process = (files: FileList, uploadUrl: string, varName: string, id: string
                     chunk,
                     uploadUrl,
                     varName,
+                    context,
+                    onAction,
+                    uploadData,
                     Math.floor(start / BYTES_PER_CHUNK),
                     tot,
                     blob.name,
@@ -94,5 +111,5 @@ const process = (files: FileList, uploadUrl: string, varName: string, id: string
 };
 
 self.onmessage = (e: MessageEvent<FileUploadData>) => {
-    process(e.data.files, e.data.uploadUrl, e.data.varName, e.data.id);
+    process(e.data.files, e.data.uploadUrl, e.data.varName, e.data.context, e.data.onAction, e.data.uploadData, e.data.id);
 };