@capillarytech/blaze-ui 0.1.6-alpha.40 → 0.1.6-alpha.41

package/CapUnifiedSelect/CapUnifiedSelect.js

@@ -1,9 +1,10 @@
 // Enhanced CapUnifiedSelect supporting 4 scenarios with advanced features in a single TreeSelect
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo, useCallback, memo } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { TreeSelect, Tooltip, Input, Button } from 'antd-v5';
 import styled from 'styled-components';
+import * as styledVars from '../styled/variables';
 import uploadIcon from '../assets/upload.svg';
 
 import { InfoCircleOutlined, SearchOutlined, WarningFilled, DownOutlined } from '@ant-design/icons';
@@ -55,14 +56,14 @@ const CapUnifiedSelect = ({
     listItemHeight: 32,
   };
 
-  const NoResult = ({ noResultText, className }) => (
+  const NoResult = memo(({ noResultText, className }) => (
     <div className={classnames(className, "cap-unified-select-no-result")}>
       <WarningFilled className="cap-unified-select-no-result-icon" />
       <div className="cap-unified-select-no-result-text">{noResultText}</div>
     </div>
-  );
+  ));
 
-  const getFilteredTreeData = (data, search) => {
+  const getFilteredTreeData = useCallback((data, search) => {
     if (!search) return data;
 
     const filterNode = node => {
@@ -73,7 +74,6 @@ const CapUnifiedSelect = ({
         const keyText = String(node.key || '').toLowerCase();
         return keyText.includes(search.toLowerCase());
       } else {
-        // Default case, fall back to label
         const labelText = node.label?.toLowerCase() || '';
         return labelText.includes(search.toLowerCase());
       }
@@ -89,69 +89,70 @@ const CapUnifiedSelect = ({
       }).filter(Boolean);
 
     return loop(data);
-  };
+  }, [searchBasedOn]);
 
-  const flattenLeafValues = nodes =>
-    nodes?.flatMap(node => node.children ? flattenLeafValues(node.children) : [node.value]) || [];
+  const flattenLeafValues = useCallback(nodes =>
+    nodes?.flatMap(node => node.children ? flattenLeafValues(node.children) : [node.value]) || [], []);
 
-  const isMulti = type === 'multiSelect' || type === 'multiTreeSelect';
-  const isTree = type === 'treeSelect' || type === 'multiTreeSelect';
+  const isMulti = useMemo(() => type === 'multiSelect' || type === 'multiTreeSelect', [type]);
+  const isTree = useMemo(() => type === 'treeSelect' || type === 'multiTreeSelect', [type]);
   
-  const dataSource = isTree ? options : options.map(opt => ({ title: opt.label, value: opt.value, key: opt.key || opt.value }));
+  const dataSource = useMemo(() => {
+    return isTree ? options : options.map(opt => ({ title: opt.label, value: opt.value, key: opt.key || opt.value }));
+  }, [isTree, options]);
 
-  const filteredTree = getFilteredTreeData(dataSource, searchText);
-  const leafValues = flattenLeafValues(filteredTree);
+  const filteredTree = useMemo(() => getFilteredTreeData(dataSource, searchText), [dataSource, searchText]);
+  const leafValues = useMemo(() => flattenLeafValues(filteredTree), [filteredTree]);
 
-  const handleSelectAll = () => {
+  const handleSelectAll = useCallback(() => {
     const availableValues = leafValues;
     if (allSelected) {
-      // If currently all selected, then unselect all
       setTempValue([]);
       setAllSelected(false);
     } else {
-      // Otherwise select all available options
       setTempValue(availableValues);
       setAllSelected(true);
     }
-  };
+  }, [allSelected, leafValues]);
 
   useEffect(() => {
     if (isMulti && Array.isArray(tempValue)) {
-      setAllSelected(tempValue.length > 0 && tempValue.length === leafValues.length);
+      const allItemsSelected = tempValue.length > 0 && leafValues.length > 0 && tempValue.length === leafValues.length;
+      setAllSelected(allItemsSelected);
     }
   }, [tempValue, leafValues, isMulti]);
 
-  const handleConfirm = () => {
-    console.log('Confirm clicked');
+  const handleConfirm = useCallback(() => {
     if (onChange) onChange(tempValue);
-  };
+  }, [onChange, tempValue]);
 
-  const handleCancel = () => {
-    console.log('Cancel clicked');
+  const handleCancel = useCallback(() => {
     setTempValue(value);
-  };
+  }, [value]);
 
-  const handleTempChange = newValue => {
+  const handleTempChange = useCallback(newValue => {
     setTempValue(newValue);
-  };
+  }, []);
 
-  const suffix = isMulti && Array.isArray(value) && value?.length > 1 ? (
-    <>
-      <span>+{value.length - 1} more <DownOutlined /></span>
-    </>
-  ) : (
-    <DownOutlined />
-  );
+  const suffix = useMemo(() => {
+    return isMulti && Array.isArray(value) && value?.length > 1 ? (
+      <>
+        <span>+{value.length - 1} more <DownOutlined /></span>
+      </>
+    ) : (
+      <DownOutlined />
+    );
+  }, [isMulti, value]);
 
-  const prefix = () => {
+  const prefix = useMemo(() => {
     if (isMulti && Array.isArray(value) && value?.length > 0) {
       const selectedLabels = options.filter(opt => value.includes(opt.value)).map(opt => opt.label);
       return selectedLabels[0];
     }
     return null;
-  };
+  }, [isMulti, value, options]);
 
-  const renderHeader = () => {
+  const renderHeader = useCallback(() => {
     if (!headerLabel && !tooltip) return null;
     return (
       <>
@@ -168,7 +169,7 @@ const CapUnifiedSelect = ({
       </div>
       </>
     );
-  };
+  }, [headerLabel, tooltip, bylineText, disabled]);
 
   const renderDropdown = () => {
     const currentItems = filteredTree;
@@ -184,9 +185,9 @@ const CapUnifiedSelect = ({
       return (
         <div className={classnames(popupClassName, `${type}-popup-container`)}>
           {showSearch && (
-            <div style={{ borderBottom: '1px solid #f0f0f0' }}>
+            <div className={classnames("cap-unified-select-search-container")}>
               <Input
-                prefix={<SearchOutlined style={{ color: '#B3BAC5' }} />}
+                prefix={<SearchOutlined style={{ color: styledVars.CAP_G06 }} />}
                 placeholder="Search"
                 variant="borderless"
                 value={searchText}
@@ -196,40 +197,33 @@ const CapUnifiedSelect = ({
             </div>
             )}
           {isMulti && showUpload && (
-            <div style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', borderBottom: '1px solid #f0f0f0' , height: '36px'}}>
+            <div className={classnames("cap-unified-select-upload-container")}>
              <Button
               type="link"
-              icon={<img src={uploadIcon} alt="upload" style={{ width: "16px", height: "20px" }} />}
+              icon={<img src={uploadIcon} alt="upload" />}
               onClick={() => {}}
-              style={{
-                color: '#2466EA', // AntD primary blue
-                display: 'flex',
-                alignItems: 'center',
-                fontSize: '14px',
-                fontWeight: '400',
-                lineHeight: '20px',
-              }}
+              className={classnames("cap-unified-select-upload-button")}
             >
               Upload
             </Button>
             </div>
           )}
           {isMulti && currentItems.length > 0 && (
-            <div style={{ padding: '8px 12px', cursor: 'pointer', display: 'flex', alignItems: 'center', borderBottom: '1px solid #f0f0f0' }} onClick={e => { e.stopPropagation(); handleSelectAll(); }}>
-                              <input type="checkbox" checked={allSelected} readOnly style={{ cursor: 'pointer' }} onClick={e => e.stopPropagation()} />
-              <label style={{ marginLeft: 8, cursor: 'pointer' }}>Select all</label>
+            <div className={classnames("cap-unified-select-select-all-container")} onClick={e => { e.stopPropagation(); handleSelectAll(); }}>
+                <input type="checkbox" checked={allSelected} className={classnames("cap-unified-select-select-all-checkbox")} onClick={e => e.stopPropagation()} />
+              <label className={classnames("cap-unified-select-select-all-label")}>Select all</label>
             </div>
           )}
 
           {currentItems.length === 0 ? <NoResult noResultText={noResultText} className={classnames(className, "cap-unified-select-no-result")}/> : menu}
 
           {currentItems.length > 0 && isMulti && (
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 12px', borderTop: '1px solid #f0f0f0' }}>
+            <div className={classnames("cap-unified-select-confirm-container")}>
               <div>
-                <Button type="primary" size="small" style={{ marginRight: 8 }} onClick={e => { e.stopPropagation(); handleConfirm(); }}>Confirm</Button>
+                <Button type="primary" size="small" className={classnames("cap-unified-select-confirm-button")} onClick={e => { e.stopPropagation(); handleConfirm(); }}>Confirm</Button>
                 <Button type="text" size="small" onClick={e => { e.stopPropagation(); handleCancel(); }}>Cancel</Button>
               </div>
-              {selectedCount > 0 && <span style={{ color: '#8c8c8c', fontSize: '14px' }}>{selectedCount} selected</span>}
+              {selectedCount > 0 && <span className={classnames("cap-unified-select-selected-count")}>{selectedCount} selected</span>}
             </div>
           )}
         </div>
@@ -245,9 +239,10 @@ const CapUnifiedSelect = ({
           value={customPopupRender ? tempValue : value}
           onChange={customPopupRender ? handleTempChange : onChange}
           placeholder={placeholder}
+          showSearch={false}
           maxTagCount={0}
           maxTagPlaceholder={() => null}
-          prefix={isMulti && value.length > 0 && prefix()}
+          prefix={isMulti && value.length > 0 && prefix}
           suffixIcon={suffix}
           className={classnames(`cap-unified-tree-select ${className || ''}`)}
           style={style}
@@ -262,7 +257,7 @@ const CapUnifiedSelect = ({
           {...treeSelectVirtualizationProps}
           popupRender={renderCustomDropdown}
         />
-        {isError && <div style={{ color: '#E83135' }} className="cap-unified-select-status">{errorMessage}</div>}
+        {isError && <div className={classnames("cap-unified-select-status")}>{errorMessage}</div>}
       </>
     );
   };
@@ -300,12 +295,18 @@ CapUnifiedSelect.propTypes = {
 
 CapUnifiedSelect.defaultProps = {
   type: 'select',
+  options: [],
+  placeholder: 'Select an option',
   allowClear: false,
-  customPopupRender: false,
+  customPopupRender: true,
   showSearch: true,
   searchBasedOn: 'label',
   className: '',
   popupClassName: '',
+  disabled: false,
+  showUpload: false,
+  isError: false,
+  noResultText: 'No results found'
 };
 
 export default withStyles(CapUnifiedSelect, selectStyles);

package/CapUnifiedSelect/styles.js

@@ -95,10 +95,33 @@ export const StyledInfoIcon = styled.span`
 
 export const selectStyles = css`
   &.cap-unified-select-container {
+    .ant-tree-select-dropdown{
+      padding: 0px !important;
+    }
     .cap-unified-tree-select{
-      height: 32px !important;
+      height: 40px !important;
       width: 340px !important;
     }
+    .cap-unified-select-upload-container{
+      cursor: pointer !important;
+      display: flex !important;
+      align-items: center !important;
+      border-bottom: 1px solid #f0f0f0 !important;
+      height: 40px !important;
+    }
+    .cap-unified-select-select-all-container{
+      padding: 8px 12px !important;
+      cursor: pointer !important;
+      display: flex !important;
+      align-items: center !important;
+      border-bottom: 1px solid #f0f0f0 !important;
+      height: 40px !important;
+    }
+    .ant-select-dropdown{
+      margin-top: -5px !important;
+      border-radius: 4px !important;
+      box-shadow: 0px 4px 8px -2px #091E4240, 0px 0px 1px 0px #091E424F !important;
+    }
     .ant-select-prefix{
       font-size: 14px !important;
       font-weight: 400 !important;
@@ -115,7 +138,7 @@ export const selectStyles = css`
     .cap-unified-select-header-tooltip{
       width: 16px !important;
       height: 16px !important;
-      color: #B3BAC5 !important;
+      color: ${styledVars.CAP_G06} !important;
     }
     .cap-unified-select-header-byline-text{
       font-family: ${styledVars.FONT_FAMILY} !important;
@@ -135,6 +158,10 @@ export const selectStyles = css`
     .ant-tree-select-dropdown .treeSelect-popup-container .ant-select-tree .ant-select-tree-treenode{
       margin: 0px !important;
     }
+    .ant-tree-select-dropdown .ant-select-tree .ant-select-tree-treenode{
+      line-height: 40px !important;
+      margin-bottom: 0px !important;
+    }
     .cap-unified-tree-select .multiSelect-popup-container .ant-tree-select-dropdown .ant-select-tree .ant-select-tree-treenode{
       margin-left: 10px !important;
     }
@@ -158,312 +185,43 @@ export const selectStyles = css`
     .cap-unified-select-no-result-text{
       font-weight: 500;
     }
-  }
-  &.cap-unified-select {
-    width: 100%;
-    font-family: ${styledVars.FONT_FAMILY};
-
-    .ant-select-selector {
-      border-radius: ${styledVars.RADIUS_04};
-      transition: ${styledVars.TRANSITION_ALL};
-      padding: 0 12px;
-      min-height: 32px;
-      display: flex;
-      align-items: center;
-      
-      &:hover {
-        border-color: ${styledVars.CAP_G11};
-      }
-    }
-
-    /* Right slot content styles */
-    .cap-unified-select-right-slot {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin-left: 8px;
-    }
-
-    &.ant-select-focused {
-      .ant-select-selector {
-        border-color: ${styledVars.CAP_G01} !important;
-        box-shadow: none !important;
-      }
-    }
-
-    /* Error state */
-    &.ant-select-status-error {
-      .ant-select-selector {
-        border-color: ${styledVars.CAP_RED};
-      }
-    }
-
-    /* Disabled state */
-    &.ant-select-disabled {
-      .ant-select-selector {
-        background-color: ${styledVars.CAP_G08};
-        cursor: not-allowed;
-      }
-    }
-
-    /* Dropdown styles */
-    .ant-select-dropdown, 
-    &.ant-select-dropdown,
-    &.ant-select-dropdown-placement-bottomLeft {
-      padding: 0;
-      border-radius: 12px !important;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-      overflow: hidden;
-
-      /* Option base style - no background */
-      .ant-select-item-option {
-        padding: 10px 16px;
-        font-size: 14px;
-        color: #1c2530;
-        font-weight: 500;
-        background-color: transparent !important;
-
-        /* Hover state only */
-        &:not(.ant-select-item-option-disabled):hover {
-          background-color: #fffbe6 !important;
-          border-radius: 4px;
-          color: #1c2530 !important;
-        }
-        
-        /* Ensure unselected hover has proper background even after removal */
-        &:hover:not(.ant-select-item-option-disabled):not(.ant-select-item-option-selected) {
-          background-color: #fffbe6 !important;
-          color: #1c2530 !important;
-          border-radius: 4px;
-        }
-
-        /* Selected state */
-        &-selected:not(.ant-select-item-option-disabled) {
-          background-color: #e9f0fe !important;
-          color: #1c2530 !important;
-          font-weight: 500;
-        }
-
-        /* Remove active state background unless hovered */
-        &-active:not(:hover):not(.ant-select-item-option-disabled) {
-          background-color: transparent !important;
-        }
-      }
-
-      /* Search input styles */
-      .ant-select-dropdown-search,
-      .ant-select-search {
-        padding: 8px 12px;
-        border-bottom: 1px solid #f0f0f0;
-        
-        input {
-          border-radius: ${styledVars.RADIUS_04};
-          transition: ${styledVars.TRANSITION_ALL};
-          
-          &:focus {
-            border-color: ${styledVars.CAP_G01};
-            box-shadow: none;
-          }
-        }
-      }
-      
-      /* Scrollbar */
-      .rc-virtual-list-scrollbar-thumb {
-        background-color: #dcdcdc;
-        border-radius: 4px;
-      }
-
-      /* Divider */
-      .ant-divider-horizontal {
-        margin: 0;
-      }
-      
-      /* No result UI */
-      .no-result {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 200px;
-        color: #8c8c8c;
-        font-size: 14px;
-      }
-      
-      /* Dropdown search inside custom popup */
-      .dropdown-search {
-        padding: 8px;
-        border-bottom: 1px solid #f0f0f0;
-      }
-      
-      /* Select all checkbox */
-      .select-all-checkbox {
-        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;
-        }
-      }
-      
-      /* Footer buttons */
-      .dropdown-footer {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 8px;
-        border-top: 1px solid #f0f0f0;
-      }
-      
-      /* Selected counter */
-      .selected-count {
-        color: #8c8c8c;
-        font-size: 12px;
-      }
-
-      /* Unchecked border color */
-      .ant-checkbox-inner {
-        border-color: #42b040; /* Your desired border color */
-      }
-
-      /* When checked - change background and border */
-      .ant-checkbox-checked .ant-checkbox-inner {
-        background-color: #42b040; /* Fill color when checked */
-        border-color: #42b040;
-      }
-
-      /* Checkmark color */
-      .ant-checkbox-checked .ant-checkbox-inner::after {
-        border-color: #42b040; /* The checkmark tick color */
-      }
+    .ant-tree-select:hover .ant-select-selector {
+      border-color: #7A869A !important;
     }
-
-    /* Multiple selection styles */
-    &.ant-select-multiple {
-      .ant-select-selection-item {
-        background-color: #e9f0fe !important;
-        border: none;
-        border-radius: ${styledVars.RADIUS_04};
-        color: #1c2530;
-        font-weight: 500;
-        margin: 2px 4px 2px 0;
-        padding: 0 8px;
-        height: 24px;
-        line-height: 22px;
-
-        &-remove {
-          color: ${styledVars.CAP_PRIMARY.base};
-          
-          &:hover {
-            color: ${styledVars.CAP_PRIMARY.hover};
-          }
-        }
-      }
-
-      .ant-select-selection-overflow {
-        flex-wrap: wrap;
-        gap: 4px;
-      }
+    .ant-tree-select-focused .ant-select-selector,
+    .ant-tree-select-open .ant-select-selector {
+      border-color: #7A869A !important;
+      box-shadow: none !important;
+      outline: none !important; /* remove blue outline */
     }
-
-    /* Tree select styles */
-    .ant-select-tree {
-      padding: 4px 0;
-
-      .ant-select-tree-node-content-wrapper {
-        padding: 4px 8px;
-        border-radius: ${styledVars.RADIUS_04};
-        background-color: transparent !important;
-        transition: background 0.3s;
-
-        &:hover {
-          background-color: #fffbe6 !important;
-          color: #1c2530 !important;
-          border-radius: 4px;
-        }
-
-        &.ant-select-tree-node-selected {
-          color: #1c2530;
-          font-weight: 500;
-        }
-      }
-
-      .ant-select-tree-switcher {
-        width: 24px;
-        height: 24px;
-        line-height: 24px;
-      }
-
-      .ant-select-tree-checkbox {
-        margin: 4px 8px 4px 0;
-      }
-      
-      .ant-select-tree-treenode {
-        padding: 2px 0;
-        
-        &:hover {
-          background-color: transparent;
-        }
-      }
-      
-      .ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner {
-        background-color: #42b040;
-        border-color: #42b040;
-      }
-
-      .ant-select-tree-checkbox-checked .ant-select-tree-node-content-wrapper {
-        background-color: #e9f0fe !important;
-        color: #1c2530 !important;
-        font-weight: 500;
-      }
+    .cap-unified-select-search-container{
+      border-bottom: 1px solid #EBECF0 !important;
+      line-height: 40px !important;
     }
-
-    /* Size variations */
-    &.ant-select-lg {
-      .ant-select-selector {
-        height: 40px;
-        padding: 0 16px;
-      }
-
-      .ant-select-selection-item {
-        height: 28px;
-        line-height: 26px;
-      }
+    .cap-unified-select-upload-button{
+      color: ${styledVars.CAP_BLUE01} !important;
+      display: flex !important;
+      align-items: center !important;
+      font-size: 14px !important;
+      font-weight: 400 !important;
+      line-height: 20px !important;
     }
-
-    &.ant-select-sm {
-      .ant-select-selector {
-        height: 24px;
-        padding: 0 8px;
-      }
-
-      .ant-select-selection-item {
-        height: 20px;
-        line-height: 18px;
-      }
+    .cap-unified-select-confirm-container{
+      display: flex !important;
+      justify-content: space-between !important;
+      align-items: center !important;
+      padding: 8px 12px !important;
+      border-top: 1px solid #f0f0f0 !important;
     }
-
-    /* Loading state */
-    &.ant-select-loading {
-      .ant-select-arrow {
-        .anticon-loading {
-          color: ${styledVars.CAP_PRIMARY.base};
-        }
-      } 
+    .cap-unified-select-confirm-button{
+      margin-right: 8px !important;
     }
-
-    &.cap-unified-tree-select .ant-select-selection-overflow {
-      display: none; /* hides pill wrapper */
+    .cap-unified-select-selected-count{
+      color: ${styledVars.CAP_G05} !important;
+      font-size: 14px !important;
     }
-
-    &.cap-unified-tree-select .suffix-counter {
-      color: #1c2530;
-      font-weight: 500;
-      margin-right: 12px; /* optional, adjust spacing */
+    .cap-unified-select-status{
+      color: #E83135 !important;
     }
   }
 `; 

package/package.json

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