@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.
126 lines • 10.2 kB
JavaScript
;
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));
};
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 jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = 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 = (0, utils_1.bem)("rmd-autocomplate");
var listbox = (0, 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 = (0, 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 = "".concat(id, "-combobox");
var suggestionsId = "".concat(id, "-listbox");
var isListAutocomplete = autoComplete === "list" || autoComplete === "both";
var isInlineAutocomplete = autoComplete === "inline" || autoComplete === "both";
var _3 = (0, 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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(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: (0, classnames_1.default)(block(), className), containerProps: __assign(__assign({}, containerProps), { "aria-haspopup": "listbox", "aria-owns": suggestionsId, "aria-expanded": visible, id: comboboxId, role: "combobox" }) })), (0, jsx_runtime_1.jsx)(transition_1.ScaleTransition, __assign({ nodeRef: listboxRef, portal: portal, portalInto: portalInto, portalIntoId: portalIntoId, vertical: true, transitionIn: visible }, transitionHooks, { className: (0, classnames_1.default)(listbox({ temporary: true }), listboxClassName) }, { children: (0, jsx_runtime_1.jsxs)(list_1.List, __assign({ id: suggestionsId, role: "listbox", style: fixedStyle }, { children: [beforeResultsChildren, filteredData.map(function (datum, i) {
var resultId = getResultId(suggestionsId, i);
var optionProps;
if ((0, form_1.isListboxOptionProps)(datum)) {
optionProps = (0, utils_1.omit)(datum, __spreadArray([labelKey, valueKey], __read(omitKeys), false));
}
return ((0, jsx_runtime_1.jsx)(form_1.Option, __assign({}, optionProps, { id: resultId, selected: false, focused: resultId === activeId, ref: itemRefs[i], onClick: function () { return handleAutoComplete(i); } }, { children: (0, jsx_runtime_1.jsx)(HighlightedResult_1.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