@react-md/autocomplete/es/AutoComplete.js

Create an accessible autocomplete component that allows a user to get real-time suggestions as they type within an input. This component can also be hooked up to a backend API that handles additional filtering or sorting.

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { forwardRef } from "react";
import cn from "classnames";
import { isListboxOptionProps, Option, TextField } from "@react-md/form";
import { List } from "@react-md/list";
import { ScaleTransition } from "@react-md/transition";
import { BELOW_CENTER_ANCHOR, bem, omit } from "@react-md/utils";
import { HighlightedResult } from "./HighlightedResult";
import { useAutoComplete } from "./useAutoComplete";
import { getResultId as DEFAULT_GET_RESULT_ID, getResultLabel as DEFAULT_GET_RESULT_LABEL, getResultValue as DEFAULT_GET_RESULT_VALUE, } from "./utils";
var block = bem("rmd-autocomplate");
var listbox = bem("rmd-listbox");
var DEFAULT_FILTER_OPTIONS = {
    trim: true,
    ignoreWhitespace: true,
};
var EMPTY_LIST = [];
/**
 * An AutoComplete is an accessible combobox widget that allows for real-time
 * suggestions as the user types.
 */
export var AutoComplete = forwardRef(function AutoComplete(_a, forwardedRef) {
    var _b = _a.autoComplete, autoComplete = _b === void 0 ? "list" : _b, data = _a.data, _c = _a.filter, filter = _c === void 0 ? "case-insensitive" : _c, _d = _a.filterOptions, filterOptions = _d === void 0 ? DEFAULT_FILTER_OPTIONS : _d, _e = _a.filterOnNoValue, filterOnNoValue = _e === void 0 ? false : _e, className = _a.className, onBlur = _a.onBlur, onFocus = _a.onFocus, onClick = _a.onClick, onKeyDown = _a.onKeyDown, onChange = _a.onChange, containerProps = _a.containerProps, _f = _a.portal, portal = _f === void 0 ? false : _f, portalInto = _a.portalInto, portalIntoId = _a.portalIntoId, listboxStyle = _a.listboxStyle, listboxClassName = _a.listboxClassName, onAutoComplete = _a.onAutoComplete, _g = _a.clearOnAutoComplete, clearOnAutoComplete = _g === void 0 ? false : _g, _h = _a.labelKey, labelKey = _h === void 0 ? "label" : _h, _j = _a.valueKey, valueKey = _j === void 0 ? "value" : _j, _k = _a.getResultId, getResultId = _k === void 0 ? DEFAULT_GET_RESULT_ID : _k, _l = _a.getResultLabel, getResultLabel = _l === void 0 ? DEFAULT_GET_RESULT_LABEL : _l, _m = _a.getResultValue, getResultValue = _m === void 0 ? DEFAULT_GET_RESULT_VALUE : _m, _o = _a.highlight, highlight = _o === void 0 ? false : _o, _p = _a.highlightReapeating, highlightReapeating = _p === void 0 ? false : _p, highlightStyle = _a.highlightStyle, highlightClassName = _a.highlightClassName, _q = _a.anchor, anchor = _q === void 0 ? BELOW_CENTER_ANCHOR : _q, _r = _a.listboxWidth, listboxWidth = _r === void 0 ? "equal" : _r, _s = _a.xMargin, xMargin = _s === void 0 ? 0 : _s, _t = _a.yMargin, yMargin = _t === void 0 ? 0 : _t, _u = _a.vwMargin, vwMargin = _u === void 0 ? 16 : _u, _v = _a.vhMargin, vhMargin = _v === void 0 ? 16 : _v, _w = _a.transformOrigin, transformOrigin = _w === void 0 ? true : _w, _x = _a.preventOverlap, preventOverlap = _x === void 0 ? true : _x, _y = _a.disableVHBounds, disableVHBounds = _y === void 0 ? false : _y, _z = _a.disableSwapping, disableSwapping = _z === void 0 ? true : _z, disableShowOnFocus = _a.disableShowOnFocus, _0 = _a.closeOnResize, closeOnResize = _0 === void 0 ? false : _0, _1 = _a.closeOnScroll, closeOnScroll = _1 === void 0 ? false : _1, _2 = _a.omitKeys, omitKeys = _2 === void 0 ? EMPTY_LIST : _2, propValue = _a.value, defaultValue = _a.defaultValue, beforeResultsChildren = _a.beforeResultsChildren, afterResultsChildren = _a.afterResultsChildren, props = __rest(_a, ["autoComplete", "data", "filter", "filterOptions", "filterOnNoValue", "className", "onBlur", "onFocus", "onClick", "onKeyDown", "onChange", "containerProps", "portal", "portalInto", "portalIntoId", "listboxStyle", "listboxClassName", "onAutoComplete", "clearOnAutoComplete", "labelKey", "valueKey", "getResultId", "getResultLabel", "getResultValue", "highlight", "highlightReapeating", "highlightStyle", "highlightClassName", "anchor", "listboxWidth", "xMargin", "yMargin", "vwMargin", "vhMargin", "transformOrigin", "preventOverlap", "disableVHBounds", "disableSwapping", "disableShowOnFocus", "closeOnResize", "closeOnScroll", "omitKeys", "value", "defaultValue", "beforeResultsChildren", "afterResultsChildren"]);
    var id = props.id;
    var comboboxId = "".concat(id, "-combobox");
    var suggestionsId = "".concat(id, "-listbox");
    var isListAutocomplete = autoComplete === "list" || autoComplete === "both";
    var isInlineAutocomplete = autoComplete === "inline" || autoComplete === "both";
    var _3 = useAutoComplete({
        suggestionsId: suggestionsId,
        defaultValue: defaultValue,
        data: data,
        filter: filter,
        filterOptions: filterOptions,
        filterOnNoValue: filterOnNoValue,
        valueKey: valueKey,
        getResultId: getResultId,
        getResultValue: getResultValue,
        onBlur: onBlur,
        onFocus: onFocus,
        onClick: onClick,
        onChange: onChange,
        onKeyDown: onKeyDown,
        forwardedRef: forwardedRef,
        onAutoComplete: onAutoComplete,
        clearOnAutoComplete: clearOnAutoComplete,
        isListAutocomplete: isListAutocomplete,
        isInlineAutocomplete: isInlineAutocomplete,
        anchor: anchor,
        xMargin: xMargin,
        yMargin: yMargin,
        vwMargin: vwMargin,
        vhMargin: vhMargin,
        transformOrigin: transformOrigin,
        listboxWidth: listboxWidth,
        listboxStyle: listboxStyle,
        preventOverlap: preventOverlap,
        disableSwapping: disableSwapping,
        disableVHBounds: disableVHBounds,
        closeOnResize: closeOnResize,
        closeOnScroll: closeOnScroll,
        disableShowOnFocus: disableShowOnFocus,
    }), ref = _3.ref, match = _3.match, value = _3.value, visible = _3.visible, activeId = _3.activeId, itemRefs = _3.itemRefs, filteredData = _3.filteredData, listboxRef = _3.listboxRef, fixedStyle = _3.fixedStyle, transitionHooks = _3.transitionHooks, handleBlur = _3.handleBlur, handleFocus = _3.handleFocus, handleClick = _3.handleClick, handleChange = _3.handleChange, handleKeyDown = _3.handleKeyDown, handleAutoComplete = _3.handleAutoComplete;
    return (_jsxs(_Fragment, { children: [_jsx(TextField, __assign({}, props, { "aria-autocomplete": autoComplete, "aria-controls": comboboxId, "aria-activedescendant": activeId, autoComplete: "off", value: propValue !== null && propValue !== void 0 ? propValue : match, onBlur: handleBlur, onFocus: handleFocus, onClick: handleClick, onKeyDown: handleKeyDown, onChange: handleChange, ref: ref, className: cn(block(), className), containerProps: __assign(__assign({}, containerProps), { "aria-haspopup": "listbox", "aria-owns": suggestionsId, "aria-expanded": visible, id: comboboxId, role: "combobox" }) })), _jsx(ScaleTransition, __assign({ nodeRef: listboxRef, portal: portal, portalInto: portalInto, portalIntoId: portalIntoId, vertical: true, transitionIn: visible }, transitionHooks, { className: cn(listbox({ temporary: true }), listboxClassName) }, { children: _jsxs(List, __assign({ id: suggestionsId, role: "listbox", style: fixedStyle }, { children: [beforeResultsChildren, filteredData.map(function (datum, i) {
                            var resultId = getResultId(suggestionsId, i);
                            var optionProps;
                            if (isListboxOptionProps(datum)) {
                                optionProps = omit(datum, __spreadArray([labelKey, valueKey], __read(omitKeys), false));
                            }
                            return (_jsx(Option, __assign({}, optionProps, { id: resultId, selected: false, focused: resultId === activeId, ref: itemRefs[i], onClick: function () { return handleAutoComplete(i); } }, { children: _jsx(HighlightedResult, __assign({ id: "".concat(resultId, "-match"), style: highlightStyle, className: highlightClassName, value: propValue !== null && propValue !== void 0 ? propValue : value, enabled: highlight, repeatable: highlightReapeating }, { children: getResultLabel(datum, labelKey, value) })) }), resultId));
                        }), afterResultsChildren] })) }))] }));
});
//# sourceMappingURL=AutoComplete.js.map