@vitrosoftware/common-ui-ts 1.1.50 → 1.1.52

package/dist/index.css

@@ -50,60 +50,6 @@
         align-items: flex-start;
     }
 }
-._scrollbar_vitro-scrollbar-content_3HXSt5u {
-    height: 100%;
-    width: 100%;
-}
-
-.ps {
-    position: relative;
-    width: 100%;
-    height: 100%;
-}
-
-.ps__rail-y {
-    background-color: #fff !important;
-    width: 12px !important;
-    border-left: 1px solid #F7F9FC;
-    border-top: 1px solid #F7F9FC;
-    opacity: 1 !important;
-}
-
-.ps__rail-x {
-    background-color: #fff !important;
-    height: 12px !important;
-    border-top: 1px solid #F7F9FC;
-    opacity: 1 !important;
-}
-
-.ps__thumb-x, .ps__thumb-y {
-    background-color: #E4E6EC !important;
-    border-radius: 4px;
-}
-
-.ps__thumb-y {
-    width: 4px !important;
-    right: 3px !important;
-}
-
-.ps__thumb-x {
-    height: 4px !important;
-    top: 3px !important;
-}
-
-.ps .ps__rail-x:hover, .ps .ps__rail-y:hover, .ps .ps__rail-x:focus, 
-.ps .ps__rail-y:focus, .ps .ps__rail-x.ps--clicking, .ps .ps__rail-y.ps--clicking {
-    background-color: #fff;
-    opacity: 1;
-}
-
-.ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y {
-    background-color: #E4E6EC;
-}
-
-.ps__rail-x:hover > .ps__thumb-x, .ps__rail-x:focus > .ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x {
-    background-color: #E4E6EC;
-}
 ._breadcrumbs_vitro-breadcrumbs_3r4NcQY {
     display: flex;
     flex-direction: column;
@@ -112,6 +58,17 @@
     height: 24px;
 }
 
+._breadcrumbs_vitro-breadcrumbs_3r4NcQY li {
+    list-style-type: none;
+    display: flex;
+    align-items: center;
+}
+
+._breadcrumbs_vitro-breadcrumbs_3r4NcQY li > div {
+    display: inline-flex;
+    align-items: center;
+}
+
 ._breadcrumbs_vitro-breadcrumbs-list-wrap_1_JBrw0 {
     display: flex;
     position: relative;
@@ -136,8 +93,8 @@
     align-items: center;
 }
 
