@capillarytech/blaze-ui 0.1.6-alpha.38 → 0.1.6-alpha.39

package/CapUnifiedSelect/CapUnifiedSelect.js

@@ -37,13 +37,14 @@ const CapUnifiedSelect = ({
   searchBasedOn = 'label',
   onConfirm,
   onCancel,
+  noResultText = 'No results found',
   ...rest
 }) => {
 
   const [searchText, setSearchText] = useState('');
   const [tempValue, setTempValue] = useState(value);
   const [allSelected, setAllSelected] = useState(false);
-  const [dropdownOpen, setDropdownOpen] = useState(false);
+
 
   useEffect(() => {
     setTempValue(value);
@@ -54,10 +55,10 @@ const CapUnifiedSelect = ({
     listItemHeight: 32,
   };
 
-  const NoResult = () => (
-    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: 200, color: '#8c8c8c', fontSize: 14 }}>
-      <WarningFilled style={{ fontSize: 36, marginBottom: 8, color: '#bfbfbf' }} />
-      <div style={{ fontWeight: 500 }}>No results found</div>
+  const NoResult = ({ 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>
   );
 
@@ -102,7 +103,6 @@ const CapUnifiedSelect = ({
   const leafValues = flattenLeafValues(filteredTree);
 
   const handleSelectAll = () => {
-    console.log('Select All clicked');
     const availableValues = leafValues;
     if (allSelected) {
       // If currently all selected, then unselect all
@@ -124,25 +124,16 @@ const CapUnifiedSelect = ({
   const handleConfirm = () => {
     console.log('Confirm clicked');
     if (onChange) onChange(tempValue);
-    setDropdownOpen(false);
   };
 
   const handleCancel = () => {
     console.log('Cancel clicked');
     setTempValue(value);
-    setDropdownOpen(false);
   };
 
   const handleTempChange = newValue => {
     setTempValue(newValue);
   };
-  
-  const handleDropdownVisibilityChange = open => {
-    if (!open) {
-      setTempValue(value);
-    }
-    setDropdownOpen(open);
-  };
 
   const suffix = isMulti && Array.isArray(value) && value?.length > 1 ? (
     <>
@@ -230,7 +221,7 @@ const CapUnifiedSelect = ({
             </div>
           )}
 
-          {currentItems.length === 0 ? <NoResult /> : menu}
+          {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' }}>
@@ -268,8 +259,6 @@ const CapUnifiedSelect = ({
           virtual
           disabled={disabled}
           filterTreeNode={false}
-          open={dropdownOpen}
-          onOpenChange={handleDropdownVisibilityChange}
           {...treeSelectVirtualizationProps}
           popupRender={renderCustomDropdown}
         />
@@ -279,7 +268,7 @@ const CapUnifiedSelect = ({
   };
 
   return (
-    <SelectWrapper className={classnames(`cap-unified-select-container ${className || ''}`)}>
+    <SelectWrapper className={classnames(className, 'cap-unified-select-container')}>
       {renderHeader()}
       {renderDropdown()}
     </SelectWrapper>

package/CapUnifiedSelect/styles.js

@@ -141,6 +141,23 @@ export const selectStyles = css`
     .multiSelect-popup-container .ant-select-tree-treenode{
       margin-left: 10px !important;
     }
+    .cap-unified-select-no-result{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 200px;
+      color: #8c8c8c;
+      font-size: 14px;
+    }
+    .cap-unified-select-no-result-icon{
+      font-size: 36px;
+      margin-bottom: 8px;
+      color: #bfbfbf;
+    }
+    .cap-unified-select-no-result-text{
+      font-weight: 500;
+    }
   }
   &.cap-unified-select {
     width: 100%;

package/package.json

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