@antscorp/antsomi-ui 1.3.5-beta.673 → 1.3.5-beta.675

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

@@ -31,7 +31,7 @@ import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import { useDeepCompareEffect, useDeepCompareMemo, useIntersectionObserver, } from '@antscorp/antsomi-ui/es/hooks';
 // Utils
 import { flatTree, recursiveSearchItems } from '@antscorp/antsomi-ui/es/utils';
-import { DataIcon } from '../../icons';
+import { DataIcon, WarningIcon } from '../../icons';
 import clsx from 'clsx';
 const initialState = {
     isOpenPopover: false,
@@ -123,8 +123,15 @@ export function MatchesAny(props) {
     const onRemoveAll = () => {
         setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [] })));
     };
+    const renderItemError = (item) => {
+        if (customItemRenders === null || customItemRenders === void 0 ? void 0 : customItemRenders.error) {
+            return customItemRenders === null || customItemRenders === void 0 ? void 0 : customItemRenders.error(item);
+        }
+        return item.error ? (React.createElement(Tooltip, { title: item.error },
+            React.createElement(WarningIcon, { size: 16 }))) : null;
+    };
     const renderItemNodeTitle = ({ item, mode = 'unselect', onSelectItem, onRemoveItem, }) => {
-        var _a, _b, _c;
+        var _a, _b;
         const { isExtendValue, title, subTitle } = item; // Destructure properties from item
         return (React.createElement(React.Fragment, null,
             React.createElement("div", { className: clsx('title-content', {
@@ -140,7 +147,7 @@ export function MatchesAny(props) {
                             : extraValue.render
                         : item[extraValue.key]))))))),
             React.createElement(Flex, { align: "center", gap: 10 },
-                mode === 'select' && ((_c = customItemRenders === null || customItemRenders === void 0 ? void 0 : customItemRenders.status) === null || _c === void 0 ? void 0 : _c.call(customItemRenders, item)),
+                mode === 'select' && renderItemError(item),
                 isExtendValue && (React.createElement(Icon, { type: "icon-ants-empty-flag", size: 20, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary })),
                 React.createElement(ActionButton, { className: "select-button", align: "center", justify: "center", onClick: () => {
                         // Call onSelectItem function if provided
@@ -212,11 +219,9 @@ export function MatchesAny(props) {
                     ? flatTree(item.children, 'children').some(item => notExtendValueSelectedItems === null || notExtendValueSelectedItems === void 0 ? void 0 : notExtendValueSelectedItems.some(selectedItem => selectedItem.key === item.key))
                     : notExtendValueSelectedItems === null || notExtendValueSelectedItems === void 0 ? void 0 : notExtendValueSelectedItems.some(selectedItem => selectedItem.key === item.key);
                 return isSelected;
-            })) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign(Object.assign({}, item), { title: renderItemNodeTitle({ item, mode: 'select', onRemoveItem }) }), (item.children
-                ? {
-                    children: serializeTreeData(item.children),
-                }
-                : { className: 'leaf-node' }))))) || [];
+            })) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign(Object.assign(Object.assign({}, item), { title: renderItemNodeTitle({ item, mode: 'select', onRemoveItem }) }), (item.children && {
+                children: serializeTreeData(item.children),
+            })), (!!item.error && { className: 'error-node' }))))) || [];
         };
         return serializeTreeData(items || []).concat(((_a = [...lazyLoadSelectedItems, ...extendValueSelectedItems]) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign({}, item), { title: renderItemNodeTitle({ item, mode: 'select', onRemoveItem }) })))) || []);
     }, [items, selectedItems]);

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

