@transferwise/components 46.44.1 → 46.46.0

package/build/select/Select.messages.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var reactIntl = require('react-intl');
+
+var messages = reactIntl.defineMessages({
+  searchPlaceholder: {
+    id: "neptune.Select.searchPlaceholder"
+  }
+});
+
+module.exports = messages;
+//# sourceMappingURL=Select.messages.js.map

package/build/select/Select.messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.messages.js","sources":["../../src/select/Select.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  searchPlaceholder: {\n    id: 'neptune.Select.searchPlaceholder',\n    defaultMessage: 'Search...',\n  },\n});\n"],"names":["defineMessages","searchPlaceholder","id"],"mappings":";;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,iBAAiB,EAAE;IACjBC,EAAE,EAAA,kCAAA;AAEH,GAAA;AACF,CAAA,CAAC;;;;"}

package/build/select/Select.messages.mjs

@@ -0,0 +1,10 @@
+import { defineMessages } from 'react-intl';
+
+var messages = defineMessages({
+  searchPlaceholder: {
+    id: "neptune.Select.searchPlaceholder"
+  }
+});
+
+export { messages as default };
+//# sourceMappingURL=Select.messages.mjs.map

package/build/select/Select.messages.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.messages.mjs","sources":["../../src/select/Select.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  searchPlaceholder: {\n    id: 'neptune.Select.searchPlaceholder',\n    defaultMessage: 'Search...',\n  },\n});\n"],"names":["defineMessages","searchPlaceholder","id"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,iBAAiB,EAAE;IACjBC,EAAE,EAAA,kCAAA;AAEH,GAAA;AACF,CAAA,CAAC;;;;"}

package/build/select/Select.mjs

