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

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);

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

@@ -1,7 +1,6 @@
-import React from 'react';
-import { ItemType } from '../../types';
-export declare const MenuInline: React.MemoExoticComponent<React.ForwardRefExoticComponent<Partial<{
-    items: ItemType[];
+/// <reference types="react" />
+export declare const MenuInline: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Partial<{
+    items: import("../../types").ItemType[];
     inlineIndent: number;
     inlinePadding: number;
     itemSpacing: number;
@@ -9,15 +8,16 @@ export declare const MenuInline: React.MemoExoticComponent<React.ForwardRefExoti
     className: string;
     itemSize: number;
     selected: string | string[];
+    focusedKey: string;
     expanded: string[];
     onClick: (args: {
-        item: ItemType;
-        domEvent?: React.MouseEvent<Element, MouseEvent> | undefined;
+        item: import("../../types").ItemType;
+        domEvent?: import("react").MouseEvent<Element, MouseEvent> | undefined;
         elKey: "item" | "item-expand-el";
     }) => void;
-    action: React.ReactNode | ((item: ItemType, others: {
-        expandEl: React.ReactNode;
-    }) => React.ReactNode);
+    action: import("react").ReactNode | ((item: import("../../types").ItemType, others: {
+        expandEl: import("react").ReactNode;
+    }) => import("react").ReactNode);
 }> & {
     mode?: "inline" | undefined;
-} & React.RefAttributes<import("../../types").VirtualizedMenuBaseHandle>>>;
+} & import("react").RefAttributes<import("../../types").VirtualizedMenuBaseHandle>>>;