@transferwise/components 0.0.0-experimental-301f7d4 → 0.0.0-experimental-5397040

package/src/inputs/SelectInput.tsx

@@ -14,7 +14,7 @@ import {
   useState,
 } from 'react';
 import { useIntl } from 'react-intl';
-import { Virtualizer, type VirtualizerHandle } from 'virtua';
+import { Virtualizer } from 'virtua';
 
 import { useEffectEvent } from '../common/hooks/useEffectEvent';
 import { useScreenSize } from '../common/hooks/useScreenSize';
@@ -553,7 +553,6 @@ function SelectInputOptions<T = string>({
   listBoxLabelledBy,
 }: SelectInputOptionsProps<T>) {
   const intl = useIntl();
-  const virtualiserHandlerRef = useRef<VirtualizerHandle>(null);
   const controllerRef = filterable ? searchInputRef : listboxRef;
   const [initialRender, setInitialRender] = useState(true);
 
@@ -712,24 +711,16 @@ function SelectInputOptions<T = string>({
             filteredItems.map((_, index) => getItemNode(index))
           ) : (
             <Virtualizer
-              ref={virtualiserHandlerRef}
               key={needle}
               count={filteredItems.length}
               keepMounted={mountedIndexes}
               scrollRef={listboxRef} // `VList` doesn't expose this
-              onScroll={async () => {
-                if (!virtualiserHandlerRef.current) return;
-
-                const startIndex = virtualiserHandlerRef.current.findStartIndex();
-                const endIndex = virtualiserHandlerRef.current.findStartIndex();
-
+              onRangeChange={(startIndex, endIndex) => {
                 setMountedIndexes((prevMountedIndexes) => {
                   const indexes = new Set(prevMountedIndexes);
-
                   for (let index = startIndex; index <= endIndex; index += 1) {
                     indexes.add(index);
                   }
-
                   return [...indexes].sort((a, b) => a - b);
                 });
               }}

package/src/markdown/Markdown.tsx

@@ -1,5 +1,4 @@
-import * as commonmark from 'commonmark';
-import type { Node as MarkdownNode } from 'commonmark';
+import commonmark, { Node as MarkdownNode } from 'commonmark';
 
 import { MarkdownNodeType } from '../common';
 import { logActionRequired } from '../utilities';

package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.story.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import PrimitiveAnchor from '..';
 
-const meta: Meta<typeof PrimitiveAnchor> = {
+export default {
   component: PrimitiveAnchor,
   title: 'Primitives/Anchor',
   args: {
@@ -16,8 +16,7 @@ const meta: Meta<typeof PrimitiveAnchor> = {
     onMouseLeave: fn(),
   },
   tags: ['autodocs'],
-};
-export default meta;
+} satisfies Meta<typeof PrimitiveAnchor>;
 
 type Story = StoryObj<typeof PrimitiveAnchor>;
 

package/src/primitives/PrimitiveButton/stories/PrimitiveButton.story.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import PrimitiveButton from '..';
 
-const meta: Meta<typeof PrimitiveButton> = {
+export default {
   component: PrimitiveButton,
   title: 'Primitives/Button',
   args: {
@@ -15,8 +15,7 @@ const meta: Meta<typeof PrimitiveButton> = {
     onMouseLeave: fn(),
   },
   tags: ['autodocs'],
-};
-export default meta;
+} satisfies Meta<typeof PrimitiveButton>;
 
 type Story = StoryObj<typeof PrimitiveButton>;
 

package/src/radioGroup/RadioGroup.story.tsx

@@ -14,7 +14,7 @@ const meta = {
 export default meta;
 type Story<T extends string | number = string> = StoryObj<RadioGroupProps<T>>;
 
-export const Basic: Story = {
+export const Basic = {
   args: {
     selectedValue: 'radio-2',
     name: 'radio-group',
@@ -45,7 +45,7 @@ export const WithAvatars = {
   ...Basic,
   args: {
     ...Basic.args,
-    radios: Basic?.args?.radios?.map(
+    radios: Basic.args.radios.map(
       (radio) =>
         ({
           ...radio,

package/src/typeahead/Typeahead.story.tsx

@@ -22,7 +22,7 @@ const validateOptionAsEmail = (option: TypeaheadOption) => {
   );
 };
 
-const meta: Meta<typeof Typeahead> = {
+export default {
   component: Typeahead,
   title: 'Forms/Typeahead',
   args: {
@@ -54,8 +54,7 @@ const meta: Meta<typeof Typeahead> = {
       options: [Size.MEDIUM, Size.LARGE],
     },
   },
-};
-export default meta;
+} satisfies Meta<typeof Typeahead>;
 
 export const Basic: Story = {
   render: function Render(args) {

package/src/upload/Upload.story.tsx

@@ -22,7 +22,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Basic: Story = {
+export const Basic = {
   args: {
     maxSize: MAX_SIZE_DEFAULT,
     usAccept: 'image/*',

package/src/upload/Upload.tsx

@@ -12,11 +12,6 @@ import { postData, asyncFileRead, isSizeValid, isTypeValid, getFileType } from '
 import { PostDataFetcher, PostDataHTTPOptions, ResponseError } from './utils/postData/postData';
 import { ProcessIndicatorStatus } from '../processIndicator';
 
-/*
- * This delay is required for the isError/isSuccess to be fired after isProcessing so the processIndicator, will be
- * rendered first and then updated with the right status.
- */
-const ANIMATION_FIX = 10;
 export const MAX_SIZE_DEFAULT = 5000000;
 
 export enum UploadStep {
@@ -85,7 +80,7 @@ export class Upload extends Component<UploadProps, UploadState> {
   declare props: UploadProps & Required<Pick<UploadProps, keyof typeof Upload.defaultProps>>;
 
   static defaultProps = {
-    animationDelay: 700,
+    animationDelay: 300,
     maxSize: MAX_SIZE_DEFAULT,
     psButtonDisabled: false,
     size: 'md',
@@ -160,41 +155,6 @@ export class Upload extends Component<UploadProps, UploadState> {
     }
   }
 
-  onAnimationCompleted = async (status: ProcessIndicatorStatus) => {
-    const { response, isProcessing, fileName } = this.state;
-    const { animationDelay } = this.props;
-
-    if (isProcessing && status === 'succeeded') {
-      const { onSuccess } = this.props;
-      this.timeouts = window.setTimeout(() => {
-        this.setState(
-          {
-            isProcessing: false,
-            isComplete: true,
-          },
-          onSuccess
-            ? () => {
-                onSuccess(response as string | Response, fileName);
-              }
-            : undefined,
-        );
-      }, animationDelay);
-    }
-
-    if (isProcessing && status === 'failed') {
-      const { onFailure } = this.props;
-      this.timeouts = window.setTimeout(() => {
-        this.setState(
-          {
-            isProcessing: false,
-            isComplete: true,
-          },
-          onFailure ? () => onFailure(response) : undefined,
-        );
-      }, animationDelay);
-    }
-  };
-
   asyncPost = async (file: File) => {
     const { httpOptions, fetcher } = this.props;
     if (httpOptions == null) {
@@ -210,14 +170,34 @@ export class Upload extends Component<UploadProps, UploadState> {
   };
 
   asyncResponse = (response: unknown, type: 'success' | 'error') => {
-    // Gives time to the animation callback to fire.
-    this.timeouts = window.setTimeout(() => {
-      this.setState({
+    // Set response state but don't trigger completion yet
+    this.setState(
+      {
         response,
         isError: type === 'error',
         isSuccess: type === 'success',
-      });
-    }, ANIMATION_FIX);
+      },
+      () => {
+        // Only after state is updated, schedule the completion
+        window.clearTimeout(this.timeouts);
+        this.timeouts = window.setTimeout(() => {
+          this.setState(
+            {
+              isProcessing: false,
+              isComplete: true,
+            },
+            () => {
+              // Call callbacks after state is fully updated
+              if (type === 'success') {
+                this.props.onSuccess?.(response as string | Response, this.state.fileName);
+              } else {
+                this.props.onFailure?.(response);
+              }
+            },
+          );
+        }, this.props.animationDelay);
+      },
+    );
   };
 
   handleOnClear: React.MouseEventHandler<HTMLButtonElement> = (event) => {
@@ -395,8 +375,6 @@ export class Upload extends Component<UploadProps, UploadState> {
           />
         )}
 
-        {/* Starts render the step when isSuccess is true so markup is there when css transition kicks in
-      css transition to work properly */}
         {(isSuccess || isComplete) && !isError && (
           <CompleteStep
             fileName={fileName}
@@ -443,8 +421,16 @@ export class Upload extends Component<UploadProps, UploadState> {
             psButtonText={psButtonText || intl.formatMessage(messages.psButtonText)}
             psProcessingText={psProcessingText || intl.formatMessage(messages.psProcessingText)}
             psButtonDisabled={psButtonDisabled}
-            onAnimationCompleted={async (status) => this.onAnimationCompleted(status)}
             onClear={(event) => this.handleOnClear(event)}
+            onAnimationCompleted={() => {
+              if (isSuccess || isError) {
+                window.clearTimeout(this.timeouts);
+                this.setState({
+                  isProcessing: false,
+                  isComplete: true,
+                });
+              }
+            }}
           />
         )}
         {!isProcessing && (