@capillarytech/blaze-ui 0.1.6-alpha.60 → 0.1.6-alpha.62

package/CapUnifiedSelect/CapUnifiedSelect.js

@@ -1,4 +1,3 @@
-// Enhanced CapUnifiedSelect supporting 4 scenarios with advanced features in a single TreeSelect
 import React, { useState, useEffect, useMemo, useCallback, memo } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
@@ -14,6 +13,121 @@ const StyledTreeSelect = styled(TreeSelect)`
   ${selectStyles}
 `;
 
+const NoResult = memo(({ noResultCustomText, className, showUpload, options, noResultCustomIcon }) => (
+  <CapRow
+    className={classnames(className, 'cap-unified-select-no-result')}
+    align="middle"
+    gap={8}
+  >
+    <CapIcon type={noResultCustomIcon} size="m" />
+    <CapLabel className="cap-unified-select-no-result-text">
+      {showUpload && options?.length === 0
+        ? noResultCustomText
+        : 'No results found'}
+    </CapLabel>
+  </CapRow>
+));
+
+const SelectAllCheckbox = memo(({ currentItems, tempValue, setTempValue, processTreeData }) => {
+  const { leafValues } = processTreeData(currentItems);
+  const totalAvailable = leafValues.length;
+  const leafSet = new Set(leafValues);
+  const selectedInScope = Array.isArray(tempValue)
+    ? tempValue.filter((v) => leafSet.has(v)).length
+    : 0;
+
+  const allChecked = totalAvailable > 0 && selectedInScope === totalAvailable;
+  const indeterminate = selectedInScope > 0 && selectedInScope < totalAvailable;
+
+  const handleChange = (e) => {
+    if (e.target.checked) {
+      const merged = new Set(Array.isArray(tempValue) ? tempValue : []);
+      leafValues.forEach((v) => merged.add(v));
+      setTempValue(Array.from(merged));
+    } else {
+      const toRemove = new Set(leafValues);
+      const next = (Array.isArray(tempValue) ? tempValue : []).filter(
+        (v) => !toRemove.has(v)
+      );
+      setTempValue(next);
+    }
+  };
+
+  return (
+    <CapRow className="cap-unified-select-select-all-container" align="middle">
+      <Checkbox
+        className="cap-unified-select-select-all-checkbox"
+        checked={allChecked}
+        indeterminate={indeterminate}
+        onChange={handleChange}
+      >
+        <CapLabel type="label14" className="cap-unified-select-select-all-label">Select all</CapLabel>
+      </Checkbox>
+    </CapRow>
+  );
+});
+
+const buildTreeMaps = (nodes) => {
+  const result = {
+    leafValues: [],
+    parentChildMap: {},
+    nodeMap: {},
+  };
+  if (!nodes) return result;
+
+  const traverse = (items) => {
+    items.forEach((item) => {
+      result.nodeMap[item.value] = item;
+      if (item.children && item.children.length > 0) {
+        result.parentChildMap[item.value] = item.children.map(child => child.value);
+        traverse(item.children);
+      } else {
+        result.leafValues.push(item.value);
+      }
+    });
+  };
+  traverse(nodes);
+  return result;
+};
+
+const countSelectedLeaves = (treeMaps, selectedValues) => {
+  if (!Array.isArray(selectedValues) || !selectedValues.length) return 0;
+  const expandedSet = new Set(selectedValues);
+  const processNode = (value) => {
+    const children = treeMaps.parentChildMap[value];
+    if (!children) return;
+    children.forEach(childValue => {
+      expandedSet.add(childValue);
+      processNode(childValue);
+    });
+  };
+  selectedValues.forEach(processNode);
+  return treeMaps.leafValues.reduce((count, leaf) => expandedSet.has(leaf) ? count + 1 : count, 0);
+};
+
+const filterTreeData = (data, search, searchBasedOn) => {
+  if (!data?.length || !search) return data;
+  const searchLower = search.toLowerCase();
+  const nodeMatchesSearch = (node) => {
+    const target = searchBasedOn === 'value'
+      ? String(node.value ?? '')
+      : searchBasedOn === 'key'
+        ? String(node.key ?? '')
+        : String(node.label ?? node.title ?? '');
+    return target.toLowerCase().includes(searchLower);
+  };
+  const loop = (items) =>
+    items.reduce((acc, item) => {
+      if (!item) return acc;
+      const children = item.children?.length ? loop(item.children) : [];
+      if (nodeMatchesSearch(item) || children.length) {
+        acc.push({ ...item, children });
+      }
+      return acc;
+    }, []);
+  return loop(data);
+};
+
 const CapUnifiedSelect = ({
   type,
   options = [],
@@ -37,8 +151,7 @@ const CapUnifiedSelect = ({
   showSearch = true,
   searchBasedOn = 'label',
   onConfirm,
-  onCancel,
-  size = 'm',
+  clearText,
   noResultCustomText = 'No results found',
   noResultCustomIcon = 'warning',
   ...rest
@@ -48,142 +161,17 @@ const CapUnifiedSelect = ({
   const [dropdownOpen, setDropdownOpen] = useState(false);
 
   useEffect(() => {
-    setTempValue(value);
+    const isEqual = Array.isArray(value) && Array.isArray(tempValue)
+      ? value.length === tempValue.length && value.every((v) => tempValue.includes(v))
+      : value === tempValue;
+    if (!isEqual) setTempValue(value);
   }, [value]);
 
-  const treeSelectVirtualizationProps = {
-    listHeight: 256,
-    listItemHeight: 32,
-  };
-
-  const NoResult = ({ noResultCustomText, className, showUpload, options }) => (
-    <CapRow
-      className={classnames(className, 'cap-unified-select-no-result')}
-      align="middle"
-      gap={8}
-    >
-      <CapIcon type={noResultCustomIcon} size="m" />
-      <CapLabel className="cap-unified-select-no-result-text">
-        {showUpload && options?.length === 0
-          ? noResultCustomText
-          : 'No results found'}
-      </CapLabel>
-    </CapRow>
-  );
-
-  const getFilteredTreeData = useCallback(
-    (data, search) => {
-      if (!search || !data || data.length === 0) return data;
-      const searchLower = search.toLowerCase();
-
-      const filterNode = (node) => {
-        if (!node) return false;
-
-        let textToSearch = '';
-
-        if (searchBasedOn === 'value') {
-          textToSearch = String(node.value || '').toLowerCase();
-        } else if (searchBasedOn === 'key') {
-          textToSearch = String(node.key || '').toLowerCase();
-        } else {
-          textToSearch = String(node.label || node.title || '').toLowerCase();
-        }
-
-        return textToSearch.includes(searchLower);
-      };
-
-      const loop = (data) => {
-        if (!data) return [];
-
-        return data
-          .map((item) => {
-            if (!item) return null;
-
-            const children =
-              item.children && item.children.length > 0
-                ? loop(item.children)
-                : [];
-
-            if (filterNode(item) || children.length > 0) {
-              return { ...item, children };
-            }
-            return null;
-          })
-          .filter(Boolean);
-      };
-
-      return loop(data);
-    },
-    [searchBasedOn],
-  );
-
-  const processTreeData = useCallback((nodes, selectedValues = null) => {
-    const result = {
-      leafValues: [],
-      parentChildMap: {},
-      nodeMap: {},
-      selectedCount: 0,
-    };
-
-    if (!nodes) return result;
-
-    const traverse = (items) => {
-      items.forEach((item) => {
-        result.nodeMap[item.value] = item;
-
-        if (item.children && item.children.length > 0) {
-          result.parentChildMap[item.value] = item.children.map(
-            (child) => child.value,
-          );
-          traverse(item.children);
-        } else {
-          result.leafValues.push(item.value);
-        }
-      });
-    };
-    traverse(nodes);
-
-    if (
-      selectedValues &&
-      Array.isArray(selectedValues) &&
-      selectedValues.length > 0
-    ) {
-      const expandedSet = new Set(selectedValues);
-
-      const processNode = (value) => {
-        const children = result.parentChildMap[value];
-        if (!children) return;
-
-        children.forEach((childValue) => {
-          expandedSet.add(childValue);
-          processNode(childValue);
-        });
-      };
-
-      selectedValues.forEach(processNode);
-
-      result.leafValues.forEach((value) => {
-        if (expandedSet.has(value)) result.selectedCount++;
-      });
-    }
-
-    return result;
-  }, []);
-
-  const isMulti = useMemo(
-    () => type === 'multiSelect' || type === 'multiTreeSelect',
-    [type],
-  );
-  const isTree = useMemo(
-    () => type === 'treeSelect' || type === 'multiTreeSelect',
-    [type],
-  );
+  const isMulti = useMemo(() => type === 'multiSelect' || type === 'multiTreeSelect', [type]);
+  const isTree = useMemo(() => type === 'treeSelect' || type === 'multiTreeSelect', [type]);
 
   const dataSource = useMemo(() => {
-    // Skip transformation if options is empty or undefined
-    if (!options || options.length === 0) return [];
-
-    // Only transform if not a tree select
+    if (!options?.length) return [];
     return isTree
       ? options
       : options.map((opt) => ({
@@ -193,88 +181,70 @@ const CapUnifiedSelect = ({
         }));
   }, [isTree, options]);
 
-  const filteredTree = useMemo(() => {
-    // Skip filtering if search text is empty
-    if (!searchText) return dataSource;
+  const filteredTree = useMemo(
+    () => filterTreeData(dataSource, searchText, searchBasedOn),
+    [dataSource, searchText, searchBasedOn]
+  );
 
-    return getFilteredTreeData(dataSource, searchText);
-  }, [dataSource, searchText, getFilteredTreeData]);
+  const treeMaps = useMemo(() => buildTreeMaps(options), [options]);
+  const selectedLeafCount = useMemo(() => countSelectedLeaves(treeMaps, tempValue), [treeMaps, tempValue]);
 
-  const handleConfirm = useCallback(() => {
-    if (onChange) onChange(tempValue);
-    setDropdownOpen(false);
-    if (onConfirm) onConfirm(tempValue);
-  }, [onChange, onConfirm, tempValue]);
-
-  const handleCancel = useCallback(() => {
-    setTempValue(value);
-    setDropdownOpen(false);
-    if (onCancel) onCancel();
-  }, [value, onCancel]);
-
-  const handleTempChange = useCallback((newValue) => {
-    setTempValue(newValue);
-  }, []);
-
-  const handleDropdownVisibilityChange = useCallback(
-    (open) => {
-      if (open === false && !customPopupRender) {
-        if (onChange) onChange(tempValue);
-      } else if (open === false) {
-        setTempValue(value);
-      }
-      setDropdownOpen(open);
-    },
-    [value, onChange, tempValue, customPopupRender],
-  );
+  const displayValue = dropdownOpen ? tempValue : value;
 
   const suffix = useMemo(() => {
-    const displayValue = dropdownOpen ? tempValue : value;
-    const showMore = isMulti && Array.isArray(displayValue) && displayValue.length > 1;
+    const count = Array.isArray(displayValue) ? displayValue.length : (displayValue ? 1 : 0);
     return (
       <>
-        {showMore && <span>+{displayValue.length - 1} more </span>}
-        <CapIcon className="cap-unified-select-suffix-icon" type={dropdownOpen ? 'up' : 'down'} size="s" />
+        {isMulti && count > 1 && <span>+{count - 1} more </span>}
+        <CapIcon
+          className="cap-unified-select-suffix-icon"
+          type={dropdownOpen ? 'up' : 'down'}
+          size="s"
+        />
       </>
     );
-  }, [isMulti, value, tempValue, dropdownOpen]);
+  }, [isMulti, displayValue, dropdownOpen]);
 
   const prefix = useMemo(() => {
-    if (isMulti) {
-      if (Array.isArray(tempValue) && tempValue?.length > 0) {
-        const firstSelectedValue = tempValue[0];
-        const firstSelectedOption = options?.find(
-          (opt) => opt?.value === firstSelectedValue,
-        );
-        return firstSelectedOption?.label || null;
-      } else if (Array.isArray(value) && value?.length > 0) {
-        const firstSelectedValue = value[0];
-        const firstSelectedOption = options?.find(
-          (opt) => opt?.value === firstSelectedValue,
-        );
-        return firstSelectedOption?.label || null;
-      }
+    if (isMulti && Array.isArray(displayValue) && displayValue.length > 0) {
+      const firstLeafValue = displayValue.find(val => treeMaps.leafValues.includes(val));
+      return treeMaps.nodeMap[firstLeafValue]?.label || treeMaps.nodeMap[firstLeafValue]?.title || null;
     }
     return null;
-  }, [isMulti, value, tempValue, options]);
+  }, [isMulti, displayValue, treeMaps]);
+
+  const handleConfirm = useCallback(() => {
+    onChange?.(tempValue);
+    setDropdownOpen(false);
+    setSearchText('');
+    onConfirm?.(tempValue);
+  }, [onChange, onConfirm, tempValue]);
+
+  const handleClearAll = useCallback(() => {
+    setTempValue([]);
+    onChange?.([]);
+    setDropdownOpen(false);
+  }, [onChange]);
+  
+
+  const handleDropdownVisibilityChange = useCallback((open) => {
+    if (!open && !customPopupRender) {
+      onChange?.(tempValue);
+    } else if (!open) {
+      setTempValue(value);
+    }
+    setDropdownOpen(open);
+  }, [customPopupRender, value, onChange, tempValue]);
 
-  const renderHeader = useCallback(() => {
+  const renderHeader = useMemo(() => {
     if (!headerLabel && !tooltip) return null;
     return (
       <>
-        <HeaderWrapper
-          className={classnames(
-            disabled ? 'disabled' : '',
-            'cap-unified-select-header',
-          )}
-        >
+        <HeaderWrapper className={classnames(disabled && 'disabled', 'cap-unified-select-header')}>
           {headerLabel && (
             <CapLabel
               type="label16"
-              className={classnames(
-                disabled ? 'disabled' : '',
-                'cap-unified-select-header-label',
-              )}
+              className={classnames(disabled && 'disabled', 'cap-unified-select-header-label')}
             >
               {headerLabel}
             </CapLabel>
@@ -282,10 +252,7 @@ const CapUnifiedSelect = ({
           {tooltip && (
             <CapTooltipWithInfo
               title={tooltip}
-              className={classnames(
-                disabled ? 'disabled' : '',
-                'cap-unified-select-header-tooltip',
-              )}
+              className={classnames(disabled && 'disabled', 'cap-unified-select-header-tooltip')}
               iconProps={{ disabled }}
             />
           )}
@@ -293,10 +260,7 @@ const CapUnifiedSelect = ({
         {bylineText && (
           <div className="cap-unified-select-header-byline-text">
             <CapLabel
-              className={classnames(
-                disabled ? 'disabled' : '',
-                'cap-unified-select-header-byline-text',
-              )}
+              className={classnames(disabled && 'disabled', 'cap-unified-select-header-byline-text')}
             >
               {bylineText}
             </CapLabel>
@@ -306,253 +270,159 @@ const CapUnifiedSelect = ({
     );
   }, [headerLabel, tooltip, bylineText, disabled]);
 
-  const renderDropdown = useCallback(() => {
-    const currentItems = filteredTree;
-    const selectedCount = Array.isArray(tempValue)
-      ? isTree
-        ? processTreeData(dataSource, tempValue).selectedCount
-        : tempValue?.length || 0
-      : tempValue
-        ? 1
-        : 0;
-
-    const renderCustomDropdown = useCallback(
-      (menu) => {
-        if (!customPopupRender) return menu;
-
-        return (
-          <div
-            className={classnames(popoverClassName, `${type}-popup-container`)}
-          >
-            {showSearch && (
-              <CapRow
-                className={classnames('cap-unified-select-search-container')}
-                align="middle"
-              >
-                <Input
-                  prefix={
-                    <CapIcon
-                      type="search"
-                      size="s"
-                      style={{ color: styledVars.CAP_G06 }}
-                    />
-                  }
-                  placeholder="Search"
-                  variant="borderless"
-                  value={searchText}
-                  onChange={(e) => setSearchText(e.target.value)}
-                />
-              </CapRow>
-            )}
-            {isMulti && showUpload && (
-              <CapRow
-                className={classnames('cap-unified-select-upload-container')}
-                align="middle"
-                onClick={onUpload}
-              >
-                <CapIcon
-                  type="upload"
-                  size="s"
-                  style={{ color: styledVars.CAP_SECONDARY.base }}
-                />
-                <CapLabel
-                  type="label14"
-                  className={classnames('cap-unified-select-upload-label')}
+  const renderCustomDropdown = useCallback(
+    (menu) => {
+      if (!customPopupRender) return menu;
+      const currentItems = filteredTree;
+
+      return (
+        <div className={classnames(popoverClassName, `${type}-popup-container`)}>
+          {showSearch && (
+            <CapRow className="cap-unified-select-search-container" align="middle">
+              <Input
+                prefix={<CapIcon type="search" size="s" style={{ color: styledVars.CAP_G06 }} />}
+                placeholder="Search"
+                variant="borderless"
+                value={searchText}
+                onChange={(e) => setSearchText(e.target.value)}
+                allowClear
+              />
+            </CapRow>
+          )}
+
+          {isMulti && showUpload && (
+            <CapRow className="cap-unified-select-upload-container" align="middle" onClick={onUpload}>
+              <CapIcon type="upload" size="s" style={{ color: styledVars.CAP_SECONDARY.base }} />
+              <CapLabel type="label14" className="cap-unified-select-upload-label">Upload</CapLabel>
+            </CapRow>
+          )}
+
+          {isMulti && currentItems.length > 0 && (
+            <SelectAllCheckbox
+              currentItems={currentItems}
+              tempValue={tempValue}
+              setTempValue={setTempValue}
+              processTreeData={buildTreeMaps}
+            />
+          )}
+
+          {currentItems.length === 0 ? (
+            <NoResult
+              noResultCustomText={noResultCustomText}
+              className={className}
+              showUpload={showUpload}
+              options={options}
+              noResultCustomIcon={noResultCustomIcon}
+            />
+          ) : (
+            menu
+          )}
+
+          {currentItems.length > 0 && isMulti && (
+            <div className="cap-unified-select-confirm-container">
+              <div className="cap-unified-select-confirm-button-group">
+                <Button
+                  type="primary"
+                  size="small"
+                  className="cap-unified-select-confirm-button"
+                  onClick={handleConfirm}
                 >
-                  Upload
+                  Confirm
+                </Button>
+                <Button
+                  type="text"
+                  className="cap-unified-select-cancel-button"
+                  size="small"
+                  onClick={handleClearAll}
+                >
+                  Clear all
+                </Button>
+                <CapLabel className="cap-unified-select-selected-count">
+                  {selectedLeafCount} selected
                 </CapLabel>
-              </CapRow>
-            )}
-            {isMulti &&
-              currentItems.length > 0 &&
-              (() => {
-                const { leafValues } = processTreeData(currentItems);
-                const totalAvailable = leafValues.length;
-                const selectedInScope = processTreeData(
-                  currentItems,
-                  tempValue,
-                ).selectedCount;
-
-                return (
-                  <CapRow
-                    className={classnames(
-                      'cap-unified-select-select-all-container',
-                    )}
-                    align="middle"
-                  >
-                    <Checkbox
-                      className={classnames(
-                        'cap-unified-select-select-all-checkbox',
-                      )}
-                      checked={
-                        totalAvailable > 0 && selectedInScope === totalAvailable
-                      }
-                      indeterminate={
-                        selectedInScope > 0 && selectedInScope < totalAvailable
-                      }
-                      onChange={(e) => {
-                        setTempValue(e.target.checked ? leafValues : []);
-                      }}
-                    >
-                      <CapLabel
-                        type="label14"
-                        className={classnames(
-                          'cap-unified-select-select-all-label',
-                        )}
-                      >
-                        Select all
-                      </CapLabel>
-                    </Checkbox>
-                  </CapRow>
-                );
-              })()}
-
-            {currentItems.length === 0 ? (
-              <NoResult
-                noResultCustomText={noResultCustomText}
-                className={classnames(
-                  className,
-                  'cap-unified-select-no-result',
-                )}
-                showUpload={showUpload}
-                options={options}
-              />
-            ) : (
-              menu
-            )}
-
-            {currentItems.length > 0 && isMulti && (
-              <div className="cap-unified-select-confirm-container">
-                <div className="cap-unified-select-confirm-button-group">
-                  <Button
-                    type="primary"
-                    size="small"
-                    className="cap-unified-select-confirm-button"
-                    onClick={handleConfirm}
-                  >
-                    Confirm
-                  </Button>
-                  <Button
-                    type="text"
-                    className="cap-unified-select-cancel-button"
-                    size="small"
-                    onClick={handleCancel}
-                  >
-                    Cancel
-                  </Button>
-                  <CapLabel className="cap-unified-select-selected-count">
-                    {selectedCount} selected
-                  </CapLabel>
-                </div>
               </div>
-            )}
-          </div>
-        );
-      },
-      [
-        customPopupRender,
-        popoverClassName,
-        type,
-        showSearch,
-        searchText,
-        isMulti,
-        showUpload,
-        currentItems,
-        tempValue,
-        className,
-        noResultCustomText,
-        onUpload,
-        handleConfirm,
-        handleCancel,
-        processTreeData,
-      ],
-    );
+            </div>
+          )}
 
-    return (
-      <>
-        <StyledTreeSelect
-          type={type}
-          treeData={filteredTree}
-          value={customPopupRender ? tempValue : value}
-          onChange={onChange}
-          placeholder={placeholder}
-          showSearch={false}
-          maxTagCount={0}
-          maxTagPlaceholder={() => null}
-          prefix={tempValue?.length > 0 ? prefix : undefined}
-          suffixIcon={suffix}
-          className={classnames(
-            containerClassName,
-            `cap-unified-tree-select`,
-            className,
+          {(type === 'select' || type === 'treeSelect') && (
+            <CapRow className="cap-unified-select-tree-clear-container">
+              <CapLabel className="cap-unified-select-tree-clear-label" onClick={handleClearAll}>{clearText}</CapLabel>
+            </CapRow>
           )}
-          classNames={{
-            popup: { root: classnames('custom-popup-container', className) },
-          }}
-          style={style}
-          status={isError ? 'error' : ''}
-          allowClear={allowClear}
-          multiple={isMulti}
-          treeCheckable={isMulti}
-          open={dropdownOpen}
-          onOpenChange={handleDropdownVisibilityChange}
-          showCheckedStrategy={TreeSelect.SHOW_PARENT}
-          virtual
-          disabled={disabled}
-          filterTreeNode={false}
-          {...treeSelectVirtualizationProps}
-          popupRender={renderCustomDropdown}
-          {...rest}
-        />
-        {isError && (
-          <CapLabel
-            className={classnames('cap-unified-select-status')}
-            style={{ color: 'red' }}
-          >
-            {errorMessage}
-          </CapLabel>
-        )}
-      </>
-    );
-  }, [
-    filteredTree,
-    tempValue,
-    value,
-    prefix,
-    suffix,
-    className,
-    style,
-    isError,
-    errorMessage,
-    allowClear,
-    isMulti,
-    isTree,
-    dropdownOpen,
-    customPopupRender,
-    handleTempChange,
-    onChange,
-    disabled,
-    handleDropdownVisibilityChange,
-    treeSelectVirtualizationProps,
-    dataSource,
-    processTreeData,
-  ]);
+        </div>
+      );
+    },
+    [
+      customPopupRender,
+      filteredTree,
+      searchText,
+      isMulti,
+      showUpload,
+      onUpload,
+      noResultCustomText,
+      noResultCustomIcon,
+      options,
+      type,
+      tempValue,
+      handleConfirm,
+      handleClearAll,
+      popoverClassName,
+      className,
+      selectedLeafCount,
+    ]
+  );
+
+  const combinedClassName = useMemo(
+    () => classnames(containerClassName, 'cap-unified-tree-select', className),
+    [containerClassName, className]
+  );
 
   return (
     <CapRow className={classnames(className, 'cap-unified-select-container')}>
-      {renderHeader()}
-      {renderDropdown()}
+      {renderHeader}
+      <StyledTreeSelect
+        type={type}
+        treeData={filteredTree}
+        value={customPopupRender ? tempValue : value}
+        onChange={isMulti ? setTempValue : onChange}
+        placeholder={placeholder}
+        showSearch={false}
+        maxTagCount={0}
+        maxTagPlaceholder={() => null}
+        prefix={prefix || undefined}
+        suffixIcon={suffix}
+        className={combinedClassName}
+        classNames={{
+          popup: { root: classnames('custom-popup-container', className) },
+        }}
+        style={style}
+        status={isError ? 'error' : ''}
+        allowClear={allowClear}
+        multiple={isMulti}
+        treeCheckable={isMulti}
+        treeCheckStrictly={false}
+        showCheckedStrategy={TreeSelect.SHOW_CHILD}
+        open={dropdownOpen}
+        onOpenChange={handleDropdownVisibilityChange}
+        virtual
+        disabled={disabled}
+        filterTreeNode={false}
+        listHeight={256}
+        listItemHeight={32}
+        popupRender={renderCustomDropdown}
+        {...rest}
+      />
+      {isError && (
+        <CapLabel className="cap-unified-select-status" style={{ color: 'red' }}>
+          {errorMessage}
+        </CapLabel>
+      )}
     </CapRow>
   );
 };
 
 CapUnifiedSelect.propTypes = {
-  type: PropTypes.oneOf([
-    'select',
-    'multiSelect',
-    'treeSelect',
-    'multiTreeSelect',
-  ]),
+  type: PropTypes.oneOf(['select', 'multiSelect', 'treeSelect', 'multiTreeSelect']),
   options: PropTypes.array,
   value: PropTypes.any,
   onChange: PropTypes.func,
@@ -567,13 +437,12 @@ CapUnifiedSelect.propTypes = {
   showSearch: PropTypes.bool,
   searchBasedOn: PropTypes.oneOf(['label', 'value', 'key']),
   onConfirm: PropTypes.func,
-  onCancel: PropTypes.func,
   isError: PropTypes.bool,
   errorMessage: PropTypes.string,
   popupClassName: PropTypes.string,
   showUpload: PropTypes.bool,
   onUpload: PropTypes.func,
-  size: PropTypes.oneOf(['s', 'm', 'l', 'xl']),
+  clearText: PropTypes.string,
 };
 
 CapUnifiedSelect.defaultProps = {
@@ -582,8 +451,8 @@ CapUnifiedSelect.defaultProps = {
   searchBasedOn: 'label',
   noResultCustomText: 'No results found',
   noResultCustomIcon: 'warning',
+  clearText: 'Clear',
   options: [],
-  size: 'm',
   allowClear: false,
   customPopupRender: true,
   showSearch: true,

package/CapUnifiedSelect/styles.js

@@ -278,17 +278,15 @@ export const selectStyles = css`
       display: flex;
       padding-left: 8px;
       align-items: center;
-      width: 100%; /* so it can push the label */
-      button {
-        height: 32px;
-        width: 94px;
-      }
       .cap-unified-select-confirm-button {
         background-color: #6ebd6e;
+        height: 32px;
+        width: 94px;
       }
       .cap-unified-select-cancel-button {
         border: transparent;
         box-shadow: none;
+        width: 80px;
       }
     }
     .cap-unified-select-selected-count {
@@ -324,6 +322,22 @@ export const selectStyles = css`
         box-shadow: none !important;
       }
     }
+    .cap-unified-select-tree-clear-container{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 40px;
+      border-top: 1px solid #EBECF0;
+      cursor: pointer;
+      color: #091E42;
+      &:hover{
+        background-color: #EBECF0;
+      }
+      .cap-unified-select-tree-clear-label{
+        font-size: 14px;
+        font-weight: 400;
+      }
+    }
   }
 
   &.custom-popup-container {

package/package.json

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