@capillarytech/blaze-ui 0.1.6-alpha.37 → 0.1.6-alpha.38

package/CapUnifiedSelect/CapUnifiedSelect.js

@@ -11,6 +11,10 @@ import { InfoCircleOutlined, SearchOutlined, WarningFilled, DownOutlined } from
 import withStyles from '../utils/withStyles';
 import { SelectWrapper, HeaderWrapper, selectStyles } from './styles';
 
+const StyledTreeSelect = styled(TreeSelect)`
+  ${selectStyles}
+`;
+
 const CapUnifiedSelect = ({
   type,
   options = [],
@@ -35,13 +39,11 @@ const CapUnifiedSelect = ({
   onCancel,
   ...rest
 }) => {
-  const StyledTreeSelect = styled(TreeSelect)`
-    ${selectStyles}
-  `;
 
   const [searchText, setSearchText] = useState('');
   const [tempValue, setTempValue] = useState(value);
   const [allSelected, setAllSelected] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
 
   useEffect(() => {
     setTempValue(value);
@@ -100,9 +102,17 @@ const CapUnifiedSelect = ({
   const leafValues = flattenLeafValues(filteredTree);
 
   const handleSelectAll = () => {
+    console.log('Select All clicked');
     const availableValues = leafValues;
-    setTempValue(allSelected ? [] : availableValues);
-    setAllSelected(!allSelected);
+    if (allSelected) {
+      // If currently all selected, then unselect all
+      setTempValue([]);
+      setAllSelected(false);
+    } else {
+      // Otherwise select all available options
+      setTempValue(availableValues);
+      setAllSelected(true);
+    }
   };
 
   useEffect(() => {
@@ -112,20 +122,27 @@ const CapUnifiedSelect = ({
   }, [tempValue, leafValues, isMulti]);
 
   const handleConfirm = () => {
-    if (onConfirm) onConfirm(tempValue);
-    else onChange(tempValue);
-    setSearchText('');
+    console.log('Confirm clicked');
+    if (onChange) onChange(tempValue);
+    setDropdownOpen(false);
   };
 
   const handleCancel = () => {
-    if (onCancel) onCancel();
+    console.log('Cancel clicked');
     setTempValue(value);
-    setSearchText('');
+    setDropdownOpen(false);
   };
 
   const handleTempChange = newValue => {
     setTempValue(newValue);
   };
+  
+  const handleDropdownVisibilityChange = open => {
+    if (!open) {
+      setTempValue(value);
+    }
+    setDropdownOpen(open);
+  };
 
   const suffix = isMulti && Array.isArray(value) && value?.length > 1 ? (
     <>
@@ -164,7 +181,11 @@ const CapUnifiedSelect = ({
 
   const renderDropdown = () => {
     const currentItems = filteredTree;
-    const selectedCount = Array.isArray(tempValue) ? tempValue.length : (tempValue ? 1 : 0);
+    const selectedCount = Array.isArray(tempValue) 
+      ? isTree 
+        ? tempValue.filter(val => leafValues.includes(val)).length 
+        : tempValue.length 
+      : (tempValue ? 1 : 0);
 
     const renderCustomDropdown = menu => {
       if (!customPopupRender) return menu;
@@ -180,7 +201,7 @@ const CapUnifiedSelect = ({
                 value={searchText}
                 onChange={e => setSearchText(e.target.value)}
                 onKeyDown={e => e.stopPropagation()}
-                />
+              />
             </div>
             )}
           {isMulti && showUpload && (
@@ -204,7 +225,7 @@ const CapUnifiedSelect = ({
           )}
           {isMulti && currentItems.length > 0 && (
             <div style={{ padding: '8px 12px', cursor: 'pointer', display: 'flex', alignItems: 'center', borderBottom: '1px solid #f0f0f0' }} onClick={e => { e.stopPropagation(); handleSelectAll(); }}>
-              <input type="checkbox" checked={allSelected} readOnly style={{ cursor: 'pointer' }} onClick={e => e.stopPropagation()} />
+                              <input type="checkbox" checked={allSelected} readOnly style={{ cursor: 'pointer' }} onClick={e => e.stopPropagation()} />
               <label style={{ marginLeft: 8, cursor: 'pointer' }}>Select all</label>
             </div>
           )}
@@ -247,6 +268,8 @@ const CapUnifiedSelect = ({
           virtual
           disabled={disabled}
           filterTreeNode={false}
+          open={dropdownOpen}
+          onOpenChange={handleDropdownVisibilityChange}
           {...treeSelectVirtualizationProps}
           popupRender={renderCustomDropdown}
         />

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/blaze-ui",
   "author": "Capillary Technologies",
-  "version": "0.1.6-alpha.37",
+  "version": "0.1.6-alpha.38",
   "description": "Capillary UI component library with Ant Design v5",
   "main": "./index.js",
   "sideEffects": [