@antscorp/antsomi-ui 1.3.5-beta.910 → 1.3.5-beta.911

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

@@ -52,6 +52,12 @@ export function MatchesAny(props) {
     const { selectedItems, selectedTreeData, isShowLoadMoreEl, expandedKeys, selectedExpandedKeys } = state;
     const { icon: listEmptyIcon = _jsx(LongerIcon, {}), description: listEmptyDescription = (_jsx("div", { dangerouslySetInnerHTML: { __html: t(translations.matchesAnySelect.noData) } })), ...restListEmptyProps } = listEmptyProps || {};
     const { description: selectedListEmptyDescription = t(translations.global.selectItemsFromList).toString(), icon: selectedListEmptyIcon = _jsx(DataIcon, { color: globalToken?.bw5, size: 48 }), ...restSelectedListEmptyProps } = selectedListEmptyProps || {};
+    useDeepCompareEffect(() => {
+        const isOverMaxSelected = maxSelectedItem && selectedItems && selectedItems.length > maxSelectedItem;
+        const isSomeTextTooLong = selectedItems && selectedItems.some(item => item.key?.toString().length > maxLengthEachItem);
+        setMaxItemsError(!!isOverMaxSelected);
+        setItemOverMaxLength(!!isSomeTextTooLong);
+    }, [selectedItems, maxSelectedItem, maxLengthEachItem]);
     // Refs
     const { ref: loadMoreRef } = useIntersectionObserver({
         threshold: 0,
@@ -145,7 +151,6 @@ export function MatchesAny(props) {
      *
      */
     const onRemoveItem = (item) => {
-        // let isMaxItemsError = false;
         setState(prev => {
             const newSelectedItems = prev.selectedItems?.filter(selectedItem => {
                 if (item.children) {
@@ -156,29 +161,18 @@ export function MatchesAny(props) {
                 return selectedItem.key !== item.key;
             });
             const newSelectedTreeData = getSelectedTreeData(items || [], newSelectedItems || [], selectedTreeData || []);
-            // isMaxItemsError =
-            //   (maxSelectedItem && newSelectedItems && newSelectedItems.length > maxSelectedItem) || false;
             return {
                 ...prev,
                 selectedItems: newSelectedItems,
                 selectedTreeData: newSelectedTreeData,
             };
         });
-        // setMaxItemsError(isMaxItemsError);
     };
     const onRemoveAll = () => {
         setState(prev => ({ ...prev, selectedItems: [], selectedTreeData: [] }));
     };
     const onClickApply = () => {
-        const isOverMaxSelected = maxSelectedItem && selectedItems && selectedItems.length > maxSelectedItem;
-        const isSomeTextTooLong = selectedItems && selectedItems.some(item => item.key?.toString().length > maxLengthEachItem);
-        if (isOverMaxSelected) {
-            setMaxItemsError(true);
-        }
-        if (isSomeTextTooLong) {
-            setItemOverMaxLength(true);
-        }
-        if (isOverMaxSelected || isSomeTextTooLong)
+        if (maxItemsError || itemOverMaxLength)
             return;
         onApply(selectedItems || [], selectedTreeData || []);
     };
@@ -188,7 +182,7 @@ export function MatchesAny(props) {
                 onRemoveItem(item);
             }
         });
-        setItemOverMaxLength(false);
+        // setItemOverMaxLength(false);
     };
     const renderItemError = useCallback((item) => {
         if (customItemRenders?.error) {
@@ -216,7 +210,7 @@ export function MatchesAny(props) {
                                     onRemoveItem(item);
                                 }
                             }, children: _jsx(Icon, { type: `icon-ants-${onSelectItem ? 'double-arrow-up' : 'remove-slim'}`, size: 11 }) })] })] }));
-    }, [customItemRenders, renderExtraValues, maxLengthEachItem, renderItemError]);
+    }, [customItemRenders, renderExtraValues, itemOverMaxLength, renderItemError]);
     // Memos
     const { treeData } = useDeepCompareMemo(() => {
         const { results, matchedParents } = recursiveSearchItems({

package/package.json

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