@antscorp/antsomi-ui 1.3.5-beta.822 → 1.3.5-beta.823

package/es/components/molecules/TagifyInput/TagifyInput.js

@@ -26,6 +26,7 @@ const TagifyInput = forwardRef((props, ref) => {
     const { initialValue, escapeHTML, status, readonly, readonlyTag, disabled, maxLength, maxHeight, minWidth, placeholder, acceptableTagPattern, mapAttributes, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onChange, } = props;
     // States
     const [inputTypeDebounce, , setInputTyping] = useDebounce(initialValue, 550);
+    const [isLineBreakDebounce, , setIsLineBreak] = useDebounce(hasLineBreak(initialValue), 250);
     // Refs
     const inputRef = useRef(null);
     const tagifyRef = useRef(null);
@@ -46,7 +47,6 @@ const TagifyInput = forwardRef((props, ref) => {
         return content;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    const isLineBreak = useMemo(() => hasLineBreak(initialValue), [initialValue]);
     // Expose some methods
     useImperativeHandle(ref, () => ({
         onAddNewTag: (newTag) => {
@@ -156,6 +156,18 @@ const TagifyInput = forwardRef((props, ref) => {
             onChange(convertedValue);
         }
     }, [onChange]);
+    /**
+     * Used to cover more case
+     * e.g: User select all data -> backspace -> remove all data in UI but [The Tagify lib do not trigger out anything]
+     */
+    const onTagifyBlur = useCallback((event) => {
+        if (event.detail) {
+            const { tagify } = event.detail;
+            const inputValue = tagify.getInputValue();
+            const convertedValue = convertInputStringToOriginal(inputValue);
+            onChange(convertedValue);
+        }
+    }, [onChange]);
     const customizeTag = useCallback((tagData, tagify) => {
         const { value, collection, label, type } = tagData;
         const { settings } = tagify;
@@ -510,6 +522,7 @@ const TagifyInput = forwardRef((props, ref) => {
             tagifyInstance.on('click', onTagItemClick);
             tagifyInstance.on('input', onTagifyTyping);
             tagifyInstance.on('remove', onTagifyRemoved);
+            tagifyInstance.on('blur', onTagifyBlur);
         }
         // Off listen to Tagify events
         return () => {
@@ -517,11 +530,14 @@ const TagifyInput = forwardRef((props, ref) => {
                 tagifyInstance.off('click', onTagItemClick);
                 tagifyInstance.off('input', onTagifyTyping);
                 tagifyInstance.off('remove', onTagifyRemoved);
+                tagifyInstance.off('blur', onTagifyBlur);
             }
         };
-    }, [onTagItemClick, onTagifyTyping, onTagifyRemoved]);
+    }, [onTagItemClick, onTagifyTyping, onTagifyRemoved, onTagifyBlur]);
     useUpdateEffect(() => {
         const convertedValue = convertInputStringToOriginal(inputTypeDebounce);
+        // Tracking if the tagify input is line break
+        setIsLineBreak(hasLineBreak(convertedValue));
         if (escapeHTML) {
             const unescapedValue = unescapeString(convertedValue);
             onChange(unescapedValue);
@@ -566,7 +582,7 @@ const TagifyInput = forwardRef((props, ref) => {
             }
         }
     }, [initialValue, mapAttributes, escapeHTML, acceptableTagPattern, makeValidLabelTags]);
-    return (_jsxs(TagifyWrapper, { ref: tagifyWrapperRef, "$cssTagifyVariables": cssVariablesMemoized, className: "tagify-container", id: "tagify-container", "data-test": "tagify-wrapper", "$status": status, "$maxHeight": maxHeight, "$minWidth": minWidth, "$tagifyFullWidth": isLineBreak, "$placeholder": placeholder, "$tagInvalidIcon": iconWarning, onClick: onTagifyWrapperClick, children: [_jsx(TagTextArea, { id: "tagify-textarea", ref: inputRef, name: name, defaultValue: parsedDefaultValue, "data-test": "tagify-input" }), _jsx(WrapperPlaceHolder, { "data-test": "wrapper-placeholder", ref: placeholderRef, "$isShow": !!children, children: children })] }));
+    return (_jsxs(TagifyWrapper, { ref: tagifyWrapperRef, "$cssTagifyVariables": cssVariablesMemoized, className: "tagify-container", id: "tagify-container", "data-test": "tagify-wrapper", "$status": status, "$maxHeight": maxHeight, "$minWidth": minWidth, "$tagifyFullWidth": isLineBreakDebounce, "$placeholder": placeholder, "$tagInvalidIcon": iconWarning, onClick: onTagifyWrapperClick, children: [_jsx(TagTextArea, { id: "tagify-textarea", ref: inputRef, name: name, defaultValue: parsedDefaultValue, "data-test": "tagify-input" }), _jsx(WrapperPlaceHolder, { "data-test": "wrapper-placeholder", ref: placeholderRef, "$isShow": !!children, children: children })] }));
 });
 TagifyInput.defaultProps = tagifyDefaultProps;
 export default memo(TagifyInput);

package/es/locales/ja/google-sheet.json

@@ -2400,7 +2400,7 @@
     "_WEBPER_TEMP_OBJ_INLINE_5": "ソーシャルプルーフディスプレイ",
     "_WEBPER_TEMP_OBJ_INLINE_6": "教育コンテンツ",
     "_WEBPER_TEMP_OBJ_SLIDEIN_1": "リードマグネット",
-    "_WEBPER_TEMP_OBJ_SLIDEIN_2": "終了意図",
+    "_WEBPER_TEMP_OBJ_SLIDEIN_2": "終了の意図",
     "_WEBPER_TEMP_OBJ_SLIDEIN_3": "コンテンツティーザー",
     "_WEBPER_TEMP_OBJ_SLIDEIN_4": "アンケートと投票",
     "_WEBPER_TEMP_OBJ_SLIDEIN_5": "ソーシャルプルーフディスプレイ",
@@ -2507,7 +2507,7 @@
     "_WEBPER_TEMP_OBJ_DES_POP_8": "ターゲットを絞ったオファー、インセンティブ、またはリマインダーを使用して、躊躇している買い物客に購入を完了させるよう促します。",
     "_WEBPER_TEMP_OBJ_DES_POP_9": "ソーシャル メディア プラットフォームでコミュニティを拡大し、ブランドの存在感を高めます",
     "_WEBPER_TEMP_OBJ_DES_POP_10": "参加者と興奮を促進する注目を集めるイベント プロモーションで成功への舞台を整えます。",
-    "_WEBPER_TEMP_OBJ_DES_POP_11": "魅力的な運ゲーやインタラクティブなコンテンツで興奮を呼び起こし、エンゲージメントを高め、ユーザーを何度もリピートさせます。",
+    "_WEBPER_TEMP_OBJ_DES_POP_11": "魅力的な運ゲーやインタラクティブなコンテンツで興奮を呼び起こし、エンゲージメントを高め、ユーザーを何度もリピートさせ続ける",
     "_WEBPER_TEMP_OBJ_DES_POP_12": "新規ユーザーを支援し、提供された回答に基づいてパーソナライズされた推奨事項を提供します",
     "_WEBPER_TEMP_OBJ_DES_POP_13": "直接リンクまたは QR コードを介してモバイル アプリをダウンロードしてスキャンするようユーザーに奨励します。",
     "_WEBPER_TEMP_OBJ_DES_FLOAT_1": "リード獲得フォームを含めて、訪問者にニュースレター、プロモーション、その他のマーケティング資料への登録を促します。",
@@ -2537,7 +2537,7 @@
     "_WEBPER_TEMP_OBJ_DES_SLIDEIN_6": "期間限定のオファー、カウントダウンタイマー、またはフラッシュセール通知を提示することで、緊迫感を醸成し、即時行動を促します。",
     "_WEBPER_TEMP_OBJ_DES_SLIDEIN_7": "ターゲットを絞ったオファー、インセンティブ、またはリマインダーを使用して、躊躇している買い物客に購入を完了させるよう促します。",
     "_WEBPER_TEMP_OBJ_DES_SLIDEIN_8": "顧客からの問い合わせの必要性を減らし、ショッピング体験の全体的な満足度を向上させるために、顧客が遭遇する可能性のある一般的な懸念事項や問題のトラブルシューティングに対処する",
-    "_WEBPER_TEMP_OBJ_DES_SLIDEIN_9": "登録や出欠確認のオプションを提供して、ウェビナー、ワークショップ、イベントに参加するようユーザーを招待し、参加とエンゲージメントを促進します。",
+    "_WEBPER_TEMP_OBJ_DES_SLIDEIN_9": "登録や出欠確認のオプションを提供して、ウェビナー、ワークショップ、イベントにユーザーを招待し、参加とエンゲージメントを促進します。",
     "_LINE_MESS_OBJ_DES_1": "各ユーザーの好み、行動、過去のやり取りに基づいてメッセージをカスタマイズする",
     "_LINE_MESS_OBJ_DES_2": "画像、ビデオ、ステッカーなどのマルチメディア コンテンツでメッセージを充実させます",
     "_LINE_MESS_OBJ_DES_3": "ユーザーの参加を促すために、クリック可能なボタンなどのインタラクティブな要素を組み込む",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.822",
+  "version": "1.3.5-beta.823",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",