@placekit/autocomplete-react - npm Package Compare versions

Comparing version 1.1.4 to 1.1.5

dist/placekit-react.cjs.js

@@ -1,2 +0,2 @@
-/*! @placekit/autocomplete-react v1.1.4 | © placekit.io | MIT license | https://github.com/placekit/autocomplete-react#readme */
+/*! @placekit/autocomplete-react v1.1.5 | © placekit.io | MIT license | https://github.com/placekit/autocomplete-react#readme */
 'use strict';
@@ -8,19 +8,42 @@
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
+// dequal borrowed from https://github.com/lukeed/dequal/blob/master/src/lite.js
+const has = Object.prototype.hasOwnProperty;
+const dequal = (foo, bar) => {
+  let ctor;
+  let len;
+  if (foo === bar) return true;
+  if (foo && bar && (ctor = foo.constructor) === bar.constructor) {
+    if (ctor === Date) return foo.getTime() === bar.getTime();
+    if (ctor === RegExp) return foo.toString() === bar.toString();
+    if (ctor === Array) {
+      if ((len = foo.length) === bar.length) {
+        while (len-- && dequal(foo[len], bar[len]));
       }
+      return len === -1;
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
+    if (!ctor || typeof foo === 'object') {
+      len = 0;
+      // eslint-disable-next-line guard-for-in
+      for (ctor in foo) {
+        if (has.call(foo, ctor) && ++len && !has.call(bar, ctor)) return false;
+        if (!(ctor in bar) || !dequal(foo[ctor], bar[ctor])) return false;
+      }
+      return Object.keys(bar).length === len;
+    }
+  }
+  return foo !== foo && bar !== bar;
+};
 
-const usePlaceKit = (apiKey, options) => {
-  if (!['object', 'undefined'].includes(typeof options) || Array.isArray(options) || options === null) {
+// prevent re-renders when options prop is an object literal
+const useStableValue = value => {
+  const [stableValue, setStableValue] = React.useState(() => value);
+  if (!dequal(stableValue, value)) {
+    setStableValue(value);
+  }
+  return stableValue;
+};
+
+const usePlaceKit = (apiKey, options = {}) => {
+  const stableOptions = useStableValue(options);
+  if (!['object', 'undefined'].includes(typeof stableOptions) || Array.isArray(stableOptions) || stableOptions === null) {
     throw Error('PlaceKit: `options` parameter is invalid, expected an object.');
@@ -42,3 +65,3 @@ }
       ...opts
-    } = options || {};
+    } = stableOptions || {};
     const pka = placekitAutocomplete(apiKey, {
@@ -77,3 +100,3 @@ target: target.current,
     };
-  }, [apiKey, options, target]);
+  }, [apiKey, stableOptions, target.current]);
   return {
@@ -86,32 +109,3 @@ target,
 
-const PlaceKit = /*#__PURE__*/React.forwardRef(({
-  apiKey,
-  useGeolocation,
-  className,
-  options,
-  onOpen,
-  onClose,
-  onResults,
-  onPick,
-  onError,
-  onGeolocation,
-  onEmpty,
-  onFreeForm,
-  ...inputProps
-}, ref) => {
-  const opts = React.useMemo(() => {
-    const output = options;
-    if (!output.handlers) {
-      output.handlers = {};
-    }
-    output.handlers.onOpen = onOpen;
-    output.handlers.onClose = onClose;
-    output.handlers.onResults = onResults;
-    output.handlers.onPick = onPick;
-    output.handlers.onError = onError;
-    output.handlers.onGeolocation = onGeolocation;
-    output.handlers.onEmpty = onEmpty;
-    output.handlers.onFreeForm = onFreeForm;
-    return output;
-  }, [options, onOpen, onClose, onResults, onPick, onError, onGeolocation, onFreeForm]);
+const PlaceKit = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -121,3 +115,15 @@ target,
     state
-  } = usePlaceKit(apiKey, opts);
+  } = usePlaceKit(props.apiKey, {
+    ...props.options,
+    handlers: {
+      onOpen: props.onOpen,
+      onClose: props.onClose,
+      onResults: props.onResults,
+      onPick: props.onPick,
+      onError: props.onError,
+      onGeolocation: props.onGeolocation,
+      onEmpty: props.onEmpty,
+      onFreeForm: props.onFreeForm
+    }
+  });
   React.useEffect(() => {
@@ -133,4 +139,4 @@ if (target.current && ref) {
   return /*#__PURE__*/React.createElement("div", {
-    className: ['pka-input', className].filter(c => c).join(' ')
-  }, !!useGeolocation && /*#__PURE__*/React.createElement("button", {
+    className: ['pka-input', props.className].filter(c => c).join(' ')
+  }, !!props.useGeolocation && /*#__PURE__*/React.createElement("button", {
     type: "button",
@@ -142,3 +148,3 @@ className: ['pka-input-geolocation', state.hasGeolocation ? 'pka-enabled' : ''].filter(c => c).join(' '),
     onClick: client?.requestGeolocation,
-    disabled: inputProps.disabled
+    disabled: props.disabled
   }, /*#__PURE__*/React.createElement("span", {
@@ -152,20 +158,27 @@ className: "pka-sr-only"
     onClick: client?.clear,
-    disabled: inputProps.disabled
+    disabled: props.disabled
   }, /*#__PURE__*/React.createElement("span", {
     className: "pka-sr-only"
-  }, "Clear value")), /*#__PURE__*/React.createElement("input", _extends({
-    placeholder: "Search places..."
-  }, inputProps, {
+  }, "Clear value")), /*#__PURE__*/React.createElement("input", {
     ref: target,
+    id: props.id,
+    name: props.name,
+    placeholder: props.placeholder,
+    disabled: props.disabled,
+    required: props.required,
+    autoFocus: props.autoFocus,
     type: "search"
-  })));
-});
+  }));
+}));
 PlaceKit.defaultProps = {
   useGeolocation: true,
-  options: {}
+  options: {},
+  placeholder: "Search places..."
 };
 PlaceKit.propTypes = {
-  apiKey: PropTypes.string.isRequired,
+  // component options
   useGeolocation: PropTypes.bool,
   className: PropTypes.string,
+  // PlaceKit Autocomplete JS options
+  apiKey: PropTypes.string.isRequired,
   options: PropTypes.shape({
@@ -186,2 +199,3 @@ offset: PropTypes.number,
   }),
+  // event handlers
   onOpen: PropTypes.func,
@@ -194,3 +208,10 @@ onClose: PropTypes.func,
   onFreeForm: PropTypes.func,
-  onGeolocation: PropTypes.func
+  onGeolocation: PropTypes.func,
+  // native HTML input props
+  id: PropTypes.string,
+  name: PropTypes.string,
+  placeholder: PropTypes.string,
+  disabled: PropTypes.bool,
+  required: PropTypes.bool,
+  autoFocus: PropTypes.bool
 };
