@antscorp/antsomi-ui 1.3.5-beta.31 → 1.3.5-beta.310

package/es/components/organism/FilterSetting/utils.js

@@ -0,0 +1,349 @@
+import { DATA_TYPES, OPERATORS_OPTION } from './constants';
+export const getValidMomentDate = (date) => (date && date.isValid() ? date : null);
+export function isInputBoolean(operatorValue, dataType) {
+    if ((operatorValue === OPERATORS_OPTION.EQUALS.value ||
+        operatorValue === OPERATORS_OPTION.NOT_EQUALS.value) &&
+        // operatorValue === 'change_value')
+        dataType === 'boolean') {
+        return true;
+    }
+    return false;
+}
+export function isInputNumberBetween(operatorValue, dataType) {
+    if (operatorValue === OPERATORS_OPTION.BETWEEN.value && dataType === 'number') {
+        return true;
+    }
+    return false;
+}
+export function isInputCalendarBetween(operatorValue, dataType) {
+    if (operatorValue === OPERATORS_OPTION.BETWEEN.value && dataType === 'datetime') {
+        return true;
+    }
+    return false;
+}
+export function isInputDateTimeAgo(operatorValue, dataType) {
+    if ((operatorValue === OPERATORS_OPTION.EQUAL_TIME_AGO.value ||
+        operatorValue === OPERATORS_OPTION.NOT_EQUAL_TIME_AGO.value ||
+        operatorValue === OPERATORS_OPTION.BEFORE_TIME_AGO.value ||
+        operatorValue === OPERATORS_OPTION.AFTER_TIME_AGO.value) &&
+        dataType === 'datetime') {
+        return true;
+    }
+    return false;
+}
+export function isInputDateTimeBetweenAgo(operatorValue, dataType) {
+    if (operatorValue === OPERATORS_OPTION.BETWEEN_TIME_AGO.value && dataType === 'datetime') {
+        return true;
+    }
+    return false;
+}
+export function isInputCalendar(operatorValue, dataType) {
+    if ((operatorValue === OPERATORS_OPTION.EQUALS.value ||
+        operatorValue === OPERATORS_OPTION.NOT_EQUALS.value ||
+        operatorValue === OPERATORS_OPTION.BEFORE_DATE.value ||
+        operatorValue === OPERATORS_OPTION.AFTER_DATE.value) &&
+        dataType === 'datetime') {
+        return true;
+    }
+    return false;
+}
+export function isInputOrSelect(operatorValue, dataType = DATA_TYPES.STRING, property = {}) {
+    if (property === null || property === undefined) {
+        return false;
+    }
+    // const operators = OPERATORS[dataType];
+    // check with operatorValue for use case edit with condition matches and not not matches
+    // if (isOperatorMulti(operatorValue) && !operators.includes(operatorValue)) {
+    //   return true;
+    // }
+    const validOperator = isOperatorSuggestion(operatorValue);
+    return validOperator || dataType === DATA_TYPES.NUMBER;
+}
+export function isInputSelectMulti(operatorValue, dataType, property) {
+    const isMulti = isOperatorMulti(operatorValue);
+    const validOperator = isOperatorSuggestion(operatorValue);
+    const { autoSuggestion } = property || {};
+    return isMulti && ((validOperator && autoSuggestion) === 1 || dataType === DATA_TYPES.NUMBER);
+}
+export function isOperatorMulti(operatorValue) {
+    if (operatorValue === OPERATORS_OPTION.MATCHES.value ||
+        operatorValue === OPERATORS_OPTION.NOT_MATCHES.value ||
+        operatorValue === OPERATORS_OPTION.DOESNT_INCLUDE.value ||
+        operatorValue === OPERATORS_OPTION.INCLUDES.value) {
+        return true;
+    }
+    return false;
+}
+export function isOperatorSuggestion(operatorValue) {
+    if (operatorValue === OPERATORS_OPTION.MATCHES.value ||
+        operatorValue === OPERATORS_OPTION.NOT_MATCHES.value ||
+        operatorValue === OPERATORS_OPTION.EQUALS.value ||
+        operatorValue === OPERATORS_OPTION.NOT_EQUALS.value ||
+        operatorValue === OPERATORS_OPTION.CONTAINS.value ||
+        operatorValue === OPERATORS_OPTION.DOESNT_CONTAIN.value) {
+        return true;
+    }
+    return false;
+}
+export function isCheckConditionMultiCheckbox(dataType) {
+    return dataType === null || dataType === void 0 ? void 0 : dataType.startsWith('array');
+}
+export function isInputNumber(_operatorValue, property) {
+    if (property !== null && property !== undefined && property.displayFormat !== null) {
+        const displayFormat = property.displayFormat || {};
+        const { type } = displayFormat;
+        if (type === 'NUMBER' || type === 'PERCENTAGE' || type === 'CURRENCY') {
+            return true;
+        }
+    }
+    return false;
+}
+export function isInputNull(operatorValue, dataType) {
+    if (operatorValue === OPERATORS_OPTION.NOT_EXISTS.value ||
+        operatorValue === OPERATORS_OPTION.EXISTS.value) {
+        return true;
+    }
+    if (!dataType) {
+        return true;
+    }
+    return false;
+}
+export const getInputType = ({ operator, dataType, property = {}, resInputBoolean, resInputNumberBetween, resInputCalendarBetween, resInputDateTimeAgo, resInputDateTimeBetweenAgo, resInputCalendar, resInputOrSelect, resInputSelectMulti, resInputArray, resInputNumber, resDefault, }) => {
+    let result = null;
+    switch (true) {
+        case isInputNull(operator, dataType): {
+            result = null;
+            break;
+        }
+        case isInputBoolean(operator, dataType): {
+            result = resInputBoolean;
+            break;
+        }
+        case isInputNumberBetween(operator, dataType): {
+            result = resInputNumberBetween;
+            break;
+        }
+        case isInputCalendarBetween(operator, dataType): {
+            result = resInputCalendarBetween;
+            break;
+        }
+        case isInputDateTimeAgo(operator, dataType): {
+            result = resInputDateTimeAgo;
+            break;
+        }
+        case isInputDateTimeBetweenAgo(operator, dataType): {
+            result = resInputDateTimeBetweenAgo;
+            break;
+        }
+        case isInputCalendar(operator, dataType): {
+            result = resInputCalendar;
+            break;
+        }
+        // case dataType === 'object_id' &&
+        //   isCheckPropertyHasAutoSuggestion(property) &&
+        //   isOperatorObjectIdHasSuggestion(operator, item): {
+        //   element = <Input placeholder="object_id" value="" />;
+        //   // return (
+        //   //   <ConditionValueObjectId
+        //   //     componentKey={componentKey}
+        //   //     encryptConfig={props.encryptConfig}
+        //   //     operatorValue={operatorValue}
+        //   //     use={props.use}
+        //   //     item={item}
+        //   //     onChange={changeValue}
+        //   //     callback={props.callback}
+        //   //   />
+        //   // );
+        //   break;
+        // }
+        case isInputSelectMulti(operator, dataType, property): {
+            result = resInputSelectMulti;
+            break;
+        }
+        case isInputOrSelect(operator, dataType, property): {
+            result = resInputOrSelect;
+            break;
+        }
+        case isCheckConditionMultiCheckbox(dataType): {
+            result = resInputArray;
+            break;
+        }
+        case isInputNumber(operator, property): {
+            result = resInputNumber;
+            break;
+        }
+        default: {
+            result = resDefault;
+        }
+    }
+    return result;
+};
+export const getInputDefaultValue = ({ operator, dataType, property }) => getInputType({
+    operator,
+    dataType,
+    property,
+    resInputBoolean: 'true',
+    resInputNumberBetween: '0 AND 0',
+    resInputCalendarBetween: 'null AND null',
+    resInputDateTimeAgo: {
+        value: '0',
+        time_unit: 'DAY',
+    },
+    resInputCalendar: null,
+    resInputOrSelect: '',
+    resInputSelectMulti: [],
+    resInputArray: [],
+    resInputNumber: 0,
+    resDefault: '',
+    resInputDateTimeBetweenAgo: {
+        value: '0 AND 0',
+        time_unit: 'DAY',
+    },
+});
+// export const validateFilters = (filters: TFilters, validateFirstCondition = false) => {
+//   const errors: any = {
+//     OR: [],
+//     isError: false,
+//   };
+//   if (
+//     filters.OR.length === 1 &&
+//     filters.OR[0].AND.length === 1 &&
+//     !filters.OR[0].AND[0].column &&
+//     !validateFirstCondition
+//   ) {
+//     // Nếu có 1 hàng filter nhưng không chọn gì cho column thì vẫn sẽ pass qua, thay vì sẽ báo lỗi requied như trước đây
+//     return errors;
+//   } else {
+//     filters.OR.forEach(or => {
+//       const orErrs: any = {
+//         AND: [],
+//       };
+//       or.AND.forEach(and => {
+//         const andErrs = {
+//           column: true,
+//           operator: true,
+//           value: true,
+//         };
+//         const { column, operator, value, event_metadata, customer_metadata, visitor_metadata, value_type } = and;
+//         const falsyValue =
+//           (value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0)) &&
+//           operator !== 'exists' &&
+//           operator !== 'not_exists';
+//         if (
+//           !column ||
+//           !operator ||
+//           (value_type === 'normal' && falsyValue) ||
+//           (value_type === 'event' && !event_metadata?.item_property_name) ||
+//           (value_type === 'customer' && !customer_metadata?.item_property_name) ||
+//           (value_type === 'visitor' && !visitor_metadata?.item_property_name)
+//         ) {
+//           if (!column) {
+//             andErrs.column = false;
+//           }
+//           if (!operator) {
+//             andErrs.operator = false;
+//           }
+//           if (
+//             (value_type === 'normal' && falsyValue) ||
+//             (value_type === 'event' && !event_metadata?.item_property_name) ||
+//             (value_type === 'customer' && !customer_metadata?.item_property_name) ||
+//             (value_type === 'visitor' && !visitor_metadata?.item_property_name)
+//           ) {
+//             andErrs.value = false;
+//           }
+//           errors.isError = true;
+//         } else {
+//           andErrs.column = true;
+//           andErrs.operator = true;
+//           andErrs.value = true;
+//         }
+//         orErrs.AND.push(andErrs);
+//       });
+//       errors.OR.push(orErrs);
+//     });
+//   }
+//   return errors;
+// };
+export const validateFilters = (filters, validateFirstCondition = false) => {
+    const errors = {
+        OR: [],
+        isError: false,
+    };
+    if (filters.OR.length === 1 &&
+        filters.OR[0].AND.length === 1 &&
+        !filters.OR[0].AND[0].column &&
+        !validateFirstCondition) {
+        // Nếu có 1 hàng filter nhưng không chọn gì cho column thì vẫn sẽ pass qua, thay vì sẽ báo lỗi requied như trước đây
+        return errors;
+    }
+    filters.OR.forEach(or => {
+        const orErrs = {
+            AND: [],
+        };
+        or.AND.forEach(and => {
+            const andErrs = {
+                column: true,
+                operator: true,
+                value: true,
+                extend: true,
+            };
+            const { column, operator, value, event_metadata, customer_metadata, visitor_metadata, value_type, extend, } = and;
+            const falsyValue = (value === null ||
+                value === undefined ||
+                value === '' ||
+                (Array.isArray(value) && value.length === 0)) &&
+                operator !== 'exists' &&
+                operator !== 'not_exists';
+            if (!column ||
+                !operator ||
+                (value_type === 'normal' && falsyValue && (!extend || extend.length <= 0)) ||
+                (value_type === 'event' && !(event_metadata === null || event_metadata === void 0 ? void 0 : event_metadata.item_property_name)) ||
+                (value_type === 'customer' && !(customer_metadata === null || customer_metadata === void 0 ? void 0 : customer_metadata.item_property_name)) ||
+                (value_type === 'visitor' && !(visitor_metadata === null || visitor_metadata === void 0 ? void 0 : visitor_metadata.item_property_name))) {
+                if (!column) {
+                    andErrs.column = false;
+                }
+                if (!operator) {
+                    andErrs.operator = false;
+                }
+                if ((value_type === 'normal' && falsyValue && (!extend || extend.length <= 0)) ||
+                    (value_type === 'event' && !(event_metadata === null || event_metadata === void 0 ? void 0 : event_metadata.item_property_name)) ||
+                    (value_type === 'customer' && !(customer_metadata === null || customer_metadata === void 0 ? void 0 : customer_metadata.item_property_name)) ||
+                    (value_type === 'visitor' && !(visitor_metadata === null || visitor_metadata === void 0 ? void 0 : visitor_metadata.item_property_name))) {
+                    andErrs.value = false;
+                    andErrs.extend = false;
+                }
+                errors.isError = true;
+            }
+            else {
+                andErrs.column = true;
+                andErrs.operator = true;
+                andErrs.value = true;
+                andErrs.extend = true;
+            }
+            orErrs.AND.push(andErrs);
+        });
+        errors.OR.push(orErrs);
+    });
+    return errors;
+};
+export const getScopSuggest = ({ itemTypeId }) => {
+    switch (itemTypeId) {
+        case -1003: // Customers
+            return 3;
+        case -1007: // Visitors
+            return 2;
+        default:
+            // Another BO
+            return 1;
+    }
+};
+export const setValueSelectAll = (treeData) => {
+    const dataOut = [];
+    // eslint-disable-next-line array-callback-return
+    treeData.map(each => {
+        dataOut.push(each.value);
+    });
+    return dataOut;
+};
+export const checkDuplicateArray = data => data.filter((v, i, a) => a.findIndex(v2 => v2 === v) === i);

