@transferwise/components 0.0.0-experimental-d6b038b → 0.0.0-experimental-e789c10

package/src/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.tsx

@@ -2,7 +2,7 @@ import { ChevronDown } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import React from 'react';
 
-import { InputGroup } from "../../InputGroup";
+import { InputGroup } from '../../InputGroup';
 import { SelectInputClearButton } from '../ClearButton';
 import { SelectInputTriggerButton } from '../TriggerButton';
 import { SelectInputProps } from '../SelectInput.types';

package/src/inputs/SelectInput/SelectInput.utils.ts

@@ -1,7 +1,6 @@
 import { SelectInputItem, SelectInputOptionItem } from './SelectInput.types';
 
-const MAX_ITEMS_WITHOUT_VIRTUALIZATION = 50;
-export { MAX_ITEMS_WITHOUT_VIRTUALIZATION };
+export const MAX_ITEMS_WITHOUT_VIRTUALIZATION = 50;
 
 /**
  * Converts a string to a normalized, searchable format by:

package/src/inputs/SelectInput/_stories/SelectInput.test.story.tsx

@@ -6,7 +6,8 @@ import { allModes } from '../../../../.storybook/modes';
 import Body from '../../../body';
 import { Field } from '../../../field/Field';
 import { lorem5, lorem500 } from '../../../test-utils';
-import { SelectInput, SelectInputOptionContent, type SelectInputProps, sortByRelevance } from '..';
+import { SelectInput, SelectInputOptionContent, type SelectInputProps } from '..';
+import { sortByRelevance } from '../SelectInput.utils';
 
 const meta = {
   title: 'Forms/SelectInput/Tests',

package/src/inputs/SelectInput/index.ts

@@ -1,8 +1,6 @@
 // Export from the new structure
 export * from './SelectInput';
 export * from './SelectInput.types';
-export * from './SelectInput.utils';
-export * from './SelectInput.contexts';
 
 // Export components directly
 export * from './ClearButton';

package/src/legacylistItem/LegacyListItem.tsx

@@ -14,7 +14,7 @@ export type LegacyListItemProps = {
 };
 
 /**
- * @deprecated Please use `<ListItem />` instead.
+ * @deprecated Use `<ListItem />` instead.
  * @deprecatedSince 46.104.0
  * @see [Source](../listItem/ListItem.tsx)
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)

package/src/list/List.tsx

@@ -2,6 +2,7 @@ import { clsx } from 'clsx';
 import React from 'react';
 
 export interface ListProps {
+  /** @default 'ul' */
   as?: 'ul' | 'ol' | 'div';
   className?: string;
   children?: React.ReactNode;

package/src/listItem/Button/ListItemButton.tsx

@@ -13,6 +13,8 @@ export type ListItemButtonProps = Omit<
    */
   partiallyInteractive?: boolean;
   addonStart?: ButtonAddonIcon;
+  /** @default 'secondary-neutral' */
+  priority?: NewButtonProps['priority'];
 };
 
 /**

package/src/listItem/IconButton/ListItemIconButton.tsx

@@ -6,10 +6,12 @@ import { ListItemContext } from '../ListItemContext';
 
 export type ListItemIconButtonProps = Pick<
   IconButtonProps,
-  'priority' | 'type' | 'onClick' | 'href' | 'target' | 'aria-label'
+  'type' | 'onClick' | 'href' | 'target' | 'aria-label'
 > & {
   children: ReactNode;
   partiallyInteractive?: boolean;
+  /** @default 'minimal' */
+  priority?: IconButtonProps['priority'];
 };
 
 /**

package/src/listItem/Image/ListItemImage.tsx

@@ -6,10 +6,12 @@ import { ListItemMediaSize } from '../ListItemContext';
 export type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt' | 'role'> & {
   /**
    * The size of square container for the image, matching available avatar sizes.
+   * @default 48
    */
   size?: ListItemMediaSize;
   /**
    * When unset, it will force `role="presentation"` on the image. Otherwise, the image will use its implicit img role.
+   * @default ''
    */
   alt?: string;
 };

package/src/listItem/ListItem.tsx

