@vitrosoftware/common-ui-ts 1.1.50 → 1.1.52

package/css/std/controls/breadcrumbs/breadcrumbs.css

@@ -6,6 +6,17 @@
     height: 24px;
 }
 
+.vitro-breadcrumbs li {
+    list-style-type: none;
+    display: flex;
+    align-items: center;
+}
+
+.vitro-breadcrumbs li > div {
+    display: inline-flex;
+    align-items: center;
+}
+
 .vitro-breadcrumbs-list-wrap {
     display: flex;
     position: relative;
@@ -30,8 +41,8 @@
     align-items: center;
 }
 
-.vitro-breadcrumbs-list > li::after, .vitro-breadcrumbs-button::after, .vitro-root::after {
-    content: '';
+.vitro-separator,
+.vitro-breadcrumbs-button::after {
     display: inline-block;
     margin: 0 4px;
     height: 16px;
@@ -43,15 +54,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");
 }
 
+.vitro-breadcrumbs-button::after {
+    content: '';
+    margin-left: 24px;
+    height: 20px;
+}
+
 .vitro-breadcrumbs-list > li:last-child{
     color: #222D44;
     font-family: 'InterMedium';
 }
 
-.vitro-breadcrumbs-list > li:last-child::after {
-    display: none;
-}
-
 .vitro-breadcrumbs-button {
     height: 20px;
     width: 20px;
@@ -66,21 +79,17 @@
 
 .vitro-root {
     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;
 }
 
-.vitro-root::after, .vitro-breadcrumbs-button::after {
-    margin-left: 24px;
-    height: 20px;
-}
-
 .vitro-drop-down-list {
     z-index: 1000;
     background: white;
@@ -118,6 +127,7 @@
     color: #4A556C;
     margin-bottom: 0px;
     overflow: hidden;
+    border-radius: 4px;
 }
 
 .vitro-drop-down-list ul li {

package/css/std/controls/checkbox/checkbox.css

@@ -21,8 +21,8 @@
 .vitro-checkbox-content input:checked::before {
     content: '';
     display: block;
-    width: 24px;
-    height: 24px;
+    width: 100%;
+    height: 100%;
     background: #fff;
     background-size: 100%;
     background-position: center;

package/css/std/controls/input/input.css

@@ -7,6 +7,7 @@
 .vitro-control input,
 .vitro-control textarea {
     width: 100%;
+    min-height: 40px;
     padding: 8px 16px;
     background: #fff;
     border: 1px solid #C0CAD5;
@@ -18,7 +19,6 @@
 }
 
 .vitro-control input {
-    min-height: 40px;
     white-space: normal;
 }
 

package/css/std/controls/search/checkbox-list.css

@@ -11,6 +11,12 @@
 
 .vitro-checkbox-list .vitro-checkbox {
     margin-bottom: 4px;
+    height: 24px;
+}
+
+.vitro-checkbox-list .vitro-checkbox input {
+    width: 16px;
+    height: 16px;
 }
 
 .vitro-checkbox:last-child,

package/css/std/controls/search/input.css

@@ -1,7 +1,7 @@
 .vitro-control {
     height: 32px;
     border-radius: 4px;
-    border: 1px solid #4A556C;
+    border: 1px solid #C0CAD5;
     padding: 4px 8px;
     display: flex;
     align-items: center;
@@ -17,39 +17,47 @@
 
 .vitro-control input {
     border: none;
+    width: 100%;
 }
 
 .vitro-control input::placeholder {
-    color: #8E98A3;
+    color: #4A556C;
     font-size: 14px;
     line-height: 16px;
     font-weight: 400 !important;
 }
 
-.vitro-search-value-list {
-    display: flex;
-    align-items: center;
-    flex: 1 1;
-    overflow: hidden;
-}
-
-.vitro-search-value-list::before {
-    content: '';
+.vitro-button-search {
     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");
-}
-
-.vitro-active .vitro-search-value-list::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");
 }
 
+.vitro-button-search:hover,
+.vitro-button-search:active,
+.vitro-button-search:focus {
+    background-color: #fff;
+}
+
+.vitro-active .vitro-search-value-list {
+    width: 262px;
+}
+
+.vitro-search-value-list {
+    display: flex;
+    align-items: center;
+    flex: 1 1;
+    overflow: hidden;
+}
+
 .vitro-button-cancel,
 .vitro-button-settings,
 .vitro-button-cancel:hover,
@@ -61,7 +69,7 @@
     background-size: 100%;
     background-position: center;
     margin-left: 8px;
-    background-color: #fff;
+    background-color: transparent;
 }
 
 .vitro-button-settings {
@@ -83,7 +91,11 @@
 .vitro-search-value {
     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;
@@ -91,3 +103,28 @@
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
+.vitro-search-value .vitro-button-cancel {
+    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) {
+    .vitro-control,
+    .vitro-control.vitro-active {
+        border: none;
+        padding: 0;
+    }
+
+    .vitro-button-search {
+        margin: 0;
+        height: 32px;
+        width: 32px;
+        border-radius: 4px;
+    }
+
+    .vitro-active.vitro-button-search {
+        background-color: #DCEEFF;
+    }
+}

package/css/std/controls/search/search.css

@@ -3,7 +3,6 @@
     align-self: baseline;
     margin-right: 16px;
     margin-left: auto;
-    max-width: 50%;
 }
 
 .vitro-settings-dialog {
@@ -29,6 +28,7 @@
 
 .vitro-add-field {
     position: relative;
+    margin-bottom: 16px;
 }
 
 .vitro-add-field-button,
@@ -68,9 +68,16 @@
     background: #fff !important;
     color: #222D44 !important;
     font-family: 'InterRegular' !important;
+    border: 1px solid #E4E6EC !important;
 }
 
 .vitro-button-cancel:hover,
 .vitro-button-cancel:active {
     background: #F3F8FF !important;
 }
+
+@media (max-width: 800px) {
+    .vitro-filter {
+        width: 100%;
+    }
+}

package/css/std/controls/tooltip/tooltip.css

@@ -1,5 +1,6 @@
 .vitro-tooltip {
     display: none !important;
+    opacity: 1;
 }
 
 .vitro-tooltip[style*='transform'] {
@@ -16,6 +17,8 @@
     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;
 }
 
 .vitro-tooltip :global(.tooltip-arrow)::before {

package/dist/constants/Control.d.ts

@@ -0,0 +1,10 @@
+export declare class CONTROL {
+    static readonly LOOKUP_PICKER = "LookupPicker";
+    static readonly DATE_PICKER = "DatePicker";
+    static readonly CHECKBOX = "Checkbox";
+    static readonly IMAGE_PICKER = "ImagePicker";
+    static readonly AVATAR = "Avatar";
+    static readonly INPUT = "Input";
+    static readonly PASSWORD = "Password";
+    static readonly TIME_PICKER = "TimePicker";
+}

package/dist/controls/Breadcrumbs/Item.d.ts

@@ -1,9 +1,10 @@
-/// <reference types="react" />
+import React from 'react';
 interface ItemProps {
     onClick?: () => void;
-    text?: string;
     id: string;
     className?: string;
+    isShowSeparator: boolean;
+    children: React.ReactNode;
 }
 export declare const Item: (props: ItemProps) => JSX.Element;
 export {};

package/dist/controls/Criterion/Condition.d.ts

@@ -0,0 +1,6 @@
+export interface Condition {
+    type: number;
+    text: string;
+    imageUrl?: string;
+    imageHoverUrl?: string;
+}

package/dist/controls/Criterion/ConditionSelect.d.ts

@@ -1,11 +1,8 @@
 /// <reference types="react" />
+import { Condition } from './Condition';
 interface ConditionSelectProps {
-    itemList: {
-        type: number;
-        text: string;
-        imageUrl?: string;
-        imageHoverUrl?: string;
-    }[];
+    itemList: Condition[];
+    defaultValue?: Condition;
     onSelect: (condition: any) => any;
     translateX: number;
 }

package/dist/controls/Criterion/Criterion.d.ts

@@ -1,17 +1,13 @@
 import React from 'react';
 import { SearchCriterion } from '../Search/SearchCriterion';
+import { Condition } from './Condition';
+import { Operator } from './Operator';
 interface CriterionProps {
     label: string;
-    operatorList: {
-        type: number;
-        text: string;
-    }[];
-    conditionList: {
-        type: number;
-        text: string;
-        imageUrl?: string;
-        imageHoverUrl?: string;
-    }[];
+    operatorList: Operator[];
+    conditionList: Condition[];
+    defaultOperator?: number;
+    defaultCondition?: number;
     onChange: (value: SearchCriterion, name: string) => any;
     onDelete: (name: string) => any;
     className?: string;

package/dist/controls/Criterion/Operator.d.ts

@@ -0,0 +1,4 @@
+export interface Operator {
+    type: number;
+    text: string;
+}

package/dist/controls/DatePicker/DatePicker.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 interface DatePickerProps {
     name?: string;
     culture?: string;
@@ -20,7 +20,9 @@ interface DatePickerProps {
     onOpen?: (e: any, container: any) => void;
     onChange?: (value: any, name?: string) => void;
     onClose?: (value: any, name?: string) => void;
+    onBlur?: (e: any) => void;
+    onFocus?: (e: any) => void;
     className?: string;
 }
-export declare const DatePicker: (props: DatePickerProps) => JSX.Element;
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<unknown>>;
 export {};

package/dist/controls/FieldIterator/FieldIterator.d.ts

@@ -7,7 +7,7 @@ interface FieldIteratorProps {
         value: React.FunctionComponent<any>;
     }[];
     rowFieldList?: string[];
-    fieldValueMap?: Map<string, any>;
+    fieldValueMap?: any;
     changedFieldValueMap?: Map<string, any>;
     isClearChangedFieldValueMap?: boolean;
     onChange: (changedFieldValueMap: Map<string, any>, saveStatus?: {
@@ -19,5 +19,5 @@ interface FieldIteratorProps {
     }[];
     isReadOnly?: boolean;
 }
-export declare const FieldIterator: (props: FieldIteratorProps) => JSX.Element;
+export declare const FieldIterator: React.ForwardRefExoticComponent<FieldIteratorProps & React.RefAttributes<unknown>>;
 export {};

package/dist/controls/Input/Input.d.ts

@@ -28,5 +28,5 @@ interface InputProps {
     children?: React.ReactNode;
     className?: string;
 }
-export declare const Input: (props: InputProps) => JSX.Element;
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<unknown>>;
 export {};

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

@@ -24,6 +24,7 @@ interface LookupPickerProps {
     isRequired?: boolean;
     onChange?: (value: any[] | any, name?: string) => void;
     onBlur?: (e: any, name?: string) => void;
+    onFocus?: (e: any) => void;
     label?: string;
     labelWidth?: number;
     placeholder?: string;
@@ -33,5 +34,5 @@ interface LookupPickerProps {
     className?: string;
     getAllValueList?: () => Promise<any>;
 }
-export declare const LookupPicker: (props: LookupPickerProps) => JSX.Element;
+export declare const LookupPicker: React.ForwardRefExoticComponent<LookupPickerProps & React.RefAttributes<unknown>>;
 export {};

package/dist/controls/Search/Filter.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
+import { Condition } from '../Criterion/Condition';
+import { Operator } from '../Criterion/Operator';
 interface FilterProps {
     fieldList: any[];
+    valueList: any[];
     componentMap: {
         name: string;
         value: React.FunctionComponent<any>;
@@ -9,16 +12,9 @@ interface FilterProps {
     onChange: (changedFieldValueMap: Map<string, any>, saveStatus?: {
         isSaving: boolean;
     }) => any;
-    operatorList: {
-        type: number;
-        text: string;
-    }[];
-    conditionList: {
-        type: number;
-        text: string;
-        imageUrl?: string;
-        imageHoverUrl?: string;
-    }[];
+    operatorList: Operator[];
+    getConditionList: (componentName: string) => Condition[];
+    getDefaultCondition?: (componentName: string) => number;
     onDeleteField: (id: string) => any;
 }
 export declare const Filter: (props: FilterProps) => JSX.Element;

package/dist/controls/Search/Input.d.ts

@@ -6,7 +6,7 @@ interface InputProps {
     placeholder?: string;
     onSettingsClick?: (active: boolean) => any;
     onCancel: () => any;
-    onEnter: (value?: string) => any;
+    onSubmit: (value?: string) => any;
     onChange?: (value: any) => any;
     isShowSettings?: boolean;
     isSettingsActive?: boolean;

package/dist/controls/Search/Search.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 import { SearchCriterion } from './SearchCriterion';
+import { Condition } from '../Criterion/Condition';
+import { Operator } from '../Criterion/Operator';
 interface SearchProps {
     fieldList: any[];
     visibleFieldList?: any[];
@@ -11,22 +13,16 @@ interface SearchProps {
         value: React.FunctionComponent<any>;
     }[];
     onAddField?: (selectedFieldIdList: string[]) => any;
-    operatorList: {
-        type: number;
-        text: string;
-    }[];
-    conditionList: {
-        type: number;
-        text: string;
-        imageUrl?: string;
-        imageHoverUrl?: string;
-    }[];
+    operatorList: Operator[];
+    getConditionList: (componentName: string) => Condition[];
+    getDefaultCondition?: (componentName: string) => number;
     isAllFieldsVisible?: boolean;
     labelCancel: string;
     labelSearch: string;
     labelAddField: string;
     defaultSearchFieldName: string;
     inputPlaceholder?: string;
+    maxFieldCount: number;
 }
 export declare const Search: (props: SearchProps) => JSX.Element;
 export {};

package/dist/controls/TimePicker/TimePicker.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 interface TimePickerProps {
     value?: string | Date;
     format?: string;
@@ -14,7 +14,9 @@ interface TimePickerProps {
     onChange?: (value: any) => void;
     onOpen?: (e: any, container: any) => void;
     onClose?: (e: any, container: any) => void;
+    onBlur?: (e: any) => void;
+    onFocus?: (e: any) => void;
     className?: string;
 }
-export declare const TimePicker: (props: TimePickerProps) => JSX.Element;
+export declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<unknown>>;
 export {};

package/dist/controls/UserLookupPicker/UserLookupPicker.d.ts

@@ -26,6 +26,7 @@ interface UserLookupPickerProps {
     isRequired?: boolean;
     onChange?: (value: any[] | any, name?: string) => void;
     onBlur?: (e: any, name?: string) => void;
+    onFocus?: (e: any) => void;
     label?: string;
     labelWidth?: number;
     placeholder?: string;
@@ -34,5 +35,5 @@ interface UserLookupPickerProps {
     children?: React.ReactNode;
     className?: string;
 }
-export declare const UserLookupPicker: (props: UserLookupPickerProps) => JSX.Element;
+export declare const UserLookupPicker: React.ForwardRefExoticComponent<UserLookupPickerProps & React.RefAttributes<unknown>>;
 export {};