@antscorp/antsomi-ui 2.0.5 → 2.0.7

package/es/components/molecules/DatePicker/components/AdvancedPicker/AdvancedPicker.d.ts

@@ -12,6 +12,11 @@ export interface AdvancedPickerProps {
     option?: TOption;
     operatorKey?: TOperatorKey;
     type?: TAdvancedType;
+    /**
+     * This is uncontrolled value (default value) and will not update if change outside
+     * only update when re-render component
+     * use ref.forceUpdate() to control value inside
+     */
     date?: string;
     format?: string;
     formatInputDisplay?: string;
@@ -58,4 +63,7 @@ export interface AdvancedPickerProps {
         option: TOption;
     }) => void;
 }
-export declare const AdvancedPicker: React.FC<AdvancedPickerProps>;
+export interface AdvancedPickerHandle {
+    forceUpdate: (date: string) => void;
+}
+export declare const AdvancedPicker: React.ForwardRefExoticComponent<AdvancedPickerProps & React.RefAttributes<AdvancedPickerHandle>>;

package/es/components/molecules/DatePicker/components/AdvancedPicker/AdvancedPicker.js

@@ -1,7 +1,7 @@
 var _a, _b;
 /* eslint-disable react/no-unused-prop-types */
 // Libraries
-import React, { useEffect, useMemo, useCallback, useState } from 'react';
+import React, { useEffect, useMemo, useCallback, useState, useImperativeHandle } from 'react';
 import { Tooltip, theme, DatePicker } from 'antd';
 import dayjs from 'dayjs';
 import clsx from 'clsx';
@@ -41,7 +41,7 @@ const isDisabledSpecificTime = (current, info, disabledTime, date) => {
 const PATH = '@antscorp/antsomi-ui/es/components/molecules/DatePicker/components/Advanced/DatePickerAdvanced.tsx';
 const { useToken } = theme;
 const { Text } = Typography;
-export const AdvancedPicker = props => {
+export const AdvancedPicker = React.forwardRef((props, componentRef) => {
     var _a, _b;
     // Props
     const { label, inputStyle, popupStyle, dateTypeKeysShow, calculationTypeKeysShow, showCalculationTypeCondition, defaultDateTypeKey, valueType, option: propsOption, operatorKey, type, date: propsDate, format, formatInputDisplay, errorMessage, disableAfterDate, disableBeforeDate, showTime, disabled, timezone, isViewMode, onlyShowFixed, disabledTime, onUpdatedNewDate, onApply, } = props;
@@ -78,10 +78,16 @@ export const AdvancedPicker = props => {
         },
         date: dayjs().tz(timezone).format(format),
         dateDisplay: dayjs().tz(timezone).format(format),
-        // date: dayjs(propsDate).tz(timezone).format(format),
-        // dateDisplay: dayjs(propsDate).tz(timezone).format(format),
     });
     const { isOpen, option, date, dateDisplay } = state;
+    useImperativeHandle(componentRef, () => ({
+        forceUpdate(date) {
+            const newDate = dayjs(date, format, true).isValid()
+                ? dayjs(date, format).format(format)
+                : date;
+            setState(state => (Object.assign(Object.assign({}, state), { date: newDate, dateDisplay: newDate })));
+        },
+    }), [format]);
     const isShowFixed = option.dateType.value === 'fixed' || onlyShowFixed;
     const currDate = dayjs(date, format);
     const currWeek = currDate.isoWeek();
@@ -181,6 +187,9 @@ export const AdvancedPicker = props => {
                 let newDate = '';
                 if (newDateType) {
                     if (newDateType.value === 'fixed') {
+                        // newDate = dayjs(innerDate, format, true).isValid()
+                        //   ? dayjs(innerDate, format).format(format)
+                        //   : innerDate;
                         newDate = dayjs(propsDate, format, true).isValid()
                             ? dayjs(propsDate, format).format(format)
                             : propsDate;
@@ -430,7 +439,7 @@ export const AdvancedPicker = props => {
                         React.createElement(Divider, null),
                         timeFormat && valueType !== 'HOUR' && valueType !== 'MINUTE' ? (React.createElement(TimeLabel, { "$width": timeFormat.length * 30, "$isRangePicker": operatorKey === 'between', "$onlyShowFixed": onlyShowFixed },
                             ['HH', 'HHmm', 'HHmmss'].includes(timeFormat) ? React.createElement("span", null, "Hours") : null,
-                            ['HHmm', 'HHmmss', 'mm'].includes(timeFormat) ? React.createElement("span", null, "Minutes") : null,
+                            ['HHmm', 'HHmmss', 'mm'].includes(timeFormat) ? (React.createElement("span", null, "Minutes")) : null,
                             timeFormat === 'HHmmss' ? React.createElement("span", null, "Seconds") : null)) : null));
                 }, picker: getPickerRender(valueType), showTime: getTimePickerRender(valueType)
                     ? {
@@ -450,7 +459,7 @@ export const AdvancedPicker = props => {
                             pointerEvents: disabled ? 'none' : 'all',
                         }, onClick: () => toggleOpenDropdown() },
                         React.createElement(EventIcon, { width: 19, height: 19 })), style: Object.assign({ textOverflow: 'ellipsis' }, inputStyle), value: selectedDateTitle, status: errorMessage ? 'error' : '' }))))));
