Merge remote-tracking branch 'remotes/origin/develop' into feature/us…

…e-form-refactoring
epam · Jan 11, 2025 · 1d5da88 · 1d5da88
2 parents 25a2747 + a2cd338
commit 1d5da88
Show file tree

Hide file tree

Showing 51 changed files with 2,484 additions and 2,187 deletions.
diff --git a/app/package.json b/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@epam/app",
-  "version": "5.11.1-rc.0",
+  "version": "5.12.1",
   "description": "EPAM Unified UI landing",
   "author": "EPAM",
   "license": "MIT",
@@ -17,19 +17,19 @@
   "dependencies": {
     "@babel/plugin-proposal-private-property-in-object": "7.21.11",
     "@elastic/apm-rum": "^5.14.0",
-    "@epam/assets": "5.11.1-rc.0",
-    "@epam/draft-rte": "5.11.1-rc.0",
-    "@epam/electric": "5.11.1-rc.0",
+    "@epam/assets": "5.12.1",
+    "@epam/draft-rte": "5.12.1",
+    "@epam/electric": "5.12.1",
     "@epam/internal": "0.0.2",
-    "@epam/loveship": "5.11.1-rc.0",
-    "@epam/promo": "5.11.1-rc.0",
-    "@epam/uui": "5.11.1-rc.0",
-    "@epam/uui-components": "5.11.1-rc.0",
-    "@epam/uui-core": "5.11.1-rc.0",
-    "@epam/uui-db": "5.11.1-rc.0",
-    "@epam/uui-docs": "5.11.1-rc.0",
-    "@epam/uui-editor": "5.11.1-rc.0",
-    "@epam/uui-timeline": "5.11.1-rc.0",
+    "@epam/loveship": "5.12.1",
+    "@epam/promo": "5.12.1",
+    "@epam/uui": "5.12.1",
+    "@epam/uui-components": "5.12.1",
+    "@epam/uui-core": "5.12.1",
+    "@epam/uui-db": "5.12.1",
+    "@epam/uui-docs": "5.12.1",
+    "@epam/uui-editor": "5.12.1",
+    "@epam/uui-timeline": "5.12.1",
     "@tanstack/react-query": "^5.17.19",
     "@udecode/plate-common": "31.3.2",
     "amplitude-js": "8.9.1",

diff --git a/app/src/common/AppHeader.tsx b/app/src/common/AppHeader.tsx
@@ -226,7 +226,7 @@ export function AppHeader() {
                 priority: 5,
                 render: () => (
                     <Dropdown
-                        renderTarget={ (props) => <MainMenuButton icon={ FigmaIcon } cx={ cx(css.icon, css.figmaIcon) } { ...props } /> }
+                        renderTarget={ (props) => <MainMenuButton rawProps={ { 'aria-label': 'Figma source' } } icon={ FigmaIcon } cx={ cx(css.icon, css.figmaIcon) } { ...props } /> }
                         renderBody={ (props) => (
                             <DropdownMenuBody { ...props }>
                                 <DropdownMenuHeader caption="Open in" />
@@ -241,7 +241,7 @@ export function AppHeader() {
             {
                 id: 'git',
                 priority: 4,
-                render: () => <MainMenuButton icon={ GitIcon } href={ GIT_LINK } target="_blank" cx={ cx(css.icon) } key="github-link" />,
+                render: () => <MainMenuButton icon={ GitIcon } href={ GIT_LINK } target="_blank" cx={ cx(css.icon) } key="github-link" rawProps={ { 'aria-label': 'Github repo' } } />,
             },
             {
                 id: 'gitStar',
@@ -273,7 +273,7 @@ export function AppHeader() {
                 priority: 1,
                 render: renderDirectionSwitcher,
             },
-            { id: 'globalMenu', priority: 100500, render: () => <GlobalMenu key="globalMenu" /> },
+            { id: 'globalMenu', priority: 100500, render: () => <GlobalMenu rawProps={ { 'aria-label': 'Global Menu' } } key="globalMenu" /> },
         ].filter((i) => !!i);
     };
 

diff --git a/app/src/demo/tables/filteredTable/filters.tsx b/app/src/demo/tables/filteredTable/filters.tsx
@@ -25,7 +25,8 @@ export const getFilters = (): TableFiltersConfig<Person>[] => {
             ),
             predicates: defaultPredicates.multiPicker,
             showSearch: false,
-        }, {
+        },
+        {
             field: 'countryId',
             columnKey: 'countryName',
             title: 'Country',
@@ -47,39 +48,45 @@ export const getFilters = (): TableFiltersConfig<Person>[] => {
                     ) }
                 />
             ),
-        }, {
+        },
+        {
             field: 'jobTitleId',
             columnKey: 'jobTitle',
             title: 'Title',
             type: 'multiPicker',
             dataSource: new LazyDataSource({ api: svc.api.demo.jobTitles }),
-        }, {
+        },
+        {
             field: 'departmentId',
             columnKey: 'departmentName',
             title: 'Department',
             type: 'singlePicker',
             dataSource: new LazyDataSource({ api: svc.api.demo.departments }),
             predicates: [{ predicate: 'eq', name: 'is' }, { predicate: 'neq', name: 'is not' }],
-        }, {
+        },
+        {
             field: 'officeId',
             columnKey: 'officeAddress',
             title: 'Office',
             type: 'singlePicker',
             dataSource: new LazyDataSource({ api: svc.api.demo.offices }),
-        }, {
+        },
+        {
             field: 'managerId',
             columnKey: 'managerName',
             title: 'Manager',
             type: 'multiPicker',
             dataSource: new LazyDataSource({ api: svc.api.demo.managers }),
-        }, {
+        },
+        {
             field: 'cityId',
             columnKey: 'cityName',
             title: 'City',
             type: 'multiPicker',
             getName: (item) => `${item.name} (${item.countryName})`,
             dataSource: new LazyDataSource({ api: svc.api.demo.cities }),
-        }, {
+        },
+        {
             field: 'workload',
             columnKey: 'workload',
             title: 'Workload',
@@ -89,18 +96,21 @@ export const getFilters = (): TableFiltersConfig<Person>[] => {
                 { predicate: 'eq', name: '=' }, { predicate: 'neq', name: '≠' }, { predicate: 'lte', name: '≤' }, { predicate: 'gte', name: '≥' },
             ],
             showSearch: false,
-        }, {
+        },
+        {
             field: 'salary',
             columnKey: 'salary',
             title: 'Salary',
             type: 'numeric',
             predicates: defaultPredicates.numeric,
-        }, {
+        },
+        {
             field: 'hireDate',
             columnKey: 'hireDate',
             title: 'Hire Date',
             type: 'datePicker',
-        }, {
+        },
+        {
             field: 'birthDate',
             columnKey: 'birthDate',
             title: 'Birth Date',

diff --git a/app/src/docs/_examples/mainMenu/Basic.example.tsx b/app/src/docs/_examples/mainMenu/Basic.example.tsx
@@ -49,7 +49,7 @@ export default function MainMenuBasicExample() {
             <Dropdown
                 key="avatar"
                 renderTarget={ (props) => (
-                    <MainMenuAvatar avatarUrl="https://api.dicebear.com/7.x/pixel-art/svg?seed=Coco&radius=50&backgroundColor=b6e3f4" isDropdown { ...props } />
+                    <MainMenuAvatar avatarUrl="https://api.dicebear.com/7.x/pixel-art/svg?seed=Coco&radius=50&backgroundColor=b6e3f4" rawProps={ { 'aria-label': 'User avatar' } } isDropdown { ...props } />
                 ) }
                 renderBody={ (props) => (
                     <DropdownMenuBody { ...props }>
@@ -76,9 +76,9 @@ export default function MainMenuBasicExample() {
             { id: 'trainingCatalog', priority: 3, render: (p) => <MainMenuButton key={ p.id } href="/" caption="Training Catalog" /> },
             { id: 'requests', priority: 3, render: (p) => <MainMenuButton key={ p.id } href="/" caption="Requests" /> },
             { id: 'flexSpacer', priority: 100, render: (p) => <FlexSpacer key={ p.id } /> },
-            { id: 'help', priority: 1, render: (p) => <MainMenuIcon key={ p.id } href="https://support.epam.com" target="_blank" icon={ HelpIcon } /> },
+            { id: 'help', priority: 1, render: (p) => <MainMenuIcon key={ p.id } href="https://support.epam.com" target="_blank" rawProps={ { 'aria-label': 'Help' } } icon={ HelpIcon } /> },
             { id: 'avatar', priority: 2, render: renderAvatar },
-            { id: 'globalMenu', priority: 100, render: (p) => <GlobalMenu key={ p.id } /> },
+            { id: 'globalMenu', priority: 100, render: (p) => <GlobalMenu rawProps={ { 'aria-label': 'Global Menu' } } key={ p.id } /> },
         ];
     };
 

diff --git a/app/src/docs/_examples/mainMenu/Responsive.example.tsx b/app/src/docs/_examples/mainMenu/Responsive.example.tsx
@@ -37,7 +37,7 @@ export default function MainMenuResponsiveExample() {
             <Dropdown
                 key="avatar"
                 renderTarget={ (props) => (
-                    <MainMenuAvatar avatarUrl="https://api.dicebear.com/7.x/pixel-art/svg?seed=Coco&radius=50&backgroundColor=b6e3f4" isDropdown { ...props } />
+                    <MainMenuAvatar avatarUrl="https://api.dicebear.com/7.x/pixel-art/svg?seed=Coco&radius=50&backgroundColor=b6e3f4" rawProps={ { 'aria-label': 'User avatar' } } isDropdown { ...props } />
                 ) }
                 renderBody={ (props) => (
                     <DropdownMenuBody { ...props }>
@@ -118,10 +118,10 @@ export default function MainMenuResponsiveExample() {
                 ),
             },
             { id: 'flexSpacer', priority: 100, render: (p) => <FlexSpacer key={ p.id } /> },
-            { id: 'pinIcon', priority: 8, render: (p) => <MainMenuIcon key={ p.id } icon={ PinIcon } onClick={ () => {} } /> },
-            { id: 'helpIcon', priority: 8, render: (p) => <MainMenuIcon key={ p.id } icon={ HelpIcon } onClick={ () => {} } /> },
+            { id: 'pinIcon', priority: 8, render: (p) => <MainMenuIcon key={ p.id } icon={ PinIcon } rawProps={ { 'aria-label': 'Pin' } } onClick={ () => {} } /> },
+            { id: 'helpIcon', priority: 8, render: (p) => <MainMenuIcon key={ p.id } icon={ HelpIcon } rawProps={ { 'aria-label': 'Help' } } onClick={ () => {} } /> },
             { id: 'avatar', priority: 9, render: renderAvatar },
-            { id: 'globalMenu', priority: 100, render: (p) => <GlobalMenu key={ p.id } /> },
+            { id: 'globalMenu', priority: 100, render: (p) => <GlobalMenu key={ p.id } rawProps={ { 'aria-label': 'Global Menu' } } /> },
         ];
     };
 

diff --git a/app/src/docs/_examples/richTextEditor/WithInnerScroll.example.tsx b/app/src/docs/_examples/richTextEditor/WithInnerScroll.example.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { FileUploadResponse, useUuiContext } from '@epam/uui-core';
-import { ErrorNotification, Panel } from '@epam/promo';
+import { ErrorNotification, FlexRow } from '@epam/promo';
 import { SlateEditor, defaultPlugins, imagePlugin, videoPlugin, attachmentPlugin, toDoListPlugin, baseMarksPlugin,
     linkPlugin, iframePlugin, notePlugin, separatorPlugin, uploadFilePlugin, tablePlugin, quotePlugin, colorPlugin,
     superscriptPlugin, headerPlugin, listPlugin, placeholderPlugin, EditorValue, codeBlockPlugin,
@@ -56,7 +56,7 @@ export default function WithInnerScrollExample() {
     ];
 
     return (
-        <Panel rawProps={ { style: { width: '100%', height: '350px' } } }>
+        <FlexRow rawProps={ { style: { width: '100%', height: '350px' } } }>
             <SlateEditor
                 value={ value }
                 onValueChange={ setValue }
@@ -68,6 +68,6 @@ export default function WithInnerScrollExample() {
                 fontSize="14"
                 scrollbars
             />
-        </Panel>
+        </FlexRow>
     );
 }
diff --git a/app/src/docs/_examples/tooltip/Basic.example.tsx b/app/src/docs/_examples/tooltip/Basic.example.tsx
diff --git a/app/src/docs/_examples/tooltip/Types.example.tsx b/app/src/docs/_examples/tooltip/Types.example.tsx
@@ -15,20 +15,20 @@ export default function TypesTooltipExample() {
 
     return (
         <div className={ css.container }>
-            <Tooltip content="Compact" placement="bottom">
+            <Tooltip content="Compact">
                 <Button icon={ copyIcon } caption="Copy" fill="outline" color="primary" cx={ css.firstColumn } onClick={ () => null } />
             </Tooltip>
 
             <FlexRow alignItems="center" cx={ css.firstColumn }>
                 <RichTextView>
                     <span className={ css.permissionText }>Permissions</span>
                 </RichTextView>
-                <Tooltip content="Default tooltip. Can be inside as one row as 3 rows of text" placement="bottom">
+                <Tooltip content="Default tooltip. Can be inside as one row as 3 rows of text">
                     <IconContainer icon={ infoIcon } cx={ css.iconBlue } />
                 </Tooltip>
             </FlexRow>
 
-            <Tooltip content={ renderTypesMarkup() } placement="bottom" color="neutral">
+            <Tooltip content={ renderTypesMarkup() } color="neutral">
                 <Button icon={ plusIcon } onClick={ () => null } cx={ css.firstColumn } />
             </Tooltip>
 

diff --git a/app/src/docs/_examples/tooltip/Variants.example.tsx b/app/src/docs/_examples/tooltip/Variants.example.tsx
@@ -6,15 +6,15 @@ import css from './TypesExample.module.scss';
 export default function VariantsTooltipExample() {
     return (
         <div className={ css.container }>
-            <Tooltip content="Tooltip message" placement="bottom" color="inverted">
+            <Tooltip content="Tooltip message" color="inverted">
                 <Button caption="Default" fill="outline" color="secondary" onClick={ () => null } />
             </Tooltip>
 
-            <Tooltip content="Tooltip message" placement="bottom" color="neutral">
+            <Tooltip content="Tooltip message" color="neutral">
                 <Button caption="Contrast" color="primary" onClick={ () => null } />
             </Tooltip>
 
-            <Tooltip content="Tooltip message" placement="bottom" color="critical">
+            <Tooltip content="Tooltip message" color="critical">
                 <Button caption="Critical" fill="outline" color="critical" onClick={ () => null } />
             </Tooltip>
 

diff --git a/app/src/docs/_examples/tooltip/WithLink.example.tsx b/app/src/docs/_examples/tooltip/WithLink.example.tsx
@@ -20,7 +20,7 @@ export default function LinkTooltipExample() {
     return (
         <FlexRow alignItems="center">
             <Text fontSize="14">Working from home allowed for employees only</Text>
-            <Tooltip content={ renderTypesMarkup() } placement="top" color="neutral" closeOnMouseLeave="boundary">
+            <Tooltip content={ renderTypesMarkup() } color="neutral" closeOnMouseLeave="boundary">
                 <IconContainer icon={ myIcon } style={ { justifyContent: 'center', marginLeft: '3px' } } cx={ css.iconAmber } />
             </Tooltip>
         </FlexRow>

diff --git a/app/src/documents/structure.ts b/app/src/documents/structure.ts
@@ -61,7 +61,7 @@ export const items: DocItem[] = [
 
     { id: 'themes', name: 'Themes' },
     { id: 'overview-themes', name: 'Overview', component: ThemingOverview, parentId: 'themes' },
-    { id: 'tokens', name: 'Tokens', component: Tokens, parentId: 'themes' },
+    { id: 'tokens', name: 'Tokens', component: Tokens, parentId: 'themes', tags: ['colors', 'variables'] },
 
     { id: 'testing', name: 'Testing' },
     { id: 'testing-basics', name: 'Basics', component: UtGuideBasicsDoc, parentId: 'testing' },

diff --git a/app/src/documents/structureComponents.ts b/app/src/documents/structureComponents.ts
@@ -116,7 +116,7 @@ export const componentsStructure = orderBy(
         { id: 'tables', name: 'Data Tables', parentId: 'components', tags: ['table'] },
         { id: 'tablesOverview', name: 'Overview', component: TablesOverviewDoc, parentId: 'tables', order: 1, tags: ['tables', 'dataTable'] },
         { id: 'tree', name: 'Tree', component: TreeDoc, parentId: 'components', tags: ['tree', 'virtualList', 'dataSources'] },
-        { id: 'editableTables', name: 'Editable Tables', component: EditableTablesDoc, parentId: 'tables', order: 2, tags: ['tables', 'dataTable'] },
+        { id: 'editableTables', name: 'Editable', component: EditableTablesDoc, parentId: 'tables', order: 2, tags: ['tables', 'dataTable'] },
         { id: 'advancedTables', name: 'Advanced', component: AdvancedTablesDoc, parentId: 'tables', order: 3, tags: ['tables', 'dataTable'] },
         { id: 'useTableState', name: 'useTableState', component: useTableStateDoc, parentId: 'tables', order: 4, tags: ['tables', 'dataTable'] },
         { id: 'filtersPanel', name: 'Filters Panel', component: FiltersPanelDoc, parentId: 'tables', order: 5, tags: ['tables', 'dataTable'] },

diff --git a/app/src/index.tsx b/app/src/index.tsx
@@ -20,7 +20,7 @@ import '@epam/assets/theme/theme_eduverse_light.scss';
 import '@epam/assets/theme/theme_eduverse_dark.scss';
 import './index.module.scss';
 
-i18n.errorHandler.supportLink = (
+i18n.errorHandler.supportMessage = (
     <>
         You can track the service availability at
         {' '}

diff --git a/app/src/sandbox/SandboxPage.tsx b/app/src/sandbox/SandboxPage.tsx
@@ -24,6 +24,7 @@ import { ProjectTableDemo } from './editableTable';
 import { RtlExample } from './rtl/Rtl-example';
 import { DemoForm } from './rtl/form/DemoForm';
 import { RichTextEditorDemoReadonly } from './RTE-readonly/RichTextEditorDemo';
+import { PerformanceTestPage } from './perfomance-stand/PerformanceTestPage';
 
 export function SandboxPage() {
     const items = useMemo(
@@ -48,6 +49,7 @@ export function SandboxPage() {
             { parentId: 'tokens', id: 'tokensPalette', name: 'Palette', component: PalettePage },
             { id: 'rtl-example', name: 'Rtl-example', component: RtlExample },
             { id: 'rtl-form', name: 'Rtl-Form', component: DemoForm },
+            { id: 'performanceStand', name: 'Performance stand', component: PerformanceTestPage },
         ],
         [],
     );

diff --git a/app/src/sandbox/perfomance-stand/PerformanceTestPage.tsx b/app/src/sandbox/perfomance-stand/PerformanceTestPage.tsx
@@ -0,0 +1,51 @@
+import React, { useState, useMemo } from 'react';
+import { FlexRow, DatePicker } from '@epam/uui';
+// import { LazyDataSourceApiRequest, useLazyDataSource } from '@epam/uui-core';
+// import { Person } from '@epam/uui-docs';
+// import { svc } from '../../services';
+
+export function PerformanceTestPage() {
+    const [componentValue, componentOnValueChange] = useState<any>();
+    // const loadPersons = useCallback((request: LazyDataSourceApiRequest<Person, number>) => {
+    //     return svc.api.demo.persons(request);
+    // }, []);
+
+    // const dataSource = useLazyDataSource({ api: loadPersons, selectAll: false }, []);
+
+    const renderTestedComponent = () => {
+        // return (
+        //     <PickerInput
+        //         dataSource={ dataSource }
+        //         value={ componentValue }
+        //         onValueChange={ componentOnValueChange }
+        //         valueType="id"
+        //         selectionMode="multi"
+        //     />
+        // );
+
+        return (
+            <DatePicker
+                value={ componentValue }
+                onValueChange={ componentOnValueChange }
+            />
+        );
+    };
+
+    const gridArray = useMemo(() => new Array(30).fill(new Array(8).fill(undefined)), []);
+
+    return (
+        <div>
+            { gridArray.map((row) => {
+                return (
+                    <FlexRow>
+                        { row.map((cell: any, idx: number) => (
+                            <div key={ idx }> 
+                                { renderTestedComponent() }
+                            </div>
+                        )) }
+                    </FlexRow>
+                );
+            }) }
+        </div>
+    );
+}