Merge remote-tracking branch 'origin/master' into next

Author: liamross

src/components/FileOrganizer/FileOrganizer.stories.tsx

@@ -35,7 +35,13 @@ const Template: FC<TemplateProps> = ({
   customSizedThumbnail,
 }) => {
   // This is the index organizing function.
-  const [files, setFiles] = useState<FakeFile[]>([]);
+  const [files, setFiles] = useState<FakeFile[]>(() => {
+    const newFiles = [];
+    for (let index = 0; index < numFiles; index++) {
+      newFiles.push(createFile(index));
+    }
+    return newFiles;
+  });
   const handleOnMove = useCallback<NonNullable<FileOrganizerProps<FakeFile>['onMove']>>((fromIndex, toIndex) => {
     setFiles((prev) => {
       if (toIndex < 0 || toIndex >= prev.length) return prev;

src/components/FileOrganizer/FileOrganizer.tsx

@@ -183,8 +183,8 @@ export function FileOrganizer<F extends ObjectWithId>({
 
   // Update size when getWidth ref changes (when hasFiles changes).
   useEffect(() => {
-    if (thumbnailSize) setSize(thumbnailSize);
-    if (files.length === 0) setSize(defaultSize);
+    if (thumbnailSize) return setSize(thumbnailSize);
+    if (files.length === 0) return setSize(defaultSize);
     setSize((prev) => {
       const { width, height } = getSize();
       if (prev.width === width && prev.height === height) return prev;