@antscorp/antsomi-ui 1.3.6-beta.39 → 1.3.6-beta.40

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

@@ -1,3 +1,4 @@
+/// <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/EditingListV2/EditingList.js

@@ -6,12 +6,13 @@ 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 { isLoading = false, addButtonLabel = 'Add', options = [], selected = [], removable = true, popupPlacement = 'leftBottom', className, onChange, } = props;
+    const popoverOptions = useMemo(() => options.filter(opt => !opt.errorMessage), [options]);
     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 }) }))] }));
+    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: popoverOptions, selected: selected, addButtonLabel: addButtonLabel, onChange: onChange }) }))] }));
 };

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

@@ -3,9 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { isEmpty } from 'lodash';
 // Components
-import { Spin, Typography } from '../../../../atoms';
+import { Spin, Typography, Tooltip } from '../../../../atoms';
 import { List } from 'antd';
-import { CloseIcon } from '@antscorp/antsomi-ui/es/components/icons';
+import { CloseIcon, WarningIcon } from '@antscorp/antsomi-ui/es/components/icons';
 // Utils
 import { CLS } from '../../utils';
 // Constants
@@ -22,6 +22,7 @@ export const ListItem = (props) => {
     const items = selectOptions.map(opt => ({
         className: CLS.ListItem.default,
         key: opt.key,
+        errorMessage: opt.errorMessage,
         label: renderLabel(opt.label),
     }));
     if (isLoading) {
@@ -33,10 +34,15 @@ export const ListItem = (props) => {
     return (_jsx(List, { dataSource: items, renderItem: item => (_jsxs(List.Item, { style: {
                 display: 'flex',
                 alignItems: 'center',
-                border: '1px solid #B8CFE6',
+                border: `1px solid ${item.errorMessage ? '#EF3340' : '#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 }))] })) }));
+            }, onMouseEnter: () => setHover(item.key), onMouseLeave: () => setHover(''), children: [item.label, _jsxs("div", { style: {
+                        flexShrink: 0,
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '5px',
+                    }, children: [item.errorMessage && (_jsx(Tooltip, { title: item.errorMessage, children: _jsx(WarningIcon, { size: 18 }) })), hover === item.key && removable && (_jsx(CloseIcon, { size: 18, color: globalToken?.bw8, style: { cursor: 'pointer' }, onClick: onClickRemove ? () => onClickRemove(item.key) : undefined }))] })] })) }));
 };

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react/jsx-boolean-value */
 // Components
 import { Button } from '@antscorp/antsomi-ui/es/components/atoms';
 import { PopoverAddField } from '../../../SearchPopover';
@@ -6,5 +7,5 @@ import { PopoverAddField } from '../../../SearchPopover';
 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] }) }));
+    return (_jsx(PopoverAddField, { style: { margin: 0, position: 'absolute' }, 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/types.d.ts

@@ -2,6 +2,7 @@
 export type Option = {
     key: string;
     label: React.ReactNode;
+    errorMessage?: string;
     search?: string;
 };
 export type EditingListProps = {

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

@@ -8,6 +8,7 @@ export type ItemType = {
     scrollingLabel?: string;
     label?: ReactNode;
     children?: ItemType[];
+    errorMessage?: string | undefined;
     disabled?: boolean;
 };
 export type SerializedItemType = ItemType & {

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

@@ -3,4 +3,5 @@
  * 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.6-beta.39",
+  "version": "1.3.6-beta.40",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",