@os-design/upload 1.0.291 → 1.0.293

package/dist/ImageUpload/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ImageUpload/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,QAAQ,EAId,MAAM,mBAAmB,CAAC;AAQ3B,OAAO,EAAE,KAAK,MAAM,EAAe,MAAM,gBAAgB,CAAC;AAC1D,OAAsB,EACpB,KAAK,iBAAiB,EACvB,MAAM,0BAA0B,CAAC;AAElC,KAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,cAAc,GAAG,UAAU,GAAG,KAAK,CACpC,CAAC;AACF,MAAM,WAAW,gBAAiB,SAAQ,WAAW,EAAE,QAAQ;IAC7D;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CACzC;AAsBD,UAAU,YAAY;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;CACnB;AACD,eAAO,MAAM,OAAO;;SAqJwC,MAAO,WAAW;wHA/H7E,CAAC;AAgGF;;GAEG;AACH,QAAA,MAAM,WAAW,6GAgGhB,CAAC;AAIF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ImageUpload/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,QAAQ,EAId,MAAM,mBAAmB,CAAC;AAI3B,OAAO,EAAE,KAAK,MAAM,EAAe,MAAM,gBAAgB,CAAC;AAC1D,OAAsB,EACpB,KAAK,iBAAiB,EACvB,MAAM,0BAA0B,CAAC;AAElC,KAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,cAAc,GAAG,UAAU,GAAG,KAAK,CACpC,CAAC;AACF,MAAM,WAAW,gBAAiB,SAAQ,WAAW,EAAE,QAAQ;IAC7D;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CACzC;AAsBD,UAAU,YAAY;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;CACnB;AACD,eAAO,MAAM,OAAO;;SA8IhB,MAAI,WAAW;wHAxHlB,CAAC;AAgGF;;GAEG;AACH,QAAA,MAAM,WAAW,6GAkGhB,CAAC;AAIF,eAAe,WAAW,CAAC"}

package/dist/ImageUpload/index.js

@@ -4,7 +4,7 @@ import { Button, Image } from '@os-design/core';
 import { Delete, Picture } from '@os-design/icons';
 import { resetFocusStyles, sizeStyles, transitionStyles } from '@os-design/styles';
 import { ThemeOverrider, clr } from '@os-design/theming';
-import { isTouchDevice, omitEmotionProps, useForwardedState } from '@os-design/utils';
+import { isTouchDevice, omitEmotionProps } from '@os-design/utils';
 import { forwardRef, useCallback, useMemo } from 'react';
 import { useDropzone } from 'react-dropzone';
 import defaultLocale from './utils/defaultLocale.js';
