@react-md/autocomplete - npm Package Compare versions

Comparing version 3.1.0 to 4.0.0

CHANGELOG.md

@@ -6,2 +6,28 @@ # Change Log
 
+# [4.0.0](https://github.com/mlaursen/react-md/compare/v3.1.1...v4.0.0) (2021-11-24)
+
+
+### Features
+
+* Update to use new JSX Transform and latest `eslint` ([8111cd3](https://github.com/mlaursen/react-md/commit/8111cd31e45bf60c1b92509264af1b71dfba5696))
+* **@react-md/transition:** No longer use findDOMNode for transitions ([cb952da](https://github.com/mlaursen/react-md/commit/cb952da5b0cd0a67b9650e45d1e29896d66f01e1))
+
+
+### Other Internal Changes
+
+* always skip lib check ([229cef1](https://github.com/mlaursen/react-md/commit/229cef1e3d338ea362c1a2eaac06204c84ff21a6))
+* **react-md:** Remove prop-types package and usage ([2637a6f](https://github.com/mlaursen/react-md/commit/2637a6f43d681a06054e3a4518f692cf51baf997))
+
+
+### Breaking Changes
+
+* Minimum React version is now 16.14 instead of 16.8
+* **react-md:** There will no longer be run-time prop validation with
+the `prop-types` package.
+
+
+
+
+
+
 # [3.1.0](https://github.com/mlaursen/react-md/compare/v3.0.1...v3.1.0) (2021-09-10)
@@ -8,0 +34,0 @@

es/AutoComplete.js

@@ -32,3 +32,4 @@ var __assign = (this && this.__assign) || function () {
 };
-import React, { forwardRef } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import cn from "classnames";
@@ -56,4 +57,4 @@ import { isListboxOptionProps, Option, TextField, } from "@react-md/form";
     var id = props.id;
-    var comboboxId = id + "-combobox";
-    var suggestionsId = id + "-listbox";
+    var comboboxId = "".concat(id, "-combobox");
+    var suggestionsId = "".concat(id, "-listbox");
     var isListAutocomplete = autoComplete === "list" || autoComplete === "both";
@@ -96,107 +97,11 @@ var isInlineAutocomplete = autoComplete === "inline" || autoComplete === "both";
     }), ref = _3.ref, match = _3.match, value = _3.value, visible = _3.visible, activeId = _3.activeId, itemRefs = _3.itemRefs, filteredData = _3.filteredData, listboxRef = _3.listboxRef, fixedStyle = _3.fixedStyle, transitionHooks = _3.transitionHooks, handleBlur = _3.handleBlur, handleFocus = _3.handleFocus, handleClick = _3.handleClick, handleChange = _3.handleChange, handleKeyDown = _3.handleKeyDown, handleAutoComplete = _3.handleAutoComplete;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(TextField, __assign({}, props, { "aria-autocomplete": autoComplete, "aria-controls": comboboxId, "aria-activedescendant": activeId, autoComplete: "off", value: propValue !== null && propValue !== void 0 ? propValue : match, onBlur: handleBlur, onFocus: handleFocus, onClick: handleClick, onKeyDown: handleKeyDown, onChange: handleChange, ref: ref, className: cn(block(), className), containerProps: __assign(__assign({}, containerProps), { "aria-haspopup": "listbox", "aria-owns": suggestionsId, "aria-expanded": visible, id: comboboxId, role: "combobox" }) })),
-        React.createElement(ScaleTransition, __assign({ portal: portal, portalInto: portalInto, portalIntoId: portalIntoId, vertical: true, visible: visible }, transitionHooks),
-            React.createElement(List, { id: suggestionsId, role: "listbox", ref: listboxRef, style: fixedStyle, className: cn(listbox({ temporary: true }), listboxClassName) },
-                beforeResultsChildren,
-                filteredData.map(function (datum, i) {
-                    var resultId = getResultId(suggestionsId, i);
-                    var optionProps;
-                    if (isListboxOptionProps(datum)) {
-                        optionProps = omit(datum, __spreadArray([labelKey, valueKey], omitKeys, true));
-                    }
-                    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: propValue !== null && propValue !== void 0 ? propValue : value, enabled: highlight, repeatable: highlightReapeating }, getResultLabel(datum, labelKey, value))));
-                }),
-                afterResultsChildren))));
+    return (_jsxs(_Fragment, { children: [_jsx(TextField, __assign({}, props, { "aria-autocomplete": autoComplete, "aria-controls": comboboxId, "aria-activedescendant": activeId, autoComplete: "off", value: propValue !== null && propValue !== void 0 ? propValue : match, onBlur: handleBlur, onFocus: handleFocus, onClick: handleClick, onKeyDown: handleKeyDown, onChange: handleChange, ref: ref, className: cn(block(), className), containerProps: __assign(__assign({}, containerProps), { "aria-haspopup": "listbox", "aria-owns": suggestionsId, "aria-expanded": visible, id: comboboxId, role: "combobox" }) }), void 0), _jsx(ScaleTransition, __assign({ nodeRef: listboxRef, portal: portal, portalInto: portalInto, portalIntoId: portalIntoId, vertical: true, transitionIn: visible }, transitionHooks, { className: cn(listbox({ temporary: true }), listboxClassName) }, { children: _jsxs(List, __assign({ id: suggestionsId, role: "listbox", style: fixedStyle }, { children: [beforeResultsChildren, filteredData.map(function (datum, i) {
+                            var resultId = getResultId(suggestionsId, i);
+                            var optionProps;
+                            if (isListboxOptionProps(datum)) {
+                                optionProps = omit(datum, __spreadArray([labelKey, valueKey], omitKeys, true));
+                            }
+                            return (_jsx(Option, __assign({}, optionProps, { id: resultId, selected: false, focused: resultId === activeId, ref: itemRefs[i], onClick: function () { return handleAutoComplete(i); } }, { children: _jsx(HighlightedResult, __assign({ id: "".concat(resultId, "-match"), style: highlightStyle, className: highlightClassName, value: propValue !== null && propValue !== void 0 ? propValue : value, enabled: highlight, repeatable: highlightReapeating }, { children: getResultLabel(datum, labelKey, value) }), void 0) }), resultId));
+                        }), afterResultsChildren] }), void 0) }), void 0)] }, void 0));
 });