package/es/components/organism/Help/Help.js

@@ -22,37 +22,37 @@ var __rest = (this && this.__rest) || function (s, e) {
 /* eslint-disable jsx-a11y/label-has-associated-control */
 /* eslint-disable no-multi-str */
 // Libraries
-import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { isEmpty } from 'lodash';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 // Assets
 import '@antscorp/icons/main.css';
 // Services
 import TicketService from '@antscorp/antsomi-ui/es/services/Ticket';
 // Component
-import { ButtonFeedback, ControlGroup, ControlLabel, DropDown, EditorWrapper, ErrorMessage, FlexCenter, Header, HiddenBlock, IframeHelp, Image, Label, LabelTitle, Link, Overlay, PreviewBox, SendFeedback, Span, Text, TitleSearch, TreeContent, Video, Wrapper, WrapperBody, WrapperContentHelp, WrapperFooter, WrapperFooterSpace, WrapperHeader, WrapperIconEditor, WrapperImage, WrapperInputFile, WrapperLinkFiles, WrapperLinkItemFiles, WrapperLoading, WrapperSearch, } from './styled';
-import { Button, Spin } from 'antd';
+import { LoadingOutlined } from '@ant-design/icons';
 import Icon from '@antscorp/icons';
 import { Editor } from '@tinymce/tinymce-react';
-import { LoadingOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import { Button, Spin } from 'antd';
+import { ButtonFeedback, ControlGroup, ControlLabel, DropDown, EditorWrapper, ErrorMessage, FlexCenter, Header, HiddenBlock, IconButtonStyled, IframeHelp, Image, Label, LabelTitle, Link, Overlay, PreviewBox, SendFeedback, Span, Text, TitleSearch, TreeContent, Video, Wrapper, WrapperBody, WrapperContentHelp, WrapperFooter, WrapperFooterSpace, WrapperHeader, WrapperIconEditor, WrapperImage, WrapperInputFile, WrapperLinkFiles, WrapperLinkItemFiles, WrapperLoading, WrapperSearch, } from './styled';
 // Atoms
 import { Input } from '@antscorp/antsomi-ui/es/components/atoms';
 // Molecules
-import { PopupDraggable, Select, CaptureScreen, ChatBox, } from '@antscorp/antsomi-ui/es/components/molecules';
+import { CaptureScreen, ChatBox, PopupDraggable, Select, } from '@antscorp/antsomi-ui/es/components/molecules';
 // Constants
+import { THEME, TINYMCE_API_KEY } from '@antscorp/antsomi-ui/es/constants';
 import { ATTACH_CAPTURE_TYPES, ATTACH_KEYS, DEFAULT_POSITIONS, MENU_KEYS, MESSAGE_TYPE, PORTALS_ANTSOMI_PACKAGE_UI_KEY, PORTALS_ANTSOMI_PACKAGE_UI_KEY_POPUP, REPORT_TYPES, TICKET_CUSTOM_MESSAGE_KEY, } from './constants';
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
 // Utils
+import { BugIcon, CameraIcon, CaptureIcon, OpenUrlIcon, RequestIcon, } from '@antscorp/antsomi-ui/es/components/icons';
 import { base64ToFile, convertBlobToFile, generateUniqueId, mergeAudioStreams, } from '@antscorp/antsomi-ui/es/components/molecules/CaptureScreen/utils';
 import { expendDefault, formatParams, postCustomEvent } from './utils';
-import { CameraIcon, CaptureIcon, OpenUrlIcon, BugIcon, RequestIcon, } from '@antscorp/antsomi-ui/es/components/icons';
 const antIcon = React.createElement(LoadingOutlined, { style: { fontSize: 40 }, spin: true });
 const Loading = ({ isLoading, height, width }) => isLoading && (React.createElement(WrapperLoading, { className: "loader-container", height: height, width: width },
     React.createElement(Spin, { indicator: antIcon })));
 const Help = props => {
     const { configs, triggerType, boundsDraggable, isShowResizeHover, children } = props;
     const { apiKey, domainPlatform, appCode, domain, portalId, token, userId, config, domainTicket, avatar, } = configs;
-    const [isOpenDropdown, setIsOpenDropdown] = useState(false);
+    // const [isOpenDropdown, setIsOpenDropdown] = useState<boolean>(false);
     const [defaultPositionDrawActions, setDefaultPositionDrawActions] = useState(DEFAULT_POSITIONS.capture);
     const [defaultPositionRecordActions, setDefaultPositionRecordActions] = useState(DEFAULT_POSITIONS.record);
     const [isMainLoading, setIsMainLoading] = useState(false);
@@ -84,7 +84,7 @@ const Help = props => {
     });
     const [isOpenImageDrawer, setIsOpenImageDrawer] = useState(false);
     const [captureType, setCaptureType] = useState(ATTACH_KEYS.CAPTURE);
-    const [open, setOpen] = useState(false);
+    // const [open, setOpen] = useState<boolean>(false);
     const [dataRecorded, setDataRecorded] = useState([]);
     const [dataListHelp, setDataListHelp] = useState([]);
     const [isMute, setIsMute] = useState(false);
@@ -100,6 +100,7 @@ const Help = props => {
     const [isLoadingListHelp, setIsLoadingHelp] = useState(true);
     const recorderRef = useRef();
     const streamTracks = useRef();
+    const allAppOptionsRef = useRef([]);
     // const showModal = (captureKey: CaptureTypeProps) => {
     //   setOpen(true);
     //   setCaptureType(captureKey);
@@ -154,9 +155,9 @@ const Help = props => {
         }
         return domain;
     }, [domain]);
-    const handleCancel = () => {
-        setOpen(false);
-    };
+    // const handleCancel = () => {
+    //   setOpen(false);
+    // };
     const handleClick = (data) => {
         const { key = '' } = data;
         switch (key) {
@@ -180,7 +181,7 @@ const Help = props => {
                 break;
             }
             default: {
-                setIsOpenDropdown(false);
+                // setIsOpenDropdown(false);
                 break;
             }
         }
@@ -218,6 +219,7 @@ const Help = props => {
                         }));
                         setAppTargeting(temp[0]);
                         setAllAppOptions(temp);
