@react-md/autocomplete - npm Package Compare versions

Comparing version 2.2.0 to 2.3.0-alpha.0

CHANGELOG.md

@@ -6,29 +6,22 @@ # Change Log
 
-# [2.2.0](https://github.com/mlaursen/react-md/compare/v2.1.2...v2.2.0) (2020-08-11)
+# [2.3.0-alpha.0](https://github.com/mlaursen/react-md/compare/v2.2.0...v2.3.0-alpha.0) (2020-09-01)
 
-**Note:** Version bump only for package @react-md/autocomplete
+**Note:** Version bump only for package
+[@react-md/autocomplete](../autocomplete)
 
-# Change Log
+# [2.2.0](https://github.com/mlaursen/react-md/compare/v2.1.2...v2.2.0) (2020-08-11)
 
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+**Note:** Version bump only for package
+[@react-md/autocomplete](../autocomplete)
 
 ## [2.1.2](https://github.com/mlaursen/react-md/compare/v2.1.1...v2.1.2) (2020-08-01)
 
-**Note:** Version bump only for package @react-md/autocomplete
+**Note:** Version bump only for package
+[@react-md/autocomplete](../autocomplete)
 
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
 ## [2.1.1](https://github.com/mlaursen/react-md/compare/v2.1.0...v2.1.1) (2020-07-21)
 
-**Note:** Version bump only for package @react-md/autocomplete
+**Note:** Version bump only for package
+[@react-md/autocomplete](../autocomplete)
 
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
 # [2.1.0](https://github.com/mlaursen/react-md/compare/v2.0.4...v2.1.0) (2020-07-12)
