@transferwise/components 46.27.0 → 46.28.0

package/src/inputs/_Popover.tsx

@@ -17,7 +17,6 @@ import { ThemeProvider, useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
 import { useState } from 'react';
 
-import FocusBoundary from '../common/focusBoundary/FocusBoundary';
 import { PreventScroll } from '../common/preventScroll/PreventScroll';
 
 export interface PopoverProps {
@@ -104,32 +103,30 @@ export function Popover({
             }}
             afterLeave={onCloseEnd}
           >
-            <FocusBoundary>
-              <FloatingFocusManager context={context} guards={false} modal={false}>
+            <FloatingFocusManager context={context}>
+              <div
+                key={floatingKey} // Force inner state invalidation on open
+                ref={refs.setFloating}
+                className={classNames('np-popover-v2-container', {
+                  'np-popover-v2-container--size-md': size === 'md',
+                  'np-popover-v2-container--size-lg': size === 'lg',
+                })}
+                // eslint-disable-next-line react/forbid-dom-props
+                style={floatingStyles}
+                {...getFloatingProps()}
+              >
                 <div
-                  key={floatingKey} // Force inner state invalidation on open
-                  ref={refs.setFloating}
-                  className={classNames('np-popover-v2-container', {
-                    'np-popover-v2-container--size-md': size === 'md',
-                    'np-popover-v2-container--size-lg': size === 'lg',
+                  className={classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
+                    'np-popover-v2--padding-md': padding === 'md',
                   })}
-                  // eslint-disable-next-line react/forbid-dom-props
-                  style={floatingStyles}
-                  {...getFloatingProps()}
                 >
-                  <div
-                    className={classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
-                      'np-popover-v2--padding-md': padding === 'md',
-                    })}
-                  >
-                    {title ? (
-                      <h2 className="np-popover-v2-title np-text-title-body">{title}</h2>
-                    ) : null}
-                    <div className="np-popover-v2-content np-text-body-default">{children}</div>
-                  </div>
+                  {title ? (
+                    <h2 className="np-popover-v2-title np-text-title-body">{title}</h2>
+                  ) : null}
+                  <div className="np-popover-v2-content np-text-body-default">{children}</div>
                 </div>
-              </FloatingFocusManager>
-            </FocusBoundary>
+              </div>
+            </FloatingFocusManager>
           </Transition>
         </ThemeProvider>
       </FloatingPortal>

package/src/statusIcon/StatusIcon.tsx

@@ -1,27 +1,27 @@
 import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';
 import classNames from 'classnames';
 
-import { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size } from '../common';
+import { SizeSmall, SizeMedium, SizeLarge, Sentiment } from '../common';
 
 export type StatusIconProps = {
-  sentiment: Sentiment;
+  sentiment: `${Sentiment}`;
   size: SizeSmall | SizeMedium | SizeLarge;
 };
 
-const StatusIcon = ({ sentiment = Sentiment.NEUTRAL, size = Size.MEDIUM }: StatusIconProps) => {
-  const iconTypeMap = {
-    [Sentiment.POSITIVE]: Check,
-    [Sentiment.NEUTRAL]: Info,
-    [Sentiment.WARNING]: Alert,
-    [Sentiment.NEGATIVE]: Cross,
-    [Sentiment.PENDING]: ClockBorderless,
-    [Sentiment.INFO]: Info,
-    [Sentiment.ERROR]: Cross,
-    [Sentiment.SUCCESS]: Check,
-  };
+const iconTypeMap = {
+  positive: Check,
+  neutral: Info,
+  warning: Alert,
+  negative: Cross,
+  pending: ClockBorderless,
+  info: Info,
+  error: Cross,
+  success: Check,
+} satisfies Record<`${Sentiment}`, React.ElementType>;
 
-  const iconColor = [Sentiment.WARNING, Sentiment.PENDING].includes(sentiment) ? 'dark' : 'light';
+const StatusIcon = ({ sentiment = 'neutral', size = 'md' }: StatusIconProps) => {
   const Icon = iconTypeMap[sentiment];
+  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
 
   return (
     <span

package/build/types/alert/withArrow/alertArrowPositions.d.ts

@@ -1,9 +0,0 @@
-export declare enum ArrowPosition {
-    TOP_LEFT = "up-left",
-    TOP = "up-center",
-    TOP_RIGHT = "up-right",
-    BOTTOM_LEFT = "down-left",
-    BOTTOM = "down-center",
-    BOTTOM_RIGHT = "down-right"
-}
-//# sourceMappingURL=alertArrowPositions.d.ts.map

package/build/types/alert/withArrow/alertArrowPositions.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"alertArrowPositions.d.ts","sourceRoot":"","sources":["../../../../src/alert/withArrow/alertArrowPositions.ts"],"names":[],"mappings":"AACA,oBAAY,aAAa;IACvB,QAAQ,YAAY;IACpB,GAAG,cAAc;IACjB,SAAS,aAAa;IACtB,WAAW,cAAc;IACzB,MAAM,gBAAgB;IACtB,YAAY,eAAe;CAC5B"}

package/build/types/alert/withArrow/index.d.ts

@@ -1,3 +0,0 @@
-export { ArrowPosition as AlertArrowPosition } from "./alertArrowPositions";
-export { default } from "./withArrow";
-//# sourceMappingURL=index.d.ts.map

package/build/types/alert/withArrow/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/alert/withArrow/index.js"],"names":[],"mappings":""}

package/build/types/alert/withArrow/withArrow.d.ts

@@ -1,11 +0,0 @@
-export default withArrow;
-declare function withArrow(Alert: any, arrow: any): {
-    (props: any): import("react").JSX.Element;
-    propTypes: {
-        className: any;
-    };
-    defaultProps: {
-        className: undefined;
-    };
-};
-//# sourceMappingURL=withArrow.d.ts.map

package/build/types/alert/withArrow/withArrow.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"withArrow.d.ts","sourceRoot":"","sources":["../../../../src/alert/withArrow/withArrow.js"],"names":[],"mappings":";AAKA;;;;;;;;EAkBC"}

package/src/alert/Alert.js

@@ -1,196 +0,0 @@
-import {
-  InfoCircle,
-  Warning as AlertTriangle,
-  CrossCircle,
-  CheckCircle,
-  Clock,
-} from '@transferwise/icons';
-import { useTheme } from '@wise/components-theming';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import { useState, useRef } from 'react';
-import requiredIf from 'react-required-if';
-
-import Body from '../body/Body';
-import { Sentiment, Size, Typography, Variant } from '../common';
-import { CloseButton } from '../common/closeButton';
-import Link from '../link';
-import StatusIcon from '../statusIcon';
-import Title from '../title/Title';
-import { logActionRequiredIf, deprecated } from '../utilities';
-
-import InlineMarkdown from './inlineMarkdown';
-import withArrow from './withArrow';
-
-const deprecatedTypeMap = {
-  [Sentiment.SUCCESS]: Sentiment.POSITIVE,
-  [Sentiment.INFO]: Sentiment.NEUTRAL,
-  [Sentiment.ERROR]: Sentiment.NEGATIVE,
-};
-
-const Alert = (props) => {
-  const { isModern } = useTheme();
-
-  const iconTypeMap = {
-    [Sentiment.POSITIVE]: CheckCircle,
-    [Sentiment.NEUTRAL]: InfoCircle,
-    [Sentiment.WARNING]: AlertTriangle,
-    [Sentiment.NEGATIVE]: CrossCircle,
-    [Sentiment.PENDING]: Clock,
-  };
-
-  const [shouldFire, setShouldFire] = useState(false);
-  const { arrow, action, children, className, icon, onDismiss, message, title, type, variant } =
-    props;
-  const closeButtonReference = useRef(null);
-  if (arrow) {
-    const AlertWithArrow = withArrow(Alert, arrow);
-    return <AlertWithArrow {...props} />;
-  }
-  logActionRequired(props);
-  const mappedType = deprecatedTypeMap[type] || type;
-  const Icon = iconTypeMap[mappedType];
-
-  function generateIcon() {
-    if (icon) {
-      return <div className="alert__icon">{icon}</div>;
-    }
-    if (isModern) {
-      return <StatusIcon size={Size.LARGE} sentiment={mappedType} />;
-    } else {
-      return <Icon size={24} />;
-    }
-  }
-
-  const handleTouchStart = () => setShouldFire(true);
-  const handleTouchMove = () => setShouldFire(false);
-  const handleTouchEnd = (event) => {
-    if (shouldFire && action) {
-      // Check if current event is triggered from closeButton
-      if (closeButtonReference?.current && !closeButtonReference.current.contains(event.target)) {
-        if (action?.target === '_blank') {
-          window.top.open(action.href);
-        } else {
-          window.top.location.assign(action.href);
-        }
-      }
-    }
-    setShouldFire(false);
-  };
-  return (
-    <div
-      className={classNames('alert d-flex', `alert-${mappedType}`, className)}
-      data-testid="alert"
-      onTouchStart={handleTouchStart}
-      onTouchEnd={handleTouchEnd}
-      onTouchMove={handleTouchMove}
-    >
-      <div
-        className={classNames('alert__content', 'd-flex', 'flex-grow-1', variant)}
-        data-testid={variant}
-      >
-        {generateIcon()}
-        <div className="alert__message">
-          <div role={Sentiment.NEGATIVE === mappedType ? 'alert' : 'status'}>
-            {title && (
-              <Title className="m-b-1" type={Typography.TITLE_BODY}>
-                {title}
-              </Title>
-            )}
-            <Body as="span" className="d-block" type={Typography.BODY_LARGE}>
-              {children || <InlineMarkdown>{message}</InlineMarkdown>}
-            </Body>
-          </div>
-          {action && (
-            <Link
-              href={action.href}
-              className="m-t-1"
-              aria-label={action['aria-label']}
-              target={action.target}
-              type={Typography.LINK_LARGE}
-            >
-              {action.text}
-            </Link>
-          )}
-        </div>
-      </div>
-      {onDismiss && (
-        <CloseButton ref={closeButtonReference} className="m-l-2" onClick={onDismiss} />
-      )}
-    </div>
-  );
-};
-
-const deprecatedTypeMapMessage = {
-  [Sentiment.SUCCESS]: 'Sentiment.POSITIVE',
-  [Sentiment.INFO]: 'Sentiment.NEUTRAL',
-  [Sentiment.ERROR]: 'Sentiment.NEGATIVE',
-};
-
-const deprecatedTypes = Object.keys(deprecatedTypeMap);
-
-function logActionRequired({ size, type }) {
-  logActionRequiredIf(
-    'Alert no longer supports any possible variations in size. Please remove the `size` prop.',
-    !!size,
-  );
-  logActionRequiredIf(
-    `Alert has deprecated the ${type} value for the \`type\` prop. Please update to ${deprecatedTypeMapMessage[type]}.`,
-    deprecatedTypes.includes(type),
-  );
-}
-
-Alert.propTypes = {
-  /** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */
-  action: PropTypes.shape({
-    'aria-label': PropTypes.string,
-    href: PropTypes.string.isRequired,
-    target: PropTypes.string,
-    text: PropTypes.node.isRequired,
-  }),
-  className: PropTypes.string,
-  /** An optional icon. If not provided, we will default the icon to something appropriate for the type */
-  icon: PropTypes.element,
-  /** Title for the alert component */
-  title: PropTypes.string,
-  /** The main body of the alert. Accepts plain text and bold words specified with **double stars*/
-  message: requiredIf(PropTypes.node, ({ children }) => !children),
-  /** The presence of the onDismiss handler will trigger the visibility of the close button */
-  onDismiss: PropTypes.func,
-  /** The type dictates which icon and colour will be used */
-  type: PropTypes.oneOf(['negative', 'neutral', 'positive', 'warning', 'info', 'error', 'success']),
-  variant: PropTypes.oneOf(['desktop', 'mobile']),
-  /** @deprecated no arrow for `Alert` component anymore, consider to use [`InlineAlert`](https://transferwise.github.io/neptune-web/components/alerts/InlineAlert) component */
-  arrow: deprecated(
-    PropTypes.oneOf(['up-left', 'up-center', 'up-right', 'down-left', 'down-center', 'down-right']),
-    { component: 'Alert', expiryDate: new Date('03-01-2021') },
-  ),
-  /** @deprecated use `message` property instead */
-  children: deprecated(
-    requiredIf(PropTypes.node, ({ message }) => !message),
-    {
-      component: 'Alert',
-      message:
-        'You should now use the `message` prop. Be aware `message` only accepts plain text or text with **bold** markdown.',
-      expiryDate: new Date('03-01-2021'),
-    },
-  ),
-  /** @deprecated use `onDismiss` instead */
-  dismissible: deprecated(PropTypes.bool, {
-    component: 'Alert',
-    message: 'The Alert will now be considered dismissible if an `onDismiss` hander is present.',
-    expiryDate: new Date('03-01-2021'),
-  }),
-};
-
-Alert.defaultProps = {
-  action: undefined,
-  arrow: undefined,
-  className: undefined,
-  dismissible: undefined,
-  icon: undefined,
-  type: Sentiment.NEUTRAL,
-  variant: Variant.DESKTOP,
-};
-
-export default Alert;

package/src/alert/index.js

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

package/src/alert/withArrow/alertArrowPositions.ts

@@ -1,9 +0,0 @@
-// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
-export enum ArrowPosition {
-  TOP_LEFT = 'up-left',
-  TOP = 'up-center',
-  TOP_RIGHT = 'up-right',
-  BOTTOM_LEFT = 'down-left',
-  BOTTOM = 'down-center',
-  BOTTOM_RIGHT = 'down-right',
-}

package/src/alert/withArrow/index.js

@@ -1,2 +0,0 @@
-export { ArrowPosition as AlertArrowPosition } from './alertArrowPositions';
-export { default } from './withArrow';

package/src/alert/withArrow/withArrow.js

@@ -1,50 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-import { ArrowPosition } from './alertArrowPositions';
-
-function withArrow(Alert, arrow) {
-  const AlertWithArrow = (props) => (
-    <Alert
-      {...props}
-      className={classNames(props.className, arrowClasses(arrow))}
-      arrow={undefined}
-    />
-  );
-
-  AlertWithArrow.propTypes = {
-    className: PropTypes.string,
-  };
-
-  AlertWithArrow.defaultProps = {
-    className: undefined,
-  };
-
-  return AlertWithArrow;
-}
-
-function arrowClasses(arrow) {
-  if (arrow) {
-    const classes = ['arrow'];
-    const { BOTTOM, BOTTOM_LEFT, BOTTOM_RIGHT, TOP, TOP_RIGHT, TOP_LEFT } = ArrowPosition;
-
-    switch (arrow) {
-      case BOTTOM:
-        return classes.concat('arrow-bottom', 'arrow-center');
-      case BOTTOM_LEFT:
-        return classes.concat('arrow-bottom', 'arrow-left');
-      case BOTTOM_RIGHT:
-        return classes.concat('arrow-bottom', 'arrow-right');
-      case TOP:
-        return classes.concat('arrow-center');
-      case TOP_RIGHT:
-        return classes.concat('arrow-right');
-      case TOP_LEFT:
-      default:
-        return classes;
-    }
-  }
-  return '';
-}
-
-export default withArrow;

package/src/alert/withArrow/withArrow.spec.js

@@ -1,51 +0,0 @@
-import { render, screen } from '../../test-utils';
-import Alert from '../Alert';
-
-import { ArrowPosition } from './alertArrowPositions';
-import withArrow from './withArrow';
-
-describe('withArrow', () => {
-  const message = 'I hope you have a nice day today';
-
-  describe('default props', () => {
-    it(`returns an arrowless alert if you don't pass an arrow`, () => {
-      const ArrowLessAlert = withArrow(Alert);
-
-      render(<ArrowLessAlert message={message} />);
-      const component = screen.getByTestId('alert');
-
-      expect(component).not.toHaveClass('arrow');
-    });
-
-    it(`ignores the arrow prop passed to the new alert`, () => {
-      const AlertTopArrow = withArrow(Alert, ArrowPosition.TOP_LEFT);
-
-      render(<AlertTopArrow message={message} arrow={ArrowPosition.BOTTOM_LEFT} />);
-      const component = screen.getByTestId('alert');
-      expect(component).toHaveClass('arrow');
-      expect(component).not.toHaveClass('arrow-bottom');
-    });
-  });
-
-  describe('renders arrows', () => {
-    const getPointyAlert = (arrow) => withArrow(Alert, arrow);
-
-    it(`returns an bottom arrowed alert if you pass a bottom arrow`, () => {
-      const BottomArrowAlert = getPointyAlert(ArrowPosition.BOTTOM);
-      render(<BottomArrowAlert message={message} />);
-      const component = screen.getByTestId('alert');
-
-      expect(component).toHaveClass('arrow');
-      expect(component).toHaveClass('arrow-bottom');
-    });
-
-    it(`returns an top-right arrowed alert if you pass a top right arrow`, () => {
-      const BottomArrowAlert = getPointyAlert(ArrowPosition.TOP_RIGHT);
-      render(<BottomArrowAlert message={message} />);
-      const component = screen.getByTestId('alert');
-
-      expect(component).toHaveClass('arrow');
-      expect(component).toHaveClass('arrow-right');
-    });
-  });
-});

package/src/dateLookup/index.js

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