@capillarytech/blaze-ui 0.1.6-alpha.19 → 0.1.6-alpha.21

package/CapUnifiedSelect/CapUnifiedSelect.js

@@ -5,7 +5,7 @@ import classnames from 'classnames';
 import { Select, TreeSelect, Tooltip, Input, Button } from 'antd';
 import { InfoCircleOutlined, SearchOutlined, WarningFilled, DownOutlined } from '@ant-design/icons';
 import { SelectWrapper, HeaderWrapper, selectStyles } from './styles';
-import withStyles from './withStyles';
+import withStyles from '../../utils/withStyles';
 import styled from 'styled-components';
 
 const CapUnifiedSelect = ({
@@ -152,10 +152,10 @@ const CapUnifiedSelect = ({
   };
 
   const suffix =
-  (type === "multiTreeSelect" || type === "multiSelect") && Array.isArray(value) && value.length > 0 ? (
+  (type === "multiTreeSelect" || type === "multiSelect") && Array.isArray(value) && value.length > 1 ? (
     <>
       <span>
-        +{value.length} more
+        +{value.length - 1} more
         <DownOutlined />
       </span>
     </>
@@ -163,6 +163,18 @@ const CapUnifiedSelect = ({
     <DownOutlined />
   );
 
+  const prefix = () => {
+    if((type === "multiTreeSelect" || type === "multiSelect") && Array.isArray(value) && value.length > 0) {
+      const selectedLabels = options
+      .filter((opt) => value.includes(opt.value))
+      .map((opt) => opt.label);
+
+      return selectedLabels[0];
+    } else {
+      return null;
+    }
+  }
+
   const renderHeader = () => {
     if (!label && !tooltip) return null;
     return (
@@ -274,9 +286,9 @@ const CapUnifiedSelect = ({
             value={customPopupRender ? tempValue : value}
             onChange={customPopupRender ? handleTempChange : onChange}
             placeholder={placeholder}
-            maxTagCount={0} // hides all tags
-            maxTagPlaceholder={() => null} // hides default `+N more` placeholder
-            prefix={type === "multiTreeSelect" && value.length > 0 ? <>{placeholder}</> : null}
+            maxTagCount={0}
+            maxTagPlaceholder={() => null} 
+            prefix={type === "multiTreeSelect" && value.length > 0 && prefix()}
             suffixIcon={suffix}
             className={classnames(`cap-unified-tree-select ${className || ''}`)}
             style={style}
@@ -306,7 +318,7 @@ const CapUnifiedSelect = ({
           placeholder={placeholder}
           maxTagCount={0}
           maxTagPlaceholder={() => null} 
-          prefix={type === "multiSelect" && value.length > 0 ? <>{placeholder}</> : null}
+          prefix={type === "multiSelect" && value.length > 0 && prefix()}
           suffixIcon={suffix}
           className={classnames('cap-unified-select', className)}
           style={style}

package/dist/CapUnifiedSelect/CapUnifiedSelect.js

@@ -11,7 +11,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _antd = require("antd");
 var _icons = require("@ant-design/icons");
 var _styles = require("./styles");
-var _withStyles = _interopRequireDefault(require("./withStyles"));
+var _withStyles = _interopRequireDefault(require("../../utils/withStyles"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -196,7 +196,19 @@ var CapUnifiedSelect = function CapUnifiedSelect(_ref) {
   var handleTempChange = function handleTempChange(newValue) {
     setTempValue(newValue);
   };
-  var suffix = (type === "multiTreeSelect" || type === "multiSelect") && Array.isArray(value) && value.length > 0 ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", null, "+", value.length, " more", /*#__PURE__*/_react["default"].createElement(_icons.DownOutlined, null))) : /*#__PURE__*/_react["default"].createElement(_icons.DownOutlined, null);
+  var suffix = (type === "multiTreeSelect" || type === "multiSelect") && Array.isArray(value) && value.length > 1 ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", null, "+", value.length - 1, " more", /*#__PURE__*/_react["default"].createElement(_icons.DownOutlined, null))) : /*#__PURE__*/_react["default"].createElement(_icons.DownOutlined, null);
+  var prefix = function prefix() {
+    if ((type === "multiTreeSelect" || type === "multiSelect") && Array.isArray(value) && value.length > 0) {
+      var selectedLabels = options.filter(function (opt) {
+        return value.includes(opt.value);
+      }).map(function (opt) {
+        return opt.label;
+      });
+      return selectedLabels[0];
+    } else {
+      return null;
+    }
+  };
   var renderHeader = function renderHeader() {
     if (!label && !tooltip) return null;
     return /*#__PURE__*/_react["default"].createElement(_styles.HeaderWrapper, {
@@ -307,13 +319,11 @@ var CapUnifiedSelect = function CapUnifiedSelect(_ref) {
         value: customPopupRender ? tempValue : value,
         onChange: customPopupRender ? handleTempChange : onChange,
         placeholder: placeholder,
-        maxTagCount: 0 // hides all tags
-        ,
+        maxTagCount: 0,
         maxTagPlaceholder: function maxTagPlaceholder() {
           return null;
-        } // hides default `+N more` placeholder
-        ,
-        prefix: type === "multiTreeSelect" && value.length > 0 ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, placeholder) : null,
+        },
+        prefix: type === "multiTreeSelect" && value.length > 0 && prefix(),
         suffixIcon: suffix,
         className: (0, _classnames["default"])("cap-unified-tree-select ".concat(className || '')),
         style: style,
@@ -344,7 +354,7 @@ var CapUnifiedSelect = function CapUnifiedSelect(_ref) {
       maxTagPlaceholder: function maxTagPlaceholder() {
         return null;
       },
-      prefix: type === "multiSelect" && value.length > 0 ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, placeholder) : null,
+      prefix: type === "multiSelect" && value.length > 0 && prefix(),
       suffixIcon: suffix,
       className: (0, _classnames["default"])('cap-unified-select', className),
       style: style,

package/dist/esm/CapUnifiedSelect/CapUnifiedSelect.js

@@ -18,7 +18,7 @@ import classnames from 'classnames';
 import { Select, TreeSelect, Tooltip, Input, Button } from 'antd';
 import { InfoCircleOutlined, SearchOutlined, WarningFilled, DownOutlined } from '@ant-design/icons';
 import { SelectWrapper, HeaderWrapper, selectStyles } from './styles';
-import withStyles from './withStyles';
+import withStyles from '../../utils/withStyles';
 import styled from 'styled-components';
 var CapUnifiedSelect = function CapUnifiedSelect(_ref) {
   var type = _ref.type,
@@ -189,7 +189,19 @@ var CapUnifiedSelect = function CapUnifiedSelect(_ref) {
   var handleTempChange = function handleTempChange(newValue) {
     setTempValue(newValue);
   };
-  var suffix = (type === "multiTreeSelect" || type === "multiSelect") && Array.isArray(value) && value.length > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "+", value.length, " more", /*#__PURE__*/React.createElement(DownOutlined, null))) : /*#__PURE__*/React.createElement(DownOutlined, null);
+  var suffix = (type === "multiTreeSelect" || type === "multiSelect") && Array.isArray(value) && value.length > 1 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "+", value.length - 1, " more", /*#__PURE__*/React.createElement(DownOutlined, null))) : /*#__PURE__*/React.createElement(DownOutlined, null);
+  var prefix = function prefix() {
+    if ((type === "multiTreeSelect" || type === "multiSelect") && Array.isArray(value) && value.length > 0) {
+      var selectedLabels = options.filter(function (opt) {
+        return value.includes(opt.value);
+      }).map(function (opt) {
+        return opt.label;
+      });
+      return selectedLabels[0];
+    } else {
+      return null;
+    }
+  };
   var renderHeader = function renderHeader() {
     if (!label && !tooltip) return null;
     return /*#__PURE__*/React.createElement(HeaderWrapper, {
@@ -300,13 +312,11 @@ var CapUnifiedSelect = function CapUnifiedSelect(_ref) {
         value: customPopupRender ? tempValue : value,
         onChange: customPopupRender ? handleTempChange : onChange,
         placeholder: placeholder,
-        maxTagCount: 0 // hides all tags
-        ,
+        maxTagCount: 0,
         maxTagPlaceholder: function maxTagPlaceholder() {
           return null;
-        } // hides default `+N more` placeholder
-        ,
-        prefix: type === "multiTreeSelect" && value.length > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, placeholder) : null,
+        },
+        prefix: type === "multiTreeSelect" && value.length > 0 && prefix(),
         suffixIcon: suffix,
         className: classnames("cap-unified-tree-select ".concat(className || '')),
         style: style,
@@ -337,7 +347,7 @@ var CapUnifiedSelect = function CapUnifiedSelect(_ref) {
       maxTagPlaceholder: function maxTagPlaceholder() {
         return null;
       },
-      prefix: type === "multiSelect" && value.length > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, placeholder) : null,
+      prefix: type === "multiSelect" && value.length > 0 && prefix(),
       suffixIcon: suffix,
       className: classnames('cap-unified-select', className),
       style: style,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/blaze-ui",
   "author": "Capillary Technologies",
-  "version": "0.1.6-alpha.19",
+  "version": "0.1.6-alpha.21",
   "description": "Capillary UI component library with Ant Design v5",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",
@@ -26,16 +26,12 @@
     "!**/tests"
   ],
   "homepage": "https://github.com/Capillary/blaze-ui",
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-intl": "^6.5.0"
-  },
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
     "@capillarytech/cap-ui-utils": "^3.0.4",
     "antd": "^5.12.0",
     "prop-types": "^15.8.1",
-    "styled-components": "^5.3.11"
+    "styled-components": "^5.3.11",
+    "react-intl": "2.7.2"
   }
 }

package/CapHeading/CapHeading.js

@@ -1,71 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { HeadingWrapper, HeadingSpan } from './styles';
-
-const CapHeading = ({ type = 'h5', children, as, ...rest }) => {
-  return (
-    <HeadingWrapper type={type} as={as || 'div'} {...rest}>
-      {children}
-    </HeadingWrapper>
-  );
-};
-
-CapHeading.propTypes = {
-  type: PropTypes.oneOf([
-    'h0',
-    'h1',
-    'h2',
-    'h3',
-    'h4',
-    'h5',
-    'h6',
-    'h7',
-    'h8',
-    'h9',
-    'h10',
-    'label1',
-    'label2',
-    'label3',
-    'label4',
-    'label5',
-    'label6',
-  ]),
-  children: PropTypes.node,
-  as: PropTypes.string,
-};
-
-// Inline span version
-const CapHeadingSpan = ({ type = 'h5', children, ...rest }) => {
-  return (
-    <HeadingSpan type={type} {...rest}>
-      {children}
-    </HeadingSpan>
-  );
-};
-
-CapHeadingSpan.propTypes = {
-  type: PropTypes.oneOf([
-    'h0',
-    'h1',
-    'h2',
-    'h3',
-    'h4',
-    'h5',
-    'h6',
-    'h7',
-    'h8',
-    'h9',
-    'h10',
-    'label1',
-    'label2',
-    'label3',
-    'label4',
-    'label5',
-    'label6',
-  ]),
-  children: PropTypes.node,
-};
-
-CapHeading.Span = CapHeadingSpan;
-
-export default CapHeading;

package/CapHeading/index.js

@@ -1 +0,0 @@
-export { default } from './CapHeading';

package/CapHeading/styles.js

@@ -1,125 +0,0 @@
-import styled, { css } from 'styled-components';
-import * as styledVars from '../styled/variables';
-
-const headings = {
-  h0: {
-    fontSize: '28px',
-    fontWeight: '500',
-    color: styledVars.CAP_G01,
-    lineHeight: '36px',
-  },
-  h1: {
-    fontSize: '24px',
-    fontWeight: '500',
-    color: styledVars.CAP_G01,
-    lineHeight: '32px',
-  },
-  h2: {
-    fontSize: '20px',
-    fontWeight: '500',
-    color: styledVars.CAP_G01,
-    lineHeight: '28px',
-  },
-  h3: {
-    fontSize: '16px',
-    fontWeight: '500',
-    color: styledVars.CAP_G01,
-    lineHeight: '24px',
-  },
-  h4: {
-    fontSize: '14px',
-    fontWeight: '500',
-    color: styledVars.CAP_G01,
-    lineHeight: '20px',
-  },
-  h5: {
-    fontSize: '14px',
-    fontWeight: 'normal',
-    color: styledVars.CAP_G01,
-    lineHeight: '20px',
-  },
-  h6: {
-    color: styledVars.CAP_G04,
-    fontSize: '14px',
-    fontWeight: 'normal',
-    lineHeight: '20px',
-  },
-  h7: {
-    fontSize: '20px',
-    fontWeight: '500',
-    color: styledVars.CAP_G04,
-    lineHeight: '28px',
-  },
-  h8: {
-    fontSize: '14px',
-    fontWeight: '400',
-    color: styledVars.CAP_G01,
-    lineHeight: '20px',
-  },
-  h9: {
-    fontSize: '14px',
-    fontWeight: '500',
-    color: styledVars.CAP_WHITE,
-    lineHeight: '20px',
-  },
-  h10: {
-    fontSize: '12px',
-    fontWeight: '500',
-    color: styledVars.CAP_G01,
-    lineHeight: '16px',
-  },
-  label1: {
-    color: styledVars.CAP_G04,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: '20px',
-  },
-  label2: {
-    color: styledVars.CAP_G01,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: '20px',
-  },
-  label3: {
-    color: styledVars.CAP_G05,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: '20px',
-  },
-  label4: {
-    color: styledVars.CAP_G04,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: '16px',
-  },
-  label5: {
-    color: styledVars.CAP_G04,
-    fontSize: '16px',
-    fontWeight: 'normal',
-    lineHeight: '24px',
-  },
-  label6: {
-    color: styledVars.CAP_G01,
-    fontSize: '16px',
-    fontWeight: 'normal',
-    lineHeight: '24px',
-  },
-};
-
-const headingStyles = css`
-  font-size: ${props => headings[props.type].fontSize};
-  font-weight: ${props => headings[props.type].fontWeight};
-  color: ${props => headings[props.type].color};
-  line-height: ${props => headings[props.type].lineHeight};
-  margin: 0;
-  padding: 0;
-`;
-
-export const HeadingWrapper = styled.div`
-  ${headingStyles}
-`;
-
-export const HeadingSpan = styled.span`
-  ${headingStyles}
-  display: inline-block;
-`;

package/CapIcon/CapIcon.js

@@ -1,83 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import * as AntIcons from '@ant-design/icons';
-import styled from 'styled-components';
-import classNames from 'classnames';
-import * as styledVars from '../styled/variables';
-
-const getFontSizeFromProps = (size) => {
-  switch (size) {
-    case 'xs':
-      return styledVars.ICON_SIZE_XS;
-    case 's':
-      return styledVars.ICON_SIZE_S;
-    case 'm':
-      return styledVars.ICON_SIZE_M;
-    case 'l':
-      return styledVars.ICON_SIZE_L;
-    default:
-      return styledVars.ICON_SIZE_M;
-  }
-};
-
-const IconWrapper = styled.span`
-  font-size: ${props => getFontSizeFromProps(props.size)};
-  color: ${props => props.color || 'inherit'};
-  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
-  opacity: ${props => props.disabled ? 0.5 : 1};
-  transition: all 0.3s;
-
-  &:hover {
-    opacity: ${props => props.disabled ? 0.5 : 0.8};
-  }
-`;
-
-const CapIcon = ({
-  type,
-  className,
-  disabled,
-  size = 'm',
-  color,
-  ...rest
-}) => {
-  // Convert type to AntD icon name (e.g., 'close' -> 'CloseOutlined')
-  const getIconComponent = (iconType) => {
-    const iconMap = {
-      'close': AntIcons.CloseOutlined,
-      'chevron-down': AntIcons.DownOutlined,
-      'tick': AntIcons.CheckOutlined,
-      'info': AntIcons.InfoCircleOutlined,
-      // Add more icon mappings as needed
-    };
-    return iconMap[iconType] || AntIcons[iconType];
-  };
-
-  const IconComponent = getIconComponent(type);
-
-  if (!IconComponent) {
-    console.warn(`Icon type "${type}" not found`);
-    return null;
-  }
-
-  return (
-    <IconWrapper
-      className={classNames('cap-icon', className, { disabled })}
-      disabled={disabled}
-      size={size}
-      color={color}
-      {...rest}
-    >
-      <IconComponent />
-    </IconWrapper>
-  );
-};
-
-CapIcon.propTypes = {
-  type: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  size: PropTypes.oneOf(['xs', 's', 'm', 'l']),
-  color: PropTypes.string,
-};
-
-export default CapIcon;

package/CapIcon/index.js

@@ -1 +0,0 @@
-export { default } from './CapIcon';

package/CapInfoNote/CapInfoNote.js

@@ -1,54 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Alert } from 'antd';
-import { InfoNoteWrapper } from './styles';
-import CapLabel from '../CapLabel';
-import CapRow from '../CapRow';
-
-const Note = ({ noteText }) => (
-  <CapLabel.Inline type="label4" className="note-text">
-    {noteText}
-  </CapLabel.Inline>
-);
-
-Note.propTypes = {
-  noteText: PropTypes.string,
-};
-
-const CapInfoNote = ({ message, style, noteText, type = 'info', className, ...rest }) => {
-  return (
-    <InfoNoteWrapper>
-      <Alert
-        message={(
-          <CapRow className="note-message-container">
-            <Note noteText={noteText} />:
-            <CapRow className="message-text">{message}</CapRow>
-          </CapRow>
-        )}
-        className={className}
-        type={type}
-        showIcon
-        style={{
-          marginTop: '0.857rem',
-          marginBottom: '0.857rem',
-          ...style,
-        }}
-        {...rest}
-      />
-    </InfoNoteWrapper>
-  );
-};
-
-CapInfoNote.propTypes = {
-  message: PropTypes.node,
-  style: PropTypes.object,
-  noteText: PropTypes.string,
-  type: PropTypes.string,
-  className: PropTypes.string,
-};
-
-CapInfoNote.defaultProps = {
-  type: 'info',
-};
-
-export default CapInfoNote;

package/CapInfoNote/index.js

@@ -1 +0,0 @@
-export { default } from './CapInfoNote';

package/CapInfoNote/styles.js

@@ -1,63 +0,0 @@
-import styled from 'styled-components';
-import * as styledVars from '../styled/variables';
-
-export const InfoNoteWrapper = styled.div`
-  .note-text {
-    padding-left: ${styledVars.CAP_SPACE_24};
-    white-space: nowrap;
-    line-height: inherit;
-  }
-
-  .note-message-container {
-    display: flex;
-    .message-text {
-      margin-left: 0.22rem;
-    }
-  }
-
-  .ant-alert {
-    padding: 8px 12px;
-    border-radius: ${styledVars.RADIUS_04};
-    
-    .ant-alert-icon {
-      font-size: ${styledVars.ICON_SIZE_S};
-      top: 9px;
-    }
-
-    &.ant-alert-info {
-      background-color: ${styledVars.CAP_G09};
-      border: 1px solid ${styledVars.CAP_G07};
-
-      .ant-alert-icon {
-        color: ${styledVars.CAP_G01};
-      }
-    }
-
-    &.ant-alert-success {
-      background-color: ${styledVars.CAP_COLOR_01};
-      border: 1px solid ${styledVars.CAP_PRIMARY.base};
-
-      .ant-alert-icon {
-        color: ${styledVars.CAP_PRIMARY.base};
-      }
-    }
-
-    &.ant-alert-warning {
-      background-color: ${styledVars.CAP_COLOR_02};
-      border: 1px solid ${styledVars.CAP_ORANGE};
-
-      .ant-alert-icon {
-        color: ${styledVars.CAP_ORANGE};
-      }
-    }
-
-    &.ant-alert-error {
-      background-color: ${styledVars.CAP_COLOR_05};
-      border: 1px solid ${styledVars.CAP_RED};
-
-      .ant-alert-icon {
-        color: ${styledVars.CAP_RED};
-      }
-    }
-  }
-`;