@antscorp/antsomi-ui 1.3.6-beta.3 → 1.3.6-beta.30

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, classNames, onToggleCollapse, closable = false, ...restProps } = props;
+    const { width, fullScreen: fullScreenProp = false, children, menuProps, closeIconProps, maxWidth, minWidth, defaultSize = 'max', headerProps, name, destroyOnClose = true, mask = false, classNames, collapsed: propCollapsed, 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;
@@ -99,17 +99,22 @@ export const DrawerDetail = props => {
             }
         }
     }, [collapseDrawer, fullScreen, matchesSmallScreen, maxWidth, minWidth, width]);
-    const handleToggleDrawerSize = () => {
+    const handleToggleDrawerSize = useCallback((updatedCollapsed) => {
         const localStorageValues = safeParseJson(localStorage.getItem(DRAWER_DETAIL_LOCAL_STORAGE_KEY), {});
-        toggleCollapseDrawer(!collapseDrawer);
-        onToggleCollapse?.(!collapseDrawer);
+        toggleCollapseDrawer(updatedCollapsed ?? !collapseDrawer);
+        onToggleCollapse?.(updatedCollapsed ?? !collapseDrawer);
         /**
          * Set local storage last collapsed
          */
         if (name) {
             localStorage.setItem(DRAWER_DETAIL_LOCAL_STORAGE_KEY, JSON.stringify({ ...localStorageValues, [name || '']: !collapseDrawer }));
         }
-    };
+    }, [collapseDrawer, name, onToggleCollapse, toggleCollapseDrawer]);
+    useEffect(() => {
+        if (propCollapsed !== undefined) {
+            handleToggleDrawerSize(propCollapsed);
+        }
+    }, [propCollapsed, handleToggleDrawerSize]);
     return (_jsxs(StyledDrawer, { push: false, closable: closable, width: drawerWidth, motion: {
             visible: false,
             motionAppear: false,

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

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

package/es/components/molecules/Dropdown/style.scss

@@ -1,9 +1,11 @@
 .antsomi-input-dropdown-overlay {
-  .antsomi-dropdown-menu {
-    overflow: hidden;
+  &.antsomi-dropdown {
+    .antsomi-dropdown-menu {
+      overflow: hidden;
 
-    :hover {
-      overflow: auto;
+      &:hover {
+        overflow: auto;
+      }
     }
   }
 }

package/es/components/molecules/EditingListV2/EditingList.d.ts

@@ -0,0 +1,2 @@
+import { EditingListProps } from './types';
+export declare const EditingListV2: (props: EditingListProps) => import("react/jsx-runtime").JSX.Element;

package/es/components/molecules/EditingListV2/EditingList.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Libraries
+import { useMemo } from 'react';
+// Components
+import { Suspense } from '../../atoms';
+import { ListItem, LazyComponent } from './components';
+const { Popover } = LazyComponent;
+export const EditingListV2 = (props) => {
+    const { isLoading = false, addButtonLabel = 'Add', options = [], selected = [], removable = true, popupPlacement = 'right', className, onChange, } = props;
+    const selectedOptions = useMemo(() => options.filter(opt => selected.includes(opt.key)), [selected, options]);
+    // const isSelectAll = selectedOptions.length === options.length;
+    const handleRemove = (removedKey) => {
+        const selectedKeys = selectedOptions.filter(opt => opt.key !== removedKey).map(opt => opt.key);
+        onChange?.(selectedKeys);
+    };
+    return (_jsxs("div", { className: className, children: [_jsx(ListItem, { isLoading: isLoading, selectOptions: selectedOptions, removable: removable, onClickRemove: handleRemove }), !isLoading && (_jsx(Suspense, { children: _jsx(Popover, { placement: popupPlacement, options: options, selected: selected, addButtonLabel: addButtonLabel, onChange: onChange }) }))] }));
+};

package/es/components/molecules/EditingListV2/components/List/List.d.ts

@@ -0,0 +1,9 @@
+import { Option } from '../../types';
+type ListProps = {
+    isLoading: boolean;
+    selectOptions: Option[];
+    removable?: boolean;
+    onClickRemove?: (key: string) => void;
+};
+export declare const ListItem: (props: ListProps) => import("react/jsx-runtime").JSX.Element | undefined;
+export {};

package/es/components/molecules/EditingListV2/components/List/List.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Libraries
+import { useState } from 'react';
+import { isEmpty } from 'lodash';
+// Components
+import { Spin, Typography } from '../../../../atoms';
+import { List } from 'antd';
+import { CloseIcon } from '@antscorp/antsomi-ui/es/components/icons';
+// Utils
+import { CLS } from '../../utils';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const ListItem = (props) => {
+    const { isLoading, selectOptions, onClickRemove, removable } = props;
+    const [hover, setHover] = useState('');
+    const renderLabel = (label) => {
+        if (typeof label === 'string') {
+            return _jsx(Typography.Text, { ellipsis: { tooltip: true }, children: label });
+        }
+        return label;
+    };
+    const items = selectOptions.map(opt => ({
+        className: CLS.ListItem.default,
+        key: opt.key,
+        label: renderLabel(opt.label),
+    }));
+    if (isLoading) {
+        return _jsx(Spin, { indicatorSize: 24 });
+    }
+    if (isEmpty(selectOptions)) {
+        return;
+    }
+    return (_jsx(List, { dataSource: items, renderItem: item => (_jsxs(List.Item, { style: {
+                display: 'flex',
+                alignItems: 'center',
+                border: '1px solid #B8CFE6',
+                borderRadius: '4px',
+                padding: '10px',
+                marginBottom: '10px',
+                minHeight: '40px',
+            }, onMouseEnter: () => setHover(item.key), onMouseLeave: () => setHover(''), children: [item.label, ' ', hover === item.key && removable && (_jsx(CloseIcon, { size: 18, color: globalToken?.bw8, style: { flexShrink: 0, cursor: 'pointer' }, onClick: onClickRemove ? () => onClickRemove(item.key) : undefined }))] })) }));
+};

package/es/components/molecules/EditingListV2/components/List/index.d.ts

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

package/es/components/molecules/EditingListV2/components/List/index.js

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

package/es/components/molecules/EditingListV2/components/Loadable.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const Popover: import("react").LazyExoticComponent<(props: {
+    placement?: "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "left" | "right" | "bottom" | "top" | "bottomLeft" | "topLeft" | "topRight" | "bottomRight" | undefined;
+    options: import("../types").Option[];
+    selected: string[];
+    addButtonLabel: import("react").ReactNode;
+    onChange?: ((selected: string[]) => void) | undefined;
+}) => import("react/jsx-runtime").JSX.Element>;

package/es/components/molecules/EditingListV2/components/Loadable.js

@@ -0,0 +1,2 @@
+import { lazy } from 'react';
+export const Popover = lazy(() => import('./Popover').then(module => ({ default: module.Popover })));

package/es/components/molecules/EditingListV2/components/Popover/Popover.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Option } from '../../types';
+type PopoverProps = {
+    placement?: 'left' | 'right' | 'top' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    options: Option[];
+    selected: string[];
+    addButtonLabel: React.ReactNode;
+    onChange?: (selected: string[]) => void;
+};
+export declare const Popover: (props: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/es/components/molecules/EditingListV2/components/Popover/Popover.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Components
+import { Button } from '@antscorp/antsomi-ui/es/components/atoms';
+import { PopoverAddField } from '../../../SearchPopover';
+// Icons
+import { AddIcon } from '../../../../icons';
+export const Popover = (props) => {
+    const { options, selected, addButtonLabel, onChange, placement } = props;
+    return (_jsx(PopoverAddField, { style: { margin: 0 }, fields: options, placement: placement, selected: selected, onApply: onChange, isAllowEmpty: true, children: _jsxs(Button, { type: "text", children: [_jsx(AddIcon, { size: 14 }), addButtonLabel] }) }));
+};

package/es/components/molecules/EditingListV2/components/Popover/index.d.ts

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

package/es/components/molecules/EditingListV2/components/Popover/index.js

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

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

@@ -0,0 +1,3 @@
+export { ListItem } from './List';
+export { Popover } from './Popover';
+export * as LazyComponent from './Loadable';

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

@@ -0,0 +1,3 @@
+export { ListItem } from './List';
+export { Popover } from './Popover';
+export * as LazyComponent from './Loadable';

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

@@ -0,0 +1,2 @@
+export { EditingListV2 } from './EditingList';
+export type { EditingListProps } from './types';

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

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

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export type Option = {
+    key: string;
+    label: React.ReactNode;
+    search?: string;
+};
+export type EditingListProps = {
+    popupPlacement?: 'left' | 'right' | 'top' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    addButtonLabel?: string;
+    options?: Option[];
+    selected?: string[];
+    showNum?: boolean;
+    className?: string;
+    isLoading?: boolean;
+    emptyDescription?: string;
+    removable?: boolean;
+    isAllowEmpty?: boolean;
+    onChange?: (selected: string[]) => void;
+};

package/es/components/molecules/EditingListV2/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/molecules/EditingListV2/utils.d.ts

@@ -0,0 +1,27 @@
+export declare const componentCls: (className: string) => string;
+export declare const CLS: {
+    readonly Root: {
+        readonly default: string;
+    };
+    readonly Title: {
+        readonly default: string;
+    };
+    readonly Search: {
+        readonly default: string;
+    };
+    readonly RemoveButton: {
+        readonly default: string;
+    };
+    readonly AddButton: {
+        readonly default: string;
+    };
+    readonly ListWapper: {
+        readonly default: string;
+    };
+    readonly List: {
+        readonly default: string;
+    };
+    readonly ListItem: {
+        readonly default: string;
+    };
+};

package/es/components/molecules/EditingListV2/utils.js

@@ -0,0 +1,28 @@
+import { antsomiClsx } from '@antscorp/antsomi-ui/es/utils';
+export const componentCls = antsomiClsx('editing-list');
+export const CLS = {
+    Root: {
+        default: componentCls('root'),
+    },
+    Title: {
+        default: componentCls('title'),
+    },
+    Search: {
+        default: componentCls('search'),
+    },
+    RemoveButton: {
+        default: componentCls('remove-btn'),
+    },
+    AddButton: {
+        default: componentCls('add-btn'),
+    },
+    ListWapper: {
+        default: componentCls('selected-list-wrapper'),
+    },
+    List: {
+        default: componentCls('selected-list'),
+    },
+    ListItem: {
+        default: componentCls('selected-list-item'),
+    },
+};

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

@@ -14,6 +14,7 @@ import { EmptyData } from '../EmptyData';
 import { Dashboard30Icon, ErrorIcon } from '../../icons';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { TAG_TYPE } from '../TagifyInput';
 const InputSelectAttribute = (props) => {
     const { value, errorMsg, label, isErrorTag, sourceOptions = [], mapCodeOptions = {}, onChange, } = props;
     const [form] = Form.useForm();
@@ -27,7 +28,7 @@ const InputSelectAttribute = (props) => {
         return [];
     }, [sourceValue, mapCodeOptions]);
     const initCodeTitleField = useMemo(() => {
-        if (sourceValue === 'allocated_code') {
+        if (sourceValue === TAG_TYPE.PROMOTION_CODE) {
             return 'Allocated Code';
         }
         return upperFirst(translate(translations._ITEM_NAME_ATTRIBUTE, 'attribute'));
@@ -98,7 +99,9 @@ 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(mapCodeBySource, [value?.code, 'label'], value?.code)) })) }), _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 }) })] })) : (_jsx(Typography.Text, { ellipsis: {
+                                    tooltip: get(mapCodeBySource, [value?.code, 'label'], value?.code),
+                                }, style: { maxWidth: 150 }, children: get(mapCodeBySource, [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: {

package/es/components/molecules/SearchPopover/components/PopoverAddField/PopoverAddField.js

@@ -7,7 +7,7 @@ import { PopoverSelect } from '../PopoverSelect';
 import { Flex, Typography } from 'antd';
 import { IconField } from '@antscorp/antsomi-ui/es/components/atoms/IconField';
 export const PopoverAddField = (props) => {
-    const { fields, onSearchPredicate, className, children, ...rest } = props;
+    const { fields, onSearchPredicate, className, children, isAllowEmpty, ...rest } = props;
     const originalFieldByKey = useMemo(() => new Map(fields.map(field => [field.key, field])), [fields]);
     const handleOnSearchPredicate = useCallback((option) => {
         const originalField = originalFieldByKey.get(option.key);
@@ -27,5 +27,5 @@ export const PopoverAddField = (props) => {
                         selected: params.selected.includes(field.key),
                     })] })),
     })), [fields]);
