@capillarytech/blaze-ui 0.1.6-alpha.55 → 0.1.6-alpha.57

package/CapUnifiedSelect/CapUnifiedSelect.js

@@ -229,15 +229,12 @@ const CapUnifiedSelect = ({
 
   const suffix = useMemo(() => {
     const displayValue = dropdownOpen ? tempValue : value;
-    return isMulti &&
-      Array.isArray(displayValue) &&
-      displayValue?.length > 1 ? (
+    const showMore = isMulti && Array.isArray(displayValue) && displayValue.length > 1;
+    return (
       <>
-        <span>+{displayValue.length - 1} more </span>
-        <CapIcon type={`${dropdownOpen ? 'up' : 'down'}`} size="s" />
+        {showMore && <span>+{displayValue.length - 1} more </span>}
+        <CapIcon className="cap-unified-select-suffix-icon" type={dropdownOpen ? 'up' : 'down'} size="s" />
       </>
-    ) : (
-      <CapIcon type={`${dropdownOpen ? 'up' : 'down'}`} size="s" />
     );
   }, [isMulti, value, tempValue, dropdownOpen]);
 

package/CapUnifiedSelect/styles.js

@@ -14,14 +14,23 @@ export const HeaderWrapper = styled.div`
 
 export const selectStyles = css`
   &.cap-unified-select-container {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-
+    text-align: justify;
     &.disabled {
       cursor: not-allowed;
     }
-    text-align: justify;
+    .cap-unified-select-suffix-icon {
+      color: ${styledVars.CAP_G01};
+    }
+    .ant-select-outlined {
+      &:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer) {
+        &:hover {
+          .ant-select-selector {
+            border-color: #7A869A;
+          }
+        }
+      }
+    }
+
     .ant-select-prefix {
       font-size: 14px;
       font-weight: 400;
@@ -53,46 +62,42 @@ export const selectStyles = css`
     .cap-unified-tree-select {
       min-width: 200px;
     }
-  }
-
-  .ant-select.ant-select-focused.ant-select-outlined:not(.ant-select-disabled)
+    
+    .ant-select.ant-select-focused.ant-select-outlined:not(.ant-select-disabled)
     .ant-select-selector {
-    border-color: #7a869a !important;
-    box-shadow: none;
-    outline: 0;
-  }
-
-  .ant-btn-variant-solid:not(:disabled):not(.ant-btn-disabled):hover {
-    background-color: #42b040;
-  }
-  .ant-select-dropdown {
-    margin-top: -8px !important;
-    border-radius: 4px;
-    box-shadow:
+      border-color: #7a869a !important;
+      box-shadow: none;
+      outline: 0;
+    }
+    
+    .ant-btn-variant-solid:not(:disabled):not(.ant-btn-disabled):hover {
+      background-color: #42b040;
+    }
+    .ant-select-dropdown {
+      margin-top: -8px !important;
+      border-radius: 4px;
+      box-shadow:
       0px 4px 8px -2px #091e4240,
       0px 0px 1px 0px #091e424f;
-    max-height: 360px;
-    overflow: visible;
-  }
-
-  .ant-select-selection-item {
-    background: transparent;
-  }
-  .ant-select-multiple .ant-select-selection-wrap {
-    align-self: center;
-  }
-  .cap-unified-tree-select .ant-select-selector:hover {
-    border: 1px solid #7a869a;
-  }
-  .cap-unified-tree-select .ant-select-selector:focus {
-    border: 1px solid #7a869a;
-  }
-  .cap-unified-tree-select .ant-select-tree-treenode {
-    padding-left: 4px;
-  }
-
-  .cap-unified-select-status {
-    color: #e83135;
+      max-height: 360px;
+      overflow: visible;
+    }
+    
+    .ant-select-selection-item {
+      background: transparent;
+    }
+    .ant-select-multiple .ant-select-selection-wrap {
+      align-self: center;
+    }
+    .cap-unified-tree-select .ant-select-selector:focus {
+      border: 1px solid #7a869a;
+    }
+    .cap-unified-tree-select .ant-select-tree-treenode {
+      padding-left: 4px;
+    }
+    .cap-unified-select-status {
+      color: #e83135;
+    }
   }
 
   /* Common styles for all types */
@@ -128,7 +133,7 @@ export const selectStyles = css`
         padding-left: 3px;
       }
       .ant-select-tree-indent {
-        margin-left: 11px;
+        margin-left: 12px;
       }
       .ant-select-tree-switcher:not(
           .ant-select-tree-switcher-noop
@@ -147,12 +152,6 @@ export const selectStyles = css`
         font-size: 12px;
       }
     }
-    .ant-checkbox-wrapper:not(.ant-checkbox-wrapper-disabled):hover
-      .ant-checkbox-checked:not(.ant-checkbox-disabled)
-      .ant-checkbox-inner {
-      background-color: #42b040;
-      border: 2px solid #42b040 !important;
-    }
     .ant-select-tree-checkbox.ant-select-tree-checkbox-indeterminate
       .ant-select-tree-checkbox-inner {
       background-color: #42b040 !important;
@@ -200,6 +199,12 @@ export const selectStyles = css`
           border-radius: 4px;
         }
       }
+      .ant-checkbox-wrapper:not(.ant-checkbox-wrapper-disabled):hover
+        .ant-checkbox-checked:not(.ant-checkbox-disabled)
+        .ant-checkbox-inner {
+        background-color: #42b040;
+        border: 2px solid #42b040 !important;
+      }
       .ant-checkbox-indeterminate .ant-checkbox-inner {
         background-color: #42b040 !important;
         border-color: #42b040 !important;
@@ -216,15 +221,8 @@ export const selectStyles = css`
         border-radius: 1px;
       }
     }
-    .ant-select-outlined:not(.ant-select-disabled):not(
-        .ant-select-customize-input
-      ):not(.ant-pagination-size-changer):hover
-      .ant-select-selector {
-      border-color: #7a869a !important;
-    }
     .ant-select-tree-treenode.ant-select-tree-treenode-selected {
       background-color: #e9f0fe;
-      color: #2466ea;
     }
     .ant-select-tree-list-holder-inner {
       width: fit-content !important;
@@ -336,6 +334,9 @@ export const selectStyles = css`
           }
         }
       }
+      .ant-select-tree-indent {
+        margin-left: 15px;
+      }
     }
 
     /* Single Select */

package/package.json

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