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

package/CapUnifiedSelect/CapUnifiedSelect.js

@@ -23,6 +23,7 @@ const CapUnifiedSelect = ({
   style,
   isError = false,
   errorMessage,
+  containerClassName,
   popoverClassName,
   allowClear = false,
   headerLabel,
@@ -41,117 +42,196 @@ const CapUnifiedSelect = ({
   noResultCustomIcon = 'warning',
   ...rest
 }) => {
-
   const [searchText, setSearchText] = useState('');
   const [tempValue, setTempValue] = useState(value);
-  const [allSelected, setAllSelected] = useState(false);
   const [dropdownOpen, setDropdownOpen] = useState(false);
 
-
   useEffect(() => {
     setTempValue(value);
   }, [value]);
 
-  const treeSelectVirtualizationProps = useMemo(() => ({
-      listHeight: 256,
+  const treeSelectVirtualizationProps = {
+    listHeight: 256,
     listItemHeight: 32,
-  }), []);
+  };
 
-  const NoResult = memo(({ noResultCustomText, className, showUpload, options }) => (
-    <CapRow 
-      className={classnames(className, "cap-unified-select-no-result")} 
-      align="middle" 
+  const NoResult = ({ noResultCustomText, className, showUpload, options }) => (
+    <CapRow
+      className={classnames(className, 'cap-unified-select-no-result')}
+      align="middle"
       gap={8}
     >
       <CapIcon type={noResultCustomIcon} size="m" />
-      <CapLabel className="cap-unified-select-no-result-text">{showUpload && options?.length === 0 ? noResultCustomText : 'No results found'}</CapLabel>
+      <CapLabel className="cap-unified-select-no-result-text">
+        {showUpload && options?.length === 0
+          ? noResultCustomText
+          : 'No results found'}
+      </CapLabel>
     </CapRow>
-  ));
-
-  const getFilteredTreeData = useCallback((data, search) => {
-    if (!search) return data;
-
-    const filterNode = node => {
-      if (!node) return false;
-      if (searchBasedOn === 'value') {
-        const valueText = String(node?.value || '').toLowerCase();
-        return valueText.includes(search.toLowerCase());
-      } else if (searchBasedOn === 'key') {
-        const keyText = String(node?.key || '').toLowerCase();
-        return keyText.includes(search.toLowerCase());
-      } else {
-        const labelText = node?.label?.toLowerCase() || '';
-        return labelText.includes(search.toLowerCase());
-      }
+  );
+
+  const getFilteredTreeData = useCallback(
+    (data, search) => {
+      if (!search || !data || data.length === 0) return data;
+      const searchLower = search.toLowerCase();
+
+      const filterNode = (node) => {
+        if (!node) return false;
+
+        let textToSearch = '';
+
+        if (searchBasedOn === 'value') {
+          textToSearch = String(node.value || '').toLowerCase();
+        } else if (searchBasedOn === 'key') {
+          textToSearch = String(node.key || '').toLowerCase();
+        } 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)
+                : [];
+
+            if (filterNode(item) || children.length > 0) {
+              return { ...item, children };
+            }
+            return null;
+          })
+          .filter(Boolean);
+      };
+
+      return loop(data);
+    },
+    [searchBasedOn],
+  );
+
+  const processTreeData = useCallback((nodes, selectedValues = null) => {
+    const result = {
+      leafValues: [],
+      parentChildMap: {},
+      nodeMap: {},
+      selectedCount: 0,
     };
 
-    const loop = data =>
-      data.map(item => {
-        const children = item.children ? loop(item.children) : [];
-        if (filterNode(item) || children.length) {
-          return { ...item, children };
+    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,
+          );
+          traverse(item.children);
+        } else {
+          result.leafValues.push(item.value);
         }
-        return null;
-      }).filter(Boolean);
+      });
+    };
+    traverse(nodes);
+
+    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 loop(data);
-  }, [searchBasedOn]);
+    return result;
+  }, []);
 
-  const flattenLeafValues = useCallback(nodes =>
-    nodes?.flatMap(node => node?.children ? flattenLeafValues(node.children) : [node?.value]) || [], []);
+  const isMulti = useMemo(
+    () => type === 'multiSelect' || type === 'multiTreeSelect',
+    [type],
+  );
+  const isTree = useMemo(
+    () => type === 'treeSelect' || type === 'multiTreeSelect',
+    [type],
+  );
 
