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

package/build/index.esm.js

@@ -16,6 +16,7 @@ import mergeRefs from 'react-merge-refs';
 import { isUndefined, isKey, isNumber, isEmpty, isNull, isArray } from '@transferwise/neptune-validation';
 import { usePopper } from 'react-popper';
 import { Transition, Listbox } from '@headlessui/react';
+import mergeProps from 'merge-props';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, FloatingFocusManager, offset, flip, shift, size, autoUpdate } from '@floating-ui/react';
 import { usePreventScroll } from '@react-aria/overlays';
@@ -3431,9 +3432,7 @@ const DateHeader = ({
       className: `tw-date-lookup-header-current ${buttonClasses}`,
       "aria-label": intl.formatMessage(messages$4.goTo20YearView),
       onClick: onLabelClick,
-      children: /*#__PURE__*/jsx("h4", {
-        children: label
-      })
+      children: label
     }), /*#__PURE__*/jsx("div", {
       className: "pull-right-single-direction",
       children: /*#__PURE__*/jsx("button", {
@@ -6331,6 +6330,20 @@ function useScreenSize(size) {
   return useMedia(`(min-width: ${size}px)`);
 }
 
+const PolymorphicWithOverrides = /*#__PURE__*/forwardRef(function PolymorphicWithOverrides({
+  __overrides: {
+    as: Element,
+    ...restOverrides
+  },
+  ...restProps
+}, ref) {
+  return /*#__PURE__*/jsx(Element, {
+    ref: ref,
+    ...restProps,
+    ...restOverrides
+  });
+});
+
 function wrapInFragment(value) {
   return /*#__PURE__*/jsx(Fragment, {
     children: value
@@ -6577,7 +6590,8 @@ function inferSearchableStrings(value) {
   return [];
 }
 const SelectInputHasValueContext = /*#__PURE__*/createContext(false);
-const SelectInputOptionContentCompactContext = /*#__PURE__*/createContext(false);
+const SelectInputTriggerButtonPropsContext = /*#__PURE__*/createContext({});
+const SelectInputOptionContentWithinTriggerContext = /*#__PURE__*/createContext(false);
 function dedupeSelectInputOptionItem(item, existingValues) {
   if (existingValues.has(item.value)) {
     return {
@@ -6607,14 +6621,68 @@ function dedupeSelectInputItems(items) {
     return item;
   });
 }
+const defaultRenderTrigger = ({
+  content,
+  placeholderShown,
+  clear,
+  disabled,
+  className
+}) => /*#__PURE__*/jsx(InputGroup, {
+  addonEnd: {
+    content: /*#__PURE__*/jsxs("span", {
+      className: classNames('np-select-input-addon-container', disabled && 'disabled'),
+      children: [clear != null && !placeholderShown ? /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(SelectInputClearButton, {
+          onClick: event => {
+            event.preventDefault();
+            clear();
+          }
+        }), /*#__PURE__*/jsx("span", {
+          className: "np-select-input-addon-separator"
+        })]
+      }) : null, /*#__PURE__*/jsx("span", {
+        className: "np-select-input-addon",
+        children: /*#__PURE__*/jsx(ChevronDown, {
+          size: 16
+        })
+      })]
+    }),
+    padding: 'sm'
+  },
+  disabled: disabled,
+  className: className,
+  children: /*#__PURE__*/jsx(SelectInputTriggerButton, {
+    as: ButtonInput,
+    children: placeholderShown ? /*#__PURE__*/jsxs("span", {
+      className: "np-select-input-placeholder",
+      children: [" ", content]
+    }) : content
+  })
+});
+function SelectInputClearButton({
+  className,
+  onClick
+}) {
+  const intl = useIntl();
+  return /*#__PURE__*/jsx("button", {
+    type: "button",
+    "aria-label": intl.formatMessage(messages$5.ariaLabel),
+    className: classNames(className, 'np-select-input-addon np-select-input-addon--interactive'),
+    onClick: onClick,
+    children: /*#__PURE__*/jsx(Cross, {
+      size: 16
+    })
+  });
+}
 function SelectInput({
   name,
   placeholder,
   items,
   defaultValue,
   value: controlledValue,
-  renderValue = wrapInFragment,
   compareValues,
+  renderValue = wrapInFragment,
+  renderTrigger = defaultRenderTrigger,
   filterable,
   filterPlaceholder,
   disabled,
@@ -6622,7 +6690,6 @@ function SelectInput({
   onChange,
   onClear
 }) {
-  const intl = useIntl();
   const [open, setOpen] = useState(false);
   const triggerRef = useRef(null);
   const screenSm = useScreenSize(Breakpoint.SMALL);
@@ -6648,87 +6715,75 @@ function SelectInput({
       value
     }) => /*#__PURE__*/jsx(SelectInputHasValueContext.Provider, {
       value: value != null,
-      children: /*#__PURE__*/jsx(InputGroup, {
-        addonEnd: {
-          content: /*#__PURE__*/jsxs("span", {
-            className: classNames('np-select-input-addon-container', uiDisabled && 'disabled'),
-            children: [onClear != null && value != null ? /*#__PURE__*/jsxs(Fragment, {
-              children: [/*#__PURE__*/jsx("button", {
-                type: "button",
-                "aria-label": intl.formatMessage(messages$5.ariaLabel),
-                disabled: uiDisabled,
-                className: "np-select-input-addon np-select-input-addon--interactive",
-                onClick: event => {
-                  event.preventDefault();
-                  onClear();
-                  triggerRef.current?.focus({
-                    preventScroll: true
-                  });
-                },
-                children: /*#__PURE__*/jsx(Cross, {
-                  size: 16
-                })
-              }), /*#__PURE__*/jsx("span", {
-                className: "np-select-input-addon-separator"
-              })]
-            }) : null, /*#__PURE__*/jsx("span", {
-              className: "np-select-input-addon",
-              children: /*#__PURE__*/jsx(ChevronDown, {
-                size: 16
-              })
-            })]
-          }),
-          padding: 'sm'
-        },
-        className: className,
-        children: /*#__PURE__*/jsx(OptionsOverlay, {
-          open: open,
-          renderTrigger: ({
-            ref,
-            getInteractionProps
-          }) => /*#__PURE__*/jsx(Listbox.Button, {
+      children: /*#__PURE__*/jsx(OptionsOverlay, {
+        open: open,
+        renderTrigger: ({
+          ref,
+          getInteractionProps
+        }) => /*#__PURE__*/jsx(SelectInputTriggerButtonPropsContext.Provider, {
+          // eslint-disable-next-line react/jsx-no-constructed-context-values
+          value: {
             ref: mergeRefs([ref, triggerRef]),
-            as: SelectInputButton,
-            overrides: getInteractionProps(),
-            onClick: () => {
-              setOpen(prev => !prev);
-            },
-            children: value != null ? /*#__PURE__*/jsx(SelectInputOptionContentCompactContext.Provider, {
+            ...mergeProps({
+              onClick: () => {
+                setOpen(prev => !prev);
+              }
+            }, getInteractionProps())
+          },
+          children: renderTrigger({
+            content: value != null ? /*#__PURE__*/jsx(SelectInputOptionContentWithinTriggerContext.Provider, {
               value: true,
               children: renderValue(value, true)
-            }) : /*#__PURE__*/jsx("span", {
-              className: "np-select-input-placeholder",
-              children: placeholder
-            })
-          }),
-          initialFocusRef: controllerRef,
-          padding: "none",
-          onClose: () => {
-            setOpen(false);
-          },
-          children: /*#__PURE__*/jsx(SelectInputOptions, {
-            items: items,
-            renderValue: renderValue,
-            filterable: filterable,
-            filterPlaceholder: filterPlaceholder,
-            searchInputRef: searchInputRef,
-            listboxRef: listboxRef
+            }) : placeholder,
+            placeholderShown: value == null,
+            clear: onClear != null ? () => {
+              onClear();
+              triggerRef.current?.focus({
+                preventScroll: true
+              });
+            } : undefined,
+            disabled: uiDisabled,
+            className: classNames(className, 'np-text-body-large')
           })
+        }),
+        initialFocusRef: controllerRef,
+        padding: "none",
+        onClose: () => {
+          setOpen(false);
+        },
+        children: /*#__PURE__*/jsx(SelectInputOptions, {
+          items: items,
+          renderValue: renderValue,
+          filterable: filterable,
+          filterPlaceholder: filterPlaceholder,
+          searchInputRef: searchInputRef,
+          listboxRef: listboxRef
         })
       })
     })
   });
 }
-const SelectInputButton = /*#__PURE__*/forwardRef(function SelectInputButton({
-  overrides,
+function SelectInputTriggerButton({
+  as = 'button',
   ...restProps
-}, ref) {
-  return /*#__PURE__*/jsx(ButtonInput, {
+}) {
+  const {
+    ref,
+    onClick,
+    ...interactionProps
+  } = useContext(SelectInputTriggerButtonPropsContext);
+  return /*#__PURE__*/jsx(Listbox.Button, {
     ref: ref,
-    ...restProps,
-    ...overrides
+    as: PolymorphicWithOverrides,
+    __overrides: {
+      as,
+      ...interactionProps
+    },
+    ...mergeProps({
+      onClick
+    }, restProps)
   });
-});
+}
 const SelectInputOptionsContainer = /*#__PURE__*/forwardRef(function SelectInputOptionsContainer({
   'aria-orientation': ariaOrientation,
   'aria-activedescendant': ariaActiveDescendant,
@@ -6857,8 +6912,7 @@ function SelectInputItemView({
       {
         if (needle == null) {
           return /*#__PURE__*/jsx("hr", {
-            className: "np-select-input-separator-item",
-            "aria-hidden": true
+            className: "np-select-input-separator-item"
           });
         }
         break;
@@ -6933,16 +6987,16 @@ function SelectInputOptionContent({
   description,
   icon
 }) {
-  const compact = useContext(SelectInputOptionContentCompactContext);
+  const withinTrigger = useContext(SelectInputOptionContentWithinTriggerContext);
   return /*#__PURE__*/jsxs("div", {
     className: "np-select-input-option-content-container np-text-body-large",
     children: [icon ? /*#__PURE__*/jsx("div", {
-      className: classNames('np-select-input-option-content-icon', !compact && 'np-select-input-option-content-icon--not-compact'),
+      className: classNames('np-select-input-option-content-icon', !withinTrigger && 'np-select-input-option-content-icon--not-within-trigger'),
       children: icon
     }) : null, /*#__PURE__*/jsxs("div", {
       className: "np-select-input-option-content-text",
       children: [/*#__PURE__*/jsxs("div", {
-        className: classNames('np-select-input-option-content-text-line-1', compact && 'np-select-input-option-content-text-compact'),
+        className: classNames('np-select-input-option-content-text-line-1', withinTrigger && 'np-select-input-option-content-text-within-trigger'),
         children: [/*#__PURE__*/jsx("h4", {
           className: "d-inline np-text-body-large",
           children: title
@@ -6951,7 +7005,7 @@ function SelectInputOptionContent({
           children: note
         }) : null]
       }), description ? /*#__PURE__*/jsx("div", {
-        className: classNames('np-select-input-option-content-text-secondary np-text-body-default', compact && 'np-select-input-option-content-text-compact'),
+        className: classNames('np-select-input-option-content-text-secondary np-text-body-default', withinTrigger && 'np-select-input-option-content-text-within-trigger'),
         children: description
       }) : null]
     })]