@transferwise/components 0.0.0-experimental-53101fe → 0.0.0-experimental-abddca8

package/src/link/Link.tsx

@@ -1,6 +1,6 @@
 import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';
 import { clsx } from 'clsx';
-import { AnchorHTMLAttributes, forwardRef } from 'react';
+import { AnchorHTMLAttributes } from 'react';
 import { useIntl } from 'react-intl';
 
 import { LinkLarge, LinkDefault } from '../common';
@@ -14,35 +14,33 @@ export type Props = AnchorHTMLAttributes<HTMLAnchorElement> & { type?: LinkLarge
  *
  * Documentation: https://transferwise.github.io/neptune-web/components/content/Link
  */
-const Link = forwardRef<HTMLAnchorElement, Props>(
-  (
-    { className, children, href, target, type, 'aria-label': ariaLabel, onClick, ...props }: Props,
-    ref,
-  ) => {
-    const isBlank = target === '_blank';
+const Link = ({
+  className,
+  children,
+  href,
+  target,
+  type,
+  'aria-label': ariaLabel,
+  onClick,
+  ...props
+}: Props) => {
+  const isBlank = target === '_blank';
 
-    const { formatMessage } = useIntl();
+  const { formatMessage } = useIntl();
 
-    return (
-      <a
-        ref={ref}
-        href={href}
-        target={target}
-        className={clsx(
-          'np-link',
-          type ? `np-text-${type}` : undefined,
-          'd-inline-flex',
-          className,
-        )}
-        aria-label={ariaLabel}
-        rel={isBlank ? 'noreferrer' : undefined}
-        onClick={onClick}
-        {...props}
-      >
-        {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}
-      </a>
-    );
-  },
-);
+  return (
+    <a
+      href={href}
+      target={target}
+      className={clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className)}
+      aria-label={ariaLabel}
+      rel={isBlank ? 'noreferrer' : undefined}
+      onClick={onClick}
+      {...props}
+    >
+      {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}
+    </a>
+  );
+};
 
 export default Link;

package/src/main.css

@@ -2242,9 +2242,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   -moz-column-gap: var(--size-24);
        column-gap: var(--size-24);
 }
-.np-header--section {
-  border-bottom: none;
-}
 .np-header__title {
   color: #5d7079;
   color: var(--color-content-secondary);

package/src/title/Title.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { forwardRef, LabelHTMLAttributes, LiHTMLAttributes, ReactHTML } from 'react';
+import { LabelHTMLAttributes, LiHTMLAttributes, ReactHTML } from 'react';
 
 import { TitleTypes, Typography, Heading } from '../common';
 
@@ -25,29 +25,15 @@ type Props = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElement | HTMLLabe
     type?: TitleTypes;
   };
 
-const Title = forwardRef<HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement, Props>(
-  ({ as, type = DEFAULT_TYPE, className, ...props }, ref) => {
-    const mapping = titleTypeMapping[type as keyof typeof titleTypeMapping];
-    const isTypeSupported = mapping !== undefined;
-    if (isTypeSupported) {
-      const HeaderTag = as ?? mapping;
-      return (
-        <HeaderTag
-          ref={ref as React.Ref<any>}
-          {...props}
-          className={clsx(`np-text-${type}`, className)}
-        />
-      );
-    }
-    const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];
-    return (
-      <HeaderTag
-        ref={ref as React.Ref<any>}
-        {...props}
-        className={clsx(`np-text-${DEFAULT_TYPE}`, className)}
-      />
-    );
-  },
-);
+function Title({ as, type = DEFAULT_TYPE, className, ...props }: Props) {
+  const mapping = titleTypeMapping[type];
+  const isTypeSupported = mapping !== undefined;
+  if (isTypeSupported) {
+    const HeaderTag = as ?? mapping;
+    return <HeaderTag {...props} className={clsx(`np-text-${type}`, className)} />;
+  }
+  const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];
+  return <HeaderTag {...props} className={clsx(`np-text-${DEFAULT_TYPE}`, className)} />;
+}
 
 export default Title;

package/src/typeahead/Typeahead.tsx

@@ -406,7 +406,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
         className={clsx('dropdown btn-group btn-block', { open: dropdownOpen })}
         id={`menu-${id}`}
       >
-        {!!optionsToRender.length && (
+        {(!!optionsToRender.length || footer) && (
           <ul className="dropdown-menu" role="menu">
             {optionsToRender.map((option, idx) => {
               const ref = React.createRef<HTMLLIElement>();
@@ -423,7 +423,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
                     this.onOptionSelected(event, option);
                   }}
                 />
-              )
+              );
             })}
             {footer}
           </ul>

package/src/typeahead/util/highlight.spec.js

@@ -21,7 +21,7 @@ describe('Typeahead input', () => {
     const label = `this is a label`;
     const result = highlight(label, query);
 
-    expect(result).toBe(label);
+    expect(result).toStrictEqual(label);
   });
 
   it('highlights whole label that matches the query', () => {

package/src/typeahead/util/highlight.tsx

@@ -4,11 +4,11 @@ export default function highlight(value: string, query: string) {
     const highlightEnd = highlightStart + query.trim().length;
     if (highlightStart !== -1) {
       return (
-        <>
+        <span>
           {value.slice(0, Math.max(0, highlightStart))}
           <strong>{value.slice(highlightStart, highlightEnd)}</strong>
           {value.slice(Math.max(0, highlightEnd))}
-        </>
+        </span>
       );
     }
   }