-  const isMulti = useMemo(() => type === 'multiSelect' || type === 'multiTreeSelect', [type]);
-  const isTree = useMemo(() => type === 'treeSelect' || type === 'multiTreeSelect', [type]);
-  
   const dataSource = useMemo(() => {
-    return isTree ? options : options?.map(opt => ({ title: opt?.label, value: opt?.value, key: opt?.key || opt?.value }));
+    // Skip transformation if options is empty or undefined
+    if (!options || options.length === 0) return [];
+
+    // Only transform if not a tree select
+    return isTree
+      ? options
+      : options.map((opt) => ({
+          title: opt?.label,
+          value: opt?.value,
+          key: opt?.key || opt?.value,
+        }));
   }, [isTree, options]);
 
-  const filteredTree = useMemo(() => getFilteredTreeData(dataSource, searchText), [dataSource, searchText]);
-  const leafValues = useMemo(() => flattenLeafValues(filteredTree), [filteredTree]);
-
-  const handleSelectAll = useCallback(() => {
-    const availableValues = leafValues;
-    if (allSelected) {
-      setTempValue([]);
-      setAllSelected(false);
-    } else {
-      setTempValue(availableValues);
-      setAllSelected(true);
-    }
-  }, [allSelected, leafValues]);
+  const filteredTree = useMemo(() => {
+    // Skip filtering if search text is empty
+    if (!searchText) return dataSource;
 
-  useEffect(() => {
-    if (isMulti && Array.isArray(tempValue)) {
-      const allItemsSelected = tempValue.length > 0 && leafValues.length > 0 && tempValue.length === leafValues.length;
-      setAllSelected(allItemsSelected);
-    }
-  }, [tempValue, leafValues, isMulti]);
+    return getFilteredTreeData(dataSource, searchText);
+  }, [dataSource, searchText, getFilteredTreeData]);
 
   const handleConfirm = useCallback(() => {
     if (onChange) onChange(tempValue);
     setDropdownOpen(false);
-  }, [onChange, tempValue]);
+    if (onConfirm) onConfirm(tempValue);
+  }, [onChange, onConfirm, tempValue]);
 
   const handleCancel = useCallback(() => {
     setTempValue(value);
     setDropdownOpen(false);
-  }, [value]);
+    if (onCancel) onCancel();
+  }, [value, onCancel]);
 
