@capillarytech/blaze-ui 0.1.6-alpha.9 → 0.1.12

package/CapUnifiedSelect/styles.js

@@ -1,21 +1,9 @@
 import styled, { css } from 'styled-components';
 import * as styledVars from '../styled/variables';
 
-export const SelectWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  width: 100%;
-
-  &.disabled {
-    cursor: not-allowed;
-  }
-`;
-
 export const HeaderWrapper = styled.div`
   display: flex;
   align-items: center;
-  gap: 4px;
 
   &.disabled {
     opacity: 0.5;
@@ -23,201 +11,424 @@ export const HeaderWrapper = styled.div`
   }
 `;
 
-
-
-export const StyledInfoIcon = styled.span`
-  color: ${styledVars.CAP_G2};
-  font-size: 16px;
-  cursor: help;
-
-  &:hover {
-    color: ${styledVars.CAP_G1};
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    &:hover {
-      color: ${styledVars.CAP_G2};
-    }
-  }
-`;
-
 export const selectStyles = css`
-  &.cap-unified-select {
-    width: 100%;
-    font-family: ${styledVars.FONT_FAMILY};
-
-    .ant-select-selector {
-      border-radius: ${styledVars.RADIUS_04};
-      transition: ${styledVars.TRANSITION_ALL};
-      padding: 0 12px;
-      min-height: 32px;
-      display: flex;
-      align-items: center;
-      
-      &:hover {
-        border-color: ${styledVars.CAP_G11};
-      }
+  &.cap-unified-select-container {
+    text-align: justify;
+    &.disabled {
+      cursor: not-allowed;
     }
-
-    /* Right slot content styles */
-    .cap-unified-select-right-slot {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin-left: 8px;
+    .cap-unified-select-more-text {
+      cursor: pointer;
+      color: ${styledVars.CAP_G01};
+      margin-right: ${styledVars.SPACING_04};
+      position: relative;
     }
-
-    &.ant-select-focused {
-      .ant-select-selector {
-        border-color: ${styledVars.CAP_G01} !important;
-        box-shadow: none !important;
+    .cap-unified-select-suffix-icon {
+      color: ${styledVars.CAP_G01};
+    }
+    .ant-select-outlined {
+      &:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer) {
+        &:hover {
+          .ant-select-selector {
+            border-color: ${styledVars.CAP_G11};
+          }
+        }
       }
     }
-
-    /* Error state */
-    &.ant-select-status-error {
-      .ant-select-selector {
-        border-color: ${styledVars.CAP_RED};
+    
+    .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;
+    }
+    .ant-select-prefix {
+      font-size: 1rem;
+      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
+      color: ${styledVars.CAP_G01};
+      line-height: 1.429rem;
+    }
+    .cap-unified-select-header-label {
+      font-family: ${styledVars.FONT_FAMILY};
+      font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
+      font-size: 1rem;
+      line-height: 1.429rem;
+      letter-spacing: 0;
+    }
+    .cap-unified-select-header-byline-text {
+      font-family: ${styledVars.FONT_FAMILY};
+      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
+      font-size: 0.857rem;
+      letter-spacing: 0;
+      color: ${styledVars.CAP_G05};
+    }
+    .ant-input-affix-wrapper .ant-input-prefix {
+      left: ${styledVars.SPACING_12};
+    }
+    .cap-tooltip-with-info-icon {
+      margin-top: 0.143rem;
+    }
 
-    /* Disabled state */
-    &.ant-select-disabled {
-      .ant-select-selector {
-        background-color: ${styledVars.CAP_G08};
-        cursor: not-allowed;
+    .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;
+        }
       }
     }
-
-    /* Dropdown styles */
+    
+    .ant-select.ant-select-focused.ant-select-outlined:not(.ant-select-disabled)
+    .ant-select-selector {
+      border-color: ${styledVars.CAP_G11} !important;
+      box-shadow: none;
+      outline: 0;
+    }
+    
+    .ant-btn-variant-solid:not(:disabled):not(.ant-btn-disabled):hover {
+      background-color: ${styledVars.CAP_PRIMARY.base};
+    }
     .ant-select-dropdown {
-      padding: 4px;
+      margin-top: -0.571rem !important;
       border-radius: ${styledVars.RADIUS_04};
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-
-      .ant-select-item {
-        border-radius: ${styledVars.RADIUS_04};
-        padding: 8px 12px;
-        transition: ${styledVars.TRANSITION_ALL};
+      box-shadow:
+      0 0.286rem 0.571rem -0.143rem ${styledVars.CAP_G01},
+      0 0 0.071rem 0 ${styledVars.CAP_G01};
+      max-height: 25.714rem;
+      overflow: visible;
+    }
+    
+    .ant-select-selection-item {
+      background: transparent;
+    }
+    .ant-select-multiple .ant-select-selection-wrap {
+      align-self: center;
+    }
+    .cap-unified-tree-select .ant-select-selector:focus {
+      border: 0.071rem solid ${styledVars.CAP_G11};
+    }
+    .cap-unified-tree-select .ant-select-tree-treenode {
+      padding-left: ${styledVars.SPACING_04};
+    }
+    .cap-unified-select-status {
+      color: ${styledVars.CAP_RED};
+    }
+  }
 
-        &-option-selected {
-          background-color: ${styledVars.CAP_PRIMARY.light};
-          color: ${styledVars.CAP_PRIMARY.base};
-          font-weight: 500;
-        }
+  /* Common styles for all types */
+  &.custom-popup-container {
+    width: max-content;
 
-        &-option-active {
-          background-color: ${styledVars.CAP_G08};
+    .ant-select-tree {
+      .ant-select-tree-node-content-wrapper {
+        background-color: transparent;
+        height: 100%;
+        .cap-unified-select-option-with-suffix{
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          width: 100%;
+          height: 100%;
+          .cap-unified-select-option-label{
+            flex: 1;
+            max-width: 9.286rem;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            display: block;
+          }
+          .cap-unified-select-option-suffix{
+            display: flex;
+            align-items: center;
+            padding: 0 ${styledVars.SPACING_08};
+            max-height: 1.429rem;
+            white-space: nowrap;
+            margin-left: ${styledVars.SPACING_08};
+          }
+          .cap-tooltip-with-info-icon{
+            margin-top: 0.357rem;
+          }
         }
       }
-
-      /* Search input styles */
-      .ant-select-search {
-        padding: 8px;
-        
-        input {
+      .ant-select-tree-node-content-wrapper:hover {
+        background-color: transparent;
+      }
+      .ant-select-tree-treenode {
+        height: 3.429rem;
+        margin-bottom: 0;
+        .ant-select-tree-checkbox .ant-select-tree-checkbox-inner {
+          height: 1.286rem;
+          width: 1.286rem;
+          border: 0.143rem solid ${styledVars.CAP_G06};
           border-radius: ${styledVars.RADIUS_04};
-          transition: ${styledVars.TRANSITION_ALL};
-          
-          &:focus {
-            border-color: ${styledVars.CAP_G01};
-            box-shadow: none;
-          }
+        }
+        &:hover {
+          background-color: #fffbe6;
+        }
+        &:not(.ant-select-tree-treenode-disabled)
+          .ant-select-tree-node-content-wrapper:hover {
+          background-color: none;
         }
       }
-    }
-
-    /* Multiple selection styles */
-    &.ant-select-multiple {
-      .ant-select-selection-item {
-        background-color: ${styledVars.CAP_PRIMARY.light};
-        border-color: ${styledVars.CAP_PRIMARY.light};
-        border-radius: ${styledVars.RADIUS_04};
-        color: ${styledVars.CAP_PRIMARY.base};
-        margin: 2px 4px 2px 0;
-        padding: 0 8px;
-        height: 24px;
-        line-height: 22px;
-
-        &-remove {
-          color: ${styledVars.CAP_PRIMARY.base};
-          
-          &:hover {
-            color: ${styledVars.CAP_PRIMARY.hover};
-          }
+      .ant-select-tree-node-content-wrapper {
+        border-radius: 0;
+        padding-left: 0.214rem;
+      }
+      .ant-select-tree-indent {
+        margin-left: ${styledVars.SPACING_12};
+      }
+      .ant-select-tree-switcher:not(
+          .ant-select-tree-switcher-noop
+        ):hover:before {
+        background-color: transparent;
+      }
+      .ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner {
+        background-color: ${styledVars.CAP_PRIMARY.base};
+        border: 0.143rem solid ${styledVars.CAP_PRIMARY.base} !important;
+        &:hover {
+          background-color: ${styledVars.CAP_PRIMARY.base};
+          border: 0.143rem solid ${styledVars.CAP_PRIMARY.base} !important;
         }
       }
-
-      .ant-select-selection-overflow {
-        flex-wrap: wrap;
-        gap: 4px;
+      .ant-select-tree-switcher .ant-select-tree-switcher-icon {
+        font-size: 0.857rem;
+        margin-top: 1.286rem;
       }
     }
+    .ant-select-tree-checkbox.ant-select-tree-checkbox-indeterminate
+      .ant-select-tree-checkbox-inner {
+      background-color: ${styledVars.CAP_PRIMARY.base} !important;
+      border-color: ${styledVars.CAP_PRIMARY.base} !important;
+    }
 
-    /* Tree select styles */
-    .ant-select-tree {
-      padding: 4px 0;
-
-      .ant-select-tree-node-content-wrapper {
-        padding: 4px 8px;
-        border-radius: ${styledVars.RADIUS_04};
-        transition: ${styledVars.TRANSITION_ALL};
+    .ant-select-tree-checkbox.ant-select-tree-checkbox-indeterminate
+      .ant-select-tree-checkbox-inner::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 0.714rem;
+      height: 0.143rem;
+      background-color: ${styledVars.CAP_WHITE};
+      transform: translate(-50%, -50%);
+      border-radius: 0.071rem;
+    }
+    .cap-unified-select-upload-container {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      border-bottom: 0.071rem solid ${styledVars.CAP_G08};
+      height: 2.857rem;
+      padding-left: ${styledVars.SPACING_16};
 
-        &:hover {
-          background-color: ${styledVars.CAP_G08};
+      .cap-unified-select-upload-label {
+        margin-left: ${styledVars.SPACING_12};
+        color: ${styledVars.CAP_SECONDARY.base};
+      }
+    }
+    .cap-unified-select-select-all-container {
+      padding: 0.643rem 1.071rem;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      border-bottom: 0.071rem solid ${styledVars.CAP_G08};
+      height: 2.857rem;
+      .cap-unified-select-select-all-checkbox {
+        display: contents !important;
+        .ant-checkbox-inner {
+          height: 1.286rem;
+          width: 1.286rem;
+          border: 0.143rem solid ${styledVars.CAP_G06};
+          border-radius: ${styledVars.RADIUS_04};
         }
+      }
+      .ant-checkbox-wrapper:not(.ant-checkbox-wrapper-disabled):hover
+        .ant-checkbox-checked:not(.ant-checkbox-disabled)
+        .ant-checkbox-inner {
+        background-color: ${styledVars.CAP_PRIMARY.base};
+        border: 0.143rem solid ${styledVars.CAP_PRIMARY.base} !important;
+      }
+      .ant-checkbox-indeterminate .ant-checkbox-inner {
+        background-color: ${styledVars.CAP_PRIMARY.base} !important;
+        border-color: ${styledVars.CAP_PRIMARY.base} !important;
+      }
+      .ant-checkbox-indeterminate .ant-checkbox-inner::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 0.714rem;
+        height: 0.143rem;
+        background-color: ${styledVars.CAP_WHITE};
+        transform: translate(-50%, -50%);
+        border-radius: 0.071rem;
+      }
+    }
+    .ant-select-tree-treenode.ant-select-tree-treenode-selected {
+      background-color: ${styledVars.CAP_PALE_GREY};
+    }
+    .ant-select-tree-list-holder-inner {
+      width: fit-content !important;
+      min-width: 100%;
+    }
+    .cap-unified-select-no-result {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 14.286rem;
+      color: ${styledVars.CAP_G05};
+      font-size: 1rem;
+    }
+    .cap-unified-select-no-result-icon {
+      font-size: 2.571rem;
+      margin-bottom: ${styledVars.SPACING_08};
+      color: ${styledVars.CAP_G06};
+    }
+    .cap-unified-select-no-result-text {
+      font-weight: 500;
+    }
+    .ant-tree-select:hover .ant-select-selector {
+      border-color: ${styledVars.CAP_G11};
+    }
+    .ant-tree-select-focused .ant-select-selector,
+    .ant-tree-select-open .ant-select-selector {
+      border-color: ${styledVars.CAP_G11};
+      box-shadow: none;
+      outline: none;
+    }
+    .cap-unified-select-search-container {
+      border-bottom: 0.071rem solid ${styledVars.CAP_G08} !important;
+      line-height: 2.857rem !important;
+      .ant-input-affix-wrapper {
+        padding-left: ${styledVars.SPACING_08};
+      }
+    }
+    .cap-unified-select-upload-button {
+      border: none;
+      padding-left: 1.071rem;
+    }
+    .cap-unified-select-confirm-container {
+      display: flex;
+      align-items: center;
+      height: 3.429rem;
+      padding: 0.5rem;
+      border-top: 0.071rem solid ${styledVars.CAP_G08};
+    }
+    .cap-unified-select-confirm-button-group {
+      display: flex;
+      padding-left: ${styledVars.SPACING_08};
+      align-items: center;
+      .cap-unified-select-confirm-button {
+        background-color: ${styledVars.CAP_GREEN01};
+        height: 2.286rem;
+        width: 6.714rem;
+      }
+      .cap-unified-select-cancel-button {
+        border: transparent;
+        box-shadow: none;
+        width: 5.714rem;
+      }
+    }
+    .cap-unified-select-selected-count {
+      display: flex;
+      margin-left: auto; /* pushes to far right */
+      font-size: 0.857rem;
+      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
+      line-height: 1.143rem;
+      color: ${styledVars.CAP_G04};
+    }
+    .cap-unified-select-search-container {
+      .ant-input-affix-wrapper {
+        border: none;
+        box-shadow: none;
+        border-radius: 0;
+              border-bottom: 0.071rem solid transparent;
+      transition: border-color 0.2s ease;
+      }
 
-        &.ant-select-tree-node-selected {
-          background-color: ${styledVars.CAP_PRIMARY.light};
-          color: ${styledVars.CAP_PRIMARY.base};
-          font-weight: 500;
-        }
+      .ant-input-affix-wrapper:hover {
+        border-bottom: 0.071rem solid ${styledVars.CAP_G11} !important;
+        box-shadow: none;
       }
 
-      .ant-select-tree-switcher {
-        width: 24px;
-        height: 24px;
-        line-height: 24px;
+      .ant-input-affix-wrapper:focus-within {
+        border-bottom: 0.071rem solid ${styledVars.CAP_G01} !important;
+        box-shadow: none;
+        outline: none;
       }
 
-      .ant-select-tree-checkbox {
-        margin: 4px 8px 4px 0;
+      .ant-input {
+        border: none !important;
+        box-shadow: none !important;
       }
     }
-
-    /* Size variations */
-    &.ant-select-lg {
-      .ant-select-selector {
-        height: 40px;
-        padding: 0 16px;
+    .cap-unified-select-tree-clear-container{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 2.857rem;
+      border-top: 0.071rem solid #EBECF0;
+      cursor: pointer;
+      color: ${styledVars.CAP_G01};
+      &:hover{
+        background-color: ${styledVars.CAP_G08};
       }
-
-      .ant-select-selection-item {
-        height: 28px;
-        line-height: 26px;
+      .cap-unified-select-tree-clear-label{
+        font-size: 1rem;
+        font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
       }
     }
+  }
 
-    &.ant-select-sm {
-      .ant-select-selector {
-        height: 24px;
-        padding: 0 8px;
+  &.custom-popup-container {
+    /* Multi Select */
+    .multiSelect-popup-container {
+      .ant-select-tree-list {
+        .ant-select-tree-treenode-leaf {
+          .ant-select-tree-switcher-noop {
+            display: none;
+          }
+        }
       }
-
-      .ant-select-selection-item {
-        height: 20px;
-        line-height: 18px;
+      .ant-select-tree-indent {
+          margin-left: 1.071rem;
       }
     }
+    .multiTreeSelect-popup-container {
+        min-width: 20rem;
+    }
+    .treeSelect-popup-container {
+        min-width: 20rem;
+    }
 
-    /* Loading state */
-    &.ant-select-loading {
-      .ant-select-arrow {
-        .anticon-loading {
-          color: ${styledVars.CAP_PRIMARY.base};
+    /* Single Select */
+    .select-popup-container {
+      .ant-select-tree-list {
+        .ant-select-tree-treenode-leaf {
+          .ant-select-tree-switcher-noop {
+            display: none;
+          }
         }
       }
     }
   }
-`; 
+`;

package/assets/upload.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.00031 13.0631V3.79511L4.46431 6.33111C4.07431 6.72111 3.44131 6.72111 3.05031 6.33111C2.65931 5.94011 2.65931 5.30711 3.05031 4.91611L7.29331 0.674109C7.68331 0.283109 8.31631 0.283109 8.70731 0.674109L12.9493 4.91611C13.3403 5.30711 13.3403 5.94011 12.9493 6.33111C12.5593 6.72111 11.9263 6.72111 11.5353 6.33111L9.00031 3.79511V13.0631C9.00031 13.5761 8.55231 13.9911 8.00031 13.9911C7.44731 13.9911 7.00031 13.5761 7.00031 13.0631ZM14.9975 12.9942C15.5495 12.9942 15.9975 13.4412 15.9975 13.9942V16.9302C15.9985 16.9502 15.9995 16.9712 15.9995 16.9912C15.9995 17.0342 15.9965 17.0772 15.9895 17.1192C15.9285 17.6122 15.5075 17.9942 14.9975 17.9942C14.9565 17.9942 14.9175 17.9922 14.8785 17.9872C14.8405 17.9902 14.8015 17.9912 14.7625 17.9912H1.23751C1.21394 17.9912 1.19217 17.9861 1.1704 17.981C1.15245 17.9768 1.13449 17.9726 1.11551 17.9712C1.10076 17.9725 1.0868 17.9767 1.07275 17.9809C1.05538 17.986 1.03786 17.9912 1.01851 17.9912C0.606512 17.9912 0.253512 17.7412 0.101512 17.3852C0.0365117 17.2642 -0.000488281 17.1312 -0.000488281 16.9912C-0.000488281 16.9769 0.00426292 16.9638 0.00903728 16.9506C0.013294 16.9388 0.017569 16.9269 0.0185117 16.9142V13.9912C0.0185117 13.4382 0.466512 12.9912 1.01851 12.9912C1.57151 12.9912 2.01851 13.4382 2.01851 13.9912V15.9912H13.9975V13.9942C13.9975 13.4412 14.4455 12.9942 14.9975 12.9942Z" fill="#2466EA"/>
+</svg>

package/index.js

@@ -1,10 +1,21 @@
 // Import and export all components
+export { default as CapIcon } from './CapIcon';
 export { default as CapInput } from './CapInput';
+export { default as CapLabel } from './CapLabel';
+export { default as CapRow } from './CapRow';
+export { default as CapSkeleton } from './CapSkeleton';
+export { default as CapSpin } from './CapSpin';
 export { default as CapTable } from './CapTable';
+export { default as CapTooltip } from './CapTooltip';
+export { default as CapTooltipWithInfo } from './CapTooltipWithInfo';
+export { default as CapUnifiedSelect } from './CapUnifiedSelect';
 
 // Export utilities
 export { default as LocaleHoc } from './LocaleHoc';
 
 // Export styled utilities
 export * as styledVars from './styled/variables';
-export { default as styled } from './styled'; 
+export { default as styled } from './styled';
+
+// Export utils
+export * as Utils from './utils';

package/package.json

@@ -1,11 +1,9 @@
 {
   "name": "@capillarytech/blaze-ui",
   "author": "Capillary Technologies",
-  "version": "0.1.6-alpha.9",
+  "version": "0.1.12",
   "description": "Capillary UI component library with Ant Design v5",
-  "main": "./dist/index.js",
-  "module": "./dist/esm/index.js",
-  "jsnext:main": "./dist/esm/index.js",
+  "main": "./index.js",
   "sideEffects": [
     "*.css",
     "*.less",
@@ -26,16 +24,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": {
-    "antd": "^5.12.0",
-    "@ant-design/icons": "^5.2.6",
+    "@ant-design-v5/icons": "npm:@ant-design/icons@^5.2.6",
     "@capillarytech/cap-ui-utils": "^3.0.4",
+    "antd-v5": "npm:antd@^5.26.7",
     "prop-types": "^15.8.1",
+    "react-intl": "2.7.2",
     "styled-components": "^5.3.11"
   }
 }

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";

package/utils/index.js

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