-/* istanbul ignore next */
-if (process.env.NODE_ENV !== "production") {
-    try {
-        var PropTypes = require("prop-types");
-        AutoComplete.propTypes = {
-            id: PropTypes.string.isRequired,
-            data: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])).isRequired,
-            filter: PropTypes.oneOfType([
-                PropTypes.oneOf(["none", "fuzzy", "case-insensitive"]),
-                PropTypes.func,
-            ]),
-            filterOptions: PropTypes.object,
-            filterOnNoValue: PropTypes.bool,
-            labelKey: PropTypes.string,
-            valueKey: PropTypes.string,
-            getResultId: PropTypes.func,
-            getResultLabel: PropTypes.func,
-            getResultValue: PropTypes.func,
-            highlight: PropTypes.bool,
-            autoComplete: PropTypes.oneOf(["none", "inline", "list", "both"]),
-            onAutoComplete: PropTypes.func,
-            clearOnAutoComplete: PropTypes.bool,
-            portal: PropTypes.bool,
-            portalInto: PropTypes.oneOfType([
-                PropTypes.func,
-                PropTypes.string,
-                PropTypes.object,
-            ]),
-            portalIntoId: PropTypes.string,
-            anchor: PropTypes.shape({
-                x: PropTypes.oneOf([
-                    "inner-left",
-                    "inner-right",
-                    "center",
-                    "left",
-                    "right",
-                ]),
-                y: PropTypes.oneOf(["above", "below", "center", "top", "bottom"]),
-            }),
-            listboxWidth: PropTypes.oneOf(["auto", "equal", "min"]),
-            vwMargin: PropTypes.number,
-            vhMargin: PropTypes.number,
-            xMargin: PropTypes.number,
-            yMargin: PropTypes.number,
-            transformOrigin: PropTypes.bool,
-            preventOverlap: PropTypes.bool,
-            disableSwapping: PropTypes.bool,
-            disableVHBounds: PropTypes.bool,
-            closeOnResize: PropTypes.bool,
-            closeOnScroll: PropTypes.bool,
-            style: PropTypes.object,
-            className: PropTypes.string,
-            inputStyle: PropTypes.object,
-            inputClassName: PropTypes.string,
-            labelStyle: PropTypes.object,
-            labelClassName: PropTypes.string,
-            label: PropTypes.node,
-            theme: PropTypes.oneOf(["none", "underline", "filled", "outline"]),
-            dense: PropTypes.bool,
-            error: PropTypes.bool,
-            inline: PropTypes.bool,
-            disabled: PropTypes.bool,
-            placeholder: PropTypes.string,
-            underlineDirection: PropTypes.oneOf(["left", "center", "right"]),
-            leftChildren: PropTypes.node,
-            rightChildren: PropTypes.node,
-            isLeftAddon: PropTypes.bool,
-            isRightAddon: PropTypes.bool,
-            onBlur: PropTypes.func,
-            onFocus: PropTypes.func,
-            onClick: PropTypes.func,
-            onKeyDown: PropTypes.func,
-            onChange: PropTypes.func,
-            containerProps: PropTypes.object,
-            listboxStyle: PropTypes.object,
-            listboxClassName: PropTypes.string,
-            highlightReapeating: PropTypes.bool,
-            highlightStyle: PropTypes.object,
-            highlightClassName: PropTypes.string,
-            disableShowOnFocus: PropTypes.bool,
-            omitKeys: PropTypes.arrayOf(PropTypes.string),
-            value: PropTypes.string,
-            defaultValue: PropTypes.string,
-            beforeResultsChildren: PropTypes.node,
-            afterResultsChildren: PropTypes.node,
-        };
-    }
-    catch (e) { }
-}
 //# sourceMappingURL=AutoComplete.js.map

es/HighlightedResult.js

@@ -1,2 +0,13 @@
-import React from "react";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from "classnames";
@@ -10,7 +21,7 @@ /**
     if (!enabled || !value || typeof children !== "string") {
-        return React.createElement(React.Fragment, null, children);
+        return _jsx(_Fragment, { children: children }, void 0);
     }
     var i = children.toLowerCase().indexOf(value.toLowerCase());
     if (i === -1) {
-        return React.createElement(React.Fragment, null, children);
+        return _jsx(_Fragment, { children: children }, void 0);
     }
@@ -20,26 +31,6 @@ var end = i + value.length;
     if (id && index > 0) {
-        id = id + "-" + index;
+        id = "".concat(id, "-").concat(index);
     }
-    return (React.createElement(React.Fragment, null,
-        i > 0 && children.substring(0, i),
-        React.createElement("span", { id: id, style: style, className: cn("rmd-typography--bold", className) }, children.substring(i, end)),
-        end < children.length && (React.createElement(HighlightedResult, { style: style, className: className, value: value, enabled: enabled && repeatable, repeatable: repeatable, index: index + 1 }, children.substring(end)))));
+    return (_jsxs(_Fragment, { children: [i > 0 && children.substring(0, i), _jsx("span", __assign({ id: id, style: style, className: cn("rmd-typography--bold", className) }, { children: children.substring(i, end) }), void 0), end < children.length && (_jsx(HighlightedResult, __assign({ style: style, className: className, value: value, enabled: enabled && repeatable, repeatable: repeatable, index: index + 1 }, { children: children.substring(end) }), void 0))] }, void 0));
 }
-/* istanbul ignore next */
-if (process.env.NODE_ENV !== "production") {
-    try {
-        var PropTypes = require("prop-types");
-        HighlightedResult.propTypes = {
-            id: PropTypes.string,
-            index: PropTypes.number,
-            value: PropTypes.string.isRequired,
-            style: PropTypes.object,
-            className: PropTypes.string,
-            children: PropTypes.node,
-            enabled: PropTypes.bool,
-            repeatable: PropTypes.bool,
-        };
-    }
-    catch (e) { }
-}
 //# sourceMappingURL=HighlightedResult.js.map