@@ -197,0 +218,0 @@

dist/placekit-react.d.ts

@@ -1,2 +0,2 @@
-/*! @placekit/autocomplete-react v1.1.4 | © placekit.io | MIT license | https://github.com/placekit/autocomplete-react#readme */
+/*! @placekit/autocomplete-react v1.1.5 | © placekit.io | MIT license | https://github.com/placekit/autocomplete-react#readme */
 import type { PKAClient, PKAHandlers, PKAOptions } from '@placekit/autocomplete-js';
@@ -3,0 +3,0 @@

package.json

 {
   "name": "@placekit/autocomplete-react",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "author": "PlaceKit <[e-mail]>",
@@ -41,13 +41,13 @@ "description": "PlaceKit Autocomplete React library",
   "devDependencies": {
-    "@babel/core": "^7.21.8",
-    "@babel/preset-react": "^7.18.6",
+    "@babel/core": "^7.22.1",
+    "@babel/preset-react": "^7.22.3",
     "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^24.1.0",
-    "@rollup/plugin-node-resolve": "^15.0.2",
-    "eslint": "^8.40.0",
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "eslint": "^8.42.0",
     "eslint-config-google": "^0.14.0",
     "eslint-plugin-react": "^7.32.2",
     "npm-watch": "^0.11.0",
-    "rimraf": "^5.0.0",
-    "rollup": "^3.21.6",
+    "rimraf": "^5.0.1",
+    "rollup": "^3.23.1",
     "rollup-plugin-copy": "^3.4.0"
@@ -57,3 +57,3 @@ },
     "@placekit/autocomplete-js": "^1.1.5",
-    "@types/react": "^18.2.6",
+    "@types/react": "^18.2.8",
     "prop-types": "^15.8.1"
@@ -60,0 +60,0 @@ },

README.md

@@ -67,3 +67,3 @@ <h1 align="center">
 <PlaceKit
-  apiKey="<your-api-key>"
+  // component options
   useGeolocation={false} // hide "ask geolocation" button
@@ -73,2 +73,3 @@ className="your-custom-classes" // <div> wrapper custom classes
   // PlaceKit Autocomplete JS options
+  apiKey="<your-api-key>"
   options={{
@@ -91,3 +92,3 @@ offset: 4,
 
-  // handlers
+  // event handlers (⚠️ use useCallback, see notes)
   onOpen={() => {}}
@@ -102,3 +103,3 @@ onClose={() => {}}
 
-  // and other native properties will be forwared to the <input> element
+  // native HTML input props
   id="my-input"
@@ -108,2 +109,4 @@ name="address"
   disabled={true}
+  required={true}
+  autoFocus={true}
 />
@@ -119,2 +122,3 @@ ```
 - Handlers are exposed directly as properties for ease of access.
+- ⚠️ Make sure you memoize handler functions with `useCallback`, otherwise the `<PlaceKit>` component will re-render each time the wrapping component re-renders, causing the PlaceKit client to remount, and the suggestions lists to flush.
 
@@ -121,0 +125,0 @@ ## 🪝 Custom hook

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

22297

increased by10.77%

Lines of code

437

increased by10.08%

Number of lines in readme file

150

increased by2.74%

Dependency changes

• Updated@types/react@^18.2.8