@antscorp/antsomi-ui 1.3.3-beta.88 → 1.3.3-beta.89

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

@@ -98,7 +98,7 @@ export const InputDynamic = (props) => {
             tmp = tmp === null || tmp === void 0 ? void 0 : tmp.replace(
             // replace old non tracking url to detect url
             /<button(?=[^>]*class="insert-word")[^>]*value=['"]#(?:{nontrackurl\()?(https?:\/\/[0-9a-zA-Z-{}|"\./?_=&%:#*@;]+)(?:\)})?['"][^>]*>.*?<\/button>/g, match => {
-                const url = match.match(/(https?:\/\/[0-9a-zA-Z-\./?_=&%:#*@;]+)/);
+                const url = match.match(/(https?:\/\/[0-9a-zA-Z-\./?_=&%:#*@;]+)(?![^ ])/);
                 if (url) {
                     return `<span id="${random(5)}" class="detect-url">${url[1]}</span>`;
                 }
@@ -160,13 +160,23 @@ export const InputDynamic = (props) => {
                 break;
         }
     };
+    const handleChangeInputDebounce = (ms) => {
+        clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => {
+            caretPositionRef.current = CaretPositioning.saveSelection(personalizationInputRef.current);
+            onTriggerChange();
+        }, ms);
+    };
     const onPaste = (e) => {
+        var _a;
         // cancel paste
         e.preventDefault();
         // get text representation of clipboard
         const text = (e.originalEvent || e).clipboardData.getData('text/plain');
+        handleChangeInputDebounce(ms);
         // insert text manually
         document.execCommand('insertHTML', false, text);
+        (_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
     const handleInsertSortLink = (url, type) => {
         try {
@@ -247,16 +257,9 @@ export const InputDynamic = (props) => {
             console.log(error);
         }
     };
-    const handleChangeInputDebounce = () => {
-        clearTimeout(timerRef.current);
-        timerRef.current = setTimeout(() => {
-            caretPositionRef.current = CaretPositioning.saveSelection(personalizationInputRef.current);
-            onTriggerChange();
-        }, ms);
-    };
     const handleKeyPress = (e) => {
         if (isRealTime) {
-            handleChangeInputDebounce();
+            handleChangeInputDebounce(ms);
         }
         if (canMultipleLine)
             return;

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

@@ -107,10 +107,7 @@ export const convertHtmlText = (htmlText, format = 'raw', state, objectWidgetInp
                         else if (found[0] === 'productTemplate') {
                             bgColor = '#9238b5';
                         }
-                        else if (found[0] === 'promotion_code' ||
-                            foundLink[0] === 'nontrackurl' ||
-                            foundLink[0] === 'shortlink' ||
-                            foundLink[0] === 'shortlink_static') {
+                        else if (found[0] === 'promotion_code' || foundLink[0] === 'nontrackurl') {
                             bgColor = '#6750A7';
                         }
                         else if (found[0] === 'custom') {

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

@@ -11,6 +11,9 @@ export type SlideBarLimitProps = {
 export type ActionType = (typeof slideActionType)[keyof typeof slideActionType];
 export type SlideBarState = {
     cacheInfoClicked: SlideBarOptionProps;
+    openPopover: {
+        [key in string]: boolean;
+    };
     disabledPrev: boolean;
     disabledNext: boolean;
     notiUpdateScroll: number;

package/es/components/atoms/SlideBar/SlideBar.js

@@ -29,6 +29,7 @@ export const SlideBar = props => {
             label: '',
             value: '',
         },
+        openPopover: {},
         disabledPrev: true,
         disabledNext: true,
         notiUpdateScroll: 1,
@@ -93,11 +94,15 @@ export const SlideBar = props => {
             console.log(error);
         }
     };
+    const handleClosePopover = () => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { openPopover: {} })));
+    };
     const handleDuplicateSlide = (slideInfo) => {
         try {
             if (typeof callback === 'function' && !_.isEmpty(slideInfo)) {
                 callback(slideActionType.DUPLICATE, slideInfo);
             }
+            handleClosePopover();
         }
         catch (error) {
             handleError(error, {
@@ -117,6 +122,7 @@ export const SlideBar = props => {
             if (typeof callback === 'function' && !_.isEmpty(slideInfo)) {
                 callback(slideActionType.DELETE, slideInfo);
             }
+            handleClosePopover();
         }
         catch (error) {
             handleError(error, {
@@ -177,6 +183,11 @@ export const SlideBar = props => {
             });
         }
     };
+    const handleOpenChange = (newOpen, itemId) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { openPopover: {
+                [itemId]: newOpen,
+            } })));
+    };
     useEffect(() => () => {
         setState(prev => (Object.assign(Object.assign({}, prev), { cacheInfoClicked: { label: '', value: '' } })));
     }, []);
@@ -217,7 +228,7 @@ export const SlideBar = props => {
                     handleActiveSlide(e, item);
                 } }),
                 React.createElement(SlideText, { isActive: activeId === item.value }, label),
-                !isViewMode && (React.createElement(Popover, { placement: "bottomLeft", trigger: "click", content: React.createElement(MenuList, null,
+                !isViewMode && (React.createElement(Popover, { placement: "bottomLeft", trigger: "click", open: state.openPopover[item.value], onOpenChange: newOpen => handleOpenChange(newOpen, item.value), content: React.createElement(MenuList, null,
                         React.createElement(WrapperDisable, { disabled: disabledDuplicate },
                             React.createElement(MenuItem, { isDisabled: disabledDuplicate, onClick: (e) => {
                                     e.stopPropagation();

package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuBlock.d.ts

@@ -4,6 +4,7 @@ import { LayerActiveProps } from './RichMenuCell';
 export interface RichMenuBlockProps {
     richMenu: RichMenu;
     isPreview?: boolean;
+    isActionLink?: boolean;
     layerActive?: LayerActiveProps;
     cellActiveIdx?: number;
     onClickCell?: (cellIdx: number) => void;

package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuBlock.js

@@ -8,7 +8,7 @@ import { RichMenuCell } from './RichMenuCell';
 import { tryCatchWrapper } from '@antscorp/antsomi-ui/es/utils';
 const PATH = 'src/app/modules/Dashboard/containers/RichMenu/containers/Design/components/Workspace/components/RichMenuBlock/index.tsx';
 export const RichMenuBlock = props => {
-    const { richMenu, layerActive, cellActiveIdx, isPreview, onClickCell, onChange } = props;
+    const { richMenu, layerActive, cellActiveIdx, isPreview, isActionLink = false, onClickCell, onChange, } = props;
     const { gridTemplateCols = [], gridTemplateRows = [], cells = [], uploadMode, image, layoutType, rows, cols, } = richMenu || {};
     const { imageUrl, imageStyles } = image || {};
     const grid = {
@@ -44,7 +44,7 @@ export const RichMenuBlock = props => {
             }
         }
     }, PATH);
-    const renderCell = (cellInfo, ctx) => (React.createElement(RichMenuCell, { context: ctx, isPreview: isPreview, layerActive: layerActive, cellActiveIdx: cellActiveIdx, cell: cellInfo, isSingleMode: isSingleUploadMode, onClick: handleClickCell }));
+    const renderCell = (cellInfo, ctx) => (React.createElement(RichMenuCell, { context: ctx, isActionLink: isActionLink, isPreview: isPreview, layerActive: layerActive, cellActiveIdx: cellActiveIdx, cell: cellInfo, isSingleMode: isSingleUploadMode, onClick: handleClickCell }));
     return (React.createElement(ResizeGrid, Object.assign({ grid: grid, isPreview: isPreview, containerStyle: imageStyles, isCompact: layoutType === 'compact', renderCell: renderCell, cellActiveStyle: { background: 'rgba(0, 95, 184, 0.5)' }, cellBorder: isSingleUploadMode ? '1px solid rgba(0, 95, 184, 1)' : '1px dotted #000000', onChange: handleGridChange }, Object.assign({}, (isSingleUploadMode && {
         image: imageUrl,
         imagePosition: imageStyles === null || imageStyles === void 0 ? void 0 : imageStyles.objectPosition,

package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuCell/index.d.ts

@@ -4,6 +4,7 @@ interface RichMenuCellProps {
     cell: TChildrenCell;
     context: number;
     isSingleMode: boolean;
+    isActionLink?: boolean;
     isPreview?: boolean;
     cellActiveIdx?: number;
     layerActive?: LayerActiveProps;

package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuCell/index.js

@@ -23,7 +23,7 @@ import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 const PATH = 'src/app/modules/Dashboard/containers/RichMenu/containers/Design/components/Workspace/components/RichMenuCell';
 export const RichMenuCell = props => {
-    const { cell, context, layerActive = 'all', cellActiveIdx, isSingleMode, isPreview, onClick, } = props;
+    const { cell, context, layerActive = 'all', cellActiveIdx, isSingleMode, isPreview, isActionLink = false, onClick, } = props;
     const [videoState, setVideoState] = useState({
         status: 'idle',
     });
@@ -93,7 +93,9 @@ export const RichMenuCell = props => {
                 React.createElement(ActionButton, { id: "video-capture-action-play", onClick: handleVideoPlay },
                     React.createElement(Icon, { type: "icon-ants-play-circle", size: 24, style: { width: 26, color: '#fff' } }),
                     isAddLabel && React.createElement(ActionButtonLabel, null, "Play")),
-                isAddLabel && action.label && (React.createElement(Link, { id: "video-capture-action-external", href: action.externalUrl, target: "_blank", rel: "noreferrer" },
+                isAddLabel && action.label && (React.createElement(Link, Object.assign({ id: "video-capture-action-external" }, (isActionLink
+                    ? { href: action.externalUrl, target: '_blank', rel: 'noreferrer' }
+                    : {})),
                     React.createElement("div", { style: { width: 26 } },
                         React.createElement(CircleBorder, null,
                             React.createElement(Icon, { type: "icon-ants-redo", size: 14, style: { color: '#fff', height: '17px' } }))),

package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuCell/styled.js

@@ -104,7 +104,7 @@ export const ThumbnailBox = styled.div `
 export const Image = styled.img `
   width: 100%;
   height: 100%;
-  object-fit: contain;
+  object-fit: cover;
 `;
 export const Link = styled.a `
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.3-beta.88",
+  "version": "1.3.3-beta.89",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",