es/useAutoComplete.js

@@ -13,3 +13,3 @@ var __assign = (this && this.__assign) || function () {
 import { useCallback, useEffect, useRef, useState, } from "react";
-import { useFixedPositioning } from "@react-md/transition";
+import { useFixedPositioning, } from "@react-md/transition";
 import { MovementPresets, scrollIntoView, useActiveDescendantMovement, useCloseOnOutsideClick, useEnsuredRef, useIsUserInteractionMode, useToggle, } from "@react-md/utils";
@@ -148,3 +148,3 @@ import { getFilterFunction } from "./utils";
     ]);
-    var listboxRef = useRef(null);
+    var nodeRef = useRef(null);
     var _h = useActiveDescendantMovement(__assign(__assign({}, MovementPresets.VERTICAL_COMBOBOX), { getId: getResultId, items: filteredData, baseId: suggestionsId, onChange: function (_a, itemRefs) {
@@ -157,3 +157,3 @@ var index = _a.index, items = _a.items, target = _a.target;
             var item = itemRefs[index] && itemRefs[index].current;
-            var listbox = listboxRef.current;
+            var listbox = nodeRef.current;
             if (item && listbox && listbox.scrollHeight > listbox.offsetHeight) {
@@ -233,3 +233,4 @@ scrollIntoView(listbox, item);
     var _j = useFixedPositioning({
-        fixedTo: function () { return ref.current; },
+        fixedTo: ref,
+        nodeRef: nodeRef,
         anchor: anchor,
@@ -252,3 +253,3 @@ onScroll: function (_event, _a) {
         disableVHBounds: disableVHBounds,
-    }), style = _j.style, onEnter = _j.onEnter, onEntering = _j.onEntering, onEntered = _j.onEntered, onExited = _j.onExited, updateStyle = _j.updateStyle;
+    }), listboxRef = _j.ref, style = _j.style, callbacks = _j.callbacks, updateStyle = _j.updateStyle;
     useEffect(function () {
@@ -287,8 +288,3 @@ if (!focused.current || autocompleted.current) {
         fixedStyle: __assign(__assign({}, style), listboxStyle),
-        transitionHooks: {
-            onEnter: onEnter,
-            onEntering: onEntering,
-            onEntered: onEntered,
-            onExited: onExited,
-        },
+        transitionHooks: callbacks,
         listboxRef: listboxRef,
@@ -295,0 +291,0 @@ handleBlur: handleBlur,

es/utils.js

@@ -10,3 +10,3 @@ import { caseInsensitiveFilter, fuzzyFilter } from "@react-md/utils";
 export function getResultId(id, index) {
-    return id + "-result-" + (index + 1);
+    return "".concat(id, "-result-").concat(index + 1);
 }
@@ -49,3 +49,3 @@ /**
     }
-    return "" + value;
+    return "".concat(value);
 }
@@ -77,3 +77,3 @@ /**
             if (process.env.NODE_ENV !== "production") {
-                throw new Error("Invalid filter function: \"" + filter + "\". Supported values are: \"fuzzy\", \"case-insenitive\", \"none\", or a custom function.");
+                throw new Error("Invalid filter function: \"".concat(filter, "\". Supported values are: \"fuzzy\", \"case-insenitive\", \"none\", or a custom function."));
             }
@@ -80,0 +80,0 @@ return noFilter;

lib/AutoComplete.d.ts

@@ -1,2 +0,2 @@
-import React from "react";
+/// <reference types="react" />
 import { AutoCompleteProps } from "./types";
@@ -7,2 +7,2 @@ /**
  */
-export declare const AutoComplete: React.ForwardRefExoticComponent<AutoCompleteProps & React.RefAttributes<HTMLInputElement>>;
+export declare const AutoComplete: import("react").ForwardRefExoticComponent<AutoCompleteProps & import("react").RefAttributes<HTMLInputElement>>;

lib/AutoComplete.js

@@ -13,21 +13,2 @@ "use strict";
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
@@ -58,3 +39,4 @@ var t = {};
 exports.AutoComplete = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var classnames_1 = __importDefault(require("classnames"));
@@ -82,4 +64,4 @@ var form_1 = require("@react-md/form");
     var id = props.id;
-    var comboboxId = id + "-combobox";
-    var suggestionsId = id + "-listbox";
+    var comboboxId = "".concat(id, "-combobox");
+    var suggestionsId = "".concat(id, "-listbox");
     var isListAutocomplete = autoComplete === "list" || autoComplete === "both";
@@ -122,107 +104,11 @@ var isInlineAutocomplete = autoComplete === "inline" || autoComplete === "both";
     }), ref = _3.ref, match = _3.match, value = _3.value, visible = _3.visible, activeId = _3.activeId, itemRefs = _3.itemRefs, filteredData = _3.filteredData, listboxRef = _3.listboxRef, fixedStyle = _3.fixedStyle, transitionHooks = _3.transitionHooks, handleBlur = _3.handleBlur, handleFocus = _3.handleFocus, handleClick = _3.handleClick, handleChange = _3.handleChange, handleKeyDown = _3.handleKeyDown, handleAutoComplete = _3.handleAutoComplete;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(form_1.TextField, __assign({}, props, { "aria-autocomplete": autoComplete, "aria-controls": comboboxId, "aria-activedescendant": activeId, autoComplete: "off", value: propValue !== null && propValue !== void 0 ? propValue : match, onBlur: handleBlur, onFocus: handleFocus, onClick: handleClick, onKeyDown: handleKeyDown, onChange: handleChange, ref: ref, className: (0, classnames_1.default)(block(), className), containerProps: __assign(__assign({}, containerProps), { "aria-haspopup": "listbox", "aria-owns": suggestionsId, "aria-expanded": visible, id: comboboxId, role: "combobox" }) })),
-        react_1.default.createElement(transition_1.ScaleTransition, __assign({ portal: portal, portalInto: portalInto, portalIntoId: portalIntoId, vertical: true, visible: visible }, transitionHooks),
-            react_1.default.createElement(list_1.List, { id: suggestionsId, role: "listbox", ref: listboxRef, style: fixedStyle, className: (0, classnames_1.default)(listbox({ temporary: true }), listboxClassName) },
-                beforeResultsChildren,
-                filteredData.map(function (datum, i) {
-                    var resultId = getResultId(suggestionsId, i);
-                    var optionProps;
-                    if ((0, form_1.isListboxOptionProps)(datum)) {
-                        optionProps = (0, utils_1.omit)(datum, __spreadArray([labelKey, valueKey], omitKeys, true));
-                    }
-                    return (react_1.default.createElement(form_1.Option, __assign({ key: resultId }, optionProps, { id: resultId, selected: false, focused: resultId === activeId, ref: itemRefs[i], onClick: function () { return handleAutoComplete(i); } }),
-                        react_1.default.createElement(HighlightedResult_1.HighlightedResult, { id: resultId + "-match", style: highlightStyle, className: highlightClassName, value: propValue !== null && propValue !== void 0 ? propValue : value, enabled: highlight, repeatable: highlightReapeating }, getResultLabel(datum, labelKey, value))));
-                }),
-                afterResultsChildren))));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(form_1.TextField, __assign({}, props, { "aria-autocomplete": autoComplete, "aria-controls": comboboxId, "aria-activedescendant": activeId, autoComplete: "off", value: propValue !== null && propValue !== void 0 ? propValue : match, onBlur: handleBlur, onFocus: handleFocus, onClick: handleClick, onKeyDown: handleKeyDown, onChange: handleChange, ref: ref, className: (0, classnames_1.default)(block(), className), containerProps: __assign(__assign({}, containerProps), { "aria-haspopup": "listbox", "aria-owns": suggestionsId, "aria-expanded": visible, id: comboboxId, role: "combobox" }) }), void 0), (0, jsx_runtime_1.jsx)(transition_1.ScaleTransition, __assign({ nodeRef: listboxRef, portal: portal, portalInto: portalInto, portalIntoId: portalIntoId, vertical: true, transitionIn: visible }, transitionHooks, { className: (0, classnames_1.default)(listbox({ temporary: true }), listboxClassName) }, { children: (0, jsx_runtime_1.jsxs)(list_1.List, __assign({ id: suggestionsId, role: "listbox", style: fixedStyle }, { children: [beforeResultsChildren, filteredData.map(function (datum, i) {
+                            var resultId = getResultId(suggestionsId, i);
+                            var optionProps;
+                            if ((0, form_1.isListboxOptionProps)(datum)) {
+                                optionProps = (0, utils_1.omit)(datum, __spreadArray([labelKey, valueKey], omitKeys, true));
+                            }
+                            return ((0, jsx_runtime_1.jsx)(form_1.Option, __assign({}, optionProps, { id: resultId, selected: false, focused: resultId === activeId, ref: itemRefs[i], onClick: function () { return handleAutoComplete(i); } }, { children: (0, jsx_runtime_1.jsx)(HighlightedResult_1.HighlightedResult, __assign({ id: "".concat(resultId, "-match"), style: highlightStyle, className: highlightClassName, value: propValue !== null && propValue !== void 0 ? propValue : value, enabled: highlight, repeatable: highlightReapeating }, { children: getResultLabel(datum, labelKey, value) }), void 0) }), resultId));
+                        }), afterResultsChildren] }), void 0) }), void 0)] }, void 0));
 });