@@ -121,16 +121,18 @@ const ImageUpload = /*#__PURE__*/forwardRef(({
   locale = defaultLocale,
   value,
   defaultValue,
-  onChange,
+  onChange = () => {},
   size,
   ...rest
 }, ref) => {
+  // Do not use useForwardedState here!
+  // Edge case:
+  // 1. Component has a photo: url is specified, value is undefined (inner value is used).
+  // 2. The user deletes the photo: url is specified, value is null (inner value is null)
+  // 3. The user chooses another photo: url is specified, value is a file (inner value is not used).
+  // 4. The user is uploaded the photo: url is changed, value is undefined (inner value is used, but it's null).
+
   const touchDevice = useMemo(() => isTouchDevice(), []);
-  const [forwardedValue, setForwardedValue] = useForwardedState({
-    value,
-    defaultValue,
-    onChange
-  });
   const {
     getRootProps,
     getInputProps,
@@ -138,18 +140,18 @@ const ImageUpload = /*#__PURE__*/forwardRef(({
   } = useDropzone({
     accept,
     multiple: false,
-    onDrop: ([file]) => setForwardedValue(file)
+    onDrop: ([file]) => onChange(file)
   });
   const source = useMemo(() => {
-    if (forwardedValue === null) return null; // If the user select an image
-    if (forwardedValue) return URL.createObjectURL(forwardedValue); // If the image already exists
+    if (value === null) return null; // If the user select an image
+    if (value) return URL.createObjectURL(value); // If the image already exists
     if (url) return url;
     return null;
-  }, [forwardedValue, url]);
+  }, [value, url]);
   const hasImage = useMemo(() => !!source, [source]);
   const renderImage = useCallback(() => {
     if (!source) return null;
-    if (typeof forwardedValue === 'object' && forwardedValue !== null) {
+    if (typeof value === 'object' && value !== null) {
       return /*#__PURE__*/_jsx(LocalImage, {
         src: source
       });
@@ -157,7 +159,7 @@ const ImageUpload = /*#__PURE__*/forwardRef(({
     return /*#__PURE__*/_jsx(RemoteImage, {
       url: source
     });
-  }, [forwardedValue, source]);
+  }, [value, source]);
   return /*#__PURE__*/_jsxs(Container, {
     isDragActive: isDragActive,
     hasImage: hasImage,
@@ -171,7 +173,7 @@ const ImageUpload = /*#__PURE__*/forwardRef(({
       hasImage: hasImage,
       ...getRootProps({
         onKeyDown: e => {
-          if (e.key === 'Backspace') setForwardedValue(null);
+          if (e.key === 'Backspace') onChange(null);
         }
       }) // eslint-disable-line @typescript-eslint/no-explicit-any
       ,
@@ -190,7 +192,7 @@ const ImageUpload = /*#__PURE__*/forwardRef(({
             type: "ghost",
             wide: "never",
             onClick: e => {
-              setForwardedValue(null);
+              onChange(null);
               e.stopPropagation();
             },
             children: /*#__PURE__*/_jsx(Delete, {})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/upload",
-  "version": "1.0.291",
+  "version": "1.0.293",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "type": "module",
@@ -29,7 +29,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@os-design/core": "^1.0.288",
+    "@os-design/core": "^1.0.289",
     "@os-design/icons": "^1.0.69",
     "@os-design/styles": "^1.0.66",
     "@os-design/theming": "^1.0.62",
@@ -46,5 +46,5 @@
     "react": "18",
     "react-dom": "18"
   },
-  "gitHead": "bf592e60182b1196b4b9435c05af4af7167c6ad7"
+  "gitHead": "6e6cab51eac9762715864797a4c6df89c0573912"
 }

package/src/ImageUpload/index.tsx

@@ -9,11 +9,7 @@ import {
   transitionStyles,
 } from '@os-design/styles';
 import { ThemeOverrider, clr } from '@os-design/theming';
-import {
-  isTouchDevice,
-  omitEmotionProps,
-  useForwardedState,
-} from '@os-design/utils';
+import { isTouchDevice, omitEmotionProps } from '@os-design/utils';
 import { forwardRef, useCallback, useMemo } from 'react';
 import { type Accept, useDropzone } from 'react-dropzone';
 import defaultLocale, {
@@ -210,41 +206,43 @@ const ImageUpload = forwardRef<HTMLDivElement, ImageUploadProps>(
       locale = defaultLocale,
       value,
       defaultValue,
-      onChange,
+      onChange = () => {},
       size,
       ...rest
     },
     ref
   ) => {
+    // Do not use useForwardedState here!
+    // Edge case:
+    // 1. Component has a photo: url is specified, value is undefined (inner value is used).
+    // 2. The user deletes the photo: url is specified, value is null (inner value is null)
+    // 3. The user chooses another photo: url is specified, value is a file (inner value is not used).
+    // 4. The user is uploaded the photo: url is changed, value is undefined (inner value is used, but it's null).
+
     const touchDevice = useMemo(() => isTouchDevice(), []);
-    const [forwardedValue, setForwardedValue] = useForwardedState({
-      value,
-      defaultValue,
-      onChange,
-    });
 
     const { getRootProps, getInputProps, isDragActive } = useDropzone({
       accept,
       multiple: false,
-      onDrop: ([file]) => setForwardedValue(file),
+      onDrop: ([file]) => onChange(file),
     });
 
     const source = useMemo(() => {
-      if (forwardedValue === null) return null; // If the user select an image
-      if (forwardedValue) return URL.createObjectURL(forwardedValue); // If the image already exists
+      if (value === null) return null; // If the user select an image
+      if (value) return URL.createObjectURL(value); // If the image already exists
       if (url) return url;
       return null;
-    }, [forwardedValue, url]);
+    }, [value, url]);
 
     const hasImage = useMemo(() => !!source, [source]);
 
     const renderImage = useCallback(() => {
       if (!source) return null;
-      if (typeof forwardedValue === 'object' && forwardedValue !== null) {
+      if (typeof value === 'object' && value !== null) {
         return <LocalImage src={source} />;
       }
       return <RemoteImage url={source} />;
-    }, [forwardedValue, source]);
+    }, [value, source]);
 
     return (
       <Container
@@ -263,7 +261,7 @@ const ImageUpload = forwardRef<HTMLDivElement, ImageUploadProps>(
           {
             ...getRootProps({
               onKeyDown: (e) => {
-                if (e.key === 'Backspace') setForwardedValue(null);
+                if (e.key === 'Backspace') onChange(null);
               },
             } as any) // eslint-disable-line @typescript-eslint/no-explicit-any
           }
@@ -285,7 +283,7 @@ const ImageUpload = forwardRef<HTMLDivElement, ImageUploadProps>(
                   type='ghost'
                   wide='never'
                   onClick={(e) => {
-                    setForwardedValue(null);
+                    onChange(null);
                     e.stopPropagation();
                   }}
                 >