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

package/CapLabel/styles.js

@@ -6,7 +6,7 @@ export const StyledLabelDiv = styled.div`
   font-size: ${({ typeStyles }) => typeStyles?.fontSize || '0.857rem'};
   font-weight: ${({ typeStyles, fontWeight }) => fontWeight || typeStyles?.fontWeight || styledVars.FONT_WEIGHT_REGULAR};
   color: ${({ typeStyles }) => typeStyles?.color || styledVars.CAP_G04};
-  line-height: ${({ typeStyles, lineHeight }) => lineHeight || typeStyles?.lineHeight || 'normal'};
+  line-height: ${({ typeStyles, lineHeight }) => lineHeight || typeStyles?.lineHeight || styledVars.NORMAL_LINE_HEIGHT};
   margin: 0;
   padding: 0;
 `;
@@ -16,7 +16,7 @@ export const StyledLabelSpan = styled.span`
   font-size: ${({ typeStyles }) => typeStyles?.fontSize || '0.857rem'};
   font-weight: ${({ typeStyles, fontWeight }) => fontWeight || typeStyles?.fontWeight || styledVars.FONT_WEIGHT_REGULAR};
   color: ${({ typeStyles }) => typeStyles?.color || styledVars.CAP_G04};
-  line-height: ${({ typeStyles, lineHeight }) => lineHeight || typeStyles?.lineHeight || 'normal'};
+  line-height: ${({ typeStyles, lineHeight }) => lineHeight || typeStyles?.lineHeight || styledVars.NORMAL_LINE_HEIGHT};
   margin: 0;
   padding: 0;
 `;

package/CapTooltipWithInfo/CapTooltipWithInfo.js

@@ -44,28 +44,20 @@ const CapTooltipWithInfo = ({
 };
 
 CapTooltipWithInfo.propTypes = {
-  /** Content to display in the tooltip */
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-  /** Size of the info icon */
   iconSize: PropTypes.oneOf(['xs', 's', 'm', 'l']),
-  /** Type of icon to display */
   iconType: PropTypes.string,
-  /** Placement of the tooltip relative to the icon */
   placement: PropTypes.oneOf([
     'top', 'left', 'right', 'bottom',
     'topLeft', 'topRight', 'bottomLeft', 'bottomRight',
     'leftTop', 'leftBottom', 'rightTop', 'rightBottom',
   ]),
-  /** How the tooltip is triggered */
   trigger: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.arrayOf(PropTypes.string),
   ]),
-  /** Additional class name */
   className: PropTypes.string,
-  /** Additional props passed to the CapTooltip component */
   tooltipProps: PropTypes.object,
-  /** Additional props passed to the CapIcon component */
   iconProps: PropTypes.object,
 };
 

package/CapUnifiedSelect/CapUnifiedSelect.js

@@ -4,11 +4,18 @@ 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';
 
+const SELECT_TYPES = {
+  SELECT: 'select',
+  MULTI_SELECT: 'multiSelect',
+  TREE_SELECT: 'treeSelect',
+  MULTI_TREE_SELECT: 'multiTreeSelect'
+};
+
 const StyledTreeSelect = styled(TreeSelect)`
   ${selectStyles}
 `;
@@ -149,6 +156,7 @@ const CapUnifiedSelect = ({
   showUpload,
   customPopupRender,
   showSearch,
+  readOnly,
   searchBasedOn,
   onConfirm,
   clearText,
@@ -167,8 +175,8 @@ const CapUnifiedSelect = ({
     if (!isEqual) setTempValue(value);
   }, [value]);
 
-  const isMulti = useMemo(() => type === 'multiSelect' || type === 'multiTreeSelect', [type]);
-  const isTree = useMemo(() => type === 'treeSelect' || type === 'multiTreeSelect', [type]);
+  const isMulti = useMemo(() => type === SELECT_TYPES.MULTI_SELECT || type === SELECT_TYPES.MULTI_TREE_SELECT, [type]);
+  const isTree = useMemo(() => type === SELECT_TYPES.TREE_SELECT || type === SELECT_TYPES.MULTI_TREE_SELECT, [type]);
 
   const dataSource = useMemo(() => {
     if (!options?.length) return [];
@@ -219,9 +227,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 +284,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;
@@ -371,7 +403,7 @@ const CapUnifiedSelect = ({
             </div>
           )}
 
-          {(type === 'select' || type === 'treeSelect') && (
+          {(type === SELECT_TYPES.SELECT || type === SELECT_TYPES.TREE_SELECT) && (
             <CapRow className="cap-unified-select-tree-clear-container" onClick={handleClearAll}>
               <CapLabel className="cap-unified-select-tree-clear-label">{clearText}</CapLabel>
             </CapRow>
@@ -400,8 +432,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 (
@@ -441,7 +478,7 @@ const CapUnifiedSelect = ({
         {...rest}
       />
       {isError && (
-        <CapLabel className="cap-unified-select-status" style={{ color: 'red' }}>
+        <CapLabel className="cap-unified-select-status" style={{ color: styledVars.CAP_RED }}>
           {errorMessage}
         </CapLabel>
       )}
@@ -450,7 +487,7 @@ const CapUnifiedSelect = ({
 };
 
 CapUnifiedSelect.propTypes = {
-  type: PropTypes.oneOf(['select', 'multiSelect', 'treeSelect', 'multiTreeSelect']),
+  type: PropTypes.oneOf(Object.values(SELECT_TYPES)),
   options: PropTypes.array,
   value: PropTypes.any,
   containerClassName: PropTypes.string,
@@ -462,6 +499,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,
@@ -478,7 +516,7 @@ CapUnifiedSelect.propTypes = {
 };
 
 CapUnifiedSelect.defaultProps = {
-  type: 'select',
+  type: SELECT_TYPES.SELECT,
   placeholder: 'Select an option',
   searchBasedOn: 'label',
   noResultCustomText: 'No results found',
@@ -490,6 +528,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,25 @@ export const selectStyles = css`
 
     .cap-unified-tree-select {
       min-width: 14.286rem;
+      
+      &.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)
@@ -91,7 +123,7 @@ export const selectStyles = css`
       align-self: center;
     }
     .cap-unified-tree-select .ant-select-selector:focus {
-      border: 1px solid ${styledVars.CAP_G11};
+      border: 0.071rem solid ${styledVars.CAP_G11};
     }
     .cap-unified-tree-select .ant-select-tree-treenode {
       padding-left: ${styledVars.SPACING_04};
@@ -103,7 +135,7 @@ export const selectStyles = css`
 
   /* Common styles for all types */
   &.custom-popup-container {
-    width: max-content !important;
+    width: max-content;
 
     .ant-select-tree {
       .ant-select-tree-node-content-wrapper {
@@ -158,7 +190,7 @@ export const selectStyles = css`
       }
       .ant-select-tree-node-content-wrapper {
         border-radius: 0;
-        padding-left: 3px;
+        padding-left: 0.214rem;
       }
       .ant-select-tree-indent {
         margin-left: ${styledVars.SPACING_12};

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.67",
   "description": "Capillary UI component library with Ant Design v5",
   "main": "./index.js",
   "sideEffects": [

package/styled/variables.js

@@ -14,6 +14,8 @@ export const CAP_SECONDARY = {
   light: 'rgba("#2466ea", 0.1)',
 };
 
+export const NORMAL_LINE_HEIGHT = "normal";
+
 // Custom colors
 export const CAP_ORANGE = "#f87d23";
 export const CAP_ORANGE01 = "#ffe5d2";