@transferwise/components 0.0.0-experimental-333df2c → 0.0.0-experimental-e4e09f5

package/src/inputs/SelectInput.tsx

@@ -6,7 +6,6 @@ import {
   createContext,
   forwardRef,
   useContext,
-  useDeferredValue,
   useEffect,
   useId,
   useMemo,
@@ -14,7 +13,6 @@ 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';
@@ -31,8 +29,6 @@ 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();
 }
@@ -44,7 +40,7 @@ function inferSearchableStrings(value: unknown) {
 
   if (typeof value === 'object' && value != null) {
     return Object.values(value)
-      .filter((innerValue) => typeof innerValue === 'string')
+      .filter((innerValue): innerValue is string => typeof innerValue === 'string')
       .map((innerValue) => searchableString(innerValue));
   }
 
@@ -93,11 +89,6 @@ 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>[] {
@@ -121,23 +112,20 @@ function dedupeSelectInputItems<T>(
   });
 }
 
-function selectInputOptionItemIncludesNeedle<T>(item: SelectInputOptionItem<T>, needle: string) {
+function filterSelectInputOptionItem<T>(item: SelectInputOptionItem<T>, needle: string) {
   return inferSearchableStrings(item.filterMatchers ?? item.value).some((haystack) =>
     haystack.includes(needle),
   );
 }
 
-function filterSelectInputItems<T>(
-  items: readonly SelectInputItem<T>[],
-  predicate: (item: SelectInputOptionItem<T>) => boolean,
-) {
+function filterSelectInputItems<T>(items: readonly SelectInputItem<T>[], needle: string) {
   return items.filter((item) => {
     switch (item.type) {
       case 'option': {
-        return predicate(item);
+        return filterSelectInputOptionItem(item, needle);
       }
       case 'group': {
-        return item.options.some((option) => predicate(option));
+        return item.options.some((option) => filterSelectInputOptionItem(option, needle));
       }
       default:
     }
@@ -283,15 +271,12 @@ 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);
-    if (query !== filterQuery) {
-      onFilterChange({
-        query,
-        queryNormalized: query ? searchableString(query) : null,
-      });
-    }
+    onFilterChange({
+      query,
+      queryNormalized: query ? searchableString(query) : null,
+    });
   });
 
   const triggerRef = useRef<HTMLButtonElement | null>(null);
@@ -309,7 +294,9 @@ export function SelectInput<T = string, M extends boolean = false>({
       multiple={multiple}
       defaultValue={defaultValue}
       value={controlledValue}
-      by={compareValues}
+      // TODO: Remove assertion when upgrading TypeScript to v5
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      by={compareValues as any}
       disabled={disabled}
       onChange={
         ((value) => {
@@ -362,8 +349,8 @@ export function SelectInput<T = string, M extends boolean = false>({
                   content: !placeholderShown ? (
                     <SelectInputOptionContentWithinTriggerContext.Provider value>
                       {multiple && Array.isArray(value)
-                        ? (value as readonly NonNullable<T>[])
-                            .map((option) => renderValue(option, true))
+                        ? value
+                            .map((option: NonNullable<T>) => renderValue(option, true))
                             .filter((node) => node != null)
                             .join(', ')
                         : renderValue(value as NonNullable<T>, true)}
@@ -392,7 +379,9 @@ export function SelectInput<T = string, M extends boolean = false>({
               setOpen(false);
             }}
             onCloseEnd={() => {
-              setFilterQuery('');
+              if (filterQuery !== '') {
+                setFilterQuery('');
+              }
             }}
           >
             <SelectInputOptions
@@ -403,7 +392,7 @@ export function SelectInput<T = string, M extends boolean = false>({
               filterPlaceholder={filterPlaceholder}
               searchInputRef={searchInputRef}
               listboxRef={listboxRef}
-              filterQuery={deferredFilterQuery}
+              filterQuery={filterQuery}
               onFilterChange={setFilterQuery}
             />
           </OptionsOverlay>
@@ -517,48 +506,7 @@ function SelectInputOptions<T = string>({
     }
     return undefined;
   }, [filterQuery, filterable]);
-  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 resultsEmpty = needle != null && filterSelectInputItems(items, needle).length === 0;
 
   const listboxContainerRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -574,19 +522,6 @@ 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}
@@ -598,6 +533,12 @@ 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 }),
+              );
+            }
           }
         }
       }}
@@ -608,7 +549,7 @@ function SelectInputOptions<T = string>({
             ref={searchInputRef}
             shape="rectangle"
             placeholder={filterPlaceholder}
-            defaultValue={filterQuery}
+            value={filterQuery}
             aria-controls={listboxId}
             aria-describedby={showStatus ? statusId : undefined}
             onKeyDown={(event) => {
@@ -619,9 +560,6 @@ 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);
             }}
           />
@@ -633,9 +571,7 @@ function SelectInputOptions<T = string>({
         tabIndex={-1}
         className={clsx(
           'np-select-input-listbox-container',
-          virtualized && 'np-select-input-listbox-container--virtualized',
-          needle == null && // Groups aren't shown when filtering
-            items.some((item) => item.type === 'group') &&
+          items.some((item) => item.type === 'group') &&
             'np-select-input-listbox-container--has-group',
         )}
       >
@@ -654,27 +590,15 @@ function SelectInputOptions<T = string>({
           tabIndex={0}
           className="np-select-input-listbox"
         >
-          {!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>
-          )}
+          {(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}
+            />
+          ))}
         </div>
 
         {renderFooter != null ? (
@@ -715,10 +639,7 @@ function SelectInputItemView<T = string>({
 }: SelectInputItemViewProps<T>) {
   switch (item.type) {
     case 'option': {
-      if (
-        item.value != null &&
-        (needle == null || selectInputOptionItemIncludesNeedle(item, needle))
-      ) {
+      if (item.value != null && (needle == null || filterSelectInputOptionItem(item, needle))) {
         return (
           <SelectInputOption value={item.value} disabled={item.disabled}>
             {renderValue(item.value, false)}

package/src/label/Label.messages.tsx

@@ -0,0 +1,12 @@
+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/Label.story.tsx

@@ -1,37 +1,46 @@
 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>
-      Phone number
-      <Input value={value} id="input" onChange={({ target }) => setValue(target.value)} />
-    </Label>
-  );
-};
+    <>
+      <Label className="m-b-2">
+        Phone number
+        <Input value={value} id="input" onChange={({ target }) => setValue(target.value)} />
+      </Label>
 
-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>
+      <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)}
+      />
+    </>
   );
 };

package/src/label/Label.tsx

@@ -1,4 +1,9 @@
 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;
@@ -7,14 +12,50 @@ export type LabelProps = {
   children?: React.ReactNode;
 };
 
-export const Label = ({ id, htmlFor, className, children }: LabelProps) => {
+const Label = ({ id, htmlFor, className, children }: LabelProps) => {
   return (
     <label
       id={id}
       htmlFor={htmlFor}
-      className={clsx('control-label d-flex flex-column gap-y-1 m-b-0', className)}
+      className={clsx(
+        'd-flex',
+        'flex-column',
+        'gap-y-4',
+        'm-b-0',
+        'np-text-body-default-bold',
+        'text-primary',
+        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', className)}>{children}</Body> : null;
+
+Label.Optional = Optional;
+Label.Description = Description;
+
+export { Label };

package/src/label/index.ts

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

package/src/main.css

@@ -1719,18 +1719,10 @@ 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;
@@ -2655,10 +2647,6 @@ 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);
@@ -2677,12 +2665,6 @@ 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 '@testing-library/react';
+import { render, screen } from '../test-utils';
 
 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">
+      <Field label="Dark mode" required>
         <Switch checked onClick={props.onClick} />
       </Field>,
     );

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

@@ -1,33 +0,0 @@
-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>
-  );
-};