@transferwise/components 0.0.0-experimental-fdc11fa → 0.0.0-experimental-88ddab3

package/src/inputs/SelectInput.tsx

@@ -0,0 +1,552 @@
+import { Listbox as ListboxBase } from '@headlessui/react';
+import { useId } from '@radix-ui/react-id';
+import { Check, ChevronDown, Cross } from '@transferwise/icons';
+import classNames from 'classnames';
+import { createContext, useState, useRef, forwardRef, useEffect, useMemo, useContext } from 'react';
+import { useIntl } from 'react-intl';
+import mergeRefs from 'react-merge-refs';
+
+import { useEffectEvent } from '../common/hooks/useEffectEvent';
+import { useScreenSize } from '../common/hooks/useScreenSize';
+import { Breakpoint } from '../common/propsValues/breakpoint';
+import messages from '../dateLookup/dateTrigger/DateTrigger.messages';
+import { wrapInFragment } from '../utilities/wrapInFragment';
+
+import { InputGroup } from './InputGroup';
+import { SearchInput } from './SearchInput';
+import { BottomSheet } from './_BottomSheet';
+import { ButtonInput, type ButtonInputProps } from './_ButtonInput';
+import { Popover } from './_Popover';
+
+function searchableString(value: string) {
+  return value.trim().replace(/\s+/gu, ' ').toLowerCase();
+}
+
+function inferSearchableStrings(value: unknown) {
+  if (typeof value === 'string') {
+    return [searchableString(value)];
+  }
+
+  if (typeof value === 'object' && value != null) {
+    return Object.values(value)
+      .filter((innerValue): innerValue is string => typeof innerValue === 'string')
+      .map((innerValue) => searchableString(innerValue));
+  }
+
+  return [];
+}
+
+const SelectInputHasValueContext = createContext(false);
+
+const SelectInputOptionContentCompactContext = createContext(false);
+
+interface SelectInputOptionItem<T = string> {
+  type: 'option';
+  value: T;
+  filterMatchers?: readonly string[];
+  disabled?: boolean;
+}
+
+interface SelectInputGroupItem<T = string> {
+  type: 'group';
+  label: string;
+  options: readonly SelectInputOptionItem<T>[];
+}
+
+interface SelectInputSeparatorItem {
+  type: 'separator';
+}
+
+export type SelectInputItem<T = string> =
+  | SelectInputOptionItem<T>
+  | SelectInputGroupItem<T>
+  | SelectInputSeparatorItem;
+
+function dedupeSelectInputOptionItem<T>(
+  item: SelectInputOptionItem<T>,
+  existingValues: Set<T>,
+): SelectInputOptionItem<T | undefined> {
+  if (existingValues.has(item.value)) {
+    return {
+      ...item,
+      value: undefined,
+    };
+  }
+  existingValues.add(item.value);
+  return item;
+}
+
+function dedupeSelectInputItems<T>(
+  items: readonly SelectInputItem<T>[],
+): SelectInputItem<T | undefined>[] {
+  const existingValues = new Set<T>();
+  return items.map((item) => {
+    switch (item.type) {
+      case 'option': {
+        return dedupeSelectInputOptionItem(item, existingValues);
+      }
+      case 'group': {
+        return {
+          ...item,
+          options: item.options.map((option) =>
+            dedupeSelectInputOptionItem(option, existingValues),
+          ),
+        };
+      }
+      default:
+    }
+    return item;
+  });
+}
+
+export interface SelectInputProps<T = string> {
+  name?: string;
+  placeholder?: string;
+  // TODO: multiple?: boolean;
+  items: readonly SelectInputItem<NonNullable<T>>[];
+  defaultValue?: T;
+  value?: T;
+  renderValue?: (value: NonNullable<T>, compact: boolean) => React.ReactNode;
+  compareValues?:
+    | (keyof NonNullable<T> & string)
+    | ((a: T | undefined, b: T | undefined) => boolean);
+  filterable?: boolean;
+  filterPlaceholder?: string;
+  disabled?: boolean;
+  className?: string;
+  onChange?: (value: T) => void;
+  onClear?: () => void;
+}
+
+export function SelectInput<T>({
+  name,
+  placeholder,
+  items,
+  defaultValue,
+  value: controlledValue,
+  renderValue = wrapInFragment,
+  compareValues,
+  filterable,
+  filterPlaceholder,
+  disabled,
+  className,
+  onChange,
+  onClear,
+}: SelectInputProps<T>) {
+  const intl = useIntl();
+
+  const [open, setOpen] = useState(false);
+
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  const screenSm = useScreenSize(Breakpoint.SMALL);
+  const OptionsOverlay = screenSm ? Popover : BottomSheet;
+
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const listboxRef = useRef<HTMLDivElement>(null);
+  const controllerRef = filterable ? searchInputRef : listboxRef;
+
+  return (
+    <ListboxBase
+      name={name}
+      defaultValue={defaultValue}
+      value={controlledValue}
+      // TODO: Remove assertion when upgrading TypeScript to v5
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      by={compareValues as any}
+      disabled={disabled}
+      onChange={(value) => {
+        setOpen(false);
+        onChange?.(value);
+      }}
+    >
+      {({ disabled: uiDisabled, value }) => (
+        <SelectInputHasValueContext.Provider value={value != null}>
+          <InputGroup
+            addonEnd={{
+              content: (
+                <span
+                  className={classNames(
+                    'np-select-input-addon-container',
+                    uiDisabled && 'disabled',
+                  )}
+                >
+                  {onClear != null && value != null ? (
+                    <>
+                      <button
+                        type="button"
+                        aria-label={intl.formatMessage(messages.ariaLabel)}
+                        disabled={uiDisabled}
+                        className="np-select-input-addon np-select-input-addon--interactive"
+                        onClick={(event) => {
+                          event.preventDefault();
+                          onClear();
+                          triggerRef.current?.focus({ preventScroll: true });
+                        }}
+                      >
+                        <Cross size={16} />
+                      </button>
+                      <span className="np-select-input-addon-separator" />
+                    </>
+                  ) : null}
+
+                  <span className="np-select-input-addon">
+                    <ChevronDown size={16} />
+                  </span>
+                </span>
+              ),
+              padding: 'sm',
+            }}
+            className={className}
+          >
+            <OptionsOverlay
+              open={open}
+              renderTrigger={({ ref, getInteractionProps }) => (
+                <ListboxBase.Button
+                  ref={mergeRefs([ref, triggerRef])}
+                  as={SelectInputButton}
+                  overrides={getInteractionProps()}
+                  onClick={() => {
+                    setOpen((prev) => !prev);
+                  }}
+                >
+                  {value != null ? (
+                    <SelectInputOptionContentCompactContext.Provider value>
+                      {renderValue(value, true)}
+                    </SelectInputOptionContentCompactContext.Provider>
+                  ) : (
+                    <span className="np-select-input-placeholder">{placeholder}</span>
+                  )}
+                </ListboxBase.Button>
+              )}
+              initialFocusRef={controllerRef}
+              padding="none"
+              onClose={() => {
+                setOpen(false);
+              }}
+            >
+              <SelectInputOptions
+                items={items}
+                renderValue={renderValue}
+                filterable={filterable}
+                filterPlaceholder={filterPlaceholder}
+                searchInputRef={searchInputRef}
+                listboxRef={listboxRef}
+              />
+            </OptionsOverlay>
+          </InputGroup>
+        </SelectInputHasValueContext.Provider>
+      )}
+    </ListboxBase>
+  );
+}
+
+interface SelectInputButtonProps extends ButtonInputProps {
+  overrides?: { [key: string]: unknown };
+}
+
+const SelectInputButton = forwardRef(function SelectInputButton(
+  { overrides, ...restProps }: SelectInputButtonProps,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  return <ButtonInput ref={ref} {...restProps} {...overrides} />;
+});
+
+interface SelectInputOptionsContainerProps extends React.ComponentPropsWithRef<'div'> {
+  onAriaActiveDescendantChange: (value: React.AriaAttributes['aria-activedescendant']) => void;
+}
+
+const SelectInputOptionsContainer = forwardRef(function SelectInputOptionsContainer(
+  {
+    'aria-orientation': ariaOrientation,
+    'aria-activedescendant': ariaActiveDescendant,
+    role,
+    tabIndex,
+    onAriaActiveDescendantChange,
+    ...restProps
+  }: SelectInputOptionsContainerProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const handleAriaActiveDescendantChange = useEffectEvent(onAriaActiveDescendantChange);
+  useEffect(() => {
+    handleAriaActiveDescendantChange(ariaActiveDescendant);
+  }, [ariaActiveDescendant, handleAriaActiveDescendantChange]);
+
+  return <div ref={ref} {...restProps} />;
+});
+
+interface SelectInputOptionsProps<T = string>
+  extends Pick<SelectInputProps<T>, 'items' | 'renderValue' | 'filterable' | 'filterPlaceholder'> {
+  searchInputRef: React.RefObject<HTMLInputElement>;
+  listboxRef: React.RefObject<HTMLDivElement>;
+}
+
+function SelectInputOptions<T>({
+  items,
+  renderValue = wrapInFragment,
+  filterable,
+  filterPlaceholder,
+  searchInputRef,
+  listboxRef,
+}: SelectInputOptionsProps<T>) {
+  const [query, setQuery] = useState('');
+  const needle = useMemo(() => (query ? searchableString(query) : null), [query]);
+
+  const listboxContainerRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (listboxContainerRef.current != null) {
+      listboxContainerRef.current.style.setProperty(
+        '--initial-height',
+        `${listboxContainerRef.current.offsetHeight}px`,
+      );
+    }
+  }, []);
+
+  const listboxId = useId();
+
+  const controllerRef = filterable ? searchInputRef : listboxRef;
+
+  return (
+    <ListboxBase.Options
+      as={SelectInputOptionsContainer}
+      static
+      className="np-select-input-options-container"
+      onAriaActiveDescendantChange={(value: React.AriaAttributes['aria-activedescendant']) => {
+        if (controllerRef.current != null) {
+          if (value != null) {
+            controllerRef.current.setAttribute('aria-activedescendant', value);
+          } else {
+            controllerRef.current.removeAttribute('aria-activedescendant');
+          }
+        }
+      }}
+    >
+      {filterable ? (
+        <div className="np-select-input-query-container">
+          <SearchInput
+            ref={searchInputRef}
+            shape="rectangle"
+            placeholder={filterPlaceholder}
+            value={query}
+            aria-controls={listboxId}
+            onKeyDown={(event) => {
+              // Prevent interfering with the matcher of Headless UI
+              // https://mathiasbynens.be/notes/javascript-unicode#regex
+              if (/^.$/u.test(event.key)) {
+                event.stopPropagation();
+              }
+            }}
+            onChange={(event) => {
+              setQuery(event.currentTarget.value);
+            }}
+          />
+        </div>
+      ) : null}
+
+      <div
+        ref={listboxContainerRef}
+        className={classNames(
+          'np-select-input-listbox-container',
+          items.some((item) => item.type === 'group') &&
+            'np-select-input-listbox-container--has-group',
+        )}
+      >
+        <div
+          ref={listboxRef}
+          id={listboxId}
+          role="listbox"
+          aria-orientation="vertical"
+          tabIndex={0}
+          className="np-select-input-listbox"
+        >
+          {(needle == null ? items : dedupeSelectInputItems(items)).map((item, index) => (
+            <SelectInputItemView
+              // eslint-disable-next-line react/no-array-index-key
+              key={index}
+              item={item}
+              renderValue={renderValue}
+              needle={needle}
+            />
+          ))}
+        </div>
+      </div>
+    </ListboxBase.Options>
+  );
+}
+
+interface SelectInputItemViewProps<
+  T = string,
+  I extends SelectInputItem<T | undefined> = SelectInputItem<T | undefined>,
+> extends Required<Pick<SelectInputProps<T>, 'renderValue'>> {
+  item: I;
+  needle: string | null;
+}
+
+function SelectInputItemView<T>({ item, renderValue, needle }: SelectInputItemViewProps<T>) {
+  switch (item.type) {
+    case 'option': {
+      if (
+        item.value != null &&
+        (!needle ||
+          inferSearchableStrings(item.filterMatchers ?? item.value).some((haystack) =>
+            haystack.includes(needle),
+          ))
+      ) {
+        return (
+          <SelectInputOption value={item.value} disabled={item.disabled}>
+            {renderValue(item.value, false)}
+          </SelectInputOption>
+        );
+      }
+      break;
+    }
+    case 'group': {
+      return <SelectInputGroupItemView item={item} renderValue={renderValue} needle={needle} />;
+    }
+    case 'separator': {
+      if (needle == null) {
+        return <hr className="np-select-input-separator-item" aria-hidden />;
+      }
+      break;
+    }
+  }
+  return null;
+}
+
+interface SelectInputGroupItemViewProps<T = string>
+  extends SelectInputItemViewProps<T, SelectInputGroupItem<T | undefined>> {}
+
+function SelectInputGroupItemView<T>({
+  item,
+  renderValue,
+  needle,
+}: SelectInputGroupItemViewProps<T>) {
+  const headerId = useId();
+
+  return (
+    // An empty container may be rendered when no options match `needle`
+    // However, pre-filtering would result in worse performance overall
+    <section
+      role="group"
+      aria-labelledby={headerId}
+      className={classNames(needle == null && 'np-select-input-group-item--without-needle')}
+    >
+      {needle == null ? (
+        <header
+          id={headerId}
+          role="presentation"
+          className="np-select-input-group-item-header np-text-title-group"
+        >
+          {item.label}
+        </header>
+      ) : null}
+      {item.options.map((option, index) => (
+        <SelectInputItemView
+          // eslint-disable-next-line react/no-array-index-key
+          key={index}
+          item={option}
+          renderValue={renderValue}
+          needle={needle}
+        />
+      ))}
+    </section>
+  );
+}
+
+interface SelectInputOptionProps<T = string> {
+  value: T;
+  disabled?: boolean;
+  children?: React.ReactNode;
+}
+
+function SelectInputOption<T>({ value, disabled, children }: SelectInputOptionProps<T>) {
+  const parentHasValue = useContext(SelectInputHasValueContext);
+
+  // Avoid flash during exit transition
+  const { current: cachedParentHasValue } = useRef(parentHasValue);
+
+  return (
+    <ListboxBase.Option
+      as="div"
+      value={value}
+      disabled={disabled}
+      className={({ active, disabled: uiDisabled }) =>
+        classNames(
+          'np-select-input-option-container np-text-body-large',
+          active && 'np-select-input-option-container--active',
+          uiDisabled && 'np-select-input-option-container--disabled',
+        )
+      }
+    >
+      {({ selected }) => (
+        <>
+          {cachedParentHasValue ? (
+            <Check
+              size={16}
+              className={classNames(!selected && 'np-select-input-option-check--not-selected')}
+            />
+          ) : null}
+          <div className="np-select-input-option">{children}</div>
+        </>
+      )}
+    </ListboxBase.Option>
+  );
+}
+
+export interface SelectInputOptionContentProps {
+  title: string;
+  note?: string;
+  description?: string;
+  icon?: React.ReactNode;
+}
+
+export function SelectInputOptionContent({
+  title,
+  note,
+  description,
+  icon,
+}: SelectInputOptionContentProps) {
+  const compact = useContext(SelectInputOptionContentCompactContext);
+
+  return (
+    <div className="np-select-input-option-content-container np-text-body-large">
+      {icon ? (
+        <div
+          className={classNames(
+            'np-select-input-option-content-icon',
+            !compact && 'np-select-input-option-content-icon--not-compact',
+          )}
+        >
+          {icon}
+        </div>
+      ) : null}
+
+      <div className="np-select-input-option-content-text">
+        <div
+          className={classNames(
+            'np-select-input-option-content-text-line-1',
+            compact && 'np-select-input-option-content-text-compact',
+          )}
+        >
+          <h4 className="d-inline np-text-body-large">{title}</h4>
+          {note ? (
+            <span className="np-select-input-option-content-text-secondary np-text-body-default">
+              {note}
+            </span>
+          ) : null}
+        </div>
+
+        {description ? (
+          <div
+            className={classNames(
+              'np-select-input-option-content-text-secondary np-text-body-default',
+              compact && 'np-select-input-option-content-text-compact',
+            )}
+          >
+            {description}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/inputs/TextArea.css

@@ -1 +1 @@
-.np-form-control{--ring-width:1px;--ring-color:var(--color-interactive-secondary);background-color:transparent;border:none;box-shadow:inset 0 0 0 var(--ring-width) var(--ring-color);color:#37517e;color:var(--color-content-primary);min-height:0;padding-left:16px;padding-left:var(--size-16);padding-right:16px;padding-right:var(--size-16);transition-duration:.3s;transition-property:color,opacity,box-shadow;transition-timing-function:ease-in-out}.np-form-control:focus-visible{outline:none}.np-form-control[aria-invalid=true]{--ring-width:2px;--ring-color:var(--color-sentiment-negative)!important}.np-form-control:hover:enabled{--ring-width:2px;--ring-color:var(--color-interactive-secondary-hover)}.np-form-control:focus:enabled{--ring-width:3px;--ring-color:var(--color-interactive-primary)}.np-form-control--size-auto{padding-bottom:12px;padding-bottom:var(--size-12);padding-top:12px;padding-top:var(--size-12)}.np-form-control--size-lg,.np-form-control--size-md,.np-form-control--size-sm{padding-bottom:0!important;padding-top:0!important}.np-form-control--size-sm{height:32px!important;height:var(--size-32)!important}.np-form-control--size-md{height:48px!important;height:var(--size-48)!important}.np-form-control--size-lg{height:72px!important;height:var(--size-72)!important}.np-form-control--shape-rectangle{border-radius:10px;border-radius:var(--radius-small)}.np-text-area{min-height:72px;min-height:var(--size-72);overscroll-behavior:none;scroll-padding-bottom:8px;scroll-padding-bottom:var(--size-8);scroll-padding-top:8px;scroll-padding-top:var(--size-8)}
+.np-form-control{--ring-width:1px;--ring-color:var(--color-interactive-secondary);background-color:transparent;border:none;box-shadow:inset 0 0 0 var(--ring-width) var(--ring-color);color:#37517e;color:var(--color-content-primary);min-height:0;padding-left:16px;padding-left:var(--size-16);padding-right:16px;padding-right:var(--size-16);transition-duration:.3s;transition-property:color,opacity,box-shadow;transition-timing-function:ease-in-out}.np-form-control:focus-visible{outline:none}.np-form-control[aria-invalid=true]{--ring-width:2px;--ring-color:var(--color-sentiment-negative)!important}.np-form-control:hover:enabled{--ring-width:2px;--ring-color:var(--color-interactive-secondary-hover)}.np-form-control:focus:enabled{--ring-width:3px;--ring-color:var(--color-interactive-primary)}.np-form-control--size-auto{padding-bottom:12px;padding-bottom:var(--size-12);padding-top:12px;padding-top:var(--size-12)}.np-form-control--size-lg,.np-form-control--size-md,.np-form-control--size-sm{padding-bottom:0!important;padding-top:0!important}.np-form-control--size-sm{height:32px!important;height:var(--size-32)!important}.np-form-control--size-md{height:48px!important;height:var(--size-48)!important}.np-form-control--size-lg{height:72px!important;height:var(--size-72)!important}.np-text-area{border-radius:10px!important;border-radius:var(--radius-small)!important;min-height:72px;min-height:var(--size-72);overscroll-behavior:none;scroll-padding-bottom:8px;scroll-padding-bottom:var(--size-8);scroll-padding-top:8px;scroll-padding-top:var(--size-8)}.np-text-area::-moz-placeholder{color:#768e9c;color:var(--color-content-tertiary)}.np-text-area::placeholder{color:#768e9c;color:var(--color-content-tertiary)}

package/src/inputs/TextArea.less

@@ -5,4 +5,9 @@
   scroll-padding-top: var(--size-8);
   scroll-padding-bottom: var(--size-8);
   overscroll-behavior: none;
+  border-radius: var(--radius-small) !important;
+
+  &::placeholder {
+    color: var(--color-content-tertiary);
+  }
 }

package/src/inputs/_BottomSheet.less

@@ -0,0 +1,107 @@
+.np-bottom-sheet-v2-container {
+  position: relative;
+  z-index: 50;
+}
+
+.np-bottom-sheet-v2-backdrop-container {
+  &--enter, &--leave {
+    transition-property: opacity;
+    transition-timing-function: ease-out;
+    transition-duration: 150ms;
+  }
+
+  &--enter-from, &--leave-to {
+    opacity: 0;
+  }
+}
+
+.np-bottom-sheet-v2-backdrop {
+  position: fixed;
+  inset: 0px;
+  background-color: var(--color-content-primary);
+  opacity: 0.4;
+}
+
+.np-bottom-sheet-v2 {
+  position: fixed;
+  inset: 0px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding-left: var(--size-8);
+  padding-right: var(--size-8);
+  padding-top: var(--size-64);
+}
+
+.np-bottom-sheet-v2-content {
+  max-height: 100%;
+
+  &--enter, &--leave {
+    transition-property: transform;
+    transition-timing-function: ease-out;
+    transition-duration: 300ms;
+
+    @media (prefers-reduced-motion: reduce) {
+      & {
+        transition-property: opacity;
+      }
+    }
+  }
+
+  &--enter-from, &--leave-to {
+    @media (prefers-reduced-motion: no-preference) {
+      & {
+        transform: translateY(100%);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      & {
+        opacity: 0;
+      }
+    }
+  }
+}
+
+.np-bottom-sheet-v2-content-inner-container {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  border-top-left-radius: 32px; /* TODO: Tokenize */
+  border-top-right-radius: 32px; /* TODO: Tokenize */
+  background-color: var(--color-background-elevated);
+  box-shadow: 0 0 40px rgb(69 71 69 / 0.2);
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.np-bottom-sheet-v2-header {
+  align-self: flex-end;
+  padding: var(--size-16);
+}
+
+.np-bottom-sheet-v2-content-inner {
+  padding-top: 0px;
+  display: grid;
+  row-gap: var(--size-8);
+  overflow-y: auto;
+  grid-template-rows: repeat(1, minmax(0, 1fr));
+
+  &--has-title {
+    grid-template-rows: auto 1fr;
+  }
+
+  &--padding-md {
+    padding: var(--size-16);
+  }
+}
+
+.np-bottom-sheet-v2-title {
+  color: var(--color-content-primary);
+}
+
+.np-bottom-sheet-v2-body {
+  color: var(--color-content-secondary);
+}