@transferwise/components 0.0.0-experimental-02eda23 → 0.0.0-experimental-32cf8db

package/src/inputs/SelectInput.tsx

@@ -2,12 +2,14 @@ import { Listbox as ListboxBase } from '@headlessui/react';
 import { useId } from '@radix-ui/react-id';
 import { Check, ChevronDown, Cross } from '@transferwise/icons';
 import classNames from 'classnames';
-import { createContext, useState, useRef, forwardRef, useEffect, useMemo, useContext } from 'react';
+import mergeProps from 'merge-props';
+import { createContext, forwardRef, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import mergeRefs from 'react-merge-refs';
 
 import { useEffectEvent } from '../common/hooks/useEffectEvent';
 import { useScreenSize } from '../common/hooks/useScreenSize';
+import { PolymorphicWithOverrides } from '../common/polymorphicWithOverrides/PolymorphicWithOverrides';
 import { Breakpoint } from '../common/propsValues/breakpoint';
 import messages from '../dateLookup/dateTrigger/DateTrigger.messages';
 import { wrapInFragment } from '../utilities/wrapInFragment';
@@ -15,7 +17,7 @@ import { wrapInFragment } from '../utilities/wrapInFragment';
 import { InputGroup } from './InputGroup';
 import { SearchInput } from './SearchInput';
 import { BottomSheet } from './_BottomSheet';
-import { ButtonInput, type ButtonInputProps } from './_ButtonInput';
+import { ButtonInput } from './_ButtonInput';
 import { Popover } from './_Popover';
 
 function searchableString(value: string) {
@@ -37,8 +39,12 @@ function inferSearchableStrings(value: unknown) {
 }
 
 const SelectInputHasValueContext = createContext(false);
-
-const SelectInputOptionContentCompactContext = createContext(false);
+const SelectInputTriggerButtonPropsContext = createContext<{
+  ref?: React.ForwardedRef<HTMLButtonElement>;
+  onClick?: () => void;
+  [key: string]: unknown;
+}>({});
+const SelectInputOptionContentWithinTriggerContext = createContext(false);
 
 interface SelectInputOptionItem<T = string> {
   type: 'option';
@@ -106,10 +112,17 @@ export interface SelectInputProps<T = string> {
   items: readonly SelectInputItem<NonNullable<T>>[];
   defaultValue?: T;
   value?: T;
-  renderValue?: (value: NonNullable<T>, compact: boolean) => React.ReactNode;
   compareValues?:
     | (keyof NonNullable<T> & string)
     | ((a: T | undefined, b: T | undefined) => boolean);
+  renderValue?: (value: NonNullable<T>, withinTrigger: boolean) => React.ReactNode;
+  renderTrigger?: (args: {
+    content: React.ReactNode;
+    placeholderShown: boolean;
+    clear: (() => void) | undefined;
+    disabled: boolean;
+    className: string | undefined;
+  }) => React.ReactNode;
   filterable?: boolean;
   filterPlaceholder?: string;
   disabled?: boolean;
@@ -118,14 +131,66 @@ export interface SelectInputProps<T = string> {
   onClear?: () => void;
 }
 
-export function SelectInput<T>({
+const defaultRenderTrigger = (({ content, placeholderShown, clear, disabled, className }) => (
+  <InputGroup
+    addonEnd={{
+      content: (
+        <span className={classNames('np-select-input-addon-container', disabled && 'disabled')}>
+          {clear != null && !placeholderShown ? (
+            <>
+              <SelectInputClearButton
+                onClick={(event) => {
+                  event.preventDefault();
+                  clear();
+                }}
+              />
+              <span className="np-select-input-addon-separator" />
+            </>
+          ) : null}
+
+          <span className="np-select-input-addon">
+            <ChevronDown size={16} />
+          </span>
+        </span>
+      ),
+      padding: 'sm',
+    }}
+    disabled={disabled}
+    className={className}
+  >
+    <SelectInputTriggerButton as={ButtonInput}>
+      {placeholderShown ? <span className="np-select-input-placeholder"> {content}</span> : content}
+    </SelectInputTriggerButton>
+  </InputGroup>
+)) satisfies SelectInputProps['renderTrigger'];
+
+interface SelectInputClearButtonProps
+  extends Pick<React.ComponentPropsWithoutRef<'button'>, 'className' | 'onClick'> {}
+
+function SelectInputClearButton({ className, onClick }: SelectInputClearButtonProps) {
+  const intl = useIntl();
+
+  return (
+    <button
+      type="button"
+      aria-label={intl.formatMessage(messages.ariaLabel)}
+      className={classNames(className, 'np-select-input-addon np-select-input-addon--interactive')}
+      onClick={onClick}
+    >
+      <Cross size={16} />
+    </button>
+  );
+}
+
+export function SelectInput<T = string>({
   name,
   placeholder,
   items,
   defaultValue,
   value: controlledValue,
-  renderValue = wrapInFragment,
   compareValues,
+  renderValue = wrapInFragment,
+  renderTrigger = defaultRenderTrigger,
   filterable,
   filterPlaceholder,
   disabled,
@@ -133,8 +198,6 @@ export function SelectInput<T>({
   onChange,
   onClear,
 }: SelectInputProps<T>) {
-  const intl = useIntl();
-
   const [open, setOpen] = useState(false);
 
   const triggerRef = useRef<HTMLButtonElement>(null);
@@ -162,95 +225,85 @@ export function SelectInput<T>({
     >
       {({ disabled: uiDisabled, value }) => (
         <SelectInputHasValueContext.Provider value={value != null}>
-          <InputGroup
-            addonEnd={{
-              content: (
-                <span
-                  className={classNames(
-                    'np-select-input-addon-container',
-                    uiDisabled && 'disabled',
-                  )}
-                >
-                  {onClear != null && value != null ? (
-                    <>
-                      <button
-                        type="button"
-                        aria-label={intl.formatMessage(messages.ariaLabel)}
-                        disabled={uiDisabled}
-                        className="np-select-input-addon np-select-input-addon--interactive"
-                        onClick={(event) => {
-                          event.preventDefault();
+          <OptionsOverlay
+            open={open}
+            renderTrigger={({ ref, getInteractionProps }) => (
+              <SelectInputTriggerButtonPropsContext.Provider
+                // eslint-disable-next-line react/jsx-no-constructed-context-values
+                value={{
+                  ref: mergeRefs([ref, triggerRef]),
+                  ...mergeProps(
+                    {
+                      onClick: () => {
+                        setOpen((prev) => !prev);
+                      },
+                    },
+                    getInteractionProps(),
+                  ),
+                }}
+              >
+                {renderTrigger({
+                  content:
+                    value != null ? (
+                      <SelectInputOptionContentWithinTriggerContext.Provider value>
+                        {renderValue(value, true)}
+                      </SelectInputOptionContentWithinTriggerContext.Provider>
+                    ) : (
+                      placeholder
+                    ),
+                  placeholderShown: value == null,
+                  clear:
+                    onClear != null
+                      ? () => {
                           onClear();
                           triggerRef.current?.focus({ preventScroll: true });
-                        }}
-                      >
-                        <Cross size={16} />
-                      </button>
-                      <span className="np-select-input-addon-separator" />
-                    </>
-                  ) : null}
-
-                  <span className="np-select-input-addon">
-                    <ChevronDown size={16} />
-                  </span>
-                </span>
-              ),
-              padding: 'sm',
+                        }
+                      : undefined,
+                  disabled: uiDisabled,
+                  className: classNames(className, 'np-text-body-large'),
+                })}
+              </SelectInputTriggerButtonPropsContext.Provider>
+            )}
+            initialFocusRef={controllerRef}
+            padding="none"
+            onClose={() => {
+              setOpen(false);
             }}
-            className={className}
           >
-            <OptionsOverlay
-              open={open}
-              renderTrigger={({ ref, getInteractionProps }) => (
-                <ListboxBase.Button
-                  ref={mergeRefs([ref, triggerRef])}
-                  as={SelectInputButton}
-                  overrides={getInteractionProps()}
-                  onClick={() => {
-                    setOpen((prev) => !prev);
-                  }}
-                >
-                  {value != null ? (
-                    <SelectInputOptionContentCompactContext.Provider value>
-                      {renderValue(value, true)}
-                    </SelectInputOptionContentCompactContext.Provider>
-                  ) : (
-                    <span className="np-select-input-placeholder">{placeholder}</span>
-                  )}
-                </ListboxBase.Button>
-              )}
-              initialFocusRef={controllerRef}
-              padding="none"
-              onClose={() => {
-                setOpen(false);
-              }}
-            >
-              <SelectInputOptions
-                items={items}
-                renderValue={renderValue}
-                filterable={filterable}
-                filterPlaceholder={filterPlaceholder}
-                searchInputRef={searchInputRef}
-                listboxRef={listboxRef}
-              />
-            </OptionsOverlay>
-          </InputGroup>
+            <SelectInputOptions
+              items={items}
+              renderValue={renderValue}
+              filterable={filterable}
+              filterPlaceholder={filterPlaceholder}
+              searchInputRef={searchInputRef}
+              listboxRef={listboxRef}
+            />
+          </OptionsOverlay>
         </SelectInputHasValueContext.Provider>
       )}
     </ListboxBase>
   );
 }
 
-interface SelectInputButtonProps extends ButtonInputProps {
-  overrides?: { [key: string]: unknown };
-}
+export type SelectInputTriggerButtonProps<T extends React.ComponentType | 'button' = 'button'> = {
+  as?: T;
+} & React.ComponentPropsWithoutRef<T>;
 
-const SelectInputButton = forwardRef(function SelectInputButton(
-  { overrides, ...restProps }: SelectInputButtonProps,
-  ref: React.ForwardedRef<HTMLButtonElement>,
-) {
-  return <ButtonInput ref={ref} {...restProps} {...overrides} />;
-});
+export function SelectInputTriggerButton<T extends React.ComponentType | 'button' = 'button'>({
+  as = 'button' as T,
+  ...restProps
+}: SelectInputTriggerButtonProps<T>) {
+  const { ref, onClick, ...interactionProps } = useContext(SelectInputTriggerButtonPropsContext);
+
+  return (
+    <ListboxBase.Button
+      ref={ref}
+      as={PolymorphicWithOverrides}
+      __overrides={{ as, ...interactionProps }}
+      {...mergeProps({ onClick }, restProps)}
+    />
+  );
+}
 
 interface SelectInputOptionsContainerProps extends React.ComponentPropsWithRef<'div'> {
   onAriaActiveDescendantChange: (value: React.AriaAttributes['aria-activedescendant']) => void;
@@ -294,7 +347,7 @@ interface SelectInputOptionsProps<T = string>
   listboxRef: React.RefObject<HTMLDivElement>;
 }
 
-function SelectInputOptions<T>({
+function SelectInputOptions<T = string>({
   items,
   renderValue = wrapInFragment,
   filterable,
@@ -395,7 +448,11 @@ interface SelectInputItemViewProps<
   needle: string | null;
 }
 
-function SelectInputItemView<T>({ item, renderValue, needle }: SelectInputItemViewProps<T>) {
+function SelectInputItemView<T = string>({
+  item,
+  renderValue,
+  needle,
+}: SelectInputItemViewProps<T>) {
   switch (item.type) {
     case 'option': {
       if (
@@ -418,7 +475,7 @@ function SelectInputItemView<T>({ item, renderValue, needle }: SelectInputItemVi
     }
     case 'separator': {
       if (needle == null) {
-        return <hr className="np-select-input-separator-item" aria-hidden />;
+        return <hr className="np-select-input-separator-item" />;
       }
       break;
     }
@@ -429,7 +486,7 @@ function SelectInputItemView<T>({ item, renderValue, needle }: SelectInputItemVi
 interface SelectInputGroupItemViewProps<T = string>
   extends SelectInputItemViewProps<T, SelectInputGroupItem<T | undefined>> {}
 
-function SelectInputGroupItemView<T>({
+function SelectInputGroupItemView<T = string>({
   item,
   renderValue,
   needle,
@@ -472,7 +529,7 @@ interface SelectInputOptionProps<T = string> {
   children?: React.ReactNode;
 }
 
-function SelectInputOption<T>({ value, disabled, children }: SelectInputOptionProps<T>) {
+function SelectInputOption<T = string>({ value, disabled, children }: SelectInputOptionProps<T>) {
   const parentHasValue = useContext(SelectInputHasValueContext);
 
   // Avoid flash during exit transition
@@ -523,7 +580,7 @@ export function SelectInputOptionContent({
   description,
   icon,
 }: SelectInputOptionContentProps) {
-  const compact = useContext(SelectInputOptionContentCompactContext);
+  const withinTrigger = useContext(SelectInputOptionContentWithinTriggerContext);
 
   return (
     <div className="np-select-input-option-content-container np-text-body-large">
@@ -531,7 +588,7 @@ export function SelectInputOptionContent({
         <div
           className={classNames(
             'np-select-input-option-content-icon',
-            !compact && 'np-select-input-option-content-icon--not-compact',
+            !withinTrigger && 'np-select-input-option-content-icon--not-within-trigger',
           )}
         >
           {icon}
@@ -542,7 +599,7 @@ export function SelectInputOptionContent({
         <div
           className={classNames(
             'np-select-input-option-content-text-line-1',
-            compact && 'np-select-input-option-content-text-compact',
+            withinTrigger && 'np-select-input-option-content-text-within-trigger',
           )}
         >
           <h4 className="d-inline np-text-body-large">{title}</h4>
@@ -557,7 +614,7 @@ export function SelectInputOptionContent({
           <div
             className={classNames(
               'np-select-input-option-content-text-secondary np-text-body-default',
-              compact && 'np-select-input-option-content-text-compact',
+              withinTrigger && 'np-select-input-option-content-text-within-trigger',
             )}
           >
             {description}

package/src/inputs/_Popover.less

@@ -3,7 +3,7 @@
   display: flex;
   max-height: var(--max-height);
   width: var(--width);
-  min-width: min-content;
+  min-width: 20rem;
   flex-direction: column;
   border-radius: var(--radius-small);
   background-color: var(--color-background-elevated);