-};
+});
 AdvancedPicker.defaultProps = {
     label: '',
     type: ADVANCED_PICKER_TYPE.START_DATE.value,

package/es/components/molecules/DatePicker/components/AdvancedPicker/index.d.ts

@@ -1,3 +1,3 @@
 export { AdvancedPicker } from './AdvancedPicker';
-export type { AdvancedPickerProps } from './AdvancedPicker';
+export type { AdvancedPickerProps, AdvancedPickerHandle } from './AdvancedPicker';
 export type { TOption as TAdvancedPickerOption } from './types';

package/es/components/molecules/EditorTab/EditorTab.js

@@ -18,6 +18,7 @@ import { Button, Typography, Dropdown, ContentEditable, Modal, } from '@antscorp
 import { EditorTabStyled } from './styled';
 // Utils
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
+import { CloseIcon, MoreIcon } from '../../icons';
 const PATH = 'src/components/EditorTab/index.jsx';
 export const EditorTab = props => {
     var _a;
@@ -195,7 +196,7 @@ export const EditorTab = props => {
                                     }
                                 }),
                             }, placement: "bottomLeft", trigger: ['click'], destroyPopupOnHide: true },
-                            React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-three-dot-vertical", overlayStyle: { fontSize: 12 } }), size: "small" }))) : closable ? (React.createElement(Button, { onClick: e => handleCloseTab(e, tab, idx), icon: React.createElement(Icon, { type: "icon-ants-remove-slim", overlayStyle: { fontSize: 12 } }), size: "small" })) : null));
+                            React.createElement(Button, { icon: React.createElement(MoreIcon, { size: 20 }), size: "small" }))) : closable ? (React.createElement(Button, { onClick: e => handleCloseTab(e, tab, idx), icon: React.createElement(CloseIcon, { size: 20 }), size: "small" })) : null));
                 })
                 : null,
             React.createElement("div", { ref: anchorRightElRef })),

package/es/components/molecules/HeaderV2/HeaderV2.js

