@transferwise/components 0.0.0-experimental-9b30760 → 0.0.0-experimental-683a8ba

package/src/common/textFormat/getDistanceToSymbol/{getDistanceToSymbol.js → getDistanceToSymbol.ts}

@@ -1,12 +1,13 @@
 import getSymbolsInPatternWithPosition from '../getSymbolsInPatternWithPosition';
+import { SymbolWithPosition } from '../getSymbolsInPatternWithPosition/getSymbolsInPatternWithPosition';
 
-export const getDistanceToNextSymbol = (selectionStart, pattern) => {
+export const getDistanceToNextSymbol = (selectionStart: number, pattern: string) => {
   const patternArray = getSymbolsInPatternWithPosition(pattern);
   const applicablePattern = patternArray.filter((symbol) => symbol.index >= selectionStart);
   return countConsecutiveSymbols(selectionStart, applicablePattern, 'left');
 };
 
-export const getDistanceToPreviousSymbol = (selectionStart, pattern) => {
+export const getDistanceToPreviousSymbol = (selectionStart: number, pattern: string) => {
   const patternArray = getSymbolsInPatternWithPosition(pattern);
   const applicablePattern = patternArray
     .filter((symbol) => symbol.index < selectionStart)
@@ -14,7 +15,11 @@ export const getDistanceToPreviousSymbol = (selectionStart, pattern) => {
   return countConsecutiveSymbols(selectionStart, applicablePattern, 'right');
 };
 
-const countConsecutiveSymbols = (selectionStart, applicablePattern, direction) => {
+const countConsecutiveSymbols = (
+  selectionStart: number,
+  applicablePattern: SymbolWithPosition[],
+  direction: 'left' | 'right',
+) => {
   let cursor = selectionStart;
   let groupSize;
 

package/src/index.ts

@@ -22,7 +22,6 @@ export type {
 } from './inputs/SelectInput';
 export type { TextAreaProps } from './inputs/TextArea';
 export type { PhoneNumberInputProps } from './phoneNumberInput/PhoneNumberInput';
-export type { PopoverProps, PopoverPreferredPlacement } from './popover';
 export type { RadioProps } from './radio';
 export type { RadioGroupProps, RadioGroupRadio } from './radioGroup';
 export type { RadioOptionProps } from './radioOption';
@@ -38,6 +37,7 @@ export type {
   CurrencyOptionItem,
   MoneyInputProps,
 } from './moneyInput';
+export type { SlidingPanelProps } from './slidingPanel';
 export type {
   LayoutDirection,
   TypographyTypes,

package/src/info/Info.tsx

@@ -5,7 +5,7 @@ import { useIntl } from 'react-intl';
 
 import { Size, Position, SizeSmall, SizeLarge } from '../common';
 import Modal from '../modal';
-import Popover, { PopoverPreferredPlacement } from '../popover';
+import Popover from '../popover';
 
 import messages from './Info.messages';
 import { InfoPresentation } from './infoPresentations';
@@ -36,7 +36,7 @@ export interface Props {
   /**
    * Prferred placement of the Popover, does not apply to Modal
    */
-  preferredPlacement?: PopoverPreferredPlacement;
+  preferredPlacement?: Position;
 }
 
 const Info = ({

package/src/logo/Logo.js

@@ -23,6 +23,7 @@ const Logo = ({ className, inverse, type }) => {
   return (
     <span
       aria-label={type === LogoType.WISE ? 'Wise' : 'Wise business'}
+      role="img"
       className={classNames(className, 'np-logo')}
     >
       <LogoSm className="np-logo-svg np-logo-svg--size-sm" />

package/src/logo/__snapshots__/Logo.spec.js.snap

@@ -5,6 +5,7 @@ exports[`Logo on mobile renders only fast flag 1`] = `
   <span
     aria-label="Wise"
     class="class np-logo"
+    role="img"
   >
     <svg
       class="np-logo-svg np-logo-svg--size-sm"
@@ -39,6 +40,7 @@ exports[`Logo renders wise business logo 1`] = `
   <span
     aria-label="Wise business"
     class="class np-logo"
+    role="img"
   >
     <svg
       class="np-logo-svg np-logo-svg--size-sm"
@@ -73,6 +75,7 @@ exports[`Logo renders wise business logo inversed 1`] = `
   <span
     aria-label="Wise business"
     class="class np-logo"
+    role="img"
   >
     <svg
       class="np-logo-svg np-logo-svg--size-sm"
@@ -107,6 +110,7 @@ exports[`Logo renders wise logo 1`] = `
   <span
     aria-label="Wise"
     class="class np-logo"
+    role="img"
   >
     <svg
       class="np-logo-svg np-logo-svg--size-sm"
@@ -141,6 +145,7 @@ exports[`Logo renders wise logo by default 1`] = `
   <span
     aria-label="Wise"
     class="class np-logo"
+    role="img"
   >
     <svg
       class="np-logo-svg np-logo-svg--size-sm"
@@ -175,6 +180,7 @@ exports[`Logo renders wise logo inversed 1`] = `
   <span
     aria-label="Wise"
     class="class np-logo"
+    role="img"
   >
     <svg
       class="np-logo-svg np-logo-svg--size-sm"

package/src/popover/Popover.js

@@ -0,0 +1,101 @@
+import { useTheme } from '@wise/components-theming';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import { useRef, useState, cloneElement } from 'react';
+
+import { Position, Typography } from '../common';
+import ResponsivePanel from '../common/responsivePanel';
+import Title from '../title';
+import { logActionRequiredIf } from '../utilities';
+
+const Popover = ({ children, className, content, preferredPlacement, title, onClose }) => {
+  logActionRequired({ preferredPlacement });
+  const anchorReference = useRef(null);
+  const [open, setOpen] = useState(false);
+  const { isModern } = useTheme();
+
+  const handleOnClose = () => {
+    setOpen(false);
+    onClose?.();
+  };
+
+  return (
+    <span className={classnames('np-popover', className)}>
+      <span ref={anchorReference} className="d-inline-block">
+        {cloneElement(children, {
+          onClick: () => {
+            if (children?.props?.onClick) {
+              children.props.onClick();
+            }
+            setOpen(!open);
+          },
+        })}
+      </span>
+      <ResponsivePanel
+        open={open}
+        anchorRef={anchorReference}
+        position={deprecatedPlacements[preferredPlacement] || preferredPlacement}
+        arrow
+        className="np-popover__container"
+        onClose={handleOnClose}
+      >
+        <div
+          className={isModern ? 'np-popover__content np-text-default-body' : 'np-popover__content'}
+          aria-hidden={!open}
+          role="dialog"
+        >
+          {title && (
+            <Title type={Typography.TITLE_BODY} className="m-b-1">
+              {title}
+            </Title>
+          )}
+          {content}
+        </div>
+      </ResponsivePanel>
+    </span>
+  );
+};
+
+const logActionRequired = ({ preferredPlacement }) => {
+  logActionRequiredIf(
+    `Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${deprecatedPlacements[preferredPlacement]} instead.`,
+    deprecatedPlacements[preferredPlacement],
+  );
+};
+
+Popover.defaultProps = {
+  className: undefined,
+  preferredPlacement: Position.RIGHT,
+  title: undefined,
+};
+
+Popover.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  content: PropTypes.node.isRequired,
+  /**
+   * `'left-top'` / `'right-top'` are deprecated use `Position.TOP` / `'top'` instead,
+   * `'bottom-right'` / `'bottom-left'` are deprecated use `Position.BOTTOM` / `'bottom'` instead
+   */
+  preferredPlacement: PropTypes.oneOf([
+    'top',
+    'right',
+    'bottom',
+    'left',
+    'left-top',
+    'right-top',
+    'bottom-right',
+    'bottom-left',
+  ]),
+  onClose: PropTypes.func,
+  title: PropTypes.node,
+};
+
+const deprecatedPlacements = {
+  [Position.BOTTOM_LEFT]: Position.BOTTOM,
+  [Position.BOTTOM_RIGHT]: Position.BOTTOM,
+  [Position.LEFT_TOP]: Position.TOP,
+  [Position.RIGHT_TOP]: Position.TOP,
+};
+
+export default Popover;

package/src/popover/{Popover.spec.tsx → Popover.spec.js}

@@ -7,7 +7,7 @@ mockMatchMedia();
 
 jest.mock('react-transition-group', () => ({
   __esModule: true,
-  CSSTransition: (props: Record<string, unknown>) => (props.in ? props.children : null),
+  CSSTransition: (props) => (props.in ? props.children : null),
 }));
 
 describe('Popover', () => {
@@ -117,10 +117,7 @@ describe('Popover', () => {
     expect(handleOnClose).not.toHaveBeenCalled();
     userEvent.click(screen.getByText('Open'));
     await waitForPanel();
-    const dimmer = getDimmer();
-    if (dimmer != null) {
-      userEvent.click(dimmer);
-    }
+    userEvent.click(getDimmer());
     expect(handleOnClose).toHaveBeenCalledTimes(1);
   });
 

package/src/popover/index.js

@@ -0,0 +1 @@
+export { default } from './Popover';

package/src/select/Select.spec.js

@@ -278,7 +278,7 @@ describe('Select', () => {
 
     const bottomSheet = await screen.findByRole('dialog');
 
-    expect(bottomSheet).toHaveClass('np-bottom-sheet');
+    expect(bottomSheet).toBeInTheDocument();
   });
 
   it('show list of options in Drawer when on mobile and search in enabled', async () => {

package/src/slidingPanel/SlidingPanel.spec.js

@@ -24,17 +24,7 @@ describe('SlidingPanel', () => {
 
     expect(cssTransition()).toHaveLength(1);
 
-    expect(cssTransition().props()).toMatchObject({
-      in: true,
-      appear: true,
-      timeout: {
-        enter: 0,
-        exit: EXIT_ANIMATION,
-      },
-      classNames: 'sliding-panel--open-left sliding-panel',
-      unmountOnExit: true,
-    });
-    expect(cssTransition().props().children.props).toStrictEqual({
+    expect(cssTransition().props()).toStrictEqual({
       className: 'sliding-panel sliding-panel--open-left',
       children: null,
     });
@@ -42,24 +32,24 @@ describe('SlidingPanel', () => {
 
   it('adds fixed class', () => {
     component = shallow(<SlidingPanel {...props} slidingPanelPositionFixed />);
-    expect(cssTransition().prop('classNames')).toBe(
-      'sliding-panel--open-left sliding-panel--fixed sliding-panel',
+    expect(cssTransition().prop('className')).toBe(
+      'sliding-panel sliding-panel--open-left sliding-panel--fixed',
     );
   });
 
   it('adds border classes if showSlidingPanelBorder is set to true', () => {
     component = shallow(<SlidingPanel {...props} showSlidingPanelBorder />);
-    expect(cssTransition().prop('classNames')).toBe(
-      'sliding-panel--open-left sliding-panel--border-left sliding-panel',
+    expect(cssTransition().prop('className')).toBe(
+      'sliding-panel sliding-panel--open-left sliding-panel--border-left',
     );
     component = shallow(<SlidingPanel {...props} showSlidingPanelBorder={false} position="left" />);
-    expect(cssTransition().prop('classNames')).toBe('sliding-panel--open-left sliding-panel');
+    expect(cssTransition().prop('className')).toBe('sliding-panel sliding-panel--open-left');
 
     component = shallow(<SlidingPanel {...props} showSlidingPanelBorder position="top" />);
-    expect(cssTransition().prop('classNames')).toBe(
-      'sliding-panel--open-top sliding-panel--border-top sliding-panel',
+    expect(cssTransition().prop('className')).toBe(
+      'sliding-panel sliding-panel--open-top sliding-panel--border-top',
     );
   });
 
-  const cssTransition = () => component.find('CSSTransition');
+  const cssTransition = () => component.find('div');
 });

package/src/slidingPanel/SlidingPanel.tsx

@@ -0,0 +1,62 @@
+import classNames from 'classnames';
+import { forwardRef, useRef } from 'react';
+import mergeRefs from 'react-merge-refs';
+import { CSSTransition } from 'react-transition-group';
+
+import { Position } from '../common';
+
+export const EXIT_ANIMATION = 350;
+
+export interface SlidingPanelProps
+  extends Pick<React.ComponentPropsWithRef<'div'>, 'ref' | 'className' | 'children'> {
+  position?: `${Position.TOP | Position.RIGHT | Position.BOTTOM | Position.LEFT}`;
+  open: boolean;
+  showSlidingPanelBorder?: boolean;
+  slidingPanelPositionFixed?: boolean;
+}
+
+const SlidingPanel = forwardRef(
+  (
+    {
+      position = 'left',
+      open,
+      showSlidingPanelBorder,
+      slidingPanelPositionFixed,
+      className,
+      children,
+      ...rest
+    }: Omit<SlidingPanelProps, 'ref'>,
+    reference: React.ForwardedRef<HTMLDivElement>,
+  ) => {
+    const localReference = useRef<HTMLDivElement>(null);
+
+    return (
+      <CSSTransition
+        {...rest}
+        key={`sliding-panel--open-${position}`}
+        nodeRef={localReference}
+        in={open}
+        // Wait for animation to finish before unmount.
+        timeout={{ enter: 0, exit: EXIT_ANIMATION }}
+        classNames="sliding-panel"
+        appear
+        unmountOnExit
+      >
+        <div
+          ref={mergeRefs([reference, localReference])}
+          className={classNames(
+            'sliding-panel',
+            `sliding-panel--open-${position}`,
+            showSlidingPanelBorder && `sliding-panel--border-${position}`,
+            slidingPanelPositionFixed && 'sliding-panel--fixed',
+            className,
+          )}
+        >
+          {children}
+        </div>
+      </CSSTransition>
+    );
+  },
+);
+
+export default SlidingPanel;

package/src/slidingPanel/index.ts

@@ -0,0 +1,2 @@
+export { default } from './SlidingPanel';
+export type { SlidingPanelProps } from './SlidingPanel';

package/src/sticky/Sticky.spec.js

@@ -25,7 +25,6 @@ describe('Sticky', () => {
 
     expect(slidingPanel.props()).toStrictEqual({
       children: null,
-      className: undefined,
       open: true,
       position: 'bottom',
       showSlidingPanelBorder: true,

package/src/popover/Popover.tsx

@@ -1,106 +0,0 @@
-import { useTheme } from '@wise/components-theming';
-import classnames from 'classnames';
-import { useRef, useState, cloneElement, useEffect, isValidElement } from 'react';
-
-import { Position, Typography } from '../common';
-import ResponsivePanel from '../common/responsivePanel';
-import Title from '../title';
-import { logActionRequired } from '../utilities';
-
-/** @deprecated Use `"top" | "bottom"` instead. */
-type PopoverPreferredPlacementDeprecated =
-  | `${Position.LEFT_TOP}`
-  | `${Position.RIGHT_TOP}`
-  | `${Position.BOTTOM_RIGHT}`
-  | `${Position.BOTTOM_LEFT}`;
-
-export type PopoverPreferredPlacement =
-  | `${Position.TOP}`
-  | `${Position.RIGHT}`
-  | `${Position.BOTTOM}`
-  | `${Position.LEFT}`
-  | PopoverPreferredPlacementDeprecated;
-
-export interface PopoverProps {
-  children?: React.ReactNode;
-  className?: string;
-  content: React.ReactNode;
-  preferredPlacement?: PopoverPreferredPlacement;
-  onClose?: () => void;
-  title?: React.ReactNode;
-}
-
-function resolvePlacement(preferredPlacement: PopoverPreferredPlacement) {
-  switch (preferredPlacement) {
-    case 'left-top':
-    case 'right-top':
-      return 'top';
-    case 'bottom-left':
-    case 'bottom-right':
-      return 'bottom';
-  }
-  return preferredPlacement;
-}
-
-export default function Popover({
-  children,
-  className,
-  content,
-  preferredPlacement = Position.RIGHT,
-  title,
-  onClose,
-}: PopoverProps) {
-  const resolvedPlacement = resolvePlacement(preferredPlacement);
-  useEffect(() => {
-    if (resolvedPlacement !== preferredPlacement) {
-      logActionRequired(
-        `Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`,
-      );
-    }
-  }, [preferredPlacement, resolvedPlacement]);
-
-  const anchorReference = useRef(null);
-  const [open, setOpen] = useState(false);
-  const { isModern } = useTheme();
-
-  const handleOnClose = () => {
-    setOpen(false);
-    onClose?.();
-  };
-
-  return (
-    <span className={classnames('np-popover', className)}>
-      <span ref={anchorReference} className="d-inline-block">
-        {isValidElement<{ onClick?: () => void }>(children)
-          ? cloneElement(children, {
-              onClick: () => {
-                children.props.onClick?.();
-                setOpen((prevOpen) => !prevOpen);
-              },
-            })
-          : children}
-      </span>
-      <ResponsivePanel
-        open={open}
-        anchorRef={anchorReference}
-        position={resolvedPlacement}
-        arrow
-        className="np-popover__container"
-        onClose={handleOnClose}
-      >
-        <div
-          className={isModern ? 'np-popover__content np-text-default-body' : 'np-popover__content'}
-          aria-hidden={!open}
-          role="dialog"
-        >
-          {title && (
-            <Title type={Typography.TITLE_BODY} className="m-b-1">
-              {title}
-            </Title>
-          )}
-          {content}
-        </div>
-      </ResponsivePanel>
-    </span>
-  );
-}

package/src/popover/index.ts

@@ -1,2 +0,0 @@
-export { default } from './Popover';
-export type { PopoverProps, PopoverPreferredPlacement } from './Popover';

package/src/slidingPanel/SlidingPanel.js

@@ -1,73 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import { forwardRef, RefObject, useRef } from 'react';
-import mergeRefs from 'react-merge-refs';
-import { CSSTransition } from 'react-transition-group';
-
-export const EXIT_ANIMATION = 350;
-
-const SlidingPanel = forwardRef(
-  (
-    {
-      children,
-      className,
-      open,
-      position,
-      showSlidingPanelBorder,
-      slidingPanelPositionFixed,
-      ...rest
-    },
-    reference,
-  ) => {
-    /** @type {RefObject<HTMLDivElement>} */
-    const localReference = useRef(null);
-
-    return (
-      <CSSTransition
-        {...rest}
-        key={`sliding-panel--open-${position}`}
-        nodeRef={localReference}
-        in={open}
-        // Wait for animation to finish before unmount.
-        timeout={{ enter: 0, exit: EXIT_ANIMATION }}
-        classNames={classNames(
-          `sliding-panel--open-${position}`,
-          showSlidingPanelBorder && `sliding-panel--border-${position}`,
-          {
-            'sliding-panel--fixed': slidingPanelPositionFixed,
-          },
-          'sliding-panel',
-        )}
-        appear
-        unmountOnExit
-      >
-        <div
-          ref={mergeRefs([reference, localReference])}
-          className={classNames('sliding-panel', `sliding-panel--open-${position}`, className)}
-        >
-          {children}
-        </div>
-      </CSSTransition>
-    );
-  },
-);
-
-SlidingPanel.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  open: PropTypes.bool,
-  position: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
-  showSlidingPanelBorder: PropTypes.bool,
-  slidingPanelPositionFixed: PropTypes.bool,
-};
-
-SlidingPanel.defaultProps = {
-  children: null,
-  className: undefined,
-  open: false,
-  position: 'left',
-  showSlidingPanelBorder: false,
-  slidingPanelPositionFixed: false,
-};
-
-export default SlidingPanel;

package/src/slidingPanel/index.js

@@ -1 +0,0 @@
-export { default } from './SlidingPanel';