@gechiui/components/build-module/autocomplete/autocompleter-ui.js

UI components for GeChiUI.

import { createElement } from "@gechiui/element";

/**
 * External dependencies
 */
import classnames from 'classnames';
import { map } from 'lodash';
/**
 * GeChiUI dependencies
 */

import { useLayoutEffect } from '@gechiui/element';
import { useAnchorRef } from '@gechiui/rich-text';
/**
 * Internal dependencies
 */

import getDefaultUseItems from './get-default-use-items';
import Button from '../button';
import Popover from '../popover';
export function getAutoCompleterUI(autocompleter) {
  const useItems = autocompleter.useItems ? autocompleter.useItems : getDefaultUseItems(autocompleter);

  function AutocompleterUI(_ref) {
    let {
      filterValue,
      instanceId,
      listBoxId,
      className,
      selectedIndex,
      onChangeOptions,
      onSelect,
      onReset,
      value,
      contentRef
    } = _ref;
    const [items] = useItems(filterValue);
    const anchorRef = useAnchorRef({
      ref: contentRef,
      value
    });
    useLayoutEffect(() => {
      onChangeOptions(items);
    }, [items]);

    if (!items.length > 0) {
      return null;
    }

    return createElement(Popover, {
      focusOnMount: false,
      onClose: onReset,
      position: "top right",
      className: "components-autocomplete__popover",
      anchorRef: anchorRef
    }, createElement("div", {
      id: listBoxId,
      role: "listbox",
      className: "components-autocomplete__results"
    }, map(items, (option, index) => createElement(Button, {
      key: option.key,
      id: `components-autocomplete-item-${instanceId}-${option.key}`,
      role: "option",
      "aria-selected": index === selectedIndex,
      disabled: option.isDisabled,
      className: classnames('components-autocomplete__result', className, {
        'is-selected': index === selectedIndex
      }),
      onClick: () => onSelect(option)
    }, option.label))));
  }

  return AutocompleterUI;
}
//# sourceMappingURL=autocompleter-ui.js.map