@antscorp/antsomi-ui 1.3.7-beta.7 → 1.3.7-beta.71

package/es/components/molecules/Select/styled.js

@@ -1,9 +1,55 @@
 // Libraries
 import styled from 'styled-components';
+import { Select as AntdSelect } from 'antd';
 // Components
 import { Tag } from '../../atoms/Tag';
 // Constants
 import { THEME } from '../../../constants';
+export const StyledSelect = styled(AntdSelect) `
+  &.antsomi-select-single {
+    min-height: 34px;
+  }
+
+  &.antsomi-select-multiple .antsomi-select-selector {
+    min-height: 34px;
+  }
+
+  &.antsomi-select-multiple:has(.antsomi-select-selection-overflow-item-rest) {
+    .antsomi-select-selection-overflow {
+      gap: 0;
+      flex-wrap: nowrap;
+    }
+
+    .antsomi-select-selection-overflow-item:not(.antsomi-select-selection-overflow-item-suffix) {
+      padding-right: 5px;
+    }
+
+    .antsomi-select-selection-overflow-item-rest .antsomi-select-selection-item {
+      height: auto;
+      margin: 0;
+      padding: 3px 10px;
+      border: 0;
+      border-radius: 15px;
+      background: ${THEME.token?.blue2};
+      font-size: ${THEME.token?.fontSize}px;
+      line-height: 1.8;
+    }
+
+    .antsomi-select-selection-overflow-item-rest .antsomi-select-selection-item-content {
+      margin: 0;
+    }
+
+    .antsomi-select-selection-overflow-item-suffix {
+      max-width: calc(100% - 80px);
+    }
+
+    .antsomi-select-selection-search,
+    .antsomi-select-selection-search-input {
+      min-width: 0;
+      max-width: 100%;
+    }
+  }
+`;
 export const StyledTag = styled(Tag) `
   position: relative;
   background-color: ${THEME.token?.blue2} !important;
@@ -14,6 +60,7 @@ export const StyledTag = styled(Tag) `
   font-size: ${THEME.token?.fontSize}px !important;
 
   .antsomi-tag-close-icon {
+    right: 6px !important;
     opacity: 0;
     transition: all 0.3s;
   }
@@ -25,16 +72,13 @@ export const StyledTag = styled(Tag) `
   }
 `;
 export const TagCloseBtn = styled.div `
-  position: absolute;
-  top: 3px;
-  right: 3px;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
   border-radius: 100%;
-  border: 2.5px solid ${p => (p.borderColor ? p.borderColor : '#cae5fe')};
+  border: 2px solid ${p => (p.borderColor ? p.borderColor : '#cae5fe')};
   background-color: #fff;
   color: ${THEME.token?.colorPrimary};
 `;

package/es/components/molecules/ShareAccess/ShareAccess.d.ts

@@ -1,2 +1,3 @@
+import React from 'react';
 import { ShareAccessProps } from './types';
