@transferwise/components 45.3.0 → 45.5.0

package/build/types/checkbox/Checkbox.story.d.ts

@@ -0,0 +1,54 @@
+/// <reference types="react" />
+import { StoryObj } from '@storybook/react';
+import Checkbox from './Checkbox';
+declare const _default: {
+    component: {
+        ({ id, checked, required, disabled, readOnly, label, className, secondary, onChange, onFocus, onBlur, }: {
+            id: any;
+            checked: any;
+            required: any;
+            disabled: any;
+            readOnly: any;
+            label: any;
+            className: any;
+            secondary: any;
+            onChange: any;
+            onFocus: any;
+            onBlur: any;
+        }): JSX.Element;
+        propTypes: {
+            id: any;
+            checked: any;
+            required: any;
+            disabled: any;
+            readOnly: any;
+            label: any;
+            secondary: any;
+            onFocus: any;
+            onChange: any;
+            onBlur: any;
+            className: any;
+        };
+        defaultProps: {
+            id: null;
+            checked: boolean;
+            required: boolean;
+            disabled: boolean;
+            readOnly: boolean;
+            secondary: null;
+            onFocus: null;
+            onBlur: null;
+            className: undefined;
+        };
+    };
+    title: string;
+    args: {
+        label: string;
+    };
+    tags: string[];
+};
+export default _default;
+type Story = StoryObj<typeof Checkbox>;
+export declare const Basic: Story;
+export declare const Multiple: Story;
+export declare const MultipleMobile: Story;

package/build/types/circularButton/CircularButton.d.ts

@@ -9,7 +9,7 @@ export interface CircularButtonProps {
     children: string;
     disabled?: boolean;
     icon: React.ReactElement<any>;
-    onClick: (...args: any[])=>any;
+    onClick?: (...args: any[])=>any;
     priority?: CircularButtonPriority;
     type?: CircularButtonType;
 }

