@transferwise/components 46.36.1 → 46.38.0

package/src/card/{Card.js → Card.tsx}

@@ -1,17 +1,29 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import { forwardRef } from 'react';
-import requiredIf from 'react-required-if';
 
 import Body from '../body';
 import Chevron from '../chevron';
 import { Position, Typography } from '../common';
 import Option from '../common/Option';
 
-const Card = forwardRef((props, reference) => {
-  const {
+export interface CardProps {
+  'aria-label'?: string;
+  as?: React.ElementType;
+  isExpanded?: boolean;
+  title: React.ReactNode;
+  details: React.ReactNode;
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+  id?: string;
+  className?: string;
+  'data-testid'?: string;
+  onClick?: (nextIsExpanded: boolean) => void;
+}
+
+const Card = forwardRef(function Card(
+  {
     'aria-label': ariaLabel,
-    as: Element,
+    as: Element = 'div',
     isExpanded,
     title,
     details,
@@ -20,8 +32,10 @@ const Card = forwardRef((props, reference) => {
     icon,
     id,
     className,
-    ...rest
-  } = props;
+    'data-testid': dataTestId,
+  }: CardProps,
+  reference,
+) {
   const isOpen = !!(isExpanded && children);
 
   return (
@@ -33,7 +47,7 @@ const Card = forwardRef((props, reference) => {
         'np-card--has-icon': !!icon,
       })}
       id={id}
-      data-testid={rest['data-testid']}
+      data-testid={dataTestId}
     >
       <Option
         aria-label={ariaLabel}
@@ -44,7 +58,7 @@ const Card = forwardRef((props, reference) => {
         content={details}
         showMediaAtAllSizes
         button={children && <Chevron orientation={isOpen ? Position.TOP : Position.BOTTOM} />}
-        onClick={() => children && onClick(!isExpanded)}
+        onClick={children ? () => onClick?.(!isExpanded) : undefined}
       />
       <div
         className={classNames('np-card__divider', {
@@ -60,29 +74,4 @@ const Card = forwardRef((props, reference) => {
   );
 });
 
-const hasChildren = ({ children }) => children;
-
-Card.propTypes = {
-  'aria-label': PropTypes.string,
-  as: PropTypes.string,
-  isExpanded: requiredIf(PropTypes.bool, hasChildren),
-  title: PropTypes.node.isRequired,
-  details: PropTypes.node.isRequired,
-  onClick: requiredIf(PropTypes.func, hasChildren),
-  icon: PropTypes.node,
-  children: PropTypes.node,
-  id: PropTypes.string,
-  className: PropTypes.string,
-  'data-testid': PropTypes.string,
-};
-
-Card.defaultProps = {
-  'aria-label': undefined,
-  as: 'div',
-  children: null,
-  id: null,
-  className: null,
-  'data-testid': null,
-};
-
 export default Card;

package/src/card/index.ts

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

package/src/checkbox/{Checkbox.spec.js → Checkbox.spec.tsx}

@@ -2,10 +2,10 @@ import '@testing-library/jest-dom';
 
 import { render, fireEvent, screen } from '@testing-library/react';
 
-import Checkbox from '.';
+import Checkbox, { CheckboxProps } from '.';
 
 describe('Checkbox', () => {
-  let props;
+  let props: CheckboxProps;
 
   beforeEach(() => {
     props = {
@@ -68,7 +68,7 @@ describe('Checkbox', () => {
 
   it('has disabled class when the disabled prop is true', () => {
     const { container } = render(<Checkbox {...props} disabled />);
-    expect(getCheckboxContainer(container).firstChild).toHaveClass('disabled');
+    expect(getCheckboxContainer(container)?.firstChild).toHaveClass('disabled');
   });
 
   it('passes required to checkbox button', () => {
@@ -117,7 +117,7 @@ describe('Checkbox', () => {
     expect(getCheckboxContainer(container)).toHaveClass('checkbox-lg');
   });
 
-  const getCheckboxContainer = (container) => container.querySelector('.np-checkbox');
-  const getLabel = () => screen.getByText('hello').parentElement;
+  const getCheckboxContainer = (container: HTMLElement) => container.querySelector('.np-checkbox');
+  const getLabel = () => screen.getByText('hello').parentElement!;
   const getCheckbox = () => screen.getByRole('checkbox');
 });

package/src/checkbox/{Checkbox.js → Checkbox.tsx}

@@ -1,12 +1,24 @@
-import { useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 
 import Body from '../body/Body';
 import CheckboxButton from '../checkboxButton';
 import { Typography } from '../common';
 
-const Checkbox = ({
+export interface CheckboxProps {
+  id?: string;
+  checked?: boolean;
+  required?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  label: React.ReactNode;
+  secondary?: string;
+  onFocus?: React.FocusEventHandler<HTMLInputElement>;
+  onChange: (checked: boolean) => void;
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  className?: string;
+}
+
+export default function Checkbox({
   id,
   checked,
   required,
@@ -18,15 +30,13 @@ const Checkbox = ({
   onChange,
   onFocus,
   onBlur,
-}) => {
-  const { isModern } = useTheme();
-
+}: CheckboxProps) {
   const classList = classNames(
     'np-checkbox',
     {
       checkbox: true,
       'checkbox-lg': secondary,
-      disabled: isModern && disabled,
+      disabled,
     },
     className,
   );
@@ -51,41 +61,9 @@ const Checkbox = ({
           type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}
         >
           <span className={required ? 'has-required' : undefined}>{label}</span>
-          {secondary && (
-            <Body as="span" className={classNames({ secondary: !isModern })}>
-              {secondary}
-            </Body>
-          )}
+          {secondary && <Body as="span">{secondary}</Body>}
         </Body>
       </label>
     </div>
   );
-};
-
-Checkbox.propTypes = {
-  id: PropTypes.string,
-  checked: PropTypes.bool,
-  required: PropTypes.bool,
-  disabled: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  label: PropTypes.node.isRequired,
-  secondary: PropTypes.string,
-  onFocus: PropTypes.func,
-  onChange: PropTypes.func.isRequired,
-  onBlur: PropTypes.func,
-  className: PropTypes.string,
-};
-
-Checkbox.defaultProps = {
-  id: null,
-  checked: false,
-  required: false,
-  disabled: false,
-  readOnly: false,
-  secondary: null,
-  onFocus: null,
-  onBlur: null,
-  className: undefined,
-};
-
-export default Checkbox;
+}

package/src/checkbox/index.ts

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

package/src/chips/Chip.tsx

@@ -1,10 +1,9 @@
 import { useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
-import { ReactElement, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 import Body from '../body/Body';
-import { AriaLabelProperty, CommonProps } from '../common';
-import { Typography } from '../common';
+import { AriaLabelProperty, CommonProps, Typography } from '../common';
 import { CloseButton } from '../common/closeButton/CloseButton';
 
 export type ChipValue = string | number;
@@ -32,7 +31,7 @@ const Chip = ({
   'aria-checked': ariaChecked,
   role,
   closeButton,
-}: Props): ReactElement => {
+}: Props) => {
   const isActionable = onClick || onKeyPress;
   const defaultRole = isActionable ? 'button' : undefined;
   const tabIndex = isActionable ? 0 : -1;
@@ -40,7 +39,7 @@ const Chip = ({
   const { isModern } = useTheme();
 
   const closeButtonReference = useRef<HTMLButtonElement>(null);
-  const previousCloseButtonShown = useRef<boolean>();
+  const previousCloseButtonShown = useRef<boolean | undefined>(undefined);
   useEffect(() => {
     if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {
       closeButtonReference.current?.focus();
@@ -78,7 +77,7 @@ const Chip = ({
         <CloseButton
           ref={closeButtonReference}
           className={isModern ? `btn-unstyled` : `btn-unstyled m-l-1`}
-          aria-label={closeButton && closeButton['aria-label']}
+          aria-label={closeButton?.['aria-label']}
           size="sm"
           filled={isModern}
           onClick={onRemove}

package/src/chips/Chips.tsx

@@ -1,5 +1,4 @@
 import classNames from 'classnames';
-import { ReactElement } from 'react';
 import { useIntl } from 'react-intl';
 
 import { CommonProps, AriaLabelProperty } from '../common';
@@ -39,7 +38,7 @@ const Chips = ({
   'aria-label': ariaLabel,
   className,
   multiple,
-}: ChipsProps): ReactElement => {
+}: ChipsProps) => {
   const intl = useIntl();
 
   const isSelected = (value: ChipValue) =>

package/src/common/bottomSheet/BottomSheet.tsx

@@ -1,12 +1,5 @@
 import classNames from 'classnames';
-import {
-  useRef,
-  useState,
-  ReactElement,
-  PropsWithChildren,
-  CSSProperties,
-  SyntheticEvent,
-} from 'react';
+import { useRef, useState, PropsWithChildren, CSSProperties, SyntheticEvent } from 'react';
 
 import Dimmer from '../../dimmer';
 import Drawer from '../../drawer';
@@ -38,7 +31,7 @@ export type BottomSheetProps = PropsWithChildren<
  * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet
  *
  */
-const BottomSheet = (props: BottomSheetProps): ReactElement => {
+const BottomSheet = (props: BottomSheetProps) => {
   const bottomSheetReference = useRef<HTMLDivElement>(null);
   const topBarReference = useRef<HTMLDivElement>(null);
   const contentReference = useRef<HTMLDivElement>(null);

package/src/common/closeButton/CloseButton.tsx

@@ -27,7 +27,7 @@ export const CloseButton = forwardRef(function CloseButton(
     isDisabled,
     testId,
   }: CloseButtonProps,
-  reference: React.ForwardedRef<HTMLButtonElement>,
+  reference: React.ForwardedRef<HTMLButtonElement | null>,
 ) {
   const intl = useIntl();
   ariaLabel ??= intl.formatMessage(messages.ariaLabel);

package/src/common/flowHeader/FlowHeader.tsx

@@ -20,7 +20,7 @@ const FlowHeader = React.forwardRef(
       leftContent,
       rightContent,
     }: FlowHeaderProps,
-    reference: React.ForwardedRef<HTMLDivElement>,
+    reference: React.ForwardedRef<HTMLDivElement | null>,
   ) => {
     const isVertical = layout === Layout.VERTICAL;
 

package/src/common/hooks/useResizeObserver.ts

@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import { useEffectEvent } from './useEffectEvent';
 
 export function useResizeObserver(
-  ref: React.RefObject<Element>,
+  ref: React.MutableRefObject<Element | null>,
   callback: (entry: ResizeObserverEntry) => void,
 ) {
   const handleCallback = useEffectEvent(callback);

package/src/common/panel/Panel.spec.tsx

@@ -6,7 +6,7 @@ import { render } from '../../test-utils';
 import Panel from './Panel';
 import type { PanelProps } from './Panel';
 
-const mockAnchorRef: React.RefObject<HTMLAnchorElement> = {
+const mockAnchorRef: React.MutableRefObject<HTMLAnchorElement | null> = {
   current: document.createElement('a'),
 };
 

package/src/common/panel/Panel.tsx

@@ -1,13 +1,13 @@
 import classnames from 'classnames';
 import {
-  useState,
-  forwardRef,
-  useEffect,
+  CSSProperties,
+  HTMLAttributes,
+  MutableRefObject,
   PropsWithChildren,
-  RefObject,
   SyntheticEvent,
-  HTMLAttributes,
-  CSSProperties,
+  forwardRef,
+  useEffect,
+  useState,
 } from 'react';
 import { usePopper } from 'react-popper';
 
@@ -33,7 +33,7 @@ export type PanelProps = PropsWithChildren<{
   open?: boolean;
   onClose?: (event: Event | SyntheticEvent) => void;
   position?: PositionBottom | PositionLeft | PositionRight | PositionTop;
-  anchorRef: RefObject<Element>;
+  anchorRef: MutableRefObject<Element | null>;
   anchorWidth?: boolean;
 }> &
   HTMLAttributes<HTMLDivElement>;

package/src/common/polymorphicWithOverrides/PolymorphicWithOverrides.tsx

@@ -13,7 +13,7 @@ export interface PolymorphicWithOverridesProps {
  */
 export const PolymorphicWithOverrides = forwardRef(function PolymorphicWithOverrides(
   { __overrides: { as: Element, ...restOverrides }, ...restProps }: PolymorphicWithOverridesProps,
-  ref: React.ForwardedRef<Element>,
+  ref: React.ForwardedRef<Element | null>,
 ) {
   return <Element ref={ref} {...restProps} {...restOverrides} />;
 });

package/src/decision/Decision.tsx

@@ -14,7 +14,7 @@ interface DecisionOption {
     block: React.ReactNode;
     list: React.ReactNode;
   };
-  onClick?: React.MouseEventHandler<HTMLElement>;
+  onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
   title: React.ReactNode;
 }
 

package/src/definitionList/{DefinitionList.story.js → DefinitionList.story.tsx}

@@ -30,14 +30,34 @@ const definitions = [
 
 export const Basic = () => {
   const muted = boolean('muted', false);
-  const layout = select('layout', Object.values(Layout), Layout.HORIZONTAL_LEFT_ALIGNED);
+  const layout = select(
+    'layout',
+    [
+      Layout.VERTICAL_TWO_COLUMN,
+      Layout.VERTICAL_ONE_COLUMN,
+      Layout.HORIZONTAL_JUSTIFIED,
+      Layout.HORIZONTAL_LEFT_ALIGNED,
+      Layout.HORIZONTAL_RIGHT_ALIGNED,
+    ],
+    Layout.HORIZONTAL_LEFT_ALIGNED,
+  );
 
   return <DefinitionList layout={layout} muted={muted} definitions={definitions} />;
 };
 
 export const WithActionButtons = () => {
   const muted = boolean('muted', false);
-  const layout = select('layout', Object.values(Layout), Layout.HORIZONTAL_LEFT_ALIGNED);
+  const layout = select(
+    'layout',
+    [
+      Layout.VERTICAL_TWO_COLUMN,
+      Layout.VERTICAL_ONE_COLUMN,
+      Layout.HORIZONTAL_JUSTIFIED,
+      Layout.HORIZONTAL_LEFT_ALIGNED,
+      Layout.HORIZONTAL_RIGHT_ALIGNED,
+    ],
+    Layout.HORIZONTAL_LEFT_ALIGNED,
+  );
 
   return (
     <DefinitionList

package/src/definitionList/DefinitionList.tsx

@@ -0,0 +1,95 @@
+import classNames from 'classnames';
+
+import ActionButton from '../actionButton';
+import { Layout } from '../common';
+
+interface Definition {
+  action?: {
+    label: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  };
+  title: React.ReactNode;
+  value: React.ReactNode;
+  key: string;
+}
+
+type DefinitionListLayout =
+  `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;
+
+export interface DefinitionListProps {
+  definitions?: Definition[];
+  layout?: DefinitionListLayout;
+  muted?: boolean;
+}
+
+const isLayoutHorizontal = (layout: DefinitionListLayout) =>
+  layout === Layout.HORIZONTAL_LEFT_ALIGNED ||
+  layout === Layout.HORIZONTAL_RIGHT_ALIGNED ||
+  layout === Layout.HORIZONTAL_JUSTIFIED;
+
+const getAlignmentClasses = (layout: DefinitionListLayout, action: Definition['action']) => {
+  const classes = ['d-flex'];
+
+  if (action) {
+    if (isLayoutHorizontal(layout)) {
+      classes.push('align-items-center');
+    } else {
+      classes.push('align-items-start');
+    }
+  }
+
+  if (layout === Layout.HORIZONTAL_RIGHT_ALIGNED) {
+    classes.push('text-sm-right tw-definition-list--right-aligned-desktop');
+  } else {
+    classes.push('justify-content-between');
+  }
+
+  if (layout === Layout.HORIZONTAL_JUSTIFIED) {
+    classes.push('text-sm-justify');
+  }
+
+  return classes;
+};
+
+const defaultDefinitions = [] satisfies DefinitionListProps['definitions'];
+
+export default function DefinitionList({
+  definitions = defaultDefinitions,
+  layout = 'VERTICAL_TWO_COLUMN',
+  muted,
+}: DefinitionListProps) {
+  return (
+    <dl
+      className={classNames('tw-definition-list d-flex ', {
+        'text-muted': muted,
+        'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,
+        'tw-definition-list--columns flex-column flex-row--sm':
+          layout === Layout.VERTICAL_TWO_COLUMN,
+        'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout),
+      })}
+    >
+      {definitions
+        .filter((definition) => definition)
+        .map(({ action, title, value, key }) => (
+          <div key={key} className="tw-definition-list__item">
+            <dt>{title}</dt>
+            <dd className={classNames(...getAlignmentClasses(layout, action))}>
+              <div>{value}</div>
+              {action ? (
+                <div
+                  className={classNames(
+                    isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2',
+                    'tw-definition-list__action',
+                  )}
+                >
+                  <ActionButton className="tw-definition-list__button" onClick={action.onClick}>
+                    {action.label}
+                  </ActionButton>
+                </div>
+              ) : null}
+            </dd>
+          </div>
+        ))}
+    </dl>
+  );
+}

package/src/definitionList/index.ts

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

package/src/dimmer/Dimmer.tsx

@@ -1,14 +1,6 @@
 import { ThemeProvider, useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
-import {
-  MouseEvent,
-  ReactElement,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import { MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
 import {
@@ -203,7 +195,7 @@ export const DimmerContentWrapper = ({
   children,
   scrollBody,
 }: {
-  children: ReactElement;
+  children: React.ReactElement;
   scrollBody: boolean;
 }) => {
   useEffect(() => {

package/src/drawer/{Drawer.rtl.spec.js → Drawer.rtl.spec.tsx}

@@ -1,3 +1,5 @@
+import { DimmerProps } from '../dimmer';
+import { SlidingPanelProps } from '../slidingPanel';
 import { mockMatchMedia, render, screen, userEvent } from '../test-utils';
 
 import Drawer from './Drawer';
@@ -7,7 +9,7 @@ mockMatchMedia();
 jest.mock(
   '../dimmer',
   () =>
-    function ({ open, children }) {
+    function Dimmer({ open, children }: DimmerProps) {
       return open ? <div className="dimmer">{children}</div> : null;
     },
 );
@@ -15,7 +17,7 @@ jest.mock(
 jest.mock(
   '../slidingPanel',
   () =>
-    function ({ open, children }) {
+    function SlidingPanel({ open, children }: SlidingPanelProps) {
       return open ? <div className="sliding-panel">{children}</div> : null;
     },
 );

package/src/drawer/{Drawer.story.js → Drawer.story.tsx}

@@ -3,7 +3,6 @@ import { useState } from 'react';
 
 import { Section, Button, Input, Modal } from '..';
 import { Position, Priority } from '../common';
-import { storyConfig } from '../test-utils';
 
 import Drawer from './Drawer';
 
@@ -17,18 +16,6 @@ export const Basic = () => {
   const [openModal, setOpenModal] = useState(false);
   const position = select('position', [Position.LEFT, Position.RIGHT], Position.RIGHT);
 
-  const handleDrawerClose = (event) => {
-    console.log('drawer close');
-    event.stopPropagation();
-    setOpenDrawer(false);
-  };
-
-  const handleModalClose = (event) => {
-    console.log('modal close');
-    event.stopPropagation();
-    setOpenModal(false);
-  };
-
   return (
     <>
       <Button disabled={false} block={false} onClick={() => setOpenDrawer(true)}>
@@ -48,7 +35,11 @@ export const Basic = () => {
             </Button>
           </>
         }
-        onClose={handleDrawerClose}
+        onClose={(event) => {
+          console.log('drawer close');
+          event.stopPropagation();
+          setOpenDrawer(false);
+        }}
       >
         <p>
           I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
@@ -62,23 +53,24 @@ export const Basic = () => {
           <Button onClick={() => setOpenModal(true)}>Open Modal</Button>
           <Modal
             body={
-              <>
-                <p className="m-t-4">
-                  I am baby actually poke kickstarter, street art jean shorts bespoke chambray
-                  activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo,
-                  cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage
-                  disrupt pok pok. La croix stumptown try-hard chartreuse. I am baby actually poke
-                  kickstarter, street art jean shorts bespoke chambray activated charcoal ramps
-                  marfa shoreditch tumeric, I am baby actually poke kickstarter, street art jean
-                  shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr.
-                  Mixtape cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts.
-                  Scenester readymade selvage disrupt pok pok.
-                </p>
-              </>
+              <p className="m-t-4">
+                I am baby actually poke kickstarter, street art jean shorts bespoke chambray
+                activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo,
+                cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage
+                disrupt pok pok. La croix stumptown try-hard chartreuse. I am baby actually poke
+                kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa
+                shoreditch tumeric, I am baby actually poke kickstarter, street art jean shorts
+                bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape
+                cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester
+                readymade selvage disrupt pok pok.
+              </p>
             }
             open={openModal}
             title="Title"
-            onClose={handleModalClose}
+            onClose={() => {
+              console.log('modal close');
+              setOpenModal(false);
+            }}
           />
         </Section>
         <p>