@vidispine/vdt-mui 23.4.0-pre.3 → 23.4.0

package/dist/es/item/ItemList/ItemList.js

@@ -17,8 +17,8 @@ const q = () => /* @__PURE__ */ m(w, { children: "No items found..." }), A = D(C
 }, d = ({
   itemListType: t,
   header: l,
-  primary: u,
-  secondary: p,
+  primary: p,
+  secondary: u,
   avatarVariant: c,
   dense: f,
   amountLoading: h,
@@ -27,29 +27,29 @@ const q = () => /* @__PURE__ */ m(w, { children: "No items found..." }), A = D(C
   onListItemDelete: L,
   emptySlot: y,
   components: S,
-  componentsProps: i
+  componentsProps: r
 }) => {
   const {
     Root: v,
-    ListSubheader: M,
-    ListItem: g
-  } = S, k = [...Array(Math.max(h, 0)).keys()].map(() => ({
+    ListSubheader: g,
+    ListItem: k
+  } = S, M = [...Array(Math.max(h, 0)).keys()].map(() => ({
     key: n()
   })), s = x(() => {
     var o;
-    return ((o = t == null ? void 0 : t.item) == null ? void 0 : o.map((r) => ({
+    return ((o = t == null ? void 0 : t.item) == null ? void 0 : o.map((i) => ({
       key: n(),
-      itemType: r
+      itemType: i
     }))) || [];
   }, [t.item]);
-  return /* @__PURE__ */ a(v, { dense: f, ...i.root, children: [
-    /* @__PURE__ */ m(M, { ...i.listSubheader, children: l }),
+  return /* @__PURE__ */ a(v, { dense: f, ...r.root, children: [
+    /* @__PURE__ */ m(g, { ...r.listSubheader, children: l }),
     /* @__PURE__ */ a(b, { children: [
       !e && s.length === 0 && V(y),
-      (e ? k : s).map(({
+      (e ? M : s).map(({
         key: o,
-        itemType: r
-      }) => /* @__PURE__ */ m(g, { itemType: r, primary: u, secondary: p, avatarVariant: c, isLoading: e, onClick: I, onDelete: L, ...i.listItem }, o))
+        itemType: i
+      }) => /* @__PURE__ */ m(k, { itemType: i, primary: p, secondary: u, avatarVariant: c, isLoading: e, onClick: I, onDelete: L, ...r.listItem }, o))
     ] })
   ] });
 };

package/dist/es/metadata/MetadataGroupTreeView/MetadataGroupTreeView.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import type { MetadataGroupValueType } from '@vidispine/types';
-import { WithOverrideProps } from '../../_types';
+import type { WithOverrideProps, StyledComponent } from '../../_types';
 declare const defaultComponents: {
     Root: any;
-    GroupTreeItem: any;
-    FieldTreeItem: any;
+    GroupTreeItem: StyledComponent<any>;
+    FieldTreeItem: StyledComponent<any>;
 };
 export interface MetadataGroupTreeViewProps extends WithOverrideProps<typeof defaultComponents> {
     /**

package/dist/es/metadata/MetadataGroupTreeView/MetadataGroupTreeView.js

@@ -1,11 +1,10 @@
-import { jsx as t, jsxs as a, Fragment as M } from "react/jsx-runtime";
-import x from "@mui/icons-material/esm/ChevronRight";
-import b from "@mui/icons-material/esm/ExpandMore";
-import g from "@mui/lab/TreeItem";
-import C from "@mui/lab/TreeView";
-import { styled as i } from "@mui/material/styles";
+import { jsx as t, jsxs as a, Fragment as x } from "react/jsx-runtime";
+import b from "@mui/icons-material/esm/ChevronRight";
+import g from "@mui/icons-material/esm/ExpandMore";
+import { styled as o } from "@mui/material/styles";
+import { TreeItem as M, TreeView as C } from "@mui/x-tree-view";
 import { parseFieldList as F } from "@vidispine/vdt-js";
-const m = i(g)(() => ({
+const m = o(M)(() => ({
   userSelect: "all",
   "&:focus, &:hover, &.Mui-selected": {
     "& > .MuiTreeItem-content, .MuiTreeItem-label": {
@@ -20,10 +19,10 @@ const m = i(g)(() => ({
   Root: C,
   GroupTreeItem: m,
   FieldTreeItem: m
-}, s = i("span")(() => ({
+}, s = o("span")(() => ({
   fontWeight: 600,
   fontSize: ".75rem"
-})), S = i("span")(() => ({
+})), S = o("span")(() => ({
   fontSize: ".75rem"
 })), c = ({
   group: n,
@@ -31,33 +30,33 @@ const m = i(g)(() => ({
   componentsProps: r
 }) => {
   const {
-    Root: p,
-    GroupTreeItem: I,
+    Root: I,
+    GroupTreeItem: p,
     FieldTreeItem: h
-  } = f, T = (e = {}) => /* @__PURE__ */ t(h, { nodeId: e.uuid, label: /* @__PURE__ */ a(M, { children: [
+  } = f, T = (e = {}) => /* @__PURE__ */ t(h, { nodeId: e.uuid, label: /* @__PURE__ */ a(x, { children: [
     /* @__PURE__ */ t(s, { children: `${e.name}: ` }),
     /* @__PURE__ */ t(S, { children: e.value.join(", ") })
-  ] }), ...r.fieldTreeItem }, e.uuid), l = (e = {}) => {
-    var d, u;
-    return /* @__PURE__ */ a(I, { nodeId: e.uuid, label: /* @__PURE__ */ t(s, { children: e.name }), ...r.groupTreeItem, children: [
-      ((d = e.field) == null ? void 0 : d.length) > 0 ? F(e.field, {
+  ] }), ...r.fieldTreeItem }, e.uuid), d = (e = {}) => {
+    var i, u;
+    return /* @__PURE__ */ a(p, { nodeId: e.uuid, label: /* @__PURE__ */ t(s, { children: e.name }), ...r.groupTreeItem, children: [
+      ((i = e.field) == null ? void 0 : i.length) > 0 ? F(e.field, {
         includeFieldAttributes: !0,
         fieldAsList: !0,
         arrayOnSingleValue: !0
-      }).map((o) => T(o)) : null,
-      ((u = e.group) == null ? void 0 : u.length) > 0 ? e.group.map((o) => l(o)) : null
+      }).map((l) => T(l)) : null,
+      ((u = e.group) == null ? void 0 : u.length) > 0 ? e.group.map((l) => d(l)) : null
     ] }, e.uuid);
   };
-  return /* @__PURE__ */ t(p, { defaultCollapseIcon: /* @__PURE__ */ t(b, {}), defaultExpanded: [n == null ? void 0 : n.uuid], defaultExpandIcon: /* @__PURE__ */ t(x, {}), sx: {
+  return /* @__PURE__ */ t(I, { defaultCollapseIcon: /* @__PURE__ */ t(g, {}), defaultExpanded: [n == null ? void 0 : n.uuid], defaultExpandIcon: /* @__PURE__ */ t(b, {}), sx: {
     maxWidth: 400
-  }, ...r.root, children: l(n) });
+  }, ...r.root, children: d(n) });
 };
 c.defaultProps = {
   group: void 0,
   components: v,
   componentsProps: void 0
 };
-const k = c;
+const R = c;
 export {
-  k as default
+  R as default
 };

package/dist/es/upload/UploadDropzone/UploadDropzone.d.ts

@@ -0,0 +1,59 @@
+/// <reference types="react" />
+import { Box as MuiBox, Typography as MuiTypography, LinearProgress as MuiLinearProgress } from '@mui/material';
+import type { StyledComponent, WithOverrideProps } from '../../_types';
+import type { FileRejection, DropEvent, DropzoneOptions } from 'react-dropzone';
+declare const StyledMuiBoxRoot: typeof MuiBox;
+type StyledMuiBoxType = StyledComponent<typeof MuiBox, {
+    isDragActive?: boolean;
+}>;
+declare const StyledMuiBox: StyledMuiBoxType;
+declare const StyledNativeInput: StyledComponent<typeof MuiBox<'input'>, React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>>;
+declare const StyledMuiLinearProgress: typeof MuiLinearProgress;
+declare const defaultComponents: {
+    Root: typeof StyledMuiBoxRoot;
+    Box: typeof StyledMuiBox;
+    Input: typeof StyledNativeInput;
+    Typography: typeof MuiTypography;
+    LinearProgress: typeof StyledMuiLinearProgress;
+};
+export interface UploadDropzoneProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * Text to show inside dropzone
+     */
+    text?: string;
+    /**
+     * Disable the upload
+     */
+    disabled?: boolean;
+    /**
+     * Options for react-dropzone
+     *
+     * See <a href="https://react-dropzone.js.org/#src" target="_blank">react-dropzone docs</a> for more info
+     */
+    dropzoneOptions?: DropzoneOptions;
+    /**
+     * Callback when entering dropzone
+     */
+    onDragEnter?: React.DragEventHandler;
+    /**
+     * Callback when leaving dropzone
+     */
+    onDragLeave?: React.DragEventHandler;
+    /**
+     * Callback when file dialog is opened
+     */
+    onFileDialogOpen?: () => void;
+    /**
+     * Callback when file dialog is cancelled without adding file
+     */
+    onFileDialogCancel?: () => void;
+    /**
+     * Callback when files are added, either by being dropped or selected in file dialog
+     */
+    onAdd?: (event: DropEvent, payload: {
+        files: File[];
+        rejectedFiles: FileRejection[];
+    }) => void;
+}
+declare const UploadDropzone: React.FC<UploadDropzoneProps>;
+export default UploadDropzone;

package/dist/es/upload/UploadDropzone/UploadDropzone.js

@@ -0,0 +1,111 @@
+import { jsx as i, jsxs as F } from "react/jsx-runtime";
+import { useState as R, useCallback as j } from "react";
+import { useDropzone as k } from "react-dropzone";
+import l from "@mui/material/Box";
+import z from "@mui/material/Typography";
+import O from "@mui/material/LinearProgress";
+import { styled as t } from "@mui/material/styles";
+const w = t(l)(({
+  theme: o
+}) => ({
+  height: "100%",
+  cursor: "pointer",
+  marginTop: o.spacing(1),
+  marginBottom: o.spacing(1),
+  transition: "min-height 0.3s"
+})), E = t(l, {
+  shouldForwardProp: (o) => o !== "isDragActive"
+})(({
+  theme: o,
+  isDragActive: e
+}) => ({
+  position: "relative",
+  height: "100%",
+  marginTop: o.spacing(0.5),
+  borderWidth: 2,
+  borderColor: o.palette.primary.main,
+  borderRadius: 3,
+  borderStyle: "dotted",
+  backgroundColor: e ? "rgba(0,0,0,0.2)" : "rgba(0,0,0,0.05)",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center"
+})), A = t("input")(() => ({})), N = t(z)(({
+  theme: o
+}) => ({
+  color: o.palette.primary.main,
+  marginTop: o.spacing(1),
+  marginBottom: o.spacing(1),
+  pointerEvents: "none"
+})), U = t(O)(() => ({
+  width: "calc(100% - 2px)",
+  position: "absolute",
+  bottom: 0
+})), W = {
+  Root: w,
+  Box: E,
+  Input: A,
+  Typography: N,
+  LinearProgress: U
+}, g = ({
+  text: o,
+  disabled: e,
+  dropzoneOptions: c,
+  onAdd: n,
+  onDragEnter: d,
+  onDragLeave: u,
+  onFileDialogOpen: s,
+  onFileDialogCancel: p,
+  components: m,
+  componentsProps: r
+}) => {
+  const {
+    Root: f,
+    Box: y,
+    Input: h,
+    Typography: D,
+    LinearProgress: x
+  } = m, [v, a] = R(!1), b = j((I, M, P) => {
+    a(!1), n && n(P, {
+      files: I,
+      rejectedFiles: M
+    });
+  }, [n]), C = () => {
+    a(!0), s && s();
+  }, B = () => {
+    a(!1), p && p();
+  }, {
+    getRootProps: L,
+    getInputProps: S,
+    isDragActive: T
+  } = k({
+    disabled: e,
+    onDrop: b,
+    onDragEnter: d,
+    onDragLeave: u,
+    onFileDialogOpen: C,
+    onFileDialogCancel: B,
+    ...c
+  });
+  return /* @__PURE__ */ i(f, { ...r.root, children: /* @__PURE__ */ F(y, { ...r.box, isDragActive: T, ...L(), children: [
+    /* @__PURE__ */ i(h, { ...r.input, ...S() }),
+    /* @__PURE__ */ i(D, { ...r.typography, children: o }),
+    v && /* @__PURE__ */ i(x, { ...r.linearProgress })
+  ] }) });
+};
+g.defaultProps = {
+  text: "Drop files or click to open",
+  dropzoneOptions: {},
+  onAdd: void 0,
+  onDragEnter: void 0,
+  onDragLeave: void 0,
+  onFileDialogOpen: void 0,
+  onFileDialogCancel: void 0,
+  components: W,
+  componentsProps: void 0
+};
+const X = g;
+export {
+  X as default
+};

package/dist/es/upload/UploadDropzone/index.d.ts

@@ -0,0 +1,3 @@
+import Component from './UploadDropzone';
+declare const StyledComponent: typeof Component;
+export default StyledComponent;

package/dist/es/upload/UploadDropzone/index.js

@@ -0,0 +1,12 @@
+import { styled as r } from "@mui/material/styles";
+import m from "./UploadDropzone.js";
+import { withOverrides as s } from "../../_utils/withOverrides.js";
+const o = "UploadFileTree", e = `Vdt${o}`, p = s(e)(m), t = r(p, {
+  name: e,
+  overridesResolver: (d, n) => n.root
+})(() => ({}));
+t.displayName = o;
+const c = t;
+export {
+  c as default
+};

package/dist/es/upload/UploadFileTree/UploadFileTree.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { TreeView as MuiTreeView } from '@mui/x-tree-view';
+import { WithOverrideProps } from '../../_types';
+import VdtUploadFileTreeItem from '../UploadFileTreeItem';
+declare const defaultComponents: {
+    Root: typeof MuiTreeView;
+    TreeItem: typeof VdtUploadFileTreeItem;
+};
+export type FileTree = {
+    file: File;
+    path?: string;
+    progress?: {
+        totalBytes: number;
+        transferredBytes: number;
+    };
+    files?: Record<string, FileTree>;
+};
+export interface UploadFileTreeProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * A file tree to display
+     */
+    fileTree?: {
+        [fileName: string]: FileTree;
+    };
+    /**
+     * Callback when clicking on a file or folder in the tree
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>, payload: FileTree) => void;
+    /**
+     * Callback when clicking remove on a node in the tree
+     */
+    onRemove?: (event: React.MouseEvent<HTMLButtonElement>, payload: FileTree) => void;
+}
+declare const UploadFileTree: React.FC<UploadFileTreeProps>;
+export default UploadFileTree;

package/dist/es/upload/UploadFileTree/UploadFileTree.js

@@ -0,0 +1,30 @@
+import { jsx as t } from "react/jsx-runtime";
+import { TreeView as p } from "@mui/x-tree-view";
+import s from "../UploadFileTreeItem/index.js";
+const c = {
+  Root: p,
+  TreeItem: s
+}, r = ({
+  fileTree: e,
+  onClick: n,
+  onRemove: m,
+  components: i,
+  componentsProps: o
+}) => {
+  const {
+    Root: l,
+    TreeItem: d
+  } = i;
+  return e ? /* @__PURE__ */ t(l, { ...o.root, children: /* @__PURE__ */ t(d, { fileTree: e, onClick: n, onRemove: m, ...o.treeItem }) }) : null;
+};
+r.defaultProps = {
+  fileTree: {},
+  onClick: void 0,
+  onRemove: void 0,
+  components: c,
+  componentsProps: void 0
+};
+const T = r;
+export {
+  T as default
+};

package/dist/es/upload/UploadFileTree/index.d.ts

@@ -0,0 +1,3 @@
+import Component from './UploadFileTree';
+declare const StyledComponent: typeof Component;
+export default StyledComponent;

package/dist/es/upload/UploadFileTree/index.js

@@ -0,0 +1,12 @@
+import { styled as r } from "@mui/material/styles";
+import m from "./UploadFileTree.js";
+import { withOverrides as s } from "../../_utils/withOverrides.js";
+const o = "UploadFileTree", e = `Vdt${o}`, p = s(e)(m), t = r(p, {
+  name: e,
+  overridesResolver: (d, n) => n.root
+})(() => ({}));
+t.displayName = o;
+const c = t;
+export {
+  c as default
+};

package/dist/es/upload/UploadFileTreeItem/UploadFileTreeItem.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { TreeItem as MuiTreeItem } from '@mui/x-tree-view';
+import VdtUploadListItem from '../UploadListItem';
+import type { StyledComponent, WithOverrideProps } from '../../_types';
+declare const StyledMuiTreeItem: StyledComponent<typeof MuiTreeItem>;
+declare const defaultComponents: {
+    Root: typeof StyledMuiTreeItem;
+    Label: typeof VdtUploadListItem;
+};
+export type FileTree = {
+    file: File;
+    path?: string;
+    progress?: {
+        totalBytes: number;
+        transferredBytes: number;
+    };
+    files?: Record<string, FileTree>;
+};
+export interface UploadFileTreeItemProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * The file tree entity to show
+     */
+    fileTree?: Record<string, FileTree>;
+    /**
+     * Callback when clicking on a file or folder in the tree
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>, payload: FileTree) => void;
+    /**
+     * Callback when clicking remove on a node in the tree
+     */
+    onRemove?: (event: React.MouseEvent<HTMLButtonElement>, payload: FileTree) => void;
+}
+declare const UploadFileTreeItem: React.FC<UploadFileTreeItemProps>;
+export default UploadFileTreeItem;

package/dist/es/upload/UploadFileTreeItem/UploadFileTreeItem.js

@@ -0,0 +1,55 @@
+import { jsx as e, Fragment as b } from "react/jsx-runtime";
+import { styled as I } from "@mui/material/styles";
+import { TreeItem as T } from "@mui/x-tree-view";
+import g from "../UploadListItem/index.js";
+const v = I(T)(({
+  theme: o
+}) => ({
+  "& .MuiTreeItem-content": {
+    padding: 0,
+    "&.Mui-selected": {
+      backgroundColor: `${o.palette.primary.main}`,
+      // nested to get higher importance that default
+      "&.Mui-focused": {
+        backgroundColor: `${o.palette.primary.main}`
+      }
+    }
+  },
+  "& .MuiTreeItem-iconContainer": {
+    display: "none !important"
+  }
+})), y = {
+  Root: v,
+  Label: g
+}, d = ({
+  fileTree: o,
+  onClick: t,
+  onRemove: r,
+  components: m,
+  componentsProps: i
+}) => {
+  const {
+    Root: s,
+    Label: c
+  } = m;
+  return /* @__PURE__ */ e(b, { children: Object.entries(o).map(([, n]) => {
+    const {
+      file: u,
+      path: l,
+      progress: f,
+      files: p
+    } = n;
+    return /* @__PURE__ */ e(s, { nodeId: l, icon: /* @__PURE__ */ e("div", {}), label: /* @__PURE__ */ e(c, { file: u, progress: f, onRemove: r ? (a) => r(a, n) : void 0, onClick: t ? (a) => t(a, n) : void 0, ...i.label }, l), ...i.root, children: Object.keys(p ?? {}).length > 0 && /* @__PURE__ */ e(d, { fileTree: p, onClick: t, onRemove: r, components: m, componentsProps: i }) }, l);
+  }) });
+};
+d.defaultProps = {
+  fileTree: {},
+  onClick: void 0,
+  onRemove: void 0,
+  components: y,
+  componentsProps: void 0
+};
+const k = d;
+export {
+  k as default
+};

package/dist/es/upload/UploadFileTreeItem/index.d.ts

@@ -0,0 +1,3 @@
+import Component from './UploadFileTreeItem';
+declare const StyledComponent: typeof Component;
+export default StyledComponent;

package/dist/es/upload/UploadFileTreeItem/index.js

@@ -0,0 +1,12 @@
+import { styled as m } from "@mui/material/styles";
+import n from "./UploadFileTreeItem.js";
+import { withOverrides as s } from "../../_utils/withOverrides.js";
+const e = "UploadFileTreeItem", o = `Vdt${e}`, d = s(o)(n), t = m(d, {
+  name: o,
+  overridesResolver: (i, r) => r.root
+})({});
+t.displayName = e;
+const c = t;
+export {
+  c as default
+};

package/dist/es/upload/UploadListItem/UploadListItem.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { ListItem as MuiListItem } from '@mui/material';
+import { StyledComponent, WithOverrideProps } from '../../_types';
+import VdtUploadListItemSecondaryAction from './components/UploadListItemSecondaryAction';
+import VdtUploadListItemText from './components/UploadListItemText';
+import VdtUploadListItemThumbnail from './components/UploadListItemThumbnail';
+type StyledMuiListItemType = StyledComponent<typeof MuiListItem, {
+    isComplete?: boolean;
+}>;
+declare const StyledMuiListItem: StyledMuiListItemType;
+declare const StyledVdtUploadListItemText: typeof VdtUploadListItemText;
+declare const defaultComponents: {
+    Root: typeof StyledMuiListItem;
+    ListItemThumbnail: typeof VdtUploadListItemThumbnail;
+    ListItemText: typeof StyledVdtUploadListItemText;
+    ListItemSecondaryAction: typeof VdtUploadListItemSecondaryAction;
+};
+export interface UploadListItemProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * A file that the item represents
+     */
+    file?: Partial<File>;
+    /**
+     * A progress object
+     */
+    progress?: {
+        totalBytes: number;
+        transferredBytes: number;
+    };
+    /**
+     * Callback for clicking on the item
+     */
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    /**
+     * Callback for clicking on remove
+     */
+    onRemove?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Whether the item is selected or not
+     */
+    selected?: boolean;
+    /**
+     * Whether the upload is ongoing or not
+     */
+    isUploading?: boolean;
+}
+declare const UploadListItem: React.FC<UploadListItemProps>;
+export default UploadListItem;

package/dist/es/upload/UploadListItem/UploadListItem.js

@@ -0,0 +1,90 @@
+import { jsxs as v, jsx as d } from "react/jsx-runtime";
+import b from "@mui/material/ListItem";
+import { styled as r, emphasize as g } from "@mui/material/styles";
+import T from "./components/UploadListItemSecondaryAction.js";
+import C from "./components/UploadListItemText.js";
+import U from "./components/UploadListItemThumbnail.js";
+const x = r(b, {
+  shouldForwardProp: (o) => typeof o != "string" || !["isComplete", "selected"].includes(o)
+})(({
+  isComplete: o,
+  selected: t,
+  theme: e
+}) => ({
+  cursor: o ? "default" : "pointer",
+  "&:not(:first-of-type)": {
+    marginTop: e.spacing(0.5)
+  },
+  paddingLeft: 8,
+  backgroundColor: g(e.palette.background.paper, 0.05),
+  "&:hover": {
+    ...!t && {
+      backgroundColor: e.palette.background.paper
+    },
+    "& .UploadListItemActions-completeIcon": {
+      visibility: "hidden"
+    },
+    "& .UploadListItemActions-progressIcon": {
+      visibility: "hidden"
+    },
+    "& .UploadListItemActions-deleteIcon": {
+      visibility: "visible"
+    }
+  }
+})), k = r(C)(() => ({
+  margin: 4
+})), A = {
+  Root: x,
+  ListItemThumbnail: U,
+  ListItemText: k,
+  ListItemSecondaryAction: T
+}, m = ({
+  file: o,
+  progress: t,
+  onClick: e,
+  onRemove: l,
+  selected: c,
+  isUploading: p,
+  components: I,
+  componentsProps: i
+}) => {
+  const {
+    Root: f,
+    ListItemThumbnail: u,
+    ListItemText: L,
+    ListItemSecondaryAction: y
+  } = I, a = t && t.transferredBytes ? Math.floor(t.transferredBytes / t.totalBytes * 100) : 0, n = a === 100, h = (s) => {
+    s.stopPropagation(), l && l(s);
+  };
+  return /* @__PURE__ */ v(
+    f,
+    {
+      component: "div",
+      isComplete: n,
+      onClick: n ? void 0 : (s) => {
+        e && e(s);
+      },
+      selected: c,
+      ...i.root,
+      children: [
+        /* @__PURE__ */ d(u, { file: o, ...i.listItemThumbnail }),
+        /* @__PURE__ */ d(L, { file: o, showProgress: !!t, progressPercent: a, ...i.listItemText }),
+        /* @__PURE__ */ d(y, { progress: t, isComplete: n, onRemove: h, isUploading: p, ...i.listItemSecondaryAction })
+      ]
+    }
+  );
+};
+m.defaultProps = {
+  file: void 0,
+  progress: void 0,
+  selected: !1,
+  isUploading: !1,
+  onClick: void 0,
+  onRemove: void 0,
+  components: A,
+  componentsProps: void 0
+};
+const w = m;
+export {
+  w as default
+};

package/dist/es/upload/UploadListItem/components/UploadListItemProgress.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { LinearProgressProps } from '@mui/material';
+interface UploadListItemProgressProps extends LinearProgressProps {
+    value: number;
+}
+declare const UploadListItemProgress: React.FC<UploadListItemProgressProps>;
+export default UploadListItemProgress;