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

package/build/index.js

@@ -17,6 +17,7 @@ var mergeRefs = require('react-merge-refs');
 var neptuneValidation = require('@transferwise/neptune-validation');
 var reactPopper = require('react-popper');
 var react$1 = require('@headlessui/react');
+var mergeProps = require('merge-props');
 var shim = require('use-sync-external-store/shim');
 var react = require('@floating-ui/react');
 var overlays = require('@react-aria/overlays');
@@ -54,6 +55,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var throttle__default = /*#__PURE__*/_interopDefault(throttle);
 var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
+var mergeProps__default = /*#__PURE__*/_interopDefault(mergeProps);
 var clamp__default = /*#__PURE__*/_interopDefault(clamp$2);
 var debounce__default = /*#__PURE__*/_interopDefault(debounce);
 var requiredIf__default = /*#__PURE__*/_interopDefault(requiredIf);
@@ -3464,9 +3466,7 @@ const DateHeader = ({
       className: `tw-date-lookup-header-current ${buttonClasses}`,
       "aria-label": intl.formatMessage(messages$4.goTo20YearView),
       onClick: onLabelClick,
-      children: /*#__PURE__*/jsxRuntime.jsx("h4", {
-        children: label
-      })
+      children: label
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "pull-right-single-direction",
       children: /*#__PURE__*/jsxRuntime.jsx("button", {
@@ -6364,6 +6364,20 @@ function useScreenSize(size) {
   return useMedia(`(min-width: ${size}px)`);
 }
 
+const PolymorphicWithOverrides = /*#__PURE__*/React.forwardRef(function PolymorphicWithOverrides({
+  __overrides: {
+    as: Element,
+    ...restOverrides
+  },
+  ...restProps
+}, ref) {
+  return /*#__PURE__*/jsxRuntime.jsx(Element, {
+    ref: ref,
+    ...restProps,
+    ...restOverrides
+  });
+});
+
 function wrapInFragment(value) {
   return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: value
@@ -6610,7 +6624,8 @@ function inferSearchableStrings(value) {
   return [];
 }
 const SelectInputHasValueContext = /*#__PURE__*/React.createContext(false);
-const SelectInputOptionContentCompactContext = /*#__PURE__*/React.createContext(false);
+const SelectInputTriggerButtonPropsContext = /*#__PURE__*/React.createContext({});
+const SelectInputOptionContentWithinTriggerContext = /*#__PURE__*/React.createContext(false);
 function dedupeSelectInputOptionItem(item, existingValues) {
   if (existingValues.has(item.value)) {
     return {
@@ -6640,14 +6655,68 @@ function dedupeSelectInputItems(items) {
     return item;
   });
 }
+const defaultRenderTrigger = ({
+  content,
+  placeholderShown,
+  clear,
+  disabled,
+  className
+}) => /*#__PURE__*/jsxRuntime.jsx(InputGroup, {
+  addonEnd: {
+    content: /*#__PURE__*/jsxRuntime.jsxs("span", {
+      className: classNames__default.default('np-select-input-addon-container', disabled && 'disabled'),
+      children: [clear != null && !placeholderShown ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(SelectInputClearButton, {
+          onClick: event => {
+            event.preventDefault();
+            clear();
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "np-select-input-addon-separator"
+        })]
+      }) : null, /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "np-select-input-addon",
+        children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronDown, {
+          size: 16
+        })
+      })]
+    }),
+    padding: 'sm'
+  },
+  disabled: disabled,
+  className: className,
+  children: /*#__PURE__*/jsxRuntime.jsx(SelectInputTriggerButton, {
+    as: ButtonInput,
+    children: placeholderShown ? /*#__PURE__*/jsxRuntime.jsxs("span", {
+      className: "np-select-input-placeholder",
+      children: [" ", content]
+    }) : content
+  })
+});
+function SelectInputClearButton({
+  className,
+  onClick
+}) {
+  const intl = reactIntl.useIntl();
+  return /*#__PURE__*/jsxRuntime.jsx("button", {
+    type: "button",
+    "aria-label": intl.formatMessage(messages$5.ariaLabel),
+    className: classNames__default.default(className, 'np-select-input-addon np-select-input-addon--interactive'),
+    onClick: onClick,
+    children: /*#__PURE__*/jsxRuntime.jsx(icons.Cross, {
+      size: 16
+    })
+  });
+}
 function SelectInput({
   name,
   placeholder,
   items,
   defaultValue,
   value: controlledValue,
-  renderValue = wrapInFragment,
   compareValues,
+  renderValue = wrapInFragment,
+  renderTrigger = defaultRenderTrigger,
   filterable,
   filterPlaceholder,
   disabled,
@@ -6655,7 +6724,6 @@ function SelectInput({
   onChange,
   onClear
 }) {
-  const intl = reactIntl.useIntl();
   const [open, setOpen] = React.useState(false);
   const triggerRef = React.useRef(null);
   const screenSm = useScreenSize(exports.Breakpoint.SMALL);
@@ -6681,87 +6749,75 @@ function SelectInput({
       value
     }) => /*#__PURE__*/jsxRuntime.jsx(SelectInputHasValueContext.Provider, {
       value: value != null,
-      children: /*#__PURE__*/jsxRuntime.jsx(InputGroup, {
-        addonEnd: {
-          content: /*#__PURE__*/jsxRuntime.jsxs("span", {
-            className: classNames__default.default('np-select-input-addon-container', uiDisabled && 'disabled'),
-            children: [onClear != null && value != null ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-              children: [/*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(icons.Cross, {
-                  size: 16
-                })
-              }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                className: "np-select-input-addon-separator"
-              })]
-            }) : null, /*#__PURE__*/jsxRuntime.jsx("span", {
-              className: "np-select-input-addon",
-              children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronDown, {
-                size: 16
-              })
-            })]
-          }),
-          padding: 'sm'
-        },
-        className: className,
-        children: /*#__PURE__*/jsxRuntime.jsx(OptionsOverlay, {
-          open: open,
-          renderTrigger: ({
-            ref,
-            getInteractionProps
-          }) => /*#__PURE__*/jsxRuntime.jsx(react$1.Listbox.Button, {
+      children: /*#__PURE__*/jsxRuntime.jsx(OptionsOverlay, {
+        open: open,
+        renderTrigger: ({
+          ref,
+          getInteractionProps
+        }) => /*#__PURE__*/jsxRuntime.jsx(SelectInputTriggerButtonPropsContext.Provider, {
+          // eslint-disable-next-line react/jsx-no-constructed-context-values
+          value: {
             ref: mergeRefs__default.default([ref, triggerRef]),
-            as: SelectInputButton,
-            overrides: getInteractionProps(),
-            onClick: () => {
-              setOpen(prev => !prev);
-            },
-            children: value != null ? /*#__PURE__*/jsxRuntime.jsx(SelectInputOptionContentCompactContext.Provider, {
+            ...mergeProps__default.default({
+              onClick: () => {
+                setOpen(prev => !prev);
+              }
+            }, getInteractionProps())
+          },
+          children: renderTrigger({
+            content: value != null ? /*#__PURE__*/jsxRuntime.jsx(SelectInputOptionContentWithinTriggerContext.Provider, {
               value: true,
               children: renderValue(value, true)
-            }) : /*#__PURE__*/jsxRuntime.jsx("span", {
-              className: "np-select-input-placeholder",
-              children: placeholder
-            })
-          }),
-          initialFocusRef: controllerRef,
-          padding: "none",
-          onClose: () => {
-            setOpen(false);
-          },
-          children: /*#__PURE__*/jsxRuntime.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__default.default(className, 'np-text-body-large')
           })
+        }),
+        initialFocusRef: controllerRef,
+        padding: "none",
+        onClose: () => {
+          setOpen(false);
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(SelectInputOptions, {
+          items: items,
+          renderValue: renderValue,
+          filterable: filterable,
+          filterPlaceholder: filterPlaceholder,
+          searchInputRef: searchInputRef,
+          listboxRef: listboxRef
         })
       })
     })
   });
 }
-const SelectInputButton = /*#__PURE__*/React.forwardRef(function SelectInputButton({
-  overrides,
+function SelectInputTriggerButton({
+  as = 'button',
   ...restProps
-}, ref) {
-  return /*#__PURE__*/jsxRuntime.jsx(ButtonInput, {
+}) {
+  const {
+    ref,
+    onClick,
+    ...interactionProps
+  } = React.useContext(SelectInputTriggerButtonPropsContext);
+  return /*#__PURE__*/jsxRuntime.jsx(react$1.Listbox.Button, {
     ref: ref,
-    ...restProps,
-    ...overrides
+    as: PolymorphicWithOverrides,
+    __overrides: {
+      as,
+      ...interactionProps
+    },
+    ...mergeProps__default.default({
+      onClick
+    }, restProps)
   });
-});
+}
 const SelectInputOptionsContainer = /*#__PURE__*/React.forwardRef(function SelectInputOptionsContainer({
   'aria-orientation': ariaOrientation,
   'aria-activedescendant': ariaActiveDescendant,
@@ -6890,8 +6946,7 @@ function SelectInputItemView({
       {
         if (needle == null) {
           return /*#__PURE__*/jsxRuntime.jsx("hr", {
-            className: "np-select-input-separator-item",
-            "aria-hidden": true
+            className: "np-select-input-separator-item"
           });
         }
         break;
@@ -6966,16 +7021,16 @@ function SelectInputOptionContent({
   description,
   icon
 }) {
-  const compact = React.useContext(SelectInputOptionContentCompactContext);
+  const withinTrigger = React.useContext(SelectInputOptionContentWithinTriggerContext);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "np-select-input-option-content-container np-text-body-large",
     children: [icon ? /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames__default.default('np-select-input-option-content-icon', !compact && 'np-select-input-option-content-icon--not-compact'),
+      className: classNames__default.default('np-select-input-option-content-icon', !withinTrigger && 'np-select-input-option-content-icon--not-within-trigger'),
       children: icon
     }) : null, /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "np-select-input-option-content-text",
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: classNames__default.default('np-select-input-option-content-text-line-1', compact && 'np-select-input-option-content-text-compact'),
+        className: classNames__default.default('np-select-input-option-content-text-line-1', withinTrigger && 'np-select-input-option-content-text-within-trigger'),
         children: [/*#__PURE__*/jsxRuntime.jsx("h4", {
           className: "d-inline np-text-body-large",
           children: title
@@ -6984,7 +7039,7 @@ function SelectInputOptionContent({
           children: note
         }) : null]
       }), description ? /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classNames__default.default('np-select-input-option-content-text-secondary np-text-body-default', compact && 'np-select-input-option-content-text-compact'),
+        className: classNames__default.default('np-select-input-option-content-text-secondary np-text-body-default', withinTrigger && 'np-select-input-option-content-text-within-trigger'),
         children: description
       }) : null]
     })]