@react-md/autocomplete - npm Package Compare versions

Comparing version 2.0.0-alpha.13 to 2.0.0-alpha.14

es/AutoComplete.js

@@ -23,3 +23,3 @@ var __assign = (this && this.__assign) || function () {
 };
-import React, { forwardRef, Fragment } from "react";
+import React, { forwardRef, Fragment, } from "react";
 import cn from "classnames";
@@ -30,3 +30,3 @@ import { isListboxOptionProps, Option, TextField, } from "@react-md/form";
 import { bem, omit } from "@react-md/utils";
-import HighlightLabel from "./HighlightLabel";
+import HighlightedResult from "./HighlightedResult";
 import useAutoComplete from "./useAutoComplete";
@@ -49,3 +49,3 @@ import { getResultId as DEFAULT_GET_RESULT_ID, getResultLabel as DEFAULT_GET_RESULT_LABEL, getResultValue as DEFAULT_GET_RESULT_VALUE, } from "./utils";
 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, className = _a.className, onBlur = _a.onBlur, onFocus = _a.onFocus, onClick = _a.onClick, onKeyDown = _a.onKeyDown, onChange = _a.onChange, containerProps = _a.containerProps, _e = _a.portal, portal = _e === void 0 ? false : _e, portalInto = _a.portalInto, portalIntoId = _a.portalIntoId, listboxStyle = _a.listboxStyle, listboxClassName = _a.listboxClassName, onAutoComplete = _a.onAutoComplete, _f = _a.clearOnAutoComplete, clearOnAutoComplete = _f === void 0 ? false : _f, _g = _a.labelKey, labelKey = _g === void 0 ? "label" : _g, _h = _a.valueKey, valueKey = _h === void 0 ? "value" : _h, _j = _a.getResultId, getResultId = _j === void 0 ? DEFAULT_GET_RESULT_ID : _j, _k = _a.getResultLabel, getResultLabel = _k === void 0 ? DEFAULT_GET_RESULT_LABEL : _k, _l = _a.getResultValue, getResultValue = _l === void 0 ? DEFAULT_GET_RESULT_VALUE : _l, _m = _a.getEmptyValueData, getEmptyValueData = _m === void 0 ? function (data) { return data; } : _m, _o = _a.highlight, highlight = _o === void 0 ? false : _o, _p = _a.anchor, anchor = _p === void 0 ? DEFAULT_ANCHOR : _p, listboxWidth = _a.listboxWidth, _q = _a.xMargin, xMargin = _q === void 0 ? 0 : _q, _r = _a.yMargin, yMargin = _r === void 0 ? 0 : _r, _s = _a.vwMargin, vwMargin = _s === void 0 ? 16 : _s, _t = _a.vhMargin, vhMargin = _t === void 0 ? 16 : _t, _u = _a.transformOrigin, transformOrigin = _u === void 0 ? true : _u, _v = _a.preventOverlap, preventOverlap = _v === void 0 ? true : _v, _w = _a.disableSwapping, disableSwapping = _w === void 0 ? false : _w, _x = _a.disableVHBounds, disableVHBounds = _x === void 0 ? false : _x, _y = _a.disableHideOnResize, disableHideOnResize = _y === void 0 ? false : _y, _z = _a.disableHideOnScroll, disableHideOnScroll = _z === void 0 ? true : _z, props = __rest(_a, ["autoComplete", "data", "filter", "filterOptions", "className", "onBlur", "onFocus", "onClick", "onKeyDown", "onChange", "containerProps", "portal", "portalInto", "portalIntoId", "listboxStyle", "listboxClassName", "onAutoComplete", "clearOnAutoComplete", "labelKey", "valueKey", "getResultId", "getResultLabel", "getResultValue", "getEmptyValueData", "highlight", "anchor", "listboxWidth", "xMargin", "yMargin", "vwMargin", "vhMargin", "transformOrigin", "preventOverlap", "disableSwapping", "disableVHBounds", "disableHideOnResize", "disableHideOnScroll"]);
+    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, highlightStyle = _a.highlightStyle, highlightClassName = _a.highlightClassName, _p = _a.anchor, anchor = _p === void 0 ? DEFAULT_ANCHOR : _p, _q = _a.listboxWidth, listboxWidth = _q === void 0 ? "equal" : _q, _r = _a.xMargin, xMargin = _r === void 0 ? 0 : _r, _s = _a.yMargin, yMargin = _s === void 0 ? 0 : _s, _t = _a.vwMargin, vwMargin = _t === void 0 ? 16 : _t, _u = _a.vhMargin, vhMargin = _u === void 0 ? 16 : _u, _v = _a.transformOrigin, transformOrigin = _v === void 0 ? true : _v, _w = _a.preventOverlap, preventOverlap = _w === void 0 ? true : _w, _x = _a.disableSwapping, disableSwapping = _x === void 0 ? false : _x, _y = _a.disableVHBounds, disableVHBounds = _y === void 0 ? false : _y, _z = _a.disableHideOnResize, disableHideOnResize = _z === void 0 ? false : _z, _0 = _a.disableHideOnScroll, disableHideOnScroll = _0 === void 0 ? true : _0, 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", "highlightStyle", "highlightClassName", "anchor", "listboxWidth", "xMargin", "yMargin", "vwMargin", "vhMargin", "transformOrigin", "preventOverlap", "disableSwapping", "disableVHBounds", "disableHideOnResize", "disableHideOnScroll"]);
     var id = props.id;
@@ -56,3 +56,3 @@ var comboboxId = id + "-combobox";
         (filter === "case-insensitive" || typeof filter === "function");
