@transferwise/components 0.0.0-experimental-ddeb968 → 0.0.0-experimental-80dda9c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-ddeb968",
+  "version": "0.0.0-experimental-80dda9c",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,9 +92,9 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
-    "@transferwise/less-config": "3.1.0",
     "@transferwise/neptune-css": "14.13.1",
-    "@wise/components-theming": "1.5.0"
+    "@wise/components-theming": "1.5.0",
+    "@transferwise/less-config": "3.1.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",
@@ -123,6 +123,7 @@
     "lodash.debounce": "^4.0.8",
     "lodash.topairs": "^4.3.0",
     "merge-props": "^6.0.0",
+    "prop-types": "^15.8.1",
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
     "virtua": "^0.33.3"
@@ -141,6 +142,7 @@
     "build:clean": "rm -rf lib build",
     "build:crowdin-source-file": "formatjs extract 'src/**/*.messages.+(js|ts|tsx)' --out-file src/i18n/en.json --format simple && prettier --write src/i18n/*.json",
     "build:js": "rollup --config --sourcemap",
+    "build:generate-types": "node ./scripts/generate-type-declarations.js",
     "build:copy-files": "cpx 'src/**/!(db)/*.{json,svg}' build",
     "build:copy-css": "cpx 'src/main.css' build/ & cpx 'src/**/*.css' build/styles/",
     "build:copy-lang": "cpx 'src/i18n/*.json' build/i18n && cpx 'src/i18n/index.js' build/i18n",

package/src/index.ts

@@ -67,12 +67,6 @@ export type { RadioProps } from './radio';
 export type { RadioGroupProps, RadioGroupRadio } from './radioGroup';
 export type { RadioOptionProps } from './radioOption';
 export type { SegmentedControlProps } from './segmentedControl';
-export type {
-  SelectItem,
-  SelectItemWithPlaceholder,
-  SelectOptionItem,
-  SelectProps,
-} from './select';
 export type { SlidingPanelProps } from './slidingPanel';
 export type { SnackbarProps } from './snackbar/Snackbar';
 export type { SnackbarContextType } from './snackbar/SnackbarContext';

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

@@ -1,11 +1,12 @@
 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, { ButtonProps } from '../button';
+import Button from '../button';
 import Chevron from '../chevron';
-import { Position, Size } from '../common';
+import { Position } from '../common';
 import BottomSheet from '../common/bottomSheet';
 import { stopPropagation } from '../common/domHelpers';
 import { useLayout } from '../common/hooks';
@@ -20,56 +21,35 @@ import SearchBox from './searchBox';
 const DEFAULT_SEARCH_VALUE = '';
 const DEFAULT_OPTIONS_PAGE_SIZE = 1000;
 
-const includesString = (string1: string, string2: string) =>
-  string1.toLowerCase().includes(string2.toLowerCase());
+const includesString = (string1, string2) => string1.toLowerCase().includes(string2.toLowerCase());
 
