@capillarytech/blaze-ui 0.1.6-alpha.49 → 0.1.6-alpha.5

package/CapTooltip/CapTooltip.js

@@ -1,98 +1,36 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Tooltip } from 'antd-v5';
-import classnames from 'classnames';
-import styled from 'styled-components';
-import { tooltipStyles } from './styles';
-import withStyles from '../utils/withStyles';
+import { Tooltip } from 'antd';
+import classNames from 'classnames';
+import { TooltipWrapper } from './styles';
 
-const StyledTooltip = styled(Tooltip)`
-  ${tooltipStyles}
-`;
-
-const CapTooltip = ({
-  title,
-  children,
-  placement = 'top',
-  visible,
-  defaultVisible = false,
-  trigger = 'hover',
-  destroyTooltipOnHide = false,
-  mouseEnterDelay = 0.1,
-  mouseLeaveDelay = 0.1,
-  overlayClassName = '',
-  overlayStyle,
-  onVisibleChange,
-  align,
-  arrowPointAtCenter = false,
-  autoAdjustOverflow = true,
-  getPopupContainer,
-  className = '',
-  ...rest
-}) => {
+const CapTooltip = ({ overlayClassName, children, ...rest }) => {
   return (
-    <StyledTooltip
-      title={title}
-      placement={placement}
-      open={visible}
-      defaultOpen={defaultVisible}
-      trigger={trigger}
-      destroyTooltipOnHide={destroyTooltipOnHide}
-      mouseEnterDelay={mouseEnterDelay}
-      mouseLeaveDelay={mouseLeaveDelay}
-      overlayClassName={classnames('cap-tooltip-overlay-v2', overlayClassName)}
-      overlayStyle={overlayStyle}
-      onOpenChange={onVisibleChange}
-      align={align}
-      arrow={{ pointAtCenter: arrowPointAtCenter }}
-      autoAdjustOverflow={autoAdjustOverflow}
-      getPopupContainer={getPopupContainer}
-      className={classnames('cap-tooltip-v2', className)}
-      {...rest}
-    >
-      {children}
-    </StyledTooltip>
+    <TooltipWrapper>
+      <Tooltip
+        overlayClassName={classNames('cap-tooltip', overlayClassName)}
+        {...rest}
+      >
+        {children}
+      </Tooltip>
+    </TooltipWrapper>
   );
 };
 
+/*
+  NOTE:
+    While using a disabled button with tooltip, wrap the button with an element with className "button-disabled-tooltip-wrapper".
+
+    <CapTooltip title="disabled button with tooltip">
+      <span className="button-disabled-tooltip-wrapper">
+        <CapButton disabled>Button</CapButton>
+      </span>
+    </CapTooltip>
+*/
+
 CapTooltip.propTypes = {
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  children: PropTypes.node,
-  placement: PropTypes.oneOf([
-    'top', 'left', 'right', 'bottom',
-    'topLeft', 'topRight', 'bottomLeft', 'bottomRight',
-    'leftTop', 'leftBottom', 'rightTop', 'rightBottom',
-  ]),
-  visible: PropTypes.bool,
-  defaultVisible: PropTypes.bool,
-  trigger: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.arrayOf(PropTypes.string),
-  ]),
-  destroyTooltipOnHide: PropTypes.bool,
-  mouseEnterDelay: PropTypes.number,
-  mouseLeaveDelay: PropTypes.number,
   overlayClassName: PropTypes.string,
-  overlayStyle: PropTypes.object,
-  onVisibleChange: PropTypes.func,
-  align: PropTypes.object,
-  arrowPointAtCenter: PropTypes.bool,
-  autoAdjustOverflow: PropTypes.bool,
-  getPopupContainer: PropTypes.func,
-  className: PropTypes.string,
-};
-
-CapTooltip.defaultProps = {
-  placement: 'top',
-  defaultVisible: false,
-  trigger: 'hover',
-  destroyTooltipOnHide: false,
-  mouseEnterDelay: 0.1,
-  mouseLeaveDelay: 0.1,
-  overlayClassName: '',
-  arrowPointAtCenter: false,
-  autoAdjustOverflow: true,
-  className: '',
+  children: PropTypes.node,
 };
 