@@ -6,7 +6,7 @@ import { Tree } from '@antscorp/antsomi-ui/es/components/molecules';
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import { EXTRA_VALUE_SHIFT_WIDTH, EXTRA_VALUE_WIDTH } from './constants';
-const { borderRadius, bw3, bw6, blue, blue1, colorPrimary } = globalToken || {};
+const { borderRadius, bw3, bw6, blue, blue1, colorPrimary, colorError } = globalToken || {};
 export const MatchesAnyWrapper = styled(Flex) `
   width: 100%;
   height: 550px;
@@ -67,6 +67,10 @@ export const MatchesAnyWrapper = styled(Flex) `
   }
 
   .antsomi-tree {
+    .antsomi-tree-list-holder-inner {
+      gap: 5px;
+    }
+
     .antsomi-tree-treenode {
       width: 100%;
       padding: 0px;
@@ -177,6 +181,27 @@ export const MatchesAnyWrapper = styled(Flex) `
           }
         }
       }
+
+      &.error-node {
+        .antsomi-tree-node-content-wrapper {
+          border-color: ${colorError};
+          border-width: 1px;
+          border-style: solid;
+        }
+
+        &:not(:has(span.antsomi-tree-switcher-noop)) {
+          .antsomi-tree-node-content-wrapper {
+            border-left-width: 0px;
+          }
+
+          .antsomi-tree-switcher {
+            border-color: ${colorError};
+            border-width: 1px;
+            border-right-width: 0;
+            border-style: solid;
+          }
+        }
+      }
     }
   }
 

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

@@ -10,6 +10,8 @@ export type MatchesAnyItem<TItem = Record<string, any>> = TreeDataNode & {
     isExtendValue?: boolean;
     /** An array of children items. */
     children?: MatchesAnyItem<TItem>[];
+    /** An error message */
+    error?: string;
 } & TItem;
 export type GroupSelectProps = PopoverSelectProps & {
     /** Name of the group select to be displayed */
@@ -23,7 +25,7 @@ export type RenderExtraValue<TItem = Record<string, any>> = {
 export type CustomItemRenders<TItem> = {
     title?: (item: MatchesAnyItem<TItem>) => ReactNode;
     subTitle?: (item: MatchesAnyItem<TItem>) => ReactNode;
-    status?: (item: MatchesAnyItem<TItem>) => ReactNode;
+    error?: (item: MatchesAnyItem<TItem>) => ReactNode;
 };
 export interface MatchesAnySelectProps<TItem = Record<string, any>> extends SelectProps {
     /** The name of object to be displayed in Popover */

package/es/components/organism/Login/components/LoginSelectPortal/LoginSelectPortal.js

@@ -178,8 +178,9 @@ export const LoginSelectPortal = props => {
                             color: '#595959',
                             fontSize: 11,
                         } }, "No portal matches your keyword"))) : (React.createElement(Scrollbars, { style: {
-                        height: 514,
+                        height: `calc(100vh - 410px)`,
                         width: '100%',
+                        minHeight: `145px`,
                     } },
                     React.createElement(WrapperList, null,
                         React.createElement(Row, { gutter: [20, 20] }, filterListNetworks.map((network) => (React.createElement(Col, { span: 12 },

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

@@ -75,6 +75,10 @@ export const StyledForm = styled(Form) `
   input {
     height: ${(props) => (props.isMobile ? ' 44px' : '36px')};
     font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+
+    &::placeholder {
+      font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+    }
   }
 
   input:-webkit-autofill,
@@ -87,11 +91,19 @@ export const StyledForm = styled(Form) `
 
   .antsomi-input-password-icon {
     font-size: ${(props) => (props.isMobile ? ' 24px' : '14px')};
+
+    &:hover {
+      cursor: pointer;
+    }
   }
 
   .antsomi-input-affix-wrapper {
     padding: 0 10px !important;
     font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+
+    &::placeholder {
+      font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+    }
   }
 
   .antsomi-form-item-explain-error {
@@ -101,6 +113,10 @@ export const StyledForm = styled(Form) `
 export const StyleInput = styled(Input) `
   height: ${(props) => props.isMobile ? ' 44px !important' : '36px !important'};
   font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+
+  &::placeholder {
+    font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+  }
 `;
 export const StyleButton = styled(Button) `
   height: ${(props) => props.isMobile ? ' 44px !important' : '40px !important'};

package/es/tests/MatchesAnySelect.js

@@ -1,10 +1,23 @@
 // Libraries
 import React, { useMemo, useState } from 'react';
-import { MatchesAnySelect, Tooltip, Typography } from '../components';
+import { MatchesAnySelect, Typography } from '../components';
 import { EXTRA_VALUE_SAMPLE_DATA } from '../components/molecules/MatchAnySelect/constants';
-import { WarningIcon } from '../components/icons';
 import { recursiveSearchItems } from '../utils';
 export const MatchesAnySelectTest = () => {
+    const getError = (status) => {
+        let error = '';
+        switch (status) {
+            case 3:
+                error = 'This segment is archived';
+                break;
+            case 4:
+                error = 'This segment does not exist';
+                break;
+            default:
+                break;
+        }
+        return error;
+    };
     const [state, setState] = useState({
         selectedItems: [],
         items: EXTRA_VALUE_SAMPLE_DATA.map(item => {
@@ -16,6 +29,7 @@ export const MatchesAnySelectTest = () => {
                 rowCount: item.rowCount,
                 subTitle: (_a = item.id) === null || _a === void 0 ? void 0 : _a.toString(),
                 status: item.status,
+                error: getError(item.status),
             });
         }),
         searchValue: '',
@@ -50,21 +64,6 @@ export const MatchesAnySelectTest = () => {
                 var _a;
                 return (React.createElement(Typography.Link, { href: item.key.toString() }, (_a = item.title) === null || _a === void 0 ? void 0 : _a.toString()));
             },
-            status(item) {
-                let tooltip = '';
-                switch (item.status) {
-                    case 3:
-                        tooltip = 'This segment is archived';
-                        break;
-                    case 4:
-                        tooltip = 'This segment does not exist';
-                        break;
-                    default:
-                        break;
-                }
-                return (!!tooltip && (React.createElement(Tooltip, { title: tooltip },
-                    React.createElement(WarningIcon, { size: 16 }))));
-            },
         }, 
         /** Support for handle search outside  */
         onChangeSearch: searchValue => {

package/package.json

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