sccoreui 5.2.0 → 5.2.1

package/dist/App.scss

@@ -632,7 +632,7 @@ button#formatOLOptions-1.fr-active::before {
 }
 
 
-.fr-buttons.fr-tabs{
+.fr-buttons.fr-tabs {
   display: none;
 }
 
@@ -641,17 +641,19 @@ button#formatOLOptions-1.fr-active::before {
 }
 
 .fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active {
-  background: #f9fafb   !important;
+  background: #f9fafb !important;
 }
 
-button[data-cmd="fontFamily"]:focus{
+button[data-cmd="fontFamily"]:focus {
   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--primary-100);
   border: 1px solid var(--primary-300) !important;
   background: none !important;
 }
+
 .text-editor {
   border: 1px solid #d0d5dd;
-    border-radius: 10px;
+  border-radius: 10px;
+
   * {
     border: none !important;
   }
@@ -668,8 +670,9 @@ button[data-cmd="fontFamily"]:focus{
 }
 
 
-button[data-cmd='fontFamily']{
+button[data-cmd='fontFamily'] {
   border: 1px solid var(--gray-300) !important;
+
   &::before {
     content: '';
     border: 1.8px solid #0b0c12;
@@ -709,6 +712,7 @@ button[aria-expanded="true"] {
     padding-left: 0 !important;
     padding-right: 0 !important;
   }
+
   .p-tree-toggler {
     display: none;
   }
@@ -717,7 +721,7 @@ button[aria-expanded="true"] {
     background: var(--Gray-100, #F2F4F7) !important;
   }
 
-  .p-treenode-content:hover{
+  .p-treenode-content:hover {
     background: var(--Primary-25, #F5F6FD) !important;
   }
 
@@ -747,6 +751,7 @@ button[aria-expanded="true"] {
     }
   }
 }
+
 /// Custon treeDropdownSelect style end /////////////////
 
 /////// Custom list_box_dropdown ///////////
@@ -795,6 +800,7 @@ button[aria-expanded="true"] {
   display: inline-block;
   align-items: center;
   list-style: none;
+
   li {
     float: left;
     height: 24px;
@@ -804,15 +810,41 @@ button[aria-expanded="true"] {
 /////// Custom list_box_dropdown ///////////
 
 //ScMulti Select//
-.sc_multiSelect .p-multiselect-clear-icon {
-  right: 42px !important;
+.sc_multiSelect {
+  height: 40px !important;
+
+  .p-multiselect-clear-icon {
+    right: 42px !important;
+  }
+
+  .p-multiselect-label {
+    line-height: 38px !important;
+  }
 }
 
-.sc_multiSelect.hideChipremoveIcon  {
+.sc_multiSelect.hideChipremoveIcon {
   .p-multiselect-token {
     svg {
       display: none;
     }
   }
 }
+
+.sc_multiSelect_panel {
+  .p-multiselect-items {
+    padding: 4px !important;
+
+    .p-highlight::after {
+      content: '';
+      width: 12px;
+      height: 6px;
+      border: solid #162578;
+      border-width: 1.9px;
+      border-top: 0;
+      border-right: 0;
+      transform: rotate(-45deg);
+    }
+  }
+}
+
 //////////////////////////////////////////////

package/dist/components/sc-multi-select/scMultiSelect.js

@@ -4,7 +4,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const sccoreui_1 = require("sccoreui");
 const ScMultiSelect = (props) => {
     var _a, _b;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full relative" }, { children: [(0, jsx_runtime_1.jsx)(sccoreui_1.MultiSelect, { onShow: () => props === null || props === void 0 ? void 0 : props.onShow, onHide: () => props === null || props === void 0 ? void 0 : props.onHide, dropdownIcon: props === null || props === void 0 ? void 0 : props.dropdownIcon, showClear: props === null || props === void 0 ? void 0 : props.showClear, display: props === null || props === void 0 ? void 0 : props.display, value: props === null || props === void 0 ? void 0 : props.value, onChange: (e) => props === null || props === void 0 ? void 0 : props.onChange(e), options: props === null || props === void 0 ? void 0 : props.options, optionLabel: props === null || props === void 0 ? void 0 : props.optionLabel, placeholder: props === null || props === void 0 ? void 0 : props.placeholder, className: (props === null || props === void 0 ? void 0 : props.className) + ` ${(props === null || props === void 0 ? void 0 : props.removeChipIcon) ? 'hideChipremoveIcon' : ''}  sc_multiSelect`, id: props === null || props === void 0 ? void 0 : props.id }), (props === null || props === void 0 ? void 0 : props.showSelectedCount) &&
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full relative" }, { children: [(0, jsx_runtime_1.jsx)(sccoreui_1.MultiSelect, { panelClassName: "sc_multiSelect_panel", onShow: () => props === null || props === void 0 ? void 0 : props.onShow, onHide: () => props === null || props === void 0 ? void 0 : props.onHide, dropdownIcon: props === null || props === void 0 ? void 0 : props.dropdownIcon, showClear: props === null || props === void 0 ? void 0 : props.showClear, display: props === null || props === void 0 ? void 0 : props.display, value: props === null || props === void 0 ? void 0 : props.value, onChange: (e) => props === null || props === void 0 ? void 0 : props.onChange(e), options: props === null || props === void 0 ? void 0 : props.options, optionLabel: props === null || props === void 0 ? void 0 : props.optionLabel, placeholder: props === null || props === void 0 ? void 0 : props.placeholder, className: (props === null || props === void 0 ? void 0 : props.className) + ` ${(props === null || props === void 0 ? void 0 : props.removeChipIcon) ? 'hideChipremoveIcon' : ''}  sc_multiSelect`, id: props === null || props === void 0 ? void 0 : props.id }), (props === null || props === void 0 ? void 0 : props.showSelectedCount) &&
                     (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "absolute top-0 h-full text-center flex align-items-center w-2rem justify-content-center", style: { right: `${(props === null || props === void 0 ? void 0 : props.showClear) ? '68px' : '40px'}` } }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-primary-50 border-round-sm text-base" }, { children: (((_a = props === null || props === void 0 ? void 0 : props.value) === null || _a === void 0 ? void 0 : _a.length) > 0) && `+${(_b = props === null || props === void 0 ? void 0 : props.value) === null || _b === void 0 ? void 0 : _b.length}` })) }))] })) }));
 };
 exports.default = ScMultiSelect;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sccoreui",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "description": "ui-sccore",
   "main": "./dist/index.js",
   "module": "./dist/index.js",