@transferwise/components 0.0.0-experimental-335b83d → 0.0.0-experimental-fd2ddc2

package/build/types/inputs/_Popover.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-import { type Side } from '@floating-ui/react';
-export interface PopoverProps {
-    placement?: Side;
-    open: boolean;
-    renderTrigger: (args: {
-        ref: React.RefCallback<Element>;
-        getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {
-            [key: string]: unknown;
-        };
-    }) => React.ReactNode;
-    title?: string;
-    padding?: 'none' | 'md';
-    children?: React.ReactNode;
-    onClose?: () => void;
-}
-export declare function Popover({ placement, open, renderTrigger, title, padding, children, onClose, }: PopoverProps): import("react").JSX.Element;
-//# sourceMappingURL=_Popover.d.ts.map

package/build/types/inputs/_Popover.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"_Popover.d.ts","sourceRoot":"","sources":["../../../src/inputs/_Popover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAOL,KAAK,IAAI,EAMV,MAAM,oBAAoB,CAAC;AAO5B,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,EAAE,CAAC,IAAI,EAAE;QACpB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAID,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,IAAI,EACJ,aAAa,EACb,KAAK,EACL,OAAc,EACd,QAAQ,EACR,OAAO,GACR,EAAE,YAAY,+BAwEd"}

package/build/types/utilities/wrapInFragment.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare function wrapInFragment(value: unknown): import("react").JSX.Element;
-//# sourceMappingURL=wrapInFragment.d.ts.map

package/build/types/utilities/wrapInFragment.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"wrapInFragment.d.ts","sourceRoot":"","sources":["../../../src/utilities/wrapInFragment.tsx"],"names":[],"mappings":";AAAA,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,+BAE5C"}

package/src/common/hooks/useMedia.ts

@@ -1,15 +0,0 @@
-import { useSyncExternalStore } from 'use-sync-external-store/shim';
-
-export function useMedia(query: string) {
-  return useSyncExternalStore(
-    (onStoreChange) => {
-      const mediaQueryList = window.matchMedia(query);
-      mediaQueryList.addEventListener('change', onStoreChange);
-      return () => {
-        mediaQueryList.removeEventListener('change', onStoreChange);
-      };
-    },
-    () => (typeof window !== 'undefined' ? window.matchMedia(query).matches : undefined),
-    () => undefined,
-  );
-}

package/src/common/hooks/useScreenSize.ts

@@ -1,7 +0,0 @@
-import { Breakpoint } from '../propsValues/breakpoint';
-
-import { useMedia } from './useMedia';
-
-export function useScreenSize(size: Breakpoint) {
-  return useMedia(`(min-width: ${size}px)`);
-}

package/src/common/preventScroll/PreventScroll.tsx

@@ -1,6 +0,0 @@
-import { usePreventScroll } from '@react-aria/overlays';
-
-export function PreventScroll() {
-  usePreventScroll();
-  return null;
-}

package/src/inputs/SearchInput.story.tsx

@@ -1,40 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-
-import { SearchInput } from './SearchInput';
-
-export default {
-  component: SearchInput,
-  title: 'Forms/SearchInput',
-} satisfies Meta<typeof SearchInput>;
-
-type Story = StoryObj<typeof SearchInput>;
-
-export const Basic: Story = {
-  render: (args) => <SearchInputBasic {...args} />,
-  args: {
-    size: 'md',
-    shape: 'pill',
-    disabled: false,
-  },
-  argTypes: {
-    onChange: {
-      action: 'changed',
-    },
-  },
-};
-
-function SearchInputBasic({ onChange, ...restProps }: NonNullable<Story['args']>) {
-  const [value, setValue] = useState('Text value');
-
-  return (
-    <SearchInput
-      {...restProps}
-      value={value}
-      onChange={(event) => {
-        setValue(event.currentTarget.value);
-        onChange?.(event);
-      }}
-    />
-  );
-}

package/src/inputs/SearchInput.tsx

