@react-md/autocomplete
Version:
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.
222 lines • 14.1 kB
JavaScript
"use strict";
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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
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 __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AutoComplete = void 0;
var react_1 = __importStar(require("react"));
var classnames_1 = __importDefault(require("classnames"));
var form_1 = require("@react-md/form");
var list_1 = require("@react-md/list");
var transition_1 = require("@react-md/transition");
var utils_1 = require("@react-md/utils");
var HighlightedResult_1 = require("./HighlightedResult");
var useAutoComplete_1 = require("./useAutoComplete");
var utils_2 = require("./utils");
var block = utils_1.bem("rmd-autocomplate");
var listbox = utils_1.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.
*/
exports.AutoComplete = react_1.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 ? utils_2.getResultId : _k, _l = _a.getResultLabel, getResultLabel = _l === void 0 ? utils_2.getResultLabel : _l, _m = _a.getResultValue, getResultValue = _m === void 0 ? utils_2.getResultValue : _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 ? utils_1.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 = id + "-combobox";
var suggestionsId = id + "-listbox";
var isListAutocomplete = autoComplete === "list" || autoComplete === "both";
var isInlineAutocomplete = autoComplete === "inline" || autoComplete === "both";
var _3 = useAutoComplete_1.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 (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(form_1.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: classnames_1.default(block(), className), containerProps: __assign(__assign({}, containerProps), { "aria-haspopup": "listbox", "aria-owns": suggestionsId, "aria-expanded": visible, id: comboboxId, role: "combobox" }) })),
react_1.default.createElement(transition_1.ScaleTransition, __assign({ portal: portal, portalInto: portalInto, portalIntoId: portalIntoId, vertical: true, visible: visible }, transitionHooks),
react_1.default.createElement(list_1.List, { id: suggestionsId, role: "listbox", ref: listboxRef, style: fixedStyle, className: classnames_1.default(listbox({ temporary: true }), listboxClassName) },
beforeResultsChildren,
filteredData.map(function (datum, i) {
var resultId = getResultId(suggestionsId, i);
var optionProps;
if (form_1.isListboxOptionProps(datum)) {
optionProps = utils_1.omit(datum, __spreadArrays([labelKey, valueKey], omitKeys));
}
return (react_1.default.createElement(form_1.Option, __assign({ key: resultId }, optionProps, { id: resultId, selected: false, focused: resultId === activeId, ref: itemRefs[i], onClick: function () { return handleAutoComplete(i); } }),
react_1.default.createElement(HighlightedResult_1.HighlightedResult, { id: resultId + "-match", style: highlightStyle, className: highlightClassName, value: propValue !== null && propValue !== void 0 ? propValue : value, enabled: highlight, repeatable: highlightReapeating }, getResultLabel(datum, labelKey, value))));
}),
afterResultsChildren))));
});
/* istanbul ignore next */
if (process.env.NODE_ENV !== "production") {
try {
var PropTypes = require("prop-types");
exports.AutoComplete.propTypes = {
id: PropTypes.string.isRequired,
data: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])).isRequired,
filter: PropTypes.oneOfType([
PropTypes.oneOf(["none", "fuzzy", "case-insensitive"]),
PropTypes.func,
]),
filterOptions: PropTypes.object,
filterOnNoValue: PropTypes.bool,
labelKey: PropTypes.string,
valueKey: PropTypes.string,
getResultId: PropTypes.func,
getResultLabel: PropTypes.func,
getResultValue: PropTypes.func,
highlight: PropTypes.bool,
autoComplete: PropTypes.oneOf(["none", "inline", "list", "both"]),
onAutoComplete: PropTypes.func,
clearOnAutoComplete: PropTypes.bool,
portal: PropTypes.bool,
portalInto: PropTypes.oneOfType([
PropTypes.func,
PropTypes.string,
PropTypes.object,
]),
portalIntoId: PropTypes.string,
anchor: PropTypes.shape({
x: PropTypes.oneOf([
"inner-left",
"inner-right",
"center",
"left",
"right",
]),
y: PropTypes.oneOf(["above", "below", "center", "top", "bottom"]),
}),
listboxWidth: PropTypes.oneOf(["auto", "equal", "min"]),
vwMargin: PropTypes.number,
vhMargin: PropTypes.number,
xMargin: PropTypes.number,
yMargin: PropTypes.number,
transformOrigin: PropTypes.bool,
preventOverlap: PropTypes.bool,
disableSwapping: PropTypes.bool,
disableVHBounds: PropTypes.bool,
closeOnResize: PropTypes.bool,
closeOnScroll: PropTypes.bool,
style: PropTypes.object,
className: PropTypes.string,
inputStyle: PropTypes.object,
inputClassName: PropTypes.string,
labelStyle: PropTypes.object,
labelClassName: PropTypes.string,
label: PropTypes.node,
theme: PropTypes.oneOf(["none", "underline", "filled", "outline"]),
dense: PropTypes.bool,
error: PropTypes.bool,
inline: PropTypes.bool,
disabled: PropTypes.bool,
placeholder: PropTypes.string,
underlineDirection: PropTypes.oneOf(["left", "center", "right"]),
leftChildren: PropTypes.node,
rightChildren: PropTypes.node,
isLeftAddon: PropTypes.bool,
isRightAddon: PropTypes.bool,
onBlur: PropTypes.func,
onFocus: PropTypes.func,
onClick: PropTypes.func,
onKeyDown: PropTypes.func,
onChange: PropTypes.func,
containerProps: PropTypes.object,
listboxStyle: PropTypes.object,
listboxClassName: PropTypes.string,
highlightReapeating: PropTypes.bool,
highlightStyle: PropTypes.object,
highlightClassName: PropTypes.string,
disableShowOnFocus: PropTypes.bool,
omitKeys: PropTypes.arrayOf(PropTypes.string),
value: PropTypes.string,
defaultValue: PropTypes.string,
beforeResultsChildren: PropTypes.node,
afterResultsChildren: PropTypes.node,
};
}
catch (e) { }
}
//# sourceMappingURL=AutoComplete.js.map