@heathmont/moon-core-tw - npm Package Compare versions

Comparing version 10.23.1 to 10.23.2

lib/es/tagsInput/private/types/TagsInputState.d.ts

@@ -9,5 +9,5 @@ import type Size from "./Size";
     selectedTagIndex?: number;
-    setSelectedTagIndex?: (newSelectedTag: number) => void;
+    selectTagOnClick?: (newSelectedTag: number) => void;
 };
 export default TagsInputState;
 //# sourceMappingURL=TagsInputState.d.ts.map

lib/es/tagsInput/private/utils/useNavigationTags.js

@@ -6,3 +6,5 @@ import { useState } from "react";
     if (keyCode === KEYS.ARROW_RIGHT) {
-        return selectedTagIndex < tagsLength ? selectedTagIndex + 1 : NO_FOCUS_TAG;
+        return selectedTagIndex < tagsLength - 1
+            ? selectedTagIndex + 1
+            : NO_FOCUS_TAG;
     }
@@ -9,0 +11,0 @@ return selectedTagIndex === NO_FOCUS_TAG

lib/es/tagsInput/TagsInput.js

@@ -12,3 +12,3 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
-import React, { forwardRef, useEffect, useRef, useState } from "react";
+import React, { forwardRef, useRef, useState } from "react";
 import { Listbox } from "@headlessui/react";
@@ -27,7 +27,7 @@ import getTextSize from "./private/utils/getTextSize";
     const { onKeyDownNavigationTags, selectedTagIndex, setSelectedTagIndex } = useNavigationTags(selected.length);
