react-tag-autocomplete - npm Package Compare versions

Comparing version 7.0.0-rc.8 to 7.0.0

dist/ReactTags.cjs.js

@@ -269,13 +269,12 @@ "use strict";
   const { inputRef } = React.useContext(GlobalContext);
-  const [width, setWidth] = React.useState(0);
-  React.useEffect(() => {
-    if (inputRef.current) {
+  const [width, setWidth] = React.useState(null);
+  React.useLayoutEffect(() => {
+    if (allowResize && inputRef.current && sizerRef.current && window.getComputedStyle) {
       const inputStyle = window.getComputedStyle(inputRef.current);
       StyleProps.forEach((prop) => {
-        var _a;
         const value = inputStyle.getPropertyValue(prop);
-        (_a = sizerRef.current) == null ? void 0 : _a.style.setProperty(prop, value);
+        sizerRef.current.style.setProperty(prop, value);
       });
     }
-  }, [inputRef, sizerRef]);
+  }, [allowResize, inputRef, sizerRef]);
   React.useLayoutEffect(() => {
@@ -605,5 +604,4 @@ var _a;
   const { classNames } = React.useContext(GlobalContext);
-  let contents = option.label;
   if (option.value === NewOptionValue || option.value === NoOptionsValue) {
-    contents = replacePlaceholder(option.label, query);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, replacePlaceholder(option.label, query));
   }
@@ -614,6 +612,6 @@ if (query) {
       const highlighted = render({ text: result[1], classNames });
-      contents = [result[0], highlighted, result[2]];
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, result[0], highlighted, result[2]);
     }
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, contents);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, option.label);
 }
@@ -620,0 +618,0 @@ const MemoizedHighlight = React.memo(Highlight);

dist/ReactTags.es.js

@@ -1,2 +0,2 @@
-import React, { useContext, useMemo, useRef, useState, useEffect, useLayoutEffect, useCallback } from "react";
+import React, { useContext, useMemo, useRef, useState, useLayoutEffect, useCallback, useEffect } from "react";
 const KeyNames = {
@@ -267,13 +267,12 @@ Enter: "Enter",
   const { inputRef } = useContext(GlobalContext);
-  const [width, setWidth] = useState(0);
-  useEffect(() => {
-    if (inputRef.current) {
+  const [width, setWidth] = useState(null);
+  useLayoutEffect(() => {
+    if (allowResize && inputRef.current && sizerRef.current && window.getComputedStyle) {
       const inputStyle = window.getComputedStyle(inputRef.current);
       StyleProps.forEach((prop) => {
-        var _a;
         const value = inputStyle.getPropertyValue(prop);
-        (_a = sizerRef.current) == null ? void 0 : _a.style.setProperty(prop, value);
+        sizerRef.current.style.setProperty(prop, value);
       });
     }
-  }, [inputRef, sizerRef]);
+  }, [allowResize, inputRef, sizerRef]);
   useLayoutEffect(() => {
@@ -603,5 +602,4 @@ var _a;
   const { classNames } = useContext(GlobalContext);
-  let contents = option.label;
   if (option.value === NewOptionValue || option.value === NoOptionsValue) {
-    contents = replacePlaceholder(option.label, query);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, replacePlaceholder(option.label, query));
   }
@@ -612,6 +610,6 @@ if (query) {
       const highlighted = render({ text: result[1], classNames });
-      contents = [result[0], highlighted, result[2]];
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, result[0], highlighted, result[2]);
     }
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, contents);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, option.label);
 }
@@ -618,0 +616,0 @@ const MemoizedHighlight = React.memo(Highlight);

dist/ReactTags.umd.js