-    return (_jsx(PopoverSelect, { ...rest, options: options, onSearchPredicate: handleOnSearchPredicate, className: clsx(className, 'ants-popover-add-fields'), children: children || (_jsxs(Button, { type: "text", children: [_jsx(Icon, { type: "icon-ants-plus-slim", size: 14 }), "Add fields"] })) }));
+    return (_jsx(PopoverSelect, { ...rest, options: options, onSearchPredicate: handleOnSearchPredicate, className: clsx(className, 'ants-popover-add-fields'), isAllowEmpty: isAllowEmpty || false, children: children || (_jsxs(Button, { type: "text", children: [_jsx(Icon, { type: "icon-ants-plus-slim", size: 14 }), "Add fields"] })) }));
 };

package/es/components/molecules/SearchPopover/components/PopoverSelect/PopoverSelect.js

@@ -14,7 +14,7 @@ import { VirtualizedMenu } from '../../../VirtualizedMenu';
 import { ITEM_SIZE, ITEM_SPACING } from '../../../VirtualizedMenu/config';
 const { t } = i18nInstance;
 export const PopoverSelect = (props) => {
-    const { open: openProp, selected, options: optionsProp = [], inputSearchProps = {}, children, showAllLabel = 'Show all', showSelectedLabel = 'Show selected', selectAllLabel = 'Select all', deselectAllLabel = 'Unselect all', menuProps = {}, onCancel, onApply, onSearchPredicate, ...rest } = props;
+    const { open: openProp, selected, options: optionsProp = [], inputSearchProps = {}, children, showAllLabel = 'Show all', showSelectedLabel = 'Show selected', selectAllLabel = 'Select all', deselectAllLabel = 'Unselect all', menuProps = {}, isAllowEmpty = false, onCancel, onApply, onSearchPredicate, ...rest } = props;
     const itemSize = menuProps.itemSize || ITEM_SIZE;
     const itemSpacing = menuProps.itemSpacing || ITEM_SPACING;
     const { value: searchValue, searchConfig, ...restInputSearchProps } = inputSearchProps;
@@ -26,7 +26,7 @@ export const PopoverSelect = (props) => {
     const [selectedKeys, setSelectedKeys] = useState(new Set());
     const [search, setSearch] = useState('');
     const [showSelected, setShowSelected] = useState(false);
-    const applyDisabled = selectedKeys.size === 0;
+    const applyDisabled = selectedKeys.size === 0 && !isAllowEmpty;
     const options = useMemo(() => typeof optionsProp === 'function'
         ? optionsProp({ selected: [...selectedKeys] })
         : optionsProp, [optionsProp, selectedKeys]);
@@ -113,11 +113,11 @@ export const PopoverSelect = (props) => {
         key: opt.key,
         label: (_jsx(Checkbox, { onChange: e => handleToggleField(opt, e.target.checked), checked: selectedKeys.has(opt.key), children: renderCheckBoxLabel(opt) })),
     }));
