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

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

@@ -1,66 +1,66 @@
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
-export const StyledPeopleAccessRoot = styled.div `
-  display: flex;
-  flex-direction: column;
-
-  .title {
-    margin-bottom: 10px;
-  }
-
-  .antsomi-list {
-    border-radius: ${THEME.token?.borderRadius}px;
-    border: 1px solid #e6e6e6;
-
-    .antsomi-list-items {
-      /* padding: 0; */
-      padding: 15px;
-
-      .antsomi-list-item {
-        /* padding: 8px; */
-        padding: 0;
-        margin-bottom: 15px;
-        border: none;
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-
-        .info {
-          flex: 1;
-          margin-left: 15px;
-
-          .name {
-            font-weight: bold;
-          }
-
-          .email {
-            color: ${THEME?.token?.bw8};
-          }
-        }
-
-        /* .antsomi-avatar {
-          align-self: flex-start;
-        } */
-
-        .role-actions {
-          display: flex;
-          align-items: center;
-          gap: 4px;
-
-          &:hover {
-            cursor: pointer;
-          }
-        }
-
-        /* .role-actions :not(i) {
-          align-self: flex-start !important;
-        } */
-      }
-    }
-
-    .antsomi-spin-nested-loading:not(:has(ul)) {
-      height: 125px;
-    }
-  }
+export const StyledPeopleAccessRoot = styled.div `
+  display: flex;
+  flex-direction: column;
+
+  .title {
+    margin-bottom: 10px;
+  }
+
+  .antsomi-list {
+    border-radius: ${THEME.token?.borderRadius}px;
+    border: 1px solid #e6e6e6;
+
+    .antsomi-list-items {
+      /* padding: 0; */
+      padding: 15px;
+
+      .antsomi-list-item {
+        /* padding: 8px; */
+        padding: 0;
+        margin-bottom: 15px;
+        border: none;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        .info {
+          flex: 1;
+          margin-left: 15px;
+
+          .name {
+            font-weight: bold;
+          }
+
+          .email {
+            color: ${THEME?.token?.bw8};
+          }
+        }
+
+        /* .antsomi-avatar {
+          align-self: flex-start;
+        } */
+
+        .role-actions {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+
+          &:hover {
+            cursor: pointer;
+          }
+        }
+
+        /* .role-actions :not(i) {
+          align-self: flex-start !important;
+        } */
+      }
+    }
+
+    .antsomi-spin-nested-loading:not(:has(ul)) {
+      height: 125px;
+    }
+  }
 `;

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

@@ -1,34 +1,34 @@
 import styled from 'styled-components';
-export const StyledSearchUserRoot = styled.div `
-  width: 100%;
-
-  .antsomi-select {
-    width: 100%;
-
-    /* move to global css (for autocomplete) */
-    /* .antsomi-select-selector {
-      border: none !important;
-    } */
-  }
+export const StyledSearchUserRoot = styled.div `
+  width: 100%;
+
+  .antsomi-select {
+    width: 100%;
+
+    /* move to global css (for autocomplete) */
+    /* .antsomi-select-selector {
+      border: none !important;
+    } */
+  }
 `;