-export declare const ShareAccess: (props: ShareAccessProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ShareAccess: React.MemoExoticComponent<(props: ShareAccessProps) => import("react/jsx-runtime").JSX.Element>;

package/es/components/molecules/ShareAccess/ShareAccess.js

@@ -1,32 +1,35 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable react/jsx-no-constructed-context-values */
-import { useReducer } from 'react';
+import { memo, useReducer } from 'react';
+import isEqual from 'react-fast-compare';
 import { ShareAccessDispatchContext, ShareAccessStateContext } from './context';
 import { LayoutContent } from './components';
 import { shareAccessReducer } from './reducer';
 import { updateObjAccessInfo } from './actions';
 import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks/useDeepCompareEffect';
-import { safeParseAccessInfo } from './utils';
-export const ShareAccess = (props) => {
-    const { accessInfo, excludeUserAccess, userId, onChange, userPermission } = props;
-    const [state, dispatch] = useReducer(shareAccessReducer(onChange), {
+import { fromRaw, safeParseAccessInfo } from './utils';
+export const ShareAccess = memo((props) => {
+    const { accessInfo, rawAccessInfo, excludeUserAccess, userId, onChange, onRawChange, userPermission, isLoading, } = props;
+    const [state, dispatch] = useReducer(shareAccessReducer(onChange, onRawChange), {
         modalTransferOwnership: {
             open: false,
             userToOwnerShipId: -1,
         },
     });
     useDeepCompareEffect(() => {
-        if (!accessInfo)
+        const resolved = rawAccessInfo ? fromRaw(rawAccessInfo) : accessInfo;
+        if (!resolved)
             return;
         dispatch(updateObjAccessInfo({
-            updated: safeParseAccessInfo(accessInfo),
+            updated: safeParseAccessInfo(resolved),
             triggerOut: false,
         }));
-    }, [accessInfo]);
+    }, [accessInfo, rawAccessInfo]);
     return (_jsx(ShareAccessStateContext.Provider, { value: {
             ...state,
             excludeUserAccess,
             accessUserId: userId,
             accessUserPermission: userPermission,
+            isLoading,
         }, children: _jsx(ShareAccessDispatchContext.Provider, { value: dispatch, children: _jsx(LayoutContent, { ...props }) }) }));
-};
+}, isEqual);

package/es/components/molecules/ShareAccess/components/LayoutContent/LayoutContent.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useShareAccess } from '../../hooks';
 import { GeneralAccess } from '../GeneralAccess';
 import { ModalTransferOwnership } from '../ModalTransferOwnerShip/ModalTransferOwnerShip';
 import { PeopleAccess } from '../PeopleAccess';
 import { SearchUser } from '../SearchUser';
 import { StyledLayoutContentRoot } from './styled';
 export const LayoutContent = (props) => {
-    const { getUserInfo, generalAccessSettings, excludeUserAccess, placeholder, allowAddUser = true, hideTransferOwnership, } = props;
-    // const { state } = useShareAccess();
-    // const { allowEdit, allowView } = state;
-    // if (!allowEdit && !allowView) return null;
-    return (_jsxs(StyledLayoutContentRoot, { children: [allowAddUser && _jsx(SearchUser, { getUserInfo: getUserInfo, placeholder: placeholder }), _jsx(PeopleAccess, { excludeUserAccess: excludeUserAccess, hideTransferOwnership: hideTransferOwnership }), _jsx(GeneralAccess, { generalAccessSettings: generalAccessSettings }), _jsx(ModalTransferOwnership, {})] }));
+    const { getUserInfo, generalAccessSettings, excludeUserAccess, placeholder, allowAddUser = true, hideTransferOwnership, className, } = props;
+    const { state } = useShareAccess();
+    const { isLoading } = state;
+    return (_jsxs(StyledLayoutContentRoot, { className: className, children: [!isLoading && allowAddUser && (_jsx(SearchUser, { getUserInfo: getUserInfo, placeholder: placeholder })), _jsx(PeopleAccess, { excludeUserAccess: excludeUserAccess, hideTransferOwnership: hideTransferOwnership }), _jsx(GeneralAccess, { generalAccessSettings: generalAccessSettings }), _jsx(ModalTransferOwnership, {})] }));
 };

package/es/components/molecules/ShareAccess/components/PeopleAccess/PeopleAccess.js

