@transferwise/components 46.44.1 → 46.46.0

package/build/inputs/SelectInput.js

@@ -0,0 +1,585 @@
+'use strict';
+
+var react = require('@headlessui/react');
+var icons = require('@transferwise/icons');
+var classNames = require('classnames');
+var mergeProps = require('merge-props');
+var React = require('react');
+var reactIntl = require('react-intl');
+var useEffectEvent = require('../common/hooks/useEffectEvent.js');
+var useScreenSize = require('../common/hooks/useScreenSize.js');
+var PolymorphicWithOverrides = require('../common/polymorphicWithOverrides/PolymorphicWithOverrides.js');
+var breakpoint = require('../common/propsValues/breakpoint.js');
+var DateTrigger_messages = require('../dateLookup/dateTrigger/DateTrigger.messages.js');
+var _BottomSheet = require('./_BottomSheet.js');
+var _ButtonInput = require('./_ButtonInput.js');
+var _Popover = require('./_Popover.js');
+var contexts = require('./contexts.js');
+var InputGroup = require('./InputGroup.js');
+var SearchInput = require('./SearchInput.js');
+var SelectInput_messages = require('./SelectInput.messages.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var mergeProps__default = /*#__PURE__*/_interopDefault(mergeProps);
+
+function searchableString(value) {
+  return value.trim().replace(/\s+/gu, ' ').normalize('NFKC').toLowerCase();
+}
+function inferSearchableStrings(value) {
+  if (typeof value === 'string') {
+    return [searchableString(value)];
+  }
+  if (typeof value === 'object' && value != null) {
+    return Object.values(value).filter(innerValue => typeof innerValue === 'string').map(innerValue => searchableString(innerValue));
+  }
+  return [];
+}
+const SelectInputTriggerButtonPropsContext = /*#__PURE__*/React.createContext({});
+const SelectInputOptionContentWithinTriggerContext = /*#__PURE__*/React.createContext(false);
+function dedupeSelectInputOptionItem(item, existingValues) {
+  if (!existingValues.has(item.value)) {
+    existingValues.add(item.value);
+    return item;
+  }
+  return {
+    ...item,
+    value: undefined
+  };
+}
+function dedupeSelectInputItems(items) {
+  const existingValues = new Set();
+  return items.map(item => {
+    switch (item.type) {
+      case 'option':
+        {
+          return dedupeSelectInputOptionItem(item, existingValues);
+        }
+      case 'group':
+        {
+          return {
+            ...item,
+            options: item.options.map(option => dedupeSelectInputOptionItem(option, existingValues))
+          };
+        }
+    }
+    return item;
+  });
+}
+function filterSelectInputOptionItem(item, needle) {
+  return inferSearchableStrings(item.filterMatchers ?? item.value).some(haystack => haystack.includes(needle));
+}
+function filterSelectInputItems(items, needle) {
+  return items.filter(item => {
+    switch (item.type) {
+      case 'option':
+        {
+          return filterSelectInputOptionItem(item, needle);
+        }
+      case 'group':
+        {
+          return item.options.some(option => filterSelectInputOptionItem(option, needle));
+        }
+    }
+    return false;
+  });
+}
+const defaultRenderTrigger = ({
+  content,
+  placeholderShown,
+  clear,
+  disabled,
+  size,
+  className
+}) => /*#__PURE__*/jsxRuntime.jsx(InputGroup.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
+        })
+      })]
+    }),
+    initialContentWidth: 24 + 4,
+    padding: 'sm'
+  },
+  disabled: disabled,
+  className: className,
+  children: /*#__PURE__*/jsxRuntime.jsx(SelectInputTriggerButton, {
+    as: _ButtonInput.ButtonInput,
+    size: size,
+    children: /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: classNames__default.default('np-select-input-content', placeholderShown && 'np-select-input-placeholder'),
+      children: content
+    })
+  })
+});
+function SelectInputClearButton({
+  className,
+  onClick
+}) {
+  const intl = reactIntl.useIntl();
+  return /*#__PURE__*/jsxRuntime.jsx("button", {
+    type: "button",
+    "aria-label": intl.formatMessage(DateTrigger_messages.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
+    })
+  });
+}
+const noop = () => {};
+function SelectInput({
+  id: idProp,
+  name,
+  multiple,
+  placeholder,
+  items,
+  defaultValue,
+  value: controlledValue,
+  compareValues,
+  renderValue = String,
+  renderFooter,
+  renderTrigger = defaultRenderTrigger,
+  filterable,
+  filterPlaceholder,
+  disabled,
+  size = 'md',
+  className,
+  UNSAFE_triggerButtonProps,
+  onFilterChange = noop,
+  onChange,
+  onClose,
+  onClear
+}) {
+  const inputAttributes = contexts.useInputAttributes();
+  const id = idProp ?? inputAttributes.id;
+  const [open, setOpen] = React.useState(false);
+  const initialized = React.useRef(false);
+  const handleClose = useEffectEvent.useEffectEvent(onClose ?? (() => {}));
+  React.useEffect(() => {
+    if (initialized.current) {
+      if (!open) {
+        handleClose?.();
+      }
+    } else {
+      initialized.current = true;
+    }
+  }, [handleClose, open]);
+  const [filterQuery, _setFilterQuery] = React.useState('');
+  const setFilterQuery = useEffectEvent.useEffectEvent(query => {
+    _setFilterQuery(query);
+    onFilterChange({
+      query,
+      queryNormalized: query ? searchableString(query) : null
+    });
+  });
+  const triggerRef = React.useRef(null);
+  const screenSm = useScreenSize.useScreenSize(breakpoint.Breakpoint.SMALL);
+  const OptionsOverlay = screenSm ? _Popover.Popover : _BottomSheet.BottomSheet;
+  const searchInputRef = React.useRef(null);
+  const listboxRef = React.useRef(null);
+  const controllerRef = filterable ? searchInputRef : listboxRef;
+  return /*#__PURE__*/jsxRuntime.jsx(react.Listbox, {
+    name: name,
+    multiple: multiple,
+    defaultValue: defaultValue,
+    value: controlledValue
+    // TODO: Remove assertion when upgrading TypeScript to v5
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    ,
+    by: compareValues,
+    disabled: disabled,
+    onChange: value => {
+      if (!multiple) {
+        setOpen(false);
+      }
+      onChange?.(value);
+    },
+    children: ({
+      disabled: uiDisabled,
+      value
+    }) => {
+      const placeholderShown = multiple && Array.isArray(value) ? value.length === 0 : value == null;
+      return /*#__PURE__*/jsxRuntime.jsx(OptionsOverlay, {
+        placement: "bottom-start",
+        open: open,
+        renderTrigger: ({
+          ref,
+          getInteractionProps
+        }) => /*#__PURE__*/jsxRuntime.jsx(SelectInputTriggerButtonPropsContext.Provider, {
+          // eslint-disable-next-line react/jsx-no-constructed-context-values
+          value: {
+            ref: node => {
+              ref(node);
+              triggerRef.current = node;
+            },
+            ...inputAttributes,
+            ...UNSAFE_triggerButtonProps,
+            id,
+            ...mergeProps__default.default({
+              onClick: () => {
+                setOpen(prev => !prev);
+              },
+              onKeyDown: event => {
+                if (event.key === ' ' || event.key === 'Enter' || event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                  setOpen(prev => !prev);
+                }
+              }
+            }, getInteractionProps())
+          },
+          children: renderTrigger({
+            content: !placeholderShown ? /*#__PURE__*/jsxRuntime.jsx(SelectInputOptionContentWithinTriggerContext.Provider, {
+              value: true,
+              children: multiple && Array.isArray(value) ? value.map(option => renderValue(option, true)).filter(node => node != null).join(', ') : renderValue(value, true)
+            }) : placeholder,
+            placeholderShown,
+            clear: onClear != null ? () => {
+              onClear();
+              triggerRef.current?.focus({
+                preventScroll: true
+              });
+            } : undefined,
+            disabled: uiDisabled,
+            size,
+            className
+          })
+        }),
+        initialFocusRef: controllerRef,
+        size: filterable ? 'lg' : 'md',
+        padding: "none",
+        onClose: () => {
+          setOpen(false);
+        },
+        onCloseEnd: () => {
+          if (filterQuery !== '') {
+            setFilterQuery('');
+          }
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(SelectInputOptions, {
+          items: items,
+          renderValue: renderValue,
+          renderFooter: renderFooter,
+          filterable: filterable,
+          filterPlaceholder: filterPlaceholder,
+          searchInputRef: searchInputRef,
+          listboxRef: listboxRef,
+          filterQuery: filterQuery,
+          onFilterChange: setFilterQuery
+        })
+      });
+    }
+  });
+}
+function SelectInputTriggerButton({
+  as = 'button',
+  ...restProps
+}) {
+  const {
+    ref,
+    onClick,
+    onKeyDown,
+    ...interactionProps
+  } = React.useContext(SelectInputTriggerButtonPropsContext);
+  return /*#__PURE__*/jsxRuntime.jsx(react.Listbox.Button, {
+    ref: ref,
+    as: PolymorphicWithOverrides.PolymorphicWithOverrides,
+    __overrides: {
+      as,
+      ...interactionProps
+    },
+    ...mergeProps__default.default({
+      onClick,
+      onKeyDown
+    }, restProps)
+  });
+}
+const SelectInputOptionsContainer = /*#__PURE__*/React.forwardRef(function SelectInputOptionsContainer({
+  'aria-orientation': ariaOrientation,
+  'aria-activedescendant': ariaActiveDescendant,
+  role,
+  tabIndex,
+  onAriaActiveDescendantChange,
+  onKeyDown,
+  ...restProps
+}, ref) {
+  const handleAriaActiveDescendantChange = useEffectEvent.useEffectEvent(onAriaActiveDescendantChange);
+  React.useEffect(() => {
+    handleAriaActiveDescendantChange(ariaActiveDescendant);
+  }, [ariaActiveDescendant, handleAriaActiveDescendantChange]);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    ref: ref,
+    role: "none",
+    onKeyDown: event => {
+      // Prevent confirmation close without an active item
+      if (event.key === 'Enter' && ariaActiveDescendant == null) {
+        return;
+      }
+      // Prevent absorbing actions early
+      if (event.key === 'Escape' || event.key === 'Tab') {
+        onKeyDown?.({
+          ...event,
+          preventDefault: () => {},
+          stopPropagation: () => {}
+        });
+        return;
+      }
+      onKeyDown?.(event);
+    },
+    ...restProps
+  });
+});
+function SelectInputOptions({
+  items,
+  renderValue = String,
+  renderFooter,
+  filterable = false,
+  filterPlaceholder,
+  searchInputRef,
+  listboxRef,
+  filterQuery,
+  onFilterChange
+}) {
+  const intl = reactIntl.useIntl();
+  const controllerRef = filterable ? searchInputRef : listboxRef;
+  const needle = React.useMemo(() => {
+    if (filterable) {
+      return filterQuery ? searchableString(filterQuery) : null;
+    }
+    return undefined;
+  }, [filterQuery, filterable]);
+  const resultsEmpty = needle != null && filterSelectInputItems(items, needle).length === 0;
+  const listboxContainerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (listboxContainerRef.current != null) {
+      listboxContainerRef.current.style.setProperty('--initial-height', `${listboxContainerRef.current.offsetHeight}px`);
+    }
+  }, []);
+  const showStatus = resultsEmpty;
+  const statusId = React.useId();
+  const listboxId = React.useId();
+  return /*#__PURE__*/jsxRuntime.jsxs(react.Listbox.Options, {
+    as: SelectInputOptionsContainer,
+    static: true,
+    className: "np-select-input-options-container",
+    onAriaActiveDescendantChange: value => {
+      if (controllerRef.current != null) {
+        if (value != null) {
+          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
+            }));
+          }
+        }
+      }
+    },
+    children: [filterable ? /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "np-select-input-query-container",
+      children: /*#__PURE__*/jsxRuntime.jsx(SearchInput.SearchInput, {
+        ref: searchInputRef,
+        shape: "rectangle",
+        placeholder: filterPlaceholder,
+        value: filterQuery,
+        "aria-controls": listboxId,
+        "aria-describedby": showStatus ? statusId : undefined,
+        onKeyDown: event => {
+          // Prevent interfering with the matcher of Headless UI
+          // https://mathiasbynens.be/notes/javascript-unicode#regex
+          if (/^.$/u.test(event.key)) {
+            event.stopPropagation();
+          }
+        },
+        onChange: event => {
+          onFilterChange(event.currentTarget.value);
+        }
+      })
+    }) : null, /*#__PURE__*/jsxRuntime.jsxs("section", {
+      ref: listboxContainerRef,
+      tabIndex: -1,
+      className: classNames__default.default('np-select-input-listbox-container', items.some(item => item.type === 'group') && 'np-select-input-listbox-container--has-group'),
+      children: [resultsEmpty ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+        id: statusId,
+        className: "np-select-input-options-status",
+        children: [/*#__PURE__*/jsxRuntime.jsx(icons.CrossCircle, {
+          size: 16,
+          className: "np-select-input-options-status-icon"
+        }), intl.formatMessage(SelectInput_messages.noResultsFound)]
+      }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
+        ref: listboxRef,
+        id: listboxId,
+        role: "listbox",
+        "aria-orientation": "vertical",
+        tabIndex: 0,
+        className: "np-select-input-listbox",
+        children: (needle != null ? dedupeSelectInputItems(items) : items).map((item, index) => /*#__PURE__*/jsxRuntime.jsx(SelectInputItemView
+        // eslint-disable-next-line react/no-array-index-key
+        , {
+          item: item,
+          renderValue: renderValue,
+          needle: needle
+        }, index))
+      }), renderFooter != null ? /*#__PURE__*/jsxRuntime.jsx("footer", {
+        className: "np-select-input-footer",
+        children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          role: "none",
+          onKeyDown: event => {
+            // Prevent interfering with Headless UI
+            if (event.key !== 'Escape') {
+              event.stopPropagation();
+            }
+          },
+          children: renderFooter({
+            resultsEmpty,
+            queryNormalized: needle
+          })
+        })
+      }) : null]
+    })]
+  });
+}
+function SelectInputItemView({
+  item,
+  renderValue,
+  needle
+}) {
+  switch (item.type) {
+    case 'option':
+      {
+        if (item.value != null && (needle == null || filterSelectInputOptionItem(item, needle))) {
+          return /*#__PURE__*/jsxRuntime.jsx(SelectInputOption, {
+            value: item.value,
+            disabled: item.disabled,
+            children: renderValue(item.value, false)
+          });
+        }
+        break;
+      }
+    case 'group':
+      {
+        return /*#__PURE__*/jsxRuntime.jsx(SelectInputGroupItemView, {
+          item: item,
+          renderValue: renderValue,
+          needle: needle
+        });
+      }
+    case 'separator':
+      {
+        if (needle == null) {
+          return /*#__PURE__*/jsxRuntime.jsx("hr", {
+            className: "np-select-input-separator-item"
+          });
+        }
+        break;
+      }
+  }
+  return null;
+}
+function SelectInputGroupItemView({
+  item,
+  renderValue,
+  needle
+}) {
+  const headerId = React.useId();
+  return (
+    /*#__PURE__*/
+    // An empty container may be rendered when no options match `needle`
+    // However, pre-filtering would result in worse performance overall
+    jsxRuntime.jsxs("section", {
+      role: "group",
+      "aria-labelledby": headerId,
+      className: classNames__default.default(needle === null && 'np-select-input-group-item--without-needle'),
+      children: [needle == null ? /*#__PURE__*/jsxRuntime.jsx("header", {
+        id: headerId,
+        role: "none",
+        className: "np-select-input-group-item-header np-text-title-group",
+        children: item.label
+      }) : null, item.options.map((option, index) => /*#__PURE__*/jsxRuntime.jsx(SelectInputItemView
+      // eslint-disable-next-line react/no-array-index-key
+      , {
+        item: option,
+        renderValue: renderValue,
+        needle: needle
+      }, index))]
+    })
+  );
+}
+function SelectInputOption({
+  value,
+  disabled,
+  children
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(react.Listbox.Option, {
+    as: "div",
+    value: value,
+    disabled: disabled,
+    className: ({
+      active,
+      disabled: uiDisabled
+    }) => classNames__default.default('np-select-input-option-container np-text-body-large', active && 'np-select-input-option-container--active', uiDisabled && 'np-select-input-option-container--disabled'),
+    children: ({
+      selected
+    }) => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "np-select-input-option",
+        children: children
+      }), /*#__PURE__*/jsxRuntime.jsx(icons.Check, {
+        size: 16,
+        className: classNames__default.default('np-select-input-option-check', !selected && 'np-select-input-option-check--not-selected')
+      })]
+    })
+  });
+}
+function SelectInputOptionContent({
+  title,
+  note,
+  description,
+  icon
+}) {
+  const withinTrigger = React.useContext(SelectInputOptionContentWithinTriggerContext);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: classNames__default.default('np-select-input-option-content-container', (note || description) && 'np-text-body-large'),
+    children: [icon ? /*#__PURE__*/jsxRuntime.jsx("div", {
+      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', withinTrigger && 'np-select-input-option-content-text-within-trigger'),
+        children: [/*#__PURE__*/jsxRuntime.jsx("h4", {
+          className: "np-select-input-option-content-text-primary d-inline",
+          children: title
+        }), note ? /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "np-select-input-option-content-text-secondary np-text-body-default",
+          children: note
+        }) : null]
+      }), description ? /*#__PURE__*/jsxRuntime.jsx("div", {
+        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]
+    })]
+  });
+}
+
+exports.SelectInput = SelectInput;
+exports.SelectInputOptionContent = SelectInputOptionContent;
+exports.SelectInputTriggerButton = SelectInputTriggerButton;
+//# sourceMappingURL=SelectInput.js.map