-/* istanbul ignore next */
-if (process.env.NODE_ENV !== "production") {
-    try {
-        var PropTypes = require("prop-types");
-        exports.AutoComplete.propTypes = {
-            id: PropTypes.string.isRequired,
-            data: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])).isRequired,
-            filter: PropTypes.oneOfType([
-                PropTypes.oneOf(["none", "fuzzy", "case-insensitive"]),
-                PropTypes.func,
-            ]),
-            filterOptions: PropTypes.object,
-            filterOnNoValue: PropTypes.bool,
-            labelKey: PropTypes.string,
-            valueKey: PropTypes.string,
-            getResultId: PropTypes.func,
-            getResultLabel: PropTypes.func,
-            getResultValue: PropTypes.func,
-            highlight: PropTypes.bool,
-            autoComplete: PropTypes.oneOf(["none", "inline", "list", "both"]),
-            onAutoComplete: PropTypes.func,
-            clearOnAutoComplete: PropTypes.bool,
-            portal: PropTypes.bool,
-            portalInto: PropTypes.oneOfType([
-                PropTypes.func,
-                PropTypes.string,
-                PropTypes.object,
-            ]),
-            portalIntoId: PropTypes.string,
-            anchor: PropTypes.shape({
-                x: PropTypes.oneOf([
-                    "inner-left",
-                    "inner-right",
-                    "center",
-                    "left",
-                    "right",
-                ]),
-                y: PropTypes.oneOf(["above", "below", "center", "top", "bottom"]),
-            }),
-            listboxWidth: PropTypes.oneOf(["auto", "equal", "min"]),
-            vwMargin: PropTypes.number,
-            vhMargin: PropTypes.number,
-            xMargin: PropTypes.number,
-            yMargin: PropTypes.number,
-            transformOrigin: PropTypes.bool,
-            preventOverlap: PropTypes.bool,
-            disableSwapping: PropTypes.bool,
-            disableVHBounds: PropTypes.bool,
-            closeOnResize: PropTypes.bool,
-            closeOnScroll: PropTypes.bool,
-            style: PropTypes.object,
-            className: PropTypes.string,
-            inputStyle: PropTypes.object,
-            inputClassName: PropTypes.string,
-            labelStyle: PropTypes.object,
-            labelClassName: PropTypes.string,
-            label: PropTypes.node,
-            theme: PropTypes.oneOf(["none", "underline", "filled", "outline"]),
-            dense: PropTypes.bool,
-            error: PropTypes.bool,
-            inline: PropTypes.bool,
-            disabled: PropTypes.bool,
-            placeholder: PropTypes.string,
-            underlineDirection: PropTypes.oneOf(["left", "center", "right"]),
-            leftChildren: PropTypes.node,
-            rightChildren: PropTypes.node,
-            isLeftAddon: PropTypes.bool,
-            isRightAddon: PropTypes.bool,
-            onBlur: PropTypes.func,
-            onFocus: PropTypes.func,
-            onClick: PropTypes.func,
-            onKeyDown: PropTypes.func,
-            onChange: PropTypes.func,
-            containerProps: PropTypes.object,
-            listboxStyle: PropTypes.object,
-            listboxClassName: PropTypes.string,
-            highlightReapeating: PropTypes.bool,
-            highlightStyle: PropTypes.object,
-            highlightClassName: PropTypes.string,
-            disableShowOnFocus: PropTypes.bool,
-            omitKeys: PropTypes.arrayOf(PropTypes.string),
-            value: PropTypes.string,
-            defaultValue: PropTypes.string,
-            beforeResultsChildren: PropTypes.node,
-            afterResultsChildren: PropTypes.node,
-        };
-    }
-    catch (e) { }
-}
 //# sourceMappingURL=AutoComplete.js.map