-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) {
+function defaultFilterFunction(option, searchValue) {
   if (isPlaceholderOption(option)) {
     return true;
   }
   const { label, note, secondary, currency, searchStrings } = option;
   return (
-    (typeof label === 'string' && includesString(label, searchValue)) ||
-    (typeof note === 'string' && includesString(note, searchValue)) ||
-    (typeof secondary === 'string' && includesString(secondary, searchValue)) ||
+    (!!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: SelectItem) {
+function isActionableOption(option) {
   return !option.header && !option.separator && !option.disabled;
 }
 
-function isHeaderOption(option: SelectItem | null) {
+function isHeaderOption(option) {
   return option != null && 'header' in option;
 }
 
-function isSeparatorOption(option: SelectItem | null) {
+function isSeparatorOption(option) {
   return option != null && 'separator' in option;
 }
 
-function clamp(from: number, to: number, value: number) {
+function clamp(from, to, value) {
   return Math.max(Math.min(to, value), from);
 }
 
@@ -78,62 +58,24 @@ function clamp(from: number, to: number, value: number) {
  */
 const DEFAULT_SELECTED_OPTION = null;
 
-function isPlaceholderOption(option: SelectItemWithPlaceholder | null) {
+function isPlaceholderOption(option) {
   return option === DEFAULT_SELECTED_OPTION || 'placeholder' in option;
 }
 
-function isSearchableOption(option: SelectItemWithPlaceholder | null) {
+function isSearchableOption(option) {
   return !isHeaderOption(option) && !isSeparatorOption(option) && !isPlaceholderOption(option);
 }
 
-const getUniqueIdForOption = (parentId: string | undefined, option: SelectItem | null) => {
+const getUniqueIdForOption = (parentId = '', option) => {
   if (option == null) {
     return undefined;
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-  const uniqueOptionId =
-    option.value || (typeof option.label === 'string' ? option.label.replace(/\s/g, '') : '');
+  const uniqueOptionId = option.value || (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)
  */
@@ -144,8 +86,8 @@ export default function Select({
   disabled,
   inverse,
   dropdownWidth,
-  size = 'md',
-  block = true,
+  size,
+  block,
   selected,
   search,
   onChange,
@@ -153,28 +95,29 @@ export default function Select({
   onBlur,
   options: defaultOptions,
   onSearchChange,
-  searchValue: initSearchValue = '',
+  searchValue: initSearchValue,
   searchPlaceholder,
-  classNames: classNamesProp = defaultClassNames,
+  // eslint-disable-next-line unicorn/prevent-abbreviations
+  classNames: classNamesProp,
   dropdownUp,
   dropdownProps,
   buttonProps,
-}: SelectProps) {
+}) {
   const inputAttributes = useInputAttributes();
 
   const { formatMessage } = useIntl();
   const { isModern } = useTheme();
-  const s = (className: string) => classNamesProp[className] || className;
+  const s = (className) => classNamesProp[className] || className;
   const [open, setOpen] = useState(false);
   const [searchValue, setSearchValue] = useState(DEFAULT_SEARCH_VALUE);
-  const [keyboardFocusedOptionIndex, setKeyboardFocusedOptionIndex] = useState(-1);
-  const keyboardFocusedReference = useRef<HTMLLIElement>(null);
-  const previousKeyboardFocusedOptionIndex = useRef(-1);
+  const [keyboardFocusedOptionIndex, setKeyboardFocusedOptionIndex] = useState(null);
+  const keyboardFocusedReference = useRef();
+  const previousKeyboardFocusedOptionIndex = useRef();
   const [numberOfOptionsShown, setNumberOfOptionsShown] = useState(DEFAULT_OPTIONS_PAGE_SIZE);
-  const searchBoxReference = useRef<HTMLInputElement>(null);
-  const selectReference = useRef<HTMLDivElement>(null);
-  const dropdownButtonReference = useRef<HTMLButtonElement>(null);
-  const optionsListReference = useRef<HTMLUListElement>(null);
+  const searchBoxReference = useRef(null);
+  const selectReference = useRef(null);
+  const dropdownButtonReference = useRef(null);
+  const optionsListReference = useRef(null);
   const isSearchEnabled = !!onSearchChange || !!search;
   const isDropdownAutoWidth = dropdownWidth == null;
 
@@ -202,7 +145,7 @@ export default function Select({
   const { isMobile } = useLayout();
 
   useEffect(() => {
-    let cancelled = false;
+    let cancelled;
 
     if (keyboardFocusedOptionIndex >= 0) {
       requestAnimationFrame(() => {
@@ -225,40 +168,42 @@ export default function Select({
     setOpen(true);
   };
 
-  const handleTouchStart: React.TouchEventHandler<HTMLDivElement> = (event) => {
+  const handleTouchStart = (event) => {
     if (event.currentTarget === event.target && open) {
       handleCloseOptions();
     }
   };
 
-  const handleOnFocus: React.FocusEventHandler<HTMLDivElement> = (event) => {
-    onFocus?.(event);
+  const handleOnFocus = (event) => {
+    if (onFocus) {
+      onFocus(event);
+    }
   };
 
-  const handleOnBlur: React.FocusEventHandler<HTMLDivElement> = (event) => {
+  const handleOnBlur = (event) => {
     const { nativeEvent } = event;
     if (nativeEvent) {
       const elementReceivingFocus = nativeEvent.relatedTarget;
       const select = event.currentTarget;
-      if (
-        select &&
-        elementReceivingFocus instanceof Node &&
-        select.contains(elementReceivingFocus)
-      ) {
+      if (select && elementReceivingFocus && select.contains(elementReceivingFocus)) {
         return;
       }
     }
 
-    onBlur?.(event);
+    if (onBlur) {
+      onBlur(event);
+    }
   };
 
-  const handleSearchChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+  const handleSearchChange = (event) => {
     setNumberOfOptionsShown(DEFAULT_OPTIONS_PAGE_SIZE);
     setSearchValue(event.target.value);
-    onSearchChange?.(event.target.value);
+    if (onSearchChange) {
+      onSearchChange(event.target.value);
+    }
   };
 
-  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
+  const handleKeyDown = (event) => {
     switch (event.key) {
       case 'ArrowUp':
       case 'ArrowDown':
@@ -302,25 +247,25 @@ export default function Select({
   };
 
   function selectKeyboardFocusedOption() {
-    if (keyboardFocusedOptionIndex >= 0 && selectableOptions.length > 0) {
+    if (keyboardFocusedOptionIndex != null && selectableOptions.length > 0) {
       selectOption(selectableOptions[keyboardFocusedOptionIndex]);
     }
   }
 
-  function moveFocusWithDifference(difference: number) {
+  function moveFocusWithDifference(difference) {
     const selectedOptionIndex = selectableOptions.reduce((optionIndex, current, index) => {
-      if (optionIndex >= 0) {
+      if (optionIndex != null) {
         return optionIndex;
       }
       if (isOptionSelected(selected, current)) {
         return index;
       }
-      return -1;
-    }, -1);
-    const previousFocusedIndex = previousKeyboardFocusedOptionIndex.current;
+      return null;
+    }, null);
+    const previousFocusedIndex = previousKeyboardFocusedOptionIndex.current ?? -1;
     let indexToStartMovingFrom = previousFocusedIndex;
-    if (previousFocusedIndex < 0) {
-      if (selectedOptionIndex < 0) {
+    if (previousFocusedIndex === -1) {
+      if (selectedOptionIndex == null) {
         setKeyboardFocusedOptionIndex(0);
       } else {
         indexToStartMovingFrom = selectedOptionIndex;
@@ -342,7 +287,8 @@ export default function Select({
         if (
           !isSearchEnabled &&
           optionsListReference.current &&
-          previousKeyboardFocusedOptionIndex.current < 0
+          (previousKeyboardFocusedOptionIndex.current == null ||
+            Number.isNaN(previousKeyboardFocusedOptionIndex.current))
         ) {
           optionsListReference.current.focus();
         }
@@ -350,31 +296,31 @@ export default function Select({
 
       previousKeyboardFocusedOptionIndex.current = keyboardFocusedOptionIndex;
     } else {
-      previousKeyboardFocusedOptionIndex.current = -1;
+      previousKeyboardFocusedOptionIndex.current = null;
     }
   }, [open, searchValue, isSearchEnabled, isMobile, keyboardFocusedOptionIndex]);
 
   const handleCloseOptions = () => {
     setOpen(false);
-    setKeyboardFocusedOptionIndex(-1);
+    setKeyboardFocusedOptionIndex(null);
     if (dropdownButtonReference.current) {
       dropdownButtonReference.current.focus();
     }
   };
 
-  function createSelectHandlerForOption(option: SelectItemWithPlaceholder) {
-    return (event: React.SyntheticEvent) => {
+  function createSelectHandlerForOption(option) {
+    return (event) => {
       stopPropagation(event);
       selectOption(option);
     };
   }
 
-  function selectOption(option: SelectItemWithPlaceholder) {
+  function selectOption(option) {
     onChange(isPlaceholderOption(option) ? DEFAULT_SELECTED_OPTION : option);
     handleCloseOptions();
   }
 
-  function renderOptionsList({ className = '' } = {}) {
+  function renderOptionsList({ className } = {}) {
     const dropdownClass = clsx(
       s('np-dropdown-menu'),
       {
@@ -391,8 +337,8 @@ export default function Select({
         id={listboxId}
         role="listbox"
         aria-orientation="vertical"
-        aria-activedescendant={getUniqueIdForOption(id, selected ?? null)}
-        tabIndex={-1}
+        aria-activedescendant={getUniqueIdForOption(id, selected)}
+        tabIndex="-1"
         className={dropdownClass}
         {...dropdownProps}
       >
@@ -416,7 +362,7 @@ export default function Select({
   }
 
   function ShowMoreOption() {
-    function handleOnClick(event: React.SyntheticEvent<HTMLLIElement>) {
+    function handleOnClick(event) {
       stopPropagation(event);
       setNumberOfOptionsShown(numberOfOptionsShown + DEFAULT_OPTIONS_PAGE_SIZE);
     }
@@ -454,7 +400,7 @@ export default function Select({
   }
 
   // eslint-disable-next-line react/prop-types
-  function HeaderOption({ children }: { children?: React.ReactNode }) {
+  function HeaderOption({ children }) {
     return (
       <li // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
         className={clsx(s('np-dropdown-header'), s('np-text-title-group'))}
@@ -466,11 +412,11 @@ export default function Select({
     );
   }
 
-  function isOptionSelected(selected: SelectOptionItem | undefined, option: SelectItem) {
+  function isOptionSelected(selected, option) {
     return selected?.value === option?.value;
   }
 
-  const renderOption = (option: SelectItem, index: number) => {
+  const renderOption = (option, index) => {
     const separatorOption = option;
     if (isSeparatorOption(separatorOption) && separatorOption?.separator) {
       return <SeparatorOption key={index} />;
@@ -508,25 +454,20 @@ 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
-            label={undefined}
-            value={undefined}
-            {...selectOption}
-            classNames={classNamesProp}
-          />
+          <Option {...selectOption} classNames={classNamesProp} />
         </a>
       </li>
     );
   };
 
-  function getIndexWithoutHeadersForIndexWithHeaders(index: number) {
+  function getIndexWithoutHeadersForIndexWithHeaders(index) {
     return options.reduce((sum, option, currentIndex) => {
       if (currentIndex < index && isActionableOption(option)) {
         return sum + 1;
@@ -537,11 +478,11 @@ export default function Select({
 
   const hasActiveOptions = !!defaultOptions.length;
   if (open && (initSearchValue || searchValue)) {
-    if (hasActiveOptions && keyboardFocusedOptionIndex < 0) {
+    if (hasActiveOptions && keyboardFocusedOptionIndex == null) {
       setKeyboardFocusedOptionIndex(0);
     }
-    if (!hasActiveOptions && keyboardFocusedOptionIndex >= 0) {
-      setKeyboardFocusedOptionIndex(-1);
+    if (!hasActiveOptions && keyboardFocusedOptionIndex != null) {
+      setKeyboardFocusedOptionIndex(null);
     }
   }
 
@@ -567,8 +508,8 @@ export default function Select({
           inverse ? s('np-dropdown-toggle-navy') : null,
         )}
         // reset Button's styles
-        type={undefined}
-        priority={undefined}
+        type={null}
+        priority={null}
         disabled={disabled}
         aria-controls={listboxId}
         aria-expanded={open}
@@ -576,7 +517,7 @@ export default function Select({
         {...buttonProps}
       >
         {selected ? (
-          <Option label={undefined} {...selected} classNames={classNamesProp} selected />
+          <Option {...selected} classNames={classNamesProp} selected />
         ) : (
           <span className={s('form-control-placeholder')}>{placeholder}</span>
         )}
@@ -621,3 +562,80 @@ 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/{Select.spec.tsx → Select.spec.js}

@@ -2,7 +2,6 @@ import { Breakpoint } from '../common';
 import { render, screen, userEvent, waitFor, mockMatchMedia } from '../test-utils';
 
 import Select from '.';
-import { SelectItemWithPlaceholder } from './Select';
 
 mockMatchMedia();
 
@@ -43,7 +42,7 @@ describe('Select', () => {
     global.requestAnimationFrame = originalRAF;
   });
 
-  const openSelect = async (container: HTMLElement) => {
+  const openSelect = async (container) => {
     const button = screen.getByRole('button');
     await userEvent.click(button);
   };
@@ -82,7 +81,7 @@ describe('Select', () => {
     });
 
     describe('when options contain searchables', () => {
-      let input: HTMLElement;
+      let input;
 
       const searchableOptions = [
         {
@@ -208,8 +207,8 @@ describe('Select', () => {
         container.querySelector('.np-dropdown-item'),
       );
       expect(
-        screen.getByText('Hungarian forint').parentElement?.parentElement?.parentElement
-          ?.parentElement,
+        screen.getByText('Hungarian forint').parentElement.parentElement.parentElement
+          .parentElement,
       ).toHaveClass('np-dropdown-item clickable np-dropdown-item--focused');
     });
 
@@ -232,7 +231,7 @@ describe('Select', () => {
       expect(container.querySelector('.np-dropdown-item.np-dropdown-item--focused')).toStrictEqual(
         container.querySelector('.np-dropdown-item'),
       );
-      expect(screen.getByText('Estonia').parentElement?.parentElement).toHaveClass(
+      expect(screen.getByText('Estonia').parentElement.parentElement).toHaveClass(
         'np-dropdown-item clickable np-dropdown-item--focused',
       );
     });
@@ -248,8 +247,7 @@ describe('Select', () => {
     });
 
     it('should filter the options with a custom search function with 3 results', async () => {
-      const searchFunction = (option: SelectItemWithPlaceholder, searchValue: string) =>
-        typeof option.label === 'string' && option.label.includes(searchValue);
+      const searchFunction = (option, searchValue) => option.label.includes(searchValue);
       const { container } = render(<Select {...props} search={searchFunction} />);
       await openSelect(container);
 

package/src/select/index.js

@@ -0,0 +1,3 @@
+import Select from './Select';
+
+export default 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/select/index.ts

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