@transferwise/components 0.0.0-experimental-8a855e9 → 0.0.0-experimental-841c8df

package/src/inputs/SelectInput/ItemView/GroupItemView/SelectInputGroupItemView.tsx

@@ -1,61 +0,0 @@
-import { clsx } from 'clsx';
-import { useId } from 'react';
-import Header from '../../../../header';
-import Section from '../../../../section';
-import { SelectInputGroupItem } from '../../SelectInput.types';
-import { SelectInputItemView, SelectInputItemViewProps } from '..';
-
-export interface SelectInputGroupItemViewProps<T = string> extends SelectInputItemViewProps<
-  T,
-  SelectInputGroupItem<T | undefined>
-> {}
-
-/**
- * Component that renders a group of SelectInput options with a header.
- */
-export function SelectInputGroupItemView<T = string>({
-  item,
-  renderValue,
-  needle,
-}: SelectInputGroupItemViewProps<T>) {
-  const headerId = useId();
-
-  const header = (
-    <Header
-      as="header"
-      role="none"
-      id={headerId}
-      title={item.label}
-      // @ts-expect-error when we migrate ActionButton to new Button this should be sorted
-      action={
-        item.action && {
-          text: item.action.label,
-          onClick: item.action.onClick,
-        }
-      }
-      className="np-select-input-group-item-header p-x-1"
-    />
-  );
-
-  return (
-    // An empty container may be rendered when no options match `needle`
-    // However, pre-filtering would result in worse performance overall
-    <Section
-      as="section"
-      role="group"
-      aria-labelledby={headerId}
-      className={clsx('m-y-0', needle === null && 'np-select-input-group-item--without-needle')}
-    >
-      {needle == null ? 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>
-  );
-}

package/src/inputs/SelectInput/ItemView/GroupItemView/index.ts

@@ -1,2 +0,0 @@
-export { SelectInputGroupItemView } from './SelectInputGroupItemView';
-export type { SelectInputGroupItemViewProps } from './SelectInputGroupItemView';

package/src/inputs/SelectInput/ItemView/SelectInputItemView.css

@@ -1,16 +0,0 @@
-.np-select-input-group-item--without-needle:first-child {
-  margin-top: calc(-1 * 8px);
-  margin-top: calc(-1 * var(--size-8));
-}
-.np-select-input-group-item-header {
-  position: sticky;
-  top: 0px;
-  z-index: 10;
-  background-color: #ffffff;
-  background-color: var(--color-background-elevated);
-}
-.np-select-input-separator-item {
-  margin: 8px;
-  margin: var(--size-8);
-  border-top-width: 1px;
-}

package/src/inputs/SelectInput/ItemView/SelectInputItemView.less

@@ -1,17 +0,0 @@
-.np-select-input-group-item {
-  &--without-needle:first-child {
-    margin-top: calc(-1 * var(--size-8));
-  }
-}
-
-.np-select-input-group-item-header {
-  position: sticky;
-  top: 0px;
-  z-index: 10;
-  background-color: var(--color-background-elevated);
-}
-
-.np-select-input-separator-item {
-  margin: var(--size-8);
-  border-top-width: 1px;
-}

package/src/inputs/SelectInput/ItemView/SelectInputItemView.tsx

@@ -1,48 +0,0 @@
-import { selectInputOptionItemIncludesNeedle } from '../SelectInput.utils';
-import { SelectInputItem, SelectInputProps } from '../SelectInput.types';
-import { SelectInputOption } from '../Option';
-import { SelectInputGroupItemView } from './GroupItemView';
-
-export interface SelectInputItemViewProps<
-  T = string,
-  I extends SelectInputItem<T | undefined> = SelectInputItem<T | undefined>,
-> extends Required<Pick<SelectInputProps<T>, 'renderValue'>> {
-  item: I;
-  needle: string | null | undefined;
-}
-
-/**
- * Component that renders different types of SelectInput items:
- * options, groups, or separators.
- */
-export function SelectInputItemView<T = string>({
-  item,
-  renderValue,
-  needle,
-}: SelectInputItemViewProps<T>) {
-  switch (item.type) {
-    case 'option': {
-      if (
-        item.value != null &&
-        (needle == null || selectInputOptionItemIncludesNeedle(item, 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" />;
-      }
-      break;
-    }
-  }
-  return null;
-}

package/src/inputs/SelectInput/ItemView/index.ts

@@ -1,3 +0,0 @@
-export { SelectInputItemView } from './SelectInputItemView';
-export type { SelectInputItemViewProps } from './SelectInputItemView';
-export * from './GroupItemView';

package/src/inputs/SelectInput/Option/SelectInputOption.css

@@ -1,33 +0,0 @@
-.np-select-input-option-container {
-  display: flex;
-  cursor: default;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  align-items: center;
-  -moz-column-gap: 8px;
-       column-gap: 8px;
-  -moz-column-gap: var(--size-8);
-       column-gap: var(--size-8);
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  padding: 12px 16px;
-  padding: var(--size-12) var(--size-16);
-  color: var(--color-interactive-primary);
-}
-.np-select-input-option-container:focus {
-  outline: none;
-}
-.np-select-input-option-container--active {
-  box-shadow: inset 0 0 0 1px #c9cbce;
-  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
-}
-.np-select-input-option-container--disabled {
-  opacity: 0.45;
-}
-.np-select-input-option-check--not-selected {
-  visibility: hidden;
-}
-.np-select-input-option {
-  flex: 1;
-}

package/src/inputs/SelectInput/Option/SelectInputOption.less

@@ -1,32 +0,0 @@
-.np-select-input-option-container {
-  display: flex;
-  cursor: default;
-  user-select: none;
-  align-items: center;
-  column-gap: var(--size-8);
-  border-radius: var(--radius-small);
-  padding: var(--size-12) var(--size-16);
-  color: var(--color-interactive-primary);
-
-  &:focus {
-    outline: none;
-  }
-
-  &--active {
-    box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
-  }
-
-  &--disabled {
-    opacity: 0.45;
-  }
-}
-
-.np-select-input-option-check {
-  &--not-selected {
-    visibility: hidden;
-  }
-}
-
-.np-select-input-option {
-  flex: 1;
-}

package/src/inputs/SelectInput/Option/SelectInputOption.tsx

@@ -1,57 +0,0 @@
-import { Check } from '@transferwise/icons';
-import { clsx } from 'clsx';
-import { useContext } from 'react';
-import { ListboxOption } from '@headlessui/react';
-import {
-  SelectInputItemsCountContext,
-  SelectInputItemPositionContext,
-} from '../SelectInput.contexts';
-
-export interface SelectInputOptionProps<T = string> {
-  value: T;
-  disabled?: boolean;
-  children?: React.ReactNode;
-}
-
-/**
- * A selectable option in a SelectInput dropdown.
- * Includes accessibility support and styling for selected, active, and disabled states.
- */
-export function SelectInputOption<T = string>({
-  value,
-  disabled,
-  children,
-}: SelectInputOptionProps<T>) {
-  const itemsCount = useContext(SelectInputItemsCountContext);
-  const itemPosition = useContext(SelectInputItemPositionContext);
-
-  return (
-    <ListboxOption
-      as="div"
-      value={value}
-      aria-setsize={itemsCount}
-      aria-posinset={itemPosition}
-      disabled={disabled}
-      className={({ active, disabled: uiDisabled }) =>
-        clsx(
-          'np-select-input-option-container np-text-body-large',
-          active && 'np-select-input-option-container--active',
-          uiDisabled && 'np-select-input-option-container--disabled',
-        )
-      }
-    >
-      {({ selected }) => (
-        <>
-          <div className="np-select-input-option">{children}</div>
-          <Check
-            size={16}
-            className={clsx(
-              'np-select-input-option-check',
-              !selected && 'np-select-input-option-check--not-selected',
-            )}
-          />
-        </>
-      )}
-    </ListboxOption>
-  );
-}

package/src/inputs/SelectInput/Option/index.ts

@@ -1,2 +0,0 @@
-export { SelectInputOption } from './SelectInputOption';
-export type { SelectInputOptionProps } from './SelectInputOption';

package/src/inputs/SelectInput/OptionContent/SelectInputOptionContent.css

@@ -1,37 +0,0 @@
-.np-select-input-option-content-container {
-  display: flex;
-  align-items: center;
-  -moz-column-gap: 8px;
-       column-gap: 8px;
-  -moz-column-gap: var(--size-8);
-       column-gap: var(--size-8);
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-select-input-option-content-icon {
-  display: flex;
-}
-.np-select-input-option-content-icon--not-within-trigger {
-  align-self: flex-start;
-}
-.np-select-input-option-content-text {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  overflow: hidden;
-}
-.np-select-input-option-content-text-secondary {
-  color: #5d7079;
-  color: var(--color-content-secondary);
-}
-.np-select-input-option-content-text-within-trigger {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.np-select-input-option-content-text-line-1 > :not([hidden]) ~ :not([hidden]) {
-  margin-right: 8px;
-  margin-right: var(--size-8);
-  margin-left: 8px;
-  margin-left: var(--size-8);
-}

package/src/inputs/SelectInput/OptionContent/SelectInputOptionContent.less

@@ -1,38 +0,0 @@
-.np-select-input-option-content-container {
-  display: flex;
-  align-items: center;
-  column-gap: var(--size-8);
-  color: var(--color-content-primary);
-}
-
-.np-select-input-option-content-icon {
-  display: flex;
-
-  &--not-within-trigger {
-    align-self: flex-start;
-  }
-}
-
-.np-select-input-option-content-text {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.np-select-input-option-content-text-secondary {
-  color: var(--color-content-secondary);
-}
-
-.np-select-input-option-content-text-within-trigger {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.np-select-input-option-content-text-line-1 {
-  > :not([hidden]) ~ :not([hidden]) {
-    margin-right: var(--size-8);
-    margin-left: var(--size-8);
-  }
-}

package/src/inputs/SelectInput/OptionContent/SelectInputOptionContent.tsx

@@ -1,72 +0,0 @@
-import { clsx } from 'clsx';
-import { useContext } from 'react';
-import { SelectInputOptionContentWithinTriggerContext } from '../SelectInput.contexts';
-
-export interface SelectInputOptionContentProps {
-  title: React.ReactNode;
-  note?: string;
-  description?: string;
-  icon?: React.ReactNode;
-}
-
-/**
- * Component for rendering structured content within a SelectInput option.
- * Supports title, optional note, description, and icon with different styling
- * based on whether it's rendered within the trigger button or the dropdown.
- */
-export function SelectInputOptionContent({
-  title,
-  note,
-  description,
-  icon,
-}: SelectInputOptionContentProps) {
-  const withinTrigger = useContext(SelectInputOptionContentWithinTriggerContext);
-
-  return (
-    <div
-      className={clsx(
-        'np-select-input-option-content-container',
-        (note || description) && 'np-text-body-large',
-      )}
-    >
-      {icon ? (
-        <div
-          className={clsx(
-            'np-select-input-option-content-icon',
-            !withinTrigger && 'np-select-input-option-content-icon--not-within-trigger',
-          )}
-        >
-          {icon}
-        </div>
-      ) : null}
-
-      <div className="np-select-input-option-content-text">
-        <div
-          className={clsx(
-            'np-select-input-option-content-text-line-1',
-            withinTrigger && 'np-select-input-option-content-text-within-trigger',
-          )}
-        >
-          <div className="d-inline">{title}</div>
-          {note ? (
-            <span className="np-select-input-option-content-text-secondary np-text-body-default">
-              {note}
-            </span>
-          ) : null}
-        </div>
-
-        {description ? (
-          <div
-            className={clsx(
-              'np-select-input-option-content-text-secondary np-text-body-default',
-              withinTrigger &&
-                'np-select-input-option-content-text-within-trigger np-select-input-option-description-in-trigger',
-            )}
-          >
-            {description}
-          </div>
-        ) : null}
-      </div>
-    </div>
-  );
-}

package/src/inputs/SelectInput/OptionContent/index.ts

@@ -1,2 +0,0 @@
-export { SelectInputOptionContent } from './SelectInputOptionContent';
-export type { SelectInputOptionContentProps } from './SelectInputOptionContent';

package/src/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.tsx

@@ -1,59 +0,0 @@
-import { forwardRef, useEffect } from 'react';
-import { useEffectEvent } from '../../../../common/hooks/useEffectEvent';
-
-export interface SelectInputOptionsContainerProps extends React.ComponentPropsWithRef<'div'> {
-  onAriaActiveDescendantChange: (value: React.AriaAttributes['aria-activedescendant']) => void;
-}
-
-/**
- * Container component for SelectInput options.
- * Handles keyboard navigation and accessibility features.
- */
-export const SelectInputOptionsContainer = forwardRef(function SelectInputOptionsContainer(
-  {
-    'aria-orientation': ariaOrientation,
-    'aria-activedescendant': ariaActiveDescendant,
-    role,
-    tabIndex,
-    onAriaActiveDescendantChange,
-    onKeyDown,
-    ...restProps
-  }: SelectInputOptionsContainerProps,
-  ref: React.ForwardedRef<HTMLDivElement | null>,
-) {
-  const handleAriaActiveDescendantChange = useEffectEvent(onAriaActiveDescendantChange);
-  useEffect(() => {
-    handleAriaActiveDescendantChange(ariaActiveDescendant);
-  }, [ariaActiveDescendant, handleAriaActiveDescendantChange]);
-
-  return (
-    <div
-      ref={ref}
-      role="none"
-      onKeyDown={(event) => {
-        // Prevent confirmation close without an active item
-        if (event.key === 'Enter' && ariaActiveDescendant == null) {
-          return;
-        }
-
-        // Required to make ListBox focusable
-        if (event.key === 'Tab') {
-          return;
-        }
-
-        // Prevent absorbing Escape early
-        if (event.key === 'Escape') {
-          onKeyDown?.({
-            ...event,
-            preventDefault: () => {},
-            stopPropagation: () => {},
-          });
-          return;
-        }
-
-        onKeyDown?.(event);
-      }}
-      {...restProps}
-    />
-  );
-});

package/src/inputs/SelectInput/Options/OptionsContainer/index.ts

@@ -1,2 +0,0 @@
-export { SelectInputOptionsContainer } from './SelectInputOptionsContainer';
-export type { SelectInputOptionsContainerProps } from './SelectInputOptionsContainer';

package/src/inputs/SelectInput/Options/SelectInputOptions.css

@@ -1,81 +0,0 @@
-.np-select-input-options-container {
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-}
-.np-select-input-options-container:focus {
-  outline: none;
-}
-@media (min-width: 576px) {
-  .np-select-input-options-container {
-    max-height: 28rem /* 448px */;
-  }
-}
-.np-select-input-options-status {
-  display: flex;
-  align-items: center;
-  -moz-column-gap: 8px;
-       column-gap: 8px;
-  -moz-column-gap: var(--size-8);
-       column-gap: var(--size-8);
-  padding: 8px 24px 0px;
-  padding: var(--size-8) var(--size-24) 0px;
-}
-.np-select-input-options-status-icon {
-  padding: 0 4px;
-  padding: 0 var(--size-4);
-  color: #768e9c;
-  color: var(--color-content-tertiary);
-}
-.np-select-input-query-container {
-  display: flex;
-  flex-direction: column;
-  padding: 8px;
-  padding: var(--size-8);
-}
-.np-select-input-listbox-container {
-  position: relative;
-  height: var(--initial-height);
-  scroll-padding-top: 8px;
-  scroll-padding-top: var(--size-8);
-  scroll-padding-bottom: 8px;
-  scroll-padding-bottom: var(--size-8);
-  overflow-y: auto;
-}
-@media (min-width: 576px) {
-  .np-select-input-listbox-container {
-    height: auto;
-  }
-}
-.np-select-input-listbox-container--virtualized {
-  /* The wrapping element shrinks this as needed */
-  height: 100vh;
-}
-.np-select-input-listbox-container--has-group {
-  scroll-padding-top: 32px;
-  scroll-padding-top: var(--size-32);
-}
-.np-select-input-listbox {
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  padding: 8px;
-  padding: var(--size-8);
-  --ring-outline-offset: calc(-1 * var(--ring-outline-width));
-}
-.np-select-input-listbox:focus {
-  outline: none;
-}
-.np-select-input-listbox:focus-visible {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-}
-.np-select-input-listbox-container--virtualized .np-select-input-listbox {
-  /* Adopted from `VList` in virtua: https://github.com/inokawa/virtua/blob/7f6ed5b37df6b480d4ff350f3960067c5b3519d2/src/react/VList.tsx#L113-L116 */
-  overflow-y: auto;
-  contain: strict;
-  height: 100%;
-}
-.np-select-input-footer {
-  padding: 4px 24px 16px;
-  padding: var(--size-4) var(--size-24) var(--size-16);
-}

package/src/inputs/SelectInput/Options/SelectInputOptions.less

@@ -1,77 +0,0 @@
-@import (reference) "../../../../node_modules/@transferwise/neptune-css/src/less/ring.less";
-
-.np-select-input-options-container {
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-
-  &:focus {
-    outline: none;
-  }
-
-  @media (--screen-sm) {
-    & {
-      max-height: 28rem /* 448px */;
-    }
-  }
-}
-
-.np-select-input-options-status {
-  display: flex;
-  align-items: center;
-  column-gap: var(--size-8);
-  padding: var(--size-8) var(--size-24) 0px;
-}
-
-.np-select-input-options-status-icon {
-  padding: 0 var(--size-4);
-  color: var(--color-content-tertiary);
-}
-
-.np-select-input-query-container {
-  display: flex;
-  flex-direction: column;
-  padding: var(--size-8);
-}
-
-.np-select-input-listbox-container {
-  position: relative;
-  height: var(--initial-height);
-  scroll-padding-top: var(--size-8);
-  scroll-padding-bottom: var(--size-8);
-  overflow-y: auto;
-
-  @media (--screen-sm) {
-    & {
-      height: auto;
-    }
-  }
-
-  &--virtualized {
-    /* The wrapping element shrinks this as needed */
-    height: 100vh;
-  }
-
-  &--has-group {
-    scroll-padding-top: var(--size-32);
-  }
-}
-
-.np-select-input-listbox {
-  border-radius: var(--radius-small);
-  padding: var(--size-8);
-
-  .focus-ring();
-  --ring-outline-offset: calc(-1 * var(--ring-outline-width));
-
-  .np-select-input-listbox-container--virtualized & {
-    /* Adopted from `VList` in virtua: https://github.com/inokawa/virtua/blob/7f6ed5b37df6b480d4ff350f3960067c5b3519d2/src/react/VList.tsx#L113-L116 */
-    overflow-y: auto;
-    contain: strict;
-    height: 100%;
-  }
-}
-
-.np-select-input-footer {
-  padding: var(--size-4) var(--size-24) var(--size-16);
-}