@transferwise/components 0.0.0-experimental-da6dbbf → 0.0.0-experimental-4c1cb43

package/src/withDisplayFormat/WithDisplayFormat.tsx

@@ -25,12 +25,12 @@ export type EventType =
   | 'Delete'
   | 'Initial';
 
-interface WithDisplayFormatState {
+interface WithDisplayFormatState<T extends HTMLTextElement> {
   value: string;
   historyNavigator: HistoryNavigator;
   prevDisplayPattern: string;
   triggerType: EventType;
-  triggerEvent: React.KeyboardEvent<HTMLTextElement> | null;
+  triggerEvent: React.KeyboardEvent<T> | null;
   pastedLength: number;
   selectionStart: number;
   selectionEnd: number;
@@ -38,7 +38,7 @@ interface WithDisplayFormatState {
 
 export interface WithDisplayFormatProps<T extends TextElementProps = TextElementProps>
   extends Pick<
-    TextElementProps,
+    T,
     | 'className'
     | 'disabled'
     | 'id'
@@ -64,19 +64,21 @@ export interface WithDisplayFormatProps<T extends TextElementProps = TextElement
   render: (renderProps: T) => JSX.Element;
 }
 
-class WithDisplayFormat<T extends TextElementProps> extends Component<
-  WithDisplayFormatProps<T>,
-  WithDisplayFormatState
-> {
+class WithDisplayFormat<
+  T extends TextElementProps = TextElementProps,
+  U extends HTMLTextElement = HTMLTextElement,
+> extends Component<WithDisplayFormatProps<T>, WithDisplayFormatState<U>> {
   declare props: WithDisplayFormatProps<T> &
-    Required<Pick<WithDisplayFormatProps<T>, keyof typeof WithDisplayFormat.defaultProps>>;
+    Required<
+      Pick<WithDisplayFormatProps<T>, keyof (typeof WithDisplayFormat<T, U>)['defaultProps']>
+    >;
   static defaultProps = {
     autoComplete: 'off',
     displayPattern: '',
     value: '',
-  };
+  } satisfies Partial<WithDisplayFormatProps>;
 
-  constructor(props: WithDisplayFormatProps) {
+  constructor(props: WithDisplayFormat<T, U>['props']) {
     super(props);
     const unformattedValue = unformatWithPattern(props.value ?? '', props.displayPattern);
     this.state = {
@@ -92,8 +94,8 @@ class WithDisplayFormat<T extends TextElementProps> extends Component<
   }
 
   static getDerivedStateFromProps(
-    { displayPattern }: WithDisplayFormatProps,
-    { prevDisplayPattern = displayPattern, value, historyNavigator }: WithDisplayFormatState,
+    { displayPattern }: WithDisplayFormat['props'],
+    { prevDisplayPattern = displayPattern, value, historyNavigator }: WithDisplayFormat['state'],
   ) {
     if (prevDisplayPattern !== displayPattern) {
       const unFormattedValue = unformatWithPattern(value, prevDisplayPattern);
@@ -137,10 +139,9 @@ class WithDisplayFormat<T extends TextElementProps> extends Component<
         return 'Backspace';
       }
       return triggerEvent.key;
-    } else {
-      // triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
-      return 'Paste';
     }
+    // triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
+    return 'Paste';
   };
 
   resetEvent = () => {
@@ -151,7 +152,7 @@ class WithDisplayFormat<T extends TextElementProps> extends Component<
     });
   };
 
-  detectUndoRedo = (event: React.KeyboardEvent<HTMLTextElement>) => {
+  detectUndoRedo = (event: React.KeyboardEvent<U>) => {
     const charCode = String.fromCharCode(event.which).toLowerCase();
     if ((event.ctrlKey || event.metaKey) && charCode === 'z') {
       return event.shiftKey ? 'Redo' : 'Undo';
@@ -159,7 +160,7 @@ class WithDisplayFormat<T extends TextElementProps> extends Component<
     return null;
   };
 
-  handleOnKeyDown: React.KeyboardEventHandler<HTMLTextElement> = (event) => {
+  handleOnKeyDown: React.KeyboardEventHandler<U> = (event) => {
     event.persist();
     const { selectionStart, selectionEnd } = event.currentTarget;
     const { historyNavigator } = this.state;
@@ -184,7 +185,7 @@ class WithDisplayFormat<T extends TextElementProps> extends Component<
     }
   };
 
-  handleOnPaste: React.ClipboardEventHandler<HTMLTextElement> = (event) => {
+  handleOnPaste: React.ClipboardEventHandler<U> = (event) => {
     const { displayPattern } = this.props;
     const pastedLength = unformatWithPattern(
       event.clipboardData.getData('Text'),
@@ -194,7 +195,7 @@ class WithDisplayFormat<T extends TextElementProps> extends Component<
     this.setState({ triggerType: 'Paste', pastedLength });
   };
 
-  handleOnCut: React.ClipboardEventHandler<HTMLTextElement> = () => {
+  handleOnCut: React.ClipboardEventHandler<U> = () => {
     this.setState({ triggerType: 'Cut' });
   };
 
@@ -205,7 +206,7 @@ class WithDisplayFormat<T extends TextElementProps> extends Component<
     return !symbolsInPattern.includes(action);
   };
 
-  handleOnChange: React.ChangeEventHandler<HTMLTextElement> = (event) => {
+  handleOnChange: React.ChangeEventHandler<U> = (event) => {
     const { historyNavigator, triggerType } = this.state;
     const { displayPattern, onChange } = this.props;
     const { value } = event.target;
@@ -233,11 +234,11 @@ class WithDisplayFormat<T extends TextElementProps> extends Component<
     });
   };
 
-  handleOnBlur: React.FocusEventHandler<HTMLTextElement> = (event) => {
+  handleOnBlur: React.FocusEventHandler<U> = (event) => {
     this.props.onBlur?.(unformatWithPattern(event.target.value, this.props.displayPattern));
   };
 
-  handleOnFocus: React.FocusEventHandler<HTMLTextElement> = (event) => {
+  handleOnFocus: React.FocusEventHandler<U> = (event) => {
     const { displayPattern, onFocus } = this.props;
     if (onFocus) {
       this.handleOnChange(event);
@@ -273,6 +274,7 @@ class WithDisplayFormat<T extends TextElementProps> extends Component<
   handleCursorPositioning = (action: string) => {
     const { displayPattern } = this.props;
     const { triggerEvent, selectionStart, selectionEnd, pastedLength } = this.state;
+    const target = triggerEvent?.currentTarget;
 
     const cursorPosition = getCursorPositionAfterKeystroke(
       action,
@@ -283,9 +285,7 @@ class WithDisplayFormat<T extends TextElementProps> extends Component<
     );
 
     setTimeout(() => {
-      if (triggerEvent) {
-        (triggerEvent.target as HTMLTextElement).setSelectionRange(cursorPosition, cursorPosition);
-      }
+      target?.setSelectionRange(cursorPosition, cursorPosition);
       this.setState({ selectionStart: cursorPosition, selectionEnd: cursorPosition });
     }, 0);
   };
@@ -305,7 +305,7 @@ class WithDisplayFormat<T extends TextElementProps> extends Component<
       autoComplete,
     } = this.props;
     const { value } = this.state;
-    const renderProps: TextElementProps = {
+    const renderProps = {
       inputMode,
       className,
       id,
@@ -324,8 +324,8 @@ class WithDisplayFormat<T extends TextElementProps> extends Component<
       onKeyDown: this.handleOnKeyDown,
       onChange: this.handleOnChange,
       onCut: this.handleOnCut,
-    };
-    return this.props.render(renderProps as T);
+    } as T;
+    return this.props.render(renderProps);
   }
 }
 

package/build/styles/carousel/Carousel.css

@@ -1,135 +0,0 @@
-.carousel-wrapper {
-  overflow: hidden;
-}
-.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);
-  padding: 8px;
-  padding: var(--size-8);
-  margin: 8px;
-  margin: var(--size-8);
-}
-@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;
-  transition: none !important;
-  box-shadow: 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,
-.carousel__card:has(:focus-visible) {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width) !important;
-  outline-offset: var(--ring-outline-offset) !important;
-}
-.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);
-}

package/build/types/carousel/Carousel.d.ts

@@ -1,26 +0,0 @@
-import { type CSSProperties, type ReactNode } from 'react';
-import type { PromoCardLinkProps } from '../promoCard/PromoCard';
-export type CarouselCardCommon = {
-    id: string;
-    href?: string;
-    onClick?: () => void;
-    className?: string;
-    styles?: CSSProperties;
-};
-export type CarouselDefaultCard = CarouselCardCommon & {
-    type: 'anchor' | 'button';
-    content: ReactNode;
-};
-export type CarouselPromoCard = CarouselCardCommon & {
-    type: 'promo';
-} & Omit<PromoCardLinkProps, 'type'>;
-export type CarouselCard = CarouselDefaultCard | CarouselPromoCard;
-export interface CarouselProps {
-    header: string | ReactNode;
-    className?: string;
-    cards: CarouselCard[];
-    onClick?: (cardId: string) => void;
-}
-declare const Carousel: React.FC<CarouselProps>;
-export default Carousel;
-//# sourceMappingURL=Carousel.d.ts.map

package/build/types/carousel/Carousel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/carousel/Carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAIxF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAGjE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,GAAG;IACrD,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC1B,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,GAAG;IACnD,IAAI,EAAE,OAAO,CAAC;CACf,GAAG,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;AAErC,MAAM,MAAM,YAAY,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;AACnE,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAUD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAkSrC,CAAC;AAYF,eAAe,QAAQ,CAAC"}

package/build/types/carousel/index.d.ts

@@ -1,3 +0,0 @@
-export * from './Carousel';
-export { default } from './Carousel';
-//# sourceMappingURL=index.d.ts.map

package/build/types/carousel/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/carousel/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAE3B,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}

