Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@react-md/autocomplete
Advanced tools
@react-md/autocomplete - npm Package Compare versions
Comparing version 2.0.0-alpha.12 to 2.0.0-alpha.13
@@ -34,2 +34,10 @@ var __assign = (this && this.__assign) || function () { | ||
| var listbox = bem("rmd-listbox"); | ||
| var DEFAULT_FILTER_OPTIONS = { | ||
| trim: true, | ||
| ignoreWhitespace: true, | ||
| }; | ||
| var DEFAULT_ANCHOR = { | ||
| x: "center", | ||
| y: "below", | ||
| }; | ||
| /** | ||
@@ -39,4 +47,4 @@ * An AutoComplete is an accessible combobox widget that allows for real-time | ||
| */ | ||
| var AutoComplete = function (providedProps) { | ||
| var _a = providedProps, autoComplete = _a.autoComplete, data = _a.data, filter = _a.filter, filterOptions = _a.filterOptions, className = _a.className, onBlur = _a.onBlur, onFocus = _a.onFocus, onClick = _a.onClick, onKeyDown = _a.onKeyDown, onChange = _a.onChange, containerProps = _a.containerProps, portal = _a.portal, portalInto = _a.portalInto, portalIntoId = _a.portalIntoId, listboxStyle = _a.listboxStyle, listboxClassName = _a.listboxClassName, forwardedRef = _a.forwardedRef, onAutoComplete = _a.onAutoComplete, clearOnAutoComplete = _a.clearOnAutoComplete, labelKey = _a.labelKey, valueKey = _a.valueKey, getResultId = _a.getResultId, getResultLabel = _a.getResultLabel, getResultValue = _a.getResultValue, getEmptyValueData = _a.getEmptyValueData, highlight = _a.highlight, anchor = _a.anchor, listboxWidth = _a.listboxWidth, xMargin = _a.xMargin, yMargin = _a.yMargin, vwMargin = _a.vwMargin, vhMargin = _a.vhMargin, transformOrigin = _a.transformOrigin, preventOverlap = _a.preventOverlap, disableSwapping = _a.disableSwapping, disableVHBounds = _a.disableVHBounds, disableHideOnResize = _a.disableHideOnResize, disableHideOnScroll = _a.disableHideOnScroll, props = __rest(_a, ["autoComplete", "data", "filter", "filterOptions", "className", "onBlur", "onFocus", "onClick", "onKeyDown", "onChange", "containerProps", "portal", "portalInto", "portalIntoId", "listboxStyle", "listboxClassName", "forwardedRef", "onAutoComplete", "clearOnAutoComplete", "labelKey", "valueKey", "getResultId", "getResultLabel", "getResultValue", "getEmptyValueData", "highlight", "anchor", "listboxWidth", "xMargin", "yMargin", "vwMargin", "vhMargin", "transformOrigin", "preventOverlap", "disableSwapping", "disableVHBounds", "disableHideOnResize", "disableHideOnScroll"]); | ||
| 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 id = props.id; | ||
@@ -47,3 +55,3 @@ var comboboxId = id + "-combobox"; | ||
| (filter === "case-insensitive" || typeof filter === "function"); | ||
| var _b = useAutoComplete({ | ||
| var _0 = useAutoComplete({ | ||
| autoComplete: autoComplete, | ||
@@ -79,3 +87,3 @@ suggestionsId: suggestionsId, | ||
| disableHideOnScroll: disableHideOnScroll, | ||
| }), ref = _b.ref, value = _b.value, visible = _b.visible, activeId = _b.activeId, itemRefs = _b.itemRefs, filteredData = _b.filteredData, fixedStyle = _b.fixedStyle, transitionHooks = _b.transitionHooks, handleBlur = _b.handleBlur, handleFocus = _b.handleFocus, handleClick = _b.handleClick, handleChange = _b.handleChange, handleKeyDown = _b.handleKeyDown, handleAutoComplete = _b.handleAutoComplete; | ||
| }), 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; | ||
| return (React.createElement(Fragment, null, | ||
@@ -93,45 +101,8 @@ 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" }) })), | ||
| }))))); | ||
| }; | ||
| var defaultProps = { | ||
| portal: false, | ||
| filter: "case-insensitive", | ||
| filterOptions: { | ||
| trim: true, | ||
| ignoreWhitespace: true, | ||
| }, | ||
| autoComplete: "list", | ||
| clearOnAutoComplete: false, | ||
| labelKey: "label", | ||
| valueKey: "value", | ||
| getResultId: DEFAULT_GET_RESULT_ID, | ||
| getResultLabel: DEFAULT_GET_RESULT_LABEL, | ||
| getResultValue: DEFAULT_GET_RESULT_VALUE, | ||
| getEmptyValueData: function (data) { return data; }, | ||
| highlight: false, | ||
| anchor: { | ||
| x: "center", | ||
| y: "below", | ||
| }, | ||
| xMargin: 0, | ||
| yMargin: 0, | ||
| vwMargin: 16, | ||
| vhMargin: 16, | ||
| transformOrigin: true, | ||
| listboxWidth: "equal", | ||
| preventOverlap: true, | ||
| disableSwapping: false, | ||
| disableVHBounds: false, | ||
| disableHideOnResize: false, | ||
| disableHideOnScroll: true, | ||
| }; | ||
| AutoComplete.defaultProps = defaultProps; | ||
| } | ||
| var ForwardedAutoComplete = forwardRef(AutoComplete); | ||
| if (process.env.NODE_ENV !== "production") { | ||
| AutoComplete.displayName = "AutoComplete"; | ||
| var PropTypes = void 0; | ||
| try { | ||
| PropTypes = require("prop-types"); | ||
| } | ||
| catch (e) { } | ||
| if (PropTypes) { | ||
| AutoComplete.propTypes = { | ||
| var PropTypes = require("prop-types"); | ||
| ForwardedAutoComplete.propTypes = { | ||
| id: PropTypes.string.isRequired, | ||
@@ -202,4 +173,5 @@ data: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])).isRequired, | ||
| } | ||
| catch (e) { } | ||
| } | ||
| export default forwardRef(function (props, ref) { return (React.createElement(AutoComplete, __assign({}, props, { forwardedRef: ref }))); }); | ||
| export default ForwardedAutoComplete; | ||
| //# sourceMappingURL=AutoComplete.js.map |
@@ -27,5 +27,5 @@ var __assign = (this && this.__assign) || function () { | ||
| var _b = useState(""), value = _b[0], setValue = _b[1]; | ||
| // this is really just a hacky way to make sure that once a value has been autocompleted, | ||
| // the menu doesn't immediately re-appear due to the hook below for showing when the value/ | ||
| // filtered data list change | ||
| // this is really just a hacky way to make sure that once a value has been | ||
| // autocompleted, the menu doesn't immediately re-appear due to the hook below | ||
| // for showing when the value/ filtered data list change | ||
| var autocompleted = useRef(false); | ||
@@ -177,4 +177,4 @@ var handleChange = useCallback(function (event) { | ||
| } | ||
| // this effect is just for toggling the visibility states as needed if the value or | ||
| // filter data list changes | ||
| // this effect is just for toggling the visibility states as needed if the | ||
| // value or filter data list changes | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
@@ -188,3 +188,4 @@ }, [filteredData, value]); | ||
| setFocusedIndex(-1); | ||
| // only want to trigger on data changes and setFocusedIndex shouldn't change anyways | ||
| // only want to trigger on data changes and setFocusedIndex shouldn't change | ||
| // anyways | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
@@ -196,4 +197,4 @@ }, [filteredData]); | ||
| } | ||
| // only want to trigger on visible changes -- and setFocusedIndex shouldn't really | ||
| // change anyways | ||
| // only want to trigger on visible changes -- and setFocusedIndex shouldn't | ||
| // really change anyways | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
@@ -200,0 +201,0 @@ }, [visible]); |
@@ -13,9 +13,10 @@ import { caseInsensitiveFilter, fuzzyFilter } from "@react-md/utils"; | ||
| /** | ||
| * Gets a renderable label for each result in the autocomplete's listbox. | ||
| * This will be applied as the `children` for the `Option` element. | ||
| * Gets a renderable label for each result in the autocomplete's listbox. This | ||
| * will be applied as the `children` for the `Option` element. | ||
| * | ||
| * @param datum The current result datum to get a label for | ||
| * @param labelKey The key to extract a label from if the datum is an object | ||
| * @param query The current search query. This is useful if you want to implement | ||
| * text "highlighting" (bold) of all the letters that match in the item. | ||
| * @param query The current search query. This is useful if you want to | ||
| * implement text "highlighting" (bold) of all the letters that match in the | ||
| * item. | ||
| * @return a renderable node to display | ||
@@ -34,4 +35,4 @@ */ | ||
| * @param datum The current result datum that should have a string extracted | ||
| * @param valueKey The key to use to extract a string value from if the datum | ||
| * is an object | ||
| * @param valueKey The key to use to extract a string value from if the datum is | ||
| * an object | ||
| * @return a searchable string. | ||
@@ -52,4 +53,4 @@ */ | ||
| /** | ||
| * This is used to disable filtering and just return the data list immediately. Useful | ||
| * when the filtering is done somewhere else like a server/API | ||
| * This is used to disable filtering and just return the data list immediately. | ||
| * Useful when the filtering is done somewhere else like a server/API | ||
| * @private | ||
@@ -59,3 +60,4 @@ */ | ||
| /** | ||
| * Gets the filter function to use within the Autocomplete based on the provided filter prop | ||
| * Gets the filter function to use within the Autocomplete based on the provided | ||
| * filter prop | ||
| * | ||
@@ -83,5 +85,6 @@ * @private | ||
| /** | ||
| * This is an extremely simple type guard that is useful when using the `onAutoComplete` handler since | ||
| * I'm terrible at typescript types. This will ensure that if the result is an object, it will match | ||
| * the provided data type of your data list. | ||
| * This is an extremely simple type guard that is useful when using the | ||
| * `onAutoComplete` handler since I'm terrible at typescript types. This will | ||
| * ensure that if the result is an object, it will match the provided data type | ||
| * of your data list. | ||
| * | ||
@@ -88,0 +91,0 @@ * Example: |
@@ -46,2 +46,10 @@ "use strict"; | ||
| var listbox = utils_1.bem("rmd-listbox"); | ||
| var DEFAULT_FILTER_OPTIONS = { | ||
| trim: true, | ||
| ignoreWhitespace: true, | ||
| }; | ||
| var DEFAULT_ANCHOR = { | ||
| x: "center", | ||
| y: "below", | ||
| }; | ||
| /** | ||
@@ -51,4 +59,4 @@ * An AutoComplete is an accessible combobox widget that allows for real-time | ||
| */ | ||
| var AutoComplete = function (providedProps) { | ||
| var _a = providedProps, autoComplete = _a.autoComplete, data = _a.data, filter = _a.filter, filterOptions = _a.filterOptions, className = _a.className, onBlur = _a.onBlur, onFocus = _a.onFocus, onClick = _a.onClick, onKeyDown = _a.onKeyDown, onChange = _a.onChange, containerProps = _a.containerProps, portal = _a.portal, portalInto = _a.portalInto, portalIntoId = _a.portalIntoId, listboxStyle = _a.listboxStyle, listboxClassName = _a.listboxClassName, forwardedRef = _a.forwardedRef, onAutoComplete = _a.onAutoComplete, clearOnAutoComplete = _a.clearOnAutoComplete, labelKey = _a.labelKey, valueKey = _a.valueKey, getResultId = _a.getResultId, getResultLabel = _a.getResultLabel, getResultValue = _a.getResultValue, getEmptyValueData = _a.getEmptyValueData, highlight = _a.highlight, anchor = _a.anchor, listboxWidth = _a.listboxWidth, xMargin = _a.xMargin, yMargin = _a.yMargin, vwMargin = _a.vwMargin, vhMargin = _a.vhMargin, transformOrigin = _a.transformOrigin, preventOverlap = _a.preventOverlap, disableSwapping = _a.disableSwapping, disableVHBounds = _a.disableVHBounds, disableHideOnResize = _a.disableHideOnResize, disableHideOnScroll = _a.disableHideOnScroll, props = __rest(_a, ["autoComplete", "data", "filter", "filterOptions", "className", "onBlur", "onFocus", "onClick", "onKeyDown", "onChange", "containerProps", "portal", "portalInto", "portalIntoId", "listboxStyle", "listboxClassName", "forwardedRef", "onAutoComplete", "clearOnAutoComplete", "labelKey", "valueKey", "getResultId", "getResultLabel", "getResultValue", "getEmptyValueData", "highlight", "anchor", "listboxWidth", "xMargin", "yMargin", "vwMargin", "vhMargin", "transformOrigin", "preventOverlap", "disableSwapping", "disableVHBounds", "disableHideOnResize", "disableHideOnScroll"]); | ||
| 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 id = props.id; | ||
@@ -59,3 +67,3 @@ var comboboxId = id + "-combobox"; | ||
| (filter === "case-insensitive" || typeof filter === "function"); | ||
| var _b = useAutoComplete_1.default({ | ||
| var _0 = useAutoComplete_1.default({ | ||
| autoComplete: autoComplete, | ||
@@ -91,3 +99,3 @@ suggestionsId: suggestionsId, | ||
| disableHideOnScroll: disableHideOnScroll, | ||
| }), ref = _b.ref, value = _b.value, visible = _b.visible, activeId = _b.activeId, itemRefs = _b.itemRefs, filteredData = _b.filteredData, fixedStyle = _b.fixedStyle, transitionHooks = _b.transitionHooks, handleBlur = _b.handleBlur, handleFocus = _b.handleFocus, handleClick = _b.handleClick, handleChange = _b.handleChange, handleKeyDown = _b.handleKeyDown, handleAutoComplete = _b.handleAutoComplete; | ||
| }), 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; | ||
| return (react_1.default.createElement(react_1.Fragment, null, | ||
@@ -105,45 +113,8 @@ 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" }) })), | ||
| }))))); | ||
| }; | ||
| var defaultProps = { | ||
| portal: false, | ||
| filter: "case-insensitive", | ||
| filterOptions: { | ||
| trim: true, | ||
| ignoreWhitespace: true, | ||
| }, | ||
| autoComplete: "list", | ||
| clearOnAutoComplete: false, | ||
| labelKey: "label", | ||
| valueKey: "value", | ||
| getResultId: utils_2.getResultId, | ||
| getResultLabel: utils_2.getResultLabel, | ||
| getResultValue: utils_2.getResultValue, | ||
| getEmptyValueData: function (data) { return data; }, | ||
| highlight: false, | ||
| anchor: { | ||
| x: "center", | ||
| y: "below", | ||
| }, | ||
| xMargin: 0, | ||
| yMargin: 0, | ||
| vwMargin: 16, | ||
| vhMargin: 16, | ||
| transformOrigin: true, | ||
| listboxWidth: "equal", | ||
| preventOverlap: true, | ||
| disableSwapping: false, | ||
| disableVHBounds: false, | ||
| disableHideOnResize: false, | ||
| disableHideOnScroll: true, | ||
| }; | ||
| AutoComplete.defaultProps = defaultProps; | ||
| } | ||
| var ForwardedAutoComplete = react_1.forwardRef(AutoComplete); | ||
| if (process.env.NODE_ENV !== "production") { | ||
| AutoComplete.displayName = "AutoComplete"; | ||
| var PropTypes = void 0; | ||
| try { | ||
| PropTypes = require("prop-types"); | ||
| } | ||
| catch (e) { } | ||
| if (PropTypes) { | ||
| AutoComplete.propTypes = { | ||
| var PropTypes = require("prop-types"); | ||
| ForwardedAutoComplete.propTypes = { | ||
| id: PropTypes.string.isRequired, | ||
@@ -214,4 +185,5 @@ data: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])).isRequired, | ||
| } | ||
| catch (e) { } | ||
| } | ||
| exports.default = react_1.forwardRef(function (props, ref) { return (react_1.default.createElement(AutoComplete, __assign({}, props, { forwardedRef: ref }))); }); | ||
| exports.default = ForwardedAutoComplete; | ||
| //# sourceMappingURL=AutoComplete.js.map |
@@ -29,5 +29,5 @@ "use strict"; | ||
| var _b = react_1.useState(""), value = _b[0], setValue = _b[1]; | ||
| // this is really just a hacky way to make sure that once a value has been autocompleted, | ||
| // the menu doesn't immediately re-appear due to the hook below for showing when the value/ | ||
| // filtered data list change | ||
| // this is really just a hacky way to make sure that once a value has been | ||
| // autocompleted, the menu doesn't immediately re-appear due to the hook below | ||
| // for showing when the value/ filtered data list change | ||
| var autocompleted = react_1.useRef(false); | ||
@@ -179,4 +179,4 @@ var handleChange = react_1.useCallback(function (event) { | ||
| } | ||
| // this effect is just for toggling the visibility states as needed if the value or | ||
| // filter data list changes | ||
| // this effect is just for toggling the visibility states as needed if the | ||
| // value or filter data list changes | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
@@ -190,3 +190,4 @@ }, [filteredData, value]); | ||
| setFocusedIndex(-1); | ||
| // only want to trigger on data changes and setFocusedIndex shouldn't change anyways | ||
| // only want to trigger on data changes and setFocusedIndex shouldn't change | ||
| // anyways | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
@@ -198,4 +199,4 @@ }, [filteredData]); | ||
| } | ||
| // only want to trigger on visible changes -- and setFocusedIndex shouldn't really | ||
| // change anyways | ||
| // only want to trigger on visible changes -- and setFocusedIndex shouldn't | ||
| // really change anyways | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
@@ -202,0 +203,0 @@ }, [visible]); |
@@ -16,9 +16,10 @@ "use strict"; | ||
| /** | ||
| * Gets a renderable label for each result in the autocomplete's listbox. | ||
| * This will be applied as the `children` for the `Option` element. | ||
| * Gets a renderable label for each result in the autocomplete's listbox. This | ||
| * will be applied as the `children` for the `Option` element. | ||
| * | ||
| * @param datum The current result datum to get a label for | ||
| * @param labelKey The key to extract a label from if the datum is an object | ||
| * @param query The current search query. This is useful if you want to implement | ||
| * text "highlighting" (bold) of all the letters that match in the item. | ||
| * @param query The current search query. This is useful if you want to | ||
| * implement text "highlighting" (bold) of all the letters that match in the | ||
| * item. | ||
| * @return a renderable node to display | ||
@@ -38,4 +39,4 @@ */ | ||
| * @param datum The current result datum that should have a string extracted | ||
| * @param valueKey The key to use to extract a string value from if the datum | ||
| * is an object | ||
| * @param valueKey The key to use to extract a string value from if the datum is | ||
| * an object | ||
| * @return a searchable string. | ||
@@ -57,4 +58,4 @@ */ | ||
| /** | ||
| * This is used to disable filtering and just return the data list immediately. Useful | ||
| * when the filtering is done somewhere else like a server/API | ||
| * This is used to disable filtering and just return the data list immediately. | ||
| * Useful when the filtering is done somewhere else like a server/API | ||
| * @private | ||
@@ -64,3 +65,4 @@ */ | ||
| /** | ||
| * Gets the filter function to use within the Autocomplete based on the provided filter prop | ||
| * Gets the filter function to use within the Autocomplete based on the provided | ||
| * filter prop | ||
| * | ||
@@ -89,5 +91,6 @@ * @private | ||
| /** | ||
| * This is an extremely simple type guard that is useful when using the `onAutoComplete` handler since | ||
| * I'm terrible at typescript types. This will ensure that if the result is an object, it will match | ||
| * the provided data type of your data list. | ||
| * This is an extremely simple type guard that is useful when using the | ||
| * `onAutoComplete` handler since I'm terrible at typescript types. This will | ||
| * ensure that if the result is an object, it will match the provided data type | ||
| * of your data list. | ||
| * | ||
@@ -94,0 +97,0 @@ * Example: |
| { | ||
| "name": "@react-md/autocomplete", | ||
| "version": "2.0.0-alpha.12", | ||
| "version": "2.0.0-alpha.13", | ||
| "description": "", | ||
@@ -41,10 +41,10 @@ "scripts": { | ||
| "dependencies": { | ||
| "@react-md/form": "^2.0.0-alpha.12", | ||
| "@react-md/list": "^2.0.0-alpha.12", | ||
| "@react-md/portal": "^2.0.0-alpha.12", | ||
| "@react-md/states": "^2.0.0-alpha.12", | ||
| "@react-md/theme": "^2.0.0-alpha.12", | ||
| "@react-md/transition": "^2.0.0-alpha.12", | ||
| "@react-md/typography": "^2.0.0-alpha.12", | ||
| "@react-md/utils": "^2.0.0-alpha.12", | ||
| "@react-md/form": "^2.0.0-alpha.13", | ||
| "@react-md/list": "^2.0.0-alpha.13", | ||
| "@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", | ||
| "classnames": "^2.2.6" | ||
@@ -61,3 +61,3 @@ }, | ||
| }, | ||
| "gitHead": "b31afe8dc076cf0647ac3e99dc0b61f8f4b7b0e2" | ||
| "gitHead": "47959dd8c691deae0310c7cd01b3c275699e6f8c" | ||
| } |
@@ -7,9 +7,10 @@ import { ListboxOptionProps } from "@react-md/form"; | ||
| * | ||
| * - "none" - The autocomplete will not filter any results and will just show a dropdown list of | ||
| * suggestions instead. | ||
| * - "inline" - The first match will appear inline as the user types by using a selection range to | ||
| * highlight the remaining match characters. | ||
| * - "list" - The autocomplete will filter the results and show a dropdown list of matches based | ||
| * on the current text field's value. | ||
| * - "both" - A combination of both the `"inline"` and `"list"` autocomplete behaviors | ||
| * - "none" - The autocomplete will not filter any results and will just show a | ||
| * dropdown list of suggestions instead. | ||
| * - "inline" - The first match will appear inline as the user types by using a | ||
| * selection range to highlight the remaining match characters. | ||
| * - "list" - The autocomplete will filter the results and show a dropdown list | ||
| * of matches based on the current text field's value. | ||
| * - "both" - A combination of both the `"inline"` and `"list"` autocomplete | ||
| * behaviors | ||
| * | ||
@@ -21,5 +22,5 @@ * Note: "inline" versions still aren't actually supported... | ||
| /** | ||
| * The supported data that can be filtered and autocompleted. When the data is an object, the searchable | ||
| * value and display label can be extracted with the provided getter functions and `labelKey`/`valueKey` | ||
| * props. | ||
| * The supported data that can be filtered and autocompleted. When the data is | ||
| * an object, the searchable value and display label can be extracted with the | ||
| * provided getter functions and `labelKey`/`valueKey` props. | ||
| */ | ||
@@ -29,5 +30,6 @@ export type AutoCompleteData = string | ListboxOptionProps; | ||
| /** | ||
| * The autocomplete supports a fuzzy filter and a case insensitive filter function out of the box. If | ||
| * you don't want any filtering to happen because the filtering is done through an API call or somewhere | ||
| * else, you can use the `"none"` value instead. | ||
| * The autocomplete supports a fuzzy filter and a case insensitive filter | ||
| * function out of the box. If you don't want any filtering to happen because | ||
| * the filtering is done through an API call or somewhere else, you can use the | ||
| * `"none"` value instead. | ||
| */ | ||
@@ -43,5 +45,7 @@ export type PreconfiguredFilterFunction = "fuzzy" | "case-insensitive" | "none"; | ||
| /** | ||
| * The autocomplete works with a filter function that takes in the current search query, the list of data, | ||
| * and search options to return a new filtered list. If the default fuzzy filter and case insensitive filters | ||
| * don't match your usecases, you can also provide your own function that matches this api instead. | ||
| * The autocomplete works with a filter function that takes in the current | ||
| * search query, the list of data, and search options to return a new filtered | ||
| * list. If the default fuzzy filter and case insensitive filters don't match | ||
| * your use cases, you can also provide your own function that matches this api | ||
| * instead. | ||
| */ | ||
@@ -55,3 +59,4 @@ export type FilterFunction<O extends {} = {}> = ( | ||
| /** | ||
| * Either a preconfigured/provided filter function of the autocomplete or a custom function to use. | ||
| * Either a preconfigured/provided filter function of the autocomplete or a | ||
| * custom function to use. | ||
| */ | ||
@@ -67,5 +72,5 @@ export type AutoCompleteFilterFunction<O extends {} = {}> = | ||
| /** | ||
| * The stringified value of the autocomplete data by using `getResultValue` on the `result`. This | ||
| * is really just used for the default behavior of autocompleting the text field's value to | ||
| * this value. | ||
| * The stringified value of the autocomplete data by using `getResultValue` on | ||
| * the `result`. This is really just used for the default behavior of | ||
| * autocompleting the text field's value to this value. | ||
| */ | ||
@@ -72,0 +77,0 @@ value: string; |
@@ -10,2 +10,3 @@ import { | ||
| useState, | ||
| Ref, | ||
| } from "react"; | ||
@@ -24,3 +25,2 @@ import { | ||
| useToggle, | ||
| WithForwardedRef, | ||
| } from "@react-md/utils"; | ||
@@ -44,8 +44,9 @@ | ||
| /** | ||
| * The sizing behavior for the listbox. It will default to have the same width as the select button, | ||
| * but it is also possible to either have the `min-width` be the width of the select button or just | ||
| * automatically determine the width. | ||
| * The sizing behavior for the listbox. It will default to have the same width | ||
| * as the select button, but it is also possible to either have the | ||
| * `min-width` be the width of the select button or just automatically | ||
| * determine the width. | ||
| * | ||
| * The sizing behavior will always ensure that the left and right bounds of the listbox appear within | ||
| * the viewport. | ||
| * The sizing behavior will always ensure that the left and right bounds of | ||
| * the listbox appear within the viewport. | ||
| */ | ||
@@ -55,3 +56,4 @@ listboxWidth?: PositionWidth; | ||
| /** | ||
| * An optional style to also apply to the listbox element showing all the matches. | ||
| * An optional style to also apply to the listbox element showing all the | ||
| * matches. | ||
| */ | ||
@@ -61,3 +63,4 @@ listboxStyle?: CSSProperties; | ||
| /** | ||
| * Boolean if the select's listbox should not hide if the user resizes the browser while it is visible. | ||
| * Boolean if the select's listbox should not hide if the user resizes the | ||
| * browser while it is visible. | ||
| */ | ||
@@ -67,3 +70,4 @@ disableHideOnResize?: boolean; | ||
| /** | ||
| * Boolean if the select's listbox should not hide if the user scrolls the page while it is visible. | ||
| * Boolean if the select's listbox should not hide if the user scrolls the | ||
| * page while it is visible. | ||
| */ | ||
@@ -78,7 +82,5 @@ disableHideOnScroll?: boolean; | ||
| interface AutoCompleteOptions | ||
| extends EventHandlers, | ||
| WithForwardedRef<HTMLInputElement>, | ||
| PositionOptions { | ||
| interface AutoCompleteOptions extends EventHandlers, PositionOptions { | ||
| autoComplete: AutoCompletion; | ||
| forwardedRef?: Ref<HTMLInputElement>; | ||
| data: AutoCompleteData[]; | ||
@@ -156,5 +158,5 @@ suggestionsId: string; | ||
| // this is really just a hacky way to make sure that once a value has been autocompleted, | ||
| // the menu doesn't immediately re-appear due to the hook below for showing when the value/ | ||
| // filtered data list change | ||
| // this is really just a hacky way to make sure that once a value has been | ||
| // autocompleted, the menu doesn't immediately re-appear due to the hook below | ||
| // for showing when the value/ filtered data list change | ||
| const autocompleted = useRef(false); | ||
@@ -369,4 +371,4 @@ | ||
| // this effect is just for toggling the visibility states as needed if the value or | ||
| // filter data list changes | ||
| // this effect is just for toggling the visibility states as needed if the | ||
| // value or filter data list changes | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
@@ -383,3 +385,4 @@ }, [filteredData, value]); | ||
| // only want to trigger on data changes and setFocusedIndex shouldn't change anyways | ||
| // only want to trigger on data changes and setFocusedIndex shouldn't change | ||
| // anyways | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
@@ -393,4 +396,4 @@ }, [filteredData]); | ||
| // only want to trigger on visible changes -- and setFocusedIndex shouldn't really | ||
| // change anyways | ||
| // only want to trigger on visible changes -- and setFocusedIndex shouldn't | ||
| // really change anyways | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
@@ -397,0 +400,0 @@ }, [visible]); |
@@ -22,9 +22,10 @@ import { ReactNode } from "react"; | ||
| /** | ||
| * Gets a renderable label for each result in the autocomplete's listbox. | ||
| * This will be applied as the `children` for the `Option` element. | ||
| * Gets a renderable label for each result in the autocomplete's listbox. This | ||
| * will be applied as the `children` for the `Option` element. | ||
| * | ||
| * @param datum The current result datum to get a label for | ||
| * @param labelKey The key to extract a label from if the datum is an object | ||
| * @param query The current search query. This is useful if you want to implement | ||
| * text "highlighting" (bold) of all the letters that match in the item. | ||
| * @param query The current search query. This is useful if you want to | ||
| * implement text "highlighting" (bold) of all the letters that match in the | ||
| * item. | ||
| * @return a renderable node to display | ||
@@ -49,4 +50,4 @@ */ | ||
| * @param datum The current result datum that should have a string extracted | ||
| * @param valueKey The key to use to extract a string value from if the datum | ||
| * is an object | ||
| * @param valueKey The key to use to extract a string value from if the datum is | ||
| * an object | ||
| * @return a searchable string. | ||
@@ -75,4 +76,4 @@ */ | ||
| /** | ||
| * This is used to disable filtering and just return the data list immediately. Useful | ||
| * when the filtering is done somewhere else like a server/API | ||
| * This is used to disable filtering and just return the data list immediately. | ||
| * Useful when the filtering is done somewhere else like a server/API | ||
| * @private | ||
@@ -83,3 +84,4 @@ */ | ||
| /** | ||
| * Gets the filter function to use within the Autocomplete based on the provided filter prop | ||
| * Gets the filter function to use within the Autocomplete based on the provided | ||
| * filter prop | ||
| * | ||
@@ -114,5 +116,6 @@ * @private | ||
| /** | ||
| * This is an extremely simple type guard that is useful when using the `onAutoComplete` handler since | ||
| * I'm terrible at typescript types. This will ensure that if the result is an object, it will match | ||
| * the provided data type of your data list. | ||
| * This is an extremely simple type guard that is useful when using the | ||
| * `onAutoComplete` handler since I'm terrible at typescript types. This will | ||
| * ensure that if the result is an object, it will match the provided data type | ||
| * of your data list. | ||
| * | ||
@@ -119,0 +122,0 @@ * Example: |
| import React from "react"; | ||
| import { TextFieldProps } from "@react-md/form"; | ||
| import { RenderConditionalPortalProps } from "@react-md/portal"; | ||
| import { AutoCompleteData, AutoCompleteFilterFunction, AutoCompleteHandler, AutoCompletion } from "./types"; | ||
| import { PositionOptions } from "./useAutoComplete"; | ||
| import { AutoCompleteData, AutoCompleteFilterFunction, AutoCompleteHandler, AutoCompletion } from "./types"; | ||
| import { getResultId as DEFAULT_GET_RESULT_ID, getResultLabel as DEFAULT_GET_RESULT_LABEL, getResultValue as DEFAULT_GET_RESULT_VALUE } from "./utils"; | ||
@@ -92,3 +92,3 @@ export interface AutoCompleteProps extends Omit<TextFieldProps, "type" | "value" | "defaultValue">, RenderConditionalPortalProps, PositionOptions { | ||
| } | ||
| declare const _default: React.ForwardRefExoticComponent<AutoCompleteProps & React.RefAttributes<HTMLInputElement>>; | ||
| export default _default; | ||
| declare const ForwardedAutoComplete: React.ForwardRefExoticComponent<AutoCompleteProps & React.RefAttributes<HTMLInputElement>>; | ||
| export default ForwardedAutoComplete; |
@@ -6,9 +6,10 @@ import { ListboxOptionProps } from "@react-md/form"; | ||
| * | ||
| * - "none" - The autocomplete will not filter any results and will just show a dropdown list of | ||
| * suggestions instead. | ||
| * - "inline" - The first match will appear inline as the user types by using a selection range to | ||
| * highlight the remaining match characters. | ||
| * - "list" - The autocomplete will filter the results and show a dropdown list of matches based | ||
| * on the current text field's value. | ||
| * - "both" - A combination of both the `"inline"` and `"list"` autocomplete behaviors | ||
| * - "none" - The autocomplete will not filter any results and will just show a | ||
| * dropdown list of suggestions instead. | ||
| * - "inline" - The first match will appear inline as the user types by using a | ||
| * selection range to highlight the remaining match characters. | ||
| * - "list" - The autocomplete will filter the results and show a dropdown list | ||
| * of matches based on the current text field's value. | ||
| * - "both" - A combination of both the `"inline"` and `"list"` autocomplete | ||
| * behaviors | ||
| * | ||
@@ -19,11 +20,12 @@ * Note: "inline" versions still aren't actually supported... | ||
| /** | ||
| * The supported data that can be filtered and autocompleted. When the data is an object, the searchable | ||
| * value and display label can be extracted with the provided getter functions and `labelKey`/`valueKey` | ||
| * props. | ||
| * The supported data that can be filtered and autocompleted. When the data is | ||
| * an object, the searchable value and display label can be extracted with the | ||
| * provided getter functions and `labelKey`/`valueKey` props. | ||
| */ | ||
| export declare type AutoCompleteData = string | ListboxOptionProps; | ||
| /** | ||
| * The autocomplete supports a fuzzy filter and a case insensitive filter function out of the box. If | ||
| * you don't want any filtering to happen because the filtering is done through an API call or somewhere | ||
| * else, you can use the `"none"` value instead. | ||
| * The autocomplete supports a fuzzy filter and a case insensitive filter | ||
| * function out of the box. If you don't want any filtering to happen because | ||
| * the filtering is done through an API call or somewhere else, you can use the | ||
| * `"none"` value instead. | ||
| */ | ||
@@ -36,9 +38,12 @@ export declare type PreconfiguredFilterFunction = "fuzzy" | "case-insensitive" | "none"; | ||
| /** | ||
| * The autocomplete works with a filter function that takes in the current search query, the list of data, | ||
| * and search options to return a new filtered list. If the default fuzzy filter and case insensitive filters | ||
| * don't match your usecases, you can also provide your own function that matches this api instead. | ||
| * The autocomplete works with a filter function that takes in the current | ||
| * search query, the list of data, and search options to return a new filtered | ||
| * list. If the default fuzzy filter and case insensitive filters don't match | ||
| * your use cases, you can also provide your own function that matches this api | ||
| * instead. | ||
| */ | ||
| export declare type FilterFunction<O extends {} = {}> = (query: string, data: AutoCompleteData[], options: FilterFunctionOptions<O>) => AutoCompleteData[]; | ||
| /** | ||
| * Either a preconfigured/provided filter function of the autocomplete or a custom function to use. | ||
| * Either a preconfigured/provided filter function of the autocomplete or a | ||
| * custom function to use. | ||
| */ | ||
@@ -51,5 +56,5 @@ export declare type AutoCompleteFilterFunction<O extends {} = {}> = PreconfiguredFilterFunction | FilterFunction<O>; | ||
| /** | ||
| * The stringified value of the autocomplete data by using `getResultValue` on the `result`. This | ||
| * is really just used for the default behavior of autocompleting the text field's value to | ||
| * this value. | ||
| * The stringified value of the autocomplete data by using `getResultValue` on | ||
| * the `result`. This is really just used for the default behavior of | ||
| * autocompleting the text field's value to this value. | ||
| */ | ||
@@ -56,0 +61,0 @@ value: string; |
@@ -1,4 +0,4 @@ | ||
| import { CSSProperties, HTMLAttributes, MutableRefObject } from "react"; | ||
| import { CSSProperties, HTMLAttributes, MutableRefObject, Ref } from "react"; | ||
| import { OptionalFixedPositionOptions, TransitionHooks } from "@react-md/transition"; | ||
| import { PositionWidth, WithForwardedRef } from "@react-md/utils"; | ||
| import { PositionWidth } from "@react-md/utils"; | ||
| import { AutoCompleteData, AutoCompleteFilterFunction, AutoCompleteHandler, AutoCompletion, FilterFunctionOptions } from "./types"; | ||
@@ -8,20 +8,24 @@ import { getResultId as DEFAULT_GET_RESULT_ID, getResultValue as DEFAULT_GET_RESULT_VALUE } from "./utils"; | ||
| /** | ||
| * The sizing behavior for the listbox. It will default to have the same width as the select button, | ||
| * but it is also possible to either have the `min-width` be the width of the select button or just | ||
| * automatically determine the width. | ||
| * The sizing behavior for the listbox. It will default to have the same width | ||
| * as the select button, but it is also possible to either have the | ||
| * `min-width` be the width of the select button or just automatically | ||
| * determine the width. | ||
| * | ||
| * The sizing behavior will always ensure that the left and right bounds of the listbox appear within | ||
| * the viewport. | ||
| * The sizing behavior will always ensure that the left and right bounds of | ||
| * the listbox appear within the viewport. | ||
| */ | ||
| listboxWidth?: PositionWidth; | ||
| /** | ||
| * An optional style to also apply to the listbox element showing all the matches. | ||
| * An optional style to also apply to the listbox element showing all the | ||
| * matches. | ||
| */ | ||
| listboxStyle?: CSSProperties; | ||
| /** | ||
| * Boolean if the select's listbox should not hide if the user resizes the browser while it is visible. | ||
| * Boolean if the select's listbox should not hide if the user resizes the | ||
| * browser while it is visible. | ||
| */ | ||
| disableHideOnResize?: boolean; | ||
| /** | ||
| * Boolean if the select's listbox should not hide if the user scrolls the page while it is visible. | ||
| * Boolean if the select's listbox should not hide if the user scrolls the | ||
| * page while it is visible. | ||
| */ | ||
@@ -31,4 +35,5 @@ disableHideOnScroll?: boolean; | ||
| declare type EventHandlers = Pick<HTMLAttributes<HTMLInputElement>, "onBlur" | "onFocus" | "onChange" | "onClick" | "onKeyDown">; | ||
| interface AutoCompleteOptions extends EventHandlers, WithForwardedRef<HTMLInputElement>, PositionOptions { | ||
| interface AutoCompleteOptions extends EventHandlers, PositionOptions { | ||
| autoComplete: AutoCompletion; | ||
| forwardedRef?: Ref<HTMLInputElement>; | ||
| data: AutoCompleteData[]; | ||
@@ -35,0 +40,0 @@ suggestionsId: string; |
@@ -12,9 +12,10 @@ import { ReactNode } from "react"; | ||
| /** | ||
| * Gets a renderable label for each result in the autocomplete's listbox. | ||
| * This will be applied as the `children` for the `Option` element. | ||
| * Gets a renderable label for each result in the autocomplete's listbox. This | ||
| * will be applied as the `children` for the `Option` element. | ||
| * | ||
| * @param datum The current result datum to get a label for | ||
| * @param labelKey The key to extract a label from if the datum is an object | ||
| * @param query The current search query. This is useful if you want to implement | ||
| * text "highlighting" (bold) of all the letters that match in the item. | ||
| * @param query The current search query. This is useful if you want to | ||
| * implement text "highlighting" (bold) of all the letters that match in the | ||
| * item. | ||
| * @return a renderable node to display | ||
@@ -27,4 +28,4 @@ */ | ||
| * @param datum The current result datum that should have a string extracted | ||
| * @param valueKey The key to use to extract a string value from if the datum | ||
| * is an object | ||
| * @param valueKey The key to use to extract a string value from if the datum is | ||
| * an object | ||
| * @return a searchable string. | ||
@@ -34,4 +35,4 @@ */ | ||
| /** | ||
| * This is used to disable filtering and just return the data list immediately. Useful | ||
| * when the filtering is done somewhere else like a server/API | ||
| * This is used to disable filtering and just return the data list immediately. | ||
| * Useful when the filtering is done somewhere else like a server/API | ||
| * @private | ||
@@ -41,3 +42,4 @@ */ | ||
| /** | ||
| * Gets the filter function to use within the Autocomplete based on the provided filter prop | ||
| * Gets the filter function to use within the Autocomplete based on the provided | ||
| * filter prop | ||
| * | ||
@@ -48,5 +50,6 @@ * @private | ||
| /** | ||
| * This is an extremely simple type guard that is useful when using the `onAutoComplete` handler since | ||
| * I'm terrible at typescript types. This will ensure that if the result is an object, it will match | ||
| * the provided data type of your data list. | ||
| * This is an extremely simple type guard that is useful when using the | ||
| * `onAutoComplete` handler since I'm terrible at typescript types. This will | ||
| * ensure that if the result is an object, it will match the provided data type | ||
| * of your data list. | ||
| * | ||
@@ -53,0 +56,0 @@ * Example: |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-0.02%
528666
- Lines of code
- decreased by-2.99%
2532
Dependency changes
+ Addednanoid@3.3.8(transitive)
- Removednanoid@3.3.7(transitive)