@capillarytech/blaze-ui 0.1.6-alpha.65 → 0.1.6-alpha.66

package/CapUnifiedSelect/CapUnifiedSelect.js

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 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 '../';
+import { CapLabel, CapTooltipWithInfo, CapRow, CapIcon, CapTooltip } from '../';
 import withStyles from '../utils/withStyles';
 import withMemo from '../utils/withMemo';
 import { HeaderWrapper, selectStyles } from './styles';
@@ -149,6 +149,7 @@ const CapUnifiedSelect = ({
   showUpload,
   customPopupRender,
   showSearch,
+  readOnly,
   searchBasedOn,
   onConfirm,
   clearText,
@@ -219,9 +220,30 @@ const CapUnifiedSelect = ({
 
   const suffix = useMemo(() => {
     const count = Array.isArray(displayValue) ? displayValue?.length : (displayValue ? 1 : 0);
+    const renderTooltipTitle = (values) => {
+      return (
+        <div className="cap-unified-select-more-tooltip-content">
+          {values.map((val, idx) => (
+            <div key={idx}>{val}</div>
+          ))}
+        </div>
+      );
+    };
+    
     return (
       <>
-        {isMulti && count > 1 && <span>+{count - 1} more </span>}
+        {isMulti && count > 1 && (
+          <span className="cap-unified-select-more-text">
+            <CapTooltip 
+              title={renderTooltipTitle(displayValue.slice(1))} 
+              placement="bottom" 
+              overlayClassName="cap-unified-select-more-tooltip"
+              arrowPointAtCenter={true}
+            >
+              <span>+{count - 1} more</span>
+            </CapTooltip>
+          </span>
+        )}
         <CapIcon
           className="cap-unified-select-suffix-icon"
           type={dropdownOpen ? 'up' : 'down'}
@@ -255,13 +277,16 @@ const CapUnifiedSelect = ({
   
 
   const handleDropdownVisibilityChange = useCallback((open) => {
+    if (readOnly) {
+      return;
+    }
     if (!open && !customPopupRender) {
       onChange?.(tempValue);
     } else if (!open) {
       setTempValue(value);
     }
     setDropdownOpen(open);
-  }, [customPopupRender, value, onChange, tempValue]);
+  }, [customPopupRender, value, onChange, tempValue, readOnly]);
 
   const renderHeader = useMemo(() => {
     if (!headerLabel && !tooltip) return null;
@@ -400,8 +425,13 @@ const CapUnifiedSelect = ({
   );
 
   const combinedClassName = useMemo(
-    () => classnames(containerClassName, 'cap-unified-tree-select', className),
-    [containerClassName, className]
+    () => classnames(
+      containerClassName, 
+      'cap-unified-tree-select', 
+      { 'cap-unified-tree-select-readonly': readOnly },
+      className
+    ),
+    [containerClassName, className, readOnly]
   );
 
   return (
@@ -462,6 +492,7 @@ CapUnifiedSelect.propTypes = {
   headerLabel: PropTypes.string,
   tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
   bylineText: PropTypes.string,
   customPopupRender: PropTypes.bool,
   showSearch: PropTypes.bool,
@@ -490,6 +521,7 @@ CapUnifiedSelect.defaultProps = {
   showSearch: true,
   className: '',
   disabled: false,
+  readOnly: false,
   showUpload: false,
   isError: false,
   onUpload: () => {},

package/CapUnifiedSelect/styles.js

@@ -4,7 +4,6 @@ import * as styledVars from '../styled/variables';
 export const HeaderWrapper = styled.div`
   display: flex;
   align-items: center;
-  gap: ${styledVars.SPACING_04};
 
   &.disabled {
     opacity: 0.5;
@@ -18,6 +17,12 @@ export const selectStyles = css`
     &.disabled {
       cursor: not-allowed;
     }
+    .cap-unified-select-more-text {
+      cursor: pointer;
+      color: ${styledVars.CAP_G01};
+      margin-right: ${styledVars.SPACING_04};
+      position: relative;
+    }
     .cap-unified-select-suffix-icon {
       color: ${styledVars.CAP_G01};
     }
@@ -30,6 +35,14 @@ export const selectStyles = css`
         }
       }
     }
+    
+    .cap-unified-tree-select-readonly.ant-select-outlined {
+      &:hover .ant-select-selector,
+      &:active .ant-select-selector,
+      &:focus .ant-select-selector {
+        border-color: ${styledVars.CAP_G08} !important;
+      }
+    }
     .ant-select-selector .ant-select-selection-placeholder{
       pointer-events: unset;
     }
@@ -62,6 +75,26 @@ export const selectStyles = css`
 
     .cap-unified-tree-select {
       min-width: 14.286rem;
+      margin-top: 0.571rem;
+      
+      &.cap-unified-tree-select-readonly {
+        pointer-events: none;
+        .ant-select-selector {
+          background-color: ${styledVars.CAP_WHITE};
+          border-color: ${styledVars.CAP_G08} !important;
+          cursor: default;
+        }
+        .ant-select-arrow {
+          pointer-events: auto;
+          color: ${styledVars.CAP_G06};
+        }
+        &:hover .ant-select-selector {
+          border-color: ${styledVars.CAP_G08} !important;
+        }
+        .cap-unified-select-more-text {
+          pointer-events: auto;
+        }
+      }
     }
     
     .ant-select.ant-select-focused.ant-select-outlined:not(.ant-select-disabled)

package/package.json

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