lib/HighlightedResult.d.ts

@@ -46,13 +46,1 @@ import { CSSProperties, ReactElement, ReactNode } from "react";
 export declare function HighlightedResult({ id: propId, style, className, enabled, value, children, repeatable, index, }: HighlightedResultProps): ReactElement;
-export declare namespace HighlightedResult {
-    var propTypes: {
-        id: any;
-        index: any;
-        value: any;
-        style: any;
-        className: any;
-        children: any;
-        enabled: any;
-        repeatable: any;
-    };
-}

lib/HighlightedResult.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -7,3 +18,3 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 exports.HighlightedResult = void 0;
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var classnames_1 = __importDefault(require("classnames"));
@@ -17,7 +28,7 @@ /**
     if (!enabled || !value || typeof children !== "string") {
-        return react_1.default.createElement(react_1.default.Fragment, null, children);
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }, void 0);
     }
     var i = children.toLowerCase().indexOf(value.toLowerCase());
     if (i === -1) {
-        return react_1.default.createElement(react_1.default.Fragment, null, children);
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }, void 0);
     }
@@ -27,27 +38,7 @@ var end = i + value.length;
     if (id && index > 0) {
-        id = id + "-" + index;
+        id = "".concat(id, "-").concat(index);
     }
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        i > 0 && children.substring(0, i),
-        react_1.default.createElement("span", { id: id, style: style, className: (0, classnames_1.default)("rmd-typography--bold", className) }, children.substring(i, end)),
-        end < children.length && (react_1.default.createElement(HighlightedResult, { style: style, className: className, value: value, enabled: enabled && repeatable, repeatable: repeatable, index: index + 1 }, children.substring(end)))));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [i > 0 && children.substring(0, i), (0, jsx_runtime_1.jsx)("span", __assign({ id: id, style: style, className: (0, classnames_1.default)("rmd-typography--bold", className) }, { children: children.substring(i, end) }), void 0), end < children.length && ((0, jsx_runtime_1.jsx)(HighlightedResult, __assign({ style: style, className: className, value: value, enabled: enabled && repeatable, repeatable: repeatable, index: index + 1 }, { children: children.substring(end) }), void 0))] }, void 0));
 }
 exports.HighlightedResult = HighlightedResult;
-/* istanbul ignore next */
-if (process.env.NODE_ENV !== "production") {
-    try {
-        var PropTypes = require("prop-types");
-        HighlightedResult.propTypes = {
-            id: PropTypes.string,
-            index: PropTypes.number,
-            value: PropTypes.string.isRequired,
-            style: PropTypes.object,
-            className: PropTypes.string,
-            children: PropTypes.node,
-            enabled: PropTypes.bool,
-            repeatable: PropTypes.bool,
-        };
-    }
-    catch (e) { }
-}
 //# sourceMappingURL=HighlightedResult.js.map

lib/types.d.ts

