@antscorp/antsomi-ui 1.3.5-beta.73 → 1.3.5-beta.730

package/es/__tests__/fileMock.test.d.ts

@@ -0,0 +1,2 @@
+declare const _exports: string;
+export = _exports;

package/es/__tests__/fileMock.test.js

@@ -0,0 +1,2 @@
+"use strict";
+module.exports = 'test-file-stub';

package/es/__tests__/styleMock.test.js

@@ -0,0 +1,2 @@
+"use strict";
+module.exports = {};

package/es/assets/css/main.scss

@@ -2,3 +2,5 @@
   --primary-color: #005fb8;
   --text-base-color: #222222;
 }
+
+

package/es/components/atoms/Alert/Alert.d.ts

@@ -1,4 +1,9 @@
-/// <reference types="react" />
-export declare const Alert: import("styled-components").StyledComponent<import("react").FC<import("antd").AlertProps> & {
+import React from 'react';
+import type { AlertProps as AntdAlertProps } from 'antd';
+export declare const AlertStyled: import("styled-components").StyledComponent<React.FC<AntdAlertProps> & {
     ErrorBoundary: typeof import("antd/es/alert/ErrorBoundary").default;
 }, any, {}, never>;
+export interface AlertProps extends AntdAlertProps {
+    variant?: 'default' | 'outline';
+}
+export declare const Alert: React.FC<AlertProps>;

package/es/components/atoms/Alert/Alert.js

@@ -1,19 +1,55 @@
-var _a, _b, _c, _d;
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 // Libraries
+import React from 'react';
 import styled from 'styled-components';
 import { Alert as AntdAlert } from 'antd';
 // Constants
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const Alert = styled(AntdAlert) `
-  padding: 10px;
-  font-size: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px;
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+import clsx from 'clsx';
+import { WarningIcon } from '@antscorp/antsomi-ui/es/components/icons';
+export const AlertStyled = styled(AntdAlert) `
+  padding: 15px !important;
+  font-size: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.fontSize}px;
+  box-sizing: border-box;
+  gap: 15px;
 