-export const StyledSelectItem = styled.div `
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  gap: 8px;
-
-  .info {
-    .name {
-      font-weight: bold;
-    }
-
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-
-  :hover {
-    background-color: #f2f9ff;
-    cursor: pointer;
-  }
+export const StyledSelectItem = styled.div `
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  gap: 8px;
+
+  .info {
+    .name {
+      font-weight: bold;
+    }
+
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  :hover {
+    background-color: #f2f9ff;
+    cursor: pointer;
+  }
 `;

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/SliderWithInputNumber/styled.js

@@ -2,6 +2,6 @@
 import styled from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const SliderWithInputNumberWrapper = styled.div `
-  font-size: ${THEME.token?.fontSize}px;
+export const SliderWithInputNumberWrapper = styled.div `
+  font-size: ${THEME.token?.fontSize}px;
 `;

package/es/components/molecules/Tabs/Tabs.js

@@ -1,14 +1,14 @@
 import { Tabs as AntdTabs } from 'antd';
 import styled from 'styled-components';
-export const Tabs = styled(AntdTabs) `
-  position: relative;
-  z-index: 1;
-
-  > .antsomi-tabs-nav {
-    ${({ shadow }) => (shadow ? 'box-shadow: 0px 3px 3px 0px #002E591A;' : '')}
-  }
-
-  .antsomi-tabs-tab-btn {
-    text-shadow: none !important;
-  }
+export const Tabs = styled(AntdTabs) `
+  position: relative;
+  z-index: 1;
+
+  > .antsomi-tabs-nav {
+    ${({ shadow }) => (shadow ? 'box-shadow: 0px 3px 3px 0px #002E591A;' : '')}
+  }
+
+  .antsomi-tabs-tab-btn {
+    text-shadow: none !important;
+  }
 `;

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
@@ -562,21 +563,21 @@ const TagifyInput = forwardRef((props, ref) => {
             }
         }
         const additionalTagAttrs = getAttributesString(additionalAttributes);
-        return `
-        <tag
-          contenteditable='false'
-          spellcheck='false'
-          tabIndex="${settings.a11y.focusableTags ? 0 : -1}"
-          class="${settings.classNames.tag} ${tagData.class ? tagData.class : ''}"
-          ${tagify.getAttributes(tagData)}
-          ${additionalTagAttrs}
-        >
-          ${closeIcon}
-
+        return `
+        <tag
+          contenteditable='false'
+          spellcheck='false'
+          tabIndex="${settings.a11y.focusableTags ? 0 : -1}"
+          class="${settings.classNames.tag} ${tagData.class ? tagData.class : ''}"
+          ${tagify.getAttributes(tagData)}
+          ${additionalTagAttrs}
+        >
+          ${closeIcon}
+
           ${generateTagContent({
             tagData,
             content: visibleTagContent,
-        })}
+        })}
         </tag>`;
     }, []);
     /*
@@ -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,
@@ -1065,44 +1086,44 @@ const TagifyInput = forwardRef((props, ref) => {
         if (!tagifyTooltip) {
             const style = document.createElement('style');
             style.type = 'text/css';
-            style.appendChild(document.createTextNode(`
-          .tagify__tooltip {
-            display: none;
-            position: fixed;
-            background-color: #595959;
-            border-radius: 10px;
-            color: #ffffff;
-            padding: 6px;
-            z-index: 10000;
-            max-width: 280px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-          }
-
-          .tagify__tooltip_content {
-            width: 100%;
-            max-width: 250px;
-            height: auto;
-            position: relative;
-            transition: 0s;
-            font-size: 12px;
-            line-height: 16px;
-            text-align: center;
-            word-wrap: break-word;
-            white-space: normal;
-          }
-
-          .tagify__tooltip_content:before {
-            content: '';
-            position: absolute;
-            top: 100%;
-            right: 50%;
-            left: auto;
-            background-color: #595959;
-            width: 10px;
-            height: 10px;
-            transform: rotate(45deg) translate(50%,-50%);
-            border-radius: 1px;
-          }
+            style.appendChild(document.createTextNode(`
+          .tagify__tooltip {
+            display: none;
+            position: fixed;
+            background-color: #595959;
+            border-radius: 10px;
+            color: #ffffff;
+            padding: 6px;
+            z-index: 10000;
+            max-width: 280px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+          }
+
+          .tagify__tooltip_content {
+            width: 100%;
+            max-width: 250px;
+            height: auto;
+            position: relative;
+            transition: 0s;
+            font-size: 12px;
+            line-height: 16px;
+            text-align: center;
+            word-wrap: break-word;
+            white-space: normal;
+          }
+
+          .tagify__tooltip_content:before {
+            content: '';
+            position: absolute;
+            top: 100%;
+            right: 50%;
+            left: auto;
+            background-color: #595959;
+            width: 10px;
+            height: 10px;
+            transform: rotate(45deg) translate(50%,-50%);
+            border-radius: 1px;
+          }
         `));
             document.head.appendChild(style);
             const tooltipWrapper = document.createElement('div');