package/src/carousel/Carousel.css

@@ -1,135 +0,0 @@
-.carousel-wrapper {
-  overflow: hidden;
-}
-.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);
-  padding: 8px;
-  padding: var(--size-8);
-  margin: 8px;
-  margin: var(--size-8);
-}
-@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;
-  transition: none !important;
-  box-shadow: 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,
-.carousel__card:has(:focus-visible) {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width) !important;
-  outline-offset: var(--ring-outline-offset) !important;
-}
-.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);
-}

package/src/carousel/Carousel.less

@@ -1,133 +0,0 @@
-.carousel-wrapper {
-  overflow: hidden;
-}
-
-.carousel {
-  display: flex;
-  align-items: center;
-  overflow-x: scroll;
-  overflow-y: hidden;
-  scroll-snap-type: x mandatory;
-  scroll-behavior: smooth;
-  gap: var(--size-16);
-  padding: var(--size-8);
-  margin: var(--size-8);
-}
-
-@media (--screen-sm-max) {
-  .carousel {
-    gap: var(--size-8);
-  }
-}
-
-
-.carousel__header {
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  min-height: var(--size-32);
-  padding-bottom: var(--size-16)
-}
-
-// The specificity inside PromoCard is too high for transition / box-shaodw, so we need to use !important below
-.carousel__card,
-.carousel__card:hover,
-.carousel__card:focus,
-.carousel__card:focus-within {
-  text-decoration: none;
-  transition: none !important;
-  box-shadow: none !important;
-}
-
-.carousel__card {
-  display: block;
-  position: relative;
-  text-align: left;
-  border: none;
-  overflow: hidden;
-  background: var(--color-background-neutral);
-  border-radius: var(--size-32);
-  scroll-snap-align: center;
-  -webkit-scroll-snap-align: center;
-  transition: all 0.4s !important;
-}
-
-@media (--screen-xl) {
-  .carousel__card {
-    min-width: 280px;
-    width: 280px;
-    height: 280px;
-  }
-}
-
-
-@media (--screen-lg-max) {
-  .carousel__card {
-    min-width: 242px;
-    width: 242px;
-    height: 242px;
-  }
-}
-
-
-@media (--screen-sm-max) {
-  .carousel__card {
-    min-width: 336px;
-    width: 336px;
-    height: 336px;
-    scroll-snap-stop: always;
-  }
-}
-
-.carousel__card:focus, .carousel__card:has(:focus-visible) {
-    outline: var(--ring-outline-color) solid var(--ring-outline-width) !important;
-    outline-offset: var(--ring-outline-offset) !important;
-}
-
-.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: var(--size-24);
-}
-
-.carousel__scroll-button {
-  width: var(--size-32);
-  height: var(--size-32);
-  align-items: center;
-  justify-content: center;
-}
-
-.carousel__indicators {
-  display: flex;
-  justify-content: center;
-  padding-top: var(--size-8);
-  gap: var(--size-8);
-}
-
-.carousel__indicator {
-  width: var(--size-12);
-  height: var(--size-12);
-  border-radius: var(--size-8);
-  background: var(--color-interactive-secondary);
-  border: none;
-  appearance: none;
-  transition: all 0.1s;
-}
-
-.carousel__indicator:hover {
-  width: var(--size-16)
-}
-
-.carousel__indicator--selected,
-.carousel__indicator--selected:hover {
-  background: var(--color-interactive-primary);
-  width: var(--size-24);
-}