AB#456 Refactor shared components to not use react-autosuggest

config/rollup.config.js

@@ -19,7 +19,7 @@ const globals = {
   'prop-types': 'PropTypes',
   'react-is': 'react-is',
   i18next: 'i18next',
-  'react-autosuggest': 'Autosuggest',
+  'react-i18next': 'reactI18next',
   'react-sortablejs': 'reactSortablejs',
   'react-modal': 'ReactModal',
   '@hsl-fi/modal': 'Modal',
@@ -49,6 +49,9 @@ const globals = {
   'lodash/uniq': 'uniq',
   'lodash/compact': 'compact',
   'react-relay': 'reactRelay',
+  downshift: 'downshift',
+  luxon: 'luxon',
+  'react-select': 'Select',
 };
 
 async function getSortedPackages() {

digitransit-component/packages/digitransit-component-autosuggest-panel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitransit-component/digitransit-component-autosuggest-panel",
-  "version": "8.1.2",
+  "version": "8.2.0",
   "description": "digitransit-component autosuggest-panel module",
   "main": "index.js",
   "files": [

digitransit-component/packages/digitransit-component-autosuggest-panel/src/helpers/Select.js

@@ -1,104 +1,79 @@
 import PropTypes from 'prop-types';
-import React, { useState, useEffect, useRef, useLayoutEffect } from 'react';
-import Autosuggest from 'react-autosuggest';
+import cx from 'classnames';
+import React from 'react';
+import { useSelect } from 'downshift';
 import styles from './select.scss';
 
 const Select = ({
   value,
-  getDisplay,
   options,
   onSlackTimeSelected,
   viaPointIndex,
   id,
   label,
   icon,
 }) => {
-  const [displayValue, changeDisplayValue] = useState(getDisplay(value));
-  const [open, changeOpen] = useState(false);
-  useEffect(() => changeDisplayValue(getDisplay(value)), [value]);
-  const scrollRef = useRef(null);
-  const scrollIndex = Math.floor(value / 600);
-  const elementHeight = 50;
-  useLayoutEffect(() => {
-    if (open && scrollRef.current) {
-      scrollRef.current.scrollTop = elementHeight * scrollIndex;
-    }
-  }, [value, open]);
-
-  const inputId = `${id}-input`;
   const labelId = `${id}-label`;
+  const selectedItem = options.find(option => option.value === value);
+
+  const {
+    isOpen,
+    getToggleButtonProps,
+    getMenuProps,
+    getItemProps,
+    getLabelProps,
+    highlightedIndex,
+  } = useSelect({
+    selectedItem,
+    items: options,
+    labelId,
+    id,
+    itemToString: item => item.displayName,
+    onSelectedItemChange: ({ selectedItem: newItem }) => {
+      onSlackTimeSelected(newItem.value, viaPointIndex);
+    },
+  });
 
-  const onInputChange = (_, { newValue, method }) => {
-    switch (method) {
-      case 'enter':
-      case 'click':
-        onSlackTimeSelected(newValue, viaPointIndex);
-        break;
-      case 'escape':
-        changeDisplayValue(value);
-        break;
-      case 'up':
-      case 'down':
-      default:
-        break;
-    }
-  };
   return (
-    <label className={styles['combobox-container']} htmlFor={inputId}>
-      <span className={styles['left-column']}>
-        <span className={styles['combobox-label']} id={labelId}>
-          {label}
-        </span>
-        <Autosuggest
-          id={id}
-          suggestions={options}
-          getSuggestionValue={s => s.value}
-          renderSuggestion={s => s.displayName}
-          onSuggestionsFetchRequested={() => null}
-          shouldRenderSuggestions={() => true}
-          focusInputOnSuggestionClick={false}
-          onSuggestionsClearRequested={() => null}
-          inputProps={{
-            value: displayValue,
-            onChange: onInputChange,
-            onFocus: () => {
-              changeOpen(true);
-            },
-            onBlur: () => {
-              changeOpen(false);
-            },
-            id: inputId,
-            'aria-labelledby': labelId,
-            'aria-autocomplete': 'none',
-            readOnly: true,
-          }}
-          renderSuggestionsContainer={({ containerProps, children }) => {
-            // set refs for autosuggest library and scrollbar positioning
-            const { ref, ...otherRefs } = containerProps;
-            const containerRef = elem => {
-              if (elem) {
-                scrollRef.current = elem;
-                ref(elem);
-              }
-            };
-            return (
-              <div tabIndex="-1" {...otherRefs} ref={containerRef}>
-                {children}
-              </div>
-            );
-          }}
-          theme={styles}
-        />
-      </span>
-      {icon}
-    </label>
+    <div className={styles['combobox-container']}>
+      <div className={styles.container}>
+        <div {...getToggleButtonProps()}>
+          <span className={styles['left-column']}>
+            <label {...getLabelProps()} className={styles['combobox-label']}>
+              {label}
+            </label>
+            <div className={styles.input}>
+              <span>{selectedItem.displayName}</span>
+            </div>
+          </span>
+          {icon}
+        </div>
+        <ul
+          className={cx([styles.suggestionsContainerOpen, !isOpen && 'hidden'])}
+          {...getMenuProps()}
+        >
+          {isOpen &&
+            options.map((option, index) => (
+              <li
+                key={option.value}
+                className={cx([
+                  styles.suggestion,
+                  index === highlightedIndex && styles.suggestionHighlighted,
+                ])}
+                {...getItemProps({ index })}
+              >
+                <span>{option.displayName}</span>
+              </li>
+            ))}
+        </ul>
+      </div>
+    </div>
   );
 };
 
 Select.propTypes = {
   value: PropTypes.number.isRequired,
   onSlackTimeSelected: PropTypes.func.isRequired,
-  getDisplay: PropTypes.func.isRequired,
   options: PropTypes.arrayOf(
     PropTypes.shape({
       displayName: PropTypes.string.isRequired,

digitransit-component/packages/digitransit-component-autosuggest-panel/src/helpers/select.scss

@@ -41,6 +41,17 @@ $zindex: base, map-container, map-gradient, map-fullscreen-toggle, map-buttons,
 
 .container {
   position: relative;
+  width: 100%;
+  height: 100%;
+
+  > div {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+  }
 
   .suggestion {
     font-size: 15px;
@@ -68,8 +79,13 @@ $zindex: base, map-container, map-gradient, map-fullscreen-toggle, map-buttons,
     border-radius: 5px;
     box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.06);
     border: 1px rgba(0, 0, 0, 0.1) solid;
-    top: 35px;
-    width: calc(100% + 45px); // 43px == width of icon next to input
+    top: calc(100% + 4px);
+    left: 0;
+    width: 100%;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+
     ul {
       padding: 0;
       margin: 0;

digitransit-component/packages/digitransit-component-autosuggest-panel/src/index.js

@@ -606,7 +606,6 @@ class DTAutosuggestPanel extends React.Component {
                       label={t('viapoint-slack-amount', { lng })}
                       options={slackTime}
                       value={getViaPointSlackTimeOrDefault(viaPoints[i])}
-                      getDisplay={this.getSlackDisplay}
                       viaPointIndex={i}
                       icon={
                         <span

digitransit-component/packages/digitransit-component-autosuggest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitransit-component/digitransit-component-autosuggest",
-  "version": "7.1.0",
+  "version": "7.1.1",
   "description": "digitransit-component autosuggest module",
   "main": "index.js",
   "files": [

digitransit-component/packages/digitransit-component-datetimepicker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitransit-component/digitransit-component-datetimepicker",
-  "version": "5.0.0",
+  "version": "6.0.0",
   "description": "digitransit-component datetimepicker module",
   "main": "index.js",
   "files": [
@@ -31,13 +31,13 @@
   "peerDependencies": {
     "@digitransit-component/digitransit-component-icon": "^2.0.0",
     "classnames": "2.5.1",
+    "downshift": "9.0.10",
     "i18next": "^22.5.1",
     "lodash": "4.17.21",
     "lodash-es": "4.17.21",
     "luxon": "^3.6.1",
     "prop-types": "^15.8.1",
     "react": "^16.13.0",
-    "react-autosuggest": "^10.0.0",
     "react-i18next": "^12.3.1",
     "react-modal": "~3.11.2",
     "react-select": "5.8.0"