@mux/mux-uploader-react - npm Package Compare versions

Comparing version 0.1.0-canary.4-df8c8fd to 0.1.0-canary.40-ff990a5

CHANGELOG.md

@@ -6,2 +6,44 @@ # Change Log
 
+# [0.1.0-beta.9](https://github.com/muxinc/elements/compare/@mux/mux-uploader-react@0.1.0-beta.8...@mux/mux-uploader-react@0.1.0-beta.9) (2022-09-01)
+
+### Bug Fixes
+
+- cjs main entrypoint for React pkgs ([#360](https://github.com/muxinc/elements/issues/360)) ([473875f](https://github.com/muxinc/elements/commit/473875f4869a6ab9b04b44a90cc52b620a15ac83))
+
+# [0.1.0-beta.8](https://github.com/muxinc/elements/compare/@mux/mux-uploader-react@0.1.0-beta.7...@mux/mux-uploader-react@0.1.0-beta.8) (2022-08-31)
+
+### Bug Fixes
+
+- **mux-uploader-react:** Rename error event. ([cb74ca2](https://github.com/muxinc/elements/commit/cb74ca2528aa051b2f0a10ad5715aaad69cf1ecf))
+
+# [0.1.0-beta.7](https://github.com/muxinc/elements/compare/@mux/mux-uploader-react@0.1.0-beta.6...@mux/mux-uploader-react@0.1.0-beta.7) (2022-08-04)
+
+**Note:** Version bump only for package @mux/mux-uploader-react
+
+# [0.1.0-beta.6](https://github.com/muxinc/elements/compare/@mux/mux-uploader-react@0.1.0-beta.5...@mux/mux-uploader-react@0.1.0-beta.6) (2022-08-03)
+
+### Features
+
+- **mux-uploader-react:** Handle endpoint and ref attrs. ([6306286](https://github.com/muxinc/elements/commit/6306286ec5f07ac3328976bdd44ff6fdd2e10dc9))
+
+# [0.1.0-beta.5](https://github.com/muxinc/elements/compare/@mux/mux-uploader-react@0.1.0-beta.4...@mux/mux-uploader-react@0.1.0-beta.5) (2022-08-02)
+
+### Bug Fixes
+
+- **mux-uploader-react:** Clean up typescript defs. ([8cfa013](https://github.com/muxinc/elements/commit/8cfa013c591c94654c7ffc314cef159bc3c0fff0))
+- **mux-uploader-react:** Update event and event handler typedefs for greater accuracy of types. ([5c601b8](https://github.com/muxinc/elements/commit/5c601b8b649a9ff20e046c4ac4aad657ffce4edf))
+
+### Features
+
+- **mux-uploader:** Add CSS variables for button border and padding. ([359cd89](https://github.com/muxinc/elements/commit/359cd89472781fc41e33e95574c0d9c845b1d081))
+- **mux-uploader:** Add custom event for when upload starts. ([9fd1efc](https://github.com/muxinc/elements/commit/9fd1efc943bcb60efdb51b455d5b9642af86b920))
+- **mux-uploader:** Support css vars for mux-uploader react component. ([8745784](https://github.com/muxinc/elements/commit/87457844f483d695d8f3bfd1da2fddaaa64a96fe))
+- **mux-uploader:** Support Upchunk's attempt and chunkSuccess events. ([739a88e](https://github.com/muxinc/elements/commit/739a88e5eda697b8344ef14e3a20b1bef19e1a41))
+
+# [0.1.0-beta.4](https://github.com/muxinc/elements/compare/@mux/mux-uploader-react@0.1.0-beta.2...@mux/mux-uploader-react@0.1.0-beta.4) (2022-07-21)
+
+### Bug Fixes
+
+- **mux-uploader, mux-uploader-react:** Add support for endpoint to react version. Clean up type defs, including css vars (drop component only). Remove unnecessary capture for DandD events. ([c12ded5](https://github.com/muxinc/elements/commit/c12ded5188a3d97d48dc335a98d8537b6fa57443))
+
 # 0.1.0-beta.2 (2022-07-11)
@@ -8,0 +50,0 @@

dist/types-ts3.4/index.d.ts

@@ -6,17 +6,84 @@ import React from 'react';
 import MuxUploaderElement from '@mux/mux-uploader';
+import { MuxUploaderElementEventMap } from '@mux/mux-uploader';
 export declare type MuxUploaderRefAttributes = MuxUploaderElement;
+interface GenericEventListener<T extends Event = CustomEvent> {
+    (evt: T): void;
+}
 export declare type MuxUploaderProps = {
-    url: string;
     id?: string;
+    endpoint?: MuxUploaderElement['endpoint'];
     type?: string;
     status?: boolean;
-    style?: CSSProperties;
+    style?: CSSProperties & {
+        ['--uploader-font-family']?: CSSProperties['fontFamily'];
+        ['--uploader-font-size']?: CSSProperties['fontSize'];
+        ['--uploader-background-color']?: CSSProperties['backgroundColor'];
+        ['--button-background-color']?: CSSProperties['backgroundColor'];
+        ['--button-border-radius']?: CSSProperties['borderRadius'];
+        ['--button-border']?: CSSProperties['border'];
+        ['--button-padding']?: CSSProperties['padding'];
+        ['--button-hover-text']?: CSSProperties['color'];
+        ['--button-hover-background']?: CSSProperties['background'];
+        ['--button-active-text']?: CSSProperties['color'];
+        ['--button-active-background']?: CSSProperties['background'];
+        ['--progress-bar-fill-color']?: CSSProperties['background'];
+        ['--progress-radial-fill-color']?: CSSProperties['stroke'];
+    };
     children?: React.ReactNode;
     formatProgress?: (percent: number) => string;
-    onError?: EventListener;
-    onProgress?: EventListener;
-    onSuccess?: EventListener;
-};
-declare const MuxUploader: React.ForwardRefExoticComponent<MuxUploaderProps & React.RefAttributes<MuxUploaderElement>>;
+    dynamicChunkSize?: boolean;
+    onUploadStart?: GenericEventListener<MuxUploaderElementEventMap['uploadstart']>;
+    onChunkAttempt?: GenericEventListener<MuxUploaderElementEventMap['chunkattempt']>;
+    onChunkSuccess?: GenericEventListener<MuxUploaderElementEventMap['chunksuccess']>;
+    onUploadError?: GenericEventListener<MuxUploaderElementEventMap['uploaderror']>;
+    onProgress?: GenericEventListener<MuxUploaderElementEventMap['progress']>;
+    onSuccess?: GenericEventListener<MuxUploaderElementEventMap['success']>;
+} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, Exclude<keyof React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, 'ref'>>;
+declare const MuxUploader: React.ForwardRefExoticComponent<{
+    id?: string | undefined;
+    endpoint?: MuxUploaderElement['endpoint'];
+    type?: string | undefined;
+    status?: boolean | undefined;
+    style?: (React.CSSProperties & {
+        "--uploader-font-family"?: CSSProperties['fontFamily'];
+        "--uploader-font-size"?: CSSProperties['fontSize'];
+        "--uploader-background-color"?: CSSProperties['backgroundColor'];
+        "--button-background-color"?: CSSProperties['backgroundColor'];
+        "--button-border-radius"?: CSSProperties['borderRadius'];
+        "--button-border"?: CSSProperties['border'];
+        "--button-padding"?: CSSProperties['padding'];
+        "--button-hover-text"?: CSSProperties['color'];
+        "--button-hover-background"?: CSSProperties['background'];
+        "--button-active-text"?: CSSProperties['color'];
+        "--button-active-background"?: CSSProperties['background'];
+        "--progress-bar-fill-color"?: CSSProperties['background'];
+        "--progress-radial-fill-color"?: CSSProperties['stroke'];
+    }) | undefined;
+    children?: React.ReactNode;
+    formatProgress?: ((percent: number) => string) | undefined;
+    dynamicChunkSize?: boolean | undefined;
+    onUploadStart?: GenericEventListener<CustomEvent<{
+        file: File;
+        chunkSize: number;
+    }>> | undefined;
+    onChunkAttempt?: GenericEventListener<CustomEvent<{
+        chunkNumber: number;
+        chunkSize: number;
+    }>> | undefined;
+    onChunkSuccess?: GenericEventListener<CustomEvent<{
+        chunk: number;
+        chunkSize: number;
+        attempts: number;
+        timeInterval: number;
+        response: any;
+    }>> | undefined;
+    onUploadError?: GenericEventListener<CustomEvent<{
+        message: string;
+        chunkNumber?: number | undefined;
+        attempts?: number | undefined;
+    }>> | undefined;
+    onProgress?: GenericEventListener<CustomEvent<number>> | undefined;
+    onSuccess?: GenericEventListener<CustomEvent<null | undefined>> | undefined;
+} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, Exclude<keyof React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">> & React.RefAttributes<MuxUploaderElement>>;
 export { MuxUploaderDrop };
 export default MuxUploader;

dist/types-ts3.4/mux-uploader-drop.d.ts

@@ -9,3 +9,5 @@ import React from 'react';
     overlayText?: string;
-    style?: CSSProperties;
+    style?: CSSProperties & {
+        ['--overlay-background-color']?: CSSProperties['backgroundColor'];
+    };
     children?: React.ReactNode;
@@ -12,0 +14,0 @@ };

dist/types/index.d.ts

@@ -6,17 +6,84 @@ import React from 'react';
 import type MuxUploaderElement from '@mux/mux-uploader';
+import type { MuxUploaderElementEventMap } from '@mux/mux-uploader';
 export declare type MuxUploaderRefAttributes = MuxUploaderElement;
+interface GenericEventListener<T extends Event = CustomEvent> {
+    (evt: T): void;
+}
 export declare type MuxUploaderProps = {
-    url: string;
     id?: string;
+    endpoint?: MuxUploaderElement['endpoint'];
     type?: string;
     status?: boolean;
-    style?: CSSProperties;
+    style?: CSSProperties & {
+        ['--uploader-font-family']?: CSSProperties['fontFamily'];
+        ['--uploader-font-size']?: CSSProperties['fontSize'];
+        ['--uploader-background-color']?: CSSProperties['backgroundColor'];
+        ['--button-background-color']?: CSSProperties['backgroundColor'];
+        ['--button-border-radius']?: CSSProperties['borderRadius'];
+        ['--button-border']?: CSSProperties['border'];
+        ['--button-padding']?: CSSProperties['padding'];
+        ['--button-hover-text']?: CSSProperties['color'];
+        ['--button-hover-background']?: CSSProperties['background'];
+        ['--button-active-text']?: CSSProperties['color'];
+        ['--button-active-background']?: CSSProperties['background'];
+        ['--progress-bar-fill-color']?: CSSProperties['background'];
+        ['--progress-radial-fill-color']?: CSSProperties['stroke'];
+    };
     children?: React.ReactNode;
     formatProgress?: (percent: number) => string;
-    onError?: EventListener;
-    onProgress?: EventListener;
-    onSuccess?: EventListener;
-};
-declare const MuxUploader: React.ForwardRefExoticComponent<MuxUploaderProps & React.RefAttributes<MuxUploaderElement>>;
+    dynamicChunkSize?: boolean;
+    onUploadStart?: GenericEventListener<MuxUploaderElementEventMap['uploadstart']>;
+    onChunkAttempt?: GenericEventListener<MuxUploaderElementEventMap['chunkattempt']>;
+    onChunkSuccess?: GenericEventListener<MuxUploaderElementEventMap['chunksuccess']>;
+    onUploadError?: GenericEventListener<MuxUploaderElementEventMap['uploaderror']>;
+    onProgress?: GenericEventListener<MuxUploaderElementEventMap['progress']>;
+    onSuccess?: GenericEventListener<MuxUploaderElementEventMap['success']>;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, 'ref'>;
+declare const MuxUploader: React.ForwardRefExoticComponent<{
+    id?: string | undefined;
+    endpoint?: MuxUploaderElement['endpoint'];
+    type?: string | undefined;
+    status?: boolean | undefined;
+    style?: (React.CSSProperties & {
+        "--uploader-font-family"?: CSSProperties['fontFamily'];
+        "--uploader-font-size"?: CSSProperties['fontSize'];
+        "--uploader-background-color"?: CSSProperties['backgroundColor'];
+        "--button-background-color"?: CSSProperties['backgroundColor'];
+        "--button-border-radius"?: CSSProperties['borderRadius'];
+        "--button-border"?: CSSProperties['border'];
+        "--button-padding"?: CSSProperties['padding'];
+        "--button-hover-text"?: CSSProperties['color'];
+        "--button-hover-background"?: CSSProperties['background'];
+        "--button-active-text"?: CSSProperties['color'];
+        "--button-active-background"?: CSSProperties['background'];
+        "--progress-bar-fill-color"?: CSSProperties['background'];
+        "--progress-radial-fill-color"?: CSSProperties['stroke'];
+    }) | undefined;
+    children?: React.ReactNode;
+    formatProgress?: ((percent: number) => string) | undefined;
+    dynamicChunkSize?: boolean | undefined;
+    onUploadStart?: GenericEventListener<CustomEvent<{
+        file: File;
+        chunkSize: number;
+    }>> | undefined;
+    onChunkAttempt?: GenericEventListener<CustomEvent<{
+        chunkNumber: number;
+        chunkSize: number;
+    }>> | undefined;
+    onChunkSuccess?: GenericEventListener<CustomEvent<{
+        chunk: number;
+        chunkSize: number;
+        attempts: number;
+        timeInterval: number;
+        response: any;
+    }>> | undefined;
+    onUploadError?: GenericEventListener<CustomEvent<{
+        message: string;
+        chunkNumber?: number | undefined;
+        attempts?: number | undefined;
+    }>> | undefined;
+    onProgress?: GenericEventListener<CustomEvent<number>> | undefined;
+    onSuccess?: GenericEventListener<CustomEvent<null | undefined>> | undefined;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<MuxUploaderElement>>;
 export { MuxUploaderDrop };
 export default MuxUploader;

dist/types/mux-uploader-drop.d.ts

@@ -9,3 +9,5 @@ import React from 'react';
     overlayText?: string;
-    style?: CSSProperties;
+    style?: CSSProperties & {
+        ['--overlay-background-color']?: CSSProperties['backgroundColor'];
+    };
     children?: React.ReactNode;
@@ -12,0 +14,0 @@ };

package.json

 {
   "name": "@mux/mux-uploader-react",
-  "version": "0.1.0-canary.4-df8c8fd",
+  "version": "0.1.0-canary.40-ff990a5",
   "type": "commonjs",
   "description": "An uploader element for React that handles Mux Direct Uploads and a visual progress bar for you",
-  "main": "dist/index.js",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.mjs",
+  "exports": {
+    "import": "./dist/index.mjs",
+    "require": "./dist/index.cjs.js",
+    "default": "./dist/index.cjs.js"
+  },
   "types": "dist/types-ts3.4/index.d.ts",
@@ -24,10 +30,12 @@ "typesVersions": {
     "clean": "shx rm -rf dist/",
-    "dev:cjs": "open-process | yarn build:cjs --watch",
+    "dev:cjs": "yarn build:cjs --watch=forever",
+    "dev:esm": "yarn build:esm --watch=forever",
     "dev:types": "yarn build:types -w",
-    "dev": "npm-run-all --parallel dev:types dev:cjs",
-    "build:cjs": "esbuild src/index.tsx --target=es2019 --minify --bundle --sourcemap --format=cjs --loader:.css=text --outdir=dist --external:react --external:prop-types",
-    "build:types": "tsc --declaration --emitDeclarationOnly --outDir './dist/types' && downlevel-dts ./dist/types ./dist/types-ts3.4",
-    "build": "npm-run-all --parallel build:types 'build:cjs -- --minify'",
+    "dev": "npm-run-all --parallel dev:types dev:cjs dev:esm",
+    "build:cjs": "esbuild src/index.tsx --target=es2019 --minify --bundle --sourcemap --metafile=./dist/cjs.json --format=cjs --loader:.css=text --outdir=dist --out-extension:.js=.cjs.js --external:react --external:prop-types",
+    "build:esm": "esbuild src/index.tsx --target=es2019 --minify --bundle --sourcemap --metafile=./dist/esm.json --format=esm --loader:.css=text --outdir=dist --out-extension:.js=.mjs --external:react --external:prop-types",
+    "build:types": "tsc --declaration --emitDeclarationOnly --outDir './dist/types'",
+    "postbuild:types": "downlevel-dts ./dist/types ./dist/types-ts3.4",
+    "build": "npm-run-all --parallel build:types 'build:cjs -- --minify' 'build:esm -- --minify'",
     "prebuild": "yarn clean",
-    "prepublishOnly": "yarn build",
     "create-release-notes": "create-release-notes ./CHANGELOG.md",
@@ -50,3 +58,4 @@ "publish-release": "../../scripts/publish.sh"
   "dependencies": {
-    "@mux/mux-uploader": "0.1.0-beta.3",
+    "@mux/mux-elements-codemod": "1.1.2-canary.41-ff990a5",
+    "@mux/mux-uploader": "0.1.0-canary.40-ff990a5",
     "prop-types": "^15.7.2"
@@ -58,3 +67,3 @@ },
     "downlevel-dts": "^0.9.0",
-    "esbuild": "^0.13.13",
+    "esbuild": "^0.15.7",
     "npm-run-all": "^4.1.5",
@@ -61,0 +70,0 @@ "react": "^17.0.2",

README.md

@@ -51,11 +51,11 @@ <p align="center">
       <h1>Simple MuxUploader and Mux Uploader Drop Examples</h1>
-      {/* Upload button by itself. Displays upload progress in text as percentage. */}
-      <MuxUploader url="authenticated-url" type="bar" status></MuxUploader>
+      {/* Rounded upload button by itself. Displays upload progress in text as percentage. */}
+      <MuxUploader endpoint="authenticated-url" type="bar" status style={{ '--button-border-radius': '40px' }}></MuxUploader>
 
       {/* Upload button by itself. Does not display text percentage. */}
-      <MuxUploader url="authenticated-url" type="bar"></MuxUploader>
+      <MuxUploader endpoint="authenticated-url" type="bar"></MuxUploader>
 
       {/* Upload button with access to optional supplentary drag and drop features. */}
       <MuxUploaderDrop mux-uploader="uploader">
-        <MuxUploader url="authenticated-url" id="uploader"></MuxUploader>
+        <MuxUploader endpoint="authenticated-url" id="uploader"></MuxUploader>
       </MuxUploaderDrop>
@@ -67,2 +67,4 @@ </div>
 
+For a more complex implementation out in the wild, check out [stream.new](https://github.com/muxinc/stream.new/blob/main/pages/index.tsx#L152).
+
 ### Props
@@ -72,9 +74,10 @@
 
-| Property         | Type       | Description                                                                                                                                                                                                               | Default                                         |
-| ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
-| `url`            | `string`   | The authenticated URL that your file will be uploaded to. Check out the [direct uploads docs](https://docs.mux.com/guides/video/upload-files-directly#1-create-an-authenticated-mux-url) for how to create one. Required. | `undefined`                                     |
-| `id`             | `string`   | An ID that allows `<MuxUploaderDrop>` to locate `<MuxUploader>`. Required if you use `<MuxUploaderDrop>`.                                                                                                                 | N/A                                             |
-| `type`           | `"bar"`    | Specifies the visual type of progress bar. A radial type is in-progress.                                                                                                                                                  | "bar"                                           |
-| `status`         | `boolean`  | Toggles text status visibility of progress bar. The text that is displayed is a percentage by default. If you prefer just the progress bar with no text upload status, don't include this attribute.                      | false                                           |
-| `formatProgress` | `function` | A function that accepts numeric percent and is expected to return a string. Allows for customizing how the progress should be rendered.                                                                                   | A function the yields a percent progress string |
+| Property           | Type                | Description                                                                                                                                                                                                                                                                                                 | Default                                                          |
+| ------------------ | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
+| `endpoint`         | `string \| Promise` | Either a) the authenticated URL that your file will be uploaded to or b) an async function that yields a promise that resolves to that url. Check out the [direct uploads docs](https://docs.mux.com/guides/video/upload-files-directly#1-create-an-authenticated-mux-url) for how to create one. Required. | `undefined`                                                      |
+| `id`               | `string`            | An ID that allows `<MuxUploaderDrop>` to locate `<MuxUploader>`. Required if you use `<MuxUploaderDrop>`.                                                                                                                                                                                                   | N/A                                                              |
+| `type`             | `"bar"`             | Specifies the visual type of progress bar. A radial type is in-progress.                                                                                                                                                                                                                                    | "bar"                                                            |
+| `status`           | `boolean`           | Toggles text status visibility of progress bar. The text that is displayed is a percentage by default. If you prefer just the progress bar with no text upload status, don't include this attribute.                                                                                                        | false                                                            |
+| `formatProgress`   | `function`          | A function that accepts numeric percent and is expected to return a string. Allows for customizing how the progress should be rendered - whether you want to display only the number, a sentence with the number etc. i.e. `formatProgress={(percent: number) => `${percent} percent uploaded`}`            | A function that yields only the percent as a string i.e. `"60%"` |
+| `dynamicChunkSize` | `boolean`           | Toggles uploading with dynamic chunk sizes. Chunk sizes will change with upload speed to attempt to optimize upload.                                                                                                                                                                                        | `false`                                                          |
 
@@ -86,3 +89,3 @@ #### `<MuxUploaderDrop>`
 | `overlay`     | `boolean` | Toggles fullscreen overlay on dragover.                    | false   |
-| `overlayText` | `boolean` | Optional text to display on dragover when `overlay` is on. | `''`    |
+| `overlayText` | `string`  | Optional text to display on dragover when `overlay` is on. | `''`    |
 | `muxUploader` | `string ` | Must match the `id` on `<MuxUploader>`. Required.          | N/A     |
@@ -94,8 +97,39 @@
 
-`<MuxUploader>` has a handful of events to monitor uploading state.
+`<MuxUploader>` has a handful of a number of callbacks associated with events to handle uploading state.
 
-| Prop         | Description                                                                |
-| ------------ | -------------------------------------------------------------------------- |
-| `onError`    | Invoked when an error occurs in the chunked upload process.                |
-| `onProgress` | Invoked whenever a chunk of the file has successfully completed uploading. |
-| `onSuccess`  | Invoked when the entire file has successfully completed uploading.         |
+| Prop             | Description                                                                                                                                                          |
+| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onUploadStart`  | Fired when the upload begins.                                                                                                                                        |
+| `onChunkAttempt` | Invoked immediately before a chunk upload is attempted.                                                                                                              |
+| `onChunkSuccess` | Invoked when an indvidual chunk is successfully uploaded. Sample response: `{ detail: { chunk: Integer, attempts: Integer, response: XhrResponse } }`                |
+| `onUploadError`  | Invoked when an error occurs in the chunked upload process.                                                                                                          |
+| `onProgress`     | Invoked continuously with incremental upload progress. This returns the current percentage of the file that's been uploaded. Sample response: `{ detail: [0..100] }` |
+| `onSuccess`      | Invoked when the entire file has successfully completed uploading.                                                                                                   |
+
+### Styling
+
+`<MuxUploader>` and `<MuxUploaderDrop>` can be styled with standard CSS, but also includes these CSS variables for "under the hood" inline-styling.
+
+#### `<MuxUploader>`
+
+| Name                           | CSS Property       | Default Value       | Description                                             | Notes                                                                                             |
+| ------------------------------ | ------------------ | ------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
+| `--uploader-font-family`       | `font-family`      | `Arial`             | font family of the component                            | Applies to other elements as well: upload status and error status                                 |
+| `--uploader-font-size`         | `font-size`        | `16px`              | font size for text within the component                 | Also applies to `<MuxUploaderDrop>` i.e. overlay text c                                           |
+| `--uploader-background-color`  | `background-color` | `inherit`           | background color of area surrounding the upload         |                                                                                                   |
+| `--button-background-color`    | `background`       | `#fff`              | background color of upload button                       |                                                                                                   |
+| `--button-border-radius`       | `border-radius`    | `4px`               | border radius of the upload button                      |                                                                                                   |
+| `--button-border`              | `border`           | `1px solid #000000` | border of the upload button                             |                                                                                                   |
+| `--button-padding`             | `padding`          | `16px 24px`         | padding of the upload button                            |                                                                                                   |
+| `--button-hover-text`          | `color`            | `#fff`              | text color of upload button on button hover             |                                                                                                   |
+| `--button-hover-background`    | `background`       | `#404040`           | background color of upload button on button hover       |                                                                                                   |
+| `--button-active-text`         | `color`            | `#fff`              | color of upload button text when button is active       |                                                                                                   |
+| `--button-active-background`   | `background`       | `#000000`           | background color of upload button when button is active | Applied via `:active` [pseudo selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:active) |
+| `--progress-bar-fill-color`    | `background`       | `#000000`           | background color for progress bar div                   |                                                                                                   |
+| `--progress-radial-fill-color` | `stroke`           | `black`             | stroke color for circle SVG (wip)                       |                                                                                                   |
+
+#### `<MuxUploader/>`
+
+| Name                         | CSS Property       | Default Value               | Description                         |
+| ---------------------------- | ------------------ | --------------------------- | ----------------------------------- |
+| `--overlay-background-color` | `background-color` | `rgba(226, 253, 255, 0.95)` | background color of the overlay div |

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

430023

increased by114.95%

Lines of code

1098

increased by64.13%

Number of lines in readme file

131

increased by35.05%

Worsened metrics

Dependency count

6

increased by20%

Number of package files

20

decreased by-13.04%

Published versions last months

3

decreased by-25%

Published versions last two months

19

decreased by-26.92%

Dependency changes

• + Added@mux/mux-elements-codemod@1.1.2-canary.41-ff990a5

• + Added@mux/mux-elements-codemod@1.1.2-canary.41-ff990a5(transitive)

• + Added@mux/mux-uploader@0.1.0-canary.40-ff990a5(transitive)

• + Addedbalanced-match@1.0.2(transitive)

• + Addedbrace-expansion@1.1.11(transitive)

• + Addedchalk@5.4.1(transitive)

• + Addedconcat-map@0.0.1(transitive)

• + Addedfs.realpath@1.0.0(transitive)

• + Addedfunction-bind@1.1.2(transitive)

• + Addedglob@7.2.3(transitive)

• + Addedhasown@2.0.2(transitive)

• + Addedinflight@1.0.6(transitive)

• + Addedinherits@2.0.4(transitive)

• + Addedinterpret@1.4.0(transitive)

• + Addedis-core-module@2.16.1(transitive)

• + Addedminimatch@3.1.2(transitive)

• + Addedminimist@1.2.8(transitive)

• + Addedonce@1.4.0(transitive)

• + Addedpath-is-absolute@1.0.1(transitive)

• + Addedpath-parse@1.0.7(transitive)

• + Addedrechoir@0.6.2(transitive)

• + Addedresolve@1.22.10(transitive)

• + Addedshelljs@0.8.5(transitive)

• + Addedsupports-preserve-symlinks-flag@1.0.0(transitive)

• + Addedwrappy@1.0.2(transitive)

• - Removed@mux/mux-uploader@0.1.0-beta.3(transitive)

• Updated@mux/mux-uploader@0.1.0-canary.40-ff990a5