-  .antsomi-alert-message {
-    color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorTextBase} !important;
-  }
+  /* .antsomi-alert-message {
+    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorTextBase} !important;
+  } */
 
   &.antsomi-alert-info {
-    background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw1};
-    border-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.bw1};
+    background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw1};
+    border-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1};
+    svg {
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue7};
+    }
+  }
+
+  &.antsomi-alert-outline {
+    background-color: transparent;
+
+    &.antsomi-alert-warning {
+      border-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.orange6} !important;
+      svg {
+        margin: 0;
+      }
+    }
   }
 `;
+export const Alert = props => {
+    const { variant = 'default', className, icon, type } = props, restProps = __rest(props, ["variant", "className", "icon", "type"]);
+    return (React.createElement(AlertStyled, Object.assign({ className: clsx(className, {
+            'antsomi-alert-outline': variant === 'outline',
+            'antsomi-alert-default': variant === 'default',
+        }), icon: variant === 'outline' && !icon && type === 'warning' ? React.createElement(WarningIcon, null) : icon, type: type }, restProps)));
+};

package/es/components/atoms/Avatar/Avatar.d.ts

@@ -0,0 +1,2 @@
+export { Avatar } from 'antd';
+export type { AvatarProps } from 'antd';

package/es/components/atoms/Avatar/Avatar.js

@@ -0,0 +1 @@
+export { Avatar } from 'antd';

package/es/components/atoms/Avatar/index.d.ts

@@ -0,0 +1 @@
+export * from './Avatar';

package/es/components/atoms/Avatar/index.js

@@ -0,0 +1 @@
+export * from './Avatar';

package/es/components/atoms/Button/Button.d.ts

@@ -1 +1,2 @@
 export { Button } from 'antd';
+export type { ButtonProps } from 'antd';

package/es/components/atoms/Button/index.d.ts

@@ -1,4 +1 @@
-/// <reference types="react" />
-export declare const Button: import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
-    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
-};
+export * from './Button';

package/es/components/atoms/Button/index.js

@@ -1,2 +1 @@
-import { Button as AntdButton } from './Button';
-export const Button = AntdButton;
+export * from './Button';

package/es/components/atoms/ContentEditable/ContentEditable.d.ts

@@ -0,0 +1,16 @@
+import React, { FocusEvent } from 'react';
+import { TypographyProps } from 'antd';
+import { EllipsisConfig } from 'antd/es/typography/Base';
+interface ContentEditableProps extends Omit<TypographyProps['Text'], 'className' | '$$typeof'> {
+    onSave: (innerText: string, e?: FocusEvent<any>) => void;
+    value?: string;
+    isEdit?: boolean;
+    disabledBlur?: boolean;
+    maxLength?: number;
+    breakWord?: boolean;
+    regexPattern?: RegExp;
+    className?: string;
+    ellipsis?: EllipsisConfig;
+}
+export declare const ContentEditable: React.FC<React.PropsWithChildren<ContentEditableProps>>;
+export {};

package/es/components/atoms/ContentEditable/ContentEditable.js

@@ -0,0 +1,76 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect, useRef, useState } from 'react';
+import { ContentEditableWrapper } from './styled';
+// NOTE: User can keypress when value reach max length
+const IGNORE_KEY_CODE = [
+    'Backspace',
+    'Delete',
+    'ArrowRight',
+    'ArrowLeft',
+    'ControlLeft',
+    'ControlRight',
+    'ShiftLeft',
+    'ShiftRight',
+    'Tab',
+];
+export const ContentEditable = React.memo(props => {
+    const { value, onSave, className, isEdit, disabledBlur, maxLength, breakWord, regexPattern, ellipsis } = props, restProps = __rest(props, ["value", "onSave", "className", "isEdit", "disabledBlur", "maxLength", "breakWord", "regexPattern", "ellipsis"]);
+    const [isEditable, setIsEditable] = useState(false);
+    const elementRef = useRef(null);
+    useEffect(() => {
+        if (isEdit !== undefined) {
+            if (!isEdit)
+                onSave(elementRef && elementRef.current ? elementRef.current.innerText : '');
+            setIsEditable(isEdit);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isEdit]);
+    return (React.createElement(ContentEditableWrapper, Object.assign({}, restProps, { "$breakWord": breakWord, ref: elementRef, className: `${isEditable ? 'editable' : ''} ${className || ''}`, suppressContentEditableWarning: true, contentEditable: true, spellCheck: false, ellipsis: { tooltip: true }, onClick: () => {
+            if (!isEditable) {
+                setIsEditable(true);
+            }
+        }, onBlur: (e) => {
+            if (disabledBlur)
+                return;
+            setIsEditable(false);
+            onSave(e.target.innerText, e);
+        }, onKeyDown: (e) => {
+            var _a;
+            if (!isEditable)
+                e.preventDefault();
+            // Check letters are selected => user want to replace it => allow edit
+            const selectedLetter = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString().length;
+            // Check user want select all text
+            const isSelectAll = e.code === 'KeyA' && e.ctrlKey;
+            if (!IGNORE_KEY_CODE.includes(e.code) &&
+                !selectedLetter &&
+                !isSelectAll &&
+                regexPattern &&
+                !e.code.match(regexPattern) &&
+                !isSelectAll)
+                e.preventDefault();
+            if (e.code === 'Enter') {
+                e.preventDefault();
+                onSave(e.currentTarget.innerText);
+                setIsEditable(false);
+            }
+            // NOTE: check current text length
+            if (maxLength &&
+                e.currentTarget.innerText.length >= maxLength &&
+                !IGNORE_KEY_CODE.includes(e.code) &&
+                !selectedLetter &&
+                !isSelectAll) {
+                e.preventDefault();
+            }
+        } }), value));
+});

package/es/components/atoms/ContentEditable/index.d.ts

@@ -0,0 +1 @@
+export { ContentEditable } from './ContentEditable';

package/es/components/atoms/ContentEditable/index.js

@@ -0,0 +1 @@
+export { ContentEditable } from './ContentEditable';

package/es/components/atoms/ContentEditable/styled.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ContentEditableWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {
+    $breakWord?: boolean | undefined;
+}, never>;

package/es/components/atoms/ContentEditable/styled.js

@@ -0,0 +1,20 @@
+// Libraries
+import styled from 'styled-components';
+import { Typography } from '@antscorp/antsomi-ui/es/components';
+export const ContentEditableWrapper = styled(Typography.Text) `
+  outline-width: 0;
+  caret-color: transparent;
+  border-radius: 4px;
+  display: inline-flex !important;
+  align-items: center !important;
+  word-break: ${props => (props.$breakWord ? 'break-word' : 'normal')};
+
+  &.editable {
+    outline: 2px solid var(--text-link-color);
+    outline-offset: -2px;
+    caret-color: unset;
+  }
+
+  padding: 4px;
+  /* font-weight: bold; */
+`;

package/es/components/atoms/Flex/index.d.ts

@@ -1 +1,2 @@
-export * from './Flex';
+export { Flex } from './Flex';
+export type { FlexProps } from './Flex';

package/es/components/atoms/Flex/index.js

@@ -1 +1 @@
-export * from './Flex';
+export { Flex } from './Flex';

package/es/components/atoms/Icon/index.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-interface IconProps {
+import { IconProps as OriginIconProps } from '../../icons/types';
+export interface IconProps extends OriginIconProps {
     size?: number;
     width?: number;
     height?: number;
     color?: string;
     style?: React.CSSProperties;
 }
-export declare const Icon: import("styled-components").StyledComponent<any, any, object & IconProps, string | number | symbol>;
-export {};
+export declare const Icon: import("styled-components").StyledComponent<any, any, IconProps, string | number | symbol>;

package/es/components/atoms/Iframe/Iframe.d.ts

@@ -0,0 +1,4 @@
+import React, { IframeHTMLAttributes } from 'react';
+export interface IframeProps extends IframeHTMLAttributes<HTMLIFrameElement> {
+}
+export declare const Iframe: React.FC<IframeProps>;

package/es/components/atoms/Iframe/Iframe.js

@@ -0,0 +1,72 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import clsx from 'clsx';
+import React, { useEffect, useRef } from 'react';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+// Styled
+import styled from 'styled-components';
+const StyledIframe = styled.iframe `
+  border: none;
+  opacity: 0;
+`;
+export const Iframe = props => {
+    const { children, className, src, srcDoc } = props, restProps = __rest(props, ["children", "className", "src", "srcDoc"]);
+    // Ref
+    const iframeRef = useRef(null);
+    // Effects
+    useEffect(() => 
+    // Handle hide iframe until iframe is loaded
+    () => {
+        if (iframeRef.current) {
+            iframeRef.current.style.opacity = '0';
+        }
+    }, [src, srcDoc]);
+    useEffect(() => {
+        const iframe = iframeRef.current;
+        const handleLoad = () => {
+            var _a;
+            const iframeDoc = iframe.contentDocument || ((_a = iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.document);
+            const style = document.createElement('style');
+            style.innerHTML = `
+         ::-webkit-scrollbar {
+            background-color: transparent;
+            width: 4px;
+          }
+          ::-webkit-scrollbar-thumb {
+            background-color: transparent;
+            border-radius: 4px;
+          }
+
+          *:hover {
+            &::-webkit-scrollbar-thumb {
+              background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.gray5};
+            }
+          }
+      `;
+            if (iframeDoc && iframeRef.current) {
+                iframeDoc.head.appendChild(style);
+                iframeRef.current.style.opacity = '1';
+            }
+        };
+        if (iframe) {
+            iframe.addEventListener('load', handleLoad);
+        }
+        return () => {
+            if (iframe) {
+                iframe.removeEventListener('load', handleLoad);
+            }
+        };
+    }, []);
+    return (React.createElement(StyledIframe, Object.assign({}, restProps, { src: src, srcDoc: srcDoc, className: clsx('antsomi-iframe', className), ref: iframeRef })));
+};

package/es/components/atoms/Iframe/index.d.ts

@@ -0,0 +1 @@
+export { Iframe, type IframeProps } from './Iframe';

package/es/components/atoms/Iframe/index.js

@@ -0,0 +1 @@
+export { Iframe } from './Iframe';

package/es/components/atoms/Image/Image.d.ts

@@ -0,0 +1,2 @@
+export { Image } from 'antd';
+export type { ImageProps } from 'antd';

package/es/components/atoms/Image/Image.js

@@ -0,0 +1 @@
+export { Image } from 'antd';

package/es/components/atoms/Image/index.d.ts

@@ -0,0 +1 @@
+export * from './Image';

package/es/components/atoms/Image/index.js

@@ -0,0 +1 @@
+export * from './Image';

package/es/components/atoms/Input/Input.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="hoist-non-react-statics" />
 import React, { ReactNode } from 'react';
-import { InputProps as AntdInputProps, Input as AntdInput } from 'antd';
+import { InputProps as AntdInputProps, Input as AntdInput, InputRef } from 'antd';
 export interface InputProps extends AntdInputProps {
     noborder?: 'true' | 'false' | boolean;
     debounce?: number;
     label?: ReactNode;
-    onAfterChange?: (value: any) => void;
+    onAfterChange?: (value: string) => void;
     errorArchive?: string;
     required?: boolean;
     isReverseMask?: boolean;
@@ -14,18 +14,22 @@ export interface InputProps extends AntdInputProps {
     focused?: boolean;
     errorMsg?: string;
     disableUndo?: boolean;
+    withWrapper?: boolean;
 }
-export declare const Input: string & import("styled-components").StyledComponentBase<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<import("antd").InputRef>> & {
+export declare const Input: string & import("styled-components").StyledComponentBase<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<InputRef>> & {
     Group: React.FC<import("antd/es/input").GroupProps>;
-    Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<import("antd").InputRef>>;
+    Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<InputRef>>;
     TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
-    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<import("antd").InputRef>>;
-}, any, InputProps, never> & import("hoist-non-react-statics").NonReactStatics<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<import("antd").InputRef>> & {
+    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<InputRef>>;
+}, any, InputProps, never> & import("hoist-non-react-statics").NonReactStatics<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<InputRef>> & {
     Group: React.FC<import("antd/es/input").GroupProps>;
-    Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<import("antd").InputRef>>;
+    Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<InputRef>>;
     TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
-    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<import("antd").InputRef>>;
+    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<InputRef>>;
 }, {}> & {
     DefaultInput: typeof AntdInput;
+    CustomSearch: typeof SearchInput;
 };
+declare const SearchInput: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
 export declare const TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
+export {};

package/es/components/atoms/Input/Input.js

@@ -16,15 +16,16 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 // Types
 import { Input as AntdInput } from 'antd';
 // Components
-import { RequiredLabel, Text } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Icon, RequiredLabel, Text } from '@antscorp/antsomi-ui/es/components/atoms';
 // Utils
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
 import { getPreventKeyboardAction } from '@antscorp/antsomi-ui/es/utils/web';
 import { StyledInput } from './styled';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 const PATH = '@antscorp/antsomi-ui/es/components/atoms/Input/Input.tsx';
-const OriginInput = props => {
+const OriginInput = React.forwardRef((props, ref) => {
     // Props
-    const { debounce, errorArchive, required, labelColor, isReverseMask, isHideErrMessage, focused, label, onAfterChange, onChange, errorMsg } = props, restProps = __rest(props, ["debounce", "errorArchive", "required", "labelColor", "isReverseMask", "isHideErrMessage", "focused", "label", "onAfterChange", "onChange", "errorMsg"]);
+    const { withWrapper, debounce, errorArchive, required, labelColor, isReverseMask, isHideErrMessage, focused, label, onAfterChange, onChange, errorMsg } = props, restProps = __rest(props, ["withWrapper", "debounce", "errorArchive", "required", "labelColor", "isReverseMask", "isHideErrMessage", "focused", "label", "onAfterChange", "onChange", "errorMsg"]);
     // State
     const [value, setValue] = useState(props.value);
     const [isFocused, setFocused] = useState(false);
@@ -76,21 +77,28 @@ const OriginInput = props => {
     if (props.disableUndo) {
         listDisableActions.push('undo');
     }
-    return (React.createElement("div", { className: "input__wrapper" },
+    const content = (React.createElement(React.Fragment, null,
         label && renderRequiredLabel(label),
-        React.createElement(StyledInput, Object.assign({}, restProps, { value: value, onBlur: e => {
+        React.createElement(StyledInput, Object.assign({}, restProps, { ref: ref, value: value, onBlur: e => {
                 if (!isFocused) {
                     setFocused(true);
                 }
                 restProps.onBlur && restProps.onBlur(e);
             }, onChange: onChangeInput }, getPreventKeyboardAction(listDisableActions))),
         (restProps.status === 'error' || errorArchive || requiredMsg) && !isHideErrMessage ? (React.createElement(Text, { color: "#ff4d4f", style: { marginLeft: 8, marginTop: 5 } }, errorMsg || errorArchive || requiredMsg)) : null));
-};
+    if (!withWrapper)
+        return content;
+    return React.createElement("div", { className: "input__wrapper" }, content);
+});
 OriginInput.defaultProps = {
     debounce: 400,
     isHideErrMessage: false,
+    withWrapper: true,
 };
 export const Input = OriginInput;
+const SearchInput = React.forwardRef((props, ref) => (React.createElement(OriginInput, Object.assign({ bordered: false, autoFocus: true, suffix: React.createElement(Icon, { type: "icon-ants-search-2", size: 24, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 }) }, props, { ref: ref, className: `${props.className} antsomi-search-input` }))));
+Input.CustomSearch = SearchInput;
 Input.TextArea = StyledInput.TextArea;
 Input.DefaultInput = AntdInput;
+Input.Password = AntdInput.Password;
 export const { TextArea } = StyledInput;

package/es/components/atoms/Input/styled.d.ts

@@ -9,3 +9,9 @@ export declare const StyledInput: import("styled-components").StyledComponent<im
 export declare const TextArea: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & import("react").RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>, any, {
     showBorder?: boolean | undefined;
 }, never>;
+export declare const StyledSearchInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").InputProps & import("react").RefAttributes<import("antd").InputRef>> & {
+    Group: import("react").FC<import("antd/es/input").GroupProps>;
+    Search: import("react").ForwardRefExoticComponent<import("antd/es/input").SearchProps & import("react").RefAttributes<import("antd").InputRef>>;
+    TextArea: import("react").ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & import("react").RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
+    Password: import("react").ForwardRefExoticComponent<import("antd/es/input").PasswordProps & import("react").RefAttributes<import("antd").InputRef>>;
+}, any, {}, never>;

package/es/components/atoms/Input/styled.js

@@ -107,3 +107,8 @@ export const TextArea = styled(InputAntd.TextArea) `
       border: 1px solid #e0e0e0;
     `}
 `;