-export default withStyles(CapTooltip, tooltipStyles);
+export default CapTooltip;

package/CapTooltip/index.js

@@ -1,3 +1 @@
-import CapTooltip from './CapTooltip';
-
-export default CapTooltip;
+export { default } from './CapTooltip';

package/CapTooltip/styles.js

@@ -1,34 +1,42 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import * as styledVars from '../styled/variables';
 
-export const tooltipStyles = css`
-  &.cap-tooltip-overlay-v2 {
+export const TooltipWrapper = styled.span`
+  .cap-tooltip {
+    max-width: 324px;
+
     .ant-tooltip-inner {
-      background-color: ${styledVars.CAP_G01};
-      color: ${styledVars.CAP_WHITE};
-      padding: 8px 12px;
-      font-size: 14px;
-      line-height: 20px;
+      background-color: ${styledVars.FONT_COLOR_01};
+      font-size: ${styledVars.FONT_SIZE_M};
+      font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
+      padding: 6px 8px;
+      min-height: 32px;
       border-radius: ${styledVars.RADIUS_04};
-      max-width: 300px;
-      word-wrap: break-word;
     }
 
-    .ant-tooltip-arrow::before {
-      background-color: ${styledVars.CAP_G01};
+    &.cap-bgcolor-tooltip {
+      .ant-tooltip-inner {
+        background-color: ${styledVars.FONT_COLOR_05};
+      }
+    }
+
+    &.hide-tooltip-pointer {
+      .ant-tooltip-arrow {
+        display: none;
+      }
     }
   }
 
   .button-disabled-tooltip-wrapper {
-    display: inline-block;
+    display: inline-flex;
     cursor: not-allowed;
 
-    .ant-btn[disabled] {
+    .cap-button.ant-btn[disabled] {
       pointer-events: none;
+      & > * {
+        pointer-events: auto;
+        cursor: not-allowed;
+      }
     }
   }
-`;
-
-export const StyledTooltipWrapper = styled.div`
-  display: inline-block;
-`;
+`;

package/CapUnifiedSelect/CapUnifiedSelect.js

@@ -1,363 +1,121 @@
-// Enhanced CapUnifiedSelect supporting 4 scenarios with advanced features in a single TreeSelect
-import React, { useState, useEffect, useMemo, useCallback, memo } from 'react';
+// CapUnifiedSelect component using Ant Design v5 Select and TreeSelect directly
+import React from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { TreeSelect, Input, Button } from 'antd-v5';
-import styled from 'styled-components';
-import * as styledVars from '../styled/variables';
-import { CapLabel, CapTooltipWithInfo, CapRow, CapIcon } from '../';
-import withStyles from '../utils/withStyles';
-import { SelectWrapper, HeaderWrapper, selectStyles } from './styles';
+import { Select, TreeSelect } from 'antd';
+import { SelectWrapper, HeaderWrapper, StyledInfoIcon } from './styles';
+import CapLabel from '../CapLabel';
+import CapTooltip from '../CapTooltip';
 
-const StyledTreeSelect = styled(TreeSelect)`
-  ${selectStyles}
-`;
-
-const CapUnifiedSelect = ({
+function CapUnifiedSelect({
   type,
   options = [],
+  treeData,
   value,
   onChange,
   placeholder = 'Select an option',
   className,
   style,
-  isError = false,
-  errorMessage,
-  popOverClassName,
   allowClear = false,
-  headerLabel,
-  onUpload,
+  showSearch = false,
+  label,
   tooltip,
-  bylineText,
   disabled = false,
-  showUpload = false,
-  customPopupRender = true,
-  showSearch = true,
-  searchBasedOn = 'label',
-  onConfirm,
-  onCancel,
-  size = 'm',
-  noResultCustomText = 'No results found',
-  noResultCustomIcon = 'warning',
-  ...rest
-}) => {
-
-  const [searchText, setSearchText] = useState('');
-  const [tempValue, setTempValue] = useState(value);
-  const [allSelected, setAllSelected] = useState(false);
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-
+}) {
+  const selectVirtualizationProps = {
+    listHeight: 256,
+  };
 
-  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" 
-      gap={8}
-    >
-      <CapIcon type={noResultCustomIcon} size="m" />
-      <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 loop = data =>
-      data.map(item => {
-        const children = item.children ? loop(item.children) : [];
-        if (filterNode(item) || children.length) {
-          return { ...item, children };
-        }
-        return null;
-      }).filter(Boolean);
-
-    return loop(data);
-  }, [searchBasedOn]);
-
-  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 dataSource = useMemo(() => {
-    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]);
-
-  useEffect(() => {
-    if (isMulti && Array.isArray(tempValue)) {
-      const allItemsSelected = tempValue.length > 0 && leafValues.length > 0 && tempValue.length === leafValues.length;
-      setAllSelected(allItemsSelected);
-    }
-  }, [tempValue, leafValues, isMulti]);
-
-  const handleConfirm = useCallback(() => {
-    if (onChange) onChange(tempValue);
-    setDropdownOpen(false);
-  }, [onChange, tempValue]);
-
-  const handleCancel = useCallback(() => {
-    setTempValue(value);
-    setDropdownOpen(false);
-  }, [value]);
-
-  const handleTempChange = useCallback(newValue => {
-    setTempValue(newValue);
-  }, []);
-
-  const handleDropdownVisibilityChange = useCallback(open => {
-    if (open === false) {
-      setTempValue(value);
-    }
-    setDropdownOpen(open);
-  }, [value]);
-
-  const suffix = useMemo(() => {
-    const displayValue = dropdownOpen ? tempValue : value;
-    return isMulti && Array.isArray(displayValue) && displayValue?.length > 1 ? (
-      <>
-        <span>+{displayValue.length - 1} more <CapIcon type="down" size="s" /></span>
-      </>
-    ) : (
-      <CapIcon type="down" size="s" />
-    );
-  }, [isMulti, value, tempValue, dropdownOpen]);
-
-  const prefix = useMemo(() => {
-    if (isMulti) {
-      if (Array.isArray(tempValue) && tempValue?.length > 0) {
-        const firstSelectedValue = tempValue[0];
-        const firstSelectedOption = options?.find(opt => opt?.value === firstSelectedValue);
-        return firstSelectedOption?.label || null;
-      }
-      else if (Array.isArray(value) && value?.length > 0) {
-        const firstSelectedValue = value[0];
-        const firstSelectedOption = options?.find(opt => opt?.value === firstSelectedValue);
-        return firstSelectedOption?.label || null;
-      }
-    }
-    return null;
-  }, [isMulti, value, tempValue, options]);
+  };
 
-  const renderHeader = useCallback(() => {
-    if (!headerLabel && !tooltip) return null;
+  const renderHeader = () => {
+    if (!label && !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>}
+      <HeaderWrapper className={disabled ? 'disabled' : ''}>
+        {label && (
+          <CapLabel type="label16" className={disabled ? 'disabled' : ''}>
+            {label}
+          </CapLabel>
+        )}
         {tooltip && (
-          <CapTooltipWithInfo 
-            title={tooltip} 
-            className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header-tooltip')}
-            iconProps={{ disabled }}
-          />
+          <CapTooltip title={tooltip}>
+            <StyledInfoIcon className={disabled ? 'disabled' : ''} />
+          </CapTooltip>
         )}
       </HeaderWrapper>
-      <div className="cap-unified-select-header-byline-text">
-        {bylineText && <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;
+  };
 
+  const renderDropdown = () => {
+    if (type === 'treeSelect' || type === 'multiTreeSelect') {
       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 && (
-            <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>
-          )}
-
-          {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, popupClassName, type, showSearch, searchText, isMulti, showUpload, currentItems?.length, allSelected, className, noResultCustomText, onUpload, handleSelectAll, handleConfirm, handleCancel]);
-
-    return (
-      <>
-        <StyledTreeSelect
-          {...rest}
-          type={type}
-          treeData={filteredTree}
-          value={customPopupRender ? tempValue : value}
-          onChange={customPopupRender ? handleTempChange : onChange}
+        <TreeSelect
+          treeData={treeData || options}
+          value={value}
+          onChange={onChange}
           placeholder={placeholder}
-          showSearch={false}
-          maxTagCount={0}
-          maxTagPlaceholder={() => null}
-          prefix={tempValue?.length > 0 ? prefix : undefined}
-          suffixIcon={suffix}
-          className={classnames(`cap-unified-tree-select cap-unified-tree-select-${size}`, className)}
+          className={className}
           style={style}
-          status={isError ? 'error' : ''}
           allowClear={allowClear}
-          multiple={isMulti}
-          treeCheckable={isMulti}
-          open={dropdownOpen}
-          onOpenChange={handleDropdownVisibilityChange}
-          showCheckedStrategy={TreeSelect.SHOW_PARENT}
+          showSearch={showSearch}
+          multiple={type === 'multiTreeSelect' ? true : false}
           virtual
+          treeDefaultExpandAll
           disabled={disabled}
-          filterTreeNode={false}
           {...treeSelectVirtualizationProps}
-          popupRender={renderCustomDropdown}
         />
-        {isError && <CapLabel className={classnames("cap-unified-select-status")} style={{ color: 'red' }}>{errorMessage}</CapLabel>}
-      </>
+      );
+    }
+
+    return (
+      <Select
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        className={className}
+        style={style}
+        allowClear={allowClear}
+        showSearch={showSearch}
+        options={options}
+        mode={type === 'multiSelect' ? 'multiple' : undefined}
+        virtual
+        disabled={disabled}
+        {...selectVirtualizationProps}
+      />
     );
-  }, [filteredTree, tempValue, value, prefix, suffix, className, style, isError, errorMessage, allowClear, isMulti, dropdownOpen, customPopupRender, handleTempChange, onChange, disabled, handleDropdownVisibilityChange, treeSelectVirtualizationProps]);
+  };
 
   return (
-    <SelectWrapper className={classnames(className, 'cap-unified-select-container')}>
+    <SelectWrapper>
       {renderHeader()}
       {renderDropdown()}
     </SelectWrapper>
   );
