feat: bump file-uploader from 1.2.0 to 1.9.0

packages/react-uploader/package.json

@@ -33,7 +33,7 @@
     "next": "13 || 14"
   },
   "dependencies": {
-    "@uploadcare/file-uploader": "^1.2.0",
+    "@uploadcare/file-uploader": "^1.9.0",
     "@uploadcare/react-adapter": "^0.3.0"
   },
   "repository": {

packages/react-uploader/src/Uploader/Inline/FileUploaderInline.tsx

@@ -4,7 +4,7 @@ import "@uploadcare/file-uploader/web/uc-file-uploader-inline.min.css";
 import { customElementToReactComponent } from "@uploadcare/react-adapter";
 import { AdapterConfig } from "../core/AdapterConfig";
 import { AdapterUploadCtxProvider } from "../core/AdapterUploadCtxProvider";
-import type { TProps } from "../types";
+import type { FileUploaderModes, TProps } from "../types";
 import { getCalcPropertyOfProps } from "../../utils/getCalcPropertyOfProps";
 import { getUserAgentIntegration } from "../../utils/getUserAgentIntegration";
 import {
@@ -20,7 +20,7 @@ const AdapterFileUploaderInline = customElementToReactComponent({
   elClass: UC.FileUploaderMinimal,
 });
 
-export const FileUploaderInline: FC<TProps> = ({
+export const FileUploaderInline: FC<TProps<FileUploaderModes.Inline>> = ({
   ctxName,
   className,
   classNameUploader,
@@ -31,7 +31,7 @@ export const FileUploaderInline: FC<TProps> = ({
   const CTX_NAME = useMemo(() => ctxName ?? UC.UID.generate(), [ctxName]);
 
   const { eventHandlers, config } = useMemo(
-    () => getCalcPropertyOfProps<TProps>(props),
+    () => getCalcPropertyOfProps<FileUploaderModes.Inline>(props),
     [props],
   );
 

packages/react-uploader/src/Uploader/Minimal/FileUploaderMinimal.tsx

@@ -4,7 +4,7 @@ import "@uploadcare/file-uploader/web/uc-file-uploader-minimal.min.css";
 import { customElementToReactComponent } from "@uploadcare/react-adapter";
 import { AdapterConfig } from "../core/AdapterConfig";
 import { AdapterUploadCtxProvider } from "../core/AdapterUploadCtxProvider";
-import type { TProps } from "../types";
+import type { FileUploaderModes, TProps } from "../types";
 import { getCalcPropertyOfProps } from "../../utils/getCalcPropertyOfProps";
 import { getUserAgentIntegration } from "../../utils/getUserAgentIntegration";
 import {
@@ -20,7 +20,7 @@ const AdapterFileUploaderMinimal = customElementToReactComponent({
   elClass: UC.FileUploaderMinimal,
 });
 
-export const FileUploaderMinimal: FC<TProps> = ({
+export const FileUploaderMinimal: FC<TProps<FileUploaderModes.Minimal>> = ({
   ctxName,
   className,
   classNameUploader,
@@ -31,7 +31,7 @@ export const FileUploaderMinimal: FC<TProps> = ({
   const CTX_NAME = useMemo(() => ctxName ?? UC.UID.generate(), [ctxName]);
 
   const { eventHandlers, config } = useMemo(
-    () => getCalcPropertyOfProps<TProps>(props),
+    () => getCalcPropertyOfProps<FileUploaderModes.Minimal>(props),
     [props],
   );
 

packages/react-uploader/src/Uploader/Regular/FileUploaderRegular.tsx

@@ -4,7 +4,7 @@ import "@uploadcare/file-uploader/web/uc-file-uploader-regular.min.css";
 import { customElementToReactComponent } from "@uploadcare/react-adapter";
 import { AdapterConfig } from "../core/AdapterConfig";
 import { AdapterUploadCtxProvider } from "../core/AdapterUploadCtxProvider";
-import type { TProps } from "../types";
+import type { FileUploaderModes, TProps } from "../types";
 
 import { getCalcPropertyOfProps } from "../../utils/getCalcPropertyOfProps";
 import { getUserAgentIntegration } from "../../utils/getUserAgentIntegration";
@@ -21,7 +21,7 @@ const AdapterFileUploaderRegular = customElementToReactComponent({
   elClass: UC.FileUploaderRegular,
 });
 
-export const FileUploaderRegular: FC<TProps> = ({
+export const FileUploaderRegular: FC<TProps<FileUploaderModes.Regular>> = ({
   ctxName,
   className,
   classNameUploader,
@@ -31,8 +31,8 @@ export const FileUploaderRegular: FC<TProps> = ({
 }) => {
   const CTX_NAME = useMemo(() => ctxName ?? UC.UID.generate(), [ctxName]);
 
-  const { eventHandlers, config } = useMemo(
-    () => getCalcPropertyOfProps<TProps>(props),
+  const { eventHandlers, config, uploader } = useMemo(
+    () => getCalcPropertyOfProps<FileUploaderModes.Regular>(props),
     [props],
   );
 
@@ -50,7 +50,7 @@ export const FileUploaderRegular: FC<TProps> = ({
           {...eventHandlers}
         />
         {/* @ts-ignore */}
-        <AdapterFileUploaderRegular class={classNameUploader} ctx-name={CTX_NAME} />
+        <AdapterFileUploaderRegular class={classNameUploader} ctx-name={CTX_NAME} {...uploader} />
       </div>
     </ConditionalSuspense>
   );

packages/react-uploader/src/Uploader/types.ts

@@ -14,29 +14,69 @@ type TExtraPrefixOn<S extends string> = `on${Capitalize<S>}`;
 
 type TPrefixOnAndCamelCase<S extends string> = TExtraPrefixOn<TToCamelCase<S>>;
 
-export type TEventsSchema = {
-  [K in keyof EventMap as TPrefixOnAndCamelCase<K>]: (
-    event: EventMap[K]["detail"],
-  ) => void;
+export enum FileUploaderModes {
+  Regular = "Regular",
+  Minimal = "Minimal",
+  Inline = "Inline"
+}
+
+export type FileUploaderModesKeys = keyof typeof FileUploaderModes;
+
+type CommonProps = {
+  /**
+   * The class name for wrapper over uploader
+   */
+  className?: string;
+
+  /**
+   * The class name for uploader
+   */
+  classNameUploader?: string;
+
+  /**
+   * The unique ID
+   */
+  ctxName?: string;
 };
 
-type TRefUploadCtxProvider = {
-  apiRef?: Ref<InstanceType<UploadCtxProvider>>;
+type FileUploaderRegularProps = {
+  /**
+   * The prop controls the button's visibility in regular mode.
+   */
+  headless?: boolean;
 };
 
-type TPropsWithEvents = Partial<TEventsSchema>;
+type FileUploaderMinimalProps = {};
 
-type TPropsWithConfig = Partial<ConfigType>;
+type FileUploaderInlineProps = {};
 
-type TDefaultProps = {
-  className?: string;
-  classNameUploader?: string;
-  ctxName?: string;
-} & Pick<TPropsConditionalSuspense, "fallback">;
+type UploadCtxPropviderProps = {
+  apiRef?: Ref<InstanceType<UploadCtxProvider>>;
+};
+
+export type EventProps = Partial<TEventsSchema>;
+
+export type ConfigProps = Partial<Omit<ConfigType, "pubkey">> & {
+  pubkey: ConfigType["pubkey"];
+};
 
-export type TProps = TDefaultProps &
-  TRefUploadCtxProvider &
-  TPropsWithEvents &
-  TPropsWithConfig;
+export type TProps<T extends FileUploaderModesKeys> = CommonProps &
+  ConfigProps &
+  EventProps &
+  UploadCtxPropviderProps &
+  Pick<TPropsConditionalSuspense, "fallback"> &
+  (T extends "Regular"
+    ? FileUploaderRegularProps
+    : T extends "Minimal"
+    ? FileUploaderMinimalProps
+    : T extends "Inline"
+    ? FileUploaderInlineProps
+    : never);
 
 export { UploadCtxProvider } from "@uploadcare/file-uploader";
+
+export type TEventsSchema = {
+  [K in keyof EventMap as TPrefixOnAndCamelCase<K>]: (
+    event: EventMap[K]["detail"],
+  ) => void;
+};

packages/react-uploader/src/utils/getCalcPropertyOfProps.ts

@@ -1,17 +1,27 @@
-export const getCalcPropertyOfProps = <T extends Object>(props: T) => {
+import type { FileUploaderModesKeys, TProps } from "../Uploader/types";
+
+export const getCalcPropertyOfProps = <T extends FileUploaderModesKeys>(props: TProps<T>) => {
   const eventHandlers: Record<string, unknown> = {};
   const config: Record<string, unknown> = {};
+  const uploader: Record<string, unknown> = {};
+
+  for (const [prop, value] of Object.entries(props)) {
+    if (prop.startsWith("on")) {
+      eventHandlers[prop] = value;
+      continue;
+    }
 
-  Object.entries(props).forEach(([key, value]) => {
-    if (key.startsWith("on")) {
-      eventHandlers[key] = value;
-    } else {
-      config[key] = value;
+    if (prop === "headless") {
+      uploader[prop] = value;
+      continue;
     }
-  });
+
+    config[prop] = value;
+  }
 
   return {
     eventHandlers,
+    uploader,
     config,
   };
 };