@@ -113,15 +113,15 @@ export const HeaderV2 = memo(props => {
             showLogo && (React.createElement(LogoWrapper, { className: "logo-wrapper", onClick: onCLickLogo },
                 React.createElement("img", { src: SubLogoAntsomi, alt: "Antsomi sub logo" }))),
             React.createElement(AccountSelection, Object.assign({}, accountSelectionProps, { currentAccount: selectedAccount, apiConfig: accountSelectionApiConfig, onChange: handleChangeAccount, inputStyle: inputStyle, refreshOnSelect: true })),
-            React.createElement("div", { className: "title-container" },
-                breadcrumbs ? (React.createElement("div", { className: "header-breadcrumbs" }, breadcrumbs.map((item, index) => (React.createElement(React.Fragment, { key: `${item.title}_${item.link}` },
+            React.createElement("div", { className: "title-container", "data-test": "page-title" },
+                breadcrumbs ? (React.createElement("div", { className: "header-breadcrumbs", "data-test": "breadcrumbs" }, breadcrumbs.map((item, index) => (React.createElement(React.Fragment, { key: `${item.title}_${item.link}` },
                     isNil(item.useExternalLink) && !item.useExternalLink ? (React.createElement(Link, { to: item.link || '', className: "header-breadcrumbs__item" }, item.title)) : (React.createElement("a", { href: item.link, className: "header-breadcrumbs__item" }, item.title)),
                     breadcrumbs.length === index + 1 ? null : React.createElement(React.Fragment, null,
                         "\u2002",
                         QUOTE_ENTITY,
                         "\u2002")))))) : null,
                 typeof pageTitle === 'string' ? (React.createElement("div", { className: "page-title" }, pageTitle)) : (pageTitle))),
-        React.createElement("div", { className: "right-side" },
+        React.createElement("div", { "data-test": "header-menu", className: "right-side" },
             React.createElement(Flex, { gap: 10 },
                 rightContent,
                 showHelp ? React.createElement(Help, Object.assign({ configs: helpConfigProps }, helpProps)) : null,

package/es/components/molecules/MatchAnySelect/MatchesAnySelect.js

@@ -115,13 +115,6 @@ export function MatchesAny(props) {
         const newSelectedTreeData = getSelectedTreeData(items || [], newSelectedItems || [], selectedTreeData || []);
         setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: newSelectedItems, selectedTreeData: newSelectedTreeData })));
     };
-    const onSelectAll = () => {
-        const flattenTreeData = flatTree(items, 'children').filter(item => !item.children &&
-            !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(selectedItem => selectedItem.key === item.key || selectedItem.title === item.title)));
-        const newSelectedItems = uniqBy([...(state.selectedItems || []), ...flattenTreeData], 'key');
-        const newSelectedTreeData = getSelectedTreeData(items || [], newSelectedItems || [], selectedTreeData);
-        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: newSelectedItems, selectedTreeData: newSelectedTreeData })));
-    };
     const onRemoveAll = () => {
         setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [], selectedTreeData: [] })));
     };
@@ -205,6 +198,7 @@ export function MatchesAny(props) {
             title: '',
             isLoadMore: true,
             className: 'load-more-node',
+            disabled: true,
         });
         return { treeData, matchedParents };
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -214,6 +208,13 @@ export function MatchesAny(props) {
         const flattenTreeData = flatTree(treeData, 'children');
         return !(flattenTreeData === null || flattenTreeData === void 0 ? void 0 : flattenTreeData.some(item => !item.disabled));
     }, [treeData]);
