@transferwise/components 0.0.0-experimental-8d46704 → 0.0.0-experimental-1067f73

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 { VList } 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));
   }
 
@@ -116,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:
     }
@@ -278,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);
@@ -304,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) => {
@@ -357,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)}
@@ -387,7 +379,9 @@ export function SelectInput<T = string, M extends boolean = false>({
               setOpen(false);
             }}
             onCloseEnd={() => {
-              setFilterQuery('');
+              if (filterQuery !== '') {
+                setFilterQuery('');
+              }
             }}
           >
             <SelectInputOptions
@@ -398,8 +392,7 @@ export function SelectInput<T = string, M extends boolean = false>({
               filterPlaceholder={filterPlaceholder}
               searchInputRef={searchInputRef}
               listboxRef={listboxRef}
-              value={value}
-              filterQuery={deferredFilterQuery}
+              filterQuery={filterQuery}
               onFilterChange={setFilterQuery}
             />
           </OptionsOverlay>
@@ -488,7 +481,6 @@ interface SelectInputOptionsProps<T = string>
   > {
   searchInputRef: React.MutableRefObject<HTMLInputElement | null>;
   listboxRef: React.MutableRefObject<HTMLDivElement | null>;
-  value: readonly T[] | T;
   filterQuery: string;
   onFilterChange: (query: string) => void;
 }
@@ -501,7 +493,6 @@ function SelectInputOptions<T = string>({
   filterPlaceholder,
   searchInputRef,
   listboxRef,
-  value,
   filterQuery,
   onFilterChange,
 }: SelectInputOptionsProps<T>) {
@@ -515,12 +506,7 @@ function SelectInputOptions<T = string>({
     }
     return undefined;
   }, [filterQuery, filterable]);
-
-  const filteredItems =
-    needle != null
-      ? filterSelectInputItems(items, (item) => selectInputOptionItemIncludesNeedle(item, needle))
-      : items;
-  const resultsEmpty = needle != null && filteredItems.length === 0;
+  const resultsEmpty = needle != null && filterSelectInputItems(items, needle).length === 0;
 
   const listboxContainerRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -536,30 +522,6 @@ function SelectInputOptions<T = string>({
   const statusId = useId();
   const listboxId = useId();
 
-  const virtualized = filteredItems.length > MAX_ITEMS_WITHOUT_VIRTUALIZATION;
-
-  const values = useMemo(
-    () => new Set(Array.isArray(value) ? (value as readonly T[]) : [value as T]),
-    [value],
-  );
-
-  const listboxProps = {
-    id: listboxId,
-    role: 'listbox',
-    'aria-orientation': 'vertical',
-    tabIndex: 0,
-    className: 'np-select-input-listbox',
-    children: (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}
-      />
-    )),
-  } as const;
-
   return (
     <ListboxBase.Options
       as={SelectInputOptionsContainer}
@@ -587,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) => {
@@ -609,9 +571,7 @@ function SelectInputOptions<T = string>({
         tabIndex={-1}
         className={classNames(
           'np-select-input-listbox-container',
-          virtualized && 'np-select-input-listbox-container--virtualized',
-          needle == null &&
-            items.some((item) => item.type === 'group') &&
+          items.some((item) => item.type === 'group') &&
             'np-select-input-listbox-container--has-group',
         )}
       >
@@ -622,23 +582,24 @@ function SelectInputOptions<T = string>({
           </div>
         ) : null}
 
-        {!virtualized ? (
-          <div ref={listboxRef} {...listboxProps} />
-        ) : (
-          <VList
-            {...listboxProps}
-            key={needle}
-            keepMounted={(() => {
-              let index = 0;
-              return filterSelectInputItems(filteredItems, (item) => values.has(item.value)).map(
-                (item) => {
-                  index = filteredItems.indexOf(item, index + 1);
-                  return index;
-                },
-              );
-            })()}
-          />
-        )}
+        <div
+          ref={listboxRef}
+          id={listboxId}
+          role="listbox"
+          aria-orientation="vertical"
+          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}
+            />
+          ))}
+        </div>
 
         {renderFooter != null ? (
           <footer className="np-select-input-footer">
@@ -678,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/main.css

@@ -2655,9 +2655,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     height: auto;
   }
 }
-.np-select-input-listbox-container--virtualized {
-  height: 100vh;
-}
 .np-select-input-listbox-container--has-group {
   scroll-padding-top: 32px;
   scroll-padding-top: var(--size-32);

package/src/stepper/Stepper.less

@@ -79,7 +79,7 @@
 
 .progress-bar {
   .float(left);
-  
+
   -webkit-backface-visibility: hidden;
   height: 100%;
   background-color: var(--color-interactive-primary);
@@ -87,7 +87,7 @@
   border-bottom-left-radius: 1px;
   transition: width 0.6s ease-in-out;
   will-change: width;
-  
+
   &::after {
     .float(right);
 

package/src/stepper/Stepper.story.tsx

@@ -0,0 +1,49 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import Stepper from './Stepper';
+
+const STEPS = [
+  {
+    label: 'One',
+    onClick: fn(),
+  },
+  {
+    label: 'Two',
+    hoverLabel: (
+      <>
+        <div>
+          <strong>Diana Jaramillo</strong>
+        </div>
+        dianajarm123@gmail.com
+      </>
+    ),
+    onClick: fn(),
+  },
+  { label: 'Recipient', onClick: fn() },
+  { label: 'Smellification', onClick: fn() },
+  { label: 'Battle', onClick: fn() },
+];
+
+export default {
+  component: Stepper,
+  title: 'Navigation/Stepper',
+  argTypes: {
+    activeStep: {
+      control: 'radio',
+      options: [...Array(STEPS.length).keys()],
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Stepper>;
+
+type Story = StoryObj<typeof Stepper>;
+
+export const Basic: Story = {
+  render: ({ activeStep, steps }) => {
+    return <Stepper activeStep={activeStep} steps={steps} />;
+  },
+  args: {
+    activeStep: 2,
+    steps: STEPS,
+  },
+};

package/src/stepper/Stepper.tsx

@@ -23,7 +23,10 @@ export interface StepperProps {
   className?: string;
 }
 
-/* eslint-disable react/no-array-index-key */
+/**
+ * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.
+ * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants
+ */
 const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
   const { isRTL } = useDirection();
 
@@ -50,6 +53,7 @@ const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
     ) : (
       <span className="tw-stepper__step-label">{step.label}</span>
     );
+
     return (
       <li
         key={index}
@@ -83,10 +87,10 @@ const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
       <div className="progress">
         <div className="progress-bar" style={{ width: `${percentageCompleted * 100}%` }} />
       </div>
-      <ul className="tw-stepper-steps p-t-1 m-b-0">{steps.map(renderStep)}</ul>
+
+      <ol className="tw-stepper-steps p-t-1 m-b-0">{steps.map(renderStep)}</ol>
     </div>
   );
 };
-/* eslint-enable react/no-array-index-key */
 
 export default Stepper;

package/src/stepper/Stepper.story.js

@@ -1,40 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { select } from '@storybook/addon-knobs';
-
-import Stepper from './Stepper';
-
-export default {
-  component: Stepper,
-  title: 'Navigation/Stepper',
-};
-
-export const Basic = () => {
-  const activeStep = select('activeStep', [0, 1, 2, 3, 4], 0);
-  return (
-    <Stepper
-      activeStep={activeStep}
-      steps={[
-        {
-          label: 'One',
-          onClick() {
-            action('You clicked on step 1, which triggered this function, which alerted you.');
-          },
-        },
-        {
-          label: 'Two',
-          hoverLabel: (
-            <>
-              <div>
-                <strong>Diana Jaramillo</strong>
-              </div>
-              dianajarm123@gmail.com
-            </>
-          ),
-        },
-        { label: 'Recipient' },
-        { label: 'Smellification' },
-        { label: 'Battle' },
-      ]}
-    />
-  );
-};