@placekit/autocomplete-react - npm Package Compare versions

Comparing version 1.1.5 to 1.2.0

dist/placekit-react.cjs.js

@@ -1,2 +0,2 @@
-/*! @placekit/autocomplete-react v1.1.5 | © placekit.io | MIT license | https://github.com/placekit/autocomplete-react#readme */
+/*! @placekit/autocomplete-react v1.2.0 | © placekit.io | MIT license | https://github.com/placekit/autocomplete-react#readme */
 'use strict';
@@ -8,2 +8,17 @@
 
+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];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
 // dequal borrowed from https://github.com/lukeed/dequal/blob/master/src/lite.js
@@ -54,4 +69,5 @@ const has = Object.prototype.hasOwnProperty;
   const [state, setState] = React.useState({
-    isEmpty: true,
-    isFreeForm: true,
+    dirty: true,
+    empty: true,
+    freeForm: true,
     hasGeolocation: false
@@ -70,18 +86,7 @@ });
       ...opts
-    }).on('open', handlers?.onOpen).on('close', handlers?.onClose).on('results', handlers?.onResults).on('pick', handlers?.onPick).on('error', handlers?.onError).on('empty', bool => {
+    }).on('open', handlers?.onOpen).on('close', handlers?.onClose).on('results', handlers?.onResults).on('pick', handlers?.onPick).on('error', handlers?.onError).on('state', newState => {
       setState(prev => ({
         ...prev,
-        isEmpty: bool
+        ...newState
       }));
-      if (handlers?.onEmpty) {
-        handlers.onEmpty(bool);
-      }
-    }).on('freeForm', bool => {
-      setState(prev => ({
-        ...prev,
-        isFreeForm: bool
-      }));
-      if (handlers?.onFreeForm) {
-        handlers.onFreeForm(bool);
-      }
     }).on('geolocation', (bool, pos) => {
@@ -102,2 +107,8 @@ setState(prev => ({
   }, [apiKey, stableOptions, target.current]);
+  const onState = stableOptions.handlers?.onState;
+  React.useEffect(() => {
+    if (onState) {
+      onState(state);
+    }
+  }, [state, onState]);
   return {
@@ -110,3 +121,19 @@ target,
 
-const PlaceKit = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((props, ref) => {
+const PlaceKit = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(({
+  apiKey,
+  className,
+  useGeolocation,
+  options,
+  onOpen,
+  onClose,
+  onResults,
+  onPick,
+  onError,
+  onDirty,
+  onEmpty,
+  onFreeForm,
+  onState,
+  onGeolocation,
+  ...inputProps
+}, ref) => {
   const {
@@ -116,13 +143,15 @@ target,
     state
-  } = usePlaceKit(props.apiKey, {
-    ...props.options,
+  } = usePlaceKit(apiKey, {
+    ...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
+      onOpen,
+      onClose,
+      onResults,
+      onPick,
+      onError,
+      onDirty,
+      onEmpty,
+      onFreeForm,
+      onState,
+      onGeolocation
     }
@@ -138,6 +167,6 @@ });
     }
-  }, [target]);
+  }, [target.current]);
   return /*#__PURE__*/React.createElement("div", {
-    className: ['pka-input', props.className].filter(c => c).join(' ')
-  }, !!props.useGeolocation && /*#__PURE__*/React.createElement("button", {
+    className: ['pka-input', className].filter(c => c).join(' ')
+  }, !!useGeolocation && /*#__PURE__*/React.createElement("button", {
     type: "button",
@@ -149,3 +178,3 @@ className: ['pka-input-geolocation', state.hasGeolocation ? 'pka-enabled' : ''].filter(c => c).join(' '),
     onClick: client?.requestGeolocation,
-    disabled: props.disabled
+    disabled: inputProps.disabled
   }, /*#__PURE__*/React.createElement("span", {
@@ -159,15 +188,9 @@ className: "pka-sr-only"
     onClick: client?.clear,
-    disabled: props.disabled
+    disabled: inputProps.disabled
   }, /*#__PURE__*/React.createElement("span", {
     className: "pka-sr-only"
-  }, "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"
-  }));
+  }, "Clear value")), /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
+    type: "search",
+    ref: target
+  })));
 }));