-  const handleTempChange = useCallback(newValue => {
+  const handleTempChange = useCallback((newValue) => {
     setTempValue(newValue);
   }, []);
 
-  const handleDropdownVisibilityChange = useCallback(open => {
-    if (open === false) {
-      setTempValue(value);
-    }
-    setDropdownOpen(open);
-  }, [value]);
+  const handleDropdownVisibilityChange = useCallback(
+    (open) => {
+      if (open === false && !customPopupRender) {
+        if (onChange) onChange(tempValue);
+      } else if (open === false) {
+        setTempValue(value);
+      }
+      setDropdownOpen(open);
+    },
+    [value, onChange, tempValue, customPopupRender],
+  );
 
   const suffix = useMemo(() => {
     const displayValue = dropdownOpen ? tempValue : value;
-    return isMulti && Array.isArray(displayValue) && displayValue?.length > 1 ? (
+    return isMulti &&
+      Array.isArray(displayValue) &&
+      displayValue?.length > 1 ? (
       <>
         <span>+{displayValue.length - 1} more </span>
         <CapIcon type={`${dropdownOpen ? 'up' : 'down'}`} size="s" />
@@ -165,12 +245,15 @@ const CapUnifiedSelect = ({
     if (isMulti) {
       if (Array.isArray(tempValue) && tempValue?.length > 0) {
         const firstSelectedValue = tempValue[0];
-        const firstSelectedOption = options?.find(opt => opt?.value === firstSelectedValue);
+        const firstSelectedOption = options?.find(
+          (opt) => opt?.value === firstSelectedValue,
+        );
         return firstSelectedOption?.label || null;
-      }
-      else if (Array.isArray(value) && value?.length > 0) {
+      } else if (Array.isArray(value) && value?.length > 0) {
         const firstSelectedValue = value[0];
-        const firstSelectedOption = options?.find(opt => opt?.value === firstSelectedValue);
+        const firstSelectedOption = options?.find(
+          (opt) => opt?.value === firstSelectedValue,
+        );
         return firstSelectedOption?.label || null;
       }
     }
@@ -181,115 +264,215 @@ const CapUnifiedSelect = ({
     if (!headerLabel && !tooltip) return null;
     return (
       <>
-      <HeaderWrapper className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header')}>
-        {headerLabel && <CapLabel type="label16" className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header-label')}>{headerLabel}</CapLabel>}
-        {tooltip && (
-          <CapTooltipWithInfo 
-            title={tooltip} 
-            className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header-tooltip')}
-            iconProps={{ disabled }}
-          />
+        <HeaderWrapper
+          className={classnames(
+            disabled ? 'disabled' : '',
+            'cap-unified-select-header',
+          )}
+        >
+          {headerLabel && (
+            <CapLabel
+              type="label16"
+              className={classnames(
+                disabled ? 'disabled' : '',
+                'cap-unified-select-header-label',
+              )}
+            >
+              {headerLabel}
+            </CapLabel>
+          )}
+          {tooltip && (
+            <CapTooltipWithInfo
+              title={tooltip}
+              className={classnames(
+                disabled ? 'disabled' : '',
+                'cap-unified-select-header-tooltip',
+              )}
+              iconProps={{ disabled }}
+            />
+          )}
+        </HeaderWrapper>
+        {bylineText && (
+          <div className="cap-unified-select-header-byline-text">
+            <CapLabel
+              className={classnames(
+                disabled ? 'disabled' : '',
+                'cap-unified-select-header-byline-text',
+              )}
+            >
+              {bylineText}
+            </CapLabel>
+          </div>
         )}
-      </HeaderWrapper>
-      {bylineText &&
-      <div className="cap-unified-select-header-byline-text">
-         <CapLabel className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header-byline-text')}>{bylineText}</CapLabel>
-      </div>
-      }
       </>
     );
   }, [headerLabel, tooltip, bylineText, disabled]);
 
   const renderDropdown = useCallback(() => {
     const currentItems = filteredTree;
-    const selectedCount = Array.isArray(tempValue) 
-      ? isTree 
-        ? tempValue?.filter(val => leafValues?.includes(val))?.length || 0
-        : tempValue?.length || 0 
-      : (tempValue ? 1 : 0);
-
-    const renderCustomDropdown = useCallback(menu => {
-      if (!customPopupRender) return menu;
-
-      return (
-        <div className={classnames(popoverClassName, `${type}-popup-container`)}>
-          {showSearch && (
-            <CapRow className={classnames("cap-unified-select-search-container")} align="middle">
-              <Input
-                prefix={<CapIcon type="search" size="s" style={{ color: styledVars.CAP_G06 }} />}
-                placeholder="Search"
-                variant="borderless"
-                value={searchText}
-                onChange={e => setSearchText(e.target.value)}
-              />
-            </CapRow>
+    const selectedCount = Array.isArray(tempValue)
+      ? isTree
+        ? processTreeData(dataSource, tempValue).selectedCount
+        : tempValue?.length || 0
+      : tempValue
+        ? 1
+        : 0;
+
+    const renderCustomDropdown = useCallback(
+      (menu) => {
+        if (!customPopupRender) return menu;
+
+        return (
+          <div
+            className={classnames(popoverClassName, `${type}-popup-container`)}
+          >
+            {showSearch && (
+              <CapRow
+                className={classnames('cap-unified-select-search-container')}
+                align="middle"
+              >
+                <Input
+                  prefix={
+                    <CapIcon
+                      type="search"
+                      size="s"
+                      style={{ color: styledVars.CAP_G06 }}
+                    />
+                  }
+                  placeholder="Search"
+                  variant="borderless"
+                  value={searchText}
+                  onChange={(e) => setSearchText(e.target.value)}
+                />
+              </CapRow>
             )}
-          {isMulti && showUpload && (
-            <CapRow className={classnames("cap-unified-select-upload-container")} align="middle" onClick={onUpload}>
-             <CapIcon type="upload" size="s" style={{ color: styledVars.CAP_SECONDARY.base }}/>
-             <CapLabel type="label14" className={classnames("cap-unified-select-upload-label")}>Upload</CapLabel>
-            </CapRow>
-          )}
-          {isMulti && currentItems.length > 0 && (() => {
-            const totalAvailable = leafValues.length;
-            const selectedInScope = Array.isArray(tempValue)
-              ? tempValue.filter(val => leafValues.includes(val)).length
-              : 0;
-            return (
+            {isMulti && showUpload && (
               <CapRow
-                className={classnames("cap-unified-select-select-all-container")}
+                className={classnames('cap-unified-select-upload-container')}
                 align="middle"
+                onClick={onUpload}
               >
-                <Checkbox
-                  className={classnames("cap-unified-select-select-all-checkbox")}
-                  checked={totalAvailable > 0 && selectedInScope === totalAvailable}
-                  indeterminate={selectedInScope > 0 && selectedInScope < totalAvailable}
-                  onChange={e => {
-                    setTempValue(e.target.checked ? leafValues : []);
-                  }}
+                <CapIcon
+                  type="upload"
+                  size="s"
+                  style={{ color: styledVars.CAP_SECONDARY.base }}
+                />
+                <CapLabel
+                  type="label14"
+                  className={classnames('cap-unified-select-upload-label')}
                 >
-                  <CapLabel type="label14" className={classnames("cap-unified-select-select-all-label")}>Select all</CapLabel>
-                </Checkbox>
+                  Upload
+                </CapLabel>
               </CapRow>
-            );
-          })()}
-
-          {currentItems.length === 0 ? <NoResult noResultCustomText={noResultCustomText} className={classnames(className, "cap-unified-select-no-result")} showUpload={showUpload} options={options}/> : menu}
-
-          {currentItems.length > 0 && isMulti && (
-           <div className="cap-unified-select-confirm-container">
-           <div className="cap-unified-select-confirm-button-group">
-             <Button
-               type="primary"
-               size="small"
-               className="cap-unified-select-confirm-button"
-               onClick={handleConfirm}
-             >
-               Confirm
-             </Button>
-             <Button
-               type="text"
-               className="cap-unified-select-cancel-button"
-               size="small"
-               onClick={handleCancel}
-             >
-               Cancel
-             </Button>
-            <CapLabel className="cap-unified-select-selected-count">
-              {selectedCount} selected
-            </CapLabel>
-           </div>
-         </div>
-         
-          )}
-        </div>
-      );
-    }, [customPopupRender, popoverClassName, type, showSearch, searchText, isMulti, showUpload, currentItems?.length, allSelected, className, noResultCustomText, onUpload, handleSelectAll, handleConfirm, handleCancel]);
+            )}
+            {isMulti &&
+              currentItems.length > 0 &&
+              (() => {
+                const { leafValues } = processTreeData(currentItems);
+                const totalAvailable = leafValues.length;
+                const selectedInScope = processTreeData(
+                  currentItems,
+                  tempValue,
+                ).selectedCount;
+
+                return (
+                  <CapRow
+                    className={classnames(
+                      'cap-unified-select-select-all-container',
+                    )}
+                    align="middle"
+                  >
+                    <Checkbox
+                      className={classnames(
+                        'cap-unified-select-select-all-checkbox',
+                      )}
+                      checked={
+                        totalAvailable > 0 && selectedInScope === totalAvailable
+                      }
+                      indeterminate={
+                        selectedInScope > 0 && selectedInScope < totalAvailable
+                      }
+                      onChange={(e) => {
+                        setTempValue(e.target.checked ? leafValues : []);
+                      }}
+                    >
+                      <CapLabel
+                        type="label14"
+                        className={classnames(
+                          'cap-unified-select-select-all-label',
+                        )}
+                      >
+                        Select all
+                      </CapLabel>
+                    </Checkbox>
+                  </CapRow>
+                );
+              })()}
+
+            {currentItems.length === 0 ? (
+              <NoResult
+                noResultCustomText={noResultCustomText}
+                className={classnames(
+                  className,
+                  'cap-unified-select-no-result',
+                )}
+                showUpload={showUpload}
+                options={options}
+              />
+            ) : (
+              menu
+            )}
+
+            {currentItems.length > 0 && isMulti && (
+              <div className="cap-unified-select-confirm-container">
+                <div className="cap-unified-select-confirm-button-group">
+                  <Button
+                    type="primary"
+                    size="small"
+                    className="cap-unified-select-confirm-button"
+                    onClick={handleConfirm}
+                  >
+                    Confirm
+                  </Button>
+                  <Button
+                    type="text"
+                    className="cap-unified-select-cancel-button"
+                    size="small"
+                    onClick={handleCancel}
+                  >
+                    Cancel
+                  </Button>
+                  <CapLabel className="cap-unified-select-selected-count">
+                    {selectedCount} selected
+                  </CapLabel>
+                </div>
+              </div>
+            )}
+          </div>
+        );
+      },
+      [
+        customPopupRender,
+        popoverClassName,
+        type,
+        showSearch,
+        searchText,
+        isMulti,
+        showUpload,
+        currentItems,
+        tempValue,
+        className,
+        noResultCustomText,
+        onUpload,
+        handleConfirm,
+        handleCancel,
+        processTreeData,
+      ],
+    );
 
     return (
       <>
         <StyledTreeSelect
-          {...rest}
           type={type}
           treeData={filteredTree}
           value={customPopupRender ? tempValue : value}
@@ -300,7 +483,14 @@ const CapUnifiedSelect = ({
           maxTagPlaceholder={() => null}
           prefix={tempValue?.length > 0 ? prefix : undefined}
           suffixIcon={suffix}
-          className={classnames(`cap-unified-tree-select cap-unified-tree-select-${size}`, className)}
+          className={classnames(
+            containerClassName,
+            `cap-unified-tree-select`,
+            className,
+          )}
+          classNames={{
+            popup: { root: classnames('custom-popup-container', className) },
+          }}
           style={style}
           status={isError ? 'error' : ''}
           allowClear={allowClear}
@@ -314,22 +504,57 @@ const CapUnifiedSelect = ({
           filterTreeNode={false}
           {...treeSelectVirtualizationProps}
           popupRender={renderCustomDropdown}
+          {...rest}
         />
-        {isError && <CapLabel className={classnames("cap-unified-select-status")} style={{ color: 'red' }}>{errorMessage}</CapLabel>}
+        {isError && (
+          <CapLabel
+            className={classnames('cap-unified-select-status')}
+            style={{ color: 'red' }}
+          >
+            {errorMessage}
+          </CapLabel>
+        )}
       </>
     );
-  }, [filteredTree, tempValue, value, prefix, suffix, className, style, isError, errorMessage, allowClear, isMulti, dropdownOpen, customPopupRender, handleTempChange, onChange, disabled, handleDropdownVisibilityChange, treeSelectVirtualizationProps]);
+  }, [
+    filteredTree,
+    tempValue,
+    value,
+    prefix,
+    suffix,
+    className,
+    style,
+    isError,
+    errorMessage,
+    allowClear,
+    isMulti,
+    isTree,
+    dropdownOpen,
+    customPopupRender,
+    handleTempChange,
+    onChange,
+    disabled,
+    handleDropdownVisibilityChange,
+    treeSelectVirtualizationProps,
+    dataSource,
+    processTreeData,
+  ]);
 
   return (
-    <SelectWrapper className={classnames(className, 'cap-unified-select-container')}>
+    <CapRow className={classnames(className, 'cap-unified-select-container')}>
       {renderHeader()}
       {renderDropdown()}
-    </SelectWrapper>
+    </CapRow>
   );
 };
 
 CapUnifiedSelect.propTypes = {
-  type: PropTypes.oneOf(['select', 'multiSelect', 'treeSelect', 'multiTreeSelect']),
+  type: PropTypes.oneOf([
+    'select',
+    'multiSelect',
+    'treeSelect',
+    'multiTreeSelect',
+  ]),
   options: PropTypes.array,
   value: PropTypes.any,
   onChange: PropTypes.func,
@@ -372,7 +597,7 @@ CapUnifiedSelect.defaultProps = {
   onUpload: () => {},
   onChange: () => {},
   onConfirm: () => {},
-  onCancel: () => {}
+  onCancel: () => {},
 };
 
 export default withStyles(CapUnifiedSelect, selectStyles);

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: 368px;
-    }
-    .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.53",
+  "version": "0.1.6-alpha.55",
   "description": "Capillary UI component library with Ant Design v5",
   "main": "./index.js",
   "sideEffects": [