@transferwise/components 0.0.0-experimental-a0f3d2d → 0.0.0-experimental-693e956

package/build/inputs/SelectInput.js

@@ -1,583 +0,0 @@
-'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,
-  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,
-            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