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

package/CapUnifiedSelect/CapUnifiedSelect.js

@@ -23,6 +23,7 @@ const CapUnifiedSelect = ({
   style,
   isError = false,
   errorMessage,
+  containerClassName,
   popoverClassName,
   allowClear = false,
   headerLabel,
@@ -76,9 +77,9 @@ const CapUnifiedSelect = ({
 
       const filterNode = (node) => {
         if (!node) return false;
-        
+
         let textToSearch = '';
-        
+
         if (searchBasedOn === 'value') {
           textToSearch = String(node.value || '').toLowerCase();
         } else if (searchBasedOn === 'key') {
@@ -86,21 +87,22 @@ const CapUnifiedSelect = ({
         } 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) 
-              : [];
-              
+
+            const children =
+              item.children && item.children.length > 0
+                ? loop(item.children)
+                : [];
+
             if (filterNode(item) || children.length > 0) {
               return { ...item, children };
             }
@@ -108,7 +110,7 @@ const CapUnifiedSelect = ({
           })
           .filter(Boolean);
       };
-      
+
       return loop(data);
     },
     [searchBasedOn],
@@ -119,18 +121,18 @@ const CapUnifiedSelect = ({
       leafValues: [],
       parentChildMap: {},
       nodeMap: {},
-      selectedCount: 0
+      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
+            (child) => child.value,
           );
           traverse(item.children);
         } else {
@@ -139,27 +141,31 @@ const CapUnifiedSelect = ({
       });
     };
     traverse(nodes);
-    
-    if (selectedValues && Array.isArray(selectedValues) && selectedValues.length > 0) {
+
+    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;
   }, []);
 
@@ -175,7 +181,7 @@ const CapUnifiedSelect = ({
   const dataSource = useMemo(() => {
     // Skip transformation if options is empty or undefined
     if (!options || options.length === 0) return [];
-    
+
     // Only transform if not a tree select
     return isTree
       ? options
@@ -186,15 +192,12 @@ const CapUnifiedSelect = ({
         }));
   }, [isTree, options]);
 
-  const filteredTree = useMemo(
-    () => {
-      // Skip filtering if search text is empty
-      if (!searchText) return dataSource;
-      
-      return getFilteredTreeData(dataSource, searchText);
-    },
-    [dataSource, searchText, getFilteredTreeData],
-  );
+  const filteredTree = useMemo(() => {
+    // Skip filtering if search text is empty
+    if (!searchText) return dataSource;
+
+    return getFilteredTreeData(dataSource, searchText);
+  }, [dataSource, searchText, getFilteredTreeData]);
 
   const handleConfirm = useCallback(() => {
     if (onChange) onChange(tempValue);
@@ -367,7 +370,10 @@ const CapUnifiedSelect = ({
               (() => {
                 const { leafValues } = processTreeData(currentItems);
                 const totalAvailable = leafValues.length;
-                const selectedInScope = processTreeData(currentItems, tempValue).selectedCount;
+                const selectedInScope = processTreeData(
+                  currentItems,
+                  tempValue,
+                ).selectedCount;
 
                 return (
                   <CapRow
@@ -467,11 +473,10 @@ const CapUnifiedSelect = ({
     return (
       <>
         <StyledTreeSelect
-          {...rest}
           type={type}
           treeData={filteredTree}
           value={customPopupRender ? tempValue : value}
-          onChange={customPopupRender ? handleTempChange : onChange}
+          onChange={onChange}
           placeholder={placeholder}
           showSearch={false}
           maxTagCount={0}
@@ -479,9 +484,13 @@ const CapUnifiedSelect = ({
           prefix={tempValue?.length > 0 ? prefix : undefined}
           suffixIcon={suffix}
           className={classnames(
-            `cap-unified-tree-select cap-unified-tree-select-${size}`,
+            containerClassName,
+            `cap-unified-tree-select`,
             className,
           )}
+          classNames={{
+            popup: { root: classnames('custom-popup-container', className) },
+          }}
           style={style}
           status={isError ? 'error' : ''}
           allowClear={allowClear}
@@ -495,6 +504,7 @@ const CapUnifiedSelect = ({
           filterTreeNode={false}
           {...treeSelectVirtualizationProps}
           popupRender={renderCustomDropdown}
+          {...rest}
         />
         {isError && (
           <CapLabel
@@ -531,12 +541,10 @@ const CapUnifiedSelect = ({
   ]);
 
   return (
-    <SelectWrapper
-      className={classnames(className, 'cap-unified-select-container')}
-    >
+    <CapRow className={classnames(className, 'cap-unified-select-container')}>
       {renderHeader()}
       {renderDropdown()}
-    </SelectWrapper>
+    </CapRow>
   );
 };
 

package/CapUnifiedSelect/styles.js

@@ -1,17 +1,6 @@
 import styled, { css } from 'styled-components';
 import * as styledVars from '../styled/variables';
 
-export const SelectWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  width: 100%;
-
-  &.disabled {
-    cursor: not-allowed;
-  }
-`;
-
 export const HeaderWrapper = styled.div`
   display: flex;
   align-items: center;
@@ -23,130 +12,146 @@ export const HeaderWrapper = styled.div`
   }
 `;
 
-export const DropdownFooter = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px;
-  border-top: 1px solid #f0f0f0;
-  
-  .footer-buttons {
+export const selectStyles = css`
+  &.cap-unified-select-container {
     display: flex;
-    align-items: center;
+    flex-direction: column;
     gap: 8px;
-  }
-  
-  .total-count {
-    color: #8c8c8c;
-    font-size: 12px;
-  }
-`;
 
-export const SearchInputWrapper = styled.div`
-  padding: 8px;
-  border-bottom: 1px solid #f0f0f0;
-`;
+    &.disabled {
+      cursor: not-allowed;
+    }
+    text-align: justify;
+    .ant-select-prefix {
+      font-size: 14px;
+      font-weight: 400;
+      color: #091e42;
+      line-height: 20px;
+    }
+    .cap-unified-select-header-label {
+      font-family: ${styledVars.FONT_FAMILY};
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: 0px;
+    }
+    .cap-unified-select-header-byline-text {
+      font-family: ${styledVars.FONT_FAMILY};
+      font-weight: 400;
+      font-size: 12px;
+      margin-top: -5px;
+      letter-spacing: 0px;
+      color: #97a0af;
+    }
+    .ant-input-affix-wrapper .ant-input-prefix {
+      left: 12px;
+    }
+    .cap-tooltip-with-info-icon {
+      margin-top: 2px;
+    }
 
-export const SelectAllCheckbox = styled.div`
-  display: flex;
-  align-items: center;
-  padding: 8px 12px;
-  cursor: pointer;
-  font-weight: 500;
-  border-bottom: 1px solid #f0f0f0;
-  user-select: none;
-  
-  input[type="checkbox"] {
-    cursor: pointer;
+    .cap-unified-tree-select {
+      min-width: 200px;
+    }
   }
-`;
-
-export const NoResultWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 200px;
-  color: #8c8c8c;
-  font-size: 14px;
-`;
-
 
+  .ant-select.ant-select-focused.ant-select-outlined:not(.ant-select-disabled)
+    .ant-select-selector {
+    border-color: #7a869a !important;
+    box-shadow: none;
+    outline: 0;
+  }
 
-export const StyledInfoIcon = styled.span`
-  color: ${styledVars.CAP_G05};
-  font-size: 16px;
-  cursor: help;
-  margin-left: 4px;
-  display: flex;
-  align-items: center;
+  .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;
+  }
 
-  &:hover {
-    color: ${styledVars.CAP_G03};
+  .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;
   }
 
-  &.disabled {
-    cursor: not-allowed;
-    &:hover {
-      color: ${styledVars.CAP_G05};
-    }
+  .cap-unified-select-status {
+    color: #e83135;
   }
-`;
 
-export const selectStyles = css`
-  &.cap-unified-select-container {
-    text-align: justify;
-    .ant-tree-select-dropdown{
-      padding: 0px;
-      .ant-select-tree{
-        .ant-select-tree-node-content-wrapper{
-          background-color: transparent;
-        }
-        .ant-select-tree-node-content-wrapper:hover {
-          background-color: transparent;
-        }
-        .ant-select-tree-treenode{
-          line-height: 40px;
-          margin-bottom: 0px;
-          .ant-select-tree-checkbox .ant-select-tree-checkbox-inner{
-            height: 18px;
-            width: 18px;
-            border: 2px solid #B3BAC5;
-            border-radius: 4px;
-          }
-          &:hover{
-            background-color: #FFFBE6;
-          }
-          &:not(.ant-select-tree-treenode-disabled) .ant-select-tree-node-content-wrapper:hover{
-            background-color: none;
-          }
-        }
-        .ant-select-tree-node-content-wrapper{
-          border-radius: 0px;
-          padding-left: 3px;
-        }
-        .ant-select-tree-indent{
-          margin-left: 11px;
+  /* Common styles for all types */
+  &.custom-popup-container {
+    width: max-content !important;
+
+    .ant-select-tree {
+      .ant-select-tree-node-content-wrapper {
+        background-color: transparent;
+      }
+      .ant-select-tree-node-content-wrapper:hover {
+        background-color: transparent;
+      }
+      .ant-select-tree-treenode {
+        line-height: 40px;
+        margin-bottom: 0px;
+        .ant-select-tree-checkbox .ant-select-tree-checkbox-inner {
+          height: 18px;
+          width: 18px;
+          border: 2px solid #b3bac5;
+          border-radius: 4px;
         }
-        .ant-select-tree-switcher:not(.ant-select-tree-switcher-noop):hover:before{
-          background-color: transparent;
+        &:hover {
+          background-color: #fffbe6;
         }
-        .ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner{
-          background-color: #42B040;
-          border: 2px solid #42B040 !important;
-          &:hover{
-            background-color: #42B040;
-            border: 2px solid #42B040 !important;
-          }
+        &:not(.ant-select-tree-treenode-disabled)
+          .ant-select-tree-node-content-wrapper:hover {
+          background-color: none;
         }
-        .ant-select-tree-switcher .ant-select-tree-switcher-icon{
-          font-size: 12px;
+      }
+      .ant-select-tree-node-content-wrapper {
+        border-radius: 0px;
+        padding-left: 3px;
+      }
+      .ant-select-tree-indent {
+        margin-left: 11px;
+      }
+      .ant-select-tree-switcher:not(
+          .ant-select-tree-switcher-noop
+        ):hover:before {
+        background-color: transparent;
+      }
+      .ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner {
+        background-color: #42b040;
+        border: 2px solid #42b040 !important;
+        &:hover {
+          background-color: #42b040;
+          border: 2px solid #42b040 !important;
         }
+      }
+      .ant-select-tree-switcher .ant-select-tree-switcher-icon {
+        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-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 {
@@ -156,7 +161,7 @@ export const selectStyles = css`
 
     .ant-select-tree-checkbox.ant-select-tree-checkbox-indeterminate
       .ant-select-tree-checkbox-inner::after {
-      content: "";
+      content: '';
       position: absolute;
       top: 50%;
       left: 50%;
@@ -166,23 +171,7 @@ export const selectStyles = css`
       transform: translate(-50%, -50%);
       border-radius: 1px;
     }
-    .cap-unified-tree-select-s{
-      height: 40px;
-      width: 160px;
-    }
-    .cap-unified-tree-select-m{
-      height: 40px;
-      width: 340px;
-    }
-    .cap-unified-tree-select-l{
-      height: 40px;
-      width: 400px;
-    }
-    .cap-unified-tree-select-xl{
-      height: 40px;
-      width: 480px;
-    }
-    .cap-unified-select-upload-container{
+    .cap-unified-select-upload-container {
       cursor: pointer;
       display: flex;
       align-items: center;
@@ -190,24 +179,24 @@ export const selectStyles = css`
       height: 40px;
       padding-left: 16px;
 
-      .cap-unified-select-upload-label{
+      .cap-unified-select-upload-label {
         margin-left: 12px;
-        color: #2466EA;
+        color: #2466ea;
       }
     }
-    .cap-unified-select-select-all-container{
+    .cap-unified-select-select-all-container {
       padding: 9px 15px;
       cursor: pointer;
       display: flex;
       align-items: center;
       border-bottom: 1px solid #f0f0f0;
       height: 40px;
-      .cap-unified-select-select-all-checkbox{
+      .cap-unified-select-select-all-checkbox {
         display: contents !important;
-        .ant-checkbox-inner{
+        .ant-checkbox-inner {
           height: 18px;
           width: 18px;
-          border: 2px solid #B3BAC5;
+          border: 2px solid #b3bac5;
           border-radius: 4px;
         }
       }
@@ -216,7 +205,7 @@ export const selectStyles = css`
         border-color: #42b040 !important;
       }
       .ant-checkbox-indeterminate .ant-checkbox-inner::after {
-        content: "";
+        content: '';
         position: absolute;
         top: 50%;
         left: 50%;
@@ -227,73 +216,21 @@ 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.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: 0px 4px 8px -2px #091E4240, 0px 0px 1px 0px #091E424F;
-      max-height: 360px;
-    }
-    .ant-select-prefix{
-      font-size: 14px;
-      font-weight: 400;
-      color: #091E42;
-      line-height: 20px;
-    }
-    .cap-unified-select-header-label{
-      font-family: ${styledVars.FONT_FAMILY};
-      font-weight: 500;
-      font-size: 14px;
-      line-height: 20px;
-      letter-spacing: 0px;
-    }
-    .cap-unified-select-header-byline-text{
-      font-family: ${styledVars.FONT_FAMILY};
-      font-weight: 400;
-      font-size: 12px;
-      margin-top: -5px;
-      letter-spacing: 0px;
-      color: #97A0AF;
-    }
-    .ant-input-affix-wrapper .ant-input-prefix{
-      left: 12px;
-    }
-    .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;
+    .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;
     }
-
-    .cap-unified-tree-select .select-popup-container .ant-select-tree-switcher-noop,
-    .cap-unified-tree-select .multiSelect-popup-container .ant-select-tree-switcher-noop {
-      display: none;
-    }
-    .cap-unified-tree-select .multiSelect-popup-container .ant-select-tree-treenode{
-      padding-left: 4px;
+    .ant-select-tree-treenode.ant-select-tree-treenode-selected {
+      background-color: #e9f0fe;
+      color: #2466ea;
     }
-    .ant-select-tree-treenode.ant-select-tree-treenode-selected{
-      background-color: #E9F0FE;
-      color: #2466EA;
+    .ant-select-tree-list-holder-inner {
+      width: fit-content !important;
+      min-width: 100%;
     }
-    .cap-unified-select-no-result{
+    .cap-unified-select-no-result {
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -302,31 +239,31 @@ export const selectStyles = css`
       color: #8c8c8c;
       font-size: 14px;
     }
-    .cap-unified-select-no-result-icon{
+    .cap-unified-select-no-result-icon {
       font-size: 36px;
       margin-bottom: 8px;
       color: #bfbfbf;
     }
-    .cap-unified-select-no-result-text{
+    .cap-unified-select-no-result-text {
       font-weight: 500;
     }
     .ant-tree-select:hover .ant-select-selector {
-      border-color: #7A869A;
+      border-color: #7a869a;
     }
     .ant-tree-select-focused .ant-select-selector,
     .ant-tree-select-open .ant-select-selector {
-      border-color: #7A869A;
+      border-color: #7a869a;
       box-shadow: none;
       outline: none;
     }
-    .cap-unified-select-search-container{
-      border-bottom: 1px solid #EBECF0 !important;
+    .cap-unified-select-search-container {
+      border-bottom: 1px solid #ebecf0 !important;
       line-height: 40px !important;
-      .ant-input-affix-wrapper{
+      .ant-input-affix-wrapper {
         padding-left: 8px;
       }
     }
-    .cap-unified-select-upload-button{
+    .cap-unified-select-upload-button {
       border: none;
       padding-left: 15px;
     }
@@ -335,21 +272,21 @@ export const selectStyles = css`
       align-items: center;
       height: 48px;
       padding: 7px;
-      border-top: 1px solid #EBECF0;
+      border-top: 1px solid #ebecf0;
     }
     .cap-unified-select-confirm-button-group {
       display: flex;
       padding-left: 8px;
       align-items: center;
       width: 100%; /* so it can push the label */
-      button{
+      button {
         height: 32px;
         width: 94px;
       }
-      .cap-unified-select-confirm-button{
+      .cap-unified-select-confirm-button {
         background-color: #6ebd6e;
       }
-      .cap-unified-select-cancel-button{
+      .cap-unified-select-cancel-button {
         border: transparent;
         box-shadow: none;
       }
@@ -360,10 +297,7 @@ export const selectStyles = css`
       font-size: 12px;
       font-weight: 400;
       line-height: 16px;
-      color: #5E6C84;
-    }
-    .cap-unified-select-status{
-      color: #E83135;
+      color: #5e6c84;
     }
     .cap-unified-select-search-container {
       .ant-input-affix-wrapper {
@@ -375,12 +309,12 @@ export const selectStyles = css`
       }
 
       .ant-input-affix-wrapper:hover {
-        border-bottom: 1px solid #7A869A !important;
+        border-bottom: 1px solid #7a869a !important;
         box-shadow: none;
       }
 
       .ant-input-affix-wrapper:focus-within {
-        border-bottom: 1px solid #091E42 !important;
+        border-bottom: 1px solid #091e42 !important;
         box-shadow: none;
         outline: none;
       }
@@ -390,8 +324,29 @@ export const selectStyles = css`
         box-shadow: none !important;
       }
     }
-    .cap-tooltip-with-info-icon{
-      margin-top: 2px;
+  }
+
+  &.custom-popup-container {
+    /* Multi Select */
+    .multiSelect-popup-container {
+      .ant-select-tree-list {
+        .ant-select-tree-treenode-leaf {
+          .ant-select-tree-switcher-noop {
+            display: none;
+          }
+        }
+      }
+    }
+
+    /* Single Select */
+    .select-popup-container {
+      .ant-select-tree-list {
+        .ant-select-tree-treenode-leaf {
+          .ant-select-tree-switcher-noop {
+            display: none;
+          }
+        }
+      }
     }
   }
-`; 
+`;

package/package.json

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