package/build/types/common/bottomSheet/BottomSheet.story.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { StoryObj } from '@storybook/react';
+import BottomSheet from './BottomSheet';
+declare const _default: {
+    component: (props: {
+        onClose?: ((event: Event | import("react").SyntheticEvent<Element, Event>) => void) | undefined;
+        open: boolean;
+    } & import("..").CommonProps & {
+        children?: import("react").ReactNode;
+    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    title: string;
+    args: {
+        open: true;
+    };
+    render: (args: {
+        onClose?: ((event: Event | import("react").SyntheticEvent<Element, Event>) => void) | undefined;
+        open: boolean;
+    } & import("..").CommonProps & {
+        children?: import("react").ReactNode;
+    }) => JSX.Element;
+};
+export default _default;
+type Story = StoryObj<typeof BottomSheet>;
+export declare const Basic: Story;
+export declare const BasicMobile: Story;
+export declare const WithOverflowContent: Story;
+export declare const WithOverflowContentMobile: Story;
+export declare const WithOverflowContentDark: Story;
+export declare const WithOverflowContentDarkMobile: Story;

package/build/types/common/flowHeader/FlowHeader.d.ts

@@ -1,2 +1,11 @@
+import * as React from 'react';
+import { Layout } from '../propsValues/layouts';
+export interface FlowHeaderProps {
+    bottomContent?: React.ReactNode;
+    className?: string;
+    layout?: Layout.VERTICAL | Layout.HORIZONTAL;
+    leftContent?: React.ReactNode;
+    rightContent?: React.ReactNode;
+}
+declare const FlowHeader: React.ForwardRefExoticComponent<FlowHeaderProps & React.RefAttributes<HTMLDivElement>>;
 export default FlowHeader;
-declare const FlowHeader: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;

package/build/types/common/hooks/index.d.ts

@@ -1,4 +1,4 @@
-export { default as useClientWidth } from "./useClientWidth";
+export { useClientWidth } from "./useClientWidth/useClientWidth";
 export { default as useConditionalListener } from "./useConditionalListener";
 export { default as useDirection } from "./useDirection";
 export { default as useHasIntersected } from "./useHasIntersected";

package/build/types/common/hooks/useClientWidth/useClientWidth.d.ts

@@ -1,9 +1,10 @@
-export function useClientWidth({ ref, throttleMs }: {
-    ref: any;
-    throttleMs?: number | undefined;
-}): null[];
-export namespace useClientWidth {
-    export { THROTTLE_MS };
-}
-declare const THROTTLE_MS: 100;
+/// <reference types="react" />
+type FlowNavigationProps = {
+    ref: React.RefObject<HTMLElement> | Window | undefined;
+    throttleMs?: number;
+};
+export declare const useClientWidth: {
+    ({ ref, throttleMs }: FlowNavigationProps): (number | null)[];
+    THROTTLE_MS: number;
+};
 export {};

package/build/types/dateInput/DateInput.story.d.ts

@@ -0,0 +1,71 @@
+/// <reference types="react" />
+import { StoryObj } from '@storybook/react';
+import { DateInput } from '..';
+declare const _default: {
+    component: {
+        ({ disabled, size, value, dayLabel, monthLabel, yearLabel, monthFormat, mode, onChange, onFocus, onBlur, placeholders, id, selectProps, }: {
+            disabled: any;
+            size: any;
+            value: any;
+            dayLabel: any;
+            monthLabel: any;
+            yearLabel: any;
+            monthFormat: any;
+            mode: any;
+            onChange: any;
+            onFocus: any;
+            onBlur: any;
+            placeholders: any;
+            id: any;
+            selectProps: any;
+        }): JSX.Element;
+        propTypes: {
+            disabled: any;
+            size: any;
+            value: any;
+            onChange: any;
+            onFocus: any;
+            onBlur: any;
+            dayLabel: any;
+            monthLabel: any;
+            yearLabel: any;
+            monthFormat: any;
+            mode: any;
+            placeholders: any;
+            id: any;
+            selectProps: any;
+        };
+        defaultProps: {
+            disabled: boolean;
+            size: import("..").Size;
+            value: null;
+            onFocus: null;
+            onBlur: null;
+            monthFormat: import("..").MonthFormat;
+            mode: import("..").DateMode;
+            id: string;
+            selectProps: {};
+        };
+    };
+    title: string;
+    args: {
+        dayLabel: string;
+        monthLabel: string;
+        yearLabel: string;
+        selectProps: {
+            buttonProps: {
+                'aria-label': string;
+            };
+            dropdownProps: {
+                'aria-label': string;
+            };
+        };
+    };
+    tags: string[];
+};
+export default _default;
+type Story = StoryObj<typeof DateInput>;
+export declare const Basic: Story;
+export declare const BasicMobile: Story;
+export declare const InputError: Story;
+export declare const InputErrorMobile: Story;

package/build/types/decision/Decision.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 export interface DecisionOptions {
     description?: React.ReactNode;
     disabled?: boolean;
-    href?: any;
+    href?: string;
     target?: "_self" | "_blank" | "_parent" | "_top";
     media?: {
         block: React.ReactNode;

package/build/types/definitionList/DefinitionList.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 export interface DefinitionListDefinitions {
     action?: {
         label: string;
-        onClick: (...args: any[])=>any;
+        onClick?: (...args: any[])=>any;
     };
     title: React.ReactNode;
     value: React.ReactNode;

package/build/types/flowNavigation/FlowNavigation.d.ts

@@ -1,34 +1,16 @@
-import * as React from 'react';
-
-export interface FlowNavigationSteps {
-    label: React.ReactNode;
-    onClick?: (...args: any[])=>any;
-    hoverLabel?: React.ReactNode;
-}
-
-export interface FlowNavigationProps {
-    activeStep?: number;
-    /**
-     * An Avatar
-     */
-    avatar?: React.ReactElement<any>;
-    logo?: React.ReactNode;
-    /**
-     * Called when the close button is clicked. If not provided the close button won't show
-     */
-    onClose?: (...args: any[])=>any;
-    /**
-     * Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens
-     */
-    onGoBack?: (...args: any[])=>any;
-    done?: boolean;
-    /**
-     * Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead
-     */
-    steps: FlowNavigationSteps[];
-}
-
-declare const FlowNavigation: React.FC<FlowNavigationProps>;
-
-export default FlowNavigation;
-
+import React from 'react';
+import { Step } from '../stepper/Stepper';
+export interface FlowNavigationProps {
+    activeStep?: number;
+    avatar?: Element;
+    logo?: React.ReactNode;
+    done?: boolean;
+    /** Called when the close button is clicked. If not provided the close button won't show */
+    onClose?: () => void;
+    /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */
+    onGoBack?: () => void;
+    /** Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */
+    steps: Step[];
+}
+declare const FlowNavigation: ({ activeStep, avatar, logo, done, onClose, onGoBack, steps, }: FlowNavigationProps) => JSX.Element;
+export default FlowNavigation;

package/build/types/index.d.ts

@@ -37,7 +37,7 @@ export { default as Drawer } from './drawer';
 export { default as DropFade } from './dropFade';
 export { default as DynamicFieldDefinitionList } from './dynamicFieldDefinitionList';
 export { default as Emphasis } from './emphasis';
-export { default as FlowNavigation } from './flowNavigation';
+export { default as FlowNavigation } from './flowNavigation/FlowNavigation';
 export { default as Header } from './header';
 export { default as Image } from './image';
 export { default as Info } from './info';
@@ -73,7 +73,7 @@ export { default as SlidingPanel } from './slidingPanel';
 export { default as SnackbarPortal } from './snackbar/Snackbar';
 export { default as SnackbarProvider } from './snackbar/SnackbarProvider';
 export { default as StatusIcon } from './statusIcon/StatusIcon';
-export { default as Stepper } from './stepper';
+export { default as Stepper } from './stepper/Stepper';
 export { default as Sticky } from './sticky';
 export { default as Summary } from './summary';
 export { default as Switch } from './switch';

package/build/types/info/Info.story.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import { StoryObj } from '@storybook/react';
+import Info, { InfoPresentation } from '.';
+declare const _default: {
+    component: {
+        (props: any): JSX.Element;
+        propTypes: {
+            'aria-label': any;
+            className: any;
+            content: any;
+            onClick: any;
+            presentation: any;
+            size: any;
+            title: any;
+        };
+        defaultProps: {
+            className: undefined;
+            content: undefined;
+            onClick: undefined;
+            presentation: InfoPresentation;
+            size: import("..").Size;
+            title: undefined;
+        };
+    };
+    title: string;
+    args: {
+        'aria-label': string;
+        title: string;
+        content: string;
+    };
+    render: (args: any) => JSX.Element;
+};
+export default _default;
+type Story = StoryObj<typeof Info>;
+export declare const Basic: Story;
+export declare const OpenedPopover: Story;
+export declare const OpenedPopoverMobile: Story;
+export declare const OpenedModal: Story;
+export declare const OpenedModalMobile: Story;

package/build/types/listItem/ListItem.d.ts

@@ -1,7 +1,7 @@
 import { ElementType, FC, ReactNode } from 'react';
 type ListItemProps = {
     title: ReactNode;
-    value: string;
+    value: ReactNode;
     media?: ReactNode;
     action?: ReactNode;
     className?: string;

package/build/types/listItem/ListItem.story.d.ts

@@ -2,7 +2,7 @@
 declare const _default: {
     component: import("react").FC<{
         title: import("react").ReactNode;
-        value: string;
+        value: import("react").ReactNode;
         media?: import("react").ReactNode;
         action?: import("react").ReactNode;
         className?: string | undefined;

package/build/types/modal/Modal.story.d.ts

@@ -1,10 +1,27 @@
 /// <reference types="react" />
-import { Story } from '@storybook/react';
+import { StoryObj } from '@storybook/react';
+import { Modal } from '..';
 declare const _default: {
     component: ({ title, body, footer, onClose, className, open, size, scroll, position, ...otherProps }: import("./Modal").ModalProps) => JSX.Element;
     title: string;
+    args: {
+        size: "md";
+        position: "center";
+        open: true;
+    };
+    parameters: {
+        chromatic: {
+            delay: number;
+        };
+    };
 };
 export default _default;
+type Story = StoryObj<typeof Modal>;
 export declare const Basic: Story;
-export declare const WithLongText: () => JSX.Element;
-export declare const WithLongTextMobileView: Story;
+export declare const BasicMobile: Story;
+export declare const ContentScroll: Story;
+export declare const ContentScrollMobile: Story;
+export declare const ViewportScroll: Story;
+export declare const ViewportScrollMobile: Story;
+export declare const WithoutTitle: Story;
+export declare const WithoutTitleMobile: Story;

package/build/types/phoneNumberInput/PhoneNumberInput.d.ts

@@ -15,6 +15,10 @@ export interface PhoneNumberInputProps {
     size?: PhoneNumberInputSize;
     placeholder?: string;
     selectProps?: Object;
+    /**
+     * List of iso3 codes of countries to remove from the list
+     */
+    disabledCountries?: string[];
 }
 
 declare const PhoneNumberInput: React.FC<PhoneNumberInputProps>;

package/build/types/phoneNumberInput/utils/excludeCountries/excludeCountries.d.ts

@@ -0,0 +1 @@
+export function excludeCountries(countries: any[], disabledCountries: any[]): any;

package/build/types/phoneNumberInput/utils/excludeCountries/index.d.ts

@@ -0,0 +1 @@
+export { excludeCountries } from "./excludeCountries";

package/build/types/phoneNumberInput/utils/index.d.ts

@@ -10,3 +10,4 @@ export { cleanNumber } from "./cleanNumber";
 export { isStringNumeric } from "./isStringNumeric";
 export { sortArrayByProperty } from "./sortArrayByProperty";
 export { groupCountriesByPrefix } from "./groupCountriesByPrefix";
+export { excludeCountries } from "./excludeCountries";

package/build/types/snackbar/Snackbar.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 export interface SnackbarAction {
     label: string;
-    onClick: (...args: any[])=>any;
+    onClick?: (...args: any[])=>any;
 }
 
 export type SnackbarTheme = "light" | "dark";

package/build/types/stepper/Stepper.d.ts

@@ -1,18 +1,13 @@
-import * as React from 'react';
-
-export interface StepperSteps {
-    label: React.ReactNode;
-    onClick?: (...args: any[])=>any;
-    hoverLabel?: React.ReactNode;
-}
-
-export interface StepperProps {
-    steps: StepperSteps[];
-    activeStep?: number;
-    className?: string;
-}
-
-declare const Stepper: React.FC<StepperProps>;
-
-export default Stepper;
-
+import * as React from 'react';
+export interface Step {
+    label: React.ReactNode;
+    onClick?: () => void;
+    hoverLabel?: React.ReactNode;
+}
+export interface StepperProps {
+    steps: Step[];
+    activeStep?: number;
+    className?: string;
+}
+declare const Stepper: ({ steps, activeStep, className }: StepperProps) => JSX.Element | null;
+export default Stepper;

package/build/types/test-utils/VariantDecorator.d.ts

@@ -0,0 +1,18 @@
+import { Decorator } from '@storybook/react';
+import { ChromaticParameters } from './ChromaticParameters';
+declare module '@storybook/types' {
+    interface Parameters {
+        /** Prefer using `storyConfig` for configuring variants */
+        variants?: ('default' | 'light' | 'dark' | 'rtl' | (string & Record<string, unknown>))[];
+        /** Used by Chromatic */
+        chromatic?: ChromaticParameters;
+        viewport?: {
+            viewports?: unknown[];
+            defaultViewport?: string;
+        };
+    }
+}
+/**
+ * Creates multiple variants of a component in a single story.
+ */
+export declare const VariantDecorator: Decorator;

package/build/types/test-utils/story-config.d.ts

@@ -1,54 +1,22 @@
-import { Story } from '@storybook/react';
-export declare const defaultMobileViewPortWidth = 390;
-export declare const defaultVisualTestDelay = 1000;
-export declare const defaultMobileViewDevice: {
-    type: string;
-    name: string;
-    styles: import("@storybook/addon-viewport/dist/Viewport-f0912abf").S;
-};
-export type StoryConfig = {
-    darkMode?: boolean;
-    rtlMode?: boolean;
-    allGlobals?: boolean;
-    mobileView?: boolean;
-    visualTest?: ChromaticParameters;
-};
-export declare function storyConfig(story: Story, config: StoryConfig): Story;
-/**
- * Chromatic Config params
- *
- * {@see https://github.com/chromaui/chromatic-cli/blob/main/storybook-addon.d.ts}
- * (this typs wasn't exported from any Chromatic package)
- */
-export type ChromaticParameters = {
-    /**
-     * To set a viewport, specify one or more screen widths to the `chromatic.viewports` parameter.
-     */
-    viewports?: number[];
+import { StoryObj } from '@storybook/react';
+interface StoryConfig {
     /**
-     * You can omit stories entirely from Chromatic testing using the disable story parameter.
-     */
-    disable?: boolean;
-    /**
-     * Chromatic will pause CSS animations and reset them to their beginning state.
+     * Creates variations of the component for the current story. Some
+     * padding is applied to the variants for spacing.
      *
-     * Some animations are used to "animate in" visible elements. To specify that Chromatic should pause the
-     * animation at the end, use the `pauseAnimationAtEnd` story parameter.
-     */
-    pauseAnimationAtEnd?: boolean;
-    /**
-     * Use story-level delay to ensure a minimum amount of time (in milliseconds) has passed before Chromatic takes a
-     * screenshot.
-     */
-    delay?: number;
-    /**
-     * The diffThreshold parameter allows you to fine tune the threshold for visual change between snapshots before
-     * they’re flagged by Chromatic. Sometimes you need assurance to the sub-pixel and other times you want to skip
-     * visual noise generated by non-deterministic rendering such as anti-aliasing.
+     * - `default` adds just the story itself with some padding.
+     * - `light` adds a light theme variant.
+     * - `dark` adds a dark theme variant.
+     * - `rtl` adds a right-to-left writing mode variant.
+     * - `mobile` sets the default viewport for the Story with mobile
+     *   dimensions and uses those dimensions for snapshots.
      *
-     * 0 is the most accurate. 1 is the least accurate.
-     *
-     * @default 0.063
+     * @default undefined
      */
-    diffThreshold?: number;
-};
+    variants?: ('default' | 'light' | 'dark' | 'rtl' | 'mobile')[];
+}
+/**
+ * Utility function for creating variants of a CSFv3 story.
+ */
+export declare const storyConfig: <Args>(storyObject: StoryObj<Args>, { variants }: StoryConfig) => StoryObj<Args>;
+export {};

package/build/types/tooltip/Tooltip.story.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-import { Story } from '@storybook/react';
+import { StoryObj } from '@storybook/react';
+import Tooltip from './Tooltip';
 declare const _default: {
     component: ({ position, children, label, className, }: {
         position?: "top" | "bottom" | "left" | "right" | undefined;
@@ -8,13 +9,20 @@ declare const _default: {
         children?: import("react").ReactNode;
     } & import("../common").CommonProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     title: string;
+    args: {
+        label: string;
+        position: "bottom";
+    };
+    render: (args: {
+        position?: "top" | "bottom" | "left" | "right" | undefined;
+        label: import("react").ReactNode;
+    } & {
+        children?: import("react").ReactNode;
+    } & import("../common").CommonProps) => JSX.Element;
+    tags: string[];
 };
 export default _default;
-export declare const Basic: {
-    (): JSX.Element;
-    play: typeof hoverOverButton;
-};
-export declare const BasicDarkMode: Story;
-declare function hoverOverButton({ canvasElement }: {
-    canvasElement: HTMLElement;
-}): void;
+type Story = StoryObj<typeof Tooltip>;
+export declare const Basic: Story;
+export declare const OpenedTooltip: Story;
+export declare const OpenedTooltipDark: Story;