-};
+}
 
 CapUnifiedSelect.propTypes = {
   type: PropTypes.oneOf(['select', 'multiSelect', 'treeSelect', 'multiTreeSelect']),
   options: PropTypes.array,
+  treeData: PropTypes.array,
   value: PropTypes.any,
   onChange: PropTypes.func,
   placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   className: PropTypes.string,
   style: PropTypes.object,
   allowClear: PropTypes.bool,
-  headerLabel: PropTypes.string,
+  showSearch: PropTypes.bool,
+  label: PropTypes.string,
   tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   disabled: PropTypes.bool,
-  customPopupRender: PropTypes.bool,
-  showSearch: PropTypes.bool,
-  searchBasedOn: PropTypes.oneOf(['label', 'value', 'key']),
-  onConfirm: PropTypes.func,
-  onCancel: PropTypes.func,
-  isError: PropTypes.bool,
-  errorMessage: PropTypes.string,
-  popupClassName: PropTypes.string,
-  showUpload: PropTypes.bool,
-  onUpload: PropTypes.func,
-  size: PropTypes.oneOf(['s', 'm', 'l', 'xl']),
 };
 
 CapUnifiedSelect.defaultProps = {
   type: 'select',
-  placeholder: 'Select an option',
-  searchBasedOn: 'label',
-  noResultCustomText: 'No results found',
-  noResultCustomIcon: 'warning',
-  options: [],
-  size: 'm',
   allowClear: false,
-  customPopupRender: true,
-  showSearch: true,
-  className: '',
-  popupClassName: '',
-  disabled: false,
-  showUpload: false,
-  isError: false,
-  onUpload: () => {},
-  onChange: () => {},
-  onConfirm: () => {},
-  onCancel: () => {}
+  showSearch: false,
 };
 
-export default withStyles(CapUnifiedSelect, selectStyles);
+export default CapUnifiedSelect;

package/CapUnifiedSelect/index.js

@@ -1 +1,4 @@
-export { default } from './CapUnifiedSelect'; 
+import CapUnifiedSelect from './CapUnifiedSelect';
+import CapUnifiedSelectLoadable from './loadable';
+
+export default CapUnifiedSelectLoadable; 

package/CapUnifiedSelect/loadable.js

@@ -0,0 +1,3 @@
+import loadable from '@loadable/component';
+
+export default loadable(() => import('./CapUnifiedSelect'));