@antscorp/antsomi-ui 1.3.5-beta.996 → 1.3.5-beta.998

package/es/components/molecules/AddDynamicContent/components/DisplayFormat/DisplayFormat.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
 export type TDisplayFormat = 'number' | 'percentage' | 'currency' | 'datetime';
 type DisplayFormatProps = {

package/es/components/molecules/DrawerDetail/DrawerDetail.js

@@ -16,7 +16,7 @@ import { safeParseJson } from '@antscorp/antsomi-ui/es/utils';
 import { POST_MESSAGE_TYPES } from '@antscorp/antsomi-ui/es/constants';
 export const DrawerDetail = props => {
     // Props
-    const { width, fullScreen: fullScreenProp = false, children, menuProps, closeIconProps, maxWidth, minWidth, defaultSize = 'max', headerProps, name, destroyOnClose = true, mask = false, onToggleCollapse, closable = false, ...restProps } = props;
+    const { width, fullScreen: fullScreenProp = false, children, menuProps, closeIconProps, maxWidth, minWidth, defaultSize = 'max', headerProps, name, destroyOnClose = true, mask = false, classNames, onToggleCollapse, closable = false, ...restProps } = props;
     const { show: showMenu = true, showExpandButton = true, showClose = true, items, selectedKeys, footer, onClick = () => { }, } = menuProps || {};
     const { children: headerChildren, ...restOfHeaderProps } = headerProps || {};
     const { onClose = () => { } } = props;
@@ -129,7 +129,7 @@ export const DrawerDetail = props => {
         }, destroyOnClose: destroyOnClose, ...restProps, children: [showCloseIcon && (_jsx("div", { className: "close-btn", ...restOfCloseIcon, onClick: e => {
                     onCloseIconClick(e);
                     onClose(e);
-                }, children: _jsx(Icon, { type: "icon-ants-remove-slim", size: 14 }) })), showExpandButton && !fullScreen && (_jsx(ToggleDrawerSizeButton, { style: {
+                }, children: _jsx(Icon, { type: "icon-ants-remove-slim", size: 14 }) })), showExpandButton && !fullScreen && (_jsx(ToggleDrawerSizeButton, { className: classNames?.btnToogleSize, style: {
                     ...(!showMenu && { background: '#ffffff' }),
                 }, onClick: () => handleToggleDrawerSize(), collapse: collapseDrawer })), showMenu && (_jsxs(LeftMenu, { "data-test": "left-menu", className: "animate__animated animate__fadeIn", children: [_jsxs("div", { children: [showClose && (_jsx(CloseBtn, { "data-test": "close-btn", onClick: onClose, children: _jsx(Icon, { type: "icon-ants-remove-slim", size: 14 }) })), _jsx(Flex, { vertical: true, gap: 10, align: "center", justify: "center", children: items?.map((item) => (_jsx(Tooltip, { title: item?.label, mouseEnterDelay: 0.3, placement: "right", children: _jsx(MenuItem, { className: selectedKeys?.includes(item.key) ? 'active' : '', onClick: () => onClick && onClick(item), children: item.icon }, item?.key) }, item?.key))) })] }), _jsx(MenuFooter, { children: footer })] })), _jsxs(Content, { className: "drawer-detail-content", children: [headerProps?.children && (_jsx(DrawerHeader, { align: "center", ...restOfHeaderProps, children: headerChildren })), children] })] }));
 };

package/es/components/molecules/DrawerDetail/types.d.ts

@@ -11,6 +11,9 @@ export interface DrawerDetailProps extends Omit<DrawerProps, 'closeIcon' | 'titl
     headerProps?: DrawerHeaderProps;
     menuProps?: DrawerDetailMenuProps;
     closeIconProps?: DrawerDetailCloseIconProps;
