@transferwise/components 46.54.1 → 46.56.0

package/src/select/{Select.js → Select.tsx}

@@ -1,12 +1,11 @@
 import { useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
-import PropTypes from 'prop-types';
 import { useState, useEffect, useRef, useMemo, useId } from 'react';
 import { useIntl } from 'react-intl';
 
-import Button from '../button';
+import Button, { ButtonProps } from '../button';
 import Chevron from '../chevron';
-import { Position } from '../common';
+import { Position, Size } from '../common';
 import BottomSheet from '../common/bottomSheet';
 import { stopPropagation } from '../common/domHelpers';
 import { useLayout } from '../common/hooks';
@@ -21,35 +20,56 @@ import SearchBox from './searchBox';
 const DEFAULT_SEARCH_VALUE = '';
 const DEFAULT_OPTIONS_PAGE_SIZE = 1000;
 
-const includesString = (string1, string2) => string1.toLowerCase().includes(string2.toLowerCase());
+const includesString = (string1: string, string2: string) =>
+  string1.toLowerCase().includes(string2.toLowerCase());
 
-function defaultFilterFunction(option, searchValue) {
+export interface SelectOptionItem {
+  value: any;
+  label?: React.ReactNode;
+  icon?: React.ReactNode;
+  currency?: string;
+  note?: React.ReactNode;
+  secondary?: React.ReactNode;
+}
+
+export interface SelectItem extends Partial<SelectOptionItem> {
+  header?: React.ReactNode;
+  separator?: boolean;
+  disabled?: boolean;
+  searchStrings?: string[];
+}
+
+export interface SelectItemWithPlaceholder extends SelectItem {
+  placeholder?: string;
+}
+
+function defaultFilterFunction(option: SelectItemWithPlaceholder, searchValue: string) {
   if (isPlaceholderOption(option)) {
     return true;
   }
   const { label, note, secondary, currency, searchStrings } = option;
   return (
-    (!!label && includesString(label, searchValue)) ||
-    (!!note && includesString(note, searchValue)) ||
-    (!!secondary && includesString(secondary, searchValue)) ||
+    (typeof label === 'string' && includesString(label, searchValue)) ||
+    (typeof note === 'string' && includesString(note, searchValue)) ||
+    (typeof secondary === 'string' && includesString(secondary, searchValue)) ||
     (!!currency && includesString(currency, searchValue)) ||
     (!!searchStrings && searchStrings.some((string) => includesString(string, searchValue)))
   );
 }
 
-function isActionableOption(option) {
+function isActionableOption(option: SelectItem) {
   return !option.header && !option.separator && !option.disabled;
 }
 
-function isHeaderOption(option) {
+function isHeaderOption(option: SelectItem | null) {
   return option != null && 'header' in option;
 }
 
-function isSeparatorOption(option) {
+function isSeparatorOption(option: SelectItem | null) {
   return option != null && 'separator' in option;
 }
 
-function clamp(from, to, value) {
+function clamp(from: number, to: number, value: number) {
   return Math.max(Math.min(to, value), from);
 }
 
@@ -58,24 +78,62 @@ function clamp(from, to, value) {
  */
 const DEFAULT_SELECTED_OPTION = null;
 
-function isPlaceholderOption(option) {
+function isPlaceholderOption(option: SelectItemWithPlaceholder | null) {
   return option === DEFAULT_SELECTED_OPTION || 'placeholder' in option;
 }
 
-function isSearchableOption(option) {
+function isSearchableOption(option: SelectItemWithPlaceholder | null) {
   return !isHeaderOption(option) && !isSeparatorOption(option) && !isPlaceholderOption(option);
 }
 
-const getUniqueIdForOption = (parentId = '', option) => {
+const getUniqueIdForOption = (parentId: string | undefined, option: SelectItem | null) => {
   if (option == null) {
     return undefined;
   }
 
-  const uniqueOptionId = option.value || (option.label?.replace(/\s/g, '') ?? '');
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  const uniqueOptionId =
+    option.value || (typeof option.label === 'string' ? option.label.replace(/\s/g, '') : '');
 
-  return `option-${parentId}-${uniqueOptionId}`;
+  return `option-${parentId ?? ''}-${uniqueOptionId}`;
 };
 
+export interface SelectProps {
+  placeholder?: string;
+  id?: string;
+  required?: boolean;
+  disabled?: boolean;
+  inverse?: boolean;
+  dropdownRight?: `${Size.EXTRA_SMALL | Size.SMALL | Size.MEDIUM | Size.LARGE | Size.EXTRA_LARGE}`;
+  dropdownWidth?: `${Size.SMALL | Size.MEDIUM | Size.LARGE}`;
+  size?: `${Size.SMALL | Size.MEDIUM | Size.LARGE}`;
+  block?: boolean;
+  selected?: SelectOptionItem;
+  /**
+   * Search toggle
+   * if `true` default search functionality being enabled (not case sensitive search in option labels & currency props)
+   * if `function` you can define your own search function to implement custom search experience. This search function used while filtering the options array.
+   */
+  search?: boolean | ((option: SelectItemWithPlaceholder, searchValue: string) => boolean);
+  options: SelectItem[];
+  searchValue?: string;
+  searchPlaceholder?: string;
+  classNames?: Record<string, string>;
+  dropdownUp?: boolean;
+  buttonProps?: Extract<ButtonProps, { as?: 'button' }>;
+  dropdownProps?: React.ComponentPropsWithoutRef<'ul'>;
+  onChange: (value: SelectItem | typeof DEFAULT_SELECTED_OPTION) => void;
+  onFocus?: React.FocusEventHandler<HTMLDivElement>;
+  onBlur?: React.FocusEventHandler<HTMLDivElement>;
+  /**
+   * To have full control of your search value and response use `onSearchChange` function combined with `searchValue` and custom filtering on the options array.
+   * DO NOT USE TOGETHER WITH `search` PROPERTY
+   */
+  onSearchChange?: (value: string) => void;
+}
+
+const defaultClassNames = {};
+
 /**
  * @deprecated Use `SelectInput` instead (https://neptune.wise.design/blog/2023-11-28-adopting-our-new-selectinput)
  */
@@ -86,8 +144,8 @@ export default function Select({
   disabled,
   inverse,
   dropdownWidth,
-  size,
-  block,
+  size = 'md',
+  block = true,
   selected,
   search,
   onChange,
@@ -95,29 +153,28 @@ export default function Select({
   onBlur,
   options: defaultOptions,
   onSearchChange,
-  searchValue: initSearchValue,
+  searchValue: initSearchValue = '',
   searchPlaceholder,
-  // eslint-disable-next-line unicorn/prevent-abbreviations
-  classNames: classNamesProp,
+  classNames: classNamesProp = defaultClassNames,
   dropdownUp,
   dropdownProps,
   buttonProps,
-}) {
+}: SelectProps) {
   const inputAttributes = useInputAttributes();
 
   const { formatMessage } = useIntl();
   const { isModern } = useTheme();
-  const s = (className) => classNamesProp[className] || className;
+  const s = (className: string) => classNamesProp[className] || className;
   const [open, setOpen] = useState(false);
   const [searchValue, setSearchValue] = useState(DEFAULT_SEARCH_VALUE);
-  const [keyboardFocusedOptionIndex, setKeyboardFocusedOptionIndex] = useState(null);
-  const keyboardFocusedReference = useRef();
-  const previousKeyboardFocusedOptionIndex = useRef();
+  const [keyboardFocusedOptionIndex, setKeyboardFocusedOptionIndex] = useState(-1);
+  const keyboardFocusedReference = useRef<HTMLLIElement>(null);
+  const previousKeyboardFocusedOptionIndex = useRef(-1);
   const [numberOfOptionsShown, setNumberOfOptionsShown] = useState(DEFAULT_OPTIONS_PAGE_SIZE);
-  const searchBoxReference = useRef(null);
-  const selectReference = useRef(null);
-  const dropdownButtonReference = useRef(null);
-  const optionsListReference = useRef(null);
+  const searchBoxReference = useRef<HTMLInputElement>(null);
+  const selectReference = useRef<HTMLDivElement>(null);
+  const dropdownButtonReference = useRef<HTMLButtonElement>(null);
+  const optionsListReference = useRef<HTMLUListElement>(null);
   const isSearchEnabled = !!onSearchChange || !!search;
   const isDropdownAutoWidth = dropdownWidth == null;
 
@@ -145,7 +202,7 @@ export default function Select({
   const { isMobile } = useLayout();
 
   useEffect(() => {
-    let cancelled;
+    let cancelled = false;
 
     if (keyboardFocusedOptionIndex >= 0) {
       requestAnimationFrame(() => {
@@ -168,42 +225,40 @@ export default function Select({
     setOpen(true);
   };
 
-  const handleTouchStart = (event) => {
+  const handleTouchStart: React.TouchEventHandler<HTMLDivElement> = (event) => {
     if (event.currentTarget === event.target && open) {
       handleCloseOptions();
     }
   };
 
-  const handleOnFocus = (event) => {
-    if (onFocus) {
-      onFocus(event);
-    }
+  const handleOnFocus: React.FocusEventHandler<HTMLDivElement> = (event) => {
+    onFocus?.(event);
   };
 
-  const handleOnBlur = (event) => {
+  const handleOnBlur: React.FocusEventHandler<HTMLDivElement> = (event) => {
     const { nativeEvent } = event;
     if (nativeEvent) {
       const elementReceivingFocus = nativeEvent.relatedTarget;
       const select = event.currentTarget;
-      if (select && elementReceivingFocus && select.contains(elementReceivingFocus)) {
+      if (
+        select &&
+        elementReceivingFocus instanceof Node &&
+        select.contains(elementReceivingFocus)
+      ) {
         return;
       }
     }
 
-    if (onBlur) {
-      onBlur(event);
-    }
+    onBlur?.(event);
   };
 
-  const handleSearchChange = (event) => {
+  const handleSearchChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
     setNumberOfOptionsShown(DEFAULT_OPTIONS_PAGE_SIZE);
     setSearchValue(event.target.value);
-    if (onSearchChange) {
-      onSearchChange(event.target.value);
-    }
+    onSearchChange?.(event.target.value);
   };
 
-  const handleKeyDown = (event) => {
+  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
     switch (event.key) {
       case 'ArrowUp':
       case 'ArrowDown':
@@ -247,25 +302,25 @@ export default function Select({
   };
 
   function selectKeyboardFocusedOption() {
-    if (keyboardFocusedOptionIndex != null && selectableOptions.length > 0) {
+    if (keyboardFocusedOptionIndex >= 0 && selectableOptions.length > 0) {
       selectOption(selectableOptions[keyboardFocusedOptionIndex]);
     }
   }
 
-  function moveFocusWithDifference(difference) {
+  function moveFocusWithDifference(difference: number) {
     const selectedOptionIndex = selectableOptions.reduce((optionIndex, current, index) => {
-      if (optionIndex != null) {
+      if (optionIndex >= 0) {
         return optionIndex;
       }
       if (isOptionSelected(selected, current)) {
         return index;
       }
-      return null;
-    }, null);
-    const previousFocusedIndex = previousKeyboardFocusedOptionIndex.current ?? -1;
+      return -1;
+    }, -1);
+    const previousFocusedIndex = previousKeyboardFocusedOptionIndex.current;
     let indexToStartMovingFrom = previousFocusedIndex;
-    if (previousFocusedIndex === -1) {
-      if (selectedOptionIndex == null) {
+    if (previousFocusedIndex < 0) {
+      if (selectedOptionIndex < 0) {
         setKeyboardFocusedOptionIndex(0);
       } else {
         indexToStartMovingFrom = selectedOptionIndex;
@@ -287,8 +342,7 @@ export default function Select({
         if (
           !isSearchEnabled &&
           optionsListReference.current &&
-          (previousKeyboardFocusedOptionIndex.current == null ||
-            Number.isNaN(previousKeyboardFocusedOptionIndex.current))
+          previousKeyboardFocusedOptionIndex.current < 0
         ) {
           optionsListReference.current.focus();
         }
@@ -296,31 +350,31 @@ export default function Select({
 
       previousKeyboardFocusedOptionIndex.current = keyboardFocusedOptionIndex;
     } else {
-      previousKeyboardFocusedOptionIndex.current = null;
+      previousKeyboardFocusedOptionIndex.current = -1;
     }
   }, [open, searchValue, isSearchEnabled, isMobile, keyboardFocusedOptionIndex]);
 
   const handleCloseOptions = () => {
     setOpen(false);
-    setKeyboardFocusedOptionIndex(null);
+    setKeyboardFocusedOptionIndex(-1);
     if (dropdownButtonReference.current) {
       dropdownButtonReference.current.focus();
     }
   };
 
-  function createSelectHandlerForOption(option) {
-    return (event) => {
+  function createSelectHandlerForOption(option: SelectItemWithPlaceholder) {
+    return (event: React.SyntheticEvent) => {
       stopPropagation(event);
       selectOption(option);
     };
   }
 
-  function selectOption(option) {
+  function selectOption(option: SelectItemWithPlaceholder) {
     onChange(isPlaceholderOption(option) ? DEFAULT_SELECTED_OPTION : option);
     handleCloseOptions();
   }
 
-  function renderOptionsList({ className } = {}) {
+  function renderOptionsList({ className = '' } = {}) {
     const dropdownClass = clsx(
       s('np-dropdown-menu'),
       {
@@ -337,8 +391,8 @@ export default function Select({
         id={listboxId}
         role="listbox"
         aria-orientation="vertical"
-        aria-activedescendant={getUniqueIdForOption(id, selected)}
-        tabIndex="-1"
+        aria-activedescendant={getUniqueIdForOption(id, selected ?? null)}
+        tabIndex={-1}
         className={dropdownClass}
         {...dropdownProps}
       >
@@ -362,7 +416,7 @@ export default function Select({
   }
 
   function ShowMoreOption() {
-    function handleOnClick(event) {
+    function handleOnClick(event: React.SyntheticEvent<HTMLLIElement>) {
       stopPropagation(event);
       setNumberOfOptionsShown(numberOfOptionsShown + DEFAULT_OPTIONS_PAGE_SIZE);
     }
@@ -400,7 +454,7 @@ export default function Select({
   }
 
   // eslint-disable-next-line react/prop-types
-  function HeaderOption({ children }) {
+  function HeaderOption({ children }: { children?: React.ReactNode }) {
     return (
       <li // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
         className={clsx(s('np-dropdown-header'), s('np-text-title-group'))}
@@ -412,11 +466,11 @@ export default function Select({
     );
   }
 
-  function isOptionSelected(selected, option) {
+  function isOptionSelected(selected: SelectOptionItem | undefined, option: SelectItem) {
     return selected?.value === option?.value;
   }
 
-  const renderOption = (option, index) => {
+  const renderOption = (option: SelectItem, index: number) => {
     const separatorOption = option;
     if (isSeparatorOption(separatorOption) && separatorOption?.separator) {
       return <SeparatorOption key={index} />;
@@ -454,20 +508,25 @@ export default function Select({
         aria-selected={isActive}
         aria-disabled={option.disabled}
         role="option"
-        tabIndex="-1"
+        tabIndex={-1}
         className={className}
         onClick={handleOnClick}
         onKeyPress={handleOnClick}
       >
         {/* @ts-expect-error options needs DOM refactoring */}
         <a disabled={selectOption.disabled}>
-          <Option {...selectOption} classNames={classNamesProp} />
+          <Option
+            label={undefined}
+            value={undefined}
+            {...selectOption}
+            classNames={classNamesProp}
+          />
         </a>
       </li>
     );
   };
 
-  function getIndexWithoutHeadersForIndexWithHeaders(index) {
+  function getIndexWithoutHeadersForIndexWithHeaders(index: number) {
     return options.reduce((sum, option, currentIndex) => {
       if (currentIndex < index && isActionableOption(option)) {
         return sum + 1;
@@ -478,11 +537,11 @@ export default function Select({
 
   const hasActiveOptions = !!defaultOptions.length;
   if (open && (initSearchValue || searchValue)) {
-    if (hasActiveOptions && keyboardFocusedOptionIndex == null) {
+    if (hasActiveOptions && keyboardFocusedOptionIndex < 0) {
       setKeyboardFocusedOptionIndex(0);
     }
-    if (!hasActiveOptions && keyboardFocusedOptionIndex != null) {
-      setKeyboardFocusedOptionIndex(null);
+    if (!hasActiveOptions && keyboardFocusedOptionIndex >= 0) {
+      setKeyboardFocusedOptionIndex(-1);
     }
   }
 
@@ -517,7 +576,7 @@ export default function Select({
         {...buttonProps}
       >
         {selected ? (
-          <Option {...selected} classNames={classNamesProp} selected />
+          <Option label={undefined} {...selected} classNames={classNamesProp} selected />
         ) : (
           <span className={s('form-control-placeholder')}>{placeholder}</span>
         )}
@@ -562,80 +621,3 @@ export default function Select({
     </div>
   );
 }
-
-Select.propTypes = {
-  placeholder: PropTypes.string,
-  id: PropTypes.string,
-  required: PropTypes.bool,
-  disabled: PropTypes.bool,
-  inverse: PropTypes.bool,
-  dropdownRight: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-  dropdownWidth: PropTypes.oneOf(['sm', 'md', 'lg']),
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  block: PropTypes.bool,
-  selected: PropTypes.shape({
-    value: PropTypes.any.isRequired,
-    label: PropTypes.node,
-    icon: PropTypes.node,
-    currency: PropTypes.string,
-    note: PropTypes.node,
-    secondary: PropTypes.node,
-  }),
-  /**
-   * Search toggle
-   * if `true` default search functionality being enabled (not case sensitive search in option labels & currency props)
-   * if `function` you can define your own search function to implement custom search experience. This search function used while filtering the options array. The custom search function takes two parameters. First is the option the second is the keyword.
-   */
-  search: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.any,
-      label: PropTypes.node,
-      header: PropTypes.node,
-      icon: PropTypes.node,
-      currency: PropTypes.string,
-      note: PropTypes.node,
-      secondary: PropTypes.node,
-      separator: PropTypes.bool,
-      disabled: PropTypes.bool,
-      searchStrings: PropTypes.arrayOf(PropTypes.string),
-    }),
-  ).isRequired,
-  searchValue: PropTypes.string,
-  searchPlaceholder: PropTypes.string,
-  classNames: PropTypes.objectOf(PropTypes.string),
-  dropdownUp: PropTypes.bool,
-  buttonProps: PropTypes.object,
-  dropdownProps: PropTypes.object,
-  onChange: PropTypes.func.isRequired,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  /**
-   * To have full control of your search value and response use `onSearchChange` function combined with `searchValue` and custom filtering on the options array.
-   * DO NOT USE TOGETHER WITH `search` PROPERTY
-   */
-  onSearchChange: PropTypes.func,
-};
-
-Select.defaultProps = {
-  id: undefined,
-  placeholder: undefined,
-  size: 'md',
-  dropdownRight: null,
-  dropdownWidth: null,
-  inverse: false,
-  required: false,
-  disabled: false,
-  block: true,
-  selected: null,
-  onFocus: null,
-  onBlur: null,
-  onSearchChange: undefined,
-  search: false,
-  searchValue: '',
-  searchPlaceholder: undefined,
-  classNames: {},
-  dropdownUp: false,
-  buttonProps: {},
-  dropdownProps: {},
-};

package/src/select/index.ts

@@ -0,0 +1,7 @@
+export { default } from './Select';
+export type {
+  SelectItem,
+  SelectItemWithPlaceholder,
+  SelectOptionItem,
+  SelectProps,
+} from './Select';

package/src/snackbar/Snackbar.tsx

@@ -107,7 +107,13 @@ export class Snackbar extends Component<SnackbarProps, SnackbarState> {
           }}
           unmountOnExit
         >
-          <Body ref={this.bodyRef} as="span" className="snackbar__text" aria-live="polite">
+          <Body
+            ref={this.bodyRef}
+            as="span"
+            className="snackbar__text"
+            role="status"
+            aria-live="assertive"
+          >
             {text}
             {action ? (
               <ActionButton className="snackbar__text__action" onClick={action.onClick}>

package/src/upload/Upload.story.tsx

@@ -26,6 +26,7 @@ export const Basic = {
     maxSize: MAX_SIZE_DEFAULT,
     usAccept: 'image/*',
     usLabel: 'Front of your ID document',
+    usDisabled: false,
     httpOptions: {
       url: 'https://httpbin.org/post',
       method: 'POST',

package/src/upload/steps/uploadImageStep/uploadImageStep.tsx

@@ -64,7 +64,11 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
           <div className="m-b-3">{this.getImage()}</div>
           {usLabel && <h4 className="np-text-title-body m-b-1">{usLabel}</h4>}
           {usPlaceholder && <p className="np-text-body-large m-b-3">{String(usPlaceholder)}</p>}
-          <label className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}>
+          <label
+            className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}
+            role="button"
+            aria-disabled={usDisabled}
+          >
             {usButtonText ? (
               <span>{usButtonText}</span>
             ) : (

package/build/select/index.js

@@ -1,8 +0,0 @@
-'use strict';
-
-var Select = require('./Select.js');
-
-
-
-module.exports = Select;
-//# sourceMappingURL=index.js.map

package/build/select/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/build/select/index.mjs

@@ -1,6 +0,0 @@
-import Select from './Select.mjs';
-
-
-
-export { Select as default };
-//# sourceMappingURL=index.mjs.map

package/build/select/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/src/select/index.js

@@ -1,3 +0,0 @@
-import Select from './Select';
-
-export default Select;