@@ -19,7 +19,7 @@ const ROLE_BY_ACTIONS = {
 export const PeopleAccess = (props) => {
     const { excludeUserAccess, hideTransferOwnership } = props;
     const { state, dispatch } = useShareAccess();
-    const { accessInfo, accessUserId, accessUserPermission } = state;
+    const { accessInfo, accessUserId, accessUserPermission, isLoading } = state;
     const dataSourceSorted = useMemo(() => {
         if (!Array.isArray(accessInfo?.listAccess))
             return [];
@@ -86,7 +86,7 @@ export const PeopleAccess = (props) => {
     };
     if (!accessInfo)
         return null;
-    return (_jsxs(StyledPeopleAccessRoot, { children: [_jsx("div", { className: "title", children: "People with access" }), _jsx(List, { dataSource: dataSourceSorted, loading: { spinning: dataSourceSorted.length === 0, indicator: _jsx(Spin, {}) }, renderItem: access => {
+    return (_jsxs(StyledPeopleAccessRoot, { children: [_jsx("div", { className: "title", children: "People with access" }), _jsx(List, { dataSource: dataSourceSorted, loading: { spinning: !!isLoading, indicator: _jsx(Spin, {}) }, renderItem: access => {
                     const actions = getActionsByUser({
                         userId: accessUserId,
                         updatedUserId: access.userId,

package/es/components/molecules/ShareAccess/hooks/useShareAccess.d.ts

@@ -3,7 +3,8 @@ export declare const useShareAccess: () => {
     state: {
         allowEdit: boolean;
         allowView: boolean;
-        accessInfo?: import("../types").ObjectAccessInfo | undefined;
+        accessInfo?: import("..").ObjectAccessInfo | undefined;
+        isLoading?: boolean | undefined;
         accessUserId?: number | undefined;
         accessUserPermission?: {
             view: number;

package/es/components/molecules/ShareAccess/index.d.ts

@@ -1,3 +1,4 @@
 export { ShareAccess } from './ShareAccess';
 export * as Constants from './constants';
 export * as Utils from './utils';
+export type { ObjectAccessInfo, ObjectAccessInfoRaw, UserAccessInfo, UserAccessInfoRaw, ShareAccessProps, } from './types';

package/es/components/molecules/ShareAccess/reducer.d.ts

@@ -1,2 +1,2 @@
 import { ShareAccessAction, ShareAccessProps, ShareAccessState } from './types';
-export declare const shareAccessReducer: (onChange: ShareAccessProps['onChange']) => (state: ShareAccessState, action: ShareAccessAction) => ShareAccessState;
+export declare const shareAccessReducer: (onChange: ShareAccessProps['onChange'], onRawChange: ShareAccessProps['onRawChange']) => (state: ShareAccessState, action: ShareAccessAction) => ShareAccessState;

package/es/components/molecules/ShareAccess/reducer.js

@@ -1,13 +1,16 @@
 import produce from 'immer';
-import { mappingOutData } from './utils';
 import { TYPES } from './constants';
-export const shareAccessReducer = (onChange) => (state, action) => produce(state, draft => {
+import { mappingOutData, toRaw } from './utils';
+export const shareAccessReducer = (onChange, onRawChange) => (state, action) => produce(state, draft => {
     switch (action.type) {
         case TYPES.UPDATE_OBJECT_ACCESS_INFO: {
             const { updated, triggerOut = true } = action.payload;
+            // console.log({ action });
             draft.accessInfo = updated;
-            if (onChange && triggerOut) {
-                onChange(mappingOutData(action.payload.updated));
+            if (triggerOut) {
+                const mapped = mappingOutData(action.payload.updated);
+                onChange?.(mapped);
+                onRawChange?.(toRaw(mapped));
             }
             break;
         }

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

@@ -27,28 +27,50 @@ export type ObjectAccessInfo = {
     ownerId: number;
     listAccess: UserAccessInfo[];
 };
+export type UserAccessInfoRaw = {
+    user_id: number;
+    role: number;
+    allow_view: number;
+    allow_edit: number;
+    allow_comment: number;
+    full_name?: string;
+    email?: string;
+    avatar?: string;
+    [key: string]: any;
+};
+export type ObjectAccessInfoRaw = {
+    is_public: number;
+    public_role: number | null;
+    owner_id?: number;
+    list_access: UserAccessInfoRaw[];
+};
 export type ActionKey = (typeof PEOPLE_ACTION_KEYS)[keyof typeof PEOPLE_ACTION_KEYS];
 export type ExcludeUserAccess = Array<ActionKey>;
 export type GeneralAccessSettings = {
     publicOnlyWith?: boolean;
 };
 export type ShareAccessProps = {
+    className?: string;
     userId?: number;
     userPermission?: {
         edit: number;
         view: number;
     };
     accessInfo?: ObjectAccessInfo;
+    isLoading?: boolean;
     allowAddUser?: boolean;
     placeholder?: string;
     excludeUserAccess?: ExcludeUserAccess;
     getUserInfo?(search: string, signal: AbortSignal): Promise<UserInfo[]> | UserInfo[];
     generalAccessSettings?: GeneralAccessSettings;
     onChange?: (accessInfo: ObjectAccessInfo) => void;
+    rawAccessInfo?: ObjectAccessInfoRaw;
+    onRawChange?: (raw: ObjectAccessInfoRaw) => void;
     hideTransferOwnership?: boolean;
 };
 export type ShareAccessState = {
     accessInfo?: ObjectAccessInfo;
+    isLoading?: boolean;
     accessUserId?: number;
     accessUserPermission?: {
         view: number;

package/es/components/molecules/ShareAccess/utils.d.ts

@@ -1,4 +1,4 @@
-import { ActionKey, ObjectAccessInfo, UserAccessInfo, UserInfo } from './types';
+import { ActionKey, ObjectAccessInfo, ObjectAccessInfoRaw, UserAccessInfo, UserInfo } from './types';
 export declare const mergePermission: (objectPermissionAllow: boolean, menuPermissionValue: number) => boolean;
 export declare const composeObjectMenuPermissions: (params: {
     isPublic: boolean;
@@ -54,6 +54,8 @@ export declare const safeParseAccessInfo: (accessInfo: ObjectAccessInfo) => {
     isPublic: number;
     publicRole: number | null;
 };
+export declare const fromRaw: (raw: ObjectAccessInfoRaw) => ObjectAccessInfo;
+export declare const toRaw: (info: ObjectAccessInfo) => ObjectAccessInfoRaw;
 export declare const mappingOutData: (shareAccess: ObjectAccessInfo) => {
     isPublic: number;
     publicRole: number | null;

package/es/components/molecules/ShareAccess/utils.js

@@ -1,5 +1,5 @@
 import { MENU_PERMISSION, PEOPLE_ACTIONS, PEOPLE_ACTION_KEYS, PUBLIC_ROLE, REGEX_REMOVE_NAME, ROLE_ACCESS_LABEL, ROLE_MAPPING, } from './constants';
-import { remove } from 'lodash';
+import { remove, mapKeys, camelCase, snakeCase } from 'lodash';
 import { snakeCaseToCamelCase } from '@antscorp/antsomi-ui/es/utils';
 export const mergePermission = (objectPermissionAllow, menuPermissionValue) => {
     const valueMapping = {
@@ -87,9 +87,42 @@ export const safeParseAccessInfo = (accessInfo) => {
     return {
         ...accessInfo,
         ownerId: +(ownerId || -1),
-        listAccess: accessInfo?.listAccess?.map(user => ({ ...user, userId: +user.userId })),
+        listAccess: accessInfo?.listAccess?.map(user => ({
+            ...user,
+            userId: +user.userId,
+            role: +user.role,
+            allowView: +user.allowView,
+            allowEdit: +user.allowEdit,
+            allowComment: +user.allowComment,
+        })),
     };
 };
+export const fromRaw = (raw) => ({
+    isPublic: raw.is_public,
+    publicRole: raw.public_role,
+    ownerId: raw.owner_id ?? -1,
+    listAccess: raw.list_access.map(u => ({
+        ...mapKeys(u, (_v, key) => camelCase(key)),
+        userId: u.user_id,
+        role: u.role,
+        allowView: u.allow_view,
+        allowEdit: u.allow_edit,
+        allowComment: u.allow_comment,
+    })),
+});
+export const toRaw = (info) => ({
+    is_public: info.isPublic,
+    public_role: info.publicRole,
+    owner_id: info.ownerId,
+    list_access: info.listAccess.map(u => ({
+        ...mapKeys(u, (_v, key) => snakeCase(key)),
+        user_id: u.userId,
+        role: u.role,
+        allow_view: u.allowView,
+        allow_edit: u.allowEdit,
+        allow_comment: u.allowComment,
+    })),
+});
 export const mappingOutData = (shareAccess) => {
     const result = { ...shareAccess };
     result.listAccess = result.listAccess.map(accessInfo => {

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

@@ -17,7 +17,7 @@ import '@yaireo/tagify/dist/tagify.css';
 // Styled
 import { TagTextArea, TagifyWrapper, WrapperPlaceHolder } from './styled';
 // Utils
-import { parseTagStringToTagify, convertInputStringToOriginal, emojiManufacturer, getEmojiTag, isPersonalizeTagType, generateTagContent, unescapeString, hasLineBreak, selectRange, isTagClickable, findURLInTextNodes, getAttributesString, isAnchorNodeChildOfElement, isShortLinkTagType, isCustomTagType, sanitizeTagAttributes, getTagAttributes, applyTagAttributes, getTagContentAttributes, isCaretAtEndOfTextNodeWithNextTag, getCurrentSelectionAndCloneRange, handleEnterWithNextTag, handleTextNodeBackspace, } from './utils';
+import { parseTagStringToTagify, convertInputStringToOriginal, emojiManufacturer, getEmojiTag, isPersonalizeTagType, generateTagContent, unescapeString, hasLineBreak, selectRange, isTagClickable, findURLInTextNodes, getAttributesString, isAnchorNodeChildOfElement, isShortLinkTagType, isCustomTagType, sanitizeTagAttributes, getTagAttributes, applyTagAttributes, getTagContentAttributes, isCaretAtEndOfTextNodeWithNextTag, getCurrentSelectionAndCloneRange, handleEnterWithNextTag, handleTextNodeBackspace, extractTagValues, preventUndoRedo, } from './utils';
 import { acceptablePatternChecking, detectURLRegex, getCachedRegex, getCustomTagId, getPersonalizeTagInfo, getShortLinkTagInfo, patternHandlers, } from './patternHandlers';
 // 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';
@@ -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, readonlyWhenNotEmpty, realtime, disabled, maxLength, maxHeight, minWidth, placeholder, minWidthPlaceholder, isSingleLineText, acceptableTagPattern, tagProperties, mapAttributes = {}, mapErrorAttributes = {}, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onTagRemove, onChange, onRestoreTagProperty, onBlur, } = props;
+    const { initialValue, escapeHTML, status, readonly, readonlyTag, readonlyText, realtime, disabled, maxLength, maxHeight, minWidth, placeholder, minWidthPlaceholder, isSingleLineText, acceptableTagPattern, tagProperties, mapAttributes = {}, mapErrorAttributes = {}, maxPersonalizeTags, name, children, cssTagifyVariables, disableEditableIfContainsTags, onTagClick, onAddTag, onTagRemove, onChange, onRestoreTagProperty, onBlur, } = props;
     // States
     const [isLineBreak, setIsLineBreak] = useState(hasLineBreak(initialValue));
     const [tooltipRefresher, setTooltipRefresher] = useState(1);
@@ -456,6 +456,7 @@ const TagifyInput = forwardRef((props, ref) => {
             }
             setLabelTagRefreshness(prev => prev + 1);
         },
+        getInputValues: () => extractTagValues(tagifyRef.current),
     }), [acceptableTagPattern, escapeHTML, onInjectTagAtCaret, placeCaretAfterNode]);
     const onTagItemClick = useCallback((event) => {
         event.stopPropagation();
@@ -471,7 +472,7 @@ const TagifyInput = forwardRef((props, ref) => {
     }, [onTagClick]);
     const onTagifyRemoveTag = useCallback((event) => {
         if (event.detail && onTagRemove) {
-            onTagRemove(event.detail);
+            onTagRemove(event.detail, extractTagValues(event.detail.tagify));
         }
     }, [onTagRemove]);
     // Used to trigger replace URL detection and line break
@@ -767,27 +768,6 @@ const TagifyInput = forwardRef((props, ref) => {
             });
         }
     }, [maxLength, customizeTag]);
-    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;
-        // 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 if (typeof readonlyText !== 'undefined') {
-            inputEl.setAttribute('contenteditable', readonlyText ? 'false' : 'true');
-        }
-    }, [readonlyText, readonlyWhenNotEmpty, tagLength]);
     const onTagifyWrapperClick = useCallback(event => {
         event.preventDefault();
         event.stopPropagation();
@@ -799,6 +779,22 @@ const TagifyInput = forwardRef((props, ref) => {
                 return;
             const { classList } = DOM?.scope;
             const { classNames } = settings;
+            if (disableEditableIfContainsTags) {
+                // Empty input is always editable
+                const isEmpty = classList.contains(classNames.empty);
+                let shouldBeEditable = isEmpty;
+                // If not empty, check if input contains restricted tags
+                if (!isEmpty) {
+                    const { listTags } = extractTagValues(tagifyRef.current);
+                    const hasRestrictedTag = listTags.some(tag => disableEditableIfContainsTags.includes(tag.type));
+                    shouldBeEditable = !hasRestrictedTag;
+                }
+                // Apply contenteditable attribute
+                DOM.input.setAttribute('contenteditable', shouldBeEditable ? 'true' : 'false');
+                // Exit early if input should not be editable
+                if (!shouldBeEditable)
+                    return;
+            }
             if (!classList.contains(classNames.focus) && DOM?.input) {
                 try {
                     const { lastChild } = DOM?.input;
@@ -834,6 +830,12 @@ const TagifyInput = forwardRef((props, ref) => {
                 }
             }
         }
+    }, [disableEditableIfContainsTags]);
+    const onContentEditable = useCallback((editable) => {
+        if (!tagifyRef.current)
+            return;
+        const inputEl = tagifyRef.current.DOM.input;
+        inputEl.setAttribute('contenteditable', editable ? 'true' : 'false');
     }, []);
     // Initialization tagify
     useLayoutEffect(() => {
@@ -845,7 +847,12 @@ const TagifyInput = forwardRef((props, ref) => {
         };
     }, [initializeTagify]);
     useEffect(() => {
-        if (tagifyRef.current && tagLength && _.isFunction(onTagRemove)) {
+        if (typeof readonlyText !== 'boolean')
+            return;
+        onContentEditable(!readonlyText);
+    }, [readonlyText, onContentEditable]);
+    useEffect(() => {
+        if (tagifyRef.current && typeof tagLength === 'number' && _.isFunction(onTagRemove)) {
             // Because the remove tag event is not triggered when the tag is removed with Backspace or drag selection tags
             // we need to listen to the input element to detect when a tag is removed
             let mutationQueue = [];
@@ -874,8 +881,11 @@ const TagifyInput = forwardRef((props, ref) => {
                     try {
                         node.dataset.__removed_by_mutation = 'true';
                         const tagData = tagifyRef.current?.getSetTagData(node);
-                        if (tagData && tagData.type === CUSTOM_TAG && !tagData?.__removed) {
-                            onTagRemove({ data: tagData });
+                        if (tagifyRef.current &&
+                            tagData &&
+                            tagData.type === CUSTOM_TAG &&
+                            !tagData?.__removed) {
+                            onTagRemove({ data: tagData }, extractTagValues(tagifyRef.current));
                         }
                     }
                     catch (error) {
@@ -987,8 +997,13 @@ const TagifyInput = forwardRef((props, ref) => {
             tagifyInstance.on('change', onTagifyChangedDebounce);
             tagifyInstance.on('remove', onTagifyRemoveTag);
             tagifyInstance.on('keydown', onKeyDown);
+            if (onAddTag)
+                tagifyInstance.on('add', onAddTag);
             if (onBlur)
                 tagifyInstance.on('blur', onBlur);
+            if (tagifyInstance.DOM.input) {
+                tagifyInstance.DOM.input.addEventListener('keydown', preventUndoRedo);
+            }
         }
         // Off listen to Tagify events
         return () => {
@@ -998,11 +1013,17 @@ const TagifyInput = forwardRef((props, ref) => {
                 tagifyInstance.off('change', onTagifyChangedDebounce);
                 tagifyInstance.off('remove', onTagifyRemoveTag);
                 tagifyInstance.off('keydown', onKeyDown);
+                if (onAddTag)
+                    tagifyInstance.off('add', onAddTag);
                 if (onBlur)
                     tagifyInstance.off('blur', onBlur);
+                if (tagifyInstance.DOM.input) {
+                    tagifyInstance.DOM.input.removeEventListener('keydown', preventUndoRedo);
+                }
             }
         };
     }, [
+        onAddTag,
         onBlur,
         onTagItemClick,
         onInputTagifyDebounce,

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

@@ -15,6 +15,10 @@ export type TagStatus = (typeof TAG_STATUS)[keyof typeof TAG_STATUS];
 export type MapAttributesProps = Record<string, Record<string, any>>;
 export type StatusType = 'error' | 'success' | 'warning';
 export type BackgroundColorPersonalizeType = Exclude<keyof typeof TAG_COLOR, 'detect_link' | 'emoji' | 'shortlink'>;
+export interface TagValues {
+    listTags: TagDataCustomize[];
+    value: string;
+}
 /**
  * Interface defining the properties for the Tagify input component.
  * Provides configuration options and event handlers to manage Tagify's behavior and appearance.
@@ -134,11 +138,16 @@ export interface TagifyInputProps {
      * Receives the tag detail as parameter, allowing custom actions on tag click.
      */
     onTagClick?: (tagDetail: Tagify.ClickEventData<TagDataCustomize>) => void;
+    /**
+     * Event handler triggered when a tag is added.
+     * Receives the tag detail as parameter, allowing custom actions on tag addition.
+     */
+    onAddTag?: (event: CustomEvent<Tagify.AddEventData<TagDataCustomize>>) => void;
     /**
      * Event handler triggered when a tag is removed.
      * Receives the tag detail as parameter, allowing custom actions on tag removal.
      */
-    onTagRemove?: (tagDetail: Tagify.RemoveEventData<TagDataCustomize>) => void;
+    onTagRemove?: (tagDetail: Tagify.RemoveEventData<TagDataCustomize>, values: TagValues) => void;
     /**
      * Event handler triggered when the input value changes.
      * Receives the updated input value as a string, allowing for controlled component updates.
@@ -159,21 +168,18 @@ export interface TagifyInputProps {
     /**
      * Defines whether the input text is read but not the whole tags.
      */
-    readonlyText?: boolean | ((listTags: TagDataCustomize[]) => boolean);
+    readonlyText?: 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
+     * Tags that, when present in input, make the entire input non-editable
      */
-    readonlyWhenNotEmpty?: boolean;
+    disableEditableIfContainsTags?: TagType[];
 }
 export interface TagifyInputRef {
     onAddNewTag: (newTag: TagDataCustomize | string) => void;
     onReplaceTag: (currentTagEle: HTMLElement, newTag: TagDataCustomize) => void;
     onReload: (newValue: string) => void;
     onLabelTagRefreshness: () => void;
+    getInputValues: () => TagValues;
 }
 export type EmojiCollection = (typeof EMOJI_COLLECTIONS)[keyof typeof EMOJI_COLLECTIONS];
 export type ShortLinkType = (typeof SHORT_LINK_TYPE)[keyof typeof SHORT_LINK_TYPE];

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

@@ -1,6 +1,6 @@
 /// <reference types="yaireo__tagify" />
 import Tagify from '@yaireo/tagify';
-import { AcceptablePattern, TagAttribute, EmojiCollection, EmojiTag, TagDataCustomize, TagProperty, TagType } from './types';
+import { AcceptablePattern, TagAttribute, EmojiCollection, EmojiTag, TagDataCustomize, TagProperty, TagType, TagValues } from './types';
 /**
  * Parses the input string and replaces matching patterns with processed tags.
  * This function iterates over predefined regex patterns and replaces each match
@@ -202,3 +202,8 @@ export declare const getCurrentSelectionAndCloneRange: () => {
 };
 export declare const handleTextNodeBackspace: (range: Range) => void;
 export declare const handleEnterWithNextTag: (range: Range) => void;
+export declare const removeInvisibleChars: (str: string) => string;
+export declare const extractTagValues: (tagify: Tagify<TagDataCustomize>) => TagValues;
+export declare function preventUndoRedo(e: CustomEvent<Tagify.KeydownEventData<TagDataCustomize>>['detail']['event'], { disableRedo }?: {
+    disableRedo?: boolean | undefined;
+}): void;

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

@@ -796,3 +796,22 @@ export const handleEnterWithNextTag = (range) => {
         return;
     insertZeroWidthSpaceBeforeTag(currentNode);
 };
+export const removeInvisibleChars = (str) => str.replace(/[\r\n\u200B-\u200D\uFEFF]/g, '');
+export const extractTagValues = (tagify) => {
+    if (!tagify)
+        return { listTags: [], value: '' };
+    return {
+        listTags: tagify.getCleanValue(),
+        value: tagify.getInputValue(),
+    };
+};
+export function preventUndoRedo(e, { disableRedo = false } = {}) {
+    const key = e.key.toLowerCase();
+    const isUndo = (e.ctrlKey || e.metaKey) && key === 'z';
+    const isRedo = (disableRedo && (e.ctrlKey || e.metaKey) && key === 'y') ||
+        ((e.ctrlKey || e.metaKey) && e.shiftKey && key === 'z');
+    if (isUndo || isRedo) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+}

package/es/components/molecules/VirtualizedMenu/VirtualizedMenu.d.ts

@@ -8,6 +8,7 @@ export declare const VirtualizedMenu: React.ForwardRefExoticComponent<Partial<{
     className: string;
     itemSize: number;
     selected: string | string[];
+    focusedKey: string;
     expanded: string[];
     onClick: (args: {
         item: import("./types").ItemType;

package/es/components/molecules/VirtualizedMenu/components/Item/Item.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useMemo, useRef, useEffect, useCallback } from 'react';
+import { memo, useMemo, useRef, useCallback } from 'react';
 import { Typography } from '../../../../atoms/Typography';
 import { MenuItemRoot } from '../../styled';
 import clsx from 'clsx';
@@ -69,11 +69,7 @@ export const Item = memo((props) => {
     }, [item.id, normalizeTreeItems, selectedKeys]);
     const className = clsx(itemClassName, {
         [CLS.Item.selectedDescendant]: isSelectedDescendant,
+        [CLS.Item.focused]: isFocused,
     });
-    useEffect(() => {
-        if (isFocused) {
-            itemRef.current?.focus({ preventScroll: true });
-        }
-    }, [isFocused]);
-    return (_jsxs(MenuItemRoot, { ref: handleItemRef, role: displayOnly ? 'none' : 'treeitem', tabIndex: displayOnly ? -1 : isFocused ? 0 : -1, "aria-selected": displayOnly ? undefined : selected, "aria-disabled": displayOnly ? undefined : disabled, "aria-expanded": displayOnly ? undefined : expanded, "aria-level": displayOnly ? undefined : item.level, "aria-posinset": displayOnly ? undefined : index + 1, "aria-setsize": displayOnly ? undefined : items.length, className: className, style: itemStyle, onClick: e => handleOnClick(e, 'item'), children: [_jsx("div", { className: CLS.ItemLabel.default, children: labelContent }), actionContent] }));
+    return (_jsxs(MenuItemRoot, { "data-selected": !!selected, "data-focused": isFocused, ref: handleItemRef, role: displayOnly ? 'none' : 'treeitem', "aria-selected": displayOnly ? undefined : selected, "aria-disabled": displayOnly ? undefined : disabled, "aria-expanded": displayOnly ? undefined : expanded, "aria-level": displayOnly ? undefined : item.level, "aria-posinset": displayOnly ? undefined : index + 1, "aria-setsize": displayOnly ? undefined : items.length, className: className, style: itemStyle, onClick: e => handleOnClick(e, 'item'), children: [_jsx("div", { className: CLS.ItemLabel.default, children: labelContent }), actionContent] }));
 }, areEqual);