+    classNames?: DrawerProps['classNames'] & {
+        btnToogleSize?: string;
+    };
     onToggleCollapse?: (collapsed: boolean) => void;
 }
 export interface DrawerDetailCloseIconProps extends React.HtmlHTMLAttributes<HTMLDivElement> {

package/es/components/molecules/InputSelectAttribute/index.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 export type ValueType = 'input' | 'select';
-type Value = string | {
+type Value = {
     source: string;
-    code: string;
-} | null;
+    code: any;
+} | string;
 type Option = {
     [key: string]: any;
     label: string;
@@ -11,16 +11,15 @@ type Option = {
 };
 export interface InputSelectAttributeProps {
     sourceOptions: Option[];
-    codeOptions: Option[];
-    codeOptionsInitial?: Option[];
+    mapCodeOptions: Record<string, Option[]>;
     label?: string;
+    isErrorTag?: boolean;
     errorMsg?: string;
     value: Value;
     onChange: (newValueData: {
         value: Value;
         valueType: ValueType;
     }) => void;
-    onChangeSelectSource: (value: string) => void;
 }
 declare const _default: import("react").MemoExoticComponent<(props: InputSelectAttributeProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/es/components/molecules/InputSelectAttribute/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Libraries
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { get, isUndefined, keyBy } from 'lodash';
+import { memo, useCallback, useMemo, useState } from 'react';
+import { get, keyBy } from 'lodash';
 import { Flex, Form, Select, Tooltip, Typography } from 'antd';
 // Translations
 import { translate, translations } from '@antscorp/antsomi-ui/es/locales';
@@ -15,62 +15,75 @@ import { Dashboard30Icon, ErrorIcon } from '../../icons';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 const InputSelectAttribute = (props) => {
-    const { value, errorMsg, label, sourceOptions = [], codeOptions = [], codeOptionsInitial = [], onChange, onChangeSelectSource, } = props;
+    const { value, errorMsg, label, isErrorTag, sourceOptions = [], mapCodeOptions = {}, onChange, } = props;
     const [form] = Form.useForm();
+    const sourceValue = Form.useWatch('source', form);
     // States
     const [openModal, setOpenModal] = useState(false);
-    const [attributeState, setAttributeState] = useState(() => {
-        if (value && typeof value !== 'string') {
-            return value;
+    const codeOptions = useMemo(() => {
+        if (sourceValue) {
+            return get(mapCodeOptions, sourceValue, []);
         }
-        return {
-            source: '',
-            code: '',
-        };
-    });
-    // Effects
-    useEffect(() => {
-        if (attributeState.code === '' ||
-            !codeOptions.find(option => option.value === attributeState.code)) {
-            form.setFieldsValue({ code: codeOptions[0]?.value });
-        }
-    }, [attributeState, codeOptions, form]);
-    // Memoized
-    const mapCodeOpts = useMemo(() => keyBy(codeOptions, 'value'), [codeOptions]);
-    const mapCodeOriginOpts = useMemo(() => keyBy(codeOptionsInitial, 'value'), [codeOptionsInitial]);
+        return [];
+    }, [sourceValue, mapCodeOptions]);
+    const mapCode = useMemo(() => {
+        if (typeof value === 'string')
+            return {};
+        return keyBy(get(mapCodeOptions, value?.code, []), 'value');
+    }, [mapCodeOptions, value]);
+    const getCodeBySource = useCallback((source) => get(mapCodeOptions, [source, '0', 'value'], ''), [mapCodeOptions]);
     const onOpenModal = useCallback(() => {
+        if (typeof value !== 'string') {
+            form.setFieldsValue({ source: value?.source, code: value?.code });
+        }
+        else {
+            const source = sourceOptions[0]?.value || '';
+            const code = getCodeBySource(source);
+            form.setFieldsValue({ source, code });
+        }
         setOpenModal(true);
-    }, []);
+    }, [value, form, sourceOptions, getCodeBySource]);
     const onDeselect = useCallback(() => {
         onChange({ value: '', valueType: 'input' });
     }, [onChange]);
     const onHideModal = useCallback(() => {
         setOpenModal(false);
     }, []);
+    const onAfterClose = useCallback(() => {
+        form.resetFields();
+    }, [form]);
     const onOk = async () => {
         try {
             // Validate form fields before getting values
             const values = await form.validateFields();
-            const newValue = {
-                source: values.sources,
-                code: values.code,
-            };
+            if (typeof values !== 'string') {
+                const newValue = {
+                    source: values?.source,
+                    code: values?.code,
+                };
+                onChange({ value: newValue, valueType: 'select' });
+            }
             setOpenModal(false);
-            onChange({ value: newValue, valueType: 'select' });
         }
         catch (errorInfo) {
+            // eslint-disable-next-line no-console
             console.error('Validation Failed:', errorInfo);
         }
     };
     const onChangeInput = useCallback((val) => {
         onChange({ value: val, valueType: 'input' });
     }, [onChange]);
+    const onValuesChange = useCallback((changedValues) => {
+        // If source changed -> set new code based on new source
+        if (changedValues?.source) {
+            const newCode = getCodeBySource(changedValues.source);
+            form.setFieldValue('code', newCode);
+        }
+    }, [form, getCodeBySource]);
     const renderInput = () => {
         let element = null;
         const isObjValue = value && typeof value !== 'string';
         if (openModal || isObjValue) {
-            const isErrorTag = (isObjValue &&
-                isUndefined(get(mapCodeOriginOpts, [value.code])));
             element = (_jsxs("div", { style: {
                     display: 'flex',
                     alignItems: 'center',
@@ -78,7 +91,7 @@ const InputSelectAttribute = (props) => {
                     height: 32,
                     padding: '4px 12px 4px 4px',
                     borderBottom: `1px solid ${errorMsg ? THEME.token?.colorError : THEME.token?.blue1}`,
-                }, children: [_jsx("div", { style: { width: '100%', cursor: 'pointer' }, onClick: onOpenModal, children: isObjValue && (_jsx(Tag, { isError: isErrorTag, children: isErrorTag ? (_jsxs(Flex, { gap: 5, align: "center", children: ["Unknown", _jsx(Tooltip, { title: "The used dynamic content is removed", children: _jsx(ErrorIcon, { size: 16 }) })] })) : (get(mapCodeOpts, [value.code, 'label'], mapCodeOriginOpts[value.code]?.label)) })) }), _jsx(Icon, { type: "icon-ants-remove", style: { fontSize: 10, color: '#222', cursor: 'pointer' }, onClick: onDeselect })] }));
+                }, children: [_jsx("div", { style: { width: '100%', cursor: 'pointer' }, onClick: onOpenModal, children: isObjValue && (_jsx(Tag, { isError: isErrorTag, children: isErrorTag ? (_jsxs(Flex, { gap: 5, align: "center", children: ["Unknown", _jsx(Tooltip, { title: "The used dynamic content is removed", children: _jsx(ErrorIcon, { size: 16 }) })] })) : (get(mapCode, [value?.code, 'label'], value?.code)) })) }), _jsx(Icon, { type: "icon-ants-remove", style: { fontSize: 10, color: '#222', cursor: 'pointer' }, onClick: onDeselect })] }));
         }
         else {
             element = (_jsx(StyledSelect, { mode: "multiple", options: [{ value: '', label: 'Or select a field' }], notFoundContent: null, onSelect: onOpenModal, style: { width: '100%', borderTop: 'none', borderLeft: 'none', borderRight: 'none' }, onDeselect: onDeselect, autoClearSearchValue: false, searchValue: typeof value === 'string' ? value : '', onSearch: onChangeInput, status: errorMsg ? 'error' : undefined, placeholder: typeof value === 'string' ? value : translate(translations.inputYourValue.title), "$isPlaceholder": !value, "$isError": !!errorMsg, dropdownStyle: {
@@ -87,12 +100,6 @@ const InputSelectAttribute = (props) => {
         }
         return element;
     };
-    return (_jsxs(_Fragment, { children: [renderInput(), errorMsg ? (_jsx(Typography.Text, { style: { marginLeft: 8, color: THEME.token?.red8, marginTop: 5 }, children: errorMsg })) : null, _jsx(ModalV2, { title: translate(translations._PREDICT_MODEL_SELECT_ATTRIBUTE, 'Select attribute'), okText: translate(translations._ACT_APPLY, 'Apply'), open: openModal, onOk: onOk, onCancel: onHideModal, destroyOnClose: true, centered: true, children: _jsxs(Form, { colon: false, form: form, initialValues: {
-                        sources: attributeState.source || sourceOptions[0]?.value,
-                        code: attributeState.code || codeOptions[0]?.value,
-                    }, children: [_jsx(Form.Item, { label: translate(translations._TITL_PERSONALIZATION_TYPE, 'Content Source'), name: "sources", required: true, labelCol: { span: 6 }, labelAlign: "left", rules: [{ required: true, message: 'Please select field!' }], children: _jsx(Select, { suffixIcon: _jsx(Icon, { type: "icon-ants-expand-more", style: { fontSize: '20px', color: THEME.token?.colorIcon } }), options: sourceOptions, placeholder: "Please select an item", value: attributeState.source, onChange: newValue => {
-                                    setAttributeState(state => ({ ...state, code: '', source: newValue }));
-                                    onChangeSelectSource(newValue);
-                                } }) }), _jsx(Form.Item, { label: label || 'Allocated Code', required: true, labelCol: { span: 6 }, labelAlign: "left", name: "code", rules: [{ required: true, message: 'Please select field!' }], children: _jsx(Select, { suffixIcon: _jsx(Icon, { type: "icon-ants-expand-more", style: { fontSize: '20px', color: THEME.token?.colorIcon } }), notFoundContent: _jsx(EmptyData, { size: "small", icon: _jsx(Dashboard30Icon, {}), description: "No personalized content in this journey" }), placeholder: "Please select an item", value: attributeState.code, options: codeOptions }) })] }) })] }));
+    return (_jsxs(_Fragment, { children: [renderInput(), errorMsg ? (_jsx(Typography.Text, { style: { marginLeft: 8, color: THEME.token?.red8, marginTop: 5 }, children: errorMsg })) : null, _jsx(ModalV2, { title: translate(translations._PREDICT_MODEL_SELECT_ATTRIBUTE, 'Select attribute'), okText: translate(translations._ACT_APPLY, 'Apply'), open: openModal, onOk: onOk, onCancel: onHideModal, afterClose: onAfterClose, destroyOnClose: true, centered: true, children: _jsxs(Form, { colon: false, form: form, onValuesChange: onValuesChange, children: [_jsx(Form.Item, { label: translate(translations._TITL_PERSONALIZATION_TYPE, 'Content Source'), name: "source", required: true, labelCol: { span: 6 }, labelAlign: "left", rules: [{ required: true, message: 'Please select field!' }], children: _jsx(Select, { suffixIcon: _jsx(Icon, { type: "icon-ants-expand-more", style: { fontSize: '20px', color: THEME.token?.colorIcon } }), options: sourceOptions, placeholder: "Please select an item" }) }), _jsx(Form.Item, { label: label || 'Allocated Code', required: true, labelCol: { span: 6 }, labelAlign: "left", name: "code", rules: [{ required: true, message: 'Please select field!' }], children: _jsx(Select, { suffixIcon: _jsx(Icon, { type: "icon-ants-expand-more", style: { fontSize: '20px', color: THEME.token?.colorIcon } }), notFoundContent: _jsx(EmptyData, { size: "small", icon: _jsx(Dashboard30Icon, {}), description: "No personalized content in this journey" }), placeholder: "Please select an item", options: codeOptions }) })] }) })] }));
 };
 export default memo(InputSelectAttribute);

package/es/components/template/TemplateListing/Loadable.d.ts

@@ -3,5 +3,4 @@
  * Asynchronously loads the component for TemplateListing
  *
  */
-/// <reference types="react" />
 export declare const TemplateListing: (props: import("./types").TemplateListingProps<{}>) => JSX.Element;

package/package.json

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