@@ -1,6 +0,5 @@
-import { CSSProperties, ReactNode } from "react";
-import { ListboxOptionProps, TextFieldProps } from "@react-md/form";
-import { RenderConditionalPortalProps } from "@react-md/portal";
-import { OptionalFixedPositionOptions } from "@react-md/transition";
-import { CaseInsensitiveOptions, PositionWidth } from "@react-md/utils";
+import type { CSSProperties, ReactNode } from "react";
+import type { ListboxOptionProps, TextFieldProps } from "@react-md/form";
+import type { RenderConditionalPortalProps } from "@react-md/portal";
+import type { CalculateFixedPositionOptions, CaseInsensitiveOptions, PositionWidth } from "@react-md/utils";
 /**
@@ -84,3 +83,3 @@ * The supported autocompletion types.
 export declare type AutoCompleteHandler = (result: AutoCompleteResult) => void;
-export interface AutoCompleteListboxPositionOptions extends Omit<OptionalFixedPositionOptions, "width"> {
+export interface AutoCompleteListboxPositionOptions extends Omit<CalculateFixedPositionOptions, "width"> {
     /**
@@ -87,0 +86,0 @@ * The sizing behavior for the listbox. It will default to have the same width

lib/useAutoComplete.d.ts

@@ -1,4 +0,4 @@
-import { ChangeEventHandler, CSSProperties, FocusEventHandler, HTMLAttributes, KeyboardEventHandler, MouseEventHandler, MutableRefObject, Ref } from "react";
+import { ChangeEventHandler, CSSProperties, FocusEventHandler, HTMLAttributes, KeyboardEventHandler, MouseEventHandler, Ref } from "react";
 import { ListElement } from "@react-md/list";
-import { TransitionHooks } from "@react-md/transition";
+import { FixedPositioningTransitionCallbacks } from "@react-md/transition";
 import { ItemRefList } from "@react-md/utils";
@@ -25,3 +25,3 @@ import { AutoCompleteData, AutoCompleteListboxPositionOptions, AutoCompleteProps } from "./types";
     filteredData: readonly AutoCompleteData[];
-    listboxRef: MutableRefObject<ListElement | null>;
+    listboxRef: Ref<ListElement>;
     handleBlur: FocusEventHandler<HTMLInputElement>;
@@ -34,3 +34,3 @@ handleFocus: FocusEventHandler<HTMLInputElement>;
     fixedStyle: CSSProperties | undefined;
-    transitionHooks: Required<TransitionHooks>;
+    transitionHooks: Required<FixedPositioningTransitionCallbacks>;
 }
@@ -37,0 +37,0 @@ /**

lib/useAutoComplete.js

@@ -150,3 +150,3 @@ "use strict";
     ]);
-    var listboxRef = (0, react_1.useRef)(null);
+    var nodeRef = (0, react_1.useRef)(null);
     var _h = (0, utils_1.useActiveDescendantMovement)(__assign(__assign({}, utils_1.MovementPresets.VERTICAL_COMBOBOX), { getId: getResultId, items: filteredData, baseId: suggestionsId, onChange: function (_a, itemRefs) {
@@ -159,3 +159,3 @@ var index = _a.index, items = _a.items, target = _a.target;
             var item = itemRefs[index] && itemRefs[index].current;
-            var listbox = listboxRef.current;
+            var listbox = nodeRef.current;
             if (item && listbox && listbox.scrollHeight > listbox.offsetHeight) {
@@ -235,3 +235,4 @@ (0, utils_1.scrollIntoView)(listbox, item);
     var _j = (0, transition_1.useFixedPositioning)({
-        fixedTo: function () { return ref.current; },
+        fixedTo: ref,
+        nodeRef: nodeRef,
         anchor: anchor,
@@ -254,3 +255,3 @@ onScroll: function (_event, _a) {
         disableVHBounds: disableVHBounds,
-    }), style = _j.style, onEnter = _j.onEnter, onEntering = _j.onEntering, onEntered = _j.onEntered, onExited = _j.onExited, updateStyle = _j.updateStyle;
+    }), listboxRef = _j.ref, style = _j.style, callbacks = _j.callbacks, updateStyle = _j.updateStyle;
     (0, react_1.useEffect)(function () {
@@ -289,8 +290,3 @@ if (!focused.current || autocompleted.current) {
         fixedStyle: __assign(__assign({}, style), listboxStyle),
-        transitionHooks: {
-            onEnter: onEnter,
-            onEntering: onEntering,
-            onEntered: onEntered,
-            onExited: onExited,
-        },
+        transitionHooks: callbacks,
         listboxRef: listboxRef,
@@ -297,0 +293,0 @@ handleBlur: handleBlur,

lib/utils.js

@@ -13,3 +13,3 @@ "use strict";
 function getResultId(id, index) {
-    return id + "-result-" + (index + 1);
+    return "".concat(id, "-result-").concat(index + 1);
 }
@@ -54,3 +54,3 @@ exports.getResultId = getResultId;
     }
-    return "" + value;
+    return "".concat(value);
 }
@@ -84,3 +84,3 @@ exports.getResultValue = getResultValue;
             if (process.env.NODE_ENV !== "production") {
-                throw new Error("Invalid filter function: \"" + filter + "\". Supported values are: \"fuzzy\", \"case-insenitive\", \"none\", or a custom function.");
+                throw new Error("Invalid filter function: \"".concat(filter, "\". Supported values are: \"fuzzy\", \"case-insenitive\", \"none\", or a custom function."));
             }
@@ -87,0 +87,0 @@ return exports.noFilter;

package.json

 {
   "name": "@react-md/autocomplete",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "description": "",
@@ -34,10 +34,10 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@react-md/form": "^3.1.0",
-    "@react-md/list": "^3.1.0",
-    "@react-md/portal": "^3.1.0",
-    "@react-md/states": "^3.1.0",
-    "@react-md/theme": "^3.1.0",
-    "@react-md/transition": "^3.1.0",
-    "@react-md/typography": "^3.1.0",
-    "@react-md/utils": "^3.1.0",
+    "@react-md/form": "^4.0.0",
+    "@react-md/list": "^4.0.0",
+    "@react-md/portal": "^4.0.0",
+    "@react-md/states": "^4.0.0",
+    "@react-md/theme": "^4.0.0",
+    "@react-md/transition": "^4.0.0",
+    "@react-md/typography": "^4.0.0",
+    "@react-md/utils": "^4.0.0",
     "classnames": "^2.3.1"
@@ -50,12 +50,9 @@ },
   "peerDependencies": {
-    "react": ">= 16.8",
-    "react-dom": ">= 16.8"
+    "react": ">= 16.14",
+    "react-dom": ">= 16.14"
   },
-  "optionalDependencies": {
-    "prop-types": ">= 15.6"
-  },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5891a3255f12fb34d2cc82d81d10f85f712a21e8"
+  "gitHead": "a9f2d64a777698fa65bb3196f6063cdd8321f5cb"
 }

README.md

@@ -35,3 +35,2 @@ # @react-md/autocomplete
 ```tsx
-import React from "react";
 import { AutoComplete } from "@react-md/autocomplete";
@@ -38,0 +37,0 @@

src/types.ts

@@ -1,6 +0,9 @@
-import { CSSProperties, ReactNode } from "react";
-import { ListboxOptionProps, TextFieldProps } from "@react-md/form";
-import { RenderConditionalPortalProps } from "@react-md/portal";
-import { OptionalFixedPositionOptions } from "@react-md/transition";
-import { CaseInsensitiveOptions, PositionWidth } from "@react-md/utils";
+import type { CSSProperties, ReactNode } from "react";
+import type { ListboxOptionProps, TextFieldProps } from "@react-md/form";
+import type { RenderConditionalPortalProps } from "@react-md/portal";
+import type {
+  CalculateFixedPositionOptions,
+  CaseInsensitiveOptions,
+  PositionWidth,
+} from "@react-md/utils";
 
@@ -105,3 +108,3 @@ /**
 export interface AutoCompleteListboxPositionOptions
-  extends Omit<OptionalFixedPositionOptions, "width"> {
+  extends Omit<CalculateFixedPositionOptions, "width"> {
   /**
@@ -108,0 +111,0 @@ * The sizing behavior for the listbox. It will default to have the same width

src/useAutoComplete.ts

@@ -8,3 +8,2 @@ import {
   MouseEventHandler,
-  MutableRefObject,
   Ref,
@@ -17,4 +16,7 @@ useCallback,
 import { ListElement } from "@react-md/list";
-import { TransitionHooks, useFixedPositioning } from "@react-md/transition";
 import {
+  FixedPositioningTransitionCallbacks,
+  useFixedPositioning,
+} from "@react-md/transition";
+import {
   ItemRefList,
@@ -82,3 +84,3 @@ MovementPresets,
   filteredData: readonly AutoCompleteData[];
-  listboxRef: MutableRefObject<ListElement | null>;
+  listboxRef: Ref<ListElement>;
   handleBlur: FocusEventHandler<HTMLInputElement>;
@@ -91,3 +93,3 @@ handleFocus: FocusEventHandler<HTMLInputElement>;
   fixedStyle: CSSProperties | undefined;
-  transitionHooks: Required<TransitionHooks>;
+  transitionHooks: Required<FixedPositioningTransitionCallbacks>;
 }
@@ -315,3 +317,3 @@
 
-  const listboxRef = useRef<ListElement | null>(null);
+  const nodeRef = useRef<ListElement | null>(null);
   const {
@@ -338,3 +340,3 @@ activeId,
       const item = itemRefs[index] && itemRefs[index].current;
-      const { current: listbox } = listboxRef;
+      const { current: listbox } = nodeRef;
       if (item && listbox && listbox.scrollHeight > listbox.offsetHeight) {
@@ -427,22 +429,27 @@ scrollIntoView(listbox, item);
 
-  const { style, onEnter, onEntering, onEntered, onExited, updateStyle } =
-    useFixedPositioning({
-      fixedTo: () => ref.current,
-      anchor,
-      onScroll(_event, { visible }) {
-        if (closeOnScroll || !visible) {
-          hide();
-        }
-      },
-      onResize: closeOnResize ? hide : undefined,
-      width: listboxWidth,
-      xMargin,
-      yMargin,
-      vwMargin,
-      vhMargin,
-      transformOrigin,
-      preventOverlap,
-      disableSwapping,
-      disableVHBounds,
-    });
+  const {
+    ref: listboxRef,
+    style,
+    callbacks,
+    updateStyle,
+  } = useFixedPositioning({
+    fixedTo: ref,
+    nodeRef,
+    anchor,
+    onScroll(_event, { visible }) {
+      if (closeOnScroll || !visible) {
+        hide();
+      }
+    },
+    onResize: closeOnResize ? hide : undefined,
+    width: listboxWidth,
+    xMargin,
+    yMargin,
+    vwMargin,
+    vhMargin,
+    transformOrigin,
+    preventOverlap,
+    disableSwapping,
+    disableVHBounds,
+  });
 
@@ -487,8 +494,3 @@ useEffect(() => {
     fixedStyle: { ...style, ...listboxStyle },
-    transitionHooks: {
-      onEnter,
-      onEntering,
-      onEntered,
-      onExited,
-    },
+    transitionHooks: callbacks,
     listboxRef,
@@ -495,0 +497,0 @@ handleBlur,

types/AutoComplete.d.ts

@@ -1,2 +0,2 @@
-import React from "react";
+/// <reference types="react" />
 import { AutoCompleteProps } from "./types";
@@ -7,2 +7,2 @@ /**
  */