@@ -0,0 +1,572 @@
+import { useTheme } from '@wise/components-theming';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { useState, useRef, useMemo, useId, useEffect } from 'react';
+import { useIntl } from 'react-intl';
+import Button from '../button/Button.mjs';
+import Chevron from '../chevron/Chevron.mjs';
+import BottomSheet from '../common/bottomSheet/BottomSheet.mjs';
+import { stopPropagation } from '../common/domHelpers/documentIosClick.mjs';
+import Panel from '../common/panel/Panel.mjs';
+import Drawer from '../drawer/Drawer.mjs';
+import { useInputAttributes } from '../inputs/contexts.mjs';
+import messages from './Select.messages.mjs';
+import Option from './option/Option.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useLayout } from '../common/hooks/useLayout/useLayout.mjs';
+import SearchBox from './searchBox/SearchBox.mjs';
+import { Position } from '../common/propsValues/position.mjs';
+
+const DEFAULT_SEARCH_VALUE = '';
+const DEFAULT_OPTIONS_PAGE_SIZE = 1000;
+const includesString = (string1, string2) => string1.toLowerCase().includes(string2.toLowerCase());
+function defaultFilterFunction(option, searchValue) {
+  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) || !!currency && includesString(currency, searchValue) || !!searchStrings && searchStrings.some(string => includesString(string, searchValue));
+}
+function isActionableOption(option) {
+  return !option.header && !option.separator && !option.disabled;
+}
+function isHeaderOption(option) {
+  return option != null && 'header' in option;
+}
+function isSeparatorOption(option) {
+  return option != null && 'separator' in option;
+}
+function clamp(from, to, value) {
+  return Math.max(Math.min(to, value), from);
+}
+
+/**
+ * No option or placeholder option is selected
+ */
+const DEFAULT_SELECTED_OPTION = null;
+function isPlaceholderOption(option) {
+  return option === DEFAULT_SELECTED_OPTION || 'placeholder' in option;
+}
+function isSearchableOption(option) {
+  return !isHeaderOption(option) && !isSeparatorOption(option) && !isPlaceholderOption(option);
+}
+const getUniqueIdForOption = (parentId = '', option) => {
+  if (option == null) {
+    return undefined;
+  }
+  const uniqueOptionId = option.value || (option.label?.replace(/\s/g, '') ?? '');
+  return `option-${parentId}-${uniqueOptionId}`;
+};
+
+/**
+ * @deprecated Use `SelectInput` instead (https://neptune.wise.design/blog/2023-11-28-adopting-our-new-selectinput)
+ */
+function Select({
+  placeholder,
+  id,
+  required,
+  disabled,
+  inverse,
+  dropdownWidth,
+  size,
+  block,
+  selected,
+  search,
+  onChange,
+  onFocus,
+  onBlur,
+  options: defaultOptions,
+  onSearchChange,
+  searchValue: initSearchValue,
+  searchPlaceholder,
+  // eslint-disable-next-line unicorn/prevent-abbreviations
+  classNames: classNamesProp,
+  dropdownUp,
+  dropdownProps,
+  buttonProps
+}) {
+  const inputAttributes = useInputAttributes();
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    isModern
+  } = useTheme();
+  const s = className => 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 [numberOfOptionsShown, setNumberOfOptionsShown] = useState(DEFAULT_OPTIONS_PAGE_SIZE);
+  const searchBoxReference = useRef(null);
+  const selectReference = useRef(null);
+  const dropdownButtonReference = useRef(null);
+  const optionsListReference = useRef(null);
+  const isSearchEnabled = !!onSearchChange || !!search;
+  const isDropdownAutoWidth = dropdownWidth == null;
+  const options = useMemo(() => {
+    if (!search || !searchValue) {
+      return defaultOptions;
+    }
+    return defaultOptions.filter(isSearchableOption).filter(option => {
+      if (typeof search === 'function') {
+        return search(option, searchValue);
+      }
+      return defaultFilterFunction(option, searchValue);
+    });
+  }, [defaultOptions, search, searchValue]);
+  const selectableOptions = useMemo(() => options.filter(isActionableOption), [options]);
+  const focusedOption = selectableOptions[keyboardFocusedOptionIndex];
+  const fallbackButtonId = useId();
+  const computedId = id || inputAttributes.id || fallbackButtonId;
+  const listboxId = `${computedId}-listbox`;
+  const searchBoxId = `${computedId}-searchbox`;
+  const {
+    isMobile
+  } = useLayout();
+  useEffect(() => {
+    let cancelled;
+    if (keyboardFocusedOptionIndex >= 0) {
+      requestAnimationFrame(() => {
+        if (!cancelled) {
+          if (isSearchEnabled) {
+            keyboardFocusedReference.current?.scrollIntoView?.({
+              block: 'center'
+            });
+          } else {
+            keyboardFocusedReference.current?.focus();
+          }
+        }
+      });
+      return () => {
+        cancelled = true;
+      };
+    }
+  }, [keyboardFocusedOptionIndex, isSearchEnabled]);
+  const handleOnClick = () => {
+    setOpen(true);
+  };
+  const handleTouchStart = event => {
+    if (event.currentTarget === event.target && open) {
+      handleCloseOptions();
+    }
+  };
+  const handleOnFocus = event => {
+    if (onFocus) {
+      onFocus(event);
+    }
+  };
+  const handleOnBlur = event => {
+    const {
+      nativeEvent
+    } = event;
+    if (nativeEvent) {
+      const elementReceivingFocus = nativeEvent.relatedTarget;
+      const select = event.currentTarget;
+      if (select && elementReceivingFocus && select.contains(elementReceivingFocus)) {
+        return;
+      }
+    }
+    if (onBlur) {
+      onBlur(event);
+    }
+  };
+  const handleSearchChange = event => {
+    setNumberOfOptionsShown(DEFAULT_OPTIONS_PAGE_SIZE);
+    setSearchValue(event.target.value);
+    if (onSearchChange) {
+      onSearchChange(event.target.value);
+    }
+  };
+  const handleKeyDown = event => {
+    switch (event.key) {
+      case 'ArrowUp':
+      case 'ArrowDown':
+        if (open) {
+          moveFocusWithDifference(event.key === 'ArrowUp' ? -1 : 1);
+        } else {
+          setOpen(true);
+        }
+        stopPropagation(event);
+        break;
+      case ' ':
+        if (event.target !== searchBoxReference.current) {
+          if (open) {
+            selectKeyboardFocusedOption();
+          } else {
+            setOpen(true);
+          }
+          stopPropagation(event);
+        }
+        break;
+      case 'Enter':
+        if (open) {
+          selectKeyboardFocusedOption();
+        } else {
+          setOpen(true);
+        }
+        stopPropagation(event);
+        break;
+      case 'Escape':
+        handleCloseOptions();
+        stopPropagation(event);
+        break;
+      case 'Tab':
+        if (open) {
+          selectKeyboardFocusedOption();
+        }
+        break;
+    }
+  };
+  function selectKeyboardFocusedOption() {
+    if (keyboardFocusedOptionIndex != null && selectableOptions.length > 0) {
+      selectOption(selectableOptions[keyboardFocusedOptionIndex]);
+    }
+  }
+  function moveFocusWithDifference(difference) {
+    const selectedOptionIndex = selectableOptions.reduce((optionIndex, current, index) => {
+      if (optionIndex != null) {
+        return optionIndex;
+      }
+      if (isOptionSelected(selected, current)) {
+        return index;
+      }
+      return null;
+    }, null);
+    const previousFocusedIndex = previousKeyboardFocusedOptionIndex.current ?? -1;
+    let indexToStartMovingFrom = previousFocusedIndex;
+    if (previousFocusedIndex === -1) {
+      if (selectedOptionIndex == null) {
+        setKeyboardFocusedOptionIndex(0);
+      } else {
+        indexToStartMovingFrom = selectedOptionIndex;
+      }
+    }
+    const unClampedNewIndex = indexToStartMovingFrom + difference;
+    const newIndex = clamp(0, selectableOptions.length - 1, unClampedNewIndex);
+    setKeyboardFocusedOptionIndex(newIndex);
+  }
+  useEffect(() => {
+    if (open) {
+      if (!isMobile || searchValue) {
+        if (isSearchEnabled && searchBoxReference.current) {
+          searchBoxReference.current.focus();
+        }
+        if (!isSearchEnabled && optionsListReference.current && (previousKeyboardFocusedOptionIndex.current == null || Number.isNaN(previousKeyboardFocusedOptionIndex.current))) {
+          optionsListReference.current.focus();
+        }
+      }
+      previousKeyboardFocusedOptionIndex.current = keyboardFocusedOptionIndex;
+    } else {
+      previousKeyboardFocusedOptionIndex.current = null;
+    }
+  }, [open, searchValue, isSearchEnabled, isMobile, keyboardFocusedOptionIndex]);
+  const handleCloseOptions = () => {
+    setOpen(false);
+    setKeyboardFocusedOptionIndex(null);
+    if (dropdownButtonReference.current) {
+      dropdownButtonReference.current.focus();
+    }
+  };
+  function createSelectHandlerForOption(option) {
+    return event => {
+      stopPropagation(event);
+      selectOption(option);
+    };
+  }
+  function selectOption(option) {
+    onChange(isPlaceholderOption(option) ? DEFAULT_SELECTED_OPTION : option);
+    handleCloseOptions();
+  }
+  function renderOptionsList({
+    className
+  } = {}) {
+    const dropdownClass = classNames(s('np-dropdown-menu'), {
+      [s('np-dropdown-menu-desktop')]: !isMobile,
+      [s(`np-dropdown-menu-${dropdownWidth}`)]: !isMobile && !isDropdownAutoWidth
+    }, s(className));
+    const showPlaceholder = !required && !isSearchEnabled && Boolean(placeholder);
+    return /*#__PURE__*/jsxs("ul", {
+      ref: optionsListReference,
+      id: listboxId,
+      role: "listbox",
+      "aria-orientation": "vertical",
+      "aria-activedescendant": getUniqueIdForOption(id, selected),
+      tabIndex: "-1",
+      className: dropdownClass,
+      ...dropdownProps,
+      children: [showPlaceholder && /*#__PURE__*/jsx(PlaceHolderOption, {}), isSearchEnabled && /*#__PURE__*/jsx(SearchBox, {
+        ref: searchBoxReference,
+        id: searchBoxId,
+        classNames: classNamesProp,
+        value: initSearchValue || searchValue,
+        placeholder: searchPlaceholder || formatMessage(messages.searchPlaceholder),
+        focusedOptionId: getUniqueIdForOption(id, focusedOption),
+        onChange: handleSearchChange,
+        onClick: stopPropagation
+      }), options.slice(0, numberOfOptionsShown).map(renderOption), numberOfOptionsShown < options.length && /*#__PURE__*/jsx(ShowMoreOption, {})]
+    });
+  }
+  function ShowMoreOption() {
+    function handleOnClick(event) {
+      stopPropagation(event);
+      setNumberOfOptionsShown(numberOfOptionsShown + DEFAULT_OPTIONS_PAGE_SIZE);
+    }
+    return (
+      /*#__PURE__*/
+      /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
+      jsx("li", {
+        className: classNames(s('clickable'), s('border-bottom'), s('show-more')),
+        onClick: handleOnClick,
+        onKeyPress: handleOnClick,
+        children: /*#__PURE__*/jsx("a", {
+          children: "..."
+        })
+      })
+    );
+  }
+  function PlaceHolderOption() {
+    const placeholderOption = {
+      placeholder
+    };
+    return (
+      /*#__PURE__*/
+      /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
+      jsx("li", {
+        className: classNames(s('clickable'), s('border-bottom')),
+        onClick: createSelectHandlerForOption(placeholderOption),
+        onKeyPress: createSelectHandlerForOption(placeholderOption),
+        children: /*#__PURE__*/jsx("a", {
+          children: placeholder
+        })
+      })
+    );
+  }
+
+  // eslint-disable-next-line react/prop-types
+  function SeparatorOption() {
+    return /*#__PURE__*/jsx("li", {
+      className: s('np-separator'),
+      "aria-hidden": true
+    });
+  }
+
+  // eslint-disable-next-line react/prop-types
+  function HeaderOption({
+    children
+  }) {
+    return /*#__PURE__*/jsx("li", {
+      // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
+      className: classNames(s('np-dropdown-header'), s('np-text-title-group')),
+      onClick: stopPropagation,
+      onKeyPress: stopPropagation,
+      children: children
+    });
+  }
+  function isOptionSelected(selected, option) {
+    return selected?.value === option?.value;
+  }
+  const renderOption = (option, index) => {
+    const separatorOption = option;
+    if (isSeparatorOption(separatorOption) && separatorOption?.separator) {
+      return /*#__PURE__*/jsx(SeparatorOption, {}, index);
+    }
+    const headerOption = option;
+    if (isHeaderOption(headerOption) && headerOption.header) {
+      return /*#__PURE__*/jsx(HeaderOption, {
+        children: headerOption.header
+      }, index);
+    }
+    const isActive = isOptionSelected(selected, option);
+    const selectOption = option;
+    const isFocusedWithKeyboard = !selectOption.disabled && keyboardFocusedOptionIndex === getIndexWithoutHeadersForIndexWithHeaders(index);
+    const className = classNames(s('np-dropdown-item'), selectOption.disabled ? [s('disabled')] : s('clickable'), {
+      [s('active')]: isActive,
+      [s('np-dropdown-item--focused')]: isFocusedWithKeyboard
+    });
+    const handleOnClick = selectOption.disabled ? stopPropagation : createSelectHandlerForOption(selectOption);
+    return (
+      /*#__PURE__*/
+      /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
+      jsx("li", {
+        ref: isFocusedWithKeyboard ? keyboardFocusedReference : undefined,
+        id: getUniqueIdForOption(id, option),
+        "aria-selected": isActive,
+        "aria-disabled": option.disabled,
+        role: "option",
+        tabIndex: "-1",
+        className: className,
+        onClick: handleOnClick,
+        onKeyPress: handleOnClick,
+        children: /*#__PURE__*/jsx("a", {
+          disabled: selectOption.disabled,
+          children: /*#__PURE__*/jsx(Option, {
+            ...selectOption,
+            classNames: classNamesProp
+          })
+        })
+      }, index)
+    );
+  };
+  function getIndexWithoutHeadersForIndexWithHeaders(index) {
+    return options.reduce((sum, option, currentIndex) => {
+      if (currentIndex < index && isActionableOption(option)) {
+        return sum + 1;
+      }
+      return sum;
+    }, 0);
+  }
+  const hasActiveOptions = !!defaultOptions.length;
+  if (open && (initSearchValue || searchValue)) {
+    if (hasActiveOptions && keyboardFocusedOptionIndex == null) {
+      setKeyboardFocusedOptionIndex(0);
+    }
+    if (!hasActiveOptions && keyboardFocusedOptionIndex != null) {
+      setKeyboardFocusedOptionIndex(null);
+    }
+  }
+  return /*#__PURE__*/jsxs("div", {
+    // eslint-disable-line jsx-a11y/no-static-element-interactions
+    ref: selectReference,
+    className: classNames(s('np-select'), block ? s('btn-block') : null, s('btn-group')),
+    onKeyDown: handleKeyDown,
+    onTouchMove: handleTouchStart,
+    onFocus: handleOnFocus,
+    onBlur: handleOnBlur,
+    children: [/*#__PURE__*/jsxs(Button, {
+      ref: dropdownButtonReference,
+      ...inputAttributes,
+      id: computedId,
+      block: block,
+      size: size,
+      htmlType: "button",
+      className: classNames(s('np-dropdown-toggle'), s('np-text-body-large'), inverse ? s('np-dropdown-toggle-navy') : null)
+      // reset Button's styles
+      ,
+      type: null,
+      priority: null,
+      disabled: disabled,
+      "aria-controls": listboxId,
+      "aria-expanded": open,
+      onClick: handleOnClick,
+      ...buttonProps,
+      children: [selected ? /*#__PURE__*/jsx(Option, {
+        ...selected,
+        classNames: classNamesProp,
+        selected: true
+      }) : /*#__PURE__*/jsx("span", {
+        className: s('form-control-placeholder'),
+        children: placeholder
+      }), /*#__PURE__*/jsx(Chevron
+      // disabled={disabled}
+      , {
+        className: classNames(s('tw-icon'), s('tw-chevron-up-icon'), s('tw-chevron'), s('bottom'), s('np-select-chevron'))
+      })]
+    }), isMobile ? isSearchEnabled ? /*#__PURE__*/jsx(Drawer, {
+      open: open,
+      headerTitle: searchPlaceholder || formatMessage(messages.searchPlaceholder),
+      onClose: handleCloseOptions,
+      children: renderOptionsList()
+    }) : /*#__PURE__*/jsx(BottomSheet, {
+      open: open,
+      onClose: handleCloseOptions,
+      children: renderOptionsList({
+        className: isModern ? '' : 'p-a-1'
+      })
+    }) : /*#__PURE__*/jsx(Panel, {
+      open: open,
+      flip: false,
+      altAxis: true,
+      anchorRef: selectReference,
+      anchorWidth: isDropdownAutoWidth,
+      position: dropdownUp ? Position.TOP : Position.BOTTOM,
+      onClose: handleCloseOptions,
+      children: renderOptionsList({
+        className: 'p-a-1'
+      })
+    })]
+  });
+}
+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: {}
+};
+
+export { Select as default };
+//# sourceMappingURL=Select.mjs.map