@vitrosoftware/common-ui-ts 1.1.13 → 1.1.14

package/css/common.css

@@ -18,7 +18,7 @@
 
 :global(.vitro-title) {
     font-size: 20px;
-    font-family: 'InterRegular';
+    font-family: 'InterMedium';
     line-height: 24px;
     margin-right: 24px;
     margin-bottom: 14px;
@@ -40,5 +40,11 @@
         padding-bottom: 8px;
         font-size: 18px;
         line-height: 27px;
+        margin: 0;
+    }
+
+    :global(.pane) > :global(.vitro-flex) {
+        flex-direction: column;
+        align-items: flex-start;
     }
 }

package/css/std/controls/command-menu/command-menu-button.css

@@ -15,4 +15,14 @@
     width: 24px;
     height: 24px;
     margin-right: 4px;
+}
+
+@media (max-width: 800px) {
+    .vitro-command-menu-button .vitro-icon + div {
+        display: none;
+    }
+
+    .vitro-command-menu-button {
+        min-width: 40px !important;
+    }
 }

package/css/std/controls/command-menu/command-menu-dropdown-button.css

@@ -152,4 +152,23 @@
 :global(.vitro-button-context:hover),
 :global(.vitro-button-context:active) {
     border-color: #fff !important;
+}
+
+@media (max-width: 800px) {
+    .vitro-command-menu-dropdown-button .vitro-icon + div {
+        display: none;
+    }
+
+    .vitro-command-menu-dropdown-button {
+        min-width: 40px !important;
+    }
+
+    li:first-child .vitro-icon + div {
+        display: block;
+    }
+
+    :global(.vitro-button-context) {
+        min-width: 32px !important;
+        width: 32px;
+    }
 }

package/css/std/controls/sidebar/sidebar-item.css