-._breadcrumbs_vitro-breadcrumbs-list_1SNtgtJ > li::after, ._breadcrumbs_vitro-breadcrumbs-button_3fazq3c::after, ._breadcrumbs_vitro-root_1S5-6AY::after {
-    content: '';
+._breadcrumbs_vitro-separator_3RKZZBc,
+._breadcrumbs_vitro-breadcrumbs-button_3fazq3c::after {
     display: inline-block;
     margin: 0 4px;
     height: 16px;
@@ -149,15 +106,17 @@
     background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 12.1851C6 12.3633 6.21543 12.4525 6.34142 12.3265L10.5252 8.14272C10.6034 8.06462 10.6034 7.93799 10.5252 7.85988L6.34142 3.67606C6.21543 3.55006 6 3.6393 6 3.81748L6 12.1851Z' fill='%238E98A3'/%3E%3C/svg%3E%0A");
 }
 
+._breadcrumbs_vitro-breadcrumbs-button_3fazq3c::after {
+    content: '';
+    margin-left: 24px;
+    height: 20px;
+}
+
 ._breadcrumbs_vitro-breadcrumbs-list_1SNtgtJ > li:last-child{
     color: #222D44;
     font-family: 'InterMedium';
 }
 
-._breadcrumbs_vitro-breadcrumbs-list_1SNtgtJ > li:last-child::after {
-    display: none;
-}
-
 ._breadcrumbs_vitro-breadcrumbs-button_3fazq3c {
     height: 20px;
     width: 20px;
@@ -172,21 +131,17 @@
 
 ._breadcrumbs_vitro-root_1S5-6AY {
     cursor: pointer;
-    margin-right: 24px;
     list-style-type: none;
     line-height: 16px;
     background-repeat: no-repeat;
     width: 20px;
+    height: 20px;
+    display: inline-block;
     background-size: 100%;
     /* root-folder.svg URL-encoder for SVG */
     background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6464 5.35355C10.7402 5.44732 10.8674 5.5 11 5.5H19C20.3807 5.5 21.5 6.61929 21.5 8V18C21.5 19.3807 20.3807 20.5 19 20.5H5C3.61929 20.5 2.5 19.3807 2.5 18V6C2.5 4.61929 3.61929 3.5 5 3.5H7.75736C8.4204 3.5 9.05629 3.76339 9.52513 4.23223L10.6464 5.35355Z' stroke='%23999B9D' stroke-linejoin='round'/%3E%3Cpath d='M8 16L12 10' stroke='%23999B9D' stroke-linecap='round'/%3E%3Cpath d='M12 16L16 16' stroke='%23999B9D' stroke-linecap='round'/%3E%3C/svg%3E%0A") !important;
 }
 
-._breadcrumbs_vitro-root_1S5-6AY::after, ._breadcrumbs_vitro-breadcrumbs-button_3fazq3c::after {
-    margin-left: 24px;
-    height: 20px;
-}
-
 ._breadcrumbs_vitro-drop-down-list_2PhrR2a {
     z-index: 1000;
     background: white;
@@ -225,6 +180,7 @@
     color: #4A556C;
     margin-bottom: 0px;
     overflow: hidden;
+    border-radius: 4px;
 }
 
 ._breadcrumbs_vitro-drop-down-list_2PhrR2a ul li {
@@ -243,6 +199,60 @@
         margin-bottom: 12px;
     }
 }
+._scrollbar_vitro-scrollbar-content_3HXSt5u {
+    height: 100%;
+    width: 100%;
+}
+
+.ps {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.ps__rail-y {
+    background-color: #fff !important;
+    width: 12px !important;
+    border-left: 1px solid #F7F9FC;
+    border-top: 1px solid #F7F9FC;
+    opacity: 1 !important;
+}
+
+.ps__rail-x {
+    background-color: #fff !important;
+    height: 12px !important;
+    border-top: 1px solid #F7F9FC;
+    opacity: 1 !important;
+}
+
+.ps__thumb-x, .ps__thumb-y {
+    background-color: #E4E6EC !important;
+    border-radius: 4px;
+}
+
+.ps__thumb-y {
+    width: 4px !important;
+    right: 3px !important;
+}
+
+.ps__thumb-x {
+    height: 4px !important;
+    top: 3px !important;
+}
+
+.ps .ps__rail-x:hover, .ps .ps__rail-y:hover, .ps .ps__rail-x:focus, 
+.ps .ps__rail-y:focus, .ps .ps__rail-x.ps--clicking, .ps .ps__rail-y.ps--clicking {
+    background-color: #fff;
+    opacity: 1;
+}
+
+.ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y {
+    background-color: #E4E6EC;
+}
+
+.ps__rail-x:hover > .ps__thumb-x, .ps__rail-x:focus > .ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x {
+    background-color: #E4E6EC;
+}
 ._top-level-menu_vitro-top-level-menu_38-ZEUx {
     display: flex;
     justify-content: space-between;
@@ -1765,6 +1775,7 @@
 ._input_vitro-control_1DmPFkF input,
 ._input_vitro-control_1DmPFkF textarea {
     width: 100%;
+    min-height: 40px;
     padding: 8px 16px;
     background: #fff;
     border: 1px solid #C0CAD5;
@@ -1776,7 +1787,6 @@
 }
 
 ._input_vitro-control_1DmPFkF input {
-    min-height: 40px;
     white-space: normal;
 }
 
@@ -2093,8 +2103,8 @@
 ._checkbox_vitro-checkbox-content_2fBG1zl input:checked::before {
     content: '';
     display: block;
-    width: 24px;
-    height: 24px;
+    width: 100%;
+    height: 100%;
     background: #fff;
     background-size: 100%;
     background-position: center;
@@ -4429,6 +4439,7 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
 
 ._tooltip_vitro-tooltip_JvGPShz {
     display: none !important;
+    opacity: 1;
 }
 
 ._tooltip_vitro-tooltip_JvGPShz[style*='transform'] {
@@ -4445,6 +4456,8 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
     background: #4A556C;
     box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 6px 0px rgba(0, 0, 0, 0.10);
     max-width: 224px;
+    text-align: left;
+    white-space: pre-wrap;
 }
 
 ._tooltip_vitro-tooltip_JvGPShz .tooltip-arrow::before {
@@ -4945,7 +4958,7 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
 ._input_vitro-control__btu7j_ {
     height: 32px;
     border-radius: 4px;
-    border: 1px solid #4A556C;
+    border: 1px solid #C0CAD5;
     padding: 4px 8px;
     display: flex;
     align-items: center;
@@ -4961,46 +4974,54 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
 
 ._input_vitro-control__btu7j_ input {
     border: none;
+    width: 100%;
 }
 
 ._input_vitro-control__btu7j_ input::-moz-placeholder {
-    color: #8E98A3;
+    color: #4A556C;
     font-size: 14px;
     line-height: 16px;
     font-weight: 400 !important;
 }
 
 ._input_vitro-control__btu7j_ input::placeholder {
-    color: #8E98A3;
+    color: #4A556C;
     font-size: 14px;
     line-height: 16px;
     font-weight: 400 !important;
 }
 
-._input_vitro-search-value-list_2I_KVY5 {
-    display: flex;
-    align-items: center;
-    flex: 1 1;
-    overflow: hidden;
-}
-
-._input_vitro-search-value-list_2I_KVY5::before {
-    content: '';
+._input_vitro-button-search_15PeWCS {
     width: 24px;
     height: 24px;
+    border: none;
+    outline: none;
     flex-shrink: 0;
+    background-color: #fff;
     background-size: 100%;
     background-position: center;
     margin-right: 8px;
-    /* search-grey.svg URL-encoder for SVG */
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='circum:search'%3E%3Cpath id='Vector' d='M18.3236 18.8832C18.6858 19.2434 19.2449 18.6875 18.8827 18.3351L15.9297 15.3909C16.9656 14.2512 17.5381 12.7692 17.5361 11.233C17.5361 7.79544 14.725 5 11.2681 5C7.81118 5 5 7.79544 5 11.233C5 14.6705 7.81118 17.4659 11.2681 17.4659C12.8272 17.4659 14.2682 16.8943 15.3707 15.9468L18.3236 18.8832ZM5.78666 11.233C5.78666 8.22611 8.25136 5.78304 11.2673 5.78304C14.2911 5.78304 16.7479 8.22611 16.7479 11.233C16.7479 14.2398 14.2911 16.6829 11.2673 16.6829C8.25136 16.6829 5.78666 14.2398 5.78666 11.233Z' fill='%238E98A3'/%3E%3C/g%3E%3C/svg%3E%0A");
-}
-
-._input_vitro-active_jxhGdE8 ._input_vitro-search-value-list_2I_KVY5::before {
     /* search.svg URL-encoder for SVG */
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='circum:search'%3E%3Cpath id='Vector' d='M18.3236 18.8832C18.6858 19.2434 19.2449 18.6875 18.8827 18.3351L15.9297 15.3909C16.9656 14.2512 17.5381 12.7692 17.5361 11.233C17.5361 7.79544 14.725 5 11.2681 5C7.81118 5 5 7.79544 5 11.233C5 14.6705 7.81118 17.4659 11.2681 17.4659C12.8272 17.4659 14.2682 16.8943 15.3707 15.9468L18.3236 18.8832ZM5.78666 11.233C5.78666 8.22611 8.25136 5.78304 11.2673 5.78304C14.2911 5.78304 16.7479 8.22611 16.7479 11.233C16.7479 14.2398 14.2911 16.6829 11.2673 16.6829C8.25136 16.6829 5.78666 14.2398 5.78666 11.233Z' fill='%23222D44'/%3E%3C/g%3E%3C/svg%3E");
 }
 
+._input_vitro-button-search_15PeWCS:hover,
+._input_vitro-button-search_15PeWCS:active,
+._input_vitro-button-search_15PeWCS:focus {
+    background-color: #fff;
+}
+
+._input_vitro-active_jxhGdE8 ._input_vitro-search-value-list_2I_KVY5 {
+    width: 262px;
+}
+
+._input_vitro-search-value-list_2I_KVY5 {
+    display: flex;
+    align-items: center;
+    flex: 1 1;
+    overflow: hidden;
+}
+
 ._input_vitro-button-cancel_YqNZPj-,
 ._input_vitro-button-settings_1w9FwYt,
 ._input_vitro-button-cancel_YqNZPj-:hover,
@@ -5012,7 +5033,7 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
     background-size: 100%;
     background-position: center;
     margin-left: 8px;
-    background-color: #fff;
+    background-color: transparent;
 }
 
 ._input_vitro-button-settings_1w9FwYt {
@@ -5034,7 +5055,11 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
 ._input_vitro-search-value_1ZbcNTJ {
     border-radius: 4px;
     background: #F7F9FC;
-    padding: 4px;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    grid-gap: 8px;
+    padding: 0 4px;
     font-size: 14px;
     line-height: 16px;
     margin-right: 4px;
@@ -5042,7 +5067,31 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
     overflow: hidden;
     text-overflow: ellipsis;
 }
-
+
+._input_vitro-search-value_1ZbcNTJ ._input_vitro-button-cancel_YqNZPj- {
+    margin: 0;
+    /* close.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='iconoir:cancel'%3E%3Cpath id='Vector' d='M6.75781 17.2438L12.0008 12.0008L17.2438 17.2438M17.2438 6.75781L11.9998 12.0008L6.75781 6.75781' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+@media (max-width: 800px) {
+    ._input_vitro-control__btu7j_,
+    ._input_vitro-control__btu7j_._input_vitro-active_jxhGdE8 {
+        border: none;
+        padding: 0;
+    }
+
+    ._input_vitro-button-search_15PeWCS {
+        margin: 0;
+        height: 32px;
+        width: 32px;
+        border-radius: 4px;
+    }
+
+    ._input_vitro-active_jxhGdE8._input_vitro-button-search_15PeWCS {
+        background-color: #DCEEFF;
+    }
+}
 .vitro-inline {
     display: inline-flex;
     flex: 1 1;
@@ -5066,7 +5115,6 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
     align-self: baseline;
     margin-right: 16px;
     margin-left: auto;
-    max-width: 50%;
 }
 
 ._search_vitro-settings-dialog_1_c5bIg {
@@ -5092,6 +5140,7 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
 
 ._search_vitro-add-field_2hHt1Z2 {
     position: relative;
+    margin-bottom: 16px;
 }
 
 ._search_vitro-add-field-button_30hdXYn,
@@ -5131,12 +5180,19 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
     background: #fff !important;
     color: #222D44 !important;
     font-family: 'InterRegular' !important;
+    border: 1px solid #E4E6EC !important;
 }
 
 ._search_vitro-button-cancel_1M8UkMM:hover,
 ._search_vitro-button-cancel_1M8UkMM:active {
     background: #F3F8FF !important;
 }
+
+@media (max-width: 800px) {
+    ._search_vitro-filter_2n-Y-mS {
+        width: 100%;
+    }
+}
 
 ._checkbox-list_vitro-checkbox-list_1iZSkkv {
     border-radius: 4px;
@@ -5151,6 +5207,12 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
 
 ._checkbox-list_vitro-checkbox-list_1iZSkkv ._checkbox-list_vitro-checkbox_1EqsnoQ {
     margin-bottom: 4px;
+    height: 24px;
+}
+
+._checkbox-list_vitro-checkbox-list_1iZSkkv ._checkbox-list_vitro-checkbox_1EqsnoQ input {
+    width: 16px;
+    height: 16px;
 }
 
 ._checkbox-list_vitro-checkbox_1EqsnoQ:last-child,

package/dist/index.d.ts

@@ -61,6 +61,7 @@ import { ActivityItem, ActivityItemProps } from './controls/ActivityItem/Activit
 import { ActivityMessage } from './controls/ActivityItem/ActivityMessage';
 import { Icon } from './controls/Icon/Icon';
 import { EVENT } from './constants/Event';
+import { CONTROL } from './constants/Control';
 import { ScrollBar } from './controls/ScrollBar/ScrollBar';
 import { MessageInput } from './controls/MessageInput/MessageInput';
 import { ImagePicker } from './controls/ImagePicker/ImagePicker';
@@ -111,3 +112,4 @@ export { Criterion };
 export { Search, SearchCriterion };
 export { FieldIterator };
 export { Tooltip, TOOLTIP };
+export { CONTROL };