Merge branch 'develop'

.github/workflows/qualityGate.yml

@@ -79,19 +79,19 @@ jobs:
               run: |
                   echo ${{ github.event.pull_request.number }} > ./${{ env.PR_NUM_ARTIFACT }}
             - name: 'Upload artifact (pr number)'
-              uses: actions/upload-artifact@v3
+              uses: actions/upload-artifact@v4
               with:
                   name: ${{ env.PR_NUM_ARTIFACT }}
                   path: ./${{ env.PR_NUM_ARTIFACT }}
                   retention-days: 1 # minimum retention
             - name: 'Upload artifact (report 1 content)'
-              uses: actions/upload-artifact@v3
+              uses: actions/upload-artifact@v4
               with:
                   name: ${{ env.REPORT_1_ARTIFACT }}
                   path: ${{ env.REPORT_1_PATH }}
                   retention-days: 1 # minimum retention
             -   name: 'Upload artifact (report 2 content)'
-                uses: actions/upload-artifact@v3
+                uses: actions/upload-artifact@v4
                 with:
                     name: ${{ env.REPORT_2_ARTIFACT }}
                     path: ${{ env.REPORT_2_PATH }}

app/package.json

@@ -41,7 +41,7 @@
     "lodash.assign": "4.2.0",
     "prismjs": "^1.19.0",
     "qhistory": "1.0.3",
-    "react": "^18.2.0",
+    "react": "18.3.1",
     "react-dom": "^18.2.0",
     "react-fast-compare": "^3.2.2",
     "react-imask": "6.0.7",

app/src/data/codesandbox/tsconfig.json

@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-        "target": "es6",
+        "target": "ES2021",
         "lib": ["dom", "dom.iterable", "esnext"],
         "allowJs": true,
         "skipLibCheck": true,

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,46 @@ 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 }),
-        }, {
+            minCharsToSearch: 1,
+        },
+        {
             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 +97,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',

app/src/docs/_examples/form/ServerValidation.example.tsx

@@ -50,7 +50,7 @@ export default function ServerValidationExample() {
                 <SuccessNotification { ...props }>
                     <Text>Form saved</Text>
                 </SuccessNotification>
-            )),
+            )).catch(() => {}),
         getMetadata: () => ({
             props: {
                 email: { isRequired: true },

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 } /> },
         ];
     };
 

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' } } /> },
         ];
     };
 

app/src/docs/mainMenu/mainMenuExamples.tsx

@@ -39,7 +39,7 @@ export const childrenExamples = [
             <MainMenuButton caption="Skill Matrices" collapseToMore priority={ 1 } estimatedWidth={ 139 } showInBurgerMenu key="skill" href="/" />,
             <FlexSpacer priority={ 100500 } key="spacer" />,
             <MainMenuButton caption="Tools" type="secondary" isDropdown priority={ 4 } estimatedWidth={ 113 } key="tool" />,
-            <GlobalMenu priority={ 100500 } estimatedWidth={ 60 } key="global-menu" />,
+            <GlobalMenu priority={ 100500 } estimatedWidth={ 60 } key="global-menu" rawProps={ { 'aria-label': 'Global Menu' } } />,
         ],
         name: 'Grow',
         isDefault: true,
@@ -57,8 +57,9 @@ export const childrenExamples = [
                 avatarUrl="https://api.dicebear.com/7.x/pixel-art/svg?seed=Coco&radius=50&backgroundColor=b6e3f4"
                 priority={ 100 }
                 estimatedWidth={ 84 }
+                rawProps={ { 'aria-label': 'Avatar' } }
             />,
-            <GlobalMenu priority={ 100500 } estimatedWidth={ 60 } key="global-menu" />,
+            <GlobalMenu priority={ 100500 } estimatedWidth={ 60 } key="global-menu" rawProps={ { 'aria-label': 'Global Menu' } } />,
         ],
         name: 'Learn',
     },
@@ -71,7 +72,7 @@ export const childrenExamples = [
             <MainMenuButton caption="Demos" priority={ 2 } collapseToMore estimatedWidth={ 72 } showInBurgerMenu key="demos" />,
             <MainMenuButton caption="Tests" priority={ 1 } collapseToMore estimatedWidth={ 62 } showInBurgerMenu key="tests" />,
             <FlexSpacer priority={ 100500 } key="spacer" />,
-            <GlobalMenu priority={ 100500 } estimatedWidth={ 60 } key="global-menu" />,
+            <GlobalMenu priority={ 100500 } estimatedWidth={ 60 } key="global-menu" rawProps={ { 'aria-label': 'Global Menu' } } />,
         ],
         name: 'UI',
     },
@@ -96,7 +97,7 @@ export const childrenExamples = [
                     />
                 </div>
             </MainMenuCustomElement>,
-            <GlobalMenu priority={ 100500 } estimatedWidth={ 60 } key="global-menu" />,
+            <GlobalMenu priority={ 100500 } estimatedWidth={ 60 } key="global-menu" rawProps={ { 'aria-label': 'Global Menu' } } />,
         ],
         name: 'Heroes',
     },
