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

package/src/inputs/SelectInput.tsx

@@ -6,6 +6,7 @@ import {
   createContext,
   forwardRef,
   useContext,
+  useDeferredValue,
   useEffect,
   useId,
   useMemo,
@@ -13,6 +14,7 @@ import {
   useState,
 } from 'react';
 import { useIntl } from 'react-intl';
+import { Virtualizer } from 'virtua';
 
 import { useEffectEvent } from '../common/hooks/useEffectEvent';
 import { useScreenSize } from '../common/hooks/useScreenSize';
@@ -29,6 +31,8 @@ import { InputGroup } from './InputGroup';
 import { SearchInput } from './SearchInput';
 import messages from './SelectInput.messages';
 
+const MAX_ITEMS_WITHOUT_VIRTUALIZATION = 50;
+
 function searchableString(value: string) {
   return value.trim().replace(/\s+/gu, ' ').normalize('NFKC').toLowerCase();
 }
@@ -40,7 +44,7 @@ function inferSearchableStrings(value: unknown) {
 
   if (typeof value === 'object' && value != null) {
     return Object.values(value)
-      .filter((innerValue): innerValue is string => typeof innerValue === 'string')
+      .filter((innerValue) => typeof innerValue === 'string')
       .map((innerValue) => searchableString(innerValue));
   }
 
@@ -89,6 +93,11 @@ function dedupeSelectInputOptionItem<T>(
   return { ...item, value: undefined };
 }
 
+/**
+ * Sets the `value` of duplicate option items to `undefined`, hiding them when
+ * rendered. Indexes are kept intact within groups to preserve the active item
+ * between filter changes when possible.
+ */
 function dedupeSelectInputItems<T>(
   items: readonly SelectInputItem<T>[],
 ): SelectInputItem<T | undefined>[] {
@@ -112,20 +121,23 @@ function dedupeSelectInputItems<T>(
   });
 }
 
-function filterSelectInputOptionItem<T>(item: SelectInputOptionItem<T>, needle: string) {
+function selectInputOptionItemIncludesNeedle<T>(item: SelectInputOptionItem<T>, needle: string) {
   return inferSearchableStrings(item.filterMatchers ?? item.value).some((haystack) =>
     haystack.includes(needle),
   );
 }
 
-function filterSelectInputItems<T>(items: readonly SelectInputItem<T>[], needle: string) {
+function filterSelectInputItems<T>(
+  items: readonly SelectInputItem<T>[],
+  predicate: (item: SelectInputOptionItem<T>) => boolean,
+) {
   return items.filter((item) => {
     switch (item.type) {
       case 'option': {
-        return filterSelectInputOptionItem(item, needle);
+        return predicate(item);
       }
       case 'group': {
-        return item.options.some((option) => filterSelectInputOptionItem(option, needle));
+        return item.options.some((option) => predicate(option));
       }
       default:
     }
@@ -271,12 +283,15 @@ export function SelectInput<T = string, M extends boolean = false>({
   }, [handleClose, open]);
 
   const [filterQuery, _setFilterQuery] = useState('');
+  const deferredFilterQuery = useDeferredValue(filterQuery);
   const setFilterQuery = useEffectEvent((query: string) => {
     _setFilterQuery(query);
-    onFilterChange({
-      query,
-      queryNormalized: query ? searchableString(query) : null,
-    });
+    if (query !== filterQuery) {
+      onFilterChange({
+        query,
+        queryNormalized: query ? searchableString(query) : null,
+      });
+    }
   });
 
   const triggerRef = useRef<HTMLButtonElement | null>(null);
@@ -294,9 +309,7 @@ export function SelectInput<T = string, M extends boolean = false>({
       multiple={multiple}
       defaultValue={defaultValue}
       value={controlledValue}
-      // TODO: Remove assertion when upgrading TypeScript to v5
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      by={compareValues as any}
+      by={compareValues}
       disabled={disabled}
       onChange={
         ((value) => {
@@ -349,8 +362,8 @@ export function SelectInput<T = string, M extends boolean = false>({
                   content: !placeholderShown ? (
                     <SelectInputOptionContentWithinTriggerContext.Provider value>
                       {multiple && Array.isArray(value)
-                        ? value
-                            .map((option: NonNullable<T>) => renderValue(option, true))
+                        ? (value as readonly NonNullable<T>[])
+                            .map((option) => renderValue(option, true))
                             .filter((node) => node != null)
                             .join(', ')
                         : renderValue(value as NonNullable<T>, true)}
@@ -379,9 +392,7 @@ export function SelectInput<T = string, M extends boolean = false>({
               setOpen(false);
             }}
             onCloseEnd={() => {
-              if (filterQuery !== '') {
-                setFilterQuery('');
-              }
+              setFilterQuery('');
             }}
           >
             <SelectInputOptions
@@ -392,7 +403,7 @@ export function SelectInput<T = string, M extends boolean = false>({
               filterPlaceholder={filterPlaceholder}
               searchInputRef={searchInputRef}
               listboxRef={listboxRef}
-              filterQuery={filterQuery}
+              filterQuery={deferredFilterQuery}
               onFilterChange={setFilterQuery}
             />
           </OptionsOverlay>
@@ -506,7 +517,48 @@ function SelectInputOptions<T = string>({
     }
     return undefined;
   }, [filterQuery, filterable]);
-  const resultsEmpty = needle != null && filterSelectInputItems(items, needle).length === 0;
+  useEffect(() => {
+    if (needle) {
+      // Ensure having an active option while filtering
+      requestAnimationFrame(() => {
+        if (
+          controllerRef.current != null &&
+          !controllerRef.current.hasAttribute('aria-activedescendant')
+        ) {
+          // Activate first option via synthetic key press
+          controllerRef.current.dispatchEvent(
+            new KeyboardEvent('keydown', { key: 'Home', bubbles: true }),
+          );
+        }
+      });
+    }
+  }, [controllerRef, needle]);
+
+  const filteredItems: readonly SelectInputItem<NonNullable<T> | undefined>[] =
+    needle != null
+      ? filterSelectInputItems(dedupeSelectInputItems(items), (item) =>
+          selectInputOptionItemIncludesNeedle(item, needle),
+        )
+      : items;
+  const resultsEmpty = needle != null && filteredItems.length === 0;
+
+  const virtualized = filteredItems.length > MAX_ITEMS_WITHOUT_VIRTUALIZATION;
+
+  // Items shown once shall be kept mounted until the needle changes, otherwise
+  // the scroll position may jump around inadvertently. Pattern adopted from:
+  // https://inokawa.github.io/virtua/?path=/story/advanced-keep-offscreen-items--append-only
+  const [mountedIndexes, setMountedIndexes] = useState<number[]>([]);
+  useEffect(() => {
+    // Ensure the 'End' key works as intended by keeping the last item mounted
+    setMountedIndexes((prevMountedIndexes) => {
+      const indexes = new Set(prevMountedIndexes);
+      indexes.add(filteredItems.length - 1);
+      return [...indexes]; // Sorting is redundant by nature here
+    });
+  }, [
+    needle, // Needed as `filteredItems.length` may be equal between two updates
+    filteredItems.length,
+  ]);
 
   const listboxContainerRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -522,6 +574,19 @@ function SelectInputOptions<T = string>({
   const statusId = useId();
   const listboxId = useId();
 
+  const getItemNode = (index: number) => {
+    const item = filteredItems[index];
+    return (
+      <SelectInputItemView
+        // eslint-disable-next-line react/no-array-index-key
+        key={index}
+        item={item}
+        renderValue={renderValue}
+        needle={needle}
+      />
+    );
+  };
+
   return (
     <ListboxBase.Options
       as={SelectInputOptionsContainer}
@@ -533,12 +598,6 @@ function SelectInputOptions<T = string>({
             controllerRef.current.setAttribute('aria-activedescendant', value);
           } else {
             controllerRef.current.removeAttribute('aria-activedescendant');
-            if (filterQuery) {
-              // Ensure having an active option while filtering
-              controllerRef.current.dispatchEvent(
-                new KeyboardEvent('keydown', { key: 'Home', bubbles: true }),
-              );
-            }
           }
         }
       }}
@@ -549,7 +608,7 @@ function SelectInputOptions<T = string>({
             ref={searchInputRef}
             shape="rectangle"
             placeholder={filterPlaceholder}
-            value={filterQuery}
+            defaultValue={filterQuery}
             aria-controls={listboxId}
             aria-describedby={showStatus ? statusId : undefined}
             onKeyDown={(event) => {
@@ -560,6 +619,9 @@ function SelectInputOptions<T = string>({
               }
             }}
             onChange={(event) => {
+              // Free up resources and ensure not to go out of bounds when the
+              // resulting item count is less than before
+              setMountedIndexes([]);
               onFilterChange(event.currentTarget.value);
             }}
           />
@@ -571,7 +633,9 @@ function SelectInputOptions<T = string>({
         tabIndex={-1}
         className={clsx(
           'np-select-input-listbox-container',
-          items.some((item) => item.type === 'group') &&
+          virtualized && 'np-select-input-listbox-container--virtualized',
+          needle == null && // Groups aren't shown when filtering
+            items.some((item) => item.type === 'group') &&
             'np-select-input-listbox-container--has-group',
         )}
       >
@@ -590,15 +654,27 @@ function SelectInputOptions<T = string>({
           tabIndex={0}
           className="np-select-input-listbox"
         >
-          {(needle != null ? dedupeSelectInputItems(items) : items).map((item, index) => (
-            <SelectInputItemView
-              // eslint-disable-next-line react/no-array-index-key
-              key={index}
-              item={item}
-              renderValue={renderValue}
-              needle={needle}
-            />
-          ))}
+          {!virtualized ? (
+            filteredItems.map((_, index) => getItemNode(index))
+          ) : (
+            <Virtualizer
+              key={needle}
+              count={filteredItems.length}
+              keepMounted={mountedIndexes}
+              scrollRef={listboxRef} // `VList` doesn't expose this
+              onRangeChange={(startIndex, endIndex) => {
+                setMountedIndexes((prevMountedIndexes) => {
+                  const indexes = new Set(prevMountedIndexes);
+                  for (let index = startIndex; index <= endIndex; index += 1) {
+                    indexes.add(index);
+                  }
+                  return [...indexes].sort((a, b) => a - b);
+                });
+              }}
+            >
+              {(index) => getItemNode(index)}
+            </Virtualizer>
+          )}
         </div>
 
         {renderFooter != null ? (
@@ -639,7 +715,10 @@ function SelectInputItemView<T = string>({
 }: SelectInputItemViewProps<T>) {
   switch (item.type) {
     case 'option': {
-      if (item.value != null && (needle == null || filterSelectInputOptionItem(item, needle))) {
+      if (
+        item.value != null &&
+        (needle == null || selectInputOptionItemIncludesNeedle(item, needle))
+      ) {
         return (
           <SelectInputOption value={item.value} disabled={item.disabled}>
             {renderValue(item.value, false)}

package/src/label/Label.story.tsx

@@ -1,53 +1,37 @@
 import { useState } from 'react';
 
+import Info from '../info/Info';
 import { Input } from '../inputs/Input';
 import { Label } from './Label';
-import InlineAlert from '../inlineAlert/InlineAlert';
-import { lorem10 } from '../test-utils';
 
 export default {
   component: Label,
   title: 'Label',
-  tags: ['autodocs'],
 };
 
 export const Basic = () => {
   const [value, setValue] = useState<string | undefined>('This is some text');
   return (
-    <>
-      <Label className="m-b-2">
-        Phone number
-        <Input value={value} id="input" onChange={({ target }) => setValue(target.value)} />
-      </Label>
-
-      <Label className="m-b-2">
-        <Label.Optional>Phone number</Label.Optional>
-        <Input value={value} id="input" onChange={({ target }) => setValue(target.value)} />
-      </Label>
-
-      <Label className="m-b-2">
-        <Label.Optional>Phone number</Label.Optional>
-        <Label.Description>This an field Description</Label.Description>
-        <Input value={value} id="input" onChange={({ target }) => setValue(target.value)} />
-      </Label>
-
-      <Label htmlFor="phone-number-1">
-        <Label.Optional>Phone number</Label.Optional>
-        <Label.Description>This an field Description</Label.Description>
-      </Label>
-      <Input
-        id="phone-number-1"
-        className="m-b-2"
-        value={value}
-        onChange={({ target }) => setValue(target.value)}
-      />
+    <Label>
+      Phone number
+      <Input value={value} id="input" onChange={({ target }) => setValue(target.value)} />
+    </Label>
+  );
+};
 
-      {/* Instance of legacy and deprecated way of doing labels for visual testing */}
-      <label className="control-label" htmlFor="phone-number-1">
-        Phone number
-      </label>
-      <Input id="phone-number-1" value={value} onChange={({ target }) => setValue(target.value)} />
-      <InlineAlert>{lorem10}</InlineAlert>
-    </>
+export const WithInfo = () => {
+  const [value, setValue] = useState<string | undefined>('This is some text');
+  return (
+    <Label>
+      <span className="d-flex">
+        Phone number{' '}
+        <Info
+          content="This is some help in popover"
+          aria-label="The aria label"
+          className="m-l-1"
+        />
+      </span>
+      <Input value={value} id="input" onChange={({ target }) => setValue(target.value)} />
+    </Label>
   );
 };

package/src/label/Label.tsx

@@ -1,9 +1,4 @@
 import { clsx } from 'clsx';
-import messages from './Label.messages';
-import { useIntl } from 'react-intl';
-import Body from '../body';
-import { CommonProps } from '../common';
-import { PropsWithChildren } from 'react';
 
 export type LabelProps = {
   id?: string;
@@ -12,49 +7,14 @@ export type LabelProps = {
   children?: React.ReactNode;
 };
 
-const Label = ({ id, htmlFor, className, children }: LabelProps) => {
+export const Label = ({ id, htmlFor, className, children }: LabelProps) => {
   return (
     <label
       id={id}
       htmlFor={htmlFor}
-      className={clsx(
-        'd-flex',
-        'flex-column',
-        'm-b-0',
-        'np-text-body-default-bold',
-        'text-primary',
-        className,
-      )}
+      className={clsx('control-label d-flex flex-column gap-y-1 m-b-0', className)}
     >
       {children}
     </label>
   );
 };
-
-export type LabelOptionalProps = PropsWithChildren<CommonProps>;
-
-const Optional = ({ children, className }: LabelOptionalProps) => {
-  const { formatMessage } = useIntl();
-  return (
-    <div>
-      {children}
-      <Body
-        as="span"
-        aria-label={formatMessage(messages.optionalAriaLabel)}
-        className={clsx('text-secondary', 'm-l-1', className)}
-      >
-        {formatMessage(messages.optionalLabel)}
-      </Body>
-    </div>
-  );
-};
-
-export type LabelDescriptionProps = PropsWithChildren<CommonProps>;
-
-const Description = ({ children, className }: LabelDescriptionProps) =>
-  children ? <Body className={clsx('text-secondary', 'm-b-1', className)}>{children}</Body> : null;
-
-Label.Optional = Optional;
-Label.Description = Description;
-
-export { Label };

package/src/main.css

@@ -1719,10 +1719,18 @@ button.np-option {
   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;
@@ -2647,6 +2655,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     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);
@@ -2665,6 +2677,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   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/radioGroup/RadioGroup.rtl.spec.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '../test-utils';
+import { render, screen } from '@testing-library/react';
 
 import RadioGroup from '.';
 import { Field } from '../field/Field';

package/src/select/Select.rtl.spec.tsx

@@ -12,6 +12,6 @@ describe('Select', () => {
         <Select options={options} selected={options[0]} onChange={() => {}} />
       </Field>,
     );
-    expect(screen.getByLabelText(/Currency/)).toHaveTextContent('USD');
+    expect(screen.getByLabelText('Currency')).toHaveTextContent('USD');
   });
 });

package/src/switch/Switch.spec.tsx

@@ -85,7 +85,7 @@ describe('Switch', () => {
 
   it('supports `Field` for labeling', () => {
     render(
-      <Field label="Dark mode" required>
+      <Field label="Dark mode">
         <Switch checked onClick={props.onClick} />
       </Field>,
     );

package/build/label/Label.messages.js

@@ -1,15 +0,0 @@
-'use strict';
-
-var reactIntl = require('react-intl');
-
-var messages = reactIntl.defineMessages({
-  optionalLabel: {
-    id: "neptune.Label.optional"
-  },
-  optionalAriaLabel: {
-    id: "neptune.aria.Label.optional"
-  }
-});
-
-module.exports = messages;
-//# sourceMappingURL=Label.messages.js.map

package/build/label/Label.messages.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Label.messages.js","sources":["../../src/label/Label.messages.tsx"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  optionalLabel: {\n    id: 'neptune.Label.optional',\n    defaultMessage: '(Optional)',\n  },\n  optionalAriaLabel: {\n    id: 'neptune.aria.Label.optional',\n    defaultMessage: 'This field is optional',\n  },\n});\n"],"names":["defineMessages","optionalLabel","id","optionalAriaLabel"],"mappings":";;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,aAAa,EAAE;IACbC,EAAE,EAAA,wBAAA;GAEH;AACDC,EAAAA,iBAAiB,EAAE;IACjBD,EAAE,EAAA,6BAAA;AAEH,GAAA;AACF,CAAA,CAAC;;;;"}

package/build/label/Label.messages.mjs

@@ -1,13 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-var messages = defineMessages({
-  optionalLabel: {
-    id: "neptune.Label.optional"
-  },
-  optionalAriaLabel: {
-    id: "neptune.aria.Label.optional"
-  }
-});
-
-export { messages as default };
-//# sourceMappingURL=Label.messages.mjs.map

package/build/label/Label.messages.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Label.messages.mjs","sources":["../../src/label/Label.messages.tsx"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  optionalLabel: {\n    id: 'neptune.Label.optional',\n    defaultMessage: '(Optional)',\n  },\n  optionalAriaLabel: {\n    id: 'neptune.aria.Label.optional',\n    defaultMessage: 'This field is optional',\n  },\n});\n"],"names":["defineMessages","optionalLabel","id","optionalAriaLabel"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,aAAa,EAAE;IACbC,EAAE,EAAA,wBAAA;GAEH;AACDC,EAAAA,iBAAiB,EAAE;IACjBD,EAAE,EAAA,6BAAA;AAEH,GAAA;AACF,CAAA,CAAC;;;;"}

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

@@ -1,12 +0,0 @@
-declare const _default: {
-    optionalLabel: {
-        id: string;
-        defaultMessage: string;
-    };
-    optionalAriaLabel: {
-        id: string;
-        defaultMessage: string;
-    };
-};
-export default _default;
-//# sourceMappingURL=Label.messages.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Label.messages.d.ts","sourceRoot":"","sources":["../../../src/label/Label.messages.tsx"],"names":[],"mappings":";;;;;;;;;;AAEA,wBASG"}

package/build/types/label/index.d.ts

@@ -1,3 +0,0 @@
-export { Label } from './Label';
-export type { LabelProps, LabelOptionalProps, LabelDescriptionProps } from './Label';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/label/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC"}

package/src/label/Label.messages.tsx

@@ -1,12 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-  optionalLabel: {
-    id: 'neptune.Label.optional',
-    defaultMessage: '(Optional)',
-  },
-  optionalAriaLabel: {
-    id: 'neptune.aria.Label.optional',
-    defaultMessage: 'This field is optional',
-  },
-});

package/src/label/index.ts

@@ -1,2 +0,0 @@
-export { Label } from './Label';
-export type { LabelProps, LabelOptionalProps, LabelDescriptionProps } from './Label';