@@ -40,13 +33,9 @@
   ([cac5cd1](https://github.com/mlaursen/react-md/commit/cac5cd16a1452130ba600833c8ad1180d7ec4918))
-- Render non-searchable items in AutoComplete
+- Render non-searchable items in `AutoComplete`
   ([e7a82ac](https://github.com/mlaursen/react-md/commit/e7a82acf874f46b56e8427cdb389ff1f18f12927))
 
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
 ## [2.0.3](https://github.com/mlaursen/react-md/compare/v2.0.2...v2.0.3) (2020-07-07)
 
-**Note:** Version bump only for package @react-md/autocomplete
+**Note:** Version bump only for package
+[@react-md/autocomplete](../autocomplete)
 
@@ -59,5 +48,5 @@ ## [2.0.2](https://github.com/mlaursen/react-md/compare/v2.0.1...v2.0.2) (2020-06-30)
   ([50c9021](https://github.com/mlaursen/react-md/commit/50c9021cedc0d642758b9fd541bb6c93d2fe1786))
-- Added sideEffects field to package.json
+- Added `sideEffects` field to `package.json`
   ([31820b9](https://github.com/mlaursen/react-md/commit/31820b9b43705e5849664500a17b6849eb6dc2a9))
-- sideEffects formatting
+- `sideEffects` formatting
   ([78a7b6b](https://github.com/mlaursen/react-md/commit/78a7b6b0e40c7daefb749835670705f21bd21720))
@@ -64,0 +53,0 @@

es/useAutoComplete.js

@@ -14,3 +14,3 @@ var __assign = (this && this.__assign) || function () {
 import { useFixedPositioning } from "@react-md/transition";
-import { applyRef, MovementPresets, scrollIntoView, useActiveDescendantMovement, useCloseOnOutsideClick, useIsUserInteractionMode, useToggle, } from "@react-md/utils";
+import { MovementPresets, scrollIntoView, useActiveDescendantMovement, useCloseOnOutsideClick, useEnsuredRef, useIsUserInteractionMode, useToggle, } from "@react-md/utils";
 import { getFilterFunction } from "./utils";
@@ -25,9 +25,5 @@ /**
     var suggestionsId = _a.suggestionsId, data = _a.data, propValue = _a.propValue, _c = _a.defaultValue, defaultValue = _c === void 0 ? "" : _c, filterFn = _a.filter, filterOptions = _a.filterOptions, filterOnNoValue = _a.filterOnNoValue, valueKey = _a.valueKey, getResultId = _a.getResultId, getResultValue = _a.getResultValue, onBlur = _a.onBlur, onFocus = _a.onFocus, onClick = _a.onClick, onChange = _a.onChange, onKeyDown = _a.onKeyDown, forwardedRef = _a.forwardedRef, onAutoComplete = _a.onAutoComplete, clearOnAutoComplete = _a.clearOnAutoComplete, anchor = _a.anchor, xMargin = _a.xMargin, yMargin = _a.yMargin, vwMargin = _a.vwMargin, vhMargin = _a.vhMargin, transformOrigin = _a.transformOrigin, listboxWidth = _a.listboxWidth, listboxStyle = _a.listboxStyle, preventOverlap = _a.preventOverlap, disableSwapping = _a.disableSwapping, disableVHBounds = _a.disableVHBounds, closeOnResize = _a.closeOnResize, closeOnScroll = _a.closeOnScroll, propDisableShowOnFocus = _a.disableShowOnFocus, isListAutocomplete = _a.isListAutocomplete, isInlineAutocomplete = _a.isInlineAutocomplete;
-    var inputRef = useRef(null);
-    var ref = useCallback(function (instance) {
-        applyRef(instance, forwardedRef);
-        inputRef.current = instance;
-    }, [forwardedRef]);
+    var _d = useEnsuredRef(forwardedRef), ref = _d[0], refHandler = _d[1];
     var filter = getFilterFunction(filterFn);
-    var _d = useState(function () {
+    var _e = useState(function () {
         var _a;
@@ -46,3 +42,3 @@ var options = __assign(__assign({}, filterOptions), { valueKey: valueKey, getItemValue: getResultValue, startsWith: (_a = filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.startsWith) !== null && _a !== void 0 ? _a : isInlineAutocomplete });
         };
-    }), _e = _d[0], stateValue = _e.value, match = _e.match, stateFilteredData = _e.filteredData, setState = _d[1];
+    }), _f = _e[0], stateValue = _f.value, match = _f.match, stateFilteredData = _f.filteredData, setState = _e[1];
     var filteredData = filterFn === "none" ? data : stateFilteredData;
@@ -62,3 +58,3 @@ var startsWith = (_b = filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.startsWith) !== null && _b !== void 0 ? _b : isInlineAutocomplete;
             nextMatch = getResultValue(filtered[0], valueKey);
-            var input = inputRef.current;
+            var input = ref.current;
             if (input && !isBackspace) {
@@ -71,2 +67,3 @@ input.value = nextMatch;
     }, [
+        ref,
         data,
@@ -94,3 +91,3 @@ filter,
     }, [setValue, onChange]);
-    var _f = useToggle(false), visible = _f[0], show = _f[1], hide = _f[2];
+    var _g = useToggle(false), visible = _g[0], show = _g[1], hide = _g[2];
     var isTouch = useIsUserInteractionMode("touch");
@@ -157,3 +154,3 @@ var disableShowOnFocus = propDisableShowOnFocus !== null && propDisableShowOnFocus !== void 0 ? propDisableShowOnFocus : isTouch;
     var listboxRef = useRef(null);
-    var _g = useActiveDescendantMovement(__assign(__assign({}, MovementPresets.VERTICAL_COMBOBOX), { getId: getResultId, items: filteredData, baseId: suggestionsId, onChange: function (_a, itemRefs) {
+    var _h = useActiveDescendantMovement(__assign(__assign({}, MovementPresets.VERTICAL_COMBOBOX), { getId: getResultId, items: filteredData, baseId: suggestionsId, onChange: function (_a, itemRefs) {
             var index = _a.index, items = _a.items, target = _a.target;
@@ -234,10 +231,10 @@ // the default scroll into view behavior for aria-activedescendant
             }
-        } })), activeId = _g.activeId, itemRefs = _g.itemRefs, handleKeyDown = _g.onKeyDown, focusedIndex = _g.focusedIndex, setFocusedIndex = _g.setFocusedIndex;
+        } })), activeId = _h.activeId, itemRefs = _h.itemRefs, handleKeyDown = _h.onKeyDown, focusedIndex = _h.focusedIndex, setFocusedIndex = _h.setFocusedIndex;
     useCloseOnOutsideClick({
         enabled: visible,
-        element: inputRef.current,
+        element: ref.current,
         onOutsideClick: hide,
     });
-    var _h = useFixedPositioning({
-        fixedTo: function () { return inputRef.current; },
+    var _j = useFixedPositioning({
+        fixedTo: function () { return ref.current; },
         anchor: anchor,
@@ -260,3 +257,3 @@ onScroll: function (_event, _a) {
         disableVHBounds: disableVHBounds,
-    }), style = _h.style, onEnter = _h.onEnter, onEntering = _h.onEntering, onEntered = _h.onEntered, onExited = _h.onExited, updateStyle = _h.updateStyle;
+    }), style = _j.style, onEnter = _j.onEnter, onEntering = _j.onEntering, onEntered = _j.onEntered, onExited = _j.onExited, updateStyle = _j.updateStyle;
     useEffect(function () {
@@ -287,3 +284,3 @@ if (!focused.current || autocompleted.current) {
     return {
-        ref: ref,
+        ref: refHandler,
         value: value,
@@ -290,0 +287,0 @@ match: match,

lib/useAutoComplete.js

@@ -26,9 +26,5 @@ "use strict";
     var suggestionsId = _a.suggestionsId, data = _a.data, propValue = _a.propValue, _c = _a.defaultValue, defaultValue = _c === void 0 ? "" : _c, filterFn = _a.filter, filterOptions = _a.filterOptions, filterOnNoValue = _a.filterOnNoValue, valueKey = _a.valueKey, getResultId = _a.getResultId, getResultValue = _a.getResultValue, onBlur = _a.onBlur, onFocus = _a.onFocus, onClick = _a.onClick, onChange = _a.onChange, onKeyDown = _a.onKeyDown, forwardedRef = _a.forwardedRef, onAutoComplete = _a.onAutoComplete, clearOnAutoComplete = _a.clearOnAutoComplete, anchor = _a.anchor, xMargin = _a.xMargin, yMargin = _a.yMargin, vwMargin = _a.vwMargin, vhMargin = _a.vhMargin, transformOrigin = _a.transformOrigin, listboxWidth = _a.listboxWidth, listboxStyle = _a.listboxStyle, preventOverlap = _a.preventOverlap, disableSwapping = _a.disableSwapping, disableVHBounds = _a.disableVHBounds, closeOnResize = _a.closeOnResize, closeOnScroll = _a.closeOnScroll, propDisableShowOnFocus = _a.disableShowOnFocus, isListAutocomplete = _a.isListAutocomplete, isInlineAutocomplete = _a.isInlineAutocomplete;
-    var inputRef = react_1.useRef(null);
-    var ref = react_1.useCallback(function (instance) {
-        utils_1.applyRef(instance, forwardedRef);
-        inputRef.current = instance;
-    }, [forwardedRef]);
+    var _d = utils_1.useEnsuredRef(forwardedRef), ref = _d[0], refHandler = _d[1];
     var filter = utils_2.getFilterFunction(filterFn);
-    var _d = react_1.useState(function () {
+    var _e = react_1.useState(function () {
         var _a;
@@ -47,3 +43,3 @@ var options = __assign(__assign({}, filterOptions), { valueKey: valueKey, getItemValue: getResultValue, startsWith: (_a = filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.startsWith) !== null && _a !== void 0 ? _a : isInlineAutocomplete });
         };
-    }), _e = _d[0], stateValue = _e.value, match = _e.match, stateFilteredData = _e.filteredData, setState = _d[1];
+    }), _f = _e[0], stateValue = _f.value, match = _f.match, stateFilteredData = _f.filteredData, setState = _e[1];
     var filteredData = filterFn === "none" ? data : stateFilteredData;
@@ -63,3 +59,3 @@ var startsWith = (_b = filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.startsWith) !== null && _b !== void 0 ? _b : isInlineAutocomplete;
             nextMatch = getResultValue(filtered[0], valueKey);
-            var input = inputRef.current;
+            var input = ref.current;
             if (input && !isBackspace) {
@@ -72,2 +68,3 @@ input.value = nextMatch;
     }, [
+        ref,
         data,
@@ -95,3 +92,3 @@ filter,
     }, [setValue, onChange]);
-    var _f = utils_1.useToggle(false), visible = _f[0], show = _f[1], hide = _f[2];
+    var _g = utils_1.useToggle(false), visible = _g[0], show = _g[1], hide = _g[2];
     var isTouch = utils_1.useIsUserInteractionMode("touch");
@@ -158,3 +155,3 @@ var disableShowOnFocus = propDisableShowOnFocus !== null && propDisableShowOnFocus !== void 0 ? propDisableShowOnFocus : isTouch;
     var listboxRef = react_1.useRef(null);
-    var _g = utils_1.useActiveDescendantMovement(__assign(__assign({}, utils_1.MovementPresets.VERTICAL_COMBOBOX), { getId: getResultId, items: filteredData, baseId: suggestionsId, onChange: function (_a, itemRefs) {
+    var _h = utils_1.useActiveDescendantMovement(__assign(__assign({}, utils_1.MovementPresets.VERTICAL_COMBOBOX), { getId: getResultId, items: filteredData, baseId: suggestionsId, onChange: function (_a, itemRefs) {
             var index = _a.index, items = _a.items, target = _a.target;
@@ -235,10 +232,10 @@ // the default scroll into view behavior for aria-activedescendant
             }
-        } })), activeId = _g.activeId, itemRefs = _g.itemRefs, handleKeyDown = _g.onKeyDown, focusedIndex = _g.focusedIndex, setFocusedIndex = _g.setFocusedIndex;
+        } })), activeId = _h.activeId, itemRefs = _h.itemRefs, handleKeyDown = _h.onKeyDown, focusedIndex = _h.focusedIndex, setFocusedIndex = _h.setFocusedIndex;
     utils_1.useCloseOnOutsideClick({
         enabled: visible,
-        element: inputRef.current,
+        element: ref.current,
         onOutsideClick: hide,
     });
-    var _h = transition_1.useFixedPositioning({
-        fixedTo: function () { return inputRef.current; },
+    var _j = transition_1.useFixedPositioning({
+        fixedTo: function () { return ref.current; },
         anchor: anchor,
@@ -261,3 +258,3 @@ onScroll: function (_event, _a) {
         disableVHBounds: disableVHBounds,
-    }), style = _h.style, onEnter = _h.onEnter, onEntering = _h.onEntering, onEntered = _h.onEntered, onExited = _h.onExited, updateStyle = _h.updateStyle;
+    }), style = _j.style, onEnter = _j.onEnter, onEntering = _j.onEntering, onEntered = _j.onEntered, onExited = _j.onExited, updateStyle = _j.updateStyle;
     react_1.useEffect(function () {
@@ -288,3 +285,3 @@ if (!focused.current || autocompleted.current) {
     return {
-        ref: ref,
+        ref: refHandler,
         value: value,
@@ -291,0 +288,0 @@ match: match,

package.json

 {
   "name": "@react-md/autocomplete",
-  "version": "2.2.0",
+  "version": "2.3.0-alpha.0",
   "description": "",
@@ -45,10 +45,10 @@ "scripts": {
   "dependencies": {
-    "@react-md/form": "^2.2.0",
-    "@react-md/list": "^2.2.0",
+    "@react-md/form": "^2.3.0-alpha.0",
+    "@react-md/list": "^2.3.0-alpha.0",
     "@react-md/portal": "^2.0.2",
-    "@react-md/states": "^2.1.2",
-    "@react-md/theme": "^2.1.2",
-    "@react-md/transition": "^2.1.2",
-    "@react-md/typography": "^2.1.2",
-    "@react-md/utils": "^2.1.0",
+    "@react-md/states": "^2.3.0-alpha.0",
+    "@react-md/theme": "^2.3.0-alpha.0",
+    "@react-md/transition": "^2.3.0-alpha.0",
+    "@react-md/typography": "^2.3.0-alpha.0",
+    "@react-md/utils": "^2.3.0-alpha.0",
     "classnames": "^2.2.6"
@@ -69,3 +69,3 @@ },
   },
-  "gitHead": "0a4024848493b6ef1ed37c591ac68781360b8f45"
+  "gitHead": "1026b00201cb5ab60735372acd9b8abd26cc3c05"
 }

README.md

@@ -10,3 +10,3 @@ # @react-md/autocomplete
 ```sh
-$ npm install --save @react-md/autocomplete
+npm install --save @react-md/autocomplete
 ```
@@ -13,0 +13,0 @@

src/useAutoComplete.ts

@@ -18,3 +18,2 @@ import {
 import {
-  applyRef,
   ItemRefList,
@@ -25,2 +24,3 @@ MovementPresets,
   useCloseOnOutsideClick,
+  useEnsuredRef,
   useIsUserInteractionMode,
@@ -134,10 +134,3 @@ useToggle,
 }: AutoCompleteOptions): AutoCompleteReturnValue {
-  const inputRef = useRef<HTMLInputElement | null>(null);
-  const ref = useCallback(
-    (instance: HTMLInputElement | null) => {
-      applyRef(instance, forwardedRef);
-      inputRef.current = instance;
-    },
-    [forwardedRef]
-  );
+  const [ref, refHandler] = useEnsuredRef(forwardedRef);
 
@@ -196,3 +189,3 @@ const filter = getFilterFunction(filterFn);
 
-        const input = inputRef.current;
+        const input = ref.current;
         if (input && !isBackspace) {
@@ -207,2 +200,3 @@ input.value = nextMatch;
     [
+      ref,
       data,
@@ -428,3 +422,3 @@ filter,
     enabled: visible,
-    element: inputRef.current,
+    element: ref.current,
     onOutsideClick: hide,
@@ -441,3 +435,3 @@ });
   } = useFixedPositioning({
-    fixedTo: () => inputRef.current,
+    fixedTo: () => ref.current,
     anchor,
@@ -491,3 +485,3 @@ onScroll(_event, { visible }) {
   return {
-    ref,
+    ref: refHandler,
     value,
@@ -494,0 +488,0 @@ match,

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Worsened metrics

Total package byte prevSize

216969

decreased by-0.44%

Lines of code

3974

decreased by-0.3%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Addednanoid@3.3.8(transitive)

• - Removednanoid@3.3.7(transitive)

• Updated@react-md/form@^2.3.0-alpha.0

• Updated@react-md/list@^2.3.0-alpha.0

• Updated@react-md/states@^2.3.0-alpha.0

• Updated@react-md/theme@^2.3.0-alpha.0

• Updated@react-md/transition@^2.3.0-alpha.0

• Updated@react-md/typography@^2.3.0-alpha.0

• Updated@react-md/utils@^2.3.0-alpha.0