+    const isDisableApply = useDeepCompareMemo(() => isEmpty(selectedTreeData), [selectedTreeData]);
+    const onSelectAll = () => {
+        const flattenTreeData = flatTree(treeData, 'children').filter(item => !item.children && !item.disabled);
+        const newSelectedItems = uniqBy([...(state.selectedItems || []), ...flattenTreeData], 'key');
+        const newSelectedTreeData = getSelectedTreeData(items || [], newSelectedItems || [], selectedTreeData);
+        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: newSelectedItems, selectedTreeData: newSelectedTreeData })));
+    };
     // Renders
     const renderExtraValueLabels = () => {
         if (renderExtraValues === null || renderExtraValues === void 0 ? void 0 : renderExtraValues.length) {
@@ -245,7 +246,7 @@ export function MatchesAny(props) {
                     React.createElement(Flex, { align: "center", gap: 10 },
                         renderExtraValueLabels(),
                         React.createElement(TextButton, { disabled: isDisableSelectAll, onClick: onSelectAll }, t(translations.global.selectAll).toString()))),
-                React.createElement(Spin, { spinning: loading }, (treeData === null || treeData === void 0 ? void 0 : treeData.length) ? (React.createElement(React.Fragment, null,
+                React.createElement(Spin, { spinning: loading }, (treeData === null || treeData === void 0 ? void 0 : treeData.length) > 1 ? (React.createElement(React.Fragment, null,
                     React.createElement(StyledTree, { key: searchValue, defaultExpandedKeys: (matchedParents === null || matchedParents === void 0 ? void 0 : matchedParents.length)
                             ? matchedParents.map(item => item.key)
                             : items === null || items === void 0 ? void 0 : items.map(item => item.key), selectable: false, treeData: treeData, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
@@ -295,7 +296,7 @@ export function MatchesAny(props) {
                 renderSelectedList()),
             React.createElement(Flex, { className: "matches-any__footer", align: "center", justify: "space-between" },
                 React.createElement(Flex, { align: "center", gap: 10 },
-                    React.createElement(Button, { type: "primary", onClick: onClickApply }, t(translations.apply.title).toString()),
+                    React.createElement(Button, { type: "primary", disabled: isDisableApply, onClick: onClickApply }, t(translations.apply.title).toString()),
                     React.createElement(Button, { onClick: () => onCancel() }, t(translations.cancel.title).toString())),
                 showExtendValue && (React.createElement(ExtendValuePopup, { getPopupContainer: trigger => trigger.parentElement || document.body, onApply: onApplyExtendValue },
                     React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-empty-flag" }) }, t(translations.extendValue.title).toString())))))));

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

@@ -137,7 +137,7 @@ const Help = props => {
                 type: 'divider',
             },
             {
-                label: (React.createElement("a", { href: `${domainTicket}/${portalId}/#/${userId}/tickets`, target: "_blank", rel: "noreferrer" },
+                label: (React.createElement("a", { href: `${domainTicket}/${portalId}/#/${userId}/tickets`, target: "_blank", rel: "noreferrer", style: { textDecoration: 'none' } },
                     React.createElement(Label, { className: "verify-support" }, "Verify support request"))),
                 key: MENU_KEYS.SUPPORT,
             },

package/es/components/template/TemplateListing/index.js

@@ -81,9 +81,9 @@ export const TemplateListing = memo(props => {
                                 previewBtnProps: Object.assign(Object.assign({}, previewBtnProps), { onClick: handleClickThumbnailPreview }) }, restOfTemplateItemProps))));
                     }))),
             !loading && !blankTemplateProps.show && !isHasData && (React.createElement(EmptyData, { icon: emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.icon, title: emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.description })))));
-    return (React.createElement(TemplateListingWrapper, null,
-        React.createElement(CategoryListing, Object.assign({}, categoryListingProps, { emptyProps: emptyProps })),
-        React.createElement(TemplateWrapper, { className: wrapperClassName, style: wrapperStyle },
+    return (React.createElement(TemplateListingWrapper, { "data-test": "template-listing-component" },
+        React.createElement(CategoryListing, Object.assign({}, categoryListingProps, { emptyProps: emptyProps, "data-test": "template-listing-categories" })),
+        React.createElement(TemplateWrapper, { className: wrapperClassName, style: wrapperStyle, "data-test": "template-listing-container" },
             header,
             content
                 ? typeof content === 'function'

package/es/constants/api.d.ts

@@ -9,6 +9,13 @@ export declare const CDP_API: {
     staging: string;
     production: string;
 };
+export declare const ANTALYSER_API: {
+    development: string;
+    sandbox: string;
+    "sandbox-cdp": string;
+    staging: string;
+    production: string;
+};
 export declare const CDP_ROUTE: {
     sandbox: string;
     "sandbox-cdp": string;

package/es/constants/api.js

@@ -13,6 +13,13 @@ export const CDP_API = {
     [ENV.STAGING]: 'https://staging-cdp.antsomi.com',
     [ENV.PROD]: 'https://cdp.antsomi.com',
 };
+export const ANTALYSER_API = {
+    [ENV.DEV]: 'https://sandbox-antalyser.ants.vn',
+    [ENV.SANDBOX]: 'https://sandbox-antalyser.ants.vn',
+    [ENV.SANDBOX_CDP]: 'https://sandbox-antalyser.ants.vn',
+    [ENV.STAGING]: 'https://sandbox-antalyser.ants.vn',
+    [ENV.PROD]: 'https://sandbox-antalyser.ants.vn',
+};
 export const CDP_ROUTE = {
     [ENV.SANDBOX]: 'https://sandbox-cdp.antsomi.com',
     [ENV.SANDBOX_CDP]: 'https://sandbox-cdp.antsomi.com',

package/package.json

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