@@ -206,12 +229,9 @@ PlaceKit.defaultProps = {
   onError: PropTypes.func,
+  onDirty: PropTypes.func,
   onEmpty: PropTypes.func,
   onFreeForm: 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
+  onState: PropTypes.func,
+  onGeolocation: PropTypes.func
+
+  // other HTML input props get forwarded
 };
@@ -218,0 +238,0 @@

dist/placekit-react.d.ts

@@ -1,3 +0,3 @@
-/*! @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';
+/*! @placekit/autocomplete-react v1.2.0 | © placekit.io | MIT license | https://github.com/placekit/autocomplete-react#readme */
+import type { PKAClient, PKAHandlers, PKAOptions, PKAState } from '@placekit/autocomplete-js';
 
@@ -10,4 +10,6 @@ type Handlers = {
   onError: PKAHandlers['error'];
+  onDirty: PKAHandlers['dirty'];
   onEmpty: PKAHandlers['empty'];
   onFreeForm: PKAHandlers['freeForm'];
+  onState: PKAHandlers['state'];
   onGeolocation: PKAHandlers['geolocation'];
@@ -30,5 +32,3 @@ };
   client: PKAClient;
-  state: {
-    isEmpty: boolean;
-    isFreeForm: boolean;
+  state: PKAState & {
     hasGeolocation: boolean;
@@ -35,0 +35,0 @@ };

package.json

 {
   "name": "@placekit/autocomplete-react",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "author": "PlaceKit <[e-mail]>",
@@ -55,3 +55,3 @@ "description": "PlaceKit Autocomplete React library",
   "dependencies": {
-    "@placekit/autocomplete-js": "^1.1.5",
+    "@placekit/autocomplete-js": "^1.2.2",
     "@types/react": "^18.2.8",
@@ -58,0 +58,0 @@ "prop-types": "^15.8.1"

README.md

@@ -96,7 +96,9 @@ <h1 align="center">
   onError={(error) => {}}
-  onEmpty={(isEmpty) => {}}
-  onFreeForm={(isFreeForm) => {}}
+  onDirty={(dirty) => {}}
+  onEmpty={(empty) => {}}
+  onFreeForm={(freeForm) => {}}
+  onState={(state) => {}}
   onGeolocation={(hasGeolocation, position) => {}}
 
-  // native HTML input props
+  // other HTML input props get forwarded
   id="my-input"
@@ -106,4 +108,4 @@ name="address"
   disabled={true}
-  required={true}
-  autoFocus={true}
+  defaultValue="France"
+  // ...
 />
@@ -114,3 +116,3 @@ ```
 
-A few additional notes:
+Some additional notes:
 - The `<input>` is using React `ref` attribute. It is therefore an [uncontrolled component](https://reactjs.org/docs/uncontrolled-components.html) and should be treated as such.
@@ -121,2 +123,3 @@ - If you want to customize the input style, create your own component using our [custom hook](#-custom-hook). You can reuse our component as a base.
 - ⚠️ 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.
+- ⚠️ Passing a non-empty value to `defaultValue` will automatically trigger a first search request when the user focuses the input.
 
@@ -147,3 +150,3 @@ ## 🪝 Custom hook
 - Don't pass a destructured object into `usePlaceKit` second argument (options), this will cause an infinite update loop as a destructured object will constantly be a fresh new value by nature.
-- `state` exposes stateless client properties (`isEmpty`, `isFreeForm` and `hasGeolocation`) as stateful ones.
+- `state` exposes stateless client properties (`dirty`, `empty`, `freeForm`, `hasGeolocation`) as stateful ones.
 
@@ -150,0 +153,0 @@ ⚠️ **NOTE:** you are **not** allowed to hide the PlaceKit logo unless we've delivered a special authorization. To request one, please contact us using [our contact form](https://placekit.io/about#contact).

No alert changes

Improved metrics

Total package byte prevSize

22815

increased by2.32%

Lines of code

473

increased by8.24%

Number of lines in readme file

153

increased by2%

Dependency changes

• Updated@placekit/autocomplete-js@^1.2.2