@antscorp/antsomi-ui 1.3.7-beta.3 → 1.3.7-beta.5

package/es/components/atoms/index.d.ts

@@ -49,8 +49,6 @@ export * from './RateV2';
 export * from './Popover';
 export * from './Iframe';
 export * from './Avatar';
-export * from './NotificationStatus';
-export * from './List';
 export * from './SelectAssociatedTag';
 export * from './List';
 export * from './Upload';

package/es/components/atoms/index.js

@@ -49,8 +49,6 @@ export * from './RateV2';
 export * from './Popover';
 export * from './Iframe';
 export * from './Avatar';
-export * from './NotificationStatus';
-export * from './List';
 export * from './SelectAssociatedTag';
 export * from './List';
 export * from './Upload';

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

@@ -22,10 +22,10 @@ import { acceptablePatternChecking, detectURLRegex, getCachedRegex, getCustomTag
 // Constants
 import { DETECT_LINK, EMOJI, PERSONALIZE_PTN, SHORT_LINK, SHORT_LINK_PTN, SHORT_LINK_V2, TAG_TYPE, UNSUBSCRIBE_WHATSAPP, defaultCssVariables, tagifyDefaultProps, TAG_CUSTOM_ATTRIBUTES, } from './constants';
 const { CUSTOM_TAG } = TAG_TYPE;
-const { PREPARING_ST, INVALID_TAG, MESSAGE_TAG, FORCE_SHOW_TOOLTIP, ERROR_TAG, WARNING_TAG } = TAG_CUSTOM_ATTRIBUTES;
+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);
@@ -638,7 +638,7 @@ const TagifyInput = forwardRef((props, ref) => {
                         if (!isAccepted)
                             return;
                         const { url, shortener, label } = tagData;
-                        const { label: tagLabel, type: tagType, status, statusMsg, } = getShortLinkTagInfo({
+                        const { label: tagLabel, status, statusMsg, } = getShortLinkTagInfo({
                             type,
                             label,
                             shortener,
@@ -770,14 +770,24 @@ const TagifyInput = forwardRef((props, ref) => {
     useEffect(() => {
         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 (readonlyText) {
-            inputEl.setAttribute('contenteditable', 'false');
+        // 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 {
-            inputEl.setAttribute('contenteditable', 'true');
+        else if (typeof readonlyText === 'function') {
+            const isReadonlyText = readonlyText(tagifyRef.current.getCleanValue());
+            inputEl.setAttribute('contenteditable', isReadonlyText ? 'false' : 'true');
+        }
+        else if (typeof readonlyText !== 'undefined') {
+            inputEl.setAttribute('contenteditable', readonlyText ? 'false' : 'true');
         }
-    }, [readonlyText]);
+    }, [readonlyText, readonlyWhenNotEmpty, tagLength]);
     const onTagifyWrapperClick = useCallback(event => {
         event.preventDefault();
         event.stopPropagation();
@@ -977,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 () => {
@@ -986,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).
@@ -154,7 +159,15 @@ export interface TagifyInputProps {
     /**
      * Defines whether the input text is read but not the whole tags.
      */
-    readonlyText?: boolean;
+    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/es/types/index.d.ts

@@ -34,8 +34,8 @@ export * from './actionsButton';
 export * from './condition';
 export * from './api';
 export * from './date';
-export * from './unsubscribe';
 export * from './auth';
+export * from './unsubscribe';
 export type PayloadInfo = {
     url?: string;
     userId?: string;

package/es/types/index.js

@@ -9,5 +9,5 @@ export * from './actionsButton';
 export * from './condition';
 export * from './api';
 export * from './date';
-export * from './unsubscribe';
 export * from './auth';
+export * from './unsubscribe';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.7-beta.3",
+  "version": "1.3.7-beta.5",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -153,8 +153,7 @@
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.10",
     "rehype-highlight": "^6.0.0",
-    "remark-gfm": "^3.0.1",
-    "remark-gfm-alias-story": "npm:remark-gfm@4.0.0",
+    "remark-gfm": "^4",
     "reselect": "^5.1.1",
     "socket.io-client": "^4.7.5",
     "string-replace-to-array": "^2.1.0",
@@ -186,17 +185,11 @@
     "@babel/preset-typescript": "^7.23.3",
     "@commitlint/cli": "17.5.0",
     "@commitlint/config-conventional": "17.4.4",
-    "@storybook/addon-docs": "^8.6.9",
-    "@storybook/addon-essentials": "^8.6.9",
-    "@storybook/addon-links": "^8.6.9",
-    "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
-    "@storybook/blocks": "^8.6.9",
-    "@storybook/manager-api": "^8.6.9",
-    "@storybook/react": "^8.6.9",
-    "@storybook/react-webpack5": "^8.6.9",
-    "@storybook/test": "^8.6.9",
-    "@storybook/theming": "^8.6.9",
+    "@storybook/addon-docs": "^9.1.10",
+    "@storybook/addon-links": "^9.1.10",
+    "@storybook/addon-styling-webpack": "^2.0.0",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
+    "@storybook/react-webpack5": "^9.1.10",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.0",
@@ -247,7 +240,7 @@
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.12.0",
+    "eslint-plugin-storybook": "^9.1.10",
     "file-loader": "^6.2.0",
     "googleapis": "^142.0.0",
     "husky": "^8.0.3",
@@ -264,7 +257,7 @@
     "react-router-dom": "5.1.0 || 6.14.2",
     "sass": "^1.77.8",
     "sass-loader": "^16.0.1",
-    "storybook": "^8.6.9",
+    "storybook": "^9.1.10",
     "style-loader": "^4.0.0",
     "styled-components": "^5.3.9",
     "terser-webpack-plugin": "^5.3.10",