@@ -45,6 +45,7 @@ export type ListItemControlProps =
   | ListItemSwitchProps;
 
 export type ListItemProps = {
+  /** @default 'li' */
   as?: 'li' | 'div';
   /**
    * Swaps vertical hierarchy of title and subtitle and their corresponding right values.
@@ -88,6 +89,7 @@ export type ListItemProps = {
    * `<ListItem.Navigation />`, <br/>
    * `<ListItem.Radio />`, or
    * `<ListItem.Switch />`
+   * @default null
    */
   control?: ReactNode;
   /**

package/src/loader/Loader.tsx

@@ -4,19 +4,23 @@ import { useEffect, useState } from 'react';
 
 import { Size, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge, SizeExtraLarge } from '../common';
 
-// TODO: We gracefully depracated xs, lg and xl -- remove these as part of a future breaking change to this component
+// TODO: We gracefully deprecated xs, lg and xl -- remove these as part of a future breaking change to this component
 type DeprecatedSize = SizeExtraSmall | SizeLarge | SizeExtraLarge;
 
 type SizeType = SizeSmall | SizeMedium;
 
 export type LoaderProps = {
   /**
-   * @deprecated use `size` instead
+   * @deprecated Use `size` instead.
+   * @default false
    */
   small?: boolean;
+  /** @default 'md' */
   size?: SizeType | DeprecatedSize;
+  /** @default false */
   displayInstantly?: boolean;
   // TODO: refactor in favor of prop from `CommonProps` type
+  /** @default {} */
   classNames?: Record<string, string>;
   'data-testid'?: string;
 };

package/src/logo/Logo.tsx

@@ -35,7 +35,10 @@ export interface LogoProps {
   className?: string;
   /** If true, will use dark colours for dark on light theme */
   inverse?: boolean;
-  /** What type of logo to display */
+  /**
+   * What type of logo to display
+   * @default 'WISE'
+   */
   type?: `${LogoType}`;
 }
 

package/src/modal/Modal.tsx

@@ -30,15 +30,21 @@ import closeBtnMessages from '../common/closeButton/CloseButton.messages';
 const TRANSITION_DURATION_IN_MILLISECONDS = 150;
 
 export type ModalProps = CommonProps & {
+  /** @default null */
   title?: ReactNode;
   body: ReactNode;
+  /** @default null */
   footer?: ReactNode;
+  /** @default 'md' */
   size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;
   onClose: () => void;
   onUnmount?: () => void;
   open: boolean;
+  /** @default 'viewport' */
   scroll?: ScrollContent | ScrollViewport;
+  /** @default 'center' */
   position?: PositionTop | PositionCenter;
+  /** @default false */
   disableDimmerClickToClose?: boolean;
 };
 

package/src/navigationOption/NavigationOption.tsx

@@ -9,7 +9,7 @@ import { OptionProps, ReferenceType } from '../common/Option/Option';
 export type NavigationOptionProps = OptionProps;
 
 /**
- * @deprecated Please use `<ListItem />` instead.
+ * @deprecated Use `<ListItem />` instead.
  * @deprecatedSince 46.104.0
  * @see [Source](../listItem/ListItem.tsx)
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)

package/src/navigationOptionsList/NavigationOptionsList.tsx

@@ -6,7 +6,7 @@ export interface NavigationOptionListProps {
 }
 
 /**
- * @deprecated Please use `<List />` and `<ListItem />` instead.
+ * @deprecated Use `<List />` and `<ListItem />` instead.
  * @deprecatedSince 46.104.0
  * @see [List source](../list/List.tsx)
  * @see [ListItem source](../listItem/ListItem.tsx)

package/src/nudge/Nudge.tsx

@@ -46,7 +46,7 @@ type MediaNameType =
   | `${Assets.BACKPACK}`;
 
 type BaseProps = {
-  /** @deprecated use `mediaName` property instead */
+  /** @deprecated Use `mediaName` property instead. */
   media?: ReactNode;
   /** Media name  */
   mediaName?: MediaNameType;

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -31,11 +31,17 @@ export interface PhoneNumberInputProps {
   onFocus?: React.FocusEventHandler<HTMLInputElement>;
   onBlur?: () => void;
   countryCode?: string;
+  /** @default 'Prefix' */
   searchPlaceholder?: string;
+  /** @default 'md' */
   size?: SizeSmall | SizeMedium | SizeLarge;
   placeholder?: string;
+  /** @default {} */
   selectProps?: Partial<SelectInputProps<string | null>>;
-  /** List of iso3 codes of countries to remove from the list */
+  /**
+   * List of iso3 codes of countries to remove from the list
+   * @default []
+   */
   disabledCountries?: readonly string[];
 }
 

