@capillarytech/blaze-ui 0.1.6-alpha.56 → 0.1.6-alpha.58

package/CapUnifiedSelect/CapUnifiedSelect.js

@@ -7,7 +7,7 @@ import styled from 'styled-components';
 import * as styledVars from '../styled/variables';
 import { CapLabel, CapTooltipWithInfo, CapRow, CapIcon } from '../';
 import withStyles from '../utils/withStyles';
-import { SelectWrapper, HeaderWrapper, selectStyles } from './styles';
+import { HeaderWrapper, selectStyles } from './styles';
 
 const StyledTreeSelect = styled(TreeSelect)`
   ${selectStyles}
@@ -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]);
 
@@ -476,7 +473,7 @@ const CapUnifiedSelect = ({
           type={type}
           treeData={filteredTree}
           value={customPopupRender ? tempValue : value}
-          onChange={onChange}
+          onChange={customPopupRender ? handleTempChange : onChange}
           placeholder={placeholder}
           showSearch={false}
           maxTagCount={0}

package/CapUnifiedSelect/styles.js

@@ -18,6 +18,21 @@ export const selectStyles = css`
     &.disabled {
       cursor: not-allowed;
     }
+    .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-selector .ant-select-selection-placeholder{
+      pointer-events: unset;
+    }
     .ant-select-prefix {
       font-size: 14px;
       font-weight: 400;
@@ -76,16 +91,12 @@ export const selectStyles = css`
     .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;
     }
@@ -124,7 +135,7 @@ export const selectStyles = css`
         padding-left: 3px;
       }
       .ant-select-tree-indent {
-        margin-left: 15px;
+        margin-left: 12px;
       }
       .ant-select-tree-switcher:not(
           .ant-select-tree-switcher-noop
@@ -143,12 +154,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;
@@ -196,6 +201,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;
@@ -212,15 +223,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;
@@ -332,6 +336,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.56",
+  "version": "0.1.6-alpha.58",
   "description": "Capillary UI component library with Ant Design v5",
   "main": "./index.js",
   "sideEffects": [