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

package/CapUnifiedSelect/CapUnifiedSelect.js

@@ -151,7 +151,7 @@ const CapUnifiedSelect = ({
   showSearch = true,
   searchBasedOn = 'label',
   onConfirm,
-  onCancel,
+  clearText,
   noResultCustomText = 'No results found',
   noResultCustomIcon = 'warning',
   ...rest
@@ -220,11 +220,12 @@ const CapUnifiedSelect = ({
     onConfirm?.(tempValue);
   }, [onChange, onConfirm, tempValue]);
 
-  const handleCancel = useCallback(() => {
-    setTempValue(value);
+  const handleClearAll = useCallback(() => {
+    setTempValue([]);
+    onChange?.([]);
     setDropdownOpen(false);
-    onCancel?.();
-  }, [value, onCancel]);
+  }, [onChange]);
+  
 
   const handleDropdownVisibilityChange = useCallback((open) => {
     if (!open && !customPopupRender) {
@@ -332,9 +333,9 @@ const CapUnifiedSelect = ({
                   type="text"
                   className="cap-unified-select-cancel-button"
                   size="small"
-                  onClick={handleCancel}
+                  onClick={handleClearAll}
                 >
-                  Cancel
+                  Clear all
                 </Button>
                 <CapLabel className="cap-unified-select-selected-count">
                   {selectedLeafCount} selected
@@ -342,6 +343,12 @@ const CapUnifiedSelect = ({
               </div>
             </div>
           )}
+
+          {(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>
+          )}
         </div>
       );
     },
@@ -358,7 +365,7 @@ const CapUnifiedSelect = ({
       type,
       tempValue,
       handleConfirm,
-      handleCancel,
+      handleClearAll,
       popoverClassName,
       className,
       selectedLeafCount,
@@ -430,12 +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,
+  clearText: PropTypes.string,
 };
 
 CapUnifiedSelect.defaultProps = {
@@ -444,6 +451,7 @@ CapUnifiedSelect.defaultProps = {
   searchBasedOn: 'label',
   noResultCustomText: 'No results found',
   noResultCustomIcon: 'warning',
+  clearText: 'Clear',
   options: [],
   allowClear: false,
   customPopupRender: 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.61",
+  "version": "0.1.6-alpha.62",
   "description": "Capillary UI component library with Ant Design v5",
   "main": "./index.js",
   "sideEffects": [