@transferwise/components 0.0.0-experimental-17cb250 → 0.0.0-experimental-333df2c

package/build/types/label/Label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/label/Label.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,QAAA,MAAM,KAAK;2CAA0C,UAAU;wCAqBpB,kBAAkB;2CAkBf,qBAAqB;CAtBlE,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAkBhE,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAQnE,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/label/Label.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,KAAK,yCAA0C,UAAU,gCAUrE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-17cb250",
+  "version": "0.0.0-experimental-333df2c",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -93,12 +93,12 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-17cb250",
+    "@transferwise/neptune-css": "14.12.1",
     "@wise/components-theming": "1.5.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-17cb250",
+    "@transferwise/neptune-css": "^14.9.6",
     "@wise/art": "^2.7.0",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",
@@ -125,7 +125,8 @@
     "merge-props": "^6.0.0",
     "prop-types": "^15.8.1",
     "react-popper": "^2.3.0",
-    "react-transition-group": "^4.4.5"
+    "react-transition-group": "^4.4.5",
+    "virtua": "^0.33.3"
   },
   "publishConfig": {
     "access": "public"

package/src/dateInput/DateInput.tests.story.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within, fn } from '@storybook/test';
 
-import { DateInput, Field, InlineAlert, Label } from '..';
+import { DateInput, DateMode, Info, InlineAlert, Title, Typography } from '..';
 import { lorem10, storyConfig } from '../test-utils';
 
 import Provider from '../provider/Provider';
@@ -39,19 +39,43 @@ export const WithLabel = {
   },
   render: (args) => {
     const id1 = 'date-input-group-label-1';
+    const label = 'Date of Birth';
 
     return (
       <>
-        <Label id={id1}>
-          <Label.Optional>Date of Delivery</Label.Optional>
-        </Label>
-        <DateInput {...args} aria-labelledby={id1} aria-label="" />
+        <Title type={Typography.TITLE_SUBSECTION}>
+          label (as <code>div</code> element) is linked with <code>DateInput</code> via{' '}
+          <code>aria-labelledby</code> prop
+        </Title>
+        <div className="control-label" id={id1}>
+          Date of Delivery
+        </div>
+        <DateInput {...args} aria-labelledby={id1} />
 
         <br />
 
-        <Field label="Date of Delivery">
-          <DateInput {...args} />
-        </Field>
+        <Title type={Typography.TITLE_SUBSECTION}>
+          label (as <code>div</code> element) is detached but <code>DateInput</code> has same label
+          via <code>aria-label</code> attribute
+        </Title>
+        <div className="control-label">
+          {label}{' '}
+          <Info aria-label="Fast transfer hint" title="Fast transfer hint" content={lorem10} />
+        </div>
+        <DateInput {...args} aria-label={label} />
+
+        <br />
+
+        <Title type={Typography.TITLE_SUBSECTION}>
+          <code>DateInput</code> wrapped in <code>fieldset</code> + using <code>legend</code> as
+          label (rare use case)
+        </Title>
+        <fieldset>
+          <legend className="control-label">
+            Expiry Date for Credit Card (example of MONTH_YEAR mode)
+          </legend>
+          <DateInput {...args} mode={DateMode.MONTH_YEAR} />
+        </fieldset>
       </>
     );
   },

package/src/dateLookup/DateLookup.rtl.spec.tsx

@@ -28,7 +28,7 @@ describe('DateLookup', () => {
       </Field>,
     );
     // TODO: Replace with `.toHaveAttribute('aria-haspopup')`
-    expect(screen.getByLabelText(/Date of birth/)).toHaveTextContent(
+    expect(screen.getByLabelText('Date of birth')).toHaveTextContent(
       initialValue.getFullYear().toString(),
     );
   });

package/src/dateLookup/dateTrigger/DateTrigger.css

@@ -4,10 +4,18 @@
   white-space: nowrap;
   width: 100%;
 }
