@transferwise/components 46.155.0 → 46.155.1

package/src/Title/Title.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import React, { forwardRef, LabelHTMLAttributes, LiHTMLAttributes } from 'react';
+import React, { LabelHTMLAttributes, LiHTMLAttributes } from 'react';
 
 import { TitleTypes, Typography, Heading } from '../common';
 
@@ -13,7 +13,9 @@ const titleTypeMapping = {
   [Typography.TITLE_GROUP]: 'h5',
 } as const;
 
-type Props = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement> &
+export type TitleProps = LabelHTMLAttributes<
+  HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement
+> &
   LiHTMLAttributes<HTMLLIElement> & {
     /**
      * Default value will based one `type` prop
@@ -25,29 +27,32 @@ type Props = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElement | HTMLLabe
     type?: TitleTypes;
   };
 
-const Title = React.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];
+const Title = React.forwardRef<
+  HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement | HTMLLIElement | HTMLLegendElement,
+  TitleProps
+>(({ 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-${DEFAULT_TYPE}`, className)}
+        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)}
+    />
+  );
+});
+
+Title.displayName = 'Title';
 
 export default Title;

package/src/Title/index.ts

@@ -1 +1,2 @@
 export { default } from './Title';
+export type { TitleProps } from './Title';

package/src/_deprecated/LegacyListItem/_stories/LegacyListItem.story.tsx

@@ -1,12 +1,11 @@
 import { action } from 'storybook/actions';
 import { Documents, FastFlag } from '@transferwise/icons';
-import { ComponentProps } from 'react';
 
 import { Button, IconButton, List } from '../../..';
 import AvatarView from '../../../AvatarView';
 import Info from '../../../Info';
 import Title from '../../../Title/Title';
-import LegacyListItem from '..';
+import LegacyListItem, { type LegacyListItemProps } from '..';
 
 /**
  * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs)
@@ -22,7 +21,7 @@ const Template = ({
   title = 'Wise',
   value = 'We’re building the world’s most international account',
   ...props
-}: Partial<ComponentProps<typeof LegacyListItem>>) => {
+}: Partial<LegacyListItemProps>) => {
   return <LegacyListItem title={title} value={value} {...props} />;
 };
 

package/src/_deprecated/Select/Option/Option.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { Person } from '@transferwise/icons';
 
-import Option, { Props as OptionProps } from './Option';
+import Option, { type OptionProps } from './Option';
 
 describe('Option', () => {
   const defaultProps: OptionProps<string> = {

package/src/_deprecated/Select/Option/Option.tsx

@@ -6,7 +6,7 @@ import { cloneElement, ReactElement, ReactNode } from 'react';
 import Body from '../../../Body';
 import { Typography } from '../../../common';
 
-export type Props<T> = {
+export type OptionProps<T> = {
   label: ReactNode;
   value: T;
   currency?: string;
@@ -27,7 +27,7 @@ function Option<T>({
   icon,
   selected = false,
   testId,
-}: Props<T>) {
+}: OptionProps<T>) {
   const iconElement = icon
     ? cloneElement(icon as ReactElement<IdIconProps>, {
         size: 24,

package/src/_deprecated/Select/SearchBox/SearchBox.tsx

@@ -4,13 +4,13 @@ import { forwardRef, InputHTMLAttributes } from 'react';
 
 import { Input } from '../../../Inputs/Input/Input';
 
-type Props = {
+type SearchBoxProps = {
   id?: string;
   classNames?: Record<string, string>;
   focusedOptionId?: string;
 } & Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onClick' | 'placeholder' | 'value'>;
 
-const SearchBox = forwardRef<HTMLInputElement, Props>(
+const SearchBox = forwardRef<HTMLInputElement, SearchBoxProps>(
   (
     {
       id,

package/src/common/Circle/Circle.tsx

@@ -5,7 +5,7 @@ import { useMedia } from '../hooks/useMedia';
 
 export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72 | 88 | 96;
 
-export type Props = {
+export type CircleProps = {
   /**
    * Modify underlying element, `div` by default
    */
@@ -64,7 +64,7 @@ const Circle = forwardRef(function Circle(
     className,
     style,
     ...props
-  }: Props,
+  }: CircleProps,
   ref,
 ) {
   const isTinyViewport = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);

package/src/common/Circle/index.ts

