@digigov/ui 0.28.2 → 0.28.3

package/src/admin/AutoComplete/index.tsx

@@ -1,655 +0,0 @@
-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 type 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 {
-  AutoCompleteInput,
-  AutoCompleteInputTypeahead,
-  AutoCompleteNoResult,
-  AutoCompleteResultList,
-  AutoCompleteResultListItem,
-  AutoCompleteWrapper,
-  AutoCompleteAssistiveHint,
-};