@@ -1,35 +0,0 @@
-import { Search } from '@transferwise/icons';
-import { forwardRef } from 'react';
-
-import { Merge } from '../utils';
-
-import { Input } from './Input';
-import { InputGroup } from './InputGroup';
-
-export interface SearchInputProps
-  extends Merge<
-    React.ComponentPropsWithRef<'input'>,
-    {
-      size?: 'sm' | 'md';
-      shape?: 'rectangle' | 'pill';
-      'aria-invalid'?: boolean;
-    }
-  > {}
-
-export const SearchInput = forwardRef(function SearchInput(
-  { shape = 'pill', disabled, className, ...restProps }: SearchInputProps,
-  ref: React.ForwardedRef<HTMLInputElement>,
-) {
-  return (
-    <InputGroup
-      addonStart={{
-        content: <Search size={24} />,
-        initialContentWidth: 24,
-      }}
-      disabled={disabled}
-      className={className}
-    >
-      <Input ref={ref} role="searchbox" inputMode="search" shape={shape} {...restProps} />
-    </InputGroup>
-  );
-});

package/src/inputs/SelectInput.css

@@ -1 +0,0 @@
-.np-select-input-placeholder{color:#768e9c;color:var(--color-content-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-options-container{display:flex;flex-direction:column;height:100%}.np-select-input-options-container:focus{outline:none}@media (min-width:576px){.np-select-input-options-container{max-height:28rem}}.np-select-input-query-container{display:flex;flex-direction:column;padding:8px;padding:var(--size-8);padding-top:0}@media (min-width:576px){.np-select-input-query-container{padding-top:8px;padding-top:var(--size-8)}}.np-select-input-listbox-container{height:var(--initial-height);overflow-y:auto;position:relative;scroll-padding-bottom:8px;scroll-padding-bottom:var(--size-8);scroll-padding-top:8px;scroll-padding-top:var(--size-8)}@media (min-width:576px){.np-select-input-listbox-container{height:auto}}.np-select-input-listbox-container--has-group{scroll-padding-top:32px;scroll-padding-top:var(--size-32)}.np-select-input-listbox{padding:8px;padding:var(--size-8)}.np-select-input-listbox:focus{outline:none}.np-select-input-separator-item{border-top-width:1px;margin:8px;margin:var(--size-8)}.np-select-input-group-item--without-needle:first-child{margin-top:-8px;margin-top:calc(var(--size-8)*-1)}.np-select-input-group-item-header{background-color:#fff;background-color:var(--color-background-elevated);color:#5d7079;color:var(--color-content-secondary);padding:8px 16px 4px;padding:var(--size-8) var(--size-16) var(--size-4);position:sticky;top:0;z-index:10}.np-select-input-option-container{align-items:center;border-radius:10px;border-radius:var(--radius-small);color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex;padding:12px 16px;padding:var(--size-12) var(--size-16)}.np-select-input-option-container--active{background-color:var(--color-background-screen-hover)}.np-select-input-option-container--disabled{opacity:.45}.np-select-input-option-check--not-selected{visibility:hidden}.np-select-input-option{flex:1}.np-select-input-option-content-container{align-items:center;color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex}.np-select-input-option-content-icon{display:flex}.np-select-input-option-content-icon--not-compact{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-compact{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-option-content-text-line-1>:not([hidden])~:not([hidden]){margin-left:8px;margin-left:var(--size-8);margin-right:8px;margin-right:var(--size-8)}.np-select-input-addon-container{align-items:center;display:inline-flex;pointer-events:none}.np-select-input-addon{align-items:center;background:none;border-radius:.125rem;border-width:0;display:inline-flex;height:32px;height:var(--size-32);justify-content:center;width:32px;width:var(--size-32)}.np-select-input-addon--interactive{color:#c9cbce;color:var(--color-interactive-secondary);pointer-events:auto}.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{border-inline-start-width:1px;height:24px;height:var(--size-24)}

package/src/inputs/SelectInput.less

@@ -1,183 +0,0 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
-
-.np-select-input-placeholder {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--color-content-tertiary);
-}
-
-.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-query-container {
-  display: flex;
-  flex-direction: column;
-  padding: var(--size-8);
-  padding-top: 0px;
-
-  @media (--screen-sm) {
-    & {
-      padding-top: 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;
-    }
-  }
-
-  &--has-group {
-    scroll-padding-top: var(--size-32);
-  }
-}
-
-.np-select-input-listbox {
-  padding: var(--size-8);
-
-  &:focus {
-    outline: none;
-  }
-}
-
-.np-select-input-separator-item {
-  margin: var(--size-8);
-  border-top-width: 1px;
-}
-
-.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);
-  padding: var(--size-8) var(--size-16) var(--size-4);
-  color: var(--color-content-secondary);
-}
-
-.np-select-input-option-container {
-  display: flex;
-  align-items: center;
-  column-gap: var(--size-8);
-  border-radius: var(--radius-small);
-  padding: var(--size-12) var(--size-16);
-  color: var(--color-content-primary);
-
-  &--active {
-    background-color: var(--color-background-screen-hover);
-  }
-
-  &--disabled {
-    opacity: 0.45;
-  }
-}
-
-.np-select-input-option-check {
-  &--not-selected {
-    visibility: hidden;
-  }
-}
-
-.np-select-input-option {
-  flex: 1;
-}
-
-.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-compact {
-    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-compact {
-  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);
-  }
-}
-
-.np-select-input-addon-container {
-  pointer-events: none;
-  display: inline-flex;
-  align-items: center;
-}
-
-.np-select-input-addon {
-  border-width: 0;
-  background: none;
-
-  display: inline-flex;
-  height: var(--size-32);
-  width: var(--size-32);
-  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-width: 1px;
-}

