@antscorp/antsomi-ui 1.3.7-beta.4 → 1.3.7-beta.6

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

@@ -25,7 +25,7 @@ const { CUSTOM_TAG } = TAG_TYPE;
 const { PREPARING_ST, INVALID_TAG, MESSAGE_TAG, FORCE_SHOW_TOOLTIP } = TAG_CUSTOM_ATTRIBUTES;
 const TagifyInput = forwardRef((props, ref) => {
     // Props
-    const { initialValue, escapeHTML, status, readonly, readonlyTag, readonlyText, realtime, disabled, maxLength, maxHeight, minWidth, placeholder, minWidthPlaceholder, isSingleLineText, acceptableTagPattern, tagProperties, mapAttributes = {}, mapErrorAttributes = {}, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onTagRemove, onChange, onRestoreTagProperty, } = props;
+    const { initialValue, escapeHTML, status, readonly, readonlyTag, readonlyText, readonlyWhenNotEmpty, realtime, disabled, maxLength, maxHeight, minWidth, placeholder, minWidthPlaceholder, isSingleLineText, acceptableTagPattern, tagProperties, mapAttributes = {}, mapErrorAttributes = {}, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onTagRemove, onChange, onRestoreTagProperty, onBlur, } = props;
     // States
     const [isLineBreak, setIsLineBreak] = useState(hasLineBreak(initialValue));
     const [tooltipRefresher, setTooltipRefresher] = useState(1);
@@ -768,17 +768,26 @@ const TagifyInput = forwardRef((props, ref) => {
         }
     }, [maxLength, customizeTag]);
     useEffect(() => {
-        if (!tagifyRef.current || typeof readonlyText === 'undefined')
+        if (!tagifyRef.current)
+            return;
+        // Skip if neither readonlyText nor readonlyWhenNotEmpty is defined
+        if (typeof readonlyText === 'undefined' && !readonlyWhenNotEmpty)
             return;
         const inputEl = tagifyRef.current.DOM.input;
-        if (typeof readonlyText === 'function') {
+        // readonlyWhenNotEmpty takes priority if both are set
+        if (readonlyWhenNotEmpty) {
+            const cleanValue = tagifyRef.current.getInputValue();
+            const hasContent = cleanValue.length > 0;
+            inputEl.setAttribute('contenteditable', hasContent ? 'false' : 'true');
+        }
+        else if (typeof readonlyText === 'function') {
             const isReadonlyText = readonlyText(tagifyRef.current.getCleanValue());
             inputEl.setAttribute('contenteditable', isReadonlyText ? 'false' : 'true');
         }
-        else {
+        else if (typeof readonlyText !== 'undefined') {
             inputEl.setAttribute('contenteditable', readonlyText ? 'false' : 'true');
         }
-    }, [readonlyText, tagLength]);
+    }, [readonlyText, readonlyWhenNotEmpty, tagLength]);
     const onTagifyWrapperClick = useCallback(event => {
         event.preventDefault();
         event.stopPropagation();
@@ -978,6 +987,8 @@ const TagifyInput = forwardRef((props, ref) => {
             tagifyInstance.on('change', onTagifyChangedDebounce);
             tagifyInstance.on('remove', onTagifyRemoveTag);
             tagifyInstance.on('keydown', onKeyDown);
+            if (onBlur)
+                tagifyInstance.on('blur', onBlur);
         }
         // Off listen to Tagify events
         return () => {
@@ -987,9 +998,12 @@ const TagifyInput = forwardRef((props, ref) => {
                 tagifyInstance.off('change', onTagifyChangedDebounce);
                 tagifyInstance.off('remove', onTagifyRemoveTag);
                 tagifyInstance.off('keydown', onKeyDown);
+                if (onBlur)
+                    tagifyInstance.off('blur', onBlur);
             }
         };
     }, [
+        onBlur,
         onTagItemClick,
         onInputTagifyDebounce,
         onTagifyChangedDebounce,

package/es/components/molecules/TagifyInput/types.d.ts

@@ -146,6 +146,11 @@ export interface TagifyInputProps {
      * @default () => {}
      */
     onChange: (inputValue: string) => void;
+    /**
+     * Event handler triggered when the input value is blurred.
+     * Receives the updated input value as a string, allowing for controlled component updates.
+     */
+    onBlur?: (event: CustomEvent<Tagify.BlurEventData<TagDataCustomize>>) => void;
     /**
      * Event handler triggered when found mismatch tag properties.
      * Receives an array of tag properties that were restored (e.g., via undo operation).
@@ -155,6 +160,14 @@ export interface TagifyInputProps {
      * Defines whether the input text is read but not the whole tags.
      */
     readonlyText?: boolean | ((listTags: TagDataCustomize[]) => boolean);
+    /**
+     * When true, automatically sets the input text to readonly (contenteditable='false')
+     * when the input is not empty (has tags or content).
+     * This is a convenience prop that internally uses readonlyText callback.
+     *
+     * @default false
+     */
+    readonlyWhenNotEmpty?: boolean;
 }
 export interface TagifyInputRef {
     onAddNewTag: (newTag: TagDataCustomize | string) => void;

package/package.json

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