@@ -1,2 +1,2 @@
 export { default } from './Circle';
-export { type Props as CircleProps } from './Circle';
+export { type CircleProps } from './Circle';

package/src/index.ts

@@ -25,6 +25,7 @@ export type {
   ButtonProps as LegacyButtonProps,
   AnchorElementProps,
 } from './Button';
+export type { BodyProps } from './Body';
 export type { CardProps } from './_deprecated/Card';
 export type {
   CarouselProps,
@@ -63,6 +64,7 @@ export type {
   DefinitionListLayout,
 } from './DefinitionList';
 export type { DimmerProps } from './Dimmer';
+export type { DisplayProps } from './Display';
 export type { DrawerProps } from './Drawer';
 export type { DividerProps } from './Divider';
 export type { HeaderProps } from './Header';
@@ -89,6 +91,7 @@ export type { TextAreaProps } from './Inputs/TextArea/TextArea';
 export type { InstructionsListProps } from './InstructionsList';
 export type { LabelProps, LabelOptionalProps, LabelDescriptionProps } from './Label';
 export type { LegacyListItemProps } from './_deprecated/LegacyListItem';
+export type { LinkProps } from './Link';
 export type { LoaderProps } from './Loader';
 export type { MarkdownProps } from './Markdown';
 export type { ModalProps } from './Modal';
@@ -145,6 +148,7 @@ export type { SwitchOptionProps } from './_deprecated/SwitchOption';
 export type { TabItem, TabsProps, TabProps, TabListProps, TabPanelProps } from './Tabs';
 export type { TextareaWithDisplayFormatProps } from './TextareaWithDisplayFormat';
 export type { TileProps } from './Tile';
+export type { TitleProps } from './Title';
 export type { TooltipProps } from './Tooltip';
 export type { TypeaheadOption, TypeaheadProps } from './Typeahead';
 export type { UploadProps } from './Upload';

package/src/main.css

@@ -28611,6 +28611,36 @@ button.np-option {
     margin-bottom: 8px;
     margin-bottom: var(--size-8);
   }
+  .tw-definition-list.tw-definition-list--horizontal-right-aligned {
+    display: grid;
+    grid-template-columns: minmax(0, max-content) minmax(0, max-content);
+    grid-column-gap: 52px;
+    grid-column-gap: var(--size-52);
+    -moz-column-gap: 52px;
+         column-gap: 52px;
+    -moz-column-gap: var(--size-52);
+         column-gap: var(--size-52);
+    justify-content: space-between;
+  }
+  .tw-definition-list.tw-definition-list--horizontal-right-aligned .tw-definition-list__item {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+  }
+  .tw-definition-list.tw-definition-list--horizontal-right-aligned .tw-definition-list__item dt {
+    max-width: none;
+    min-width: 0;
+    word-wrap: anywhere;
+    margin-right: 0;
+  }
+  [dir="rtl"] .tw-definition-list.tw-definition-list--horizontal-right-aligned .tw-definition-list__item dt {
+    margin-left: 0;
+    margin-right: 0;
+    margin-right: initial;
+  }
+  .tw-definition-list.tw-definition-list--horizontal-right-aligned .tw-definition-list__item dd {
+    min-width: 0;
+  }
 }
 
 .np-theme-personal .tw-definition-list dt {
@@ -31453,7 +31483,7 @@ html:not([dir="rtl"]) .np-navigation-option {
 
 .wds-nudge-media-documents {
   margin-left: -8px;
-  margin-top: 22px;
+  margin-top: 8px;
   position: absolute;
   width: 120px;
 }
@@ -32682,6 +32712,11 @@ html:not([dir="rtl"]) .np-navigation-option {
   will-change: width;
 }
 
+.wds-sticky.sliding-panel--open-bottom {
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  padding-bottom: var(--wds-sticky-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
+}
+
 .np-select .np-dropdown-toggle {
   background-color: #ffffff;
   background-color: var(--color-background-screen);

package/src/main.less

@@ -78,6 +78,7 @@
 @import "./Snackbar/Snackbar.less";
 @import "./StatusIcon/StatusIcon.less";
 @import "./Stepper/Stepper.less";
+@import "./Sticky/Sticky.less";
 @import "./_deprecated/Select/Select.less";
 @import "./SegmentedControl/SegmentedControl.less";
 @import "./_deprecated/Summary/Summary.less";