package/src/inputs/SelectInput.story.tsx

@@ -1,259 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Calendar } from '@transferwise/icons';
-import { Flag } from '@wise/art';
-import { useState } from 'react';
-
-import { getMonthNames } from '../common/dateUtils';
-
-import { SelectInput, type SelectInputItem, SelectInputOptionContent } from './SelectInput';
-
-export default {
-  component: SelectInput,
-} satisfies Meta<typeof SelectInput>;
-
-interface TestMonth {
-  id: number;
-  name: string;
-  unavailable: boolean;
-}
-
-const testMonths: TestMonth[] = getMonthNames('en-US').map((name, index) => ({
-  id: index + 1,
-  name,
-  unavailable: index % 6 === 2,
-}));
-
-const testQuarters = [
-  testMonths.slice(0, 3),
-  testMonths.slice(3, 6),
-  testMonths.slice(6, 9),
-  testMonths.slice(9, 12),
-] as const;
-
-export const Basic: StoryObj<{
-  filterable: boolean;
-  filterPlaceholder: string;
-  clearable: boolean;
-  invalid: boolean;
-  disabled: boolean;
-  onChange: (value: TestMonth | null) => void;
-  onClear: () => void;
-}> = {
-  render: function Story({
-    filterable,
-    filterPlaceholder,
-    clearable,
-    disabled,
-    onChange,
-    onClear,
-  }) {
-    const [selectedMonth, setSelectedMonth] = useState<TestMonth | null>(null);
-
-    return (
-      <div className="d-flex flex-column">
-        {/* TODO:
-        <Field
-          label="Label"
-          hint="Information message."
-          error={invalid ? "Error message." : undefined}
-        >
-        */}
-        <SelectInput
-          placeholder="Month"
-          items={testQuarters
-            .flatMap<SelectInputItem<TestMonth>>((quarterMonths, index) => [
-              {
-                type: 'group',
-                label: `Quarter #${index + 1}`,
-                options: quarterMonths.map((month) => ({
-                  type: 'option',
-                  value: month,
-                  filterMatchers: [month.name],
-                  disabled: month.unavailable,
-                })),
-              },
-              { type: 'separator' },
-            ])
-            .slice(0, -1)}
-          value={selectedMonth}
-          renderValue={(month, compact) => (
-            <SelectInputOptionContent
-              title={month.name}
-              note="Note"
-              description={compact ? undefined : `Month #${month.id}`}
-              icon={<Calendar size={24} />}
-            />
-          )}
-          filterable={filterable}
-          filterPlaceholder={filterPlaceholder}
-          disabled={disabled}
-          onChange={(month) => {
-            setSelectedMonth(month);
-            onChange(month);
-          }}
-          onClear={
-            clearable
-              ? () => {
-                  setSelectedMonth(null);
-                  onClear();
-                }
-              : undefined
-          }
-        />
-      </div>
-    );
-  },
-  args: {
-    filterable: true,
-    filterPlaceholder: 'Type a month’s name',
-    clearable: true,
-    invalid: false,
-    disabled: false,
-  },
-  argTypes: {
-    onChange: {
-      action: 'changed',
-    },
-    onClear: {
-      action: 'cleared',
-    },
-  },
-};
-
-interface Month {
-  id: number;
-  name: string;
-}
-
-const months: Month[] = getMonthNames('en-US').map((name, index) => ({
-  id: index + 1,
-  name,
-}));
-
-export const Months: StoryObj<{
-  onChange: (value: Month | null) => void;
-  onClear: () => void;
-}> = {
-  render: function Story({ onChange, onClear }) {
-    const [selectedMonth, setSelectedMonth] = useState<Month | null>(null);
-
-    return (
-      <div className="d-flex flex-column">
-        <SelectInput
-          placeholder="Month"
-          items={months.map((month) => ({ type: 'option', value: month }))}
-          value={selectedMonth}
-          renderValue={(month) => <SelectInputOptionContent title={month.name} />}
-          onChange={(month) => {
-            setSelectedMonth(month);
-            onChange(month);
-          }}
-          onClear={() => {
-            setSelectedMonth(null);
-            onClear();
-          }}
-        />
-      </div>
-    );
-  },
-  argTypes: {
-    onChange: {
-      action: 'changed',
-    },
-    onClear: {
-      action: 'cleared',
-    },
-  },
-};
-
-interface Currency {
-  code: string;
-  name: string;
-  countries?: string[];
-}
-
-const popularCurrencies: Currency[] = [
-  {
-    code: 'USD',
-    name: 'United States dollar',
-    countries: ['Hong Kong', 'Saudi Arabia'],
-  },
-  {
-    code: 'EUR',
-    name: 'Euro',
-    countries: ['Spain', 'Germany', 'France', 'Austria', 'Estonia'],
-  },
-  {
-    code: 'GBP',
-    name: 'British pound',
-    countries: ['England', 'Scotland', 'Wales'],
-  },
-];
-
-const otherCurrencies: Currency[] = [
-  {
-    code: 'CAD',
-    name: 'Canadian dollar',
-    countries: ['Canada'],
-  },
-  {
-    code: 'AUD',
-    name: 'Australian dollar',
-  },
-];
-
-const allCurrencies: Currency[] = [...popularCurrencies, ...otherCurrencies].sort((a, b) =>
-  a.code.localeCompare(b.code),
-);
-
-export const Currencies: StoryObj<{
-  onChange: (value: Currency) => void;
-}> = {
-  render: function Story({ onChange }) {
-    const [selectedCurrency, setSelectedCurrency] = useState<Currency>(popularCurrencies[0]);
-
-    return (
-      <div className="d-flex flex-column">
-        <SelectInput
-          items={[
-            {
-              type: 'group',
-              label: 'Popular currencies',
-              options: popularCurrencies.map((currency) => ({
-                type: 'option',
-                value: currency,
-              })),
-            },
-            {
-              type: 'group',
-              label: 'All currencies',
-              options: allCurrencies.map((currency) => ({
-                type: 'option',
-                value: currency,
-              })),
-            },
-          ]}
-          value={selectedCurrency}
-          renderValue={(currency) => (
-            <SelectInputOptionContent
-              title={currency.code}
-              note={currency.name}
-              icon={<Flag code={currency.code} intrinsicSize={24} />}
-            />
-          )}
-          filterable
-          filterPlaceholder="Type a currency / country"
-          onChange={(currency) => {
-            setSelectedCurrency(currency);
-            onChange(currency);
-          }}
-        />
-      </div>
-    );
-  },
-  argTypes: {
-    onChange: {
-      action: 'changed',
-    },
-  },
-};