-    var _0 = useAutoComplete({
+    var _1 = useAutoComplete({
         autoComplete: autoComplete,
@@ -63,6 +63,6 @@ suggestionsId: suggestionsId,
         filterOptions: filterOptions,
+        filterOnNoValue: filterOnNoValue,
         valueKey: valueKey,
         getResultId: getResultId,
         getResultValue: getResultValue,
-        getEmptyValueData: getEmptyValueData,
         onBlur: onBlur,
@@ -89,7 +89,7 @@ onFocus: onFocus,
         disableHideOnScroll: disableHideOnScroll,
-    }), ref = _0.ref, value = _0.value, visible = _0.visible, activeId = _0.activeId, itemRefs = _0.itemRefs, filteredData = _0.filteredData, fixedStyle = _0.fixedStyle, transitionHooks = _0.transitionHooks, handleBlur = _0.handleBlur, handleFocus = _0.handleFocus, handleClick = _0.handleClick, handleChange = _0.handleChange, handleKeyDown = _0.handleKeyDown, handleAutoComplete = _0.handleAutoComplete;
+    }), ref = _1.ref, value = _1.value, visible = _1.visible, activeId = _1.activeId, itemRefs = _1.itemRefs, filteredData = _1.filteredData, listboxRef = _1.listboxRef, fixedStyle = _1.fixedStyle, transitionHooks = _1.transitionHooks, handleBlur = _1.handleBlur, handleFocus = _1.handleFocus, handleClick = _1.handleClick, handleChange = _1.handleChange, handleKeyDown = _1.handleKeyDown, handleAutoComplete = _1.handleAutoComplete;
     return (React.createElement(Fragment, null,
         React.createElement(TextField, __assign({}, props, { "aria-autocomplete": autoComplete, "aria-controls": comboboxId, "aria-activedescendant": activeId, autoComplete: "off", value: value, 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" }) })),
         React.createElement(ScaleTransition, __assign({ portal: portal, portalInto: portalInto, portalIntoId: portalIntoId, vertical: true, visible: visible }, transitionHooks),
-            React.createElement(List, { id: suggestionsId, role: "listbox", style: fixedStyle, className: cn(listbox({ temporary: true }), listboxClassName) }, filteredData.map(function (datum, i) {
+            React.createElement(List, { id: suggestionsId, role: "listbox", ref: listboxRef, style: fixedStyle, className: cn(listbox({ temporary: true }), listboxClassName) }, filteredData.map(function (datum, i) {
                 var resultId = getResultId(suggestionsId, i);
@@ -100,4 +100,4 @@ var optionProps;
                 }
-                return (React.createElement(Option, __assign({ key: resultId, id: resultId }, optionProps, { selected: false, focused: resultId === activeId, ref: itemRefs[i], onClick: function () { return handleAutoComplete(i); } }),
-                    React.createElement(HighlightLabel, { enabled: isHighlight, value: value }, getResultLabel(datum, labelKey, value))));
+                return (React.createElement(Option, __assign({ key: resultId }, optionProps, { id: resultId, selected: false, focused: resultId === activeId, ref: itemRefs[i], onClick: function () { return handleAutoComplete(i); } }),
+                    React.createElement(HighlightedResult, { id: resultId + "-match", style: highlightStyle, className: highlightClassName, value: value, enabled: isHighlight }, getResultLabel(datum, labelKey, value))));
             })))));
@@ -117,2 +117,3 @@ }
             filterOptions: PropTypes.object,
+            filterOnNoValue: PropTypes.bool,
             labelKey: PropTypes.string,
@@ -123,3 +124,2 @@ valueKey: PropTypes.string,
             getResultValue: PropTypes.func,
-            getEmptyValueData: PropTypes.func,
             highlight: PropTypes.bool,
@@ -126,0 +126,0 @@ autoComplete: PropTypes.oneOf(["none", "inline", "list", "both"]),

es/useAutoComplete.js

@@ -14,3 +14,3 @@ var __assign = (this && this.__assign) || function () {
 import { useFixedPositioning, } from "@react-md/transition";
-import { applyRef, MovementPresets, useActiveDescendantMovement, useCloseOnOutsideClick, useToggle, } from "@react-md/utils";
+import { applyRef, MovementPresets, scrollIntoView, useActiveDescendantMovement, useCloseOnOutsideClick, useToggle, } from "@react-md/utils";
 import { getFilterFunction, } from "./utils";
@@ -23,3 +23,3 @@ /**
 export default function useAutoComplete(_a) {
-    var autoComplete = _a.autoComplete, suggestionsId = _a.suggestionsId, data = _a.data, filterFn = _a.filter, filterOptions = _a.filterOptions, valueKey = _a.valueKey, getResultId = _a.getResultId, getResultValue = _a.getResultValue, getEmptyValueData = _a.getEmptyValueData, onBlur = _a.onBlur, onFocus = _a.onFocus, onClick = _a.onClick, onChange = _a.onChange, onKeyDown = _a.onKeyDown, forwardedRef = _a.forwardedRef, onAutoComplete = _a.onAutoComplete, clearOnAutoComplete = _a.clearOnAutoComplete, anchor = _a.anchor, xMargin = _a.xMargin, yMargin = _a.yMargin, vwMargin = _a.vwMargin, vhMargin = _a.vhMargin, transformOrigin = _a.transformOrigin, listboxWidth = _a.listboxWidth, listboxStyle = _a.listboxStyle, preventOverlap = _a.preventOverlap, disableSwapping = _a.disableSwapping, disableVHBounds = _a.disableVHBounds, disableHideOnResize = _a.disableHideOnResize, disableHideOnScroll = _a.disableHideOnScroll;
+    var autoComplete = _a.autoComplete, suggestionsId = _a.suggestionsId, data = _a.data, filterFn = _a.filter, filterOptions = _a.filterOptions, filterOnNoValue = _a.filterOnNoValue, valueKey = _a.valueKey, getResultId = _a.getResultId, getResultValue = _a.getResultValue, onBlur = _a.onBlur, onFocus = _a.onFocus, onClick = _a.onClick, onChange = _a.onChange, onKeyDown = _a.onKeyDown, forwardedRef = _a.forwardedRef, onAutoComplete = _a.onAutoComplete, clearOnAutoComplete = _a.clearOnAutoComplete, anchor = _a.anchor, xMargin = _a.xMargin, yMargin = _a.yMargin, vwMargin = _a.vwMargin, vhMargin = _a.vhMargin, transformOrigin = _a.transformOrigin, listboxWidth = _a.listboxWidth, listboxStyle = _a.listboxStyle, preventOverlap = _a.preventOverlap, disableSwapping = _a.disableSwapping, disableVHBounds = _a.disableVHBounds, disableHideOnResize = _a.disableHideOnResize, disableHideOnScroll = _a.disableHideOnScroll;
     var isListAutocomplete = autoComplete === "list" || autoComplete === "both";
@@ -47,4 +47,4 @@ // const isInlineAutocomplete =
     var filteredData = useMemo(function () {
-        if (!value) {
-            return getEmptyValueData(data);
+        if (!value && !filterOnNoValue) {
+            return data;
         }
@@ -54,2 +54,3 @@ return filter(value, data, __assign(__assign({}, filterOptions), { valueKey: valueKey, getItemValue: getResultValue }));
         value,
+        filterOnNoValue,
         filter,
@@ -60,3 +61,2 @@ data,
         getResultValue,
-        getEmptyValueData,
     ]);
@@ -110,3 +110,16 @@ var _c = useToggle(false), visible = _c[0], show = _c[1], hide = _c[2];
     ]);
-    var _d = useActiveDescendantMovement(__assign(__assign({}, MovementPresets.VERTICAL_COMBOBOX), { getId: getResultId, items: filteredData, baseId: suggestionsId, onKeyDown: function (event) {
+    var listboxRef = useRef(null);
+    var _d = useActiveDescendantMovement(__assign(__assign({}, MovementPresets.VERTICAL_COMBOBOX), { getId: getResultId, items: filteredData, baseId: suggestionsId, onChange: function (_a, itemRefs) {
+            var index = _a.index;
+            // the default scroll into view behavior for aria-activedescendant
+            // movement won't work here since the "target" element will actually be
+            // the input element instead of the listbox. So need to implement the
+            // scroll into view behavior manually from the listbox instead.
+            var item = itemRefs[index] && itemRefs[index].current;
+            var listbox = listboxRef.current;
+            if (item && listbox && listbox.scrollHeight > listbox.offsetHeight) {
+                scrollIntoView(listbox, item);
+            }
+        },
+        onKeyDown: function (event) {
             if (onKeyDown) {
@@ -118,2 +131,3 @@ onKeyDown(event);
                     if (isListAutocomplete && event.altKey && !visible) {
+                        event.stopPropagation();
                         show();
@@ -125,2 +139,3 @@ setFocusedIndex(-1);
                     if (isListAutocomplete && event.altKey && visible) {
+                        event.stopPropagation();
                         hide();
@@ -130,2 +145,3 @@ }
                 case "Tab":
+                    event.stopPropagation();
                     hide();
@@ -135,2 +151,3 @@ break;
                     if (visible && focusedIndex >= 0) {
+                        event.stopPropagation();
                         handleAutoComplete(focusedIndex);
@@ -142,5 +159,7 @@ hide();
                     if (visible) {
+                        event.stopPropagation();
                         hide();
                     }
-                    else {
+                    else if (value) {
+                        event.stopPropagation();
                         setValue("");
@@ -223,2 +242,3 @@ }
         },
+        listboxRef: listboxRef,
         handleBlur: handleBlur,
@@ -225,0 +245,0 @@ handleFocus: handleFocus,

lib/AutoComplete.js

@@ -41,3 +41,3 @@ "use strict";
 var utils_1 = require("@react-md/utils");
-var HighlightLabel_1 = __importDefault(require("./HighlightLabel"));
+var HighlightedResult_1 = __importDefault(require("./HighlightedResult"));
 var useAutoComplete_1 = __importDefault(require("./useAutoComplete"));
@@ -60,3 +60,3 @@ var utils_2 = require("./utils");
 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, className = _a.className, onBlur = _a.onBlur, onFocus = _a.onFocus, onClick = _a.onClick, onKeyDown = _a.onKeyDown, onChange = _a.onChange, containerProps = _a.containerProps, _e = _a.portal, portal = _e === void 0 ? false : _e, portalInto = _a.portalInto, portalIntoId = _a.portalIntoId, listboxStyle = _a.listboxStyle, listboxClassName = _a.listboxClassName, onAutoComplete = _a.onAutoComplete, _f = _a.clearOnAutoComplete, clearOnAutoComplete = _f === void 0 ? false : _f, _g = _a.labelKey, labelKey = _g === void 0 ? "label" : _g, _h = _a.valueKey, valueKey = _h === void 0 ? "value" : _h, _j = _a.getResultId, getResultId = _j === void 0 ? utils_2.getResultId : _j, _k = _a.getResultLabel, getResultLabel = _k === void 0 ? utils_2.getResultLabel : _k, _l = _a.getResultValue, getResultValue = _l === void 0 ? utils_2.getResultValue : _l, _m = _a.getEmptyValueData, getEmptyValueData = _m === void 0 ? function (data) { return data; } : _m, _o = _a.highlight, highlight = _o === void 0 ? false : _o, _p = _a.anchor, anchor = _p === void 0 ? DEFAULT_ANCHOR : _p, listboxWidth = _a.listboxWidth, _q = _a.xMargin, xMargin = _q === void 0 ? 0 : _q, _r = _a.yMargin, yMargin = _r === void 0 ? 0 : _r, _s = _a.vwMargin, vwMargin = _s === void 0 ? 16 : _s, _t = _a.vhMargin, vhMargin = _t === void 0 ? 16 : _t, _u = _a.transformOrigin, transformOrigin = _u === void 0 ? true : _u, _v = _a.preventOverlap, preventOverlap = _v === void 0 ? true : _v, _w = _a.disableSwapping, disableSwapping = _w === void 0 ? false : _w, _x = _a.disableVHBounds, disableVHBounds = _x === void 0 ? false : _x, _y = _a.disableHideOnResize, disableHideOnResize = _y === void 0 ? false : _y, _z = _a.disableHideOnScroll, disableHideOnScroll = _z === void 0 ? true : _z, props = __rest(_a, ["autoComplete", "data", "filter", "filterOptions", "className", "onBlur", "onFocus", "onClick", "onKeyDown", "onChange", "containerProps", "portal", "portalInto", "portalIntoId", "listboxStyle", "listboxClassName", "onAutoComplete", "clearOnAutoComplete", "labelKey", "valueKey", "getResultId", "getResultLabel", "getResultValue", "getEmptyValueData", "highlight", "anchor", "listboxWidth", "xMargin", "yMargin", "vwMargin", "vhMargin", "transformOrigin", "preventOverlap", "disableSwapping", "disableVHBounds", "disableHideOnResize", "disableHideOnScroll"]);
+    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, highlightStyle = _a.highlightStyle, highlightClassName = _a.highlightClassName, _p = _a.anchor, anchor = _p === void 0 ? DEFAULT_ANCHOR : _p, _q = _a.listboxWidth, listboxWidth = _q === void 0 ? "equal" : _q, _r = _a.xMargin, xMargin = _r === void 0 ? 0 : _r, _s = _a.yMargin, yMargin = _s === void 0 ? 0 : _s, _t = _a.vwMargin, vwMargin = _t === void 0 ? 16 : _t, _u = _a.vhMargin, vhMargin = _u === void 0 ? 16 : _u, _v = _a.transformOrigin, transformOrigin = _v === void 0 ? true : _v, _w = _a.preventOverlap, preventOverlap = _w === void 0 ? true : _w, _x = _a.disableSwapping, disableSwapping = _x === void 0 ? false : _x, _y = _a.disableVHBounds, disableVHBounds = _y === void 0 ? false : _y, _z = _a.disableHideOnResize, disableHideOnResize = _z === void 0 ? false : _z, _0 = _a.disableHideOnScroll, disableHideOnScroll = _0 === void 0 ? true : _0, 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", "highlightStyle", "highlightClassName", "anchor", "listboxWidth", "xMargin", "yMargin", "vwMargin", "vhMargin", "transformOrigin", "preventOverlap", "disableSwapping", "disableVHBounds", "disableHideOnResize", "disableHideOnScroll"]);
     var id = props.id;
@@ -67,3 +67,3 @@ var comboboxId = id + "-combobox";
         (filter === "case-insensitive" || typeof filter === "function");
-    var _0 = useAutoComplete_1.default({
+    var _1 = useAutoComplete_1.default({
         autoComplete: autoComplete,
@@ -74,6 +74,6 @@ suggestionsId: suggestionsId,
         filterOptions: filterOptions,
+        filterOnNoValue: filterOnNoValue,
         valueKey: valueKey,
         getResultId: getResultId,
         getResultValue: getResultValue,
-        getEmptyValueData: getEmptyValueData,
         onBlur: onBlur,
@@ -100,7 +100,7 @@ onFocus: onFocus,
         disableHideOnScroll: disableHideOnScroll,
-    }), ref = _0.ref, value = _0.value, visible = _0.visible, activeId = _0.activeId, itemRefs = _0.itemRefs, filteredData = _0.filteredData, fixedStyle = _0.fixedStyle, transitionHooks = _0.transitionHooks, handleBlur = _0.handleBlur, handleFocus = _0.handleFocus, handleClick = _0.handleClick, handleChange = _0.handleChange, handleKeyDown = _0.handleKeyDown, handleAutoComplete = _0.handleAutoComplete;
+    }), ref = _1.ref, value = _1.value, visible = _1.visible, activeId = _1.activeId, itemRefs = _1.itemRefs, filteredData = _1.filteredData, listboxRef = _1.listboxRef, fixedStyle = _1.fixedStyle, transitionHooks = _1.transitionHooks, handleBlur = _1.handleBlur, handleFocus = _1.handleFocus, handleClick = _1.handleClick, handleChange = _1.handleChange, handleKeyDown = _1.handleKeyDown, handleAutoComplete = _1.handleAutoComplete;
     return (react_1.default.createElement(react_1.Fragment, null,
         react_1.default.createElement(form_1.TextField, __assign({}, props, { "aria-autocomplete": autoComplete, "aria-controls": comboboxId, "aria-activedescendant": activeId, autoComplete: "off", value: value, 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", style: fixedStyle, className: classnames_1.default(listbox({ temporary: true }), listboxClassName) }, filteredData.map(function (datum, i) {
+            react_1.default.createElement(list_1.List, { id: suggestionsId, role: "listbox", ref: listboxRef, style: fixedStyle, className: classnames_1.default(listbox({ temporary: true }), listboxClassName) }, filteredData.map(function (datum, i) {
                 var resultId = getResultId(suggestionsId, i);
@@ -111,4 +111,4 @@ var optionProps;
                 }
-                return (react_1.default.createElement(form_1.Option, __assign({ key: resultId, id: resultId }, optionProps, { selected: false, focused: resultId === activeId, ref: itemRefs[i], onClick: function () { return handleAutoComplete(i); } }),
-                    react_1.default.createElement(HighlightLabel_1.default, { enabled: isHighlight, value: value }, getResultLabel(datum, labelKey, value))));
+                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.default, { id: resultId + "-match", style: highlightStyle, className: highlightClassName, value: value, enabled: isHighlight }, getResultLabel(datum, labelKey, value))));
             })))));
@@ -128,2 +128,3 @@ }
             filterOptions: PropTypes.object,
+            filterOnNoValue: PropTypes.bool,
             labelKey: PropTypes.string,
@@ -134,3 +135,2 @@ valueKey: PropTypes.string,
             getResultValue: PropTypes.func,
-            getEmptyValueData: PropTypes.func,
             highlight: PropTypes.bool,
@@ -137,0 +137,0 @@ autoComplete: PropTypes.oneOf(["none", "inline", "list", "both"]),

lib/useAutoComplete.js

@@ -24,3 +24,3 @@ "use strict";
 function useAutoComplete(_a) {
-    var autoComplete = _a.autoComplete, suggestionsId = _a.suggestionsId, data = _a.data, filterFn = _a.filter, filterOptions = _a.filterOptions, valueKey = _a.valueKey, getResultId = _a.getResultId, getResultValue = _a.getResultValue, getEmptyValueData = _a.getEmptyValueData, onBlur = _a.onBlur, onFocus = _a.onFocus, onClick = _a.onClick, onChange = _a.onChange, onKeyDown = _a.onKeyDown, forwardedRef = _a.forwardedRef, onAutoComplete = _a.onAutoComplete, clearOnAutoComplete = _a.clearOnAutoComplete, anchor = _a.anchor, xMargin = _a.xMargin, yMargin = _a.yMargin, vwMargin = _a.vwMargin, vhMargin = _a.vhMargin, transformOrigin = _a.transformOrigin, listboxWidth = _a.listboxWidth, listboxStyle = _a.listboxStyle, preventOverlap = _a.preventOverlap, disableSwapping = _a.disableSwapping, disableVHBounds = _a.disableVHBounds, disableHideOnResize = _a.disableHideOnResize, disableHideOnScroll = _a.disableHideOnScroll;
+    var autoComplete = _a.autoComplete, suggestionsId = _a.suggestionsId, data = _a.data, filterFn = _a.filter, filterOptions = _a.filterOptions, filterOnNoValue = _a.filterOnNoValue, valueKey = _a.valueKey, getResultId = _a.getResultId, getResultValue = _a.getResultValue, onBlur = _a.onBlur, onFocus = _a.onFocus, onClick = _a.onClick, onChange = _a.onChange, onKeyDown = _a.onKeyDown, forwardedRef = _a.forwardedRef, onAutoComplete = _a.onAutoComplete, clearOnAutoComplete = _a.clearOnAutoComplete, anchor = _a.anchor, xMargin = _a.xMargin, yMargin = _a.yMargin, vwMargin = _a.vwMargin, vhMargin = _a.vhMargin, transformOrigin = _a.transformOrigin, listboxWidth = _a.listboxWidth, listboxStyle = _a.listboxStyle, preventOverlap = _a.preventOverlap, disableSwapping = _a.disableSwapping, disableVHBounds = _a.disableVHBounds, disableHideOnResize = _a.disableHideOnResize, disableHideOnScroll = _a.disableHideOnScroll;
     var isListAutocomplete = autoComplete === "list" || autoComplete === "both";
@@ -48,4 +48,4 @@ // const isInlineAutocomplete =
     var filteredData = react_1.useMemo(function () {
-        if (!value) {
-            return getEmptyValueData(data);
+        if (!value && !filterOnNoValue) {
+            return data;
         }
@@ -55,2 +55,3 @@ return filter(value, data, __assign(__assign({}, filterOptions), { valueKey: valueKey, getItemValue: getResultValue }));
         value,
+        filterOnNoValue,
         filter,
@@ -61,3 +62,2 @@ data,
         getResultValue,
-        getEmptyValueData,
     ]);
@@ -111,3 +111,16 @@ var _c = utils_1.useToggle(false), visible = _c[0], show = _c[1], hide = _c[2];
     ]);
-    var _d = utils_1.useActiveDescendantMovement(__assign(__assign({}, utils_1.MovementPresets.VERTICAL_COMBOBOX), { getId: getResultId, items: filteredData, baseId: suggestionsId, onKeyDown: function (event) {
+    var listboxRef = react_1.useRef(null);
+    var _d = utils_1.useActiveDescendantMovement(__assign(__assign({}, utils_1.MovementPresets.VERTICAL_COMBOBOX), { getId: getResultId, items: filteredData, baseId: suggestionsId, onChange: function (_a, itemRefs) {
+            var index = _a.index;
+            // the default scroll into view behavior for aria-activedescendant
+            // movement won't work here since the "target" element will actually be
+            // the input element instead of the listbox. So need to implement the
+            // scroll into view behavior manually from the listbox instead.
+            var item = itemRefs[index] && itemRefs[index].current;
+            var listbox = listboxRef.current;
+            if (item && listbox && listbox.scrollHeight > listbox.offsetHeight) {
+                utils_1.scrollIntoView(listbox, item);
+            }
+        },
+        onKeyDown: function (event) {
             if (onKeyDown) {
@@ -119,2 +132,3 @@ onKeyDown(event);
                     if (isListAutocomplete && event.altKey && !visible) {
+                        event.stopPropagation();
                         show();
@@ -126,2 +140,3 @@ setFocusedIndex(-1);
                     if (isListAutocomplete && event.altKey && visible) {
+                        event.stopPropagation();
                         hide();
@@ -131,2 +146,3 @@ }
                 case "Tab":
+                    event.stopPropagation();
                     hide();
@@ -136,2 +152,3 @@ break;
                     if (visible && focusedIndex >= 0) {
+                        event.stopPropagation();
                         handleAutoComplete(focusedIndex);
@@ -143,5 +160,7 @@ hide();
                     if (visible) {
+                        event.stopPropagation();
                         hide();
                     }
-                    else {
+                    else if (value) {
+                        event.stopPropagation();
                         setValue("");
@@ -224,2 +243,3 @@ }
         },
+        listboxRef: listboxRef,
         handleBlur: handleBlur,
@@ -226,0 +246,0 @@ handleFocus: handleFocus,

package.json

 {
   "name": "@react-md/autocomplete",
-  "version": "2.0.0-alpha.13",
+  "version": "2.0.0-alpha.14",
   "description": "",
@@ -41,10 +41,10 @@ "scripts": {
   "dependencies": {
-    "@react-md/form": "^2.0.0-alpha.13",
-    "@react-md/list": "^2.0.0-alpha.13",
+    "@react-md/form": "^2.0.0-alpha.14",
+    "@react-md/list": "^2.0.0-alpha.14",
     "@react-md/portal": "^2.0.0-alpha.13",
-    "@react-md/states": "^2.0.0-alpha.13",
-    "@react-md/theme": "^2.0.0-alpha.13",
-    "@react-md/transition": "^2.0.0-alpha.13",
-    "@react-md/typography": "^2.0.0-alpha.13",
-    "@react-md/utils": "^2.0.0-alpha.13",
+    "@react-md/states": "^2.0.0-alpha.14",
+    "@react-md/theme": "^2.0.0-alpha.14",
+    "@react-md/transition": "^2.0.0-alpha.14",
+    "@react-md/typography": "^2.0.0-alpha.14",
+    "@react-md/utils": "^2.0.0-alpha.14",
     "classnames": "^2.2.6"
@@ -61,3 +61,3 @@ },
   },
-  "gitHead": "47959dd8c691deae0310c7cd01b3c275699e6f8c"
+  "gitHead": "2c22440705bce3fb3cfc5876011e7b3df8be1c03"
 }

src/__tests__/utils.ts

 import { createElement } from "react";
 import { fuzzyFilter, caseInsensitiveFilter } from "@react-md/utils";
 
-import { AutoCompleteData } from "../types";
+import { FilterFunction } from "../types";
 import {
@@ -136,3 +136,3 @@ getResultId,
 
-    const custom = (value: string, data: AutoCompleteData[]) =>
+    const custom: FilterFunction = (value, data) =>
       data.filter(d => !!d && getResultValue(d, "thing").startsWith(value));
@@ -139,0 +139,0 @@ expect(getFilterFunction(custom)).toBe(custom);

src/types.ts

@@ -50,5 +50,5 @@ import { ListboxOptionProps } from "@react-md/form";
   query: string,
-  data: AutoCompleteData[],
+  data: readonly AutoCompleteData[],
   options: FilterFunctionOptions<O>
-) => AutoCompleteData[];
+) => readonly AutoCompleteData[];
 
@@ -72,3 +72,3 @@ /**
    */
-  value: string;
+  readonly value: string;
 
@@ -78,3 +78,3 @@ /**
    */
-  index: number;
+  readonly index: number;
 
@@ -84,3 +84,3 @@ /**
    */
-  result: AutoCompleteData;
+  readonly result: Readonly<AutoCompleteData>;
 
@@ -90,3 +90,3 @@ /**
    */
-  dataIndex: number;
+  readonly dataIndex: number;
 
@@ -96,3 +96,3 @@ /**
    */
-  filteredData: AutoCompleteData[];
+  readonly filteredData: readonly AutoCompleteData[];
 }
@@ -99,0 +99,0 @@

src/useAutoComplete.ts

@@ -12,2 +12,3 @@ import {
 } from "react";
+import { ListElement } from "@react-md/list";
 import {
@@ -22,2 +23,3 @@ OptionalFixedPositionOptions,
   PositionWidth,
+  scrollIntoView,
   useActiveDescendantMovement,
@@ -81,3 +83,3 @@ useCloseOnOutsideClick,
   forwardedRef?: Ref<HTMLInputElement>;
-  data: AutoCompleteData[];
+  data: readonly AutoCompleteData[];
   suggestionsId: string;
@@ -87,5 +89,5 @@ valueKey: string;
   getResultValue: typeof DEFAULT_GET_RESULT_VALUE;
-  getEmptyValueData: (data: AutoCompleteData[]) => AutoCompleteData[];
   filter: AutoCompleteFilterFunction;
   filterOptions: FilterFunctionOptions;
+  filterOnNoValue: boolean;
   onAutoComplete?: AutoCompleteHandler;
@@ -101,3 +103,4 @@ clearOnAutoComplete: boolean;
   itemRefs: MutableRefObject<HTMLLIElement | null>[];
-  filteredData: AutoCompleteData[];
+  filteredData: readonly AutoCompleteData[];
+  listboxRef: MutableRefObject<ListElement | null>;
   handleBlur: React.FocusEventHandler<HTMLInputElement>;
@@ -124,6 +127,6 @@ handleFocus: React.FocusEventHandler<HTMLInputElement>;
   filterOptions,
+  filterOnNoValue,
   valueKey,
   getResultId,
   getResultValue,
-  getEmptyValueData,
   onBlur,
@@ -185,4 +188,4 @@ onFocus,
   const filteredData = useMemo(() => {
-    if (!value) {
-      return getEmptyValueData(data);
+    if (!value && !filterOnNoValue) {
+      return data;
     }
@@ -197,2 +200,3 @@
     value,
+    filterOnNoValue,
     filter,
@@ -203,3 +207,2 @@ data,
     getResultValue,
-    getEmptyValueData,
   ]);
@@ -275,2 +278,3 @@
 
+  const listboxRef = useRef<ListElement | null>(null);
   const {
@@ -291,2 +295,13 @@ activeId,
     baseId: suggestionsId,
+    onChange({ index }, itemRefs) {
+      // the default scroll into view behavior for aria-activedescendant
+      // movement won't work here since the "target" element will actually be
+      // the input element instead of the listbox. So need to implement the
+      // scroll into view behavior manually from the listbox instead.
+      const item = itemRefs[index] && itemRefs[index].current;
+      const { current: listbox } = listboxRef;
+      if (item && listbox && listbox.scrollHeight > listbox.offsetHeight) {
+        scrollIntoView(listbox, item);
+      }
+    },
     onKeyDown(event) {
@@ -300,2 +315,3 @@ if (onKeyDown) {
           if (isListAutocomplete && event.altKey && !visible) {
+            event.stopPropagation();
             show();
@@ -307,2 +323,3 @@ setFocusedIndex(-1);
           if (isListAutocomplete && event.altKey && visible) {
+            event.stopPropagation();
             hide();
@@ -312,2 +329,3 @@ }
         case "Tab":
+          event.stopPropagation();
           hide();
@@ -317,2 +335,3 @@ break;
           if (visible && focusedIndex >= 0) {
+            event.stopPropagation();
             handleAutoComplete(focusedIndex);
@@ -324,4 +343,6 @@ hide();
           if (visible) {
+            event.stopPropagation();
             hide();
-          } else {
+          } else if (value) {
+            event.stopPropagation();
             setValue("");
@@ -421,2 +442,3 @@ }
     },
+    listboxRef,
     handleBlur,
@@ -423,0 +445,0 @@ handleFocus,

src/utils.ts

@@ -33,3 +33,3 @@ import { ReactNode } from "react";
 export function getResultLabel(
-  datum: AutoCompleteData,
+  datum: Readonly<AutoCompleteData>,
   labelKey: string,
@@ -55,3 +55,3 @@ _query: string
 export function getResultValue(
-  datum: AutoCompleteData,
+  datum: Readonly<AutoCompleteData>,
   valueKey: string
@@ -138,4 +138,6 @@ ): string {
  */
-export function isResultOf<T extends {}>(datum: AutoCompleteData): datum is T {
+export function isResultOf<T extends {}>(
+  datum: Readonly<AutoCompleteData>
+): datum is T {
   return !!datum && typeof datum === "object";
 }

types/AutoComplete.d.ts

@@ -1,2 +0,2 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import { TextFieldProps } from "@react-md/form";
@@ -27,3 +27,3 @@ import { RenderConditionalPortalProps } from "@react-md/portal";
      */
-    data: AutoCompleteData[];
+    data: readonly AutoCompleteData[];
     /**
@@ -40,2 +40,9 @@ * @see AutoCompleteFilterFunction
     /**
+     * Boolean if the filter function should still be called when there is no
+     * value in the text field. This normally defaults to `false` so that the
+     * `data` is just returned, but it can be useful with a custom filter function
+     * that returns different data while there is no value.
+     */
+    filterOnNoValue?: boolean;
+    /**
      * An optional className to also apply to the listbox element showing all the
@@ -46,2 +53,19 @@ * matches.
     /**
+     * Boolean if the result list labels should be updated so that each matching
+     * letter is bolded. This only works when the data list is a list of strings,
+     * or the `label` is a string and when the letters appear in order. This will
+     * always be `false` if the `filter` prop is set to `"fuzzy"`.
+     */
+    highlight?: boolean;
+    /**
+     * An optional style to apply to the `<span>` surrounding the matched text
+     * when the `highlight` prop is enabled.
+     */
+    highlightStyle?: CSSProperties;
+    /**
+     * An optional className to apply to the `<span>` surrounding the matched text
+     * when the `highlight` prop is enabled.
+     */
+    highlightClassName?: string;
+    /**
      * The key to use to extract a label from a result when the provided data list
@@ -76,22 +100,7 @@ * is a list of objects.
     /**
-     * An optional function that will be called whenever the value of the
-     * autocomplete is the empty string. This is useful if you don't want the
-     * data list to be shown initially or a custom list of data.
-     *
-     * This defaults to just returning the `data`.
-     */
-    getEmptyValueData?: (data: AutoCompleteData[]) => AutoCompleteData[];
-    /**
      * @see AutoCompleteHandler
      */
     onAutoComplete?: AutoCompleteHandler;
-    /**
-     * Boolean if the result list labels should be updated so that each matching
-     * letter is bolded. This only works when the data list is a list of strings,
-     * or the `label` is a string and when the letters appear in order. This will
-     * always be `false` if the `filter` prop is set to `"fuzzy"`.
-     */
-    highlight?: boolean;
 }
 declare const ForwardedAutoComplete: React.ForwardRefExoticComponent<AutoCompleteProps & React.RefAttributes<HTMLInputElement>>;
 export default ForwardedAutoComplete;

types/types.d.ts

@@ -42,3 +42,3 @@ import { ListboxOptionProps } from "@react-md/form";
  */
-export declare type FilterFunction<O extends {} = {}> = (query: string, data: AutoCompleteData[], options: FilterFunctionOptions<O>) => AutoCompleteData[];
+export declare type FilterFunction<O extends {} = {}> = (query: string, data: readonly AutoCompleteData[], options: FilterFunctionOptions<O>) => readonly AutoCompleteData[];
 /**
@@ -58,19 +58,19 @@ * Either a preconfigured/provided filter function of the autocomplete or a
      */
-    value: string;
+    readonly value: string;
     /**
      * The index of the result in the **filtered data list**.
      */
-    index: number;
+    readonly index: number;
     /**
      * The current autocomplete result.
      */
-    result: AutoCompleteData;
+    readonly result: Readonly<AutoCompleteData>;
     /**
      * The index of the result in the **original data list**.
      */
-    dataIndex: number;
+    readonly dataIndex: number;
     /**
      * The list of data that has been filtered based on the current value.
      */
-    filteredData: AutoCompleteData[];
+    readonly filteredData: readonly AutoCompleteData[];
 }
@@ -77,0 +77,0 @@ /**

types/useAutoComplete.d.ts

 import { CSSProperties, HTMLAttributes, MutableRefObject, Ref } from "react";
+import { ListElement } from "@react-md/list";
 import { OptionalFixedPositionOptions, TransitionHooks } from "@react-md/transition";
@@ -37,3 +38,3 @@ import { PositionWidth } from "@react-md/utils";
     forwardedRef?: Ref<HTMLInputElement>;
-    data: AutoCompleteData[];
+    data: readonly AutoCompleteData[];
     suggestionsId: string;
@@ -43,5 +44,5 @@ valueKey: string;
     getResultValue: typeof DEFAULT_GET_RESULT_VALUE;
-    getEmptyValueData: (data: AutoCompleteData[]) => AutoCompleteData[];
     filter: AutoCompleteFilterFunction;
     filterOptions: FilterFunctionOptions;
+    filterOnNoValue: boolean;
     onAutoComplete?: AutoCompleteHandler;
@@ -56,3 +57,4 @@ clearOnAutoComplete: boolean;
     itemRefs: MutableRefObject<HTMLLIElement | null>[];
-    filteredData: AutoCompleteData[];
+    filteredData: readonly AutoCompleteData[];
+    listboxRef: MutableRefObject<ListElement | null>;
     handleBlur: React.FocusEventHandler<HTMLInputElement>;
@@ -72,3 +74,3 @@ handleFocus: React.FocusEventHandler<HTMLInputElement>;
  */
-export default function useAutoComplete({ autoComplete, suggestionsId, data, filter: filterFn, filterOptions, valueKey, getResultId, getResultValue, getEmptyValueData, onBlur, onFocus, onClick, onChange, onKeyDown, forwardedRef, onAutoComplete, clearOnAutoComplete, anchor, xMargin, yMargin, vwMargin, vhMargin, transformOrigin, listboxWidth, listboxStyle, preventOverlap, disableSwapping, disableVHBounds, disableHideOnResize, disableHideOnScroll, }: AutoCompleteOptions): ReturnValue;
+export default function useAutoComplete({ autoComplete, suggestionsId, data, filter: filterFn, filterOptions, filterOnNoValue, valueKey, getResultId, getResultValue, onBlur, onFocus, onClick, onChange, onKeyDown, forwardedRef, onAutoComplete, clearOnAutoComplete, anchor, xMargin, yMargin, vwMargin, vhMargin, transformOrigin, listboxWidth, listboxStyle, preventOverlap, disableSwapping, disableVHBounds, disableHideOnResize, disableHideOnScroll, }: AutoCompleteOptions): ReturnValue;
 export {};

types/utils.d.ts

@@ -22,3 +22,3 @@ import { ReactNode } from "react";
  */
-export declare function getResultLabel(datum: AutoCompleteData, labelKey: string, _query: string): ReactNode;
+export declare function getResultLabel(datum: Readonly<AutoCompleteData>, labelKey: string, _query: string): ReactNode;
 /**
@@ -32,3 +32,3 @@ * Gets a value string from each result that can be searched.
  */
-export declare function getResultValue(datum: AutoCompleteData, valueKey: string): string;
+export declare function getResultValue(datum: Readonly<AutoCompleteData>, valueKey: string): string;
 /**
@@ -72,2 +72,2 @@ * This is used to disable filtering and just return the data list immediately.
  */
-export declare function isResultOf<T extends {}>(datum: AutoCompleteData): datum is T;
+export declare function isResultOf<T extends {}>(datum: Readonly<AutoCompleteData>): datum is T;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

541485

increased by2.42%

Number of package files

45

increased by4.65%

Lines of code

2774

increased by9.56%

Dependency changes

• Updated@react-md/form@^2.0.0-alpha.14

• Updated@react-md/list@^2.0.0-alpha.14

• Updated@react-md/states@^2.0.0-alpha.14

• Updated@react-md/theme@^2.0.0-alpha.14

• Updated@react-md/transition@^2.0.0-alpha.14

• Updated@react-md/typography@^2.0.0-alpha.14

• Updated@react-md/utils@^2.0.0-alpha.14