+                        allAppOptionsRef.current = temp;
                     }
                 }
             }
@@ -265,7 +267,7 @@ const Help = props => {
         setUrlImageDrawer('');
         setUrlVideoPreview('');
         setIsValidAll(true);
-        setIsOpenDropdown(false);
+        // setIsOpenDropdown(false);
         setValueInput(prev => (Object.assign(Object.assign({}, prev), { message: '', title: '', files: [] })));
         setIsShowPopup(false);
         setErrFile({
@@ -380,7 +382,7 @@ const Help = props => {
             };
             setIsForceStopRecorder(false);
             setIsOpenImageDrawer(true);
-            handleCancel();
+            // handleCancel();
             setIsShowPopup(false);
         }
         catch (error) {
@@ -442,7 +444,7 @@ const Help = props => {
                 // passing canvas data url as screenshot preview src
                 setUrlImageDrawer(canvas.toDataURL());
                 setIsOpenImageDrawer(true);
-                handleCancel();
+                // handleCancel();
                 setIsShowPopup(false);
             });
             video.srcObject = stream; // passing capture stream data as video source object
@@ -532,7 +534,7 @@ const Help = props => {
     };
     useEffect(() => {
         const handleEvent = e => {
-            const { type, helpType, helpInfo } = e.data;
+            const { type, helpType, helpInfo, dataImage } = e.data;
             if (!type || !helpType || !helpInfo) {
                 return;
             }
@@ -542,6 +544,17 @@ const Help = props => {
                         setIsShowPopup(true);
                         callback(REPORT_TYPES[helpType]);
                         setValueInput(prev => (Object.assign(Object.assign({}, prev), helpInfo)));
+                        if (dataImage) {
+                            setImageDrew({
+                                imageName: dataImage.imageName,
+                                dataURL: dataImage.dataUrl,
+                            });
+                        }
+                        if (helpInfo.feature && Array.isArray(allAppOptions)) {
+                            const targetApp = allAppOptionsRef.current.find(item => item.value === helpInfo.feature);
+                            if (targetApp)
+                                setAppTargeting(targetApp);
+                        }
                     }
                     break;
                 default:
@@ -974,15 +987,9 @@ const Help = props => {
                 style: { minWidth: 250, padding: 0 },
                 items: items,
                 onClick: info => handleClick(info),
-            }, onOpenChange: isOpen => setIsOpenDropdown(isOpen), trigger: triggerType, placement: "bottom", className: "dropdown-helps" }, children || (React.createElement(Button, { style: {
-                width: 36,
-                height: 36,
-                borderRadius: '5px',
-            }, icon: React.createElement(QuestionCircleOutlined, { style: {
-                    color: '#666666',
-                    fontSize: '24px',
-                    transform: 'unset',
-                } }), className: `${isOpenDropdown ? 'antsomi-btn-default-active' : ''}`, onClick: e => e.preventDefault() }))),
+            }, 
+            // onOpenChange={isOpen => setIsOpenDropdown(isOpen)}
+            trigger: triggerType, placement: "bottomRight" }, children || React.createElement(IconButtonStyled, { icon: React.createElement(Icon, { type: "icon-ants-help" }) })),
         isShowPopup &&
             createPortal(React.createElement(PopupDraggable, { isHiddenResizing: true, bounds: boundsDraggable, isShowResizeHover: isShowResizeHover, callback: callback, styleContainer: {
                     display: 'flex',
@@ -1004,7 +1011,7 @@ Help.defaultProps = {
     boundsDraggable: 'body',
     isShowResizeHover: true,
     configs: {
-        apiKey: 'scyw71pj8619analvxs56ppc2w2fj2kpy5vnmflhhc300y35',
+        apiKey: TINYMCE_API_KEY,
         domain: '//sandbox-app.cdp.asia',
         domainTicket: 'https://sandbox-issue.antsomi.com',
         portalId: '33167',

package/es/components/organism/Help/styled.d.ts

@@ -58,14 +58,17 @@ export declare const TitleSearch: import("styled-components").StyledComponent<"s
 export declare const WrapperSearch: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/input").SearchProps & import("react").RefAttributes<import("antd").InputRef>>, any, {}, never>;
 export declare const TreeContent: import("styled-components").StyledComponent<(<T extends import("rc-tree").BasicDataNode | import("antd").TreeDataNode = import("antd").TreeDataNode>(props: import("antd").TreeProps<T> & {
     children?: import("react").ReactNode;
-} & import("react").RefAttributes<import("rc-tree/lib/Tree").default<import("antd").TreeDataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+} & import("react").RefAttributes<import("rc-tree").default<import("antd").TreeDataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
     TreeNode: import("react").FC<import("rc-tree").TreeNodeProps<import("antd").TreeDataNode>>;
     DirectoryTree: (<T_1 extends import("rc-tree").BasicDataNode | import("antd").TreeDataNode = import("antd").TreeDataNode>(props: import("antd/es/tree").DirectoryTreeProps<T_1> & {
         children?: import("react").ReactNode;
-    } & import("react").RefAttributes<import("rc-tree/lib/Tree").default<import("antd").TreeDataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+    } & import("react").RefAttributes<import("rc-tree").default<import("antd").TreeDataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
         displayName?: string | undefined;
     };
 }, any, {}, never>;
 export declare const Span: import("styled-components").StyledComponent<"span", any, {
     styles: any;
 }, never>;
+export declare const IconButtonStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
+    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
+}, any, {}, never>;

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

@@ -1,8 +1,9 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
 // Libraries
-import { Dropdown, Button, Space, Typography, Tree, Input } from 'antd';
+import { Dropdown, /* Button, */ Space, Typography, Tree, Input } from 'antd';
 import styled, { css } from 'styled-components';
-// Constantsim
+import { Button } from '../../atoms';
+// Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 // Components
 const { Text: AntText } = Typography;
@@ -262,3 +263,16 @@ export const TreeContent = styled(Tree) `
 export const Span = styled.span `
   font-weight: ${props => (props.styles && props.styles.length > 0 ? 'bold' : 'normal')};
 `;
+export const IconButtonStyled = styled(Button) `
+  background-color: transparent !important;
+  color: #666666 !important;
+  box-shadow: none !important;
+  border-radius: 10px !important;
+
+  &.antsomi-dropdown-open,
+  &.antsomi-popover-open {
+    color: ${(_2 = THEME.token) === null || _2 === void 0 ? void 0 : _2.blue7} !important;
+    background-color: ${(_3 = THEME.token) === null || _3 === void 0 ? void 0 : _3.blue1_1} !important;
+    border: 1px solid ${(_4 = THEME.token) === null || _4 === void 0 ? void 0 : _4.blue7} !important;
+  }
+`;

package/es/components/organism/Help/types.d.ts

@@ -5,7 +5,7 @@ type ConfigProps = {
     domain: string;
     domainTicket: string;
     token: string;
-    apiKey: string;
+    apiKey?: string;
     portalId: string;
     config: any;
     userId: string;
@@ -33,7 +33,7 @@ export interface IHelpProps {
     configs: ConfigProps;
     boundsDraggable?: string;
     isShowResizeHover?: boolean;
-    triggerType: TriggerTypeDropdown;
+    triggerType?: TriggerTypeDropdown;
     onClick?: Function;
     children?: ReactNode;
 }

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CommonMenu: React.FC;

package/es/components/organism/LeftMenu/components/CommonMenu/index.js

@@ -0,0 +1,13 @@
+// Libraries
+import React, { memo, useMemo } from 'react';
+// Components
+import { ChildMenu } from '../common';
+// Stores
+import { useLeftMenuStore } from '../../stores';
+// Utils
+import { getMenuItem } from '../../utils';
+export const CommonMenu = memo(() => {
+    const appMenuChildren = useLeftMenuStore(store => store.state.appMenuChildren);
+    const customChildren = useMemo(() => appMenuChildren === null || appMenuChildren === void 0 ? void 0 : appMenuChildren.map(item => getMenuItem(item)), [appMenuChildren]);
+    return React.createElement(ChildMenu, { items: customChildren });
+});

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface CustomMenuProps {
+    onMenuItemClick?: (key: string, keyPath: string[]) => void;
+}
+export declare const CustomMenu: React.FC<CustomMenuProps>;
+export {};

package/es/components/organism/LeftMenu/components/CustomMenu/index.js

@@ -0,0 +1,14 @@
+// Libraries
+import React, { memo } from 'react';
+// Components
+import { ChildMenu } from '../common';
+// Hooks
+import { useLeftMenuStore } from '../../stores';
+export const CustomMenu = memo(({ onMenuItemClick }) => {
+    const appCustomMenuChildren = useLeftMenuStore(store => store.state.customMenuChildren);
+    const customActiveAppKey = useLeftMenuStore(store => store.state.customActiveAppKey);
+    const handleMenuItemClick = (key, keyPath) => {
+        onMenuItemClick === null || onMenuItemClick === void 0 ? void 0 : onMenuItemClick(key, [...keyPath, customActiveAppKey]);
+    };
+    return React.createElement(ChildMenu, { items: appCustomMenuChildren, onMenuClick: handleMenuItemClick });
+});

package/es/components/organism/LeftMenu/components/HomeMenu/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const CONFIG_OPTIONS: {
+    CONFIGURE: {
+        key: string;
+        label: string;
+    };
+    REMOVE: {
+        key: string;
+        label: string;
+    };
+};

package/es/components/organism/LeftMenu/components/HomeMenu/constants.js

@@ -0,0 +1,10 @@
+export const CONFIG_OPTIONS = {
+    CONFIGURE: {
+        key: 'configure',
+        label: 'Configure',
+    },
+    REMOVE: {
+        key: 'remove',
+        label: 'Remove',
+    },
+};

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const HomeMenu: React.FC;