@transferwise/components 0.0.0-experimental-fa56c29 → 0.0.0-experimental-644f437

package/src/common/historyNavigator/{historyNavigator.js → historyNavigator.ts}

@@ -1,17 +1,21 @@
 class HistoryNavigator {
-  constructor(history = [], historyLimit = null) {
+  history: (string | number)[];
+  currIndex: number;
+  historyLimit: number | undefined;
+
+  constructor(history?: (string | number)[], historyLimit?: number) {
     this.history = history && history.length > 0 ? history : [''];
     this.currIndex = this.history.length - 1;
     this.historyLimit = historyLimit;
   }
 
-  reset = (newHistory = [''], historyLimit = 20) => {
-    this.history = newHistory;
-    this.currIndex = newHistory.length - 1 > 0 ? newHistory.length - 1 : 0;
+  reset = (newHistory?: (string | number)[], historyLimit = 20) => {
+    this.history = newHistory && newHistory.length > 0 ? newHistory : [''];
+    this.currIndex = this.history.length - 1;
     this.historyLimit = historyLimit;
   };
 
-  add = (element) => {
+  add = (element: string | number) => {
     if (!this.historyLimit || this.history.length <= this.historyLimit) {
       this.history.push(element);
       // Always keep the current Index to the latest change

package/src/common/panel/{Panel.spec.js → Panel.spec.tsx}

@@ -4,6 +4,11 @@ import { Position } from '..';
 import { render } from '../../test-utils';
 
 import Panel from './Panel';
+import type { PanelProps } from './Panel';
+
+const mockAnchorRef: React.RefObject<HTMLAnchorElement> = {
+  current: document.createElement('a'),
+};
 
 describe('Panel', () => {
   const props = {
@@ -11,9 +16,9 @@ describe('Panel', () => {
     children: <div>children</div>,
     open: true,
     position: Position.TOP,
-    anchorRef: {},
+    anchorRef: mockAnchorRef,
     onClose: jest.fn(),
-  };
+  } satisfies PanelProps;
 
   it('renders', () => {
     const { container } = render(<Panel {...props} />);
@@ -31,7 +36,7 @@ describe('Panel', () => {
     expect(getArrow()).toBeInTheDocument();
   });
 
-  it('opens/closes Panel based on open', async () => {
+  it('opens/closes Panel based on open', () => {
     const { rerender } = render(<Panel {...props} open={false} />);
 
     expect(getPanel()).not.toBeInTheDocument();
@@ -41,9 +46,9 @@ describe('Panel', () => {
     expect(getPanel()).toBeInTheDocument();
   });
 
-  it('does not set width for content as width of an anchor (by default)', async () => {
-    const anchorReference = createRef();
-    const panelReference = createRef();
+  it('does not set width for content as width of an anchor (by default)', () => {
+    const anchorReference = createRef<HTMLDivElement>();
+    const panelReference = createRef<HTMLDivElement>();
 
     render(
       <>
@@ -61,9 +66,9 @@ describe('Panel', () => {
     expect(panelReference.current).toHaveStyle({ width: undefined });
   });
 
-  it('sets same width for content as width of an anchor (anchorWidth={true})', async () => {
-    const anchorReference = createRef();
-    const panelReference = createRef();
+  it('sets same width for content as width of an anchor (anchorWidth={true})', () => {
+    const anchorReference = createRef<HTMLDivElement>();
+    const panelReference = createRef<HTMLDivElement>();
 
     render(
       <>

package/src/common/panel/Panel.tsx

@@ -26,7 +26,7 @@ const fallbackPlacements = {
   [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],
 };
 
-export type Props = PropsWithChildren<{
+export type PanelProps = PropsWithChildren<{
   arrow?: boolean;
   flip?: boolean;
   altAxis?: boolean;
@@ -38,7 +38,7 @@ export type Props = PropsWithChildren<{
 }> &
   HTMLAttributes<HTMLDivElement>;
 
-const Panel = forwardRef<HTMLDivElement, Props>(
+const Panel = forwardRef<HTMLDivElement, PanelProps>(
   (
     {
       arrow = false,
@@ -51,7 +51,7 @@ const Panel = forwardRef<HTMLDivElement, Props>(
       anchorRef,
       anchorWidth = false,
       ...rest
-    }: Props,
+    }: PanelProps,
     reference,
   ) => {
     const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);

package/src/common/responsivePanel/ResponsivePanel.tsx

@@ -6,7 +6,7 @@ import { Position } from '..';
 import BottomSheet from '../bottomSheet';
 import { useLayout } from '../hooks';
 import Panel from '../panel';
-import { Props as PanelProps } from '../panel/Panel';
+import { PanelProps } from '../panel/Panel';
 
 const ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(
   (

package/src/dimmer/Dimmer.tsx

@@ -29,7 +29,7 @@ export const EXIT_ANIMATION = 350;
 
 const dimmerManager = new DimmerManager();
 
-type DimmerProps = CommonProps & {
+export type DimmerProps = CommonProps & {
   children?: ReactNode;
   disableClickToClose?: boolean;
   contentPosition?: PositionTop | PositionCenter | PositionBottom;

package/src/dimmer/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Dimmer';
+export type { DimmerProps } from './Dimmer';

package/src/flowNavigation/FlowNavigation.tsx

@@ -1,5 +1,4 @@
 import classNames from 'classnames';
-import { useRef } from 'react';
 import { useIntl } from 'react-intl';
 
 import { Breakpoint, Layout } from '../common';
@@ -8,10 +7,10 @@ import FlowHeader from '../common/flowHeader/FlowHeader';
 import Logo from '../logo';
 import Stepper, { type Step } from '../stepper/Stepper';
 
+import { useScreenSize } from '../common/hooks/useScreenSize';
 import messages from './FlowNavigation.messages';
 import AnimatedLabel from './animatedLabel';
 import BackButton from './backButton';
-import { useScreenSize } from '../common/hooks/useScreenSize';
 
 export interface FlowNavigationProps {
   activeStep?: number;

package/src/index.ts

@@ -1,24 +1,30 @@
 /**
  * Types
  */
-export type { AccordionProps, AccordionItem } from './accordion';
-export type { AvatarProps } from './avatar';
+export type { AccordionItem, AccordionProps } from './accordion';
 export type { ActionOptionProps } from './actionOption';
-export type { AlertProps, AlertAction, AlertArrowPosition, AlertType } from './alert';
+export type { AlertAction, AlertProps, AlertType } from './alert';
+export type { AvatarProps } from './avatar';
 export type { BadgeProps } from './badge';
-export type { CarouselProps } from './carousel';
 export type { CircularButtonProps } from './circularButton';
+export type {
+  BodyTypes,
+  DisplayTypes,
+  LayoutDirection,
+  LinkTypes,
+  TitleTypes,
+  TypographyTypes,
+} from './common';
+export type { BottomSheetProps } from './common/bottomSheet';
+export type { DateInputProps } from './dateInput';
+export type { DateLookupProps } from './dateLookup';
 export type { DecisionProps } from './decision/Decision';
+export type { DimmerProps } from './dimmer';
 export type { EmphasisProps } from './emphasis';
 export type { InfoProps } from './info';
-export type { SummaryProps } from './summary';
-export type { InputProps } from './inputs/Input';
-export type { DateInputProps } from './dateInput';
-export type { DateLookupProps } from './dateLookup';
 export type { InputWithDisplayFormatProps } from './inputWithDisplayFormat';
+export type { InputProps } from './inputs/Input';
 export type { InputGroupProps } from './inputs/InputGroup';
-export type { LoaderProps } from './loader';
-export type { NavigationOptionListProps } from './navigationOptionsList';
 export type { SearchInputProps } from './inputs/SearchInput';
 export type {
   SelectInputGroupItem,
@@ -30,50 +36,43 @@ export type {
   SelectInputTriggerButtonProps,
 } from './inputs/SelectInput';
 export type { TextAreaProps } from './inputs/TextArea';
+export type { InstructionsListProps } from './instructionsList';
+export type { LoaderProps } from './loader';
+export type { MarkdownProps } from './markdown';
+export type { ModalProps } from './modal';
+export type { MoneyProps } from './money';
+export type {
+  CurrencyHeaderItem,
+  CurrencyItem,
+  CurrencyOptionItem,
+  MoneyInputProps,
+} from './moneyInput';
+export type { NavigationOptionListProps } from './navigationOptionsList';
 export type { PhoneNumberInputProps } from './phoneNumberInput/PhoneNumberInput';
 export type { PopoverProps } from './popover';
 export type { ProgressProps } from './progress';
 export type { ProgressBarProps } from './progressBar';
-export type { ProviderProps, DirectionProviderProps, LanguageProviderProps } from './provider';
+export type { DirectionProviderProps, LanguageProviderProps, ProviderProps } from './provider';
 export type { RadioProps } from './radio';
 export type { RadioGroupProps, RadioGroupRadio } from './radioGroup';
 export type { RadioOptionProps } from './radioOption';
+export type { SegmentedControlProps } from './segmentedControl';
+export type { SlidingPanelProps } from './slidingPanel';
 export type { SnackbarProps } from './snackbar/Snackbar';
 export type { SnackbarContextType } from './snackbar/SnackbarContext';
 export type { StatusIconProps } from './statusIcon';
 export type { StickyProps } from './sticky';
+export type { SummaryProps } from './summary';
 export type { SwitchProps } from './switch';
 export type { SwitchOptionProps } from './switchOption';
 export type { TextareaWithDisplayFormatProps } from './textareaWithDisplayFormat';
 export type { TooltipProps } from './tooltip';
-export type { UploadedFile, UploadError, UploadResponse } from './uploadInput/types';
-export type { MarkdownProps } from './markdown';
-export type { ModalProps } from './modal';
-export type { MoneyProps } from './money';
-export type {
-  CurrencyHeaderItem,
-  CurrencyItem,
-  CurrencyOptionItem,
-  MoneyInputProps,
-} from './moneyInput';
-export type { SlidingPanelProps } from './slidingPanel';
-export type {
-  LayoutDirection,
-  TypographyTypes,
-  TitleTypes,
-  BodyTypes,
-  LinkTypes,
-  DisplayTypes,
-} from './common';
-export type { SegmentedControlProps } from './segmentedControl';
-export type { TypeaheadProps, TypeaheadOption } from './typeahead';
-export type { InstructionsListProps } from './instructionsList';
+export type { TypeaheadOption, TypeaheadProps } from './typeahead';
+export type { UploadError, UploadResponse, UploadedFile } from './uploadInput/types';
 
 /**
  * Components
  */
-export { default as Title } from './title';
-export { default as Body } from './body';
 export { default as Accordion } from './accordion';
 export { default as ActionButton } from './actionButton';
 export { default as ActionOption } from './actionOption';
@@ -81,17 +80,19 @@ export { default as Alert } from './alert';
 export { default as Avatar } from './avatar';
 export { default as AvatarWrapper } from './avatarWrapper';
 export { default as Badge } from './badge';
-export { default as BottomSheet } from './common/bottomSheet';
+export { default as Body } from './body';
 export { default as Button } from './button';
-export { default as Carousel } from './carousel';
 export { default as Card } from './card';
-export { default as BaseCard } from './common/card';
 export { default as Checkbox } from './checkbox';
 export { default as CheckboxButton } from './checkboxButton';
 export { default as CheckboxOption } from './checkboxOption';
 export { default as Chevron } from './chevron';
-export { default as Chips, Chip } from './chips';
+export { Chip, default as Chips } from './chips';
 export { default as CircularButton } from './circularButton';
+export { default as Option } from './common/Option';
+export { default as BottomSheet } from './common/bottomSheet';
+export { default as BaseCard } from './common/card';
+export { default as CriticalCommsBanner } from './criticalBanner';
 export { default as DateInput } from './dateInput';
 export { default as DateLookup } from './dateLookup';
 export { default as Decision } from './decision';
@@ -106,6 +107,7 @@ export { default as Header } from './header';
 export { default as Image } from './image';
 export { default as Info } from './info';
 export { default as InlineAlert } from './inlineAlert';
+export { default as InputWithDisplayFormat } from './inputWithDisplayFormat';
 export { Input } from './inputs/Input';
 export { InputGroup } from './inputs/InputGroup';
 export { SearchInput } from './inputs/SearchInput';
@@ -115,9 +117,9 @@ export {
   SelectInputTriggerButton,
 } from './inputs/SelectInput';
 export { TextArea } from './inputs/TextArea';
-export { default as InputWithDisplayFormat } from './inputWithDisplayFormat';
 export { default as InstructionsList } from './instructionsList';
 export { default as Link } from './link';
+export { default as ListItem } from './listItem';
 export { default as Loader } from './loader';
 export { default as Logo } from './logo';
 export { default as Markdown } from './markdown';
@@ -127,24 +129,23 @@ export { default as MoneyInput } from './moneyInput';
 export { default as NavigationOption } from './navigationOption';
 export { default as NavigationOptionsList } from './navigationOptionsList';
 export { default as Nudge } from './nudge';
-export { default as Option } from './common/Option';
 export { default as OverlayHeader } from './overlayHeader';
 export { default as PhoneNumberInput } from './phoneNumberInput';
 export { default as Popover } from './popover';
 export { default as ProcessIndicator } from './processIndicator';
-export { default as ProgressBar } from './progressBar';
 export { default as Progress } from './progress';
-export { default as PromoCard } from './promoCard';
-export { default as PromoCardGroup } from './promoCard';
-export { default as Provider, DirectionProvider, LanguageProvider } from './provider';
+export { default as ProgressBar } from './progressBar';
+export { PromoCardGroup, default as PromoCard } from './promoCard';
+export { DirectionProvider, LanguageProvider, default as Provider } from './provider';
 export { default as Radio } from './radio';
 export { default as RadioGroup } from './radioGroup';
 export { default as RadioOption } from './radioOption';
 export { default as Section } from './section';
-export { default as Select } from './select';
 export { default as SegmentedControl } from './segmentedControl';
+export { default as Select } from './select';
 export { default as SlidingPanel } from './slidingPanel';
 export { default as SnackbarPortal } from './snackbar/Snackbar';
+export { SnackbarConsumer, SnackbarContext } from './snackbar/SnackbarContext';
 export { default as SnackbarProvider } from './snackbar/SnackbarProvider';
 export { default as StatusIcon } from './statusIcon/StatusIcon';
 export { default as Stepper } from './stepper/Stepper';
@@ -154,66 +155,65 @@ export { default as Switch } from './switch';
 export { default as SwitchOption } from './switchOption';
 export { default as Tabs } from './tabs';
 export { default as TextareaWithDisplayFormat } from './textareaWithDisplayFormat';
+export { default as Title } from './title';
 export { default as Tooltip } from './tooltip';
 export { default as Typeahead } from './typeahead';
 export { default as Upload } from './upload';
 export { default as UploadInput } from './uploadInput';
-export { SnackbarConsumer, SnackbarContext } from './snackbar/SnackbarContext';
-export { default as CriticalCommsBanner } from './criticalBanner';
-export { default as ListItem } from './listItem';
 
 /**
  * Hooks
  */
-export { default as useSnackbar } from './snackbar/useSnackbar';
 export { useDirection, useLayout } from './common/hooks';
 export { useScreenSize } from './common/hooks/useScreenSize';
+export { default as useSnackbar } from './snackbar/useSnackbar';
 
 /**
  * Enums
  */
+export { AlertArrowPosition } from './alert/Alert';
+export { AvatarType } from './avatar';
 export {
-  Direction,
-  Size,
-  Width,
-  Sentiment,
-  Priority,
+  Breakpoint,
   ControlType,
-  Type,
-  Theme,
   DateMode,
+  Direction,
+  FileType,
+  Layout,
+  MarkdownNodeType,
   MonthFormat,
   Position,
-  Scroll,
+  Priority,
   ProfileType,
-  Breakpoint,
-  Layout,
+  Scroll,
+  Sentiment,
+  Size,
   Status,
-  MarkdownNodeType,
+  Theme,
+  Type,
   Typography,
   Variant,
+  Width,
 } from './common';
-export { AvatarType } from './avatar';
-export { InfoPresentation } from './info';
-export { UploadStep } from './upload';
 export { DecisionPresentation, DecisionType } from './decision';
+export { InfoPresentation } from './info';
 export { LogoType } from './logo';
-export { FileType } from './common';
+export { UploadStep } from './upload';
 
 /**
  * Utils
  */
 export {
-  adjustLocale,
   DEFAULT_LANG,
   DEFAULT_LOCALE,
+  RTL_LANGUAGES,
+  SUPPORTED_LANGUAGES,
+  adjustLocale,
   getCountryFromLocale,
   getDirectionFromLocale,
   getLangFromLocale,
   isBrowser,
   isServerSide,
-  RTL_LANGUAGES,
-  SUPPORTED_LANGUAGES,
 } from './common';
 
 /**

package/src/main.css

@@ -643,144 +643,6 @@ div.critical-comms .critical-comms-body {
   border-radius: 16px 16px 0 0;
   border-radius: var(--radius-medium) var(--radius-medium) 0 0;
 }
-.carousel {
-  display: flex;
-  align-items: center;
-  overflow-x: scroll;
-  overflow-y: hidden;
-  scroll-snap-type: x mandatory;
-  scroll-behavior: smooth;
-  gap: 16px;
-  gap: var(--size-16);
-}
-@media (max-width: 767px) {
-  .carousel {
-    gap: 8px;
-    gap: var(--size-8);
-  }
-}
-.carousel__header {
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  min-height: 32px;
-  min-height: var(--size-32);
-  padding-bottom: 16px;
-  padding-bottom: var(--size-16);
-}
-.carousel__card,
-.carousel__card:hover,
-.carousel__card:focus,
-.carousel__card:focus-within {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  outline: none !important;
-}
-.carousel__card {
-  display: block;
-  position: relative;
-  text-align: left;
-  border: none;
-  overflow: hidden;
-  background: rgba(134,167,189,0.10196);
-  background: var(--color-background-neutral);
-  border-radius: 32px;
-  border-radius: var(--size-32);
-  scroll-snap-align: center;
-  -webkit-scroll-snap-align: center;
-  transition: all 0.4s !important;
-}
-@media (min-width: 1200px) {
-  .carousel__card {
-    min-width: 280px;
-    width: 280px;
-    height: 280px;
-  }
-}
-@media (max-width: 1199px) {
-  .carousel__card {
-    min-width: 242px;
-    width: 242px;
-    height: 242px;
-  }
-}
-@media (max-width: 767px) {
-  .carousel__card {
-    min-width: 336px;
-    width: 336px;
-    height: 336px;
-    scroll-snap-stop: always;
-  }
-}
-.carousel__card:focus {
-  outline: 0;
-}
-.carousel__card:focus:after,
-.carousel__card:focus-within:after {
-  content: '';
-  position: absolute;
-  z-index: 4;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: 32px;
-  border-radius: var(--size-32);
-  box-shadow: inset 0 0 0 2px var(--ring-outline-color);
-}
-.carousel__card:hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.carousel__card:focus {
-  background-color: var(--color-background-neutral-hover);
-}
-.carousel__card-content {
-  height: 100%;
-  font-weight: normal;
-  padding: 24px;
-  padding: var(--size-24);
-}
-.carousel__scroll-button {
-  width: 32px;
-  width: var(--size-32);
-  height: 32px;
-  height: var(--size-32);
-  align-items: center;
-  justify-content: center;
-}
-.carousel__indicators {
-  display: flex;
-  justify-content: center;
-  padding-top: 8px;
-  padding-top: var(--size-8);
-  gap: 8px;
-  gap: var(--size-8);
-}
-.carousel__indicator {
-  width: 12px;
-  width: var(--size-12);
-  height: 12px;
-  height: var(--size-12);
-  border-radius: 8px;
-  border-radius: var(--size-8);
-  background: #c9cbce;
-  background: var(--color-interactive-secondary);
-  border: none;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  transition: all 0.1s;
-}
-.carousel__indicator:hover {
-  width: 16px;
-  width: var(--size-16);
-}
-.carousel__indicator--selected,
-.carousel__indicator--selected:hover {
-  background: var(--color-interactive-primary);
-  width: 24px;
-  width: var(--size-24);
-}
 .np-checkbox-button input[type="checkbox"] {
   position: absolute;
   width: 24px;

package/src/main.less

@@ -5,7 +5,6 @@
 @import "./badge/Badge.less";
 @import "./button/Button.less";
 @import "./card/Card.less";
-@import "./carousel/Carousel.less";
 @import "./checkboxButton/CheckboxButton.less";
 @import "./chips/Chip.less";
 @import "./circularButton/CircularButton.less";

package/src/overlayHeader/OverlayHeader.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import { Size } from '../common';
 import { CloseButton } from '../common/closeButton';
-import FlowHeader from '../common/flowHeader/FlowHeader';
+import FlowHeader from '../common/flowHeader';
 import Logo from '../logo';
 
 const OverlayHeader = ({ avatar, onClose, logo }) => {

package/src/promoCard/PromoCard.story.tsx

@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { StarFill } from '@transferwise/icons';
 
-import PromoCard, { type PromoCardCheckedProps, type PromoCardLinkProps } from './PromoCard';
+import PromoCard, { PromoCardCheckedProps, PromoCardLinkProps } from './PromoCard';
 
 const meta: Meta<typeof PromoCard> = {
   component: PromoCard,