@veritone-ce/design-system 2.7.5 → 2.8.0

package/dist/cjs/FileUploader/controlled.js

@@ -0,0 +1,310 @@
+'use strict';
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var iconsMaterial = require('@mui/icons-material');
+var reactDropzone = require('react-dropzone');
+var cx = require('../styles/cx.js');
+require('../styles/defaultThemeOptions.js');
+require('@capsizecss/core');
+require('color2k');
+var defaultTheme = require('../styles/defaultTheme.js');
+require('../styles/provider.client.js');
+require('../styles/css-vars.js');
+var index = require('../Typography/index.js');
+var index$2 = require('../IconButton/index.js');
+var wrappers = require('../Icon/wrappers.js');
+require('../Icon/factory.js');
+var styles_module = require('./styles.module.scss.js');
+var index$1 = require('../unstable/LinearProgress/index.js');
+
+const CloudUploadOutlinedIcon = wrappers.adaptMuiSvgIcon(iconsMaterial.CloudUploadOutlined);
+const DeleteOutlineIcon = wrappers.adaptMuiSvgIcon(iconsMaterial.DeleteOutline);
+const CheckOutlineIcon = wrappers.adaptMuiSvgIcon(iconsMaterial.CheckOutlined);
+const WarningOutlineIcon = wrappers.adaptMuiSvgIcon(iconsMaterial.WarningOutlined);
+var FILE_STATES = /* @__PURE__ */ ((FILE_STATES2) => {
+  FILE_STATES2["PENDING"] = "pending";
+  FILE_STATES2["ADDED"] = "added";
+  FILE_STATES2["UPLOADING"] = "uploading";
+  FILE_STATES2["CANCELLED"] = "cancelled";
+  FILE_STATES2["FINISHED"] = "finished";
+  FILE_STATES2["ERROR"] = "error";
+  FILE_STATES2["ABORTED"] = "aborted";
+  return FILE_STATES2;
+})(FILE_STATES || {});
+function resolveFileState(state) {
+  if (state === void 0 || state === null) {
+    return "added" /* ADDED */;
+  }
+  if (typeof state === "string") {
+    switch (state) {
+      case "idle":
+        return "added" /* ADDED */;
+      case "pending":
+        return "pending" /* PENDING */;
+      case "success":
+        return "finished" /* FINISHED */;
+      case "error":
+        return "error" /* ERROR */;
+      default:
+        return state;
+    }
+  } else {
+    if (state.error) {
+      return "error" /* ERROR */;
+    }
+    if (state.loading) {
+      return "uploading" /* UPLOADING */;
+    }
+    if (state.called) {
+      return "finished" /* FINISHED */;
+    }
+    return "added" /* ADDED */;
+  }
+}
+function resolveFileStates(fileStates) {
+  if (fileStates === void 0 || fileStates === null || fileStates.length === 0) {
+    return ["added" /* ADDED */, 0];
+  }
+  let somePending = false;
+  let someUploading = false;
+  let allAreFinished = true;
+  let complete = 0;
+  const formatReturn = (state) => {
+    return [state, complete / fileStates.length * 100];
+  };
+  for (const fileState of fileStates) {
+    if (fileState === "finished" /* FINISHED */) {
+      complete++;
+      continue;
+    }
+    allAreFinished = false;
+    switch (fileState) {
+      case "pending" /* PENDING */:
+        somePending = true;
+        break;
+      case "uploading" /* UPLOADING */:
+        someUploading = true;
+        break;
+      case "cancelled" /* CANCELLED */:
+        return formatReturn("cancelled" /* CANCELLED */);
+      case "error" /* ERROR */:
+        complete++;
+        return formatReturn("error" /* ERROR */);
+      case "aborted" /* ABORTED */:
+        return formatReturn("aborted" /* ABORTED */);
+    }
+  }
+  if (allAreFinished) {
+    return formatReturn("finished" /* FINISHED */);
+  }
+  if (someUploading) {
+    return formatReturn("uploading" /* UPLOADING */);
+  }
+  if (somePending) {
+    return formatReturn("pending" /* PENDING */);
+  }
+  return formatReturn("added" /* ADDED */);
+}
+function UploadDropzone({
+  accept,
+  multiple,
+  disabled = false,
+  mini,
+  state: propsState,
+  onDrop,
+  className,
+  ...containerProps
+}) {
+  const [state, progress] = React.useMemo(
+    () => resolveFileStates(
+      Array.isArray(propsState) ? propsState.map((s) => resolveFileState(s)) : [resolveFileState(propsState)]
+    ),
+    [propsState]
+  );
+  const { getRootProps, getInputProps } = reactDropzone.useDropzone({
+    disabled,
+    multiple,
+    accept,
+    onDrop: (files, fileRejections, event) => {
+      onDrop(files, fileRejections, event);
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...getRootProps(),
+      "data-testid": "dropzone",
+      ...containerProps,
+      "data-disabled": disabled,
+      "data-mini": mini,
+      className: cx.cx(styles_module.default.dropzone, className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("input", { type: "file", className: styles_module.default.input, ...getInputProps() }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default.uploadIconContainer, children: [
+          state === "error" /* ERROR */ ? /* @__PURE__ */ jsxRuntime.jsx(WarningOutlineIcon, { className: styles_module.default.icon }) : state === "finished" /* FINISHED */ ? /* @__PURE__ */ jsxRuntime.jsx(CheckOutlineIcon, { className: styles_module.default.icon }) : /* @__PURE__ */ jsxRuntime.jsx(CloudUploadOutlinedIcon, { className: styles_module.default.icon }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              viewBox: "0 0 250 250",
+              className: styles_module.default.uploadProgress,
+              style: {
+                ...{
+                  "--vt-ce-uploader-progress": progress,
+                  // FIXME
+                  "--vt-ce-uploader-error": state === "error" /* ERROR */
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("circle", { className: styles_module.default.uploadProgressBg }),
+                progress > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    "data-success": state === "finished" /* FINISHED */,
+                    "data-error": state === "error" /* ERROR */,
+                    className: styles_module.default.uploadProgressFg
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        !mini && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              index.default,
+              {
+                as: "span",
+                variant: "paragraph2",
+                className: styles_module.default.browseLabel,
+                children: "Browse files"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(index.default, { as: "span", variant: "paragraph2", children: [
+              " ",
+              "from your computer or drag and drop here"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            index.default,
+            {
+              as: "p",
+              variant: "paragraph3",
+              className: styles_module.default.fileFormatLabel,
+              children: [
+                "Supported File Formats: ",
+                Object.values(accept).flat().join(", ")
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function UploadListContainer({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: cx.cx(styles_module.default.uploadsContainer, className), children: /* @__PURE__ */ jsxRuntime.jsx("table", { className: styles_module.default.uploads, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children }) }) });
+}
+function UploadList({
+  items,
+  onAbort,
+  ...containerProps
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(UploadListContainer, { ...containerProps, children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    UploadListItem,
+    {
+      item,
+      onAbort: onAbort && ((e) => {
+        onAbort(item, e);
+      })
+    },
+    index
+  )) });
+}
+function UploadListItem({
+  item,
+  onAbort
+}) {
+  const state = React.useMemo(() => resolveFileState(item.state), [item.state]);
+  const isAborted = state === "aborted" /* ABORTED */;
+  const isSuccess = state === "finished" /* FINISHED */;
+  const isError = state === "error" /* ERROR */;
+  const isFinished = !["pending" /* PENDING */, "uploading" /* UPLOADING */].includes(
+    state
+  );
+  const progress = React.useMemo(() => {
+    if (item.progress !== void 0) {
+      return item.progress;
+    }
+    switch (state) {
+      case "added" /* ADDED */:
+        return 0;
+      case "pending" /* PENDING */:
+        return 0;
+      case "error" /* ERROR */:
+        return 100;
+      case "finished" /* FINISHED */:
+        return 100;
+    }
+    return 0;
+  }, [item.progress, state]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("tr", { "data-testid": "file-item", className: styles_module.default.lineItem, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("td", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index.default, { as: "p", variant: "label", className: styles_module.default.label, children: item.file.name }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        index$1.default,
+        {
+          value: progress,
+          variant: state === "uploading" /* UPLOADING */ ? "indeterminate" : "determinate",
+          color: (isSuccess ? defaultTheme.defaultThemeCssVariableUsages.palette.indicator.success.base : isError ? defaultTheme.defaultThemeCssVariableUsages.palette.indicator.error.base : defaultTheme.defaultThemeCssVariableUsages.palette.action.primary.base).surface
+        }
+      ),
+      isError && /* @__PURE__ */ jsxRuntime.jsx(
+        index.default,
+        {
+          as: "p",
+          variant: "paragraph3",
+          className: styles_module.default.feedbackText,
+          children: "An error occurred."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("td", { className: styles_module.default.deleteBtn, children: isFinished ? isSuccess ? /* @__PURE__ */ jsxRuntime.jsx(
+      index$2.default,
+      {
+        "data-testid": "file-item-success-button",
+        "aria-label": "success",
+        disabled: true,
+        children: /* @__PURE__ */ jsxRuntime.jsx(CheckOutlineIcon, {})
+      }
+    ) : isError ? /* @__PURE__ */ jsxRuntime.jsx(
+      index$2.default,
+      {
+        "data-testid": "file-item-error-button",
+        "aria-label": "error",
+        disabled: true,
+        children: /* @__PURE__ */ jsxRuntime.jsx(WarningOutlineIcon, {})
+      }
+    ) : !isAborted && onAbort !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+      index$2.default,
+      {
+        "data-testid": "file-item-delete-button",
+        "aria-label": "delete",
+        onClick: onAbort,
+        children: /* @__PURE__ */ jsxRuntime.jsx(DeleteOutlineIcon, {})
+      }
+    ) : null : null })
+  ] });
+}
+
+exports.FILE_STATES = FILE_STATES;
+exports.UploadDropzone = UploadDropzone;
+exports.UploadList = UploadList;
+exports.UploadListContainer = UploadListContainer;
+exports.UploadListItem = UploadListItem;

package/dist/cjs/FileUploader/styles.module.scss.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"dropzone":"vt_ce_FileUploader_dropzone__67a7b572","browseLabel":"vt_ce_FileUploader_browseLabel__6ff61262","input":"vt_ce_FileUploader_input__bc9e7afd","fileFormatLabel":"vt_ce_FileUploader_fileFormatLabel__9046e635","uploadIconContainer":"vt_ce_FileUploader_uploadIconContainer__c1ade8fa","icon":"vt_ce_FileUploader_icon__b16f9b3b","uploadProgress":"vt_ce_FileUploader_uploadProgress__550e3a26","uploadProgressBg":"vt_ce_FileUploader_uploadProgressBg__1c53c2dc","uploadProgressFg":"vt_ce_FileUploader_uploadProgressFg__e908d658","uploadsContainer":"vt_ce_FileUploader_uploadsContainer__0b908e6a","uploads":"vt_ce_FileUploader_uploads__4eaf83ba","lineItem":"vt_ce_FileUploader_lineItem__49e6d4e7","deleteBtn":"vt_ce_FileUploader_deleteBtn__3bd64874","label":"vt_ce_FileUploader_label__f468b603","progressBar":"vt_ce_FileUploader_progressBar__b72a1bf8","feedbackText":"vt_ce_FileUploader_feedbackText__dac0b241"};
+var styles = {"dropzone":"vt_ce_FileUploader_dropzone__67a7b572","browseLabel":"vt_ce_FileUploader_browseLabel__6ff61262","input":"vt_ce_FileUploader_input__bc9e7afd","fileFormatLabel":"vt_ce_FileUploader_fileFormatLabel__9046e635","uploadIconContainer":"vt_ce_FileUploader_uploadIconContainer__c1ade8fa","icon":"vt_ce_FileUploader_icon__b16f9b3b","uploadProgress":"vt_ce_FileUploader_uploadProgress__550e3a26","uploadProgressBg":"vt_ce_FileUploader_uploadProgressBg__1c53c2dc","uploadProgressFg":"vt_ce_FileUploader_uploadProgressFg__e908d658","uploadsContainer":"vt_ce_FileUploader_uploadsContainer__0b908e6a","uploads":"vt_ce_FileUploader_uploads__4eaf83ba","lineItem":"vt_ce_FileUploader_lineItem__49e6d4e7","deleteBtn":"vt_ce_FileUploader_deleteBtn__3bd64874","label":"vt_ce_FileUploader_label__f468b603","feedbackText":"vt_ce_FileUploader_feedbackText__dac0b241"};
 
 exports.default = styles;

package/dist/cjs/index.js

@@ -27,7 +27,7 @@ var factory = require('./Dialog/factory.js');
 var components$1 = require('./Drawer/components.js');
 var factory$1 = require('./Drawer/factory.js');
 var index$8 = require('./ErrorBoundary/index.js');
-var components$2 = require('./FileUploader/components.js');
+var controlled$1 = require('./FileUploader/controlled.js');
 var index$9 = require('./FormControl/index.js');
 var wrappers = require('./Icon/wrappers.js');
 var factory$2 = require('./Icon/factory.js');
@@ -37,7 +37,7 @@ var controlled = require('./Menu/controlled.js');
 var factory$3 = require('./Menu/factory.js');
 var index$c = require('./Pagination/index.js');
 var index$d = require('./RadioButton/index.js');
-var controlled$1 = require('./Select/controlled.js');
+var controlled$2 = require('./Select/controlled.js');
 var uncontrolled = require('./Select/uncontrolled.js');
 var factory$4 = require('./Select/factory.js');
 var index$e = require('./StatusChip/index.js');
@@ -110,11 +110,11 @@ exports.DrawerTitle = components$1.DrawerTitle;
 exports.DrawerTypography = components$1.DrawerTypography;
 exports.createDrawerComponent = factory$1.createDrawerComponent;
 exports.ErrorBoundary = index$8.default;
-exports.UploadButton = components$2.UploadButton;
-exports.UploadDropzone = components$2.UploadDropzone;
-exports.UploadList = components$2.UploadList;
-exports.UploadListItem = components$2.UploadListItem;
-exports.useUploadStatus = components$2.useUploadStatus;
+exports.FILE_STATES = controlled$1.FILE_STATES;
+exports.UploadDropzone = controlled$1.UploadDropzone;
+exports.UploadList = controlled$1.UploadList;
+exports.UploadListContainer = controlled$1.UploadListContainer;
+exports.UploadListItem = controlled$1.UploadListItem;
 exports.FormControl = index$9.default;
 exports.adaptMuiSvgIcon = wrappers.adaptMuiSvgIcon;
 exports.adaptSvgIcon = wrappers.adaptSvgIcon;
@@ -128,7 +128,7 @@ exports.NestedMenu = controlled.NestedMenu;
 exports.createMenuComponent = factory$3.createMenuComponent;
 exports.Pagination = index$c.default;
 exports.RadioButton = index$d.default;
-exports.ControlledSelect = controlled$1.default;
+exports.ControlledSelect = controlled$2.default;
 exports.Select = uncontrolled.default;
 exports.createControlledSelectComponent = factory$4.createControlledSelectComponent;
 exports.createSelectComponent = factory$4.createSelectComponent;