@@ -270,13 +270,12 @@ (function(global, factory) {
     const { inputRef } = React.useContext(GlobalContext);
-    const [width, setWidth] = React.useState(0);
-    React.useEffect(() => {
-      if (inputRef.current) {
+    const [width, setWidth] = React.useState(null);
+    React.useLayoutEffect(() => {
+      if (allowResize && inputRef.current && sizerRef.current && window.getComputedStyle) {
         const inputStyle = window.getComputedStyle(inputRef.current);
         StyleProps.forEach((prop) => {
-          var _a;
           const value = inputStyle.getPropertyValue(prop);
-          (_a = sizerRef.current) == null ? void 0 : _a.style.setProperty(prop, value);
+          sizerRef.current.style.setProperty(prop, value);
         });
       }
-    }, [inputRef, sizerRef]);
+    }, [allowResize, inputRef, sizerRef]);
     React.useLayoutEffect(() => {
@@ -606,5 +605,4 @@ var _a;
     const { classNames } = React.useContext(GlobalContext);
-    let contents = option.label;
     if (option.value === NewOptionValue || option.value === NoOptionsValue) {
-      contents = replacePlaceholder(option.label, query);
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, replacePlaceholder(option.label, query));
     }
@@ -615,6 +613,6 @@ if (query) {
         const highlighted = render({ text: result[1], classNames });
-        contents = [result[0], highlighted, result[2]];
+        return /* @__PURE__ */ React.createElement(React.Fragment, null, result[0], highlighted, result[2]);
       }
     }
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, contents);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, option.label);
   }
@@ -621,0 +619,0 @@ const MemoizedHighlight = React.memo(Highlight);

example/src/main.jsx

@@ -9,15 +9,19 @@ import React from 'react'
 
-const container1 = ReactDOM.createRoot(document.getElementById('demo-1'))
-container1.render(<CountrySelector />)
+// HACK: Wait for onload to ensure styles are loaded due to a bug with Safari
+// <https://github.com/i-like-robots/react-tag-autocomplete/issues/44>
+window.onload = () => {
+  const container1 = ReactDOM.createRoot(document.getElementById('demo-1'))
+  container1.render(<CountrySelector />)
 
-const container2 = ReactDOM.createRoot(document.getElementById('demo-2'))
-container2.render(<CustomTags />)
+  const container2 = ReactDOM.createRoot(document.getElementById('demo-2'))
+  container2.render(<CustomTags />)
 
-const container3 = ReactDOM.createRoot(document.getElementById('demo-3'))
-container3.render(<CustomValidity />)
+  const container3 = ReactDOM.createRoot(document.getElementById('demo-3'))
+  container3.render(<CustomValidity />)
 
-const container4 = ReactDOM.createRoot(document.getElementById('demo-4'))
-container4.render(<AsyncSuggestions />)
+  const container4 = ReactDOM.createRoot(document.getElementById('demo-4'))
+  container4.render(<AsyncSuggestions />)
 
-const container5 = ReactDOM.createRoot(document.getElementById('demo-5'))
-container5.render(<UsingTheAPI />)
+  const container5 = ReactDOM.createRoot(document.getElementById('demo-5'))
+  container5.render(<UsingTheAPI />)
+}

package.json

 {
   "name": "react-tag-autocomplete",
-  "version": "7.0.0-rc.8",
+  "version": "7.0.0",
   "description": "A simple, accessible, tagging component ready to drop into your React projects.",
@@ -44,4 +44,4 @@ "main": "dist/ReactTags.cjs.js",
     "@types/react": "^18.2.0",
-    "@typescript-eslint/eslint-plugin": "^5.56.0",
-    "@typescript-eslint/parser": "^5.56.0",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react-refresh": "^1.3.6",
@@ -51,8 +51,8 @@ "@vitest/coverage-v8": "^0.32.0",
     "dts-bundle-generator": "^8.0.0",
-    "eslint": "^8.36.0",
+    "eslint": "^8.45.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.0",
-    "jsdom": "^21.1.0",
+    "jsdom": "^22.1.0",
     "lint-staged": "^13.2.0",
-    "prettier": "^2.8.0",
+    "prettier": "^3.0.0",
     "react": "^18.2.0",
@@ -59,0 +59,0 @@ "react-dom": "^18.2.0",

readme.md

@@ -477,2 +477,6 @@ # React Tag Autocomplete
 
+#### `select()`
+
+Triggers the select function to add or remove the currently highlighted option.
+
 ### Styling
@@ -479,0 +483,0 @@

Fixed alerts

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

Improved metrics

Total package byte prevSize

394807

increased by0.26%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

500

increased by0.81%

Worsened metrics

Lines of code

12971

decreased by-0.01%

No dependency changes