@transferwise/components 45.13.0 → 45.14.1

package/src/index.ts

@@ -2,6 +2,7 @@
  * Types
  */
 export type { InputProps } from './inputs/Input';
+export type { InputGroupProps } from './inputs/InputGroup';
 export type { TextAreaProps } from './inputs/TextArea';
 export type { UploadedFile, UploadError, UploadResponse } from './uploadInput/types';
 export type { ModalProps } from './modal';
@@ -52,6 +53,7 @@ export { default as Image } from './image';
 export { default as Info } from './info';
 export { default as InlineAlert } from './inlineAlert';
 export { Input } from './inputs/Input';
+export { InputGroup } from './inputs/InputGroup';
 export { TextArea } from './inputs/TextArea';
 export { default as InputWithDisplayFormat } from './inputWithDisplayFormat';
 export { default as InstructionsList } from './instructionsList';

package/src/inlineAlert/{InlineAlert.story.js → InlineAlert.story.tsx}

@@ -1,14 +1,15 @@
 import { select, text } from '@storybook/addon-knobs';
+import { Meta } from '@storybook/react';
 
 import { Sentiment } from '../common';
 import { Input } from '../inputs/Input';
 
-import InlineAlert from './InlineAlert';
+import InlineAlert, { InlineAlertProps } from './InlineAlert';
 
 export default {
   component: InlineAlert,
   title: 'Forms/InlineAlert',
-};
+} as Meta<InlineAlertProps>;
 
 export const Basic = () => {
   const type = select(

package/src/inlineAlert/InlineAlert.tsx

@@ -0,0 +1,59 @@
+import { AlertCircle as AlertCircleIcon } from '@transferwise/icons';
+import { useTheme } from '@wise/components-theming';
+import classNames from 'classnames';
+import { ReactNode } from 'react';
+
+import withArrow, { AlertArrowPosition } from '../alert/withArrow';
+import { Sentiment } from '../common';
+import { SentimentString } from '../common/propsValues/sentiment';
+
+export interface InlineAlertProps {
+  id?: string;
+  type?: Sentiment | SentimentString;
+  className?: string;
+  children: ReactNode;
+}
+
+const typeClassMap: Record<Sentiment.ERROR | Sentiment.NEGATIVE, string> = {
+  [Sentiment.ERROR]: 'danger',
+  [Sentiment.NEGATIVE]: 'danger',
+};
+
+const InlineAlert = ({ id, type = Sentiment.NEUTRAL, className, children }: InlineAlertProps) => {
+  const { isModern } = useTheme();
+
+  const typeClass = `alert-${typeClassMap[type as Sentiment.ERROR | Sentiment.NEGATIVE] || type}`;
+
+  if (isModern) {
+    return (
+      <div role="alert" id={id} className={classNames('alert alert-detach', typeClass, className)}>
+        {(type === 'error' || type === 'negative') && <AlertCircleIcon />}
+        <div>{children}</div>
+      </div>
+    );
+  }
+
+  const getAlertContents = ({
+    children,
+    className,
+  }: {
+    children: ReactNode;
+    className?: string;
+  }) => {
+    return (
+      <div
+        role="alert"
+        id={id}
+        className={classNames('alert alert-detach p-x-2 p-y-1', typeClass, className)}
+      >
+        {children}
+      </div>
+    );
+  };
+
+  const AlertWithArrow = withArrow(getAlertContents, AlertArrowPosition.TOP_LEFT);
+
+  return <AlertWithArrow {...{ id, type, className, children }} />;
+};
+
+export default InlineAlert;

package/src/inputs/Input.tsx

@@ -4,24 +4,30 @@ import { forwardRef } from 'react';
 import { SizeLarge, SizeMedium, SizeSmall } from '../common';
 import { Merge } from '../utils';
 
+import { useInputPaddings } from './InputGroup';
 import { formControlClassNameBase } from './_common';
 
-export type InputProps = Merge<
-  React.ComponentPropsWithRef<'input'>,
-  {
-    size?: 'auto' | SizeSmall | SizeMedium | SizeLarge;
-    'aria-invalid'?: boolean;
-  }
->;
+export interface InputProps
+  extends Merge<
+    React.ComponentPropsWithRef<'input'>,
+    {
+      size?: 'auto' | SizeSmall | SizeMedium | SizeLarge;
+      'aria-invalid'?: boolean;
+    }
+  > {}
 
 export const Input = forwardRef(function Input(
   { size = 'auto', className, ...restProps }: InputProps,
   reference: React.ForwardedRef<HTMLInputElement>,
 ) {
+  const inputPaddings = useInputPaddings();
+
   return (
     <input
       ref={reference}
       className={classNames(className, formControlClassNameBase({ size }))}
+      // eslint-disable-next-line react/forbid-dom-props
+      style={inputPaddings}
       {...restProps}
     />
   );

package/src/inputs/InputGroup.css

@@ -0,0 +1 @@
+.np-input-group{border-radius:50%;border-radius:var(--radius-full);display:inline-grid;grid-auto-columns:minmax(0,1fr)}.np-input-group>*{grid-column-start:1;grid-row-start:1}.np-input-addon{align-items:center;color:#c9cbce;color:var(--color-interactive-secondary);display:inline-flex;pointer-events:none;transition-duration:.15s;transition-property:color,opacity;transition-timing-function:ease-out;z-index:10}.np-input-group:has(>:is(input,button,select):focus-visible) .np-input-addon{color:var(--color-interactive-primary)}.np-input-group:has(>:is(input,button,select):hover) .np-input-addon{color:#b5b7ba;color:var(--color-interactive-secondary-hover)}.np-input-addon--placement-start{justify-self:start}.np-input-addon--placement-end{justify-self:end}.np-input-addon--interactive>*{pointer-events:auto}.np-input-addon--padding-sm{padding-left:8px;padding-left:var(--size-8);padding-right:8px;padding-right:var(--size-8)}.np-input-addon--padding-md{padding-left:16px;padding-left:var(--size-16);padding-right:16px;padding-right:var(--size-16)}.np-input-addon--padding-md.np-input-addon--placement-start{padding-inline-end:8px;padding-inline-end:var(--size-8)}.np-input-addon--padding-md.np-input-addon--placement-end{padding-inline-start:8px;padding-inline-start:var(--size-8)}

package/src/inputs/InputGroup.less

@@ -0,0 +1,61 @@
+.np-input-group {
+  display: inline-grid;
+  grid-auto-columns: minmax(0, 1fr);
+
+  > * {
+    grid-column-start: 1;
+    grid-row-start: 1;
+  }
+
+  /* Prevent unwanted `group-hover/input` triggers */
+  border-radius: var(--radius-full);
+}
+
+.np-input-addon {
+  pointer-events: none;
+  z-index: 10;
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-interactive-secondary);
+  transition-property: color, opacity;
+  transition-timing-function: ease-out;
+  transition-duration: 150ms;
+
+  .np-input-group:has(>:is(input,button,select):focus-visible) & {
+    color: var(--color-interactive-primary);
+  }
+
+  .np-input-group:has(>:is(input,button,select):hover) & {
+    color: var(--color-interactive-secondary-hover);
+  }
+
+  &--placement-start {
+    justify-self: start;
+  }
+
+  &--placement-end {
+    justify-self: end;
+  }
+
+  &--interactive > * {
+    pointer-events: auto;
+  }
+
+  &--padding-sm {
+    padding-left: var(--size-8);
+    padding-right: var(--size-8);
+  }
+
+  &--padding-md {
+    padding-left: var(--size-16);
+    padding-right: var(--size-16);
+
+    &.np-input-addon--placement-start {
+      padding-inline-end: var(--size-8);
+    }
+
+    &.np-input-addon--placement-end {
+      padding-inline-start: var(--size-8);
+    }
+  }
+}

package/src/inputs/InputGroup.story.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Search } from '@transferwise/icons';
+import { useRef, useState } from 'react';
+
+import ActionButton from '../actionButton';
+
+import { Input } from './Input';
+import { InputGroup } from './InputGroup';
+
+export default {
+  component: InputGroup,
+  title: 'Forms/InputGroup',
+} satisfies Meta<typeof InputGroup>;
+
+type Story = StoryObj<typeof InputGroup>;
+
+export const WithPrefix: Story = {
+  render: (args) => <InputGroupWithPrefix {...args} />,
+  args: {
+    disabled: false,
+  },
+};
+
+function InputGroupWithPrefix(args: NonNullable<Story['args']>) {
+  return (
+    <InputGroup
+      {...args}
+      addonStart={{
+        content: <Search size={24} />,
+        initialContentWidth: 24,
+      }}
+    >
+      <Input placeholder="Search by name…" />
+    </InputGroup>
+  );
+}
+
+export const WithSuffix: Story = {
+  render: (args) => <InputGroupWithSuffix {...args} />,
+  args: {
+    disabled: false,
+  },
+};
+
+function InputGroupWithSuffix(args: NonNullable<Story['args']>) {
+  const ref = useRef<HTMLInputElement>(null);
+  const [value, setValue] = useState('Text value');
+
+  return (
+    <InputGroup
+      {...args}
+      addonEnd={{
+        content: (
+          <ActionButton
+            onClick={async () => {
+              await navigator.clipboard.writeText(value);
+              if (ref.current != null) {
+                ref.current.focus({ preventScroll: true });
+                ref.current.select();
+              }
+            }}
+          >
+            Copy
+          </ActionButton>
+        ),
+        interactive: true,
+        padding: 'sm',
+      }}
+    >
+      <Input ref={ref} value={value} onChange={(event) => setValue(event.currentTarget.value)} />
+    </InputGroup>
+  );
+}

package/src/inputs/InputGroup.tsx

@@ -0,0 +1,142 @@
+import classNames from 'classnames';
+import { createContext, useContext, useMemo, useRef, useState } from 'react';
+
+import { useResizeObserver } from '../common/hooks/useResizeObserver';
+import { cssValueWithUnit } from '../utilities/cssValueWithUnit';
+
+type InputPaddingContextType = [
+  number | string | undefined,
+  React.Dispatch<React.SetStateAction<number | string | undefined>>,
+];
+
+const InputPaddingStartContext = createContext<InputPaddingContextType>([undefined, () => {}]);
+
+const InputPaddingEndContext = createContext<InputPaddingContextType>([undefined, () => {}]);
+
+export function useInputPaddings() {
+  const [paddingStart] = useContext(InputPaddingStartContext);
+  const [paddingEnd] = useContext(InputPaddingEndContext);
+
+  return {
+    paddingInlineStart: paddingStart,
+    paddingInlineEnd: paddingEnd,
+  } satisfies React.CSSProperties;
+}
+
+interface InputGroupAddon {
+  content: React.ReactNode;
+  initialContentWidth?: number | string;
+  interactive?: boolean;
+  padding?: 'none' | 'sm' | 'md';
+}
+
+export interface InputGroupProps {
+  addonStart?: InputGroupAddon;
+  addonEnd?: InputGroupAddon;
+  disabled?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+function inputPaddingInitialState({
+  initialContentWidth,
+  padding = inputAddonDefaultPadding,
+}: Pick<
+  InputGroupAddon,
+  'initialContentWidth' | 'padding'
+> = {}): () => InputPaddingContextType[0] {
+  return () =>
+    initialContentWidth != null
+      ? `calc(${cssValueWithUnit(initialContentWidth)} + ${cssValueWithUnit(
+          inputAddonContentWidthAddendByPadding[padding],
+        )})`
+      : undefined;
+}
+
+export function InputGroup({
+  addonStart,
+  addonEnd,
+  disabled,
+  className,
+  children,
+}: InputGroupProps) {
+  const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));
+  const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));
+
+  return (
+    <InputPaddingStartContext.Provider
+      value={useMemo(() => [paddingStart, setPaddingStart], [paddingStart])}
+    >
+      <InputPaddingEndContext.Provider
+        value={useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd])}
+      >
+        <fieldset disabled={disabled} className={classNames(className, 'np-input-group')}>
+          {addonStart != null ? <InputAddon placement="start" {...addonStart} /> : null}
+          {children}
+          {addonEnd != null ? <InputAddon placement="end" {...addonEnd} /> : null}
+        </fieldset>
+      </InputPaddingEndContext.Provider>
+    </InputPaddingStartContext.Provider>
+  );
+}
+
+interface InputAddonProps extends Omit<InputGroupAddon, 'initialContentWidth'> {
+  placement: 'start' | 'end';
+}
+
+const inputAddonContentWidthAddendByPadding = {
+  none: 0,
+  sm: '1rem',
+  md: '1.5rem',
+} satisfies {
+  [key in NonNullable<InputAddonProps['padding']>]: InputPaddingContextType[0];
+};
+
+const inputAddonDefaultPadding = 'md' satisfies InputAddonProps['padding'];
+
+function InputAddon({
+  placement,
+  content,
+  interactive,
+  padding = inputAddonDefaultPadding,
+}: InputAddonProps) {
+  const [, setInputPadding] = useContext(
+    placement === 'start' ? InputPaddingStartContext : InputPaddingEndContext,
+  );
+
+  const ref = useRef<HTMLSpanElement>(null);
+  useResizeObserver(ref, (entry) => {
+    // TODO: Remove fallback once most browsers support `borderBoxSize`
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (entry.borderBoxSize != null) {
+      setInputPadding(entry.borderBoxSize[0].inlineSize);
+    } else {
+      const targetStyle = getComputedStyle(entry.target);
+      setInputPadding(
+        entry.contentRect.width +
+          Number.parseFloat(targetStyle.paddingInlineStart) +
+          Number.parseFloat(targetStyle.paddingInlineEnd),
+      );
+    }
+  });
+
+  return (
+    <span
+      ref={ref}
+      className={classNames(
+        'np-input-addon',
+        {
+          'np-input-addon--placement-start': placement === 'start',
+          'np-input-addon--placement-end': placement === 'end',
+        },
+        interactive && 'np-input-addon--interactive',
+        {
+          'np-input-addon--padding-sm': padding === 'sm',
+          'np-input-addon--padding-md': padding === 'md',
+        },
+      )}
+    >
+      {content}
+    </span>
+  );
+}

package/src/inputs/TextArea.tsx

@@ -5,12 +5,13 @@ import { Merge } from '../utils';
 
 import { formControlClassNameBase } from './_common';
 
-export type TextAreaProps = Merge<
-  React.ComponentPropsWithRef<'textarea'>,
-  {
-    'aria-invalid'?: boolean;
-  }
->;
+export interface TextAreaProps
+  extends Merge<
+    React.ComponentPropsWithRef<'textarea'>,
+    {
+      'aria-invalid'?: boolean;
+    }
+  > {}
 
 export const TextArea = forwardRef(function TextArea(
   { className, ...restProps }: TextAreaProps,