@antscorp/antsomi-ui 2.0.89 → 2.0.91-text-editor-beta.1

package/es/components/organism/TicketEditor/index.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import Content from './Content';
 import Service from './Service';
 import TicketIcon from './components/icons/TicketIcon';
 import AddTicketIcon from './components/icons/AddTicketIcon';
-import { Button, Modal, Popover, Typography, DrawerDetail, message, Icon, } from '@antscorp/antsomi-ui/es/components/';
+import { Button, Modal, Popover, Typography, DrawerDetail, message, Icon, ItemNotFound, Spin, } from '@antscorp/antsomi-ui/es/components/';
 import { WrapperModalHeader, TicketButton, TicketEditorWrapper } from './styled';
+import { isEmpty } from 'lodash';
+import { Flex } from 'antd/lib';
 // import Message from './components/Message';
 const defaultProps = {
     isOpen: false,
@@ -189,14 +191,8 @@ export const TicketEditor = props => {
         fetchAccountManage();
         fetchAccountPermission();
     }, []);
-    const toggleModal = () => {
-        setIsOpenModal(!isOpenModal);
-    };
     useEffect(() => {
         setOpenDrawer(isOpen);
-        // if (isOpen) {
-        //   setIsSuccessCreated(false);
-        // }
     }, [isOpen]);
     const handleClose = (isCancle, isRulesEdit) => {
         if (isCancle) {
@@ -223,18 +219,30 @@ export const TicketEditor = props => {
         }
         setAnchorEl(null);
     };
+    const isExistTicket = useMemo(() => (!isEmpty(ticketDetails) && !isLoadingDetails) || action === 'create', [ticketDetails, isLoadingDetails, action]);
+    const renderContent = () => {
+        if (isLoadingDetails) {
+            return (_jsx(Flex, { style: { height: '100vh' }, align: "center", justify: "center", children: _jsx(Spin, { spinning: true }) }));
+        }
+        if (!isExistTicket) {
+            return _jsx(ItemNotFound, {});
+        }
+        return (_jsx(Content, { portalId: portalId, token: token, action: action, listUsers: listUsers, domainTicket: domainTicket, domainUpload: domainUpload, config: config, ticketDetails: ticketDetails, listComment: listComment, ticketId: ticketId, userId: userId, fetchgetTicketComments: fetchgetTicketComments, isLoadingComment: isLoadingComment, isLoadingDetails: isLoadingDetails, isLoadingDataSouce: isLoadingDataSouce, handleCloseDrawer: handleCloseDrawer, setIsSuccessCreated: setIsSuccessCreated, accountManage: accountManage, timeZone: timeZone, isLoadingSelectedAccount: isLoadingSelectedAccount, accountEdit: accountEdit, initOwnerId: ownerId, isAllAccount: isAllAccount, openDrawer: openDrawer, dataSelectInput: dataSelectInput, setDataSelectInput: setDataSelectInput }));
+    };
     return (_jsxs(TicketEditorWrapper, { children: [!!useIcon && (_jsxs(TicketButton, { onClick: e => (useChat ? setOpenPopover(true) : setOpenDrawer(true)), children: [_jsx(TicketIcon, {}), _jsx(AddTicketIcon, { className: "add-icon" })] })), !!useChat && (_jsx(_Fragment, { children: _jsxs(Popover, { open: isOpenPopover, className: "popoverBody", children: [_jsx(Typography, { className: "popoverItem", onClick: () => handleSelectPopover('DRAWER'), children: "Create ticket" }), _jsx(Typography, { className: "popoverItem", onClick: () => handleSelectPopover('CHAT'), children: "Chat with us" })] }) })), _jsx(DrawerDetail, { open: openDrawer, onClose: () => handleClose(true, false), menuProps: {
-                    items: [
-                        {
-                            icon: _jsx(Icon, { type: "icon-ants-pencil" }),
-                            label: 'Settings',
-                            key: 'settings',
-                        },
-                    ],
+                    items: !isExistTicket
+                        ? []
+                        : [
+                            {
+                                icon: _jsx(Icon, { type: "icon-ants-pencil" }),
+                                label: 'Settings',
+                                key: 'settings',
+                            },
+                        ],
                     selectedKeys: ['settings'],
                 }, headerProps: {
                     showBorderBottom: true,
-                }, name: "ticket-editor-drawer", children: openDrawer && (_jsx(Content, { portalId: portalId, token: token, action: action, listUsers: listUsers, domainTicket: domainTicket, domainUpload: domainUpload, config: config, ticketDetails: ticketDetails, listComment: listComment, ticketId: ticketId, userId: userId, fetchgetTicketComments: fetchgetTicketComments, isLoadingComment: isLoadingComment, isLoadingDetails: isLoadingDetails, isLoadingDataSouce: isLoadingDataSouce, handleCloseDrawer: handleCloseDrawer, setIsSuccessCreated: setIsSuccessCreated, accountManage: accountManage, timeZone: timeZone, isLoadingSelectedAccount: isLoadingSelectedAccount, accountEdit: accountEdit, initOwnerId: ownerId, isAllAccount: isAllAccount, openDrawer: openDrawer, dataSelectInput: dataSelectInput, setDataSelectInput: setDataSelectInput })) }), _jsx(Modal, { open: isOpenModal, onCancel: () => setIsOpenModal(false), className: "modal", children: _jsxs("div", { className: "wrapperBody", children: [_jsx(WrapperModalHeader, { children: "Confirm deletion of this ticket" }), _jsx("div", { className: "modalBody", children: _jsx("span", { style: { fontSize: '12px', color: '#000' }, children: "Once you confirm cancel, this ticket will NOT be saved." }) }), _jsxs("div", { className: "modalFooter", children: [_jsx(Button, { style: {
+                }, name: "ticket-editor-drawer", children: openDrawer && renderContent() }), _jsx(Modal, { open: isOpenModal, onCancel: () => setIsOpenModal(false), className: "modal", children: _jsxs("div", { className: "wrapperBody", children: [_jsx(WrapperModalHeader, { children: "Confirm deletion of this ticket" }), _jsx("div", { className: "modalBody", children: _jsx("span", { style: { fontSize: '12px', color: '#000' }, children: "Once you confirm cancel, this ticket will NOT be saved." }) }), _jsxs("div", { className: "modalFooter", children: [_jsx(Button, { style: {
                                         height: '28px',
                                         background: '#1f5fac',
                                         color: '#fff',

package/es/components/organism/TicketEditor/styled.js

@@ -424,6 +424,7 @@ export const WrapperLinkItemFiles = styled.div `
       display: flex;
       align-items: center;
       gap: 10px;
+      overflow: hidden;
     }
     .file-icon {
       font-size: 20.5px;

package/es/components/organism/TicketEditorV2/Content.js

@@ -10,6 +10,7 @@ import Service from './Service';
 import { WrapperContent, WrapperContentInput, WrapperEditor, WrapperIconEditor, WrapperInputFile, WrapperLable, WrapperLeftContent, WrapperLinkItemFiles, WrapperMessageContent, WrapperRightContent, WrapperTextEdit, WrapperTextInput, } from './styled';
 import { formatDatarender, handleValidateContent } from './util';
 import { get, keyBy } from 'lodash';
+import { TCallBack } from '../../molecules/QuillEditor/QuillEditor';
 const initValueInput = {
     originTitle: 'Create new ticket',
     title: '',
@@ -137,7 +138,7 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
     const handleEditorChange = content => {
         setTextValue(content);
         updateValueInput({ message: content });
-        setIsLoadingUpload(content.includes('<img src="data:image/png;base64'));
+        // setIsLoadingUpload(content.includes('<img src="data:image/png;base64'));
     };
     const handleUpdateFollowers = arrFolowers => {
         const params = {
@@ -221,12 +222,17 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
         };
     }, [isOpenToast]);
     const handleOnchangeFile = e => {
-        const limitSize = 50 * 1024 * 1024;
-        const sizeFile = e.target?.files[0]?.size;
+        const file = e.target?.files[0];
+        if (!file)
+            return;
+        const sizeFile = file.size;
+        const fileType = file.type;
+        const isImage = fileType.startsWith('image/');
+        const limitSize = isImage ? 10 * 1024 * 1024 : 50 * 1024 * 1024;
         if (sizeFile >= limitSize) {
             setErrFile({
                 isError: true,
-                message: '*Maximum upload file size: 50MB',
+                message: `Maximum file size is reached (10MB for image & 50MB for other types).`,
             });
         }
         else {
@@ -267,15 +273,43 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
                             ? '--'
                             : dataSelectOptions[ticketDetails[info?.value]]?.name }) })] }, info.id));
     };
+    const callbackEditor = (type, value) => {
+        switch (type) {
+            case TCallBack.LOADING_UPLOAD:
+                setIsLoadingUpload(value);
+                break;
+            case TCallBack.ERROR: {
+                switch (value) {
+                    case 'FILE_TOO_LARGE':
+                        setErrFile({
+                            isError: true,
+                            message: '*Maximum upload file size: 10MB',
+                        });
+                        break;
+                    case 'RESET':
+                        setErrFile({
+                            isError: false,
+                            message: '',
+                        });
+                        break;
+                    default:
+                        break;
+                }
+                break;
+            }
+            default:
+                break;
+        }
+    };
     return (_jsxs("div", { style: { height: '100%' }, children: [_jsxs(Helmet, { children: [_jsx("meta", { charSet: "utf-8" }), _jsx("title", { children: browserTitle })] }), _jsx(Spin, { style: { height: '100vh' }, spinning: isLoading || isLoadingDetails || isLoadingDataSouce || isLoadingFollower, children: _jsxs(WrapperContent, { style: { height: '100%' }, children: [_jsxs(WrapperLeftContent, { children: [_jsxs(WrapperContentInput, { style: { alignItems: 'flex-start' }, children: [_jsxs(WrapperLable, { children: ["Owner", _jsx("span", { style: { color: '#ff0000' }, children: "*" })] }), _jsx("div", { children: ownerEmail })] }), _jsxs(WrapperContentInput, { style: { marginTop: '15px', alignItems: 'flex-start' }, children: [_jsx(WrapperLable, { children: "Follower(s)" }), _jsx(SelectAccount, { type: "default", initData: ticketDetails?.followers || [], nameKey: "userName", userIdKey: "userId", users: listUsers, onChange: (_, followers) => onChangeFollowers(followers) })] }), dataSelects?.map((data) => _jsx(_Fragment, { children: renderOptions(data) })), _jsxs(WrapperContentInput, { style: { marginTop: '15px' }, children: [_jsx(WrapperLable, { htmlFor: "referenceUrl", children: "Reference URL" }), isUpdate ? (ticketDetails.referenceUrl ? (_jsx(Tooltip, { title: ticketDetails.referenceUrl, placement: "top", children: _jsx(WrapperTextEdit, { color: "#005fb8", href: ticketDetails.referenceUrl, target: "_blank", children: ticketDetails.referenceUrl }) })) : (_jsx(WrapperTextEdit, { color: "#005fb8", href: ticketDetails.referenceUrl, target: "_blank", children: ticketDetails.referenceUrl }))) : (_jsx(WrapperTextInput, { placeholder: "Reference URL", id: "referenceUrl", 
                                             // width="300px"
-                                            onChange: handleOnchangeInput, name: "referenceUrl", value: valueInput.referenceUrl }))] })] }), _jsxs(WrapperRightContent, { children: [_jsxs(WrapperEditor, { children: [_jsxs("div", { children: [_jsx(QuillEditor, { value: textValue, uploadService: Service.tickets.callApi.uploadFile({
+                                            onChange: handleOnchangeInput, name: "referenceUrl", value: valueInput.referenceUrl }))] })] }), _jsxs(WrapperRightContent, { children: [_jsxs(WrapperEditor, { children: [_jsxs(_Fragment, { children: [_jsx(QuillEditor, { value: textValue, uploadService: Service.tickets.callApi.uploadFile({
                                                         domain: domainUpload,
-                                                    }), onChange: handleEditorChange, placeholder: "Enter your comment...", height: 195 }), _jsxs("div", { children: [valueInput.files?.length > 0 && (_jsx(WrapperLinkItemFiles, { children: valueInput.files?.map((file, index) => (_jsxs("div", { className: "file-item", children: [_jsxs("div", { className: "file-name-group", children: [_jsx(Icon, { className: "file-icon", type: "icon-ants-attachment" }), _jsx(Tooltip, { title: file?.file_name, children: _jsx("span", { className: "file-name", children: file?.file_name }) })] }), _jsx(Icon, { onClick: () => handleRemoveFileV2(index), className: "remove-btn", type: "icon-ants-remove-slim" })] }, file?.token))) })), _jsxs(WrapperIconEditor, { borderTop: !!valueInput.files?.length, children: [_jsxs(WrapperInputFile, { children: [_jsx("label", { htmlFor: `fileImage-${fileInputKey}`, className: "upload-wrapper-label", children: _jsx(Icon, { type: "icon-ants-attachment", className: "upload-icon" }) }), _jsx("input", { type: "file", style: { position: 'absolute', top: 0, right: 0, display: 'none' }, name: `fileImage-${fileInputKey}`, id: `fileImage-${fileInputKey}`, onChange: handleOnchangeFile }, fileInputKey)] }), isUpdate && (_jsx(Button, { type: "primary", disabled: !handleValidateContent(textValue) || isLoadingUpload, className: "reply-btn", style: {
+                                                    }), onChange: handleEditorChange, placeholder: "Enter your comment...", height: 195, callback: callbackEditor }), _jsxs("div", { children: [valueInput.files?.length > 0 && (_jsx(WrapperLinkItemFiles, { children: valueInput.files?.map((file, index) => (_jsxs("div", { className: "file-item", children: [_jsxs("div", { className: "file-name-group", children: [_jsx(Icon, { className: "file-icon", type: "icon-ants-attachment" }), _jsx(Tooltip, { title: file?.file_name, children: _jsx("span", { className: "file-name", children: file?.file_name }) })] }), _jsx(Icon, { onClick: () => handleRemoveFileV2(index), className: "remove-btn", type: "icon-ants-remove-slim" })] }, file?.token))) })), _jsxs(WrapperIconEditor, { borderTop: !!valueInput.files?.length, children: [_jsxs(WrapperInputFile, { children: [_jsx("label", { htmlFor: `fileImage-${fileInputKey}`, className: "upload-wrapper-label", children: _jsx(Icon, { type: "icon-ants-attachment", className: "upload-icon" }) }), _jsx("input", { type: "file", style: { position: 'absolute', top: 0, right: 0, display: 'none' }, name: `fileImage-${fileInputKey}`, id: `fileImage-${fileInputKey}`, onChange: handleOnchangeFile }, fileInputKey)] }), isUpdate && (_jsx(Button, { type: "primary", disabled: !handleValidateContent(textValue) || isLoadingUpload, className: "reply-btn", style: {
                                                                         background: `${!handleValidateContent(textValue) || isLoadingUpload
                                                                             ? '#ccc'
                                                                             : '#1f5fac'}`,
-                                                                    }, onClick: handleUpdateComment, loading: isLoadingUpload, children: "Reply" }))] })] })] }), errFile.isError ? (_jsx("div", { className: "error-message", children: errFile.message })) : (isEmptyField &&
+                                                                    }, onClick: handleUpdateComment, children: "Reply" }))] })] })] }), errFile.isError ? (_jsx("div", { className: "error-message", children: errFile.message })) : (isEmptyField &&
                                             !valueInput?.message && (_jsx("div", { className: "error-message", children: "* This field can't be empty" })))] }), isUpdate && (_jsx(Spin, { spinning: isLoadingComment, children: _jsx(WrapperMessageContent, { children: listComment?.map(comment => (_jsx(MessageComponent, { toUser: comment?.toUser, fromUser: comment?.fromUser, followers: comment?.followers, 
                                             // mailFollower={comment?.mailFollower}
                                             message: comment?.message, date: comment?.createdDate, attachments: comment?.attachments, timeZone: timeZone, submitterEmail: comment?.submitterEmail }, comment?.id))) }) }))] })] }) })] }));

package/es/components/organism/TicketEditorV2/components/MessageComponent.js

@@ -18,6 +18,7 @@ const MessageComponent = ({ toUser, fromUser, followers, attachments, message, d
         if (refMesage.current) {
             refMesage.current.querySelectorAll('img')?.forEach(img => {
                 img.style.cursor = 'pointer';
+                img.style.width = '100%';
                 img.addEventListener('click', () => {
                     setModalImg({
                         ...modalImg,

package/es/components/organism/TicketEditorV2/styled.js

@@ -34,7 +34,7 @@ export const WrapperLeftContent = styled.div `
 `;
 export const WrapperRightContent = styled.div `
   flex: 2;
-  width: 100%;
+  max-width: 66.67%;
   ::-webkit-scrollbar {
     width: 8px;
     height: 8px;
@@ -423,6 +423,7 @@ export const WrapperLinkItemFiles = styled.div `
       display: flex;
       align-items: center;
       gap: 10px;
+      overflow: hidden;
     }
     .file-icon {
       font-size: 20.5px;

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

@@ -15,4 +15,5 @@ export { AccountProfile, type AccountSettingProps } from './AccountProfile';
 export * from './Login';
 export * from './Filter';
 export { ActivityTimeline, type ActivityTimeLineProps } from './ActivityTimeline';
+export { TextEditor, TextEditorProvider, type TextEditorProps, type TextEditorRef, type TextEditorJSONContent, type TextEditorProviderProps, type TextEditorProviderRefHandler, } from './TextEditor';
 export { WhatsappMobile, SAMPLE_PREVIEW } from './PreviewCollections';

package/es/components/organism/index.js

@@ -15,4 +15,5 @@ export { AccountProfile } from './AccountProfile';
 export * from './Login';
 export * from './Filter';
 export { ActivityTimeline } from './ActivityTimeline';
+export { TextEditor, TextEditorProvider, } from './TextEditor';
 export { WhatsappMobile, SAMPLE_PREVIEW } from './PreviewCollections';

package/es/components/organism/index.scss

@@ -0,0 +1 @@
+@import url('./TextEditor/index.scss');

package/es/hooks/index.d.ts

@@ -26,3 +26,6 @@ export * from './useCustomRouter';
 export * from './useUpdateEffect';
 export * from './useOutsideClick';
 export * from './useDebouncedCallbackV2';
+export * from './useElementSize';
+export * from './useIsMounted';
+export * from './useBroadcastedLocalStorage';

package/es/hooks/index.js

@@ -45,3 +45,6 @@ export * from './useCustomRouter';
 export * from './useUpdateEffect';
 export * from './useOutsideClick';
 export * from './useDebouncedCallbackV2';
+export * from './useElementSize';
+export * from './useIsMounted';
+export * from './useBroadcastedLocalStorage';

package/es/hooks/useBroadcastedLocalStorage.d.ts

@@ -0,0 +1,5 @@
+export declare function useBroadcastedLocalStorage<T>(key: string, initialValue: T): {
+    readonly value: T;
+    readonly setValue: (next: T | ((prev: T) => T)) => void;
+    readonly remove: () => void;
+};

package/es/hooks/useBroadcastedLocalStorage.js

@@ -0,0 +1,71 @@
+/* eslint-disable no-console */
+import { useEffect, useState, useRef } from 'react';
+import { useDeepCompareEffect } from './useDeepCompareEffect';
+export function useBroadcastedLocalStorage(key, initialValue) {
+    const [value, setValue] = useState(() => {
+        if (typeof window === 'undefined')
+            return initialValue;
+        try {
+            const saved = window.localStorage.getItem(key);
+            return saved != null ? JSON.parse(saved) : initialValue;
+        }
+        catch {
+            return initialValue;
+        }
+    });
+    // We keep a ref to avoid re-creating the channel on every render
+    const channelRef = useRef(null);
+    // Initialize BroadcastChannel once
+    useEffect(() => {
+        if (typeof window === 'undefined' || !('BroadcastChannel' in window)) {
+            console.warn('BroadcastChannel not supported in this environment');
+            return;
+        }
+        const channel = new BroadcastChannel(`localstorage_${key}`);
+        channelRef.current = channel;
+        // Listen for incoming messages
+        const onMessage = (event) => {
+            setValue(event.data.value);
+        };
+        channel.addEventListener('message', onMessage);
+        return () => {
+            channel.removeEventListener('message', onMessage);
+            channel.close();
+        };
+    }, [key]);
+    // Whenever `value` changes, persist and broadcast
+    useDeepCompareEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        try {
+            window.localStorage.setItem(key, JSON.stringify(value));
+        }
+        catch (err) {
+            console.error('Failed to write to localStorage:', err);
+        }
+        if (channelRef.current) {
+            channelRef.current.postMessage({ value });
+        }
+    }, [key, value]);
+    // Expose setter that mirrors functional API of useState
+    const setValueAndBroadcast = (next) => {
+        setValue(prev => {
+            const computed = next instanceof Function ? next(prev) : next;
+            return computed;
+        });
+    };
+    // Optional: a remove function
+    const remove = () => {
+        try {
+            window.localStorage.removeItem(key);
+            setValue(initialValue);
+            if (channelRef.current) {
+                channelRef.current.postMessage({ value: initialValue });
+            }
+        }
+        catch (err) {
+            console.error('Failed to remove localStorage item:', err);
+        }
+    };
+    return { value, setValue: setValueAndBroadcast, remove };
+}

package/es/hooks/useElementSize.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const useElementSize: <T extends HTMLElement>(options?: {
+    type: string;
+}) => readonly [import("react").RefObject<T>, {
+    width: number;
+    height: number;
+}];

package/es/hooks/useElementSize.js

@@ -0,0 +1,56 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+export const useElementSize = (options = { type: 'offset' }) => {
+    const { type = 'offset' } = options;
+    const [size, setSize] = useState({
+        width: 0,
+        height: 0,
+    });
+    const ref = useRef(null);
+    const updateSize = useCallback(() => {
+        if (ref.current) {
+            let width;
+            let height;
+            switch (type) {
+                case 'client':
+                    width = ref.current.clientWidth; // excludes padding, border, scrollbar
+                    height = ref.current.clientHeight;
+                    break;
+                case 'scroll':
+                    width = ref.current.scrollWidth; // includes all scrollable content
+                    height = ref.current.scrollHeight;
+                    break;
+                case 'offset':
+                default:
+                    width = ref.current.offsetWidth; // includes padding and border
+                    height = ref.current.offsetHeight;
+                    break;
+            }
+            setSize({ width, height });
+        }
+    }, [type]);
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        // Set initial size
+        updateSize();
+        // Use ResizeObserver if available
+        if (typeof ResizeObserver !== 'undefined') {
+            const resizeObserver = new ResizeObserver(() => {
+                // Always use the same measurement method as updateSize
+                updateSize();
+            });
+            resizeObserver.observe(element);
+            return () => {
+                resizeObserver.unobserve(element);
+            };
+        }
+        // Fallback to window resize event
+        const handleResize = () => updateSize();
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [updateSize]);
+    return [ref, size];
+};

package/es/hooks/useIsMounted.d.ts

@@ -0,0 +1 @@
+export declare const useIsMounted: () => () => boolean;

package/es/hooks/useIsMounted.js

@@ -0,0 +1,11 @@
+import { useCallback, useEffect, useRef } from 'react';
+export const useIsMounted = () => {
+    const isMountedRef = useRef(false);
+    useEffect(() => {
+        isMountedRef.current = true;
+        return () => {
+            isMountedRef.current = false;
+        };
+    }, []);
+    return useCallback(() => isMountedRef.current, []);
+};

package/es/locales/en/translation.json

@@ -597,7 +597,8 @@
     "noData": "No data",
     "extendValue": {
         "title": "Extend Value",
-        "placeholder": "Input or paste multiple values separated by Enter"
+        "placeholder": "Input or paste multiple values separated by Enter",
+        "placeholderNumber": "Input or paste multiple values separated by Enter. Only accept numeric values."
     },
     "leftMenu": {
         "pageTitle": {

package/es/locales/i18n.d.ts

@@ -3770,6 +3770,7 @@ export declare const translationsJson: {
             extendValue: {
                 title: string;
                 placeholder: string;
+                placeholderNumber: string;
             };
             leftMenu: {
                 pageTitle: {
@@ -7176,6 +7177,7 @@ export declare const translationsJson: {
             extendValue: {
                 title: string;
                 placeholder: string;
+                placeholderNumber: string;
             };
             matchesAnySelect: {
                 noData: string;
@@ -10661,6 +10663,6 @@ export declare const translationsJson: {
         };
     };
 };
-declare const i18nInstance: import("i18next").i18n;
+declare const i18nInstance: import("node_modules/i18next").i18n;
 export declare const getTranslateMessage: (id: string, defaultMessage?: string, value?: Record<string, unknown>) => string;
 export default i18nInstance;

package/es/locales/vi/translation.json

@@ -144,7 +144,8 @@
     "noData": "Không có dữ liệu",
     "extendValue": {
         "title": "Mở rộng giá trị",
-        "placeholder": "Nhập hoặc dán nhiều giá trị cách nhau bằng Enter"
+        "placeholder": "Nhập hoặc dán nhiều giá trị cách nhau bằng Enter",
+        "placeholderNumber": "Nhập hoặc dán nhiều giá trị cách nhau bằng Enter. Chỉ chấp nhận giá trị số "
     },
     "matchesAnySelect": {
         "noData": "Bạn không có giá trị nào <br /> Bấm vào Extend Value để thêm giá trị"

package/es/utils/common.d.ts

@@ -66,17 +66,14 @@ export declare const searchParamsToObject: (searchParams?: string) => Record<str
 export declare const getShuffleArray: <T>(array: T[]) => T[];
 export declare const snakeCaseToCamelCase: <T = Record<string, any>>(object: Record<string, any> | Record<string, any>[], recursive?: boolean) => T;
 export declare const camelCaseToSnakeCase: <T = Record<string, any>>(object: Record<string, any>, recursive?: boolean) => T;
-export declare function generateKey(): any;
+export declare function generateKey(): string;
 export declare const formatUserId: (userId?: number) => string;
 /**
- * Function to remove accent
- * @param str - String want to remove accent
- * @returns {string} - Result after remove accent
- */
-export declare const removeAccent: (str: string) => string;
-/** Remove all accents and convert string to lower case, remove leading and trailing white space */
-export declare const simplifyString: (str: string) => string;
-/**
+ * Checks string matching based on a query, supporting fuzzy matching,
+ * where the query characters must appear in order within the target string.
+ * Allows for missing characters in the query relative to the target,
+ * and ignores case, diacritics, and spaces.
+ *
  * @param str target string
  * @param queryStr search query
  * @returns true if target string includes search query

package/es/utils/common.js

@@ -430,35 +430,56 @@ export function generateKey() {
 }
 export const formatUserId = (userId) => String(userId || '').replace(/(\d{3})(\d{3})(\d{0,})/, `$1-$2-$3`);
 /**
- * Function to remove accent
- * @param str - String want to remove accent
- * @returns {string} - Result after remove accent
+ * Normalizes a string for searching by:
+ * 1. Converting to NFD Unicode form and removing diacritics.
+ * 2. Converting to lowercase.
+ * 3. Removing all whitespace.
+ * @param str The string to normalize.
+ * @returns The normalized string.
  */
-export const removeAccent = (str) => {
-    str = str.replace(/[àáạảãâầấậẩẫăằắặẳẵ]/g, 'a');
-    str = str.replace(/[èéẹẻẽêềếệểễ]/g, 'e');
-    str = str.replace(/[ìíịỉĩ]/g, 'i');
-    str = str.replace(/[òóọỏõôồốộổỗơờớợởỡ]/g, 'o');
-    str = str.replace(/[ùúụủũưừứựửữ]/g, 'u');
-    str = str.replace(/[ỳýỵỷỹ]/g, 'y');
-    str = str.replace(/đ/g, 'd');
-    str = str.replace(/[ÀÁẠẢÃÂẦẤẬẨẪĂẰẮẶẲẴ]/g, 'A');
-    str = str.replace(/[ÈÉẸẺẼÊỀẾỆỂỄ]/g, 'E');
-    str = str.replace(/[ÌÍỊỈĨ]/g, 'I');
-    str = str.replace(/[ÒÓỌỎÕÔỒỐỘỔỖƠỜỚỢỞỠ]/g, 'O');
-    str = str.replace(/Ù|Ú|Ụ|Ủ|Ũ|Ư|Ừ|Ứ|Ự|Ử|Ữ/g, 'U');
-    str = str.replace(/Ỳ|Ý|Ỵ|Ỷ|Ỹ/g, 'Y');
-    str = str.replace(/Đ/g, 'D');
-    return str;
-};
-/** Remove all accents and convert string to lower case, remove leading and trailing white space */
-export const simplifyString = (str) => removeAccent(`${str || ''}`.toLowerCase().trim()) || '';
+function normalizeStringForSearch(str) {
+    if (!str) {
+        return ''; // Handle null, undefined, or empty string inputs
+    }
+    return str
+        .normalize('NFD') // Decompose accented characters (e.g., "á" -> "a" + "´")
+        .replace(/[\u0300-\u036f]/g, '') // Remove diacritical marks
+        .toLowerCase() // Convert to lowercase
+        .replace(/\s+/g, ''); // Remove all whitespace
+}
 /**
+ * Checks string matching based on a query, supporting fuzzy matching,
+ * where the query characters must appear in order within the target string.
+ * Allows for missing characters in the query relative to the target,
+ * and ignores case, diacritics, and spaces.
+ *
  * @param str target string
  * @param queryStr search query
  * @returns true if target string includes search query
  */
-export const searchStringQuery = (str, queryStr) => simplifyString(str).includes(simplifyString(queryStr || ''));
+export const searchStringQuery = (str, queryStr) => {
+    const normalizedQuery = normalizeStringForSearch(queryStr);
+    const normalizedItem = normalizeStringForSearch(str);
+    // Optimization: if normalized query is longer than normalized item,
+    // it cannot be a subsequence.
+    if (normalizedQuery.length > normalizedItem.length) {
+        return false;
+    }
+    // Subsequence check:
+    // Iterate through both normalized strings.
+    // If characters match, advance the query pointer.
+    // Always advance the item pointer.
+    let queryIndex = 0;
+    let itemIndex = 0;
+    while (queryIndex < normalizedQuery.length && itemIndex < normalizedItem.length) {
+        if (normalizedQuery[queryIndex] === normalizedItem[itemIndex]) {
+            queryIndex++;
+        }
+        itemIndex++;
+    }
+    // If queryIndex reached the end of normalizedQuery, all its characters were found in order.
+    return queryIndex === normalizedQuery.length;
+};
 /**
  * Checks if any of the provided values match the search value.
  *

package/es/utils/index.d.ts

@@ -9,3 +9,4 @@ export * from './actionButtons';
 export * from './dataTable';
 export * from './cookie';
 export * from './attribute';
+export * from './web';

package/es/utils/index.js

@@ -9,3 +9,4 @@ export * from './actionButtons';
 export * from './dataTable';
 export * from './cookie';
 export * from './attribute';
+export * from './web';