@transferwise/components 0.0.0-experimental-fd70ead → 0.0.0-experimental-2384dbf

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>
+  );
+}