@digigov/ui 0.28.3 → 0.29.0

package/src/admin/AutoComplete/index.tsx

@@ -0,0 +1,656 @@
+import React from 'react';
+import AutoCompleteInput from '@digigov/react-extensions/admin/AutoCompleteInput';
+import AutoCompleteInputTypeahead from '@digigov/react-extensions/admin/AutoCompleteInputTypeahead';
+import AutoCompleteNoResult from '@digigov/react-extensions/admin/AutoCompleteNoResult';
+import AutoCompleteResultList from '@digigov/react-extensions/admin/AutoCompleteResultList';
+import AutoCompleteResultListItem from '@digigov/react-extensions/admin/AutoCompleteResultListItem';
+import AutoCompleteWrapper from '@digigov/react-extensions/admin/AutoCompleteWrapper';
+import AutoCompleteAssistiveHint from '@digigov/react-extensions/admin/AutoCompleteAssistiveHint';
+
+import { Component } from 'react';
+import Status from '@digigov/ui/admin/AutoComplete/Status';
+import DropdownArrowDown from '@digigov/react-extensions/admin/DropdownArrowDown';
+import {
+  isIosDevice,
+  keyCodes,
+  isPrintableKeyCode,
+} from '@digigov/ui/admin/AutoComplete/utils';
+
+export interface AutoCompleteProps {
+  source: (query: string, syncResults: (options: string[]) => void) => void;
+  id: string;
+  tStatusResults?: (x: number, y: string) => string;
+  tStatusNoResults?: () => string;
+  tStatusQueryTooShort?: (x: number) => string;
+  tStatusSelectedOption?: (x: string, y: number, z: number) => string;
+  tNoResults?: () => string;
+  tAssistiveHint?: () => string;
+  templates?: {
+    suggestion?: (value: any) => any;
+    inputValue?: (value: any) => string;
+  };
+  cellWidth?:
+    | 'one-third'
+    | 'one-quarter'
+    | 'one-half'
+    | 'two-thirds'
+    | 'three-quarters'
+    | 'full';
+  autoselect?: boolean;
+  defaultValue?: string;
+  displayMenu?: 'overlay' | 'inline';
+  minLength?: number;
+  name?: string;
+  placeholder?: string;
+  onConfirm?: (x: any) => void;
+  confirmOnBlur?: boolean;
+  showNoOptionsFound?: boolean;
+  showAllValues?: boolean;
+  required?: boolean;
+  dropdownArrow?: React.ElementType;
+}
+
+export type State = {
+  focused: any;
+  hovered: any;
+  menuOpen: boolean;
+  options: string[];
+  query: string;
+  validChoiceMade: boolean;
+  selected: any;
+  ariaHint: boolean;
+};
+
+export type ΝewQueryProps = { menuOpen?: boolean; query?: string };
+
+export default class AutoComplete extends Component<AutoCompleteProps, State> {
+  static defaultProps = {
+    cellWidth: 'one-third',
+    autoselect: false,
+    defaultValue: '',
+    displayMenu: 'overlay',
+    minLength: 0,
+    name: 'govgr-input-autocomplete',
+    placeholder: '',
+    onConfirm: (): void => {
+      return;
+    },
+    confirmOnBlur: false,
+    showNoOptionsFound: true,
+    showAllValues: false,
+    required: false,
+    tNoResults: (): string => 'No results found',
+    tAssistiveHint: (): string =>
+      'When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures.',
+    dropdownArrow: DropdownArrowDown as React.ElementType,
+  };
+
+  elementReferences = {};
+  $pollInput: any;
+
+  constructor(props: AutoCompleteProps) {
+    super(props);
+
+    this.state = {
+      focused: null,
+      hovered: null,
+      menuOpen: false,
+      options: props.defaultValue ? [props.defaultValue] : [],
+      query: props.defaultValue as string,
+      validChoiceMade: false,
+      selected: null,
+      ariaHint: true,
+    };
+
+    this.handleComponentBlur = this.handleComponentBlur.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleUpArrow = this.handleUpArrow.bind(this);
+    this.handleDownArrow = this.handleDownArrow.bind(this);
+    this.handleEnter = this.handleEnter.bind(this);
+    this.handlePrintableKey = this.handlePrintableKey.bind(this);
+
+    this.handleListMouseLeave = this.handleListMouseLeave.bind(this);
+
+    this.handleOptionBlur = this.handleOptionBlur.bind(this);
+    this.handleOptionClick = this.handleOptionClick.bind(this);
+    this.handleOptionFocus = this.handleOptionFocus.bind(this);
+    this.handleOptionMouseDown = this.handleOptionMouseDown.bind(this);
+    this.handleOptionMouseEnter = this.handleOptionMouseEnter.bind(this);
+
+    this.handleInputBlur = this.handleInputBlur.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleInputFocus = this.handleInputFocus.bind(this);
+
+    this.pollInputElement = this.pollInputElement.bind(this);
+    this.getDirectInputChanges = this.getDirectInputChanges.bind(this);
+  }
+
+  isQueryAnOption(query: string, options: string[]): boolean {
+    return (
+      options
+        .map((entry) => this.templateInputValue(entry).toLowerCase())
+        .indexOf(query.toLowerCase()) !== -1
+    );
+  }
+
+  componentDidMount(): void {
+    this.pollInputElement();
+  }
+
+  componentWillUnmount(): void {
+    clearTimeout(this.$pollInput);
+  }
+
+  // Applications like Dragon NaturallySpeaking will modify the
+  // `input` field by directly changing its `.value`. These events
+  // don't trigger our JavaScript event listeners, so we need to poll
+  // to handle when and if they occur.
+  pollInputElement(): void {
+    this.getDirectInputChanges();
+    this.$pollInput = setTimeout(() => {
+      this.pollInputElement();
+    }, 100);
+  }
+
+  getDirectInputChanges(): void {
+    const inputReference = this.elementReferences[-1];
+    const queryHasChanged =
+      inputReference && inputReference.value !== this.state.query;
+
+    if (queryHasChanged) {
+      this.handleInputChange({ target: { value: inputReference.value } });
+    }
+  }
+
+  componentDidUpdate(_, prevState: Readonly<State>): void {
+    const { focused } = this.state;
+    const componentLostFocus = focused === null;
+    const focusedChanged = prevState.focused !== focused;
+    const focusDifferentElement = focusedChanged && !componentLostFocus;
+    if (focusDifferentElement) {
+      this.elementReferences[focused].focus();
+    }
+    const focusedInput = focused === -1;
+    const componentGainedFocus = focusedChanged && prevState.focused === null;
+    const selectAllText = focusedInput && componentGainedFocus;
+    if (selectAllText) {
+      const inputElement = this.elementReferences[focused];
+      inputElement.setSelectionRange(0, inputElement.value.length);
+    }
+  }
+
+  hasAutoselect(): boolean {
+    return (isIosDevice() as boolean)
+      ? false
+      : (this.props.autoselect as boolean);
+  }
+
+  // This template is used when converting from a state.options object into a state.query.
+  templateInputValue(value: string): string {
+    const inputValueTemplate =
+      this.props.templates && this.props.templates.inputValue;
+    return inputValueTemplate ? inputValueTemplate(value) : value;
+  }
+
+  // This template is used when displaying results / suggestions.
+  templateSuggestion(value: string): string {
+    const suggestionTemplate =
+      this.props.templates && this.props.templates.suggestion;
+    return suggestionTemplate ? suggestionTemplate(value) : value;
+  }
+
+  handleComponentBlur(newState: ΝewQueryProps): void {
+    const { options, query, selected } = this.state;
+    let newQuery: string;
+    if (this.props.confirmOnBlur) {
+      newQuery = newState.query || query;
+      this.props.onConfirm?.(options[selected as number]);
+    } else {
+      newQuery = query;
+    }
+    this.setState({
+      focused: null,
+      menuOpen: newState.menuOpen || false,
+      query: newQuery,
+      selected: null,
+      validChoiceMade: this.isQueryAnOption(newQuery, options),
+    });
+  }
+
+  handleListMouseLeave(): void {
+    this.setState({
+      hovered: null,
+    });
+  }
+
+  handleOptionBlur(
+    event: React.FocusEvent<HTMLLIElement>,
+    index: number
+  ): void {
+    const { focused, menuOpen, options, selected } = this.state;
+    const focusingOutsideComponent = event.relatedTarget === null;
+    const focusingInput = event.relatedTarget === this.elementReferences[-1];
+    const focusingAnotherOption = focused !== index && focused !== -1;
+    const blurComponent =
+      (!focusingAnotherOption && focusingOutsideComponent) ||
+      !(focusingAnotherOption || focusingInput);
+    if (blurComponent) {
+      const keepMenuOpen = menuOpen && isIosDevice();
+      this.handleComponentBlur({
+        menuOpen: keepMenuOpen,
+        query: this.templateInputValue(options[selected as number]),
+      });
+    }
+  }
+
+  handleInputBlur(): void {
+    const { focused, menuOpen, options, query, selected } = this.state;
+    const focusingAnOption = focused !== -1;
+    if (!focusingAnOption) {
+      const keepMenuOpen = menuOpen && isIosDevice();
+      const newQuery = isIosDevice()
+        ? query
+        : this.templateInputValue(options[selected as number]);
+      this.handleComponentBlur({
+        menuOpen: keepMenuOpen,
+        query: newQuery,
+      });
+    }
+  }
+
+  handleInputChange(event: { target: any }): void {
+    const { minLength, source, showAllValues } = this.props;
+    const autoselect = this.hasAutoselect();
+    const query = event.target.value;
+    const queryEmpty = query.length === 0;
+    const queryChanged = this.state.query.length !== query.length;
+    const queryLongEnough = query.length >= (minLength as number);
+
+    this.setState({
+      query,
+      ariaHint: queryEmpty,
+    });
+
+    const searchForOptions =
+      showAllValues || (!queryEmpty && queryChanged && queryLongEnough);
+    if (searchForOptions) {
+      source(query, (options) => {
+        const optionsAvailable = options.length > 0;
+        this.setState({
+          menuOpen: optionsAvailable,
+          options,
+          selected: autoselect && optionsAvailable ? 0 : -1,
+          validChoiceMade: false,
+        });
+      });
+    } else if (queryEmpty || !queryLongEnough) {
+      this.setState({
+        menuOpen: false,
+        options: [],
+      });
+    }
+  }
+
+  handleInputClick(
+    event: React.MouseEvent<HTMLInputElement, MouseEvent>
+  ): void {
+    this.handleInputChange(event);
+  }
+
+  handleInputFocus(): void {
+    const { query, validChoiceMade, options } = this.state;
+    const { minLength } = this.props;
+    const shouldReopenMenu =
+      !validChoiceMade &&
+      query.length >= (minLength as number) &&
+      options.length > 0;
+
+    if (shouldReopenMenu) {
+      this.setState(({ menuOpen }) => ({
+        focused: -1,
+        menuOpen: shouldReopenMenu || menuOpen,
+        selected: -1,
+      }));
+    } else {
+      this.setState({ focused: -1 });
+    }
+  }
+
+  handleOptionFocus(index: number): void {
+    this.setState({
+      focused: index,
+      hovered: null,
+      selected: index,
+    });
+  }
+
+  handleOptionMouseEnter(index: number): void {
+    // iOS Safari prevents click event if mouseenter adds hover background colour
+    // See: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW4
+    if (!isIosDevice()) {
+      this.setState({
+        hovered: index,
+      });
+    }
+  }
+
+  handleOptionClick(index: number): void {
+    const selectedOption = this.state.options[index];
+    const newQuery = this.templateInputValue(selectedOption);
+    this.props.onConfirm?.(selectedOption);
+    this.setState({
+      focused: -1,
+      hovered: null,
+      menuOpen: false,
+      query: newQuery,
+      selected: -1,
+      validChoiceMade: true,
+    });
+    this.forceUpdate();
+  }
+
+  handleOptionMouseDown(event: { preventDefault: () => void }): void {
+    // Safari triggers focusOut before click, but if you
+    // preventDefault on mouseDown, you can stop that from happening.
+    // If this is removed, clicking on an option in Safari will trigger
+    // `handleOptionBlur`, which closes the menu, and the click will
+    // trigger on the element underneath instead.
+    // See: http://stackoverflow.com/questions/7621711/how-to-prevent-blur-running-when-clicking-a-link-in-jquery
+    event.preventDefault();
+  }
+
+  handleUpArrow(event: { preventDefault: () => void }): void {
+    event.preventDefault();
+    const { menuOpen, selected } = this.state;
+    const isNotAtTop = selected !== -1;
+    const allowMoveUp = isNotAtTop && menuOpen;
+    if (allowMoveUp) {
+      this.handleOptionFocus((selected as number) - 1);
+    }
+  }
+
+  handleDownArrow(event: { preventDefault: () => void }): void {
+    event.preventDefault();
+    // if not open, open
+    if (this.props.showAllValues && this.state.menuOpen === false) {
+      event.preventDefault();
+      this.props.source('', (options) => {
+        this.setState({
+          menuOpen: true,
+          options,
+          selected: 0,
+          focused: 0,
+          hovered: null,
+        });
+      });
+    } else if (this.state.menuOpen === true) {
+      const { menuOpen, options, selected } = this.state;
+      const isNotAtBottom = selected !== options.length - 1;
+      const allowMoveDown = isNotAtBottom && menuOpen;
+      if (allowMoveDown) {
+        this.handleOptionFocus((selected as number) + 1);
+      }
+    }
+  }
+
+  handleSpace(event: { preventDefault: () => void }): void {
+    // if not open, open
+    if (
+      this.props.showAllValues &&
+      this.state.menuOpen === false &&
+      this.state.query === ''
+    ) {
+      event.preventDefault();
+      this.props.source('', (options) => {
+        this.setState({
+          menuOpen: true,
+          options,
+        });
+      });
+    }
+    const focusIsOnOption = this.state.focused !== -1;
+    if (focusIsOnOption) {
+      event.preventDefault();
+      this.handleOptionClick(this.state.focused);
+    }
+  }
+
+  handleEnter(event: { preventDefault: () => void }): void {
+    if (this.state.menuOpen) {
+      event.preventDefault();
+      const hasSelectedOption = this.state.selected >= 0;
+      if (hasSelectedOption) {
+        this.handleOptionClick(this.state.selected);
+      }
+    }
+  }
+
+  handlePrintableKey(event: { target: any }): void {
+    const inputElement = this.elementReferences[-1];
+    const eventIsOnInput = event.target === inputElement;
+    if (!eventIsOnInput) {
+      // FIXME: This would be better if it was in componentDidUpdate,
+      // but using setState to trigger that seems to not work correctly
+      // in preact@8.1.0.
+      inputElement.focus();
+    }
+  }
+
+  handleKeyDown(event: {
+    preventDefault: () => void;
+    keyCode: number;
+    target: any;
+  }): void {
+    switch (keyCodes[event.keyCode]) {
+      case 'up':
+        this.handleUpArrow(event);
+        break;
+      case 'down':
+        this.handleDownArrow(event);
+        break;
+      case 'space':
+        this.handleSpace(event);
+        break;
+      case 'enter':
+        this.handleEnter(event);
+        break;
+      case 'escape':
+        this.handleComponentBlur({
+          query: this.state.query,
+        });
+        break;
+      default:
+        if (isPrintableKeyCode(event.keyCode)) {
+          this.handlePrintableKey(event);
+        }
+        break;
+    }
+  }
+
+  render(): JSX.Element {
+    const {
+      id,
+      cellWidth,
+      displayMenu,
+      minLength,
+      name,
+      placeholder,
+      required,
+      showAllValues,
+      tNoResults,
+      tStatusQueryTooShort,
+      tStatusNoResults,
+      tStatusSelectedOption,
+      tStatusResults,
+      tAssistiveHint,
+      dropdownArrow: DropdownArrow,
+    } = this.props;
+    const {
+      focused,
+      hovered,
+      menuOpen,
+      options,
+      query,
+      selected,
+      ariaHint,
+      validChoiceMade,
+    } = this.state;
+    const autoselect = this.hasAutoselect();
+
+    const inputFocused = focused === -1;
+    const noOptionsAvailable = options.length === 0;
+    const queryNotEmpty = query.length !== 0;
+    const queryLongEnough = query.length >= (minLength as number);
+    const showNoOptionsFound =
+      this.props.showNoOptionsFound &&
+      inputFocused &&
+      noOptionsAvailable &&
+      queryNotEmpty &&
+      queryLongEnough;
+    const componentIsFocused = focused !== null;
+    const dropdownArrowClassName = `govgr-autocomplete__dropdown-arrow-down`;
+    const optionFocused = focused !== -1 && focused !== null;
+    const menuIsVisible = menuOpen || showNoOptionsFound;
+    const selectedOptionText = this.templateInputValue(options[selected]);
+    const optionBeginsWithQuery =
+      selectedOptionText &&
+      selectedOptionText.toLowerCase().indexOf(query.toLowerCase()) === 0;
+    const hintValue =
+      optionBeginsWithQuery && autoselect
+        ? query + selectedOptionText.substr(query.length)
+        : '';
+
+    const assistiveHintID = id + '__assistiveHint';
+    const ariaDescribedProp = ariaHint
+      ? {
+          'aria-describedby': assistiveHintID,
+        }
+      : null;
+
+    return (
+      <AutoCompleteWrapper onKeyDown={this.handleKeyDown} cellWidth={cellWidth}>
+        <Status
+          id={id}
+          length={options.length}
+          queryLength={query.length}
+          minQueryLength={minLength as number}
+          selectedOption={this.templateInputValue(options[selected])}
+          selectedOptionIndex={selected}
+          validChoiceMade={validChoiceMade}
+          isInFocus={this.state.focused !== null}
+          tQueryTooShort={tStatusQueryTooShort}
+          tNoResults={tStatusNoResults}
+          tSelectedOption={tStatusSelectedOption}
+          tResults={tStatusResults}
+        />
+
+        {hintValue && <AutoCompleteInputTypeahead value={hintValue} />}
+
+        <AutoCompleteInput
+          aria-expanded={menuOpen ? 'true' : 'false'}
+          aria-activedescendant={
+            optionFocused ? `${id}__option--${focused}` : ''
+          }
+          aria-owns={`${id}__listbox`}
+          aria-autocomplete={this.hasAutoselect() ? 'both' : 'list'}
+          {...ariaDescribedProp}
+          autoComplete="off"
+          isFocused={componentIsFocused}
+          showAllValues={this.props.showAllValues}
+          id={id}
+          onClick={(event) => this.handleInputClick(event)}
+          onBlur={this.handleInputBlur}
+          onChange={this.handleInputChange}
+          onFocus={this.handleInputFocus}
+          name={name}
+          placeholder={placeholder}
+          ref={(inputElement) => {
+            this.elementReferences[-1] = inputElement;
+          }}
+          role="combobox"
+          required={required}
+          value={query}
+        />
+
+        {showAllValues && DropdownArrow && (
+          <DropdownArrow className={dropdownArrowClassName} />
+        )}
+
+        <AutoCompleteResultList
+          displayMenu={displayMenu}
+          isVisible={menuIsVisible}
+          onMouseLeave={() => this.handleListMouseLeave()}
+          id={`${id}__listbox`}
+          role="listbox"
+        >
+          {options.map((option, index) => {
+            const showFocused =
+              focused === -1 ? selected === index : focused === index;
+            const iosPosinsetHtml = isIosDevice() ? (
+              <span
+                id={`${id}__option-suffix--${index}`}
+                style={{
+                  border: '0',
+                  clip: 'rect(0 0 0 0)',
+                  height: '1px',
+                  marginBottom: '-1px',
+                  marginRight: '-1px',
+                  overflow: 'hidden',
+                  padding: '0',
+                  position: 'absolute',
+                  whiteSpace: 'nowrap',
+                  width: '1px',
+                }}
+              >
+                {index + 1} από {options.length}
+              </span>
+            ) : (
+              ''
+            );
+
+            return (
+              <AutoCompleteResultListItem
+                isFocused={showFocused}
+                isHovered={hovered}
+                index={index}
+                aria-selected={focused === index ? 'true' : 'false'}
+                key={index}
+                onBlur={(event) => this.handleOptionBlur(event, index)}
+                onClick={() => this.handleOptionClick(index)}
+                onMouseDown={this.handleOptionMouseDown}
+                onMouseEnter={() => this.handleOptionMouseEnter(index)}
+                ref={(optionEl) => {
+                  this.elementReferences[index] = optionEl;
+                }}
+                role="option"
+                tabIndex={-1}
+                aria-posinset={index + 1}
+                aria-setsize={options.length}
+              >
+                {this.templateSuggestion(option)} {iosPosinsetHtml}
+              </AutoCompleteResultListItem>
+            );
+          })}
+          {showNoOptionsFound && (
+            <AutoCompleteNoResult>{tNoResults?.()}</AutoCompleteNoResult>
+          )}
+        </AutoCompleteResultList>
+
+        <AutoCompleteAssistiveHint id={assistiveHintID}>
+          {tAssistiveHint?.()}
+        </AutoCompleteAssistiveHint>
+      </AutoCompleteWrapper>
+    );
+  }
+}
+
+export {
+  AutoComplete,
+  AutoCompleteInput,
+  AutoCompleteInputTypeahead,
+  AutoCompleteNoResult,
+  AutoCompleteResultList,
+  AutoCompleteResultListItem,
+  AutoCompleteWrapper,
+  AutoCompleteAssistiveHint,
+};