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

package/build/types/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectInputTriggerButton.d.ts","sourceRoot":"","sources":["../../../../../src/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,MAAM,MAAM,mCAAmC,GAAG,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC;AAEjF,MAAM,MAAM,6BAA6B,CACvC,CAAC,SAAS,mCAAmC,GAAG,QAAQ,IACtD,KAAK,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE;IAAE,EAAE,CAAC,EAAE,CAAC,CAAA;CAAE,CAAC,CAAC;AAEzD;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,CAAC,SAAS,mCAAmC,GAAG,QAAQ,EAAE,EACjG,EAAkB,EAClB,GAAG,SAAS,EACb,EAAE,6BAA6B,CAAC,CAAC,CAAC,+BAclC"}

package/build/types/inputs/SelectInput/TriggerButton/index.d.ts

@@ -1,3 +0,0 @@
-export { SelectInputTriggerButton } from './SelectInputTriggerButton';
-export type { SelectInputTriggerButtonElementType, SelectInputTriggerButtonProps, } from './SelectInputTriggerButton';
-//# sourceMappingURL=index.d.ts.map

package/build/types/inputs/SelectInput/TriggerButton/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/inputs/SelectInput/TriggerButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,YAAY,EACV,mCAAmC,EACnC,6BAA6B,GAC9B,MAAM,4BAA4B,CAAC"}

package/build/types/inputs/SelectInput/components.d.ts

@@ -1,10 +0,0 @@
-export * from './ClearButton';
-export * from './Option';
-export * from './OptionContent';
-export * from './TriggerButton';
-export * from './ItemView';
-export * from './Options';
-export * from './BottomSheet';
-export * from './Popover';
-export * from './ButtonInput';
-//# sourceMappingURL=components.d.ts.map

package/build/types/inputs/SelectInput/components.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../../src/inputs/SelectInput/components.ts"],"names":[],"mappings":"AACA,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC"}

package/build/types/inputs/SelectInput/index.d.ts

@@ -1,10 +0,0 @@
-export * from './SelectInput';
-export * from './SelectInput.types';
-export * from './ClearButton';
-export * from './Option';
-export * from './OptionContent';
-export * from './TriggerButton';
-export * from './DefaultRenderTrigger';
-export * from './ItemView';
-export * from './Options';
-//# sourceMappingURL=index.d.ts.map

package/build/types/inputs/SelectInput/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/inputs/SelectInput/index.ts"],"names":[],"mappings":"AACA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AAGpC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC"}

package/src/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.css

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

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

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

package/src/inputs/SelectInput/ButtonInput/SelectInputButtonInput.css

@@ -1,16 +0,0 @@
-.np-button-input {
-  display: inline-grid;
-  grid-auto-columns: minmax(0, 1fr);
-  align-content: center;
-  border-radius: 10px;
-  border-radius: var(--size-10);
-  text-align: start;
-}
-.np-button-input:has(.np-select-input-option-description-in-trigger) {
-  height: auto !important;
-  align-content: start;
-  padding-top: 12px !important;
-  padding-top: var(--size-12) !important;
-  padding-bottom: 12px !important;
-  padding-bottom: var(--size-12) !important;
-}

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

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

package/src/inputs/SelectInput/ClearButton/SelectInputClearButton.css

@@ -1,46 +0,0 @@
-.np-select-input-addon-container {
-  pointer-events: none;
-  margin-inline-start: 4px;
-  margin-inline-start: var(--size-4);
-  display: inline-flex;
-  align-items: center;
-}
-.np-select-input-addon-container > :not([hidden]) ~ :not([hidden]) {
-  margin-inline-start: 4px;
-  margin-inline-start: var(--size-4);
-}
-.np-select-input-addon {
-  border-width: 0;
-  background: none;
-  display: inline-flex;
-  height: 24px;
-  height: var(--size-24);
-  width: 24px;
-  width: var(--size-24);
-  align-items: center;
-  justify-content: center;
-  border-radius: 0.125rem /* 2px */;
-  /* TODO: Tokenize */
-}
-.np-select-input-addon--interactive {
-  pointer-events: auto;
-  color: #c9cbce;
-  color: var(--color-interactive-secondary);
-}
-.np-select-input-addon--interactive:hover {
-  color: #b5b7ba;
-  color: var(--color-interactive-secondary-hover);
-}
-.np-select-input-addon--interactive:focus {
-  outline: none;
-}
-.np-select-input-addon--interactive:focus-visible {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-}
-.np-select-input-addon-separator {
-  height: 24px;
-  height: var(--size-24);
-  border-inline-start: 1px solid rgba(0,0,0,0.10196);
-  border-inline-start: 1px solid var(--color-border-neutral);
-}

package/src/inputs/SelectInput/ClearButton/SelectInputClearButton.less