package/src/popover/Popover.tsx

@@ -26,6 +26,7 @@ export interface PopoverProps {
   title?: React.ReactNode;
   /** Screen-reader-friendly title. Must be provided if `title` prop is not set. */
   'aria-label'?: string;
+  /** @default 'right' */
   preferredPlacement?: PopoverPreferredPlacement;
   content: React.ReactNode;
   onClose?: () => void;

package/src/processIndicator/ProcessIndicator.tsx

@@ -11,7 +11,9 @@ export type ProcessIndicatorStatus =
   `${Status.PROCESSING | Status.FAILED | Status.SUCCEEDED | Status.HIDDEN}`;
 
 export interface ProcessIndicatorProps {
+  /** @default 'processing' */
   status?: ProcessIndicatorStatus;
+  /** @default 'sm' */
   size?: 'xxs' | `${Size.EXTRA_SMALL | Size.SMALL | Size.EXTRA_LARGE}`;
   className?: string;
   'data-testid'?: string;

package/src/prompt/ActionPrompt/ActionPrompt.tsx

@@ -16,6 +16,7 @@ import { useScreenSize } from '../../common/hooks/useScreenSize';
 export type ActionPromptProps = {
   title: ReactNode;
   description?: ReactNode;
+  /** @default {} */
   media?: {
     imgSrc?: string;
     avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {
@@ -32,7 +33,13 @@ export type ActionPromptProps = {
     label: ButtonProps['children'];
   };
   'aria-label'?: AriaAttributes['aria-label'];
-} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;
+} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'onDismiss'> & {
+    /**
+     * The sentiment determines the colour scheme
+     * @default 'neutral'
+     */
+    sentiment?: PrimitivePromptProps['sentiment'];
+  };
 
 /**
  * Use an action prompt for optional feedback that doesn't require immediate action, such as feature upsells, warnings, or suggestions. These prompts are typically used outside of core product flows (e.g., Launchpad, Recipient, or Transaction screens) and can be addressed at the user's convenience.

package/src/prompt/InlinePrompt/InlinePrompt.tsx

@@ -9,6 +9,7 @@ import { PrimitivePrompt } from '../PrimitivePrompt';
 export type InlinePromptProps = {
   /**
    * The sentiment determines the colour scheme
+   * @default Sentiment.POSITIVE
    */
   sentiment?:
     | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`

package/src/radioOption/RadioOption.tsx

@@ -17,7 +17,7 @@ export interface RadioOptionProps<T extends string | number = string>
 }
 
 /**
- * @deprecated Please use `<ListItem />` instead.
+ * @deprecated Use `<ListItem />` instead.
  * @deprecatedSince 46.104.0
  * @see [Source](../listItem/ListItem.tsx)
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)

package/src/select/Select.tsx

@@ -106,7 +106,9 @@ export interface SelectProps {
   inverse?: boolean;
   dropdownRight?: `${Size.EXTRA_SMALL | Size.SMALL | Size.MEDIUM | Size.LARGE | Size.EXTRA_LARGE}`;
   dropdownWidth?: `${Size.SMALL | Size.MEDIUM | Size.LARGE}`;
+  /** @default 'md' */
   size?: `${Size.SMALL | Size.MEDIUM | Size.LARGE}`;
+  /** @default true */
   block?: boolean;
   selected?: SelectOptionItem;
   /**
@@ -116,8 +118,10 @@ export interface SelectProps {
    */
   search?: boolean | ((option: SelectItemWithPlaceholder, searchValue: string) => boolean);
   options: SelectItem[];
+  /** @default '' */
   searchValue?: string;
   searchPlaceholder?: string;
+  /** @default {} */
   classNames?: Record<string, string>;
   dropdownUp?: boolean;
   buttonProps?: Extract<ButtonProps, { as?: 'button' }>;

package/src/statusIcon/StatusIcon.tsx

@@ -11,7 +11,7 @@ import { useMedia } from '../common/hooks/useMedia';
 import messages from './StatusIcon.messages';
 
 /**
- * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead
+ * @deprecated Use `16 | 24 | 32 | 40 | 48 | 56 | 72` instead.
  */
 type LegacySizes = SizeSmall | SizeMedium | SizeLarge;
 
@@ -19,7 +19,9 @@ export type StatusIconSentiment = Sentiment | Status.PENDING;
 
 export type StatusIconProps = {
   id?: string;
+  /** @default 'neutral' */
   sentiment?: `${StatusIconSentiment}`;
+  /** @default 40 */
   size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;
   /**
    * Override for the sentiment's-derived, default, accessible

package/src/summary/Summary.tsx

@@ -47,6 +47,7 @@ export interface Props {
   action?: AlertAction;
   /**
    * Decides which html element should wrap the Summary
+   * @default 'div'
    */
   as?: ElementType;
   /**
@@ -54,7 +55,8 @@ export interface Props {
    */
   className?: string;
   /**
-   * @deprecated please use description instead
+   * @deprecated Use `description` instead.
+   * @default null
    */
   content?: ReactNode;
   /**
@@ -62,7 +64,7 @@ export interface Props {
    */
   description?: ReactNode;
   /**
-   * @deprecated please use info instead
+   * @deprecated Use `info` instead.
    */
   help?: {
     content: ReactNode;
@@ -73,7 +75,8 @@ export interface Props {
    */
   info?: Pick<InfoProps, 'aria-label' | 'content' | 'onClick' | 'presentation' | 'title'>;
   /**
-   * @deprecated please use icon instead
+   * @deprecated Use `icon` instead.
+   * @default null
    */
   illustration?: ReactNode;
   /**
@@ -91,7 +94,7 @@ export interface Props {
 }
 
 /**
- * @deprecated Please use `<ListItem />` instead.
+ * @deprecated Use `<ListItem />` instead.
  * @deprecatedSince 46.104.0
  * @see [Source](../listItem/ListItem.tsx)
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)

package/src/switchOption/SwitchOption.tsx

@@ -27,7 +27,7 @@ const stopPropagation = (event?: MouseEvent<HTMLSpanElement>) => {
 };
 
 /**
- * @deprecated Please use `<ListItem />` instead.
+ * @deprecated Use `<ListItem />` instead.
  * @deprecatedSince 46.104.0
  * @see [Source](../listItem/ListItem.tsx)
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)

package/src/tabs/Tabs.tsx

@@ -28,8 +28,10 @@ export interface TabsProps {
   tabs: TabItem[];
   selected: number;
   name: string;
+  /** @default true */
   changeTabOnSwipe?: boolean;
   className?: string;
+  /** @default 'block' */
   headerWidth?: `${Width}`;
   onTabSelect: (index: number) => void;
 }

package/src/typeahead/Typeahead.tsx

@@ -40,7 +40,7 @@ export interface TypeaheadProps<T> extends Partial<WrappedComponentProps> {
   name: string;
   addon?: ReactNode;
   /**
-   * @deprecated Please use [`Field`](?path=/docs/forms-field--docs) component and its `message` and `sentiment` props instead.
+   * @deprecated Use [`Field`](?path=/docs/forms-field--docs) component and its `message` and `sentiment` props instead.
    * @deprecated `error`, `info` and `success` are deprecated as alert types and will be soon removed.
    */
   alert?: {
@@ -51,24 +51,36 @@ export interface TypeaheadProps<T> extends Partial<WrappedComponentProps> {
       | `${Sentiment.INFO}`
       | `${Sentiment.SUCCESS}`;
   };
+  /** @default false */
   allowNew?: boolean;
+  /** @default true */
   autoFillOnBlur?: boolean;
+  /** @default false */
   autoFocus?: boolean;
+  /** @default [] */
   chipSeparators?: readonly string[];
+  /** @default true */
   clearable?: boolean;
   footer?: ReactNode;
+  /** @default [] */
   initialValue?: readonly TypeaheadOption<T>[];
+  /** @default 'new-password' */
   inputAutoComplete?: string;
   maxHeight?: number;
+  /** @default 3 */
   minQueryLength?: number;
   placeholder?: string;
+  /** @default false */
   multiple?: boolean;
   options: readonly TypeaheadOption<T>[];
+  /** @default 200 */
   searchDelay?: number;
+  /** @default true */
   showSuggestions?: boolean;
+  /** @default true */
   showNewEntry?: boolean;
+  /** @default 'md' */
   size?: SizeMedium | SizeLarge;
-
   onBlur?: () => void;
   onChange: (options: TypeaheadOption<T>[]) => void;
   onFocus?: () => void;

package/src/upload/Upload.tsx

@@ -18,6 +18,7 @@ export enum UploadStep {
 }
 
 export interface UploadProps extends WrappedComponentProps {
+  /** @default 300 */
   animationDelay?: number;
   csButtonText?: string;
   csFailureText?: string;
@@ -39,19 +40,24 @@ export interface UploadProps extends WrappedComponentProps {
    */
   maxSize?: number | null;
   psButtonText?: string;
+  /** @default false */
   psButtonDisabled?: boolean;
   psProcessingText?: string;
+  /** @default 'md' */
   size?: `${Size.SMALL | Size.MEDIUM | Size.LARGE}`;
   /**
    * You can provide multiple rules separated by comma, e.g.: "application/pdf,image/*".
    * Using "*" will allow every file type to be uploaded.
+   * @default 'image/*'
    */
   usAccept?: string;
   usButtonText?: string;
   usButtonRetryText?: string;
+  /** @default false */
   usDisabled?: boolean;
   usDropMessage?: string;
   usHelpImage?: React.ReactNode;
+  /** @default '' */
   usLabel?: string;
   usPlaceholder?: string;
   /**

package/src/uploadInput/UploadInput.tsx

@@ -18,11 +18,13 @@ import UploadItem, { UploadItemProps } from './uploadItem/UploadItem';
 export type UploadInputProps = {
   /**
    * List of already existing, failed or in progress files
+   * @default []
    */
   files?: readonly UploadedFile[];
 
   /**
    * The key of the file in the returned FormData object (default: file)
+   * @default 'file'
    */
   fileInputName?: string;
 
@@ -94,10 +96,16 @@ export type UploadInputProps = {
    * Error message to show when files over allowed size limit are uploaded
    */
   sizeLimitErrorMessage?: string;
-} & Pick<
-  UploadButtonProps,
-  'disabled' | 'multiple' | 'fileTypes' | 'sizeLimit' | 'description' | 'id' | 'uploadButtonTitle'
-> & { onDownload?: UploadItemProps['onDownload'] } & CommonProps;
+} & {
+  /** @default false */
+  multiple?: UploadButtonProps['multiple'];
+  /** @default ['.pdf,application/pdf', '.jpg,.jpeg,image/jpeg', '.png,image/png'] */
+  fileTypes?: UploadButtonProps['fileTypes'];
+  /** @default 5000 */
+  sizeLimit?: UploadButtonProps['sizeLimit'];
+} & Pick<UploadButtonProps, 'disabled' | 'description' | 'id' | 'uploadButtonTitle'> & {
+    onDownload?: UploadItemProps['onDownload'];
+  } & CommonProps;
 
 /**
  * Interface representing a reference to an UploadItem component.

package/src/withDisplayFormat/WithDisplayFormat.tsx

@@ -49,12 +49,15 @@ export interface WithDisplayFormatProps<T extends TextElementProps = TextElement
   | 'required'
   | 'inputMode'
 > {
+  /** @default '' */
   value?: string;
+  /** @default '' */
   displayPattern: string;
   /**
    * autocomplete hides our form help so we need to disable it when help text
    * is present. Chrome ignores autocomplete=off, the only way to disable it is
    * to provide an 'invalid' value, for which 'disabled' serves.
+   * @default 'off'
    */
   autoComplete?: TextElementProps['autoComplete'] | 'disabled';
   onChange?: (value: string) => void;