-    return (_jsx(SearchPopover, { destroyTooltipOnHide: true, ...rest, content: _jsxs(_Fragment, { children: [optionsProp.length > 0 && (_jsxs(StyledAction, { children: [_jsx(Button, { type: "link", size: "small", onClick: () => setShowSelected(current => !current), children: showSelected ? showAllLabel : showSelectedLabel }), selectedKeys.size === options.length ? (_jsx(Button, { type: "link", onClick: handleDeselectAll, children: deselectAllLabel })) : (_jsx(Button, { type: "link", onClick: handleSelectAll, children: selectAllLabel }))] })), filteredOptions.length ? (_jsx(StyledListFieldsWrapper, { "$minHeight": calDefaultListHeightInPopover({
+    return (_jsx(SearchPopover, { destroyTooltipOnHide: true, placement: "bottomLeft", ...rest, content: _jsxs(_Fragment, { children: [optionsProp.length > 0 && (_jsxs(StyledAction, { children: [_jsx(Button, { type: "link", size: "small", onClick: () => setShowSelected(current => !current), children: showSelected ? showAllLabel : showSelectedLabel }), selectedKeys.size === options.length ? (_jsx(Button, { type: "link", onClick: handleDeselectAll, children: deselectAllLabel })) : (_jsx(Button, { type: "link", onClick: handleSelectAll, children: selectAllLabel }))] })), filteredOptions.length ? (_jsx(StyledListFieldsWrapper, { "$minHeight": calDefaultListHeightInPopover({
                         listLength: filteredOptions.length,
                         itemSize,
                         itemSpacing,
-                    }), children: _jsx(VirtualizedMenu, { ...menuProps, itemSize: itemSize, items: items }) })) : (_jsx(EmptyData, { showIcon: false, description: t(translations.noData).toString() })), _jsxs(StyledFooter, { children: [_jsx(Button, { onClick: handleCancel, children: "Cancel" }), _jsx(Button, { onClick: handleApply, disabled: applyDisabled, type: "primary", children: "Apply" })] })] }), trigger: ['click'], placement: "bottomLeft", open: open, inputSearchProps: {
+                    }), children: _jsx(VirtualizedMenu, { ...menuProps, itemSize: itemSize, items: items }) })) : (_jsx(EmptyData, { showIcon: false, description: t(translations.noData).toString() })), _jsxs(StyledFooter, { children: [_jsx(Button, { onClick: handleCancel, children: "Cancel" }), _jsx(Button, { onClick: handleApply, disabled: applyDisabled, type: "primary", children: "Apply" })] })] }), trigger: ['click'], open: open, inputSearchProps: {
             ...restInputSearchProps,
             value: search,
             onAfterChange: handleOnSearch,

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

@@ -9,6 +9,7 @@ export type SearchPopoverProps = PropsWithChildren<{
     inputSearchProps?: InputProps & {
         searchConfig?: SearchConfig;
     };
+    isAllowEmpty?: boolean;
 } & PopoverProps>;
 export type Option = {
     key: string;

package/es/components/molecules/TagifyInput/TagifyInput.js

@@ -24,7 +24,7 @@ const { CUSTOM_TAG } = TAG_TYPE;
 const { READONLY_TAG, INVALID_TAG, MESSAGE_TAG, FORCE_SHOW_TOOLTIP, ERROR_TAG, WARNING_TAG } = TAG_CUSTOM_ATTRIBUTES;
 const TagifyInput = forwardRef((props, ref) => {
     // Props
-    const { initialValue, escapeHTML, status, readonly, readonlyTag, realtime, disabled, maxLength, maxHeight, minWidth, placeholder, minWidthPlaceholder, isSingleLineText, acceptableTagPattern, tagProperties = {}, mapAttributes = {}, mapErrorAttributes = {}, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onTagRemove, onChange, } = props;
+    const { initialValue, escapeHTML, status, readonly, readonlyTag, realtime, disabled, maxLength, maxHeight, minWidth, placeholder, minWidthPlaceholder, isSingleLineText, acceptableTagPattern, tagProperties, mapAttributes = {}, mapErrorAttributes = {}, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onTagRemove, onChange, } = props;
     // States
     const [isLineBreak, setIsLineBreak] = useState(hasLineBreak(initialValue));
     const [tooltipRefresher, setTooltipRefresher] = useState(1);
@@ -35,6 +35,7 @@ const TagifyInput = forwardRef((props, ref) => {
     const tagifyWrapperRef = useRef(null);
     const placeholderRef = useRef(null);
     const lastRange = useRef(null);
+    const tagLength = tagifyRef?.current?.getTagElms().length;
     // Memoizations
     const cssVariablesMemoized = useMemo(() => _.assign({}, defaultCssVariables, cssTagifyVariables || {}), [cssTagifyVariables]);
     // Only run in the first render
@@ -823,10 +824,10 @@ const TagifyInput = forwardRef((props, ref) => {
         makeValidLabelTags(mapAttributes, mapErrorAttributes);
     }, [mapAttributes, mapErrorAttributes, makeValidLabelTags]);
     useLayoutEffect(() => {
-        if (tagProperties) {
+        if (tagProperties && tagLength) {
             executeTagProperties(tagProperties);
         }
-    }, [tagProperties, executeTagProperties]);
+    }, [tagProperties, tagLength, executeTagProperties]);
     // Listen to Tagify events
     useEffect(() => {
         const { current: tagifyInstance } = tagifyRef || {};
@@ -874,6 +875,7 @@ const TagifyInput = forwardRef((props, ref) => {
                 }
                 // Convert the string to tagify pattern
                 const content = parseTagStringToTagify(textValue, acceptableTagPattern);
+                setIsLineBreak(hasLineBreak(textValue));
                 tagifyRef.current.loadOriginalValues(content);
                 // Need to sync label of the tags if any map attribute is changed to make correct label
                 makeValidLabelTags(mapAttributes, mapErrorAttributes);

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

@@ -6,6 +6,7 @@ export { Select } from './Select';
 export { SelectV2 } from './SelectV2';
 export { DatePicker } from './DatePicker';
 export { ChatBox, ChatBoxInsight } from './ChatBox';
+export { EditingListV2 } from './EditingListV2';
 export { PopupDraggable } from './PopupDraggable';
 export { CaptureScreen } from './CaptureScreen';
 export { SettingWrapper } from './SettingWrapper';

package/es/components/molecules/index.js

@@ -6,6 +6,7 @@ export { Select } from './Select';
 export { SelectV2 } from './SelectV2';
 export { DatePicker } from './DatePicker';
 export { ChatBox, ChatBoxInsight } from './ChatBox';
+export { EditingListV2 } from './EditingListV2';
 export { PopupDraggable } from './PopupDraggable';
 export { CaptureScreen } from './CaptureScreen';
 export { SettingWrapper } from './SettingWrapper';

package/es/components/organism/TicketEditorV2/Content.d.ts

@@ -0,0 +1,27 @@
+declare const Content: ({ apiKey, domain, portalId, token, action, ticketId, listUsers, domainTicket, config, ticketDetails, listComment, userId, fetchgetTicketComments, isLoadingComment, isLoadingDetails, isLoadingDataSouce, accountManage, timeZone, isLoadingSelectedAccount, accountEdit, initOwnerId, isAllAccount, dataSelectInput, setDataSelectInput, }: {
+    apiKey: any;
+    domain: any;
+    portalId: any;
+    token: any;
+    action: any;
+    ticketId: any;
+    listUsers: any;
+    domainTicket: any;
+    config: any;
+    ticketDetails: any;
+    listComment: any;
+    userId: any;
+    fetchgetTicketComments: any;
+    isLoadingComment: any;
+    isLoadingDetails: any;
+    isLoadingDataSouce: any;
+    accountManage: any;
+    timeZone: any;
+    isLoadingSelectedAccount: any;
+    accountEdit: any;
+    initOwnerId: any;
+    isAllAccount: any;
+    dataSelectInput: any;
+    setDataSelectInput: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Content;