DRAFT: Autosuggest implementation using downshift

config/rollup.config.js

@@ -1,7 +1,7 @@
 import path from 'path';
 import fs from 'fs';
 import autoprefixer from 'autoprefixer';
-import commonjs from 'rollup-plugin-commonjs';
+import commonjs from '@rollup/plugin-commonjs';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import postcss from 'rollup-plugin-postcss';
 import babel from 'rollup-plugin-babel';
@@ -17,6 +17,7 @@ const globals = {
   'react-dom': 'ReactDOM',
   classnames: 'cx',
   'prop-types': 'PropTypes',
+  'react-is': 'react-is',
   i18next: 'i18next',
   'react-autosuggest': 'Autosuggest',
   'react-sortablejs': 'reactSortablejs',

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

@@ -1,6 +1,6 @@
 {
   "name": "@digitransit-component/digitransit-component-autosuggest-panel",
-  "version": "7.0.4",
+  "version": "8.0.0",
   "description": "digitransit-component autosuggest-panel module",
   "main": "index.js",
   "files": [
@@ -28,17 +28,16 @@
   "author": "Digitransit Authors",
   "license": "(AGPL-3.0 OR EUPL-1.2)",
   "peerDependencies": {
-    "@digitransit-component/digitransit-component-autosuggest": "^6.0.4",
+    "@digitransit-component/digitransit-component-autosuggest": "^7.0.0",
     "@digitransit-component/digitransit-component-icon": "^1.2.0",
     "@hsl-fi/sass": "^0.2.0",
     "classnames": "2.5.1",
+    "downshift": "9.0.10",
     "i18next": "^22.5.1",
     "lodash": "4.17.21",
     "lodash-es": "4.17.21",
     "prop-types": "^15.8.1",
     "react": "^16.13.0",
-    "react-autosuggest": "^10.0.0",
-    "react-autowhatever": "10.2.1",
     "react-i18next": "^12.3.1",
     "react-sortablejs": "2.0.11"
   }

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

@@ -1,6 +1,6 @@
 {
   "name": "@digitransit-component/digitransit-component-autosuggest",
-  "version": "6.0.4",
+  "version": "7.0.0",
   "description": "digitransit-component autosuggest module",
   "main": "index.js",
   "files": [
@@ -40,13 +40,13 @@
     "@digitransit-component/digitransit-component-suggestion-item": "^2.3.1",
     "@hsl-fi/sass": "^0.2.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"
   }

digitransit-component/packages/digitransit-component-autosuggest/src/components/ClearButton.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import Icon from '@digitransit-component/digitransit-component-icon';
+import { useTranslation } from 'react-i18next';
+import PropTypes from 'prop-types';
+
+/**
+ * Input clear button element
+ * @typedef {object} ClearButtonProps
+ * @property {string} color // hex color string
+ * @property {string} lng // language, eg. 'fi'
+ * @property {() => void} clearInput
+ * @property {() => void} [onKeyDown]
+ * @param {ClearButtonProps} props
+ * @returns {JSX.Element}
+ */
+export const ClearButton = ({ color, lng, clearInput, onKeyDown, styles }) => {
+  const [t] = useTranslation();
+  return (
+    <button
+      type="button"
+      className={styles['clear-input']}
+      onClick={clearInput}
+      aria-label={t('clear-button-label', { lng })}
+      onKeyDown={onKeyDown}
+    >
+      <Icon img="close" color={color} />
+    </button>
+  );
+};
+
+ClearButton.propTypes = {
+  color: PropTypes.string.isRequired,
+  lng: PropTypes.string.isRequired,
+  clearInput: PropTypes.func.isRequired,
+  onKeyDown: PropTypes.func.isRequired,
+  styles: PropTypes.objectOf(PropTypes.string).isRequired,
+};

digitransit-component/packages/digitransit-component-autosuggest/src/components/Input.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { ClearButton } from './ClearButton';
+
+export function Input({
+  id,
+  lng,
+  value,
+  placeholder,
+  required,
+  getInputProps,
+  getLabelProps,
+  clearInput,
+  ariaLabel,
+  inputRef,
+  styles,
+  renderLabel,
+  isMobile,
+  inputClassName,
+  transportMode,
+  clearButtonColor,
+  autoFocus,
+}) {
+  return (
+    <div className={styles.container}>
+      {renderLabel && (
+        <label
+          {...getLabelProps({
+            className: styles['sr-only'],
+            htmlFor: id,
+          })}
+        >
+          {ariaLabel}
+        </label>
+      )}
+      <input
+        aria-label={ariaLabel}
+        // eslint-disable-next-line jsx-a11y/no-autofocus
+        autoFocus={autoFocus}
+        placeholder={placeholder}
+        required={required}
+        type="text"
+        className={cx(
+          styles.input,
+          isMobile && transportMode ? styles.thin : '',
+          styles[id] || '',
+          value ? styles.hasValue : '',
+          inputClassName,
+        )}
+        value={value}
+        id={id}
+        {...getInputProps({ ref: inputRef })}
+      />
+      {value && (
+        <ClearButton
+          lng={lng}
+          clearInput={() => clearInput(inputRef)}
+          styles={styles}
+          color={clearButtonColor}
+          onKeyDown={clearInput}
+        />
+      )}
+    </div>
+  );
+}
+
+Input.propTypes = {
+  id: PropTypes.string.isRequired,
+  lng: PropTypes.string.isRequired,
+  placeholder: PropTypes.string.isRequired,
+  required: PropTypes.bool.isRequired,
+  value: PropTypes.string.isRequired,
+  getInputProps: PropTypes.func.isRequired,
+  getLabelProps: PropTypes.func.isRequired,
+  clearInput: PropTypes.func.isRequired,
+  ariaLabel: PropTypes.string.isRequired,
+  inputRef: PropTypes.shape({
+    current: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  }).isRequired,
+  styles: PropTypes.objectOf(PropTypes.string).isRequired,
+  renderLabel: PropTypes.bool,
+  isMobile: PropTypes.bool.isRequired,
+  inputClassName: PropTypes.string.isRequired,
+  transportMode: PropTypes.string,
+  clearButtonColor: PropTypes.string.isRequired,
+  autoFocus: PropTypes.bool,
+};
+
+Input.defaultProps = {
+  autoFocus: false,
+  renderLabel: false,
+  transportMode: undefined,
+};