@@ -1,39 +0,0 @@
-@import (reference) "../../../../node_modules/@transferwise/neptune-css/src/less/ring.less";
-
-.np-select-input-addon-container {
-  pointer-events: none;
-  margin-inline-start: var(--size-4);
-  display: inline-flex;
-  align-items: center;
-
-  & > :not([hidden]) ~ :not([hidden]) {
-    margin-inline-start: var(--size-4);
-  }
-}
-
-.np-select-input-addon {
-  border-width: 0;
-  background: none;
-  display: inline-flex;
-  height: var(--size-24);
-  width: var(--size-24);
-  align-items: center;
-  justify-content: center;
-  border-radius: 0.125rem /* 2px */; /* TODO: Tokenize */
-
-  &--interactive {
-    pointer-events: auto;
-    color: var(--color-interactive-secondary);
-
-    &:hover {
-      color: var(--color-interactive-secondary-hover);
-    }
-
-    .focus-ring();
-  }
-}
-
-.np-select-input-addon-separator {
-  height: var(--size-24);
-  border-inline-start: 1px solid var(--color-border-neutral);
-}

package/src/inputs/SelectInput/ClearButton/SelectInputClearButton.tsx

@@ -1,27 +0,0 @@
-import { Cross } from '@transferwise/icons';
-import { clsx } from 'clsx';
-import { useIntl } from 'react-intl';
-import dateTriggerMessages from '../../../dateLookup/dateTrigger/DateTrigger.messages';
-
-export interface SelectInputClearButtonProps extends Pick<
-  React.ComponentPropsWithoutRef<'button'>,
-  'className' | 'onClick'
-> {}
-
-/**
- * A button component used to clear the selected value in a SelectInput.
- */
-export function SelectInputClearButton({ className, onClick }: SelectInputClearButtonProps) {
-  const intl = useIntl();
-
-  return (
-    <button
-      type="button"
-      aria-label={intl.formatMessage(dateTriggerMessages.ariaLabel)}
-      className={clsx(className, 'np-select-input-addon np-select-input-addon--interactive')}
-      onClick={onClick}
-    >
-      <Cross size={16} />
-    </button>
-  );
-}

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

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

package/src/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.tsx

@@ -1,74 +0,0 @@
-import { ChevronDown } from '@transferwise/icons';
-import { clsx } from 'clsx';
-import React from 'react';
-
-import { InputGroup } from '../../InputGroup';
-import { SelectInputClearButton } from '../ClearButton';
-import { SelectInputTriggerButton } from '../TriggerButton';
-import { SelectInputProps } from '../SelectInput.types';
-import { SelectInputButtonInput } from '../ButtonInput';
-
-export interface SelectInputDefaultRenderTriggerProps {
-  content: React.ReactNode;
-  placeholderShown: boolean;
-  clear: (() => void) | undefined;
-  disabled: boolean;
-  size: 'sm' | 'md' | 'lg';
-  className: string | undefined;
-}
-
-/**
- * Default render function for the SelectInput trigger.
- * Displays the selected value or placeholder with clear button and dropdown indicator.
- */
-export function SelectInputDefaultRenderTrigger({
-  content,
-  placeholderShown,
-  clear,
-  disabled,
-  size,
-  className,
-}: SelectInputDefaultRenderTriggerProps) {
-  return (
-    <InputGroup
-      addonEnd={{
-        content: (
-          <span className={clsx('np-select-input-addon-container', disabled && 'disabled')}>
-            {clear != null && !placeholderShown ? (
-              <>
-                <SelectInputClearButton
-                  onClick={(event) => {
-                    event.preventDefault();
-                    clear();
-                  }}
-                />
-                <span className="np-select-input-addon-separator" />
-              </>
-            ) : null}
-            <span className="np-select-input-addon">
-              <ChevronDown size={16} />
-            </span>
-          </span>
-        ),
-        initialContentWidth: 24 + 4,
-        padding: 'sm',
-      }}
-      disabled={disabled}
-      className={className}
-    >
-      <SelectInputTriggerButton as={SelectInputButtonInput} size={size}>
-        <span
-          className={clsx(
-            'np-select-input-content',
-            placeholderShown && 'np-select-input-placeholder',
-          )}
-        >
-          {content}
-        </span>
-      </SelectInputTriggerButton>
-    </InputGroup>
-  );
-}
-
-export const DefaultRenderTrigger =
-  SelectInputDefaultRenderTrigger satisfies SelectInputProps['renderTrigger'];

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

@@ -1,5 +0,0 @@
-export {
-  SelectInputDefaultRenderTrigger,
-  DefaultRenderTrigger,
-  type SelectInputDefaultRenderTriggerProps,
-} from './SelectInputDefaultRenderTrigger';

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';