-export declare const AutoComplete: React.ForwardRefExoticComponent<AutoCompleteProps & React.RefAttributes<HTMLInputElement>>;
+export declare const AutoComplete: import("react").ForwardRefExoticComponent<AutoCompleteProps & import("react").RefAttributes<HTMLInputElement>>;

types/HighlightedResult.d.ts

@@ -46,13 +46,1 @@ import { CSSProperties, ReactElement, ReactNode } from "react";
 export declare function HighlightedResult({ id: propId, style, className, enabled, value, children, repeatable, index, }: HighlightedResultProps): ReactElement;
-export declare namespace HighlightedResult {
-    var propTypes: {
-        id: any;
-        index: any;
-        value: any;
-        style: any;
-        className: any;
-        children: any;
-        enabled: any;
-        repeatable: any;
-    };
-}

types/types.d.ts

@@ -1,6 +0,5 @@
-import { CSSProperties, ReactNode } from "react";
-import { ListboxOptionProps, TextFieldProps } from "@react-md/form";
-import { RenderConditionalPortalProps } from "@react-md/portal";
-import { OptionalFixedPositionOptions } from "@react-md/transition";
-import { CaseInsensitiveOptions, PositionWidth } from "@react-md/utils";
+import type { CSSProperties, ReactNode } from "react";
+import type { ListboxOptionProps, TextFieldProps } from "@react-md/form";
+import type { RenderConditionalPortalProps } from "@react-md/portal";
+import type { CalculateFixedPositionOptions, CaseInsensitiveOptions, PositionWidth } from "@react-md/utils";
 /**
@@ -84,3 +83,3 @@ * The supported autocompletion types.
 export declare type AutoCompleteHandler = (result: AutoCompleteResult) => void;
-export interface AutoCompleteListboxPositionOptions extends Omit<OptionalFixedPositionOptions, "width"> {
+export interface AutoCompleteListboxPositionOptions extends Omit<CalculateFixedPositionOptions, "width"> {
     /**
@@ -87,0 +86,0 @@ * The sizing behavior for the listbox. It will default to have the same width

types/useAutoComplete.d.ts

@@ -1,4 +0,4 @@
-import { ChangeEventHandler, CSSProperties, FocusEventHandler, HTMLAttributes, KeyboardEventHandler, MouseEventHandler, MutableRefObject, Ref } from "react";
+import { ChangeEventHandler, CSSProperties, FocusEventHandler, HTMLAttributes, KeyboardEventHandler, MouseEventHandler, Ref } from "react";
 import { ListElement } from "@react-md/list";
-import { TransitionHooks } from "@react-md/transition";
+import { FixedPositioningTransitionCallbacks } from "@react-md/transition";
 import { ItemRefList } from "@react-md/utils";
@@ -25,3 +25,3 @@ import { AutoCompleteData, AutoCompleteListboxPositionOptions, AutoCompleteProps } from "./types";
     filteredData: readonly AutoCompleteData[];
-    listboxRef: MutableRefObject<ListElement | null>;
+    listboxRef: Ref<ListElement>;
     handleBlur: FocusEventHandler<HTMLInputElement>;
@@ -34,3 +34,3 @@ handleFocus: FocusEventHandler<HTMLInputElement>;
     fixedStyle: CSSProperties | undefined;
-    transitionHooks: Required<TransitionHooks>;
+    transitionHooks: Required<FixedPositioningTransitionCallbacks>;
 }
@@ -37,0 +37,0 @@ /**

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

Dependency count

11

decreased by-8.33%

Number of low supply chain risk alerts

4

decreased by-50%

Worsened metrics

Total package byte prevSize

179154

decreased by-9.51%

Lines of code

3208

decreased by-10.09%

Number of lines in readme file

61

decreased by-1.61%

Dependency changes

• + Added@react-md/avatar@4.0.3(transitive)

• + Added@react-md/button@4.0.3(transitive)

• + Added@react-md/divider@4.0.3(transitive)

• + Added@react-md/elevation@4.0.3(transitive)

• + Added@react-md/form@4.0.3(transitive)

• + Added@react-md/icon@4.0.3(transitive)

• + Added@react-md/list@4.0.3(transitive)

• + Added@react-md/portal@4.0.3(transitive)

• + Added@react-md/progress@4.0.3(transitive)

• + Added@react-md/states@4.0.3(transitive)

• + Added@react-md/theme@4.0.3(transitive)

• + Added@react-md/tooltip@4.0.3(transitive)

• + Added@react-md/transition@4.0.3(transitive)

• + Added@react-md/typography@4.0.3(transitive)

• + Added@react-md/utils@4.0.3(transitive)

• - Removed@babel/runtime@7.26.0(transitive)

• - Removed@react-md/avatar@3.1.0(transitive)

• - Removed@react-md/button@3.1.0(transitive)

• - Removed@react-md/divider@3.1.0(transitive)

• - Removed@react-md/elevation@3.1.0(transitive)

• - Removed@react-md/form@3.1.0(transitive)

• - Removed@react-md/icon@3.1.0(transitive)

• - Removed@react-md/list@3.1.0(transitive)

• - Removed@react-md/portal@3.1.0(transitive)

• - Removed@react-md/progress@3.1.0(transitive)

• - Removed@react-md/states@3.1.0(transitive)

• - Removed@react-md/theme@3.1.0(transitive)

• - Removed@react-md/tooltip@3.1.0(transitive)

• - Removed@react-md/transition@3.1.0(transitive)

• - Removed@react-md/typography@3.1.0(transitive)

• - Removed@react-md/utils@3.1.0(transitive)

• - Removed@types/prop-types@15.7.13(transitive)

• - Removed@types/react@18.3.12(transitive)

• - Removed@types/react-transition-group@4.4.11(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removeddom-helpers@5.2.1(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedreact-transition-group@4.4.5(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• Updated@react-md/form@^4.0.0

• Updated@react-md/list@^4.0.0

• Updated@react-md/portal@^4.0.0

• Updated@react-md/states@^4.0.0

• Updated@react-md/theme@^4.0.0

• Updated@react-md/transition@^4.0.0

• Updated@react-md/typography@^4.0.0

• Updated@react-md/utils@^4.0.0