react-tag-autocomplete - npm Package Compare versions

Comparing version 7.5.0 to 7.5.1

changelog.md

 # Changelog
 
+## v7.5.1
+
+- Added exports for `NewOptionValue` and `NoOptionsValue` symbols
+
 ## v7.5.0
@@ -4,0 +8,0 @@

dist/ReactTags.cjs.js

@@ -7,12 +7,9 @@ "use strict";
   Escape: "Escape",
-  Tab: "Tab",
   Backspace: "Backspace",
   UpArrow: "ArrowUp",
-  UpArrowCompat: "Up",
   DownArrow: "ArrowDown",
-  DownArrowCompat: "Down",
   PageDown: "PageDown",
   PageUp: "PageUp"
 };
-const NewOptionValue = Symbol("Create new tag");
+const NewOptionValue = Symbol("New option");
 const NoOptionsValue = Symbol("No options");
@@ -54,3 +51,3 @@ const VoidFn = () => void 0;
 function getNewTag(option, value) {
-  if ((option == null ? void 0 : option.value) === NewOptionValue && option.disabled === false) {
+  if (option?.value === NewOptionValue && option.disabled === false) {
     return { value, label: value };
@@ -147,4 +144,3 @@ }
     const onBlur = (e) => {
-      var _a;
-      if (((_a = comboBoxRef.current) == null ? void 0 : _a.contains(e.relatedTarget)) === false) {
+      if (comboBoxRef.current?.contains(e.relatedTarget) === false) {
         managerRef.current.listBoxCollapse();
@@ -276,5 +272,4 @@ }
   React.useLayoutEffect(() => {
-    var _a;
     if (allowResize) {
-      const newWidth = Math.ceil(((_a = sizerRef.current) == null ? void 0 : _a.scrollWidth) ?? 0) + 2;
+      const newWidth = Math.ceil(sizerRef.current?.scrollWidth ?? 0) + 2;
       if (width !== newWidth) setWidth(newWidth);
@@ -296,5 +291,4 @@ }
     (e) => {
-      var _a;
       if (e.target !== inputRef.current) {
-        (_a = inputRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
+        inputRef.current?.focus({ preventScroll: true });
       }
@@ -305,5 +299,4 @@ },
   React.useEffect(() => {
-    var _a;
     if (scrollToTop) {
-      (_a = listBoxRef.current) == null ? void 0 : _a.scrollTo({ top: 0 });
+      listBoxRef.current?.scrollTo({ top: 0 });
     }
@@ -394,3 +387,3 @@ }, [listBoxRef, scrollToTop]);
         setLastActiveOption(null);
-        onCollapse == null ? void 0 : onCollapse();
+        onCollapse?.();
       }
@@ -403,3 +396,3 @@ },
         setLastActiveOption(options[activeIndex]);
-        onExpand == null ? void 0 : onExpand();
+        onExpand?.();
       }
@@ -414,7 +407,7 @@ },
         setValue(newValue);
-        onInput == null ? void 0 : onInput(newValue);
+        onInput?.(newValue);
       }
     },
     selectTag(tag) {
-      tag ?? (tag = findSelectedOption(state));
+      tag ??= findSelectedOption(state);
       if (tag) {
@@ -445,5 +438,4 @@ const tagIndex = findTagIndex(tag, state.selected);
   const onClick = React.useCallback(() => {
-    var _a;
     managerRef.current.selectTag();
-    (_a = inputRef.current) == null ? void 0 : _a.focus();
+    inputRef.current?.focus();
   }, [inputRef, managerRef]);
@@ -482,8 +474,6 @@ const onMouseDown = React.useCallback(() => {
       blur() {
-        var _a;
-        (_a = inputRef.current) == null ? void 0 : _a.blur();
+        inputRef.current?.blur();
       },
       focus() {
-        var _a;
-        (_a = inputRef.current) == null ? void 0 : _a.focus();
+        inputRef.current?.focus();
       },
@@ -529,15 +519,13 @@ get value() {
         setIsActive(true);
-        onFocus == null ? void 0 : onFocus();
+        onFocus?.();
       },
       onBlur() {
-        var _a;
-        if (!((_a = rootRef.current) == null ? void 0 : _a.contains(document.activeElement))) {
+        if (!rootRef.current?.contains(document.activeElement)) {
           setIsActive(false);
-          onBlur == null ? void 0 : onBlur();
+          onBlur?.();
         }
       },
       onClick() {
-        var _a;
         if (document.activeElement === rootRef.current) {
-          (_a = inputRef.current) == null ? void 0 : _a.focus();
+          inputRef.current?.focus();
         }
@@ -556,8 +544,7 @@ },
   React.useEffect(() => {
-    var _a, _b, _c, _d;
     if (shouldScroll) {
-      const targetHeight = (_a = targetRef.current) == null ? void 0 : _a.offsetHeight;
-      const targetOffset = (_b = targetRef.current) == null ? void 0 : _b.offsetTop;
-      const containerHeight = (_c = containerRef.current) == null ? void 0 : _c.offsetHeight;
-      const containerScroll = (_d = containerRef.current) == null ? void 0 : _d.scrollTop;
+      const targetHeight = targetRef.current?.offsetHeight;
+      const targetOffset = targetRef.current?.offsetTop;
+      const containerHeight = containerRef.current?.offsetHeight;
+      const containerScroll = containerRef.current?.scrollTop;
       if (targetOffset < containerScroll) {
@@ -586,13 +573,11 @@ containerRef.current.scrollTo(0, targetOffset);
 function useTagList({ label }) {
-  var _a;
   const { rootRef, managerRef } = React.useContext(GlobalContext);
   const listRef = React.useRef();
   const tagDeleted = managerRef.current.flags.tagsDeleted[0];
-  const isFocusInList = (_a = listRef.current) == null ? void 0 : _a.contains(document.activeElement);
+  const isFocusInList = listRef.current?.contains(document.activeElement);
   React.useLayoutEffect(() => {
-    var _a2, _b;
     if (tagDeleted) {
-      const isFocusInListNow = (_a2 = listRef.current) == null ? void 0 : _a2.contains(document.activeElement);
+      const isFocusInListNow = listRef.current?.contains(document.activeElement);
       if (isFocusInList && !isFocusInListNow) {
-        (_b = rootRef.current) == null ? void 0 : _b.focus({ preventScroll: true });
+        rootRef.current?.focus({ preventScroll: true });
       }
@@ -895,2 +880,4 @@ }
 const ReactTagsWithRef = React.forwardRef(ReactTags);
+exports.NewOptionValue = NewOptionValue;
+exports.NoOptionsValue = NoOptionsValue;
 exports.ReactTags = ReactTagsWithRef;

dist/ReactTags.es.js

@@ -5,12 +5,9 @@ import React, { useContext, useMemo, useRef, useState, useLayoutEffect, useCallback, useEffect } from "react";
   Escape: "Escape",
-  Tab: "Tab",
   Backspace: "Backspace",
   UpArrow: "ArrowUp",
-  UpArrowCompat: "Up",
   DownArrow: "ArrowDown",
-  DownArrowCompat: "Down",
   PageDown: "PageDown",
   PageUp: "PageUp"
 };
-const NewOptionValue = Symbol("Create new tag");
+const NewOptionValue = Symbol("New option");
 const NoOptionsValue = Symbol("No options");
@@ -52,3 +49,3 @@ const VoidFn = () => void 0;
 function getNewTag(option, value) {
-  if ((option == null ? void 0 : option.value) === NewOptionValue && option.disabled === false) {
+  if (option?.value === NewOptionValue && option.disabled === false) {
     return { value, label: value };
@@ -145,4 +142,3 @@ }
     const onBlur = (e) => {
-      var _a;
-      if (((_a = comboBoxRef.current) == null ? void 0 : _a.contains(e.relatedTarget)) === false) {
+      if (comboBoxRef.current?.contains(e.relatedTarget) === false) {
         managerRef.current.listBoxCollapse();
@@ -274,5 +270,4 @@ }
   useLayoutEffect(() => {
-    var _a;
     if (allowResize) {
-      const newWidth = Math.ceil(((_a = sizerRef.current) == null ? void 0 : _a.scrollWidth) ?? 0) + 2;
+      const newWidth = Math.ceil(sizerRef.current?.scrollWidth ?? 0) + 2;
       if (width !== newWidth) setWidth(newWidth);
@@ -294,5 +289,4 @@ }
     (e) => {
-      var _a;
       if (e.target !== inputRef.current) {
-        (_a = inputRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
+        inputRef.current?.focus({ preventScroll: true });
       }
@@ -303,5 +297,4 @@ },
   useEffect(() => {
-    var _a;
     if (scrollToTop) {
-      (_a = listBoxRef.current) == null ? void 0 : _a.scrollTo({ top: 0 });
+      listBoxRef.current?.scrollTo({ top: 0 });
     }
@@ -392,3 +385,3 @@ }, [listBoxRef, scrollToTop]);
         setLastActiveOption(null);
-        onCollapse == null ? void 0 : onCollapse();
+        onCollapse?.();
       }
@@ -401,3 +394,3 @@ },
         setLastActiveOption(options[activeIndex]);
-        onExpand == null ? void 0 : onExpand();
+        onExpand?.();
       }
@@ -412,7 +405,7 @@ },
         setValue(newValue);
-        onInput == null ? void 0 : onInput(newValue);
+        onInput?.(newValue);
       }
     },
     selectTag(tag) {
-      tag ?? (tag = findSelectedOption(state));
+      tag ??= findSelectedOption(state);
       if (tag) {
@@ -443,5 +436,4 @@ const tagIndex = findTagIndex(tag, state.selected);
   const onClick = useCallback(() => {
-    var _a;
     managerRef.current.selectTag();
-    (_a = inputRef.current) == null ? void 0 : _a.focus();
+    inputRef.current?.focus();
   }, [inputRef, managerRef]);
@@ -480,8 +472,6 @@ const onMouseDown = useCallback(() => {
       blur() {
-        var _a;
-        (_a = inputRef.current) == null ? void 0 : _a.blur();
+        inputRef.current?.blur();
       },
       focus() {
-        var _a;
-        (_a = inputRef.current) == null ? void 0 : _a.focus();
+        inputRef.current?.focus();
       },
@@ -527,15 +517,13 @@ get value() {
         setIsActive(true);
-        onFocus == null ? void 0 : onFocus();
+        onFocus?.();
       },
       onBlur() {
-        var _a;
-        if (!((_a = rootRef.current) == null ? void 0 : _a.contains(document.activeElement))) {
+        if (!rootRef.current?.contains(document.activeElement)) {
           setIsActive(false);
-          onBlur == null ? void 0 : onBlur();
+          onBlur?.();
         }
       },
       onClick() {
-        var _a;
         if (document.activeElement === rootRef.current) {
-          (_a = inputRef.current) == null ? void 0 : _a.focus();
+          inputRef.current?.focus();
         }
@@ -554,8 +542,7 @@ },
   useEffect(() => {
-    var _a, _b, _c, _d;
     if (shouldScroll) {
-      const targetHeight = (_a = targetRef.current) == null ? void 0 : _a.offsetHeight;
-      const targetOffset = (_b = targetRef.current) == null ? void 0 : _b.offsetTop;
-      const containerHeight = (_c = containerRef.current) == null ? void 0 : _c.offsetHeight;
-      const containerScroll = (_d = containerRef.current) == null ? void 0 : _d.scrollTop;
+      const targetHeight = targetRef.current?.offsetHeight;
+      const targetOffset = targetRef.current?.offsetTop;
+      const containerHeight = containerRef.current?.offsetHeight;
+      const containerScroll = containerRef.current?.scrollTop;
       if (targetOffset < containerScroll) {
@@ -584,13 +571,11 @@ containerRef.current.scrollTo(0, targetOffset);
 function useTagList({ label }) {
-  var _a;
   const { rootRef, managerRef } = useContext(GlobalContext);
   const listRef = useRef();
   const tagDeleted = managerRef.current.flags.tagsDeleted[0];
-  const isFocusInList = (_a = listRef.current) == null ? void 0 : _a.contains(document.activeElement);
+  const isFocusInList = listRef.current?.contains(document.activeElement);
   useLayoutEffect(() => {
-    var _a2, _b;
     if (tagDeleted) {
-      const isFocusInListNow = (_a2 = listRef.current) == null ? void 0 : _a2.contains(document.activeElement);
+      const isFocusInListNow = listRef.current?.contains(document.activeElement);
       if (isFocusInList && !isFocusInListNow) {
-        (_b = rootRef.current) == null ? void 0 : _b.focus({ preventScroll: true });
+        rootRef.current?.focus({ preventScroll: true });
       }
@@ -894,3 +879,5 @@ }
 export {
+  NewOptionValue,
+  NoOptionsValue,
   ReactTagsWithRef as ReactTags
 };

dist/ReactTags.umd.js

@@ -8,12 +8,9 @@ (function(global, factory) {
     Escape: "Escape",
-    Tab: "Tab",
     Backspace: "Backspace",
     UpArrow: "ArrowUp",
-    UpArrowCompat: "Up",
     DownArrow: "ArrowDown",
-    DownArrowCompat: "Down",
     PageDown: "PageDown",
     PageUp: "PageUp"
   };
-  const NewOptionValue = Symbol("Create new tag");
+  const NewOptionValue = Symbol("New option");
   const NoOptionsValue = Symbol("No options");
@@ -55,3 +52,3 @@ const VoidFn = () => void 0;
   function getNewTag(option, value) {
-    if ((option == null ? void 0 : option.value) === NewOptionValue && option.disabled === false) {
+    if (option?.value === NewOptionValue && option.disabled === false) {
       return { value, label: value };
@@ -148,4 +145,3 @@ }
       const onBlur = (e) => {
-        var _a;
-        if (((_a = comboBoxRef.current) == null ? void 0 : _a.contains(e.relatedTarget)) === false) {
+        if (comboBoxRef.current?.contains(e.relatedTarget) === false) {
           managerRef.current.listBoxCollapse();
@@ -277,5 +273,4 @@ }
     React.useLayoutEffect(() => {
-      var _a;
       if (allowResize) {
-        const newWidth = Math.ceil(((_a = sizerRef.current) == null ? void 0 : _a.scrollWidth) ?? 0) + 2;
+        const newWidth = Math.ceil(sizerRef.current?.scrollWidth ?? 0) + 2;
         if (width !== newWidth) setWidth(newWidth);
@@ -297,5 +292,4 @@ }
       (e) => {
-        var _a;
         if (e.target !== inputRef.current) {
-          (_a = inputRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
+          inputRef.current?.focus({ preventScroll: true });
         }
@@ -306,5 +300,4 @@ },
     React.useEffect(() => {
-      var _a;
       if (scrollToTop) {
-        (_a = listBoxRef.current) == null ? void 0 : _a.scrollTo({ top: 0 });
+        listBoxRef.current?.scrollTo({ top: 0 });
       }
@@ -395,3 +388,3 @@ }, [listBoxRef, scrollToTop]);
           setLastActiveOption(null);
-          onCollapse == null ? void 0 : onCollapse();
+          onCollapse?.();
         }
@@ -404,3 +397,3 @@ },
           setLastActiveOption(options[activeIndex]);
-          onExpand == null ? void 0 : onExpand();
+          onExpand?.();
         }
@@ -415,7 +408,7 @@ },
           setValue(newValue);
-          onInput == null ? void 0 : onInput(newValue);
+          onInput?.(newValue);
         }
       },
       selectTag(tag) {
-        tag ?? (tag = findSelectedOption(state));
+        tag ??= findSelectedOption(state);
         if (tag) {
@@ -446,5 +439,4 @@ const tagIndex = findTagIndex(tag, state.selected);
     const onClick = React.useCallback(() => {
-      var _a;
       managerRef.current.selectTag();
-      (_a = inputRef.current) == null ? void 0 : _a.focus();
+      inputRef.current?.focus();
     }, [inputRef, managerRef]);
@@ -483,8 +475,6 @@ const onMouseDown = React.useCallback(() => {
         blur() {
-          var _a;
-          (_a = inputRef.current) == null ? void 0 : _a.blur();
+          inputRef.current?.blur();
         },
         focus() {
-          var _a;
-          (_a = inputRef.current) == null ? void 0 : _a.focus();
+          inputRef.current?.focus();
         },
@@ -530,15 +520,13 @@ get value() {
           setIsActive(true);
-          onFocus == null ? void 0 : onFocus();
+          onFocus?.();
         },
         onBlur() {
-          var _a;
-          if (!((_a = rootRef.current) == null ? void 0 : _a.contains(document.activeElement))) {
+          if (!rootRef.current?.contains(document.activeElement)) {
             setIsActive(false);
-            onBlur == null ? void 0 : onBlur();
+            onBlur?.();
           }
         },
         onClick() {
-          var _a;
           if (document.activeElement === rootRef.current) {
-            (_a = inputRef.current) == null ? void 0 : _a.focus();
+            inputRef.current?.focus();
           }
@@ -557,8 +545,7 @@ },
     React.useEffect(() => {
-      var _a, _b, _c, _d;
       if (shouldScroll) {
-        const targetHeight = (_a = targetRef.current) == null ? void 0 : _a.offsetHeight;
-        const targetOffset = (_b = targetRef.current) == null ? void 0 : _b.offsetTop;
-        const containerHeight = (_c = containerRef.current) == null ? void 0 : _c.offsetHeight;
-        const containerScroll = (_d = containerRef.current) == null ? void 0 : _d.scrollTop;
+        const targetHeight = targetRef.current?.offsetHeight;
+        const targetOffset = targetRef.current?.offsetTop;
+        const containerHeight = containerRef.current?.offsetHeight;
+        const containerScroll = containerRef.current?.scrollTop;
         if (targetOffset < containerScroll) {
@@ -587,13 +574,11 @@ containerRef.current.scrollTo(0, targetOffset);
   function useTagList({ label }) {
-    var _a;
     const { rootRef, managerRef } = React.useContext(GlobalContext);
     const listRef = React.useRef();
     const tagDeleted = managerRef.current.flags.tagsDeleted[0];
-    const isFocusInList = (_a = listRef.current) == null ? void 0 : _a.contains(document.activeElement);
+    const isFocusInList = listRef.current?.contains(document.activeElement);
     React.useLayoutEffect(() => {
-      var _a2, _b;
       if (tagDeleted) {
-        const isFocusInListNow = (_a2 = listRef.current) == null ? void 0 : _a2.contains(document.activeElement);
+        const isFocusInListNow = listRef.current?.contains(document.activeElement);
         if (isFocusInList && !isFocusInListNow) {
-          (_b = rootRef.current) == null ? void 0 : _b.focus({ preventScroll: true });
+          rootRef.current?.focus({ preventScroll: true });
         }
@@ -896,4 +881,6 @@ }
   const ReactTagsWithRef = React.forwardRef(ReactTags);
+  exports2.NewOptionValue = NewOptionValue;
+  exports2.NoOptionsValue = NoOptionsValue;
   exports2.ReactTags = ReactTagsWithRef;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });

dist/types.d.ts

@@ -152,2 +152,4 @@ // Generated by dts-bundle-generator v8.1.2
 declare const ReactTagsWithRef: React.ForwardRefExoticComponent<ReactTagsProps & React.RefAttributes<PublicAPI>>;
+export declare const NewOptionValue: unique symbol;
+export declare const NoOptionsValue: unique symbol;
 
@@ -154,0 +156,0 @@ export {

package.json

 {
   "name": "react-tag-autocomplete",
-  "version": "7.5.0",
+  "version": "7.5.1",
   "description": "A simple, accessible, tagging component ready to drop into your React projects.",
@@ -41,23 +41,23 @@ "main": "dist/ReactTags.cjs.js",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.0.0",
-    "@testing-library/user-event": "^14.5.0",
-    "@types/node": "^18.0.0",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.0",
+    "@types/node": "^20.0.0",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-refresh": "^1.3.6",
-    "@vitest/coverage-v8": "^2.1.5",
-    "axe-core": "^4.10.0",
+    "@vitest/coverage-v8": "^3.2.4",
+    "axe-core": "^4.10.2",
     "dts-bundle-generator": "^8.1.2",
-    "eslint": "^9.16.0",
-    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint": "^9.32.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "husky": "^8.0.2",
     "jsdom": "^25.0.0",
     "lint-staged": "^15.2.0",
-    "prettier": "^3.4.2",
+    "prettier": "^3.6.2",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
-    "typescript": "^5.4.5",
-    "typescript-eslint": "^8.18.0",
-    "vite": "^5.4.10",
-    "vitest": "^2.1.5"
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.38.0",
+    "vite": "^7.1.0",
+    "vitest": "^3.2.4"
   },
@@ -64,0 +64,0 @@ "peerDependencies": {

No alert changes

Worsened metrics

Total package byte prevSize

402275

-0.55%

Lines of code

13230

-0.28%

No dependency changes