@capillarytech/blaze-ui 0.1.6-alpha.50 → 0.1.6-alpha.52

package/CapUnifiedSelect/CapUnifiedSelect.js

@@ -2,7 +2,7 @@
 import React, { useState, useEffect, useMemo, useCallback, memo } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { TreeSelect, Input, Button } from 'antd-v5';
+import { TreeSelect, Input, Button, Checkbox } from 'antd-v5';
 import styled from 'styled-components';
 import * as styledVars from '../styled/variables';
 import { CapLabel, CapTooltipWithInfo, CapRow, CapIcon } from '../';
@@ -23,7 +23,7 @@ const CapUnifiedSelect = ({
   style,
   isError = false,
   errorMessage,
-  popOverClassName,
+  popoverClassName,
   allowClear = false,
   headerLabel,
   onUpload,
@@ -153,10 +153,11 @@ const CapUnifiedSelect = ({
     const displayValue = dropdownOpen ? tempValue : value;
     return isMulti && Array.isArray(displayValue) && displayValue?.length > 1 ? (
       <>
-        <span>+{displayValue.length - 1} more <CapIcon type="down" size="s" /></span>
+        <span>+{displayValue.length - 1} more </span>
+        <CapIcon type={`${dropdownOpen ? 'up' : 'down'}`} size="s" />
       </>
     ) : (
-      <CapIcon type="down" size="s" />
+      <CapIcon type={`${dropdownOpen ? 'up' : 'down'}`} size="s" />
     );
   }, [isMulti, value, tempValue, dropdownOpen]);
 
@@ -209,7 +210,7 @@ const CapUnifiedSelect = ({
       if (!customPopupRender) return menu;
 
       return (
-        <div className={classnames(popOverClassName, `${type}-popup-container`)}>
+        <div className={classnames(popoverClassName, `${type}-popup-container`)}>
           {showSearch && (
             <CapRow className={classnames("cap-unified-select-search-container")} align="middle">
               <Input
@@ -227,17 +228,30 @@ const CapUnifiedSelect = ({
              <CapLabel type="label14" className={classnames("cap-unified-select-upload-label")}>Upload</CapLabel>
             </CapRow>
           )}
-          {isMulti && currentItems.length > 0 && (
-            <CapRow 
-              className={classnames("cap-unified-select-select-all-container")} 
-              onClick={handleSelectAll}
-              align="middle"
-              gap={7}
-            >
-              <input readOnly type="checkbox" checked={allSelected} className={classnames("cap-unified-select-select-all-checkbox")} onClick={handleSelectAll} />
-              <CapLabel type="label14" className={classnames("cap-unified-select-select-all-label")}>Select all</CapLabel>
-            </CapRow>
-          )}
+          {isMulti && currentItems.length > 0 && (() => {
+            const totalAvailable = leafValues.length;
+            const selectedInScope = Array.isArray(tempValue)
+              ? tempValue.filter(val => leafValues.includes(val)).length
+              : 0;
+            return (
+              <CapRow
+                className={classnames("cap-unified-select-select-all-container")}
+                align="middle"
+                gap={6}
+              >
+                <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}
 
@@ -269,7 +283,7 @@ const CapUnifiedSelect = ({
           )}
         </div>
       );
-    }, [customPopupRender, popOverClassName, type, showSearch, searchText, isMulti, showUpload, currentItems?.length, allSelected, className, noResultCustomText, onUpload, handleSelectAll, handleConfirm, handleCancel]);
+    }, [customPopupRender, popoverClassName, type, showSearch, searchText, isMulti, showUpload, currentItems?.length, allSelected, className, noResultCustomText, onUpload, handleSelectAll, handleConfirm, handleCancel]);
 
     return (
       <>
@@ -278,7 +292,7 @@ const CapUnifiedSelect = ({
           type={type}
           treeData={filteredTree}
           value={customPopupRender ? tempValue : value}
-          onChange={customPopupRender ? handleTempChange : onChange}
+          onChange={onChange}
           placeholder={placeholder}
           showSearch={false}
           maxTagCount={0}

package/CapUnifiedSelect/styles.js

@@ -96,11 +96,75 @@ export const StyledInfoIcon = styled.span`
 export const selectStyles = css`
   &.cap-unified-select-container {
     text-align: justify;
-    .ant-btn-variant-solid:not(:disabled):not(.ant-btn-disabled):hover{
-      background-color: #42b040;
-    }
     .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;
+        }
+        .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-select-tree-checkbox.ant-select-tree-checkbox-indeterminate
+      .ant-select-tree-checkbox-inner {
+      background-color: #42b040 !important;
+      border-color: #42b040 !important;
+    }
+
+    .ant-select-tree-checkbox.ant-select-tree-checkbox-indeterminate
+      .ant-select-tree-checkbox-inner::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 10px;
+      height: 2px;
+      background-color: #fff;
+      transform: translate(-50%, -50%);
+      border-radius: 1px;
     }
     .cap-unified-tree-select-s{
       height: 40px;
@@ -124,7 +188,7 @@ export const selectStyles = css`
       align-items: center;
       border-bottom: 1px solid #f0f0f0;
       height: 40px;
-      padding-left: 15px;
+      padding-left: 16px;
 
       .cap-unified-select-upload-label{
         margin-left: 12px;
@@ -132,15 +196,51 @@ export const selectStyles = css`
       }
     }
     .cap-unified-select-select-all-container{
-      padding: 9px 9px;
+      padding: 9px 15px;
       cursor: pointer;
       display: flex;
       align-items: center;
       border-bottom: 1px solid #f0f0f0;
       height: 40px;
+      .cap-unified-select-select-all-checkbox{
+        display: contents !important;
+        .ant-checkbox-inner{
+          height: 18px;
+          width: 18px;
+          border: 2px solid #B3BAC5;
+          border-radius: 4px;
+        }
+      }
+      .ant-checkbox-indeterminate .ant-checkbox-inner {
+        background-color: #42b040 !important;
+        border-color: #42b040 !important;
+      }
+      .ant-checkbox-indeterminate .ant-checkbox-inner::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 10px;
+        height: 2px;
+        background-color: #fff;
+        transform: translate(-50%, -50%);
+        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: 0 0 0 2px #7a869a23; 
+      outline: 0;
+    }
+
+    .ant-btn-variant-solid:not(:disabled):not(.ant-btn-disabled):hover{
+      background-color: #42b040;
     }
     .ant-select-dropdown{
-      margin-top: -5px;
+      margin-top: -8px !important;
       border-radius: 4px;
       box-shadow: 0px 4px 8px -2px #091E4240, 0px 0px 1px 0px #091E424F;
       max-height: 368px;
@@ -169,17 +269,6 @@ export const selectStyles = css`
     .ant-input-affix-wrapper .ant-input-prefix{
       left: 13px;
     }
-    .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 .ant-select-tree-switcher:not(.ant-select-tree-switcher-noop):hover:before{
-      background-color: transparent;
-    }
     .ant-select-selection-item{
       background: transparent;
     }
@@ -192,38 +281,13 @@ export const selectStyles = css`
     .cap-unified-tree-select .ant-select-selector:focus{
       border: 1px solid #7A869A;
     }
-    .cap-unified-tree-select .cap-unified-select-select-all-checkbox{
-      height: 18px;
-      width: 18px;
-      border-color: #B3BAC5;
-      border-radius: 2px;
-    }
+
     .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: 15px;
-    }
-    .ant-tree-select-dropdown .ant-select-tree .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;
-      }
-      &:hover{
-        background-color: #FFFBE6;
-        border-radius: 4px;
-      }
-      &:not(.ant-select-tree-treenode-disabled) .ant-select-tree-node-content-wrapper:hover{
-        background-color: none;
-      }
-    }
-    .ant-tree-select-dropdown .ant-select-tree .ant-select-tree-node-content-wrapper{
-      border-radius: 0px;
-      padding-left: 12px;
+      padding-left: 4px;
     }
     .ant-select-tree-treenode.ant-select-tree-treenode-selected{
       background-color: #E9F0FE;

package/package.json

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