@antscorp/antsomi-ui 1.3.7-beta.68 → 1.3.7-beta.69

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/SelectAccount/styled.d.ts

@@ -1,9 +1,10 @@
+/// <reference types="react" />
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {
     disabled: boolean;
 }, never>;
 export declare const AccountChipWrapper: import("styled-components").StyledComponent<"div", any, {
-    disabled?: boolean;
-    isError?: boolean;
+    disabled?: boolean | undefined;
+    isError?: boolean | undefined;
 }, never>;
 export declare const ButtonAddStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<import("react").LegacyRef<HTMLElement>>>, any, {}, never>;
 export declare const ButtonViewAllStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<import("react").LegacyRef<HTMLElement>>>, any, {}, never>;

package/es/components/molecules/SelectMulti/styled.d.ts

@@ -1,10 +1,11 @@
+/// <reference types="react" />
 export declare const SelectWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledSelect: import("styled-components").StyledComponent<(<ValueType = any, OptionType extends import("rc-select/lib/Select").BaseOptionType | import("rc-select/lib/Select").DefaultOptionType = import("rc-select/lib/Select").DefaultOptionType>(props: import("antd").SelectProps<ValueType, OptionType> & {
-    children?: React.ReactNode;
-} & React.RefAttributes<import("rc-select").BaseSelectRef>) => React.ReactElement) & {
+export declare const StyledSelect: import("styled-components").StyledComponent<(<ValueType = any, OptionType extends import("rc-select/lib/Select").DefaultOptionType | import("rc-select/lib/Select").BaseOptionType = import("rc-select/lib/Select").DefaultOptionType>(props: import("antd").SelectProps<ValueType, OptionType> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<import("antd").RefSelectProps>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
     displayName?: string | undefined;
     SECRET_COMBOBOX_MODE_DO_NOT_USE: string;
     Option: import("rc-select/lib/Option").OptionFC;
     OptGroup: import("rc-select/lib/OptGroup").OptionGroupFC;
-    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => React.JSX.Element;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => import("react").JSX.Element;
 }, any, {}, never>;

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

@@ -41,8 +41,8 @@ export const StyledSelect = styled(AntdSelect) `
     border-radius: 0px !important;
     border-style: none !important;
     --tw-shadow: 0 1px 0 0 ${THEME.token?.blue1} !important;
-    box-shadow:
-      var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+      var(--tw-shadow) !important;
 
     cursor: pointer !important;
     caret-color: transparent;
@@ -51,8 +51,8 @@ export const StyledSelect = styled(AntdSelect) `
     &:focus {
       background-color: ${THEME.token?.blue0};
       --tw-shadow: 0 1px 0 0 #194e8d !important;
-      box-shadow:
-        var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
+      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+        var(--tw-shadow) !important;
     }
 
     &:disabled {

package/es/components/molecules/SelectV2/styled.d.ts

@@ -1,15 +1,16 @@
+/// <reference types="react" />
 export declare const SelectWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledSelect: import("styled-components").StyledComponent<(<ValueType = any, OptionType extends import("rc-select/lib/Select").BaseOptionType | import("rc-select/lib/Select").DefaultOptionType = import("rc-select/lib/Select").DefaultOptionType>(props: import("antd").SelectProps<ValueType, OptionType> & {
-    children?: React.ReactNode;
-} & React.RefAttributes<import("rc-select").BaseSelectRef>) => React.ReactElement) & {
+export declare const StyledSelect: import("styled-components").StyledComponent<(<ValueType = any, OptionType extends import("rc-select/lib/Select").DefaultOptionType | import("rc-select/lib/Select").BaseOptionType = import("rc-select/lib/Select").DefaultOptionType>(props: import("antd").SelectProps<ValueType, OptionType> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<import("antd").RefSelectProps>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
     displayName?: string | undefined;
     SECRET_COMBOBOX_MODE_DO_NOT_USE: string;
     Option: import("rc-select/lib/Option").OptionFC;
     OptGroup: import("rc-select/lib/OptGroup").OptionGroupFC;
-    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => React.JSX.Element;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => import("react").JSX.Element;
 }, any, {}, never>;
 export declare const StyledTag: import("styled-components").StyledComponent<import("antd").TagType, any, {
-    isError?: boolean;
+    isError?: boolean | undefined;
 }, never>;
 export declare const CloseButton: import("styled-components").StyledComponent<"div", any, {
     borderColor?: any;

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

@@ -22,8 +22,8 @@ export const StyledSelect = styled(AntdSelect) `
     .antsomi-select-selector {
       background-color: ${THEME.token?.blue0};
       --tw-shadow: 0 1px 0 0 ${THEME.token?.colorPrimary} !important;
-      box-shadow:
-        var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
+      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+        var(--tw-shadow) !important;
     }
   }
 
@@ -49,15 +49,15 @@ export const StyledSelect = styled(AntdSelect) `
     border-radius: 0px !important;
     border-style: none !important;
     --tw-shadow: 0 1px 0 0 ${THEME.token?.blue1} !important;
-    box-shadow:
-      var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+      var(--tw-shadow) !important;
 
     &:active,
     &:focus {
       background: ${THEME.token?.blue0};
       --tw-shadow: 0 1px 0 0 ${THEME.token?.colorPrimary} !important;
-      box-shadow:
-        var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
+      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+        var(--tw-shadow) !important;
     }
 
     &:disabled {

package/es/components/molecules/SettingWrapper/styled.d.ts

@@ -1,3 +1,3 @@
 export declare const StyledSettingWrapper: import("styled-components").StyledComponent<"div", any, {
-    $vertical?: boolean;
+    $vertical?: boolean | undefined;
 }, never>;

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

@@ -1,8 +1,4 @@
 import { ObjectAccessInfo, ShareAccessState } from './types';
-export declare const TYPES: {
-    readonly UPDATE_OBJECT_ACCESS_INFO: "UPDATE_OBJECT_ACCESS_INFO";
-    readonly UPDATE_MODAL_TRANSTER_OWNERSHIP: "UPDATE_MODAL_TRANSTER_OWNERSHIP";
-};
 export declare const updateObjAccessInfo: (payload: {
     updated: ObjectAccessInfo;
     triggerOut?: boolean;
@@ -10,10 +6,10 @@ export declare const updateObjAccessInfo: (payload: {
     type: "UPDATE_OBJECT_ACCESS_INFO";
     payload: {
         updated: ObjectAccessInfo;
-        triggerOut?: boolean;
+        triggerOut?: boolean | undefined;
     };
 };
-export declare const updateModalTransferOwnership: (modalState: Partial<ShareAccessState["modalTransferOwnership"]>) => {
+export declare const updateModalTransferOwnership: (modalState: Partial<ShareAccessState['modalTransferOwnership']>) => {
     type: "UPDATE_MODAL_TRANSTER_OWNERSHIP";
     payload: Partial<{
         open: boolean;

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

@@ -1,7 +1,4 @@
-export const TYPES = {
-    UPDATE_OBJECT_ACCESS_INFO: 'UPDATE_OBJECT_ACCESS_INFO',
-    UPDATE_MODAL_TRANSTER_OWNERSHIP: 'UPDATE_MODAL_TRANSTER_OWNERSHIP',
-};
+import { TYPES } from './constants';
 export const updateObjAccessInfo = (payload) => ({
     type: TYPES.UPDATE_OBJECT_ACCESS_INFO,
     payload,

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

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 export declare const StyledModal: import("styled-components").StyledComponent<import("react").FC<import("antd").ModalProps> & import("antd/es/modal/confirm").ModalStaticFunctions & {
     useModal: typeof import("antd/es/modal/useModal").default;
     destroyAll: () => void;
     config: typeof import("antd/es/modal/confirm").modalGlobalConfig;
-    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/modal/PurePanel").PurePanelProps) => React.JSX.Element;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/modal/PurePanel").PurePanelProps) => import("react").JSX.Element;
 }, any, {}, never>;

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

@@ -1,4 +1,3 @@
-import { AccessRole, UserAccessInfo } from './types';
 export declare const REGEX_REMOVE_NAME: RegExp;
 export declare const PUBLIC_ROLE: {
     ONLY_EDITOR: number;
@@ -18,7 +17,26 @@ export declare const ROLE_ACCESS_LABEL: {
     2: string;
     3: string;
 };
-export declare const ACCESS_PROPERTIES_BY_ROLE: Record<AccessRole, Pick<UserAccessInfo, 'role' | 'allowView' | 'allowEdit' | 'allowComment'>>;
+export declare const ACCESS_PROPERTIES_BY_ROLE: {
+    readonly 1: {
+        readonly role: 1;
+        readonly allowView: 1;
+        readonly allowEdit: 1;
+        readonly allowComment: 1;
+    };
+    readonly 2: {
+        readonly role: 2;
+        readonly allowView: 1;
+        readonly allowEdit: 1;
+        readonly allowComment: 1;
+    };
+    readonly 3: {
+        readonly role: 3;
+        readonly allowView: 1;
+        readonly allowEdit: 0;
+        readonly allowComment: 0;
+    };
+};
 export declare const PEOPLE_ACTION_KEYS: {
     readonly TO_VIEWER: "to_viewer";
     readonly TO_EDITOR: "to_editor";
@@ -66,3 +84,7 @@ export declare const MENU_PERMISSION: {
     readonly MANAGEMENT_BY_USER: 3;
     readonly EVERYTHING: 4;
 };
+export declare const TYPES: {
+    readonly UPDATE_OBJECT_ACCESS_INFO: "UPDATE_OBJECT_ACCESS_INFO";
+    readonly UPDATE_MODAL_TRANSTER_OWNERSHIP: "UPDATE_MODAL_TRANSTER_OWNERSHIP";
+};

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

@@ -84,3 +84,7 @@ export const MENU_PERMISSION = {
     MANAGEMENT_BY_USER: 3,
     EVERYTHING: 4,
 };
+export const TYPES = {
+    UPDATE_OBJECT_ACCESS_INFO: 'UPDATE_OBJECT_ACCESS_INFO',
+    UPDATE_MODAL_TRANSTER_OWNERSHIP: 'UPDATE_MODAL_TRANSTER_OWNERSHIP',
+};

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

@@ -1,15 +1,16 @@
+/// <reference types="react" />
 export declare const useShareAccess: () => {
     state: {
         allowEdit: boolean;
         allowView: boolean;
-        accessInfo?: import("..").ObjectAccessInfo;
-        isLoading?: boolean;
-        accessUserId?: number;
+        accessInfo?: import("..").ObjectAccessInfo | undefined;
+        isLoading?: boolean | undefined;
+        accessUserId?: number | undefined;
         accessUserPermission?: {
             view: number;
             edit: number;
-        };
-        excludeUserAccess?: import("../types").ExcludeUserAccess;
+        } | undefined;
+        excludeUserAccess?: import("../types").ExcludeUserAccess | undefined;
         modalTransferOwnership: {
             open: boolean;
             userToOwnerShipId: number;

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"], onRawChange: ShareAccessProps["onRawChange"]) => (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,5 +1,5 @@
 import produce from 'immer';
-import { TYPES } from './actions';
+import { TYPES } from './constants';
 import { mappingOutData, toRaw } from './utils';
 export const shareAccessReducer = (onChange, onRawChange) => (state, action) => produce(state, draft => {
     switch (action.type) {

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

@@ -1,5 +1,4 @@
-import { updateModalTransferOwnership, updateObjAccessInfo } from './actions';
-import { PEOPLE_ACTION_KEYS } from './constants';
+import { TYPES, PEOPLE_ACTION_KEYS } from './constants';
 export type UserInfo = {
     user_id: number;
     avatar?: string;
@@ -83,6 +82,15 @@ export type ShareAccessState = {
         userToOwnerShipId: number;
     };
 };
-export type ShareAccessAction = ReturnType<typeof updateObjAccessInfo> | ReturnType<typeof updateModalTransferOwnership>;
+export type ShareAccessAction = {
+    type: typeof TYPES.UPDATE_OBJECT_ACCESS_INFO;
+    payload: {
+        updated: ObjectAccessInfo;
+        triggerOut?: boolean;
+    };
+} | {
+    type: typeof TYPES.UPDATE_MODAL_TRANSTER_OWNERSHIP;
+    payload: Partial<ShareAccessState['modalTransferOwnership']>;
+};
 export type AccessRole = 1 | 2 | 3;
 export type GeneralAccess = 1 | 0;

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

@@ -47,9 +47,9 @@ export declare const safeParseAccessInfo: (accessInfo: ObjectAccessInfo) => {
         allowView: number;
         allowEdit: number;
         allowComment: number;
-        fullName?: string;
-        email?: string;
-        avatar?: string;
+        fullName?: string | undefined;
+        email?: string | undefined;
+        avatar?: string | undefined;
     }[];
     isPublic: number;
     publicRole: number | null;

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

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 export declare const Tabs: import("styled-components").StyledComponent<import("react").FC<import("antd").TabsProps> & {
     TabPane: import("react").FC<import("antd").TabPaneProps>;
 }, any, {
-    shadow?: boolean;
+    shadow?: boolean | undefined;
 }, never>;

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

@@ -17,18 +17,19 @@ 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, preventUndoRedo, } 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';
 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, } = 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);
+    const [labelTagRefreshness, setLabelTagRefreshness] = useState(1);
     // Refs
     const inputRef = useRef(null);
     const tagifyRef = useRef(null);
@@ -421,6 +422,11 @@ const TagifyInput = forwardRef((props, ref) => {
                 throw new Error('Tagify instance is not initialized');
             }
         },
+        reset() {
+            if (tagifyRef.current) {
+                tagifyRef.current.removeAllTags();
+            }
+        },
         onReload: (newValue) => {
             if (!tagifyRef.current) {
                 throw new Error('Tagify instance is not initialized');
@@ -444,6 +450,13 @@ const TagifyInput = forwardRef((props, ref) => {
                 tagifyRef.current.loadOriginalValues(newContent);
             }
         },
+        onLabelTagRefreshness() {
+            if (!tagifyRef.current) {
+                throw new Error('Tagify instance is not initialized');
+            }
+            setLabelTagRefreshness(prev => prev + 1);
+        },
+        getInputValues: () => extractTagValues(tagifyRef.current),
     }), [acceptableTagPattern, escapeHTML, onInjectTagAtCaret, placeCaretAfterNode]);
     const onTagItemClick = useCallback((event) => {
         event.stopPropagation();
@@ -459,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
@@ -626,7 +639,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,
@@ -657,7 +670,7 @@ const TagifyInput = forwardRef((props, ref) => {
             });
             setTooltipRefresher(prev => prev + 1);
         }
-    }, [acceptableTagPattern]);
+    }, [acceptableTagPattern, labelTagRefreshness]);
     /*
      * Execute tag properties for each tag
      */
@@ -690,6 +703,10 @@ const TagifyInput = forwardRef((props, ref) => {
                     sanitizeTagAttributes(tagElement);
                     // Update new tag attributes
                     const tagAttributes = getTagAttributes(property);
+                    tagAttributes.push([
+                        'data-raw-tag-property',
+                        JSON.stringify({ ...property, __restore_id: customTagId }),
+                    ]);
                     applyTagAttributes(tagElement, tagAttributes);
                     // Update tag content element attributes
                     const tagContentEl = tagElement.querySelector('.tagify__tag-content');
@@ -751,17 +768,6 @@ const TagifyInput = forwardRef((props, ref) => {
             });
         }
     }, [maxLength, customizeTag]);
-    useEffect(() => {
-        if (!tagifyRef.current)
-            return;
-        const inputEl = tagifyRef.current.DOM.input;
-        if (readonlyText) {
-            inputEl.setAttribute('contenteditable', 'false');
-        }
-        else {
-            inputEl.setAttribute('contenteditable', 'true');
-        }
-    }, [readonlyText]);
     const onTagifyWrapperClick = useCallback(event => {
         event.preventDefault();
         event.stopPropagation();
@@ -773,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;
@@ -808,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(() => {
@@ -819,22 +847,45 @@ 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 = [];
             let processing = false;
             const processMutations = () => {
                 processing = true;
-                const relevantNodes = mutationQueue.flatMap(mutation => [...mutation.removedNodes].filter(node => {
-                    const isUpdatedTag = mutation.addedNodes.length > 0;
-                    return !isUpdatedTag && node.nodeType === Node.ELEMENT_NODE && node.nodeName === 'TAG';
-                }));
-                relevantNodes.forEach(node => {
+                const removedNodes = [];
+                const addedNodes = [];
+                mutationQueue.forEach(mutation => {
+                    mutation.removedNodes.forEach(node => {
+                        if (mutation.addedNodes.length === 0 &&
+                            node.nodeType === Node.ELEMENT_NODE &&
+                            node.nodeName === 'TAG') {
+                            removedNodes.push(node);
+                        }
+                    });
+                    mutation.addedNodes.forEach(node => {
+                        if (mutation.removedNodes.length === 0 &&
+                            node.nodeType === Node.ELEMENT_NODE &&
+                            node.nodeName === 'TAG') {
+                            addedNodes.push(node);
+                        }
+                    });
+                });
+                removedNodes.forEach(node => {
                     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) {
@@ -842,6 +893,25 @@ const TagifyInput = forwardRef((props, ref) => {
                         console.error('Error while removing tag with Backspace', error);
                     }
                 });
+                if (onRestoreTagProperty) {
+                    const restoredTagProperties = [];
+                    addedNodes.forEach(node => {
+                        try {
+                            const { rawTagProperty, __removed_by_mutation: removedMutation } = node?.dataset || {};
+                            if (removedMutation === 'true' && rawTagProperty) {
+                                const restoreTagProperty = JSON.parse(rawTagProperty);
+                                restoredTagProperties.push(restoreTagProperty);
+                            }
+                        }
+                        catch (error) {
+                            // biome-ignore lint/suspicious/noConsole: <explanation>
+                            console.error('Error while restoring tag', error);
+                        }
+                    });
+                    if (restoredTagProperties.length > 0) {
+                        onRestoreTagProperty(restoredTagProperties);
+                    }
+                }
                 mutationQueue = [];
                 processing = false;
             };
@@ -861,7 +931,7 @@ const TagifyInput = forwardRef((props, ref) => {
                 observer.disconnect();
             };
         }
-    }, [tagLength, onTagRemove]);
+    }, [tagLength, onTagRemove, onRestoreTagProperty]);
     // Settings some tagify attributes
     // Set [readonly, disabled, placeholder]
     useEffect(() => {
@@ -927,6 +997,10 @@ 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);
             }
@@ -937,13 +1011,26 @@ const TagifyInput = forwardRef((props, ref) => {
                 tagifyInstance.off('click', onTagItemClick);
                 tagifyInstance.off('input', onInputTagifyDebounce);
                 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);
                 }
             }
         };
-    }, [onTagItemClick, onInputTagifyDebounce, onTagifyChangedDebounce, onKeyDown]);
+    }, [
+        onAddTag,
+        onBlur,
+        onTagItemClick,
+        onInputTagifyDebounce,
+        onTagifyChangedDebounce,
+        onKeyDown,
+        onTagifyRemoveTag,
+    ]);
     // At the first render, need to update URL to tag to show hint in the tooltip with tag
     useEffect(() => {
         detectReplaceURLToTag();