-    useEffect(() => {
-        if (selectedTagIndex !== NO_FOCUS_TAG && !isFocused) {
-            (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) && inputRef.current.focus();
-        }
-    }, [selectedTagIndex, isFocused]);
+    const selectTagOnClick = (newIndex) => {
+        var _a;
+        setSelectedTagIndex(newIndex);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
     const states = {
@@ -41,3 +41,3 @@ isUppercase,
         selectedTagIndex,
-        setSelectedTagIndex,
+        selectTagOnClick,
     };
@@ -87,2 +87,3 @@ const checkValidity = (event) => {
         setInputValue("");
+        selectedTagIndex !== NO_FOCUS_TAG && setSelectedTagIndex(NO_FOCUS_TAG);
     };
@@ -103,3 +104,3 @@ const onKeyDown = (e) => {
     const onChange = (e) => setInputValue(e.target.value);
-    const onFocus = (e) => {
+    const onFocus = () => {
         setIsFocused(true);
@@ -121,8 +122,8 @@ };
     var { className, index, label, isUppercase, classNameTagOnFocus } = _a, rest = __rest(_a, ["className", "index", "label", "isUppercase", "classNameTagOnFocus"]);
-    const { size, disabled, isError, onClear, selectedTagIndex, setSelectedTagIndex, } = useTagsInputContext("TagsInput.SelectedItem");
+    const { size, disabled, isError, onClear, selectedTagIndex, selectTagOnClick, } = useTagsInputContext("TagsInput.SelectedItem");
     const onClick = () => {
-        if (!setSelectedTagIndex) {
+        if (!selectTagOnClick) {
             return;
         }
-        setSelectedTagIndex(index);
+        selectTagOnClick(index);
     };
@@ -132,3 +133,3 @@ return (React.createElement("div", { key: index, className: mergeClassnames("flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full [&>div]:max-w-full", className) },
             React.createElement(SelectButton.Chip, { isUppercase: isUppercase, onClear: () => !disabled && onClear && onClear(index), onClick: onClick, className: mergeClassnames(selectedTagIndex === index
-                    ? (classNameTagOnFocus !== null && classNameTagOnFocus !== void 0 ? classNameTagOnFocus : "bg-piccolo")
+                    ? classNameTagOnFocus !== null && classNameTagOnFocus !== void 0 ? classNameTagOnFocus : "bg-piccolo"
                     : "") },
@@ -135,0 +136,0 @@ React.createElement("span", { className: "break-all truncate" }, label)))));

lib/tagsInput/private/types/TagsInputState.d.ts

@@ -9,5 +9,5 @@ import type Size from "./Size";
     selectedTagIndex?: number;
-    setSelectedTagIndex?: (newSelectedTag: number) => void;
+    selectTagOnClick?: (newSelectedTag: number) => void;
 };
 export default TagsInputState;
 //# sourceMappingURL=TagsInputState.d.ts.map

lib/tagsInput/private/utils/useNavigationTags.js

@@ -9,3 +9,5 @@ "use strict";
     if (keyCode === navigationTagsTypes_1.KEYS.ARROW_RIGHT) {
-        return selectedTagIndex < tagsLength ? selectedTagIndex + 1 : exports.NO_FOCUS_TAG;
+        return selectedTagIndex < tagsLength - 1
+            ? selectedTagIndex + 1
+            : exports.NO_FOCUS_TAG;
     }
@@ -12,0 +14,0 @@ return selectedTagIndex === exports.NO_FOCUS_TAG

lib/tagsInput/TagsInput.js

@@ -54,7 +54,7 @@ "use strict";
     const { onKeyDownNavigationTags, selectedTagIndex, setSelectedTagIndex } = (0, useNavigationTags_1.useNavigationTags)(selected.length);
-    (0, react_1.useEffect)(() => {
-        if (selectedTagIndex !== useNavigationTags_1.NO_FOCUS_TAG && !isFocused) {
-            (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) && inputRef.current.focus();
-        }
-    }, [selectedTagIndex, isFocused]);
+    const selectTagOnClick = (newIndex) => {
+        var _a;
+        setSelectedTagIndex(newIndex);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
     const states = {
@@ -68,3 +68,3 @@ isUppercase,
         selectedTagIndex,
-        setSelectedTagIndex,
+        selectTagOnClick,
     };
@@ -114,2 +114,3 @@ const checkValidity = (event) => {
         setInputValue("");
+        selectedTagIndex !== useNavigationTags_1.NO_FOCUS_TAG && setSelectedTagIndex(useNavigationTags_1.NO_FOCUS_TAG);
     };
@@ -130,3 +131,3 @@ const onKeyDown = (e) => {
     const onChange = (e) => setInputValue(e.target.value);
-    const onFocus = (e) => {
+    const onFocus = () => {
         setIsFocused(true);
@@ -148,8 +149,8 @@ };
     var { className, index, label, isUppercase, classNameTagOnFocus } = _a, rest = __rest(_a, ["className", "index", "label", "isUppercase", "classNameTagOnFocus"]);
-    const { size, disabled, isError, onClear, selectedTagIndex, setSelectedTagIndex, } = (0, useTagsInputContext_1.useTagsInputContext)("TagsInput.SelectedItem");
+    const { size, disabled, isError, onClear, selectedTagIndex, selectTagOnClick, } = (0, useTagsInputContext_1.useTagsInputContext)("TagsInput.SelectedItem");
     const onClick = () => {
-        if (!setSelectedTagIndex) {
+        if (!selectTagOnClick) {
             return;
         }
-        setSelectedTagIndex(index);
+        selectTagOnClick(index);
     };
@@ -159,3 +160,3 @@ return (react_1.default.createElement("div", { key: index, className: (0, index_1.mergeClassnames)("flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full [&>div]:max-w-full", className) },
             react_1.default.createElement(index_1.SelectButton.Chip, { isUppercase: isUppercase, onClear: () => !disabled && onClear && onClear(index), onClick: onClick, className: (0, index_1.mergeClassnames)(selectedTagIndex === index
-                    ? (classNameTagOnFocus !== null && classNameTagOnFocus !== void 0 ? classNameTagOnFocus : "bg-piccolo")
+                    ? classNameTagOnFocus !== null && classNameTagOnFocus !== void 0 ? classNameTagOnFocus : "bg-piccolo"
                     : "") },
@@ -162,0 +163,0 @@ react_1.default.createElement("span", { className: "break-all truncate" }, label)))));

package.json

 {
   "name": "@heathmont/moon-core-tw",
   "sideEffects": false,
-  "version": "10.23.1",
+  "version": "10.23.2",
   "files": [
@@ -6,0 +6,0 @@ "lib"

No alert changes

Improved metrics

Total package byte prevSize

1345158

0.23%

Number of package files

2277

0.53%

Lines of code

21344

0.3%

No dependency changes