@@ -146,7 +147,7 @@ const renderAvatar = () => {
         <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" isDropdown { ...props } rawProps={ { 'aria-label': 'Avatar' } } />
             ) }
             renderBody={ (props) => (
                 <DropdownMenuBody { ...props }>
@@ -171,9 +172,9 @@ const items: AdaptiveItemProps[] = [
     { 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" icon={ HelpIcon } rawProps={ { 'aria-label': 'Help' } } /> },
     { id: 'avatar', priority: 2, 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' } } /> },
 ];
 export const itemsExamples = [
     {
@@ -217,13 +218,14 @@ export const itemsExamples = [
                         key={ p.id }
                         avatarUrl={ ALL_AVATARS[0] }
                         estimatedWidth={ 84 }
+                        rawProps={ { 'aria-label': 'Avatar' } }
                     />
                 ),
             },
             {
                 id: 'global-menu',
                 priority: 100,
-                render: (p: AdaptiveItemProps) => <GlobalMenu estimatedWidth={ 60 } key={ p.id } />,
+                render: (p: AdaptiveItemProps) => <GlobalMenu estimatedWidth={ 60 } key={ p.id } rawProps={ { 'aria-label': 'Global Menu' } } />,
             },
         ],
     },

app/src/docs/themes/Tokens.doc.tsx → app/src/docs/themes/Variables.doc.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { BaseDocsBlock, EditableDocContent } from '../../common';
 import { TokenGroups } from './implementation/TokenGroups';
 
-export class Tokens extends BaseDocsBlock {
-    title = 'Theme Tokens';
+export class VariablesDoc extends BaseDocsBlock {
+    title = 'Theme variables';
 
     renderContent() {
         return (

app/src/docs/themes/implementation/TokensPageConfig.ts

@@ -3,7 +3,7 @@ import { TTokensDocGroupCfg } from './types';
 export const TOKENS_DOC_CONFIG: TTokensDocGroupCfg[] = [
     {
         title: 'Semantic',
-        description: 'Defines semantic palette. These tokens are used widely in many UUI components, to apply colors according their role. These tokens can also be utilized directly in application code, in accordance with their designated roles.',
+        description: 'Defines semantic palette. These variables are used widely in many UUI components, to apply colors according their role. These variables can also be utilized directly in application code, in accordance with their designated roles.',
         subgroupsHeader: [
             'light highlights and backgrounds',
             'light component backgrounds',
@@ -63,27 +63,27 @@ export const TOKENS_DOC_CONFIG: TTokensDocGroupCfg[] = [
     },
     {
         title: 'Surfaces',
-        description: 'Tokens for different types of surfaces: from the background of the application and section colors to dividers and overlays.',
+        description: 'Variables for different types of surfaces: from the background of the application and section colors to dividers and overlays.',
         items: ('core/surfaces/'),
     },
     {
         title: 'Text',
-        description: 'Tokens for text and typography.',
+        description: 'Variables for text and typography.',
         items: ('core/text/'),
     },
     {
         title: 'Links',
-        description: 'Tokens for links.',
+        description: 'Variables for links.',
         items: ('core/links/'),
     },
     {
         title: 'Icons',
-        description: 'Tokens for icons.',
+        description: 'Variables for icons.',
         items: ('core/icons/'),
     },
     {
         title: 'Other',
-        description: 'Other tokens.',
+        description: 'Other variables.',
         items: ('core/other/'),
     },
     {

app/src/docs/themes/index.ts

@@ -1,3 +1,3 @@
 export * from './Overview.doc';
-export * from './Tokens.doc';
+export * from './Variables.doc';
 export * from './CreateTheme.doc';

app/src/documents/structure.ts

@@ -6,7 +6,7 @@ import {
     UtGuideCookbookDoc, DataSourcesGettingStartedDoc, DataSourcesRowOptionsDoc, DataSourcesBaseDataSourcePropsDoc,
     DataSourcesDataSourceStateDoc, DataSourcesArrayDataSourceDoc, DataSourcesAsyncDataSourceDoc,
     DataSourcesLazyDataSourceDoc, DataSourcesUsageDoc, OverviewDoc,
-    ThemingOverview, Tokens, AccessibilityDoc, UtGuideGettingStartedDoc, LensesDoc, CreateThemeDoc,
+    ThemingOverview, VariablesDoc, AccessibilityDoc, UtGuideGettingStartedDoc, LensesDoc, CreateThemeDoc,
 } from '../docs';
 import { CoreConceptsDoc } from '../docs/CoreConcepts';
 import { componentsStructure } from './structureComponents';
@@ -61,7 +61,7 @@ export const items: DocItem[] = [
 
     { id: 'themes', name: 'Themes' },
     { id: 'overviewThemes', name: 'Overview', component: ThemingOverview, parentId: 'themes' },
-    { id: 'tokens', name: 'Tokens', component: Tokens, parentId: 'themes' },
+    { id: 'tokens', name: 'Variables', component: VariablesDoc, parentId: 'themes', tags: ['colors', 'variables', 'tokens'] },
     { id: 'createTheme', name: 'Create Theme', component: CreateThemeDoc, parentId: 'themes' },
 
     { id: 'testing', name: 'Testing' },

app/src/documents/structureComponents.ts

@@ -93,7 +93,7 @@ export const componentsStructure = orderBy(
         { id: 'statusIndicator', name: 'Status Indicator', component: StatusIndicatorDoc, parentId: 'components' },
         { id: 'labeledInput', name: 'Labeled Input', component: LabeledInputDoc, parentId: 'components' },
         { id: 'linkButton', name: 'Link Button', component: LinkButtonDoc, parentId: 'components' },
-        { id: 'mainMenu', name: 'Main Menu', component: MainMenuDoc, parentId: 'components' },
+        { id: 'mainMenu', name: 'Main Menu', component: MainMenuDoc, parentId: 'components', tags: ['MainMenu'] },
         { id: 'modals', name: 'Modals', component: ModalsDoc, parentId: 'components' },
         { id: 'multiSwitch', name: 'MultiSwitch', component: MultiSwitchDoc, parentId: 'components' },
         { id: 'notificationCard', name: 'Notification Card', component: NotificationCardDoc, parentId: 'components' },
@@ -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'] },