+export const StyledSearchInput = styled(InputAntd) `
+  &.antsomi-input-affix-wrapper:hover > input.antsomi-input {
+    background-color: transparent;
+  }
+`;

package/es/components/atoms/InputDynamic/EditCaretPositioning.js

@@ -59,6 +59,21 @@ if (window.getSelection && document.createRange) {
             }
         }
         let sel = window.getSelection();
+        // NOTE: add new text node after span contain shortlink content
+        if (range.endContainer) {
+            const { parentNode } = range.endContainer;
+            if (parentNode && parentNode.classList && parentNode.classList.contains('detect-url')) {
+                const textNode = document.createTextNode('\u00A0'); // Create a text node with a non-breaking space
+                if (parentNode.nextSibling) {
+                    parentNode.parentNode.insertBefore(textNode, parentNode.nextSibling);
+                }
+                else {
+                    parentNode.parentNode.appendChild(textNode);
+                }
+                range.setStart(textNode, textNode.length);
+                range.collapse(true);
+            }
+        }
         sel === null || sel === void 0 ? void 0 : sel.removeAllRanges();
         sel === null || sel === void 0 ? void 0 : sel.addRange(range);
     };

package/es/components/atoms/InputDynamic/InputDynamic.js

@@ -144,15 +144,17 @@ export const InputDynamic = (props) => {
                 if (innerHTML) {
                     // remove span url và focus vào vị trí remove để add tag shortlink vào vị trí này.
                     const index = Array.from((_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.childNodes).findIndex((element) => element.id === data.id);
-                    const range = document.createRange(); // Tạo một đối tượng Range
-                    const sel = window.getSelection(); // Lấy đối tượng Selection hiện tại
-                    range.setStart((_b = personalizationInputRef.current) === null || _b === void 0 ? void 0 : _b.childNodes[index], 0); // Đặt điểm bắt đầu của Range
-                    range.collapse(true); // Thu gọn Range để tập trung vào điểm bắt đầu
-                    sel === null || sel === void 0 ? void 0 : sel.removeAllRanges(); // Xóa tất cả các Range hiện có
-                    sel === null || sel === void 0 ? void 0 : sel.addRange(range); // Thêm Range mới vào Selection
-                    caretPositionRef.current = CaretPositioning.saveSelection(personalizationInputRef.current);
-                    const newDataUpdate = innerHTML.replace(data.outerHTML, '');
-                    personalizationInputRef.current.innerHTML = newDataUpdate;
+                    if (index !== -1) {
+                        const range = document.createRange(); // Tạo một đối tượng Range
+                        const sel = window.getSelection(); // Lấy đối tượng Selection hiện tại
+                        range.setStart((_b = personalizationInputRef.current) === null || _b === void 0 ? void 0 : _b.childNodes[index], 0); // Đặt điểm bắt đầu của Range
+                        range.collapse(true); // Thu gọn Range để tập trung vào điểm bắt đầu
+                        sel === null || sel === void 0 ? void 0 : sel.removeAllRanges(); // Xóa tất cả các Range hiện có
+                        sel === null || sel === void 0 ? void 0 : sel.addRange(range); // Thêm Range mới vào Selection
+                        caretPositionRef.current = CaretPositioning.saveSelection(personalizationInputRef.current);
+                        const newDataUpdate = innerHTML.replace(data.outerHTML, '');
+                        personalizationInputRef.current.innerHTML = newDataUpdate;
+                    }
                 }
                 break;
             }

package/es/components/atoms/InputDynamic/styled.d.ts

@@ -4,7 +4,7 @@ export declare const SpanIcon: import("styled-components").StyledComponent<"span
     isDisabled?: boolean | undefined;
 }, never>;
 export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InputShortLink: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, import("../Input/Input").InputProps, any>;
+export declare const InputShortLink: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, any>;
 export declare const TooltipHover: import("styled-components").StyledComponent<"div", any, {
     top: number;
     left: number;

package/es/components/atoms/InputDynamic/types.d.ts

@@ -45,6 +45,15 @@ export type EventMetadata = {
     item_property_label: string | null;
     event_property_syntax: string | null;
 };
+export type EventBoFieldMetadata = EventMetadata & {
+    field_code_bo?: string;
+    field_label_bo?: string;
+    useBo?: boolean;
+};
+export type SelectOption = {
+    value?: string;
+    label?: string;
+};
 export type TFilter = {
     value: any;
     operator: TOperatorValue;