@transferwise/components 0.0.0-experimental-e789c10 → 0.0.0-experimental-c84454a

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