@@ -1,8 +1,8 @@
-a.vitro-active {
+.vitro-active {
     background-color: #DCEEFF;
 }
 
-ul > li:last-child > ul > li:last-child a.vitro-active {
+ul > li:last-child > ul > li:last-child .vitro-active {
     background-color: transparent;
 }
 
@@ -21,29 +21,90 @@ ul > li:last-child > ul > li:last-child a.vitro-active {
     display: none;
 }
 
-a:hover .vitro-icon-text, a:hover .vitro-item-text, a.vitro-active .vitro-icon-text, a.vitro-active .vitro-item-text {
+.vitro-active .vitro-icon-text,
+.vitro-active .vitro-item-text {
     color: #326AD6;
     font-weight: 500;
     font-family: 'InterMedium';
 }
 
-.vitro-icon > :global(.vitro-icon-hover) {
-    display: none;
+.vitro-icon {
+    width: 24px;
+    height: 24px;
 }
 
-.vitro-icon:hover > :global(.vitro-icon-hover) {
+:global(.toggled.pinned) .vitro-item a {
+    width: 100%;
+}
+
+.vitro-item a > div {
+    display: flex;
+    width: fit-content;
+    align-items: center;
+}
+
+.vitro-item a {
+    text-decoration: none;
+    height: 40px;
+    width: 40px;
+    border-radius: 8px;
+    padding: 8px;
+    cursor: pointer;
+    margin-bottom: 8px;
     display: block;
 }
 
-.vitro-icon:hover > :global(.vitro-icon-default) {
-    display: none;
+.vitro-active {
+    background-color: #DCEEFF;
 }
 
-.vitro-icon {
-    width: 24px;
-    height: 24px;
+:global(.vitro-bottom-menu) .vitro-item-text {
+    display: block;
+    color: #4A556C;
+    font-size: 12px;
+    line-height: 12px;
+    text-align: center;
 }
 
-:global(.vitro-display-none) {
+:global(.vitro-bottom-menu) .vitro-icon-text {
     display: none;
-}
+}
+
+:global(.vitro-bottom-menu) .vitro-active {
+    background: transparent;
+    position: relative;
+}
+
+:global(.vitro-bottom-menu) .vitro-active::after {
+    content: '';
+    display: block;
+    position: absolute;
+    height: 2px;
+    border-radius: 2px;
+    background: #4292F7;
+    width: 32px;
+    bottom: -8px;
+}
+
+.vitro-active .vitro-item-text {
+    color: #4A556C;
+    font-family: 'InterRegular' !important;
+}
+
+.vitro-item {
+    display: flex;
+    justify-content: center;
+}
+
+:global(.vitro-bottom-menu) .vitro-item > a {
+    background: transparent;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    width: fit-content;
+    height: 100%;
+    padding: 0;
+    margin-bottom: 0;
+}

package/css/std/controls/sidebar/sidebar.css

@@ -35,21 +35,6 @@
     justify-content: space-between;
 }
 
-.vitro-sidebar a {
-    text-decoration: none;
-    height: 40px;
-    width: 40px;
-    border-radius: 8px;
-    padding: 8px;
-    cursor: pointer;
-    margin-bottom: 8px;
-    display: block;
-}
-
-.vitro-sidebar a:hover {
-    background-color: #DCEEFF;
-}
-
 .vitro-sidebar ul > li:last-child > ul > li:last-child a {
     margin-bottom: 0;
 }
@@ -67,12 +52,53 @@
     font-weight: 400 !important;
 }
 
-:global(.toggled.pinned) .vitro-sidebar a {
+:global(.vitro-bottom-menu) {
     width: 100%;
+    z-index: 10000;
+    flex-direction: row;
+    height: 60px;
+    padding: 0 21px !important;
+    background: #fff;
+    bottom: 0;
+    top: initial;
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
+    border-radius: 4px 4px 0 0;
 }
 
-.vitro-sidebar a > div {
+:global(.vitro-bottom-menu) ul {
     display: flex;
-    width: fit-content;
-    align-items: center;
+    flex-direction: row;
+    height: 100%;
+}
+
+.vitro-scroll-container {
+    height: 100%;
+    flex: 0 1 auto;
+    overflow: hidden;
+    padding: 8px 0;
+}
+
+.vitro-scroll-container > ul {
+    transition: 1s all ease;
+}
+
+.vitro-button-more {
+    display: block;
+    width: 40px;
+    height: 40px;
+    min-width: 40px;
+    border: none;
+    background-color: #fff;
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    /* bottom-menu-button-more.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 41 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10.5' cy='20' r='2.5' transform='rotate(-90 10.5 20)' fill='%234A556C'/%3E%3Ccircle cx='20.5' cy='20' r='2.5' transform='rotate(-90 20.5 20)' fill='%234A556C'/%3E%3Ccircle cx='30.5' cy='20' r='2.5' transform='rotate(-90 30.5 20)' fill='%234A556C'/%3E%3C/svg%3E%0A");
+}
+
+.vitro-button-more:hover,
+.vitro-button-more:active {
+    border: none;
+    background-color: #fff;
+    outline: none;
 }

package/css/std/controls/uploader/uploader.css

@@ -317,6 +317,11 @@
     flex: unset;
 }
 
+.vitro-uploader :global(.k-upload-action) {
+    min-width: 24px;
+    justify-content: flex-start;
+}
+
 :global(#TableViewContainer .splitter:last-child > .pane.primary):has(.vitro-uploader) {
     position: relative;
 }
@@ -444,6 +449,8 @@
 .vitro-uploader :global(.k-progressbar) {
     height: 32px !important;
     width: 32px !important;
+    min-width: 32px;
+    min-height: 32px;
     border-radius: 50% !important;
     display: flex;
     align-items: center !important;
@@ -455,8 +462,10 @@
 }
 
 .vitro-uploader :global(.k-progressbar > span) {
-    height: 27px !important;
-    width: 27px !important;
+    height: 28px !important;
+    width: 28px !important;
+    min-width: 28px;
+    min-height: 28px;
     border-radius: 50% !important;
     background: #fff !important;
     display: block;

package/dist/controls/LookupPicker/LookupPicker.d.ts

@@ -27,6 +27,7 @@ interface LookupPickerProps {
     errorMessage?: string;
     children?: React.ReactNode;
     className?: string;
+    getAllValueList?: () => Promise<any>;
 }
 export declare const LookupPicker: (props: LookupPickerProps) => JSX.Element;
 export {};

package/dist/controls/Sidebar/LinkItem.d.ts

@@ -10,6 +10,7 @@ interface LinkItem {
     imageUrl: string;
     imageHoverUrl?: string;
     text: string;
+    linkItemWidth?: number;
 }
 export declare const LinkItem: (props: LinkItem) => JSX.Element;
 export {};

package/dist/controls/Sidebar/Section.d.ts

@@ -5,6 +5,7 @@ interface SectionProps {
     itemList: SidebarItem[];
     activeItem?: string;
     currentUrl: string;
+    linkItemWidth?: number;
 }
 export declare const Section: (props: SectionProps) => JSX.Element;
 export {};

package/dist/controls/Sidebar/SectionList.d.ts

@@ -1,9 +1,10 @@
-/// <reference types="react" />
+import React from 'react';
 import { SidebarSection } from './SidebarSection';
 interface SectionListProps {
     itemList: SidebarSection[];
     currentUrl: string;
     activeItem?: string;
+    linkItemWidth?: number;
 }
-export declare const SectionList: (props: SectionListProps) => JSX.Element | null;
+export declare const SectionList: React.ForwardRefExoticComponent<SectionListProps & React.RefAttributes<unknown>>;
 export {};

package/dist/controls/Sidebar/Sidebar.d.ts

@@ -8,6 +8,7 @@ interface SidebarProps {
     bottomItemList?: SidebarSection[];
     overflowItemList?: SidebarSection[];
     activeItem?: any;
+    isDifferentOnMobileView?: boolean;
 }
 export declare const Sidebar: (props: SidebarProps) => JSX.Element;
 export {};

package/dist/index.css

@@ -18,7 +18,7 @@
 
 .vitro-title {
     font-size: 20px;
-    font-family: 'InterRegular';
+    font-family: 'InterMedium';
     line-height: 24px;
     margin-right: 24px;
     margin-bottom: 14px;
@@ -40,6 +40,12 @@
         padding-bottom: 8px;
         font-size: 18px;
         line-height: 27px;
+        margin: 0;
+    }
+
+    .pane > .vitro-flex {
+        flex-direction: column;
+        align-items: flex-start;
     }
 }
 ._breadcrumbs_vitro-breadcrumbs_3r4NcQY {
@@ -754,6 +760,11 @@
     flex: unset;
 }
 
+._uploader_vitro-uploader_237vX7T .k-upload-action {
+    min-width: 24px;
+    justify-content: flex-start;
+}
+
 #TableViewContainer .splitter:last-child > .pane.primary:has(._uploader_vitro-uploader_237vX7T) {
     position: relative;
 }
@@ -881,6 +892,8 @@
 ._uploader_vitro-uploader_237vX7T .k-progressbar {
     height: 32px !important;
     width: 32px !important;
+    min-width: 32px;
+    min-height: 32px;
     border-radius: 50% !important;
     display: flex;
     align-items: center !important;
@@ -892,8 +905,10 @@
 }
 
 ._uploader_vitro-uploader_237vX7T .k-progressbar > span {
-    height: 27px !important;
-    width: 27px !important;
+    height: 28px !important;
+    width: 28px !important;
+    min-width: 28px;
+    min-height: 28px;
     border-radius: 50% !important;
     background: #fff !important;
     display: block;
@@ -2750,6 +2765,16 @@
     width: 24px;
     height: 24px;
     margin-right: 4px;
+}
+
+@media (max-width: 800px) {
+    ._command-menu-button_vitro-command-menu-button_2IiXVbP ._command-menu-button_vitro-icon_1xB4d09 + div {
+        display: none;
+    }
+
+    ._command-menu-button_vitro-command-menu-button_2IiXVbP {
+        min-width: 40px !important;
+    }
 }
 ._command-menu-item_vitro-item_2pVhk23 {
     display: flex;
@@ -2969,12 +2994,31 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
 .vitro-button-context:hover,
 .vitro-button-context:active {
     border-color: #fff !important;
+}
+
+@media (max-width: 800px) {
+    ._command-menu-dropdown-button_vitro-command-menu-dropdown-button_2ImIuc3 ._command-menu-dropdown-button_vitro-icon_36InzPx + div {
+        display: none;
+    }
+
+    ._command-menu-dropdown-button_vitro-command-menu-dropdown-button_2ImIuc3 {
+        min-width: 40px !important;
+    }
+
+    li:first-child ._command-menu-dropdown-button_vitro-icon_36InzPx + div {
+        display: block;
+    }
+
+    .vitro-button-context {
+        min-width: 32px !important;
+        width: 32px;
+    }
 }
-a._sidebar-item_vitro-active_7p5iOhY {
+._sidebar-item_vitro-active_7p5iOhY {
     background-color: #DCEEFF;
 }
 
-ul > li:last-child > ul > li:last-child a._sidebar-item_vitro-active_7p5iOhY {
+ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
     background-color: transparent;
 }
 
@@ -2993,33 +3037,95 @@ ul > li:last-child > ul > li:last-child a._sidebar-item_vitro-active_7p5iOhY {
     display: none;
 }
 
-a:hover ._sidebar-item_vitro-icon-text_3ROhyLK, a:hover ._sidebar-item_vitro-item-text_1kK_aIZ, a._sidebar-item_vitro-active_7p5iOhY ._sidebar-item_vitro-icon-text_3ROhyLK, a._sidebar-item_vitro-active_7p5iOhY ._sidebar-item_vitro-item-text_1kK_aIZ {
+._sidebar-item_vitro-active_7p5iOhY ._sidebar-item_vitro-icon-text_3ROhyLK,
+._sidebar-item_vitro-active_7p5iOhY ._sidebar-item_vitro-item-text_1kK_aIZ {
     color: #326AD6;
     font-weight: 500;
     font-family: 'InterMedium';
 }
 
-._sidebar-item_vitro-icon_2B88tow > .vitro-icon-hover {
-    display: none;
+._sidebar-item_vitro-icon_2B88tow {
+    width: 24px;
+    height: 24px;
+}
+
+.toggled.pinned ._sidebar-item_vitro-item_1BR_7F0 a {
+    width: 100%;
 }
 
-._sidebar-item_vitro-icon_2B88tow:hover > .vitro-icon-hover {
+._sidebar-item_vitro-item_1BR_7F0 a > div {
+    display: flex;
+    width: -moz-fit-content;
+    width: fit-content;
+    align-items: center;
+}
+
+._sidebar-item_vitro-item_1BR_7F0 a {
+    text-decoration: none;
+    height: 40px;
+    width: 40px;
+    border-radius: 8px;
+    padding: 8px;
+    cursor: pointer;
+    margin-bottom: 8px;
     display: block;
 }
 
-._sidebar-item_vitro-icon_2B88tow:hover > .vitro-icon-default {
-    display: none;
+._sidebar-item_vitro-active_7p5iOhY {
+    background-color: #DCEEFF;
 }
 
-._sidebar-item_vitro-icon_2B88tow {
-    width: 24px;
-    height: 24px;
+.vitro-bottom-menu ._sidebar-item_vitro-item-text_1kK_aIZ {
+    display: block;
+    color: #4A556C;
+    font-size: 12px;
+    line-height: 12px;
+    text-align: center;
 }
 
-.vitro-display-none {
+.vitro-bottom-menu ._sidebar-item_vitro-icon-text_3ROhyLK {
     display: none;
+}
+
+.vitro-bottom-menu ._sidebar-item_vitro-active_7p5iOhY {
+    background: transparent;
+    position: relative;
+}
+
+.vitro-bottom-menu ._sidebar-item_vitro-active_7p5iOhY::after {
+    content: '';
+    display: block;
+    position: absolute;
+    height: 2px;
+    border-radius: 2px;
+    background: #4292F7;
+    width: 32px;
+    bottom: -8px;
+}
+
+._sidebar-item_vitro-active_7p5iOhY ._sidebar-item_vitro-item-text_1kK_aIZ {
+    color: #4A556C;
+    font-family: 'InterRegular' !important;
+}
+
+._sidebar-item_vitro-item_1BR_7F0 {
+    display: flex;
+    justify-content: center;
+}
+
+.vitro-bottom-menu ._sidebar-item_vitro-item_1BR_7F0 > a {
+    background: transparent;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    width: -moz-fit-content;
+    width: fit-content;
+    height: 100%;
+    padding: 0;
+    margin-bottom: 0;
 }
-
 ._sidebar_vitro-sidebar_1IxGYiU {
     height: 100%;
     position: fixed;
@@ -3057,21 +3163,6 @@ a:hover ._sidebar-item_vitro-icon-text_3ROhyLK, a:hover ._sidebar-item_vitro-ite
     justify-content: space-between;
 }
 
-._sidebar_vitro-sidebar_1IxGYiU a {
-    text-decoration: none;
-    height: 40px;
-    width: 40px;
-    border-radius: 8px;
-    padding: 8px;
-    cursor: pointer;
-    margin-bottom: 8px;
-    display: block;
-}
-
-._sidebar_vitro-sidebar_1IxGYiU a:hover {
-    background-color: #DCEEFF;
-}
-
 ._sidebar_vitro-sidebar_1IxGYiU ul > li:last-child > ul > li:last-child a {
     margin-bottom: 0;
 }
@@ -3089,15 +3180,55 @@ a:hover ._sidebar-item_vitro-icon-text_3ROhyLK, a:hover ._sidebar-item_vitro-ite
     font-weight: 400 !important;
 }
 
-.toggled.pinned ._sidebar_vitro-sidebar_1IxGYiU a {
+.vitro-bottom-menu {
     width: 100%;
+    z-index: 10000;
+    flex-direction: row;
+    height: 60px;
+    padding: 0 21px !important;
+    background: #fff;
+    bottom: 0;
+    top: initial;
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
+    border-radius: 4px 4px 0 0;
 }
 
-._sidebar_vitro-sidebar_1IxGYiU a > div {
+.vitro-bottom-menu ul {
     display: flex;
-    width: -moz-fit-content;
-    width: fit-content;
-    align-items: center;
+    flex-direction: row;
+    height: 100%;
+}
+
+._sidebar_vitro-scroll-container_3K-iJy8 {
+    height: 100%;
+    flex: 0 1 auto;
+    overflow: hidden;
+    padding: 8px 0;
+}
+
+._sidebar_vitro-scroll-container_3K-iJy8 > ul {
+    transition: 1s all ease;
+}
+
+._sidebar_vitro-button-more_3s9oZY9 {
+    display: block;
+    width: 40px;
+    height: 40px;
+    min-width: 40px;
+    border: none;
+    background-color: #fff;
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    /* bottom-menu-button-more.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 41 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10.5' cy='20' r='2.5' transform='rotate(-90 10.5 20)' fill='%234A556C'/%3E%3Ccircle cx='20.5' cy='20' r='2.5' transform='rotate(-90 20.5 20)' fill='%234A556C'/%3E%3Ccircle cx='30.5' cy='20' r='2.5' transform='rotate(-90 30.5 20)' fill='%234A556C'/%3E%3C/svg%3E%0A");
+}
+
+._sidebar_vitro-button-more_3s9oZY9:hover,
+._sidebar_vitro-button-more_3s9oZY9:active {
+    border: none;
+    background-color: #fff;
+    outline: none;
 }
 ._task-tile_vitro-task-tile_35bZu48 {
     position: relative;