+.np-date-trigger .control-label {
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+}
 .np-theme-personal .np-date-trigger {
   padding-left: 16px;
   padding-left: var(--size-16);
 }
+.np-theme-personal .np-date-trigger .control-label + span {
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+}
 .clear-btn {
   transition: color 0.15s ease-in-out;
   color: #c9cbce;

package/src/dateLookup/dateTrigger/DateTrigger.less

@@ -7,8 +7,16 @@
   white-space: nowrap;
   width: 100%;
 
+  .control-label {
+    font-weight: var(--font-weight-regular);
+  }
+
   .np-theme-personal & {
     padding-left: var(--size-16);
+
+    .control-label + span {
+      font-weight: var(--font-weight-regular);
+    }
   }
 }
 

package/src/dateLookup/dateTrigger/DateTrigger.spec.js

@@ -119,5 +119,5 @@ describe('DateTrigger', () => {
   const button = () => component.find('.np-date-trigger');
   const clearButton = () => component.find('.clear-btn');
   const chevron = () => component.find(Chevron);
-  const label = () => component.find('.np-date-trigger-label');
+  const label = () => component.find('.control-label');
 });

package/src/dateLookup/dateTrigger/DateTrigger.tsx

@@ -2,13 +2,12 @@ import { formatDate } from '@transferwise/formatting';
 import { useIntl } from 'react-intl';
 
 import Chevron from '../../chevron';
-import { Size, Position, SizeSmall, SizeMedium, SizeLarge, Typography } from '../../common';
+import { Size, Position, SizeSmall, SizeMedium, SizeLarge } from '../../common';
 import { CloseButton } from '../../common/closeButton/CloseButton';
 
 import messages from './DateTrigger.messages';
 import { useContext } from 'react';
 import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';
-import Body from '../../body';
 
 interface DateTriggerProps {
   selectedDate: Date | null;
@@ -46,19 +45,15 @@ const DateTrigger: React.FC<DateTriggerProps> = ({
         type="button"
         onClick={onClick}
       >
-        {label && (
-          <Body as="span" className="np-date-trigger-label m-r-1">
-            {label}
-          </Body>
-        )}
+        {label && <span className="control-label small m-r-1">{label}</span>}
         {selectedDate ? (
-          <Body as="span" type={Typography.BODY_LARGE}>
+          <span className="font-weight-normal">
             {formatDate(selectedDate, locale, {
               day: 'numeric',
               month: monthFormat,
               year: 'numeric',
             })}
-          </Body>
+          </span>
         ) : (
           <span
             className="form-control-placeholder visible-xs-inline visible-sm-inline

package/src/field/Field.spec.tsx

@@ -14,7 +14,7 @@ describe('Field', () => {
       </Field>,
     );
 
-    expect(screen.getByLabelText(/Phone number/)).toBeInTheDocument();
+    expect(screen.getByLabelText('Phone number')).toBeInTheDocument();
     expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-describedby');
   });
 
@@ -25,7 +25,7 @@ describe('Field', () => {
       </Field>,
     );
 
-    const textbox = screen.getByText('This is help text');
+    const textbox = screen.getByRole('textbox', { description: 'This is help text' });
     expect(textbox).toBeInTheDocument();
     expect(textbox).not.toBeInvalid();
   });
@@ -50,7 +50,7 @@ describe('Field', () => {
     );
 
     expect(screen.getByRole('textbox', { description: 'This is error text' })).toBeInTheDocument();
-    expect(screen.getByText('This is help text')).toBeInTheDocument();
+    expect(screen.queryByText('This is help text')).not.toBeInTheDocument();
   });
 
   it('avoids triggering button within label inadvertently', async () => {

package/src/field/Field.story.tsx

@@ -1,15 +1,8 @@
-/* eslint-disable jsx-a11y/label-has-associated-control */
 import { useState } from 'react';
 
 import { Input } from '../inputs/Input';
 import { Field } from './Field';
 import { Sentiment } from '../common';
-import DateInput from '../dateInput';
-import { fn } from '@storybook/test';
-import { lorem10, lorem100, lorem40 } from '../test-utils';
-import { TextArea } from '../inputs/TextArea';
-import { SearchInput } from '../inputs/SearchInput';
-import Info from '../info';
 
 export default {
   component: Field,
@@ -20,51 +13,9 @@ export default {
 export const Basic = () => {
   const [value, setValue] = useState<string | undefined>('This is some text');
   return (
-    <div className="row">
-      <div className="col-md-8 col-md-offset-2">
-        <Field label="Phone number" required>
-          <Input value={value} onChange={({ target }) => setValue(target.value)} />
-        </Field>
-        <Field label="Phone number">
-          <Input value={value} onChange={({ target }) => setValue(target.value)} />
-        </Field>
-        <Field label="Phone number" description="Please provide you primary phone number">
-          <Input value={value} onChange={({ target }) => setValue(target.value)} />
-        </Field>
-
-        <Field label="Date Of Birth">
-          <DateInput onChange={fn} />
-        </Field>
-
-        <Field label="Date Of Birth" description={lorem10}>
-          <DateInput onChange={fn} />
-        </Field>
-
-        <Field label="Search business">
-          <SearchInput />
-        </Field>
-
-        <Field label="Date Of Birth">
-          <TextArea />
-        </Field>
-
-        <Field label="Date Of Birth" message={lorem10} sentiment="negative">
-          <TextArea />
-        </Field>
-
-        <Field
-          label={
-            <>
-              Date Of Birth <Info content={lorem40} />
-            </>
-          }
-          message={lorem10}
-          sentiment="negative"
-        >
-          <TextArea />
-        </Field>
-      </div>
-    </div>
+    <Field label="Phone number">
+      <Input value={value} onChange={({ target }) => setValue(target.value)} />
+    </Field>
   );
 };
 
@@ -81,35 +32,6 @@ export const WithStatusMessages = () => {
       <Field label="Phone number" sentiment={Sentiment.NEGATIVE} message="This is a required field">
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
-
-      {/* instance with deprecated `hint` prop */}
-      <Field
-        label="Phone number"
-        hint="This is a helpful message"
-        sentiment={Sentiment.NEGATIVE}
-        message="Validation error, please take a look"
-      >
-        <Input value={value} onChange={({ target }) => setValue(target.value)} />
-      </Field>
-      {/* instance with deprecated `error` & `hint` props */}
-      <Field
-        label="Phone number"
-        hint="This is a helpful message"
-        error="Validation error, please take a look"
-      >
-        <Input value={value} onChange={({ target }) => setValue(target.value)} />
-      </Field>
-
-      <Field
-        label="Phone number"
-        description="This is a helpful message"
-        sentiment={Sentiment.NEGATIVE}
-        message="Validation error, please take a look"
-      >
-        <Input value={value} onChange={({ target }) => setValue(target.value)} />
-      </Field>
-
-      {/* instance of info via `message` property, this is rare case (e.g MoneyInput) */}
       <Field label="Phone number" message="This is a helpful message">
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>

package/src/field/Field.tests.story.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+
+import { Input } from '../inputs/Input';
+import { Field } from './Field';
+import { Sentiment } from '../common';
+
+export default {
+  component: Field,
+  title: 'Field/Tests',
+};
+
+export const WithHelpAndErrorOnBlur = () => {
+  const [value, setValue] = useState('This is some text');
+  const [error, setError] = useState<string | undefined>(undefined);
+  return (
+    <Field
+      label="Phone number"
+      sentiment={error ? Sentiment.NEGATIVE : Sentiment.NEUTRAL}
+      message={error || 'Please include country code'}
+    >
+      <Input
+        value={value}
+        onChange={({ target }) => {
+          setValue(target.value);
+          setError(undefined);
+        }}
+        onBlur={() => {
+          setError('Something went wrong');
+        }}
+      />
+    </Field>
+  );
+};

package/src/field/Field.tsx

@@ -9,18 +9,16 @@ import {
   InputIdContextProvider,
   InputInvalidProvider,
 } from '../inputs/contexts';
-import { Label } from '../label';
+import { Label } from '../label/Label';
 
 export type FieldProps = {
   /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */
   id?: string | null;
   /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */
   label?: React.ReactNode;
-  required?: boolean;
-  /** @deprecated use `description` prop instead */
+  /** @deprecated use `message` and `type={Sentiment.NEUTRAL}` prop instead */
   hint?: React.ReactNode;
   message?: React.ReactNode;
-  description?: React.ReactNode;
   /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */
   error?: React.ReactNode;
   sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;
@@ -31,17 +29,14 @@ export type FieldProps = {
 export const Field = ({
   id,
   label,
-  required = false,
   message: propMessage,
-  hint,
-  description = hint,
   sentiment: propType = Sentiment.NEUTRAL,
   className,
   children,
   ...props
 }: FieldProps) => {
   const sentiment = props.error ? Sentiment.NEGATIVE : propType;
-  const message = propMessage || props.error;
+  const message = props.error || props.hint || propMessage;
   const hasError = sentiment === Sentiment.NEGATIVE;
 
   const labelId = useId();
@@ -70,8 +65,7 @@ export const Field = ({
             >
               {label != null ? (
                 <Label id={labelId} htmlFor={inputId}>
-                  {required ? label : <Label.Optional>{label}</Label.Optional>}
-                  {description && <Label.Description>{description}</Label.Description>}
+                  {label}
                   {children}
                 </Label>
               ) : (

package/src/i18n/en.json

@@ -18,7 +18,6 @@
   "neptune.DateLookup.year": "year",
   "neptune.FlowNavigation.back": "back to previous step",
   "neptune.Info.ariaLabel": "More information",
-  "neptune.Label.optional": "(Optional)",
   "neptune.Link.opensInNewTab": "(opens in new tab)",
   "neptune.MoneyInput.Select.placeholder": "Select an option...",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
@@ -56,6 +55,5 @@
   "neptune.UploadItem.uploaded": "Uploaded",
   "neptune.UploadItem.uploadedFile": "Uploaded file",
   "neptune.UploadItem.uploading": "Uploading...",
-  "neptune.UploadItem.uploadingFailed": "Uploading failed",
-  "neptune.aria.Label.optional": "This field is optional"
+  "neptune.UploadItem.uploadingFailed": "Uploading failed"
 }

package/src/index.ts

@@ -44,7 +44,7 @@ export type {
 } from './inputs/SelectInput';
 export type { TextAreaProps } from './inputs/TextArea';
 export type { InstructionsListProps } from './instructionsList';
-export type { LabelProps, LabelOptionalProps, LabelDescriptionProps } from './label/Label';
+export type { LabelProps } from './label/Label';
 export type { LoaderProps } from './loader';
 export type { MarkdownProps } from './markdown';
 export type { ModalProps } from './modal';

package/src/inlineAlert/InlineAlert.story.tsx

@@ -5,8 +5,6 @@ import { Sentiment } from '../common';
 import { Input } from '../inputs/Input';
 
 import InlineAlert, { InlineAlertProps } from './InlineAlert';
-import { Label } from '../label';
-import { lorem40 } from '../test-utils';
 
 export default {
   component: InlineAlert,
@@ -68,26 +66,41 @@ export const Basic = () => {
         this manually.
       </p>
       <div className={`form-group ${typeClass}`}>
-        <Label htmlFor="id0">Toggleable</Label>
+        <label className="control-label" htmlFor="id0">
+          Toggleable
+        </label>
         <Input id="id0" value="Neptune is cool" />
         <InlineAlert type={type}>{message}</InlineAlert>
       </div>
       <div className="form-group has-error">
-        <Label htmlFor="id1">Negative</Label>
+        <label className="control-label" htmlFor="id1">
+          Negative
+        </label>
         <Input id="id1" value="Neptune is cool" />
         <InlineAlert type="negative">{message}</InlineAlert>
       </div>
       <div className="form-group has-success">
-        <Label htmlFor="id2">Positive</Label>
+        <label className="control-label" htmlFor="id2">
+          Positive
+        </label>
         <Input id="id2" value="Neptune is cool" />
-        <InlineAlert type="positive">{lorem40}</InlineAlert>
+        <InlineAlert type="positive">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        </InlineAlert>
       </div>
       <div className="form-group has-neutral">
-        <Label htmlFor="id3">Neutral</Label>
+        <label className="control-label" htmlFor="id3">
+          Neutral
+        </label>
         <Input id="id3" value="Neptune is cool" />
+        <InlineAlert type="neutral">{message}</InlineAlert>
       </div>
       <div className="form-group">
-        <label htmlFor="id4">No has-* class</label>
+        <label className="control-label" htmlFor="id4">
+          No has-* class
+        </label>
         <Input id="id4" value="Neptune is cool" />
         <InlineAlert type="negative">{message}</InlineAlert>
       </div>

package/src/inputs/InputGroup.spec.tsx

@@ -26,6 +26,6 @@ describe('InputGroup', () => {
         </InputGroup>
       </Field>,
     );
-    expect(screen.getByLabelText(/Search…/)).toHaveRole('textbox');
+    expect(screen.getByLabelText('Search…')).toHaveRole('textbox');
   });
 });

package/src/inputs/SearchInput.spec.tsx

@@ -11,6 +11,6 @@ describe('SearchInput', () => {
         <SearchInput />
       </Field>,
     );
-    expect(screen.getByLabelText(/Search…/)).toHaveRole('searchbox');
+    expect(screen.getByLabelText('Search…')).toHaveRole('searchbox');
   });
 });

package/src/inputs/SelectInput.css

@@ -206,6 +206,10 @@
     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);
@@ -224,6 +228,12 @@
   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-separator-item {
   margin: 8px;
   margin: var(--size-8);

package/src/inputs/SelectInput.less

@@ -60,6 +60,11 @@
     }
   }
 
+  &--virtualized {
+    /* The wrapping element shrinks this as needed */
+    height: 100vh;
+  }
+
   &--has-group {
     scroll-padding-top: var(--size-32);
   }
@@ -71,6 +76,13 @@
 
   .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-separator-item {

package/src/inputs/SelectInput.spec.tsx

@@ -214,6 +214,6 @@ describe('SelectInput', () => {
         <SelectInput items={[{ type: 'option', value: 'USD' }]} value="USD" />
       </Field>,
     );
-    expect(screen.getByLabelText(/Currency/)).toHaveAttribute('aria-haspopup');
+    expect(screen.getByLabelText('Currency')).toHaveAttribute('aria-haspopup');
   });
 });

package/src/inputs/SelectInput.story.tsx

@@ -322,6 +322,26 @@ export const Advanced: Story<Month> = {
   },
 };
 
+export const ManyItems: Story<string, true> = {
+  args: {
+    multiple: true,
+    items: Array.from({ length: 1000 }, (_, index) => ({
+      type: 'option',
+      value: String(index + 1),
+    })),
+    renderValue: (value, withinTrigger) =>
+      withinTrigger ? (
+        value
+      ) : (
+        <SelectInputOptionContent
+          title={value}
+          description={Number(value) % 10 === 0 ? 'Divisible by 10' : undefined}
+        />
+      ),
+    filterable: true,
+  },
+};
+
 export const WithinDrawer: Story<Currency> = {
   args: CurrenciesArgs,
   decorators: [