revert last accidental merge

.github/workflows/e2e.yml

@@ -14,7 +14,7 @@ concurrency:
 jobs:
     e2e-tests:
         timeout-minutes: 60
-        runs-on: ubuntu-22.04
+        runs-on: ubuntu-latest
         if: github.event.pull_request.draft == false
         steps:
             - uses: actions/checkout@v4

.github/workflows/prod.yml

@@ -30,4 +30,4 @@ jobs:
       values-file: values.prod.yaml
       # TODO: After migrating prod environment we can use the same image name for prod and non-prod
       image-name: ui
-      git-version-mode: ''
+      git-version-mode: '/overrideconfig mode=Mainline'

app/src/demo/tables/masterDetailedTable/MasterDetailedTable.tsx

@@ -41,7 +41,7 @@ export function MasterDetailedTable() {
     );
 
     const pin = useCallback(
-        ({ value: { __typename } }: DataRowProps<PersonTableRecord, PersonTableRecordId[]>) =>
+        ({ value: { __typename } }: DataRowProps<PersonTableRecord, PersonTableRecordId[]>) => 
             __typename !== 'Person',
         [],
     );

app/src/demo/tables/masterDetailedTable/filters.ts

@@ -50,7 +50,6 @@ export const getFilters = <TFilter extends Record<string, any>>(): TableFiltersC
             columnKey: 'birthDate',
             title: 'Birth Date',
             type: 'rangeDatePicker',
-            format: 'YYYY-MM-DD',
         },
     ];
 };

app/src/docs/RichTextEditor.doc.tsx

@@ -1,14 +1,16 @@
 import * as React from 'react';
+import cx from 'classnames';
 import { BaseDocsBlock, DocExample } from '../common';
+import css from './styles.module.scss';
 
 export class RichTextEditorDoc extends BaseDocsBlock {
     title = 'Rich Text Editor';
     renderContent() {
         return (
-            <>
+            <span className={ cx(css.wrapper) }>
                 <DocExample path="./_examples/richTextEditor/Basic.example.tsx" />
                 <DocExample title="Inner scroll behavior" path="./_examples/richTextEditor/WithInnerScroll.example.tsx" />
-            </>
+            </span>
         );
     }
 }

app/src/docs/RichTextEditorSerializers.doc.tsx

@@ -1,14 +1,16 @@
 import * as React from 'react';
+import cx from 'classnames';
 import { BaseDocsBlock, DocExample } from '../common';
+import css from './styles.module.scss';
 
 export class RichTextEditorSerializersDoc extends BaseDocsBlock {
     title = 'Rich Text Editor Serializers';
     renderContent() {
         return (
-            <>
+            <span className={ cx(css.wrapper) }>
                 <DocExample title="MD format" path="./_examples/richTextEditor/MdSerialization.example.tsx" />
                 <DocExample title="HTML format" path="./_examples/richTextEditor/HtmlSerialization.example.tsx" />
-            </>
+            </span>
         );
     }
 }

app/src/docs/SliderRating.doc.tsx

@@ -3,6 +3,8 @@ import * as loveship from '@epam/loveship';
 import * as uui from '@epam/uui';
 import { DocBuilder, TDocConfig, TDocContext, TSkin } from '@epam/uui-docs';
 import { BaseDocsBlock, DocExample, EditableDocContent } from '../common';
+import cx from 'classnames';
+import css from './styles.module.scss';
 
 export class SliderRatingDoc extends BaseDocsBlock {
     title = 'SliderRating';
@@ -35,11 +37,11 @@ export class SliderRatingDoc extends BaseDocsBlock {
 
     renderContent() {
         return (
-            <>
+            <span className={ cx(css.wrapper) }>
                 <EditableDocContent fileName="sliderRating-descriptions" />
                 {this.renderSectionTitle('Examples')}
                 <DocExample title="Basic" path="./_examples/sliderRating/Basic.example.tsx" />
-            </>
+            </span>
         );
     }
 }

app/src/docs/Tag.doc.tsx

@@ -57,7 +57,7 @@ export class TagDoc extends BaseDocsBlock {
                     isDropdown: { examples: '*' },
                     onClear: { examples: ['callback', undefined] },
                 },
-                cellSize: '195-60',
+                cellSize: '180-60',
             });
             docPreview.add({
                 id: TTagPreview['Color Variants'],

app/src/docs/styles.module.scss

@@ -1,3 +1,13 @@
+@use '~@epam/assets/theme/theme_promo' as *;
+
+.wrapper {
+    &.uui-theme-promo {
+        :global {
+            @include theme-promo();
+        }
+    }
+}
+
 .app-bg {
     --uui-docs-bg: var(--uui-app-bg);
 }

app/src/sandbox/RTE/rteDemo.module.scss

@@ -1,6 +1,14 @@
+@use '~@epam/assets/theme/theme_promo' as *;
+
 .wrapper {
     flex-grow: 1;
     margin: 24px;
+
+    &.uui-theme-promo {
+        :global {
+            @include theme-promo();
+        }
+    }
 }
 
 .icon-wrapper {

app/src/sandbox/SandboxPage.tsx

@@ -8,6 +8,7 @@ import { PersonsTableDemo } from './tables/PersonsTableDemo';
 import { DemoTablePaged } from './tablePaged';
 import { DraftRTEDemo } from './draft-rte/DraftRTEDemo';
 import { ScrollSpyDemo } from './scroll-spy/ScrollSpyDemo';
+import { Responsive } from './responsive/Responsive';
 import { ThemeDemo } from './theme/ThemeDemo';
 import { ThemeElectricDemo } from './theme-electric-test/ThemeDemo';
 import { ProductsTableDemo } from './productsTable/ProductsTableDemo';
@@ -18,6 +19,7 @@ import { Skills } from './skills';
 import TableCellsStylesSandbox from './tableCellStyles/TableCellsStylesSandbox';
 import { ProjectTasksDemo } from './tasks/ProjectTasksDemo';
 import { RichTextEditorDemo } from './RTE/rteDemo';
+import { TableColumnConfigModalTest } from './tableColConfigModal/TableColumnConfigModalTest';
 import { PalettePage } from './tokens/palette/palettePage';
 import { ReactQueryLocationsTable } from './reactQueryLocationsTable';
 import { ProjectTableDemo } from './editableTable';
@@ -35,13 +37,15 @@ export function SandboxPage() {
             { id: 'reactQueryLocationsTableDemo', name: 'React-query Loactions Demo', component: ReactQueryLocationsTable },
             { id: 'Draft', name: 'DRAFT RTE demo', component: DraftRTEDemo },
             { id: 'scrollSpy', name: 'Scroll Spy', component: ScrollSpyDemo },
+            { id: 'responsive', name: 'Responsive', component: Responsive },
             { id: 'uui_theming', name: 'UUI Theming', component: ThemeDemo },
             { id: 'theme_electric', name: 'Theme Electric', component: ThemeElectricDemo },
             { id: 'DemoTablePaged', name: 'Table with paging', component: DemoTablePaged },
             { id: 'SkillsBatteryPopover', name: 'Skills', component: Skills },
             { id: 'TableCellsStylesSandbox', name: 'Table Cells/Rows styles', component: TableCellsStylesSandbox },
             { id: 'AdaptivePanel', name: 'Adaptive panel', component: AdaptivePanelDemo },
             { id: 'RTEDemo', name: 'RTE Demo', component: RichTextEditorDemo },
+            { id: 'TableColumnsConfigurationModal', name: 'Table ColumnsConfigModal', component: TableColumnConfigModalTest },
             { id: 'tokens', name: 'Tokens' },
             { parentId: 'tokens', id: 'tokensPalette', name: 'Palette', component: PalettePage },
             { id: 'rtl-example', name: 'Rtl-example', component: RtlExample },

app/src/sandbox/db/DbDemo.module.scss

@@ -1,6 +1,14 @@
+@use '~@epam/assets/theme/theme_promo' as *;
+
 .container {
     display: flex;
     flex-direction: column;
     flex: 1 1 0;
     height: calc(100vh - 60px);
+
+    &.uui-theme-promo {
+        :global {
+            @include theme-promo();
+        }
+    }
 }

app/src/sandbox/draft-rte/DraftRTEDemo.module.scss

@@ -1,7 +1,15 @@
+@use '~@epam/assets/theme/theme_loveship' as *;
+
 .demo-wrapper {
     display: flex;
     width: 100%;
     height: calc(100vh - 60px);
+
+    &.uui-theme-loveship {
+        :global {
+            @include theme-loveship();
+        }
+    }
 }
 
 .DraftRTEDemo {

app/src/sandbox/productsTable/ProductsTableDemo.module.scss

@@ -1,5 +1,12 @@
+@use '~@epam/assets/theme/theme_loveship' as *;
 
 .container {
     width: 100%;
     height: calc(100vh - 60px);
+
+    &.uui-theme-loveship {
+        :global {
+            @include theme-loveship();
+        }
+    }
 }

app/src/sandbox/responsive/LoveshipPickerInput.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { PickerInput } from '@epam/loveship';
+import { useArrayDataSource } from '@epam/uui-core';
+
+const languageLevels = [
+    { id: 2, level: 'A1' }, { id: 3, level: 'A1+' }, { id: 4, level: 'A2' }, { id: 5, level: 'A2+' }, { id: 6, level: 'B1' }, { id: 7, level: 'B1+' }, { id: 8, level: 'B2' }, { id: 9, level: 'B2+' }, { id: 10, level: 'C1' }, { id: 11, level: 'C1+' }, { id: 12, level: 'C2' },
+];
+
+interface ILoveshipPickerInputProps {
+    type: 'single' | 'multi';
+}
+
+export const LoveshipPickerInput: React.FC<ILoveshipPickerInputProps> = ({ type }) => {
+    const [value, setValue] = useState(null);
+
+    const dataSource = useArrayDataSource(
+        {
+            items: languageLevels,
+        },
+        [],
+    );
+
+    return (
+        <PickerInput
+            value={ value }
+            onValueChange={ setValue }
+            dataSource={ dataSource }
+            getName={ (item) => item.level }
+            entityName="Language level"
+            selectionMode={ type }
+            valueType="id"
+            sorting={ { field: 'level', direction: 'asc' } }
+            placeholder={ type }
+        />
+    );
+};

app/src/sandbox/responsive/PromoPickerInput.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { PickerInput } from '@epam/promo';
+import { useArrayDataSource } from '@epam/uui-core';
+
+const languageLevels = [
+    { id: 2, level: 'A1' }, { id: 3, level: 'A1+' }, { id: 4, level: 'A2' }, { id: 5, level: 'A2+' }, { id: 6, level: 'B1' }, { id: 7, level: 'B1+' }, { id: 8, level: 'B2' }, { id: 9, level: 'B2+' }, { id: 10, level: 'C1' }, { id: 11, level: 'C1+' }, { id: 12, level: 'C2' },
+];
+
+interface IPromoPickerInputProps {
+    type: 'single' | 'multi';
+}
+
+export const PromoPickerInput: React.FC<IPromoPickerInputProps> = ({ type }) => {
+    const [value, setValue] = useState(null);
+
+    const dataSource = useArrayDataSource(
+        {
+            items: languageLevels,
+        },
+        [],
+    );
+
+    return (
+        <PickerInput
+            value={ value }
+            onValueChange={ setValue }
+            dataSource={ dataSource }
+            getName={ (item) => item.level }
+            entityName="Language level"
+            selectionMode={ type }
+            valueType="id"
+            sorting={ { field: 'level', direction: 'asc' } }
+            placeholder={ type }
+        />
+    );
+};

app/src/sandbox/responsive/Responsive.module.scss

@@ -0,0 +1,16 @@
+@use '~@epam/assets/theme/theme_loveship' as *;
+@use '~@epam/assets/theme/theme_promo' as *;
+
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    width: calc(100vw - 240px);
+
+    &.uui-theme-loveship {
+        @include theme-loveship();
+    }
+
+    &.uui-theme-promo {
+        @include theme-promo();
+    }
+}

app/src/sandbox/responsive/Responsive.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import css from './Responsive.module.scss';
+import { PromoPickerInput } from './PromoPickerInput';
+import { LoveshipPickerInput } from './LoveshipPickerInput';
+import cx from 'classnames';
+
+export function Responsive() {
+    return (
+        <>
+            <div className={ cx(css.wrapper, css.uuiThemePromo) }>
+                promo:
+                <PromoPickerInput type="single" />
+                <PromoPickerInput type="multi" />
+            </div>
+            <div className={ cx(css.wrapper, css.uuiThemeLoveship) }>
+                loveship:
+                <LoveshipPickerInput type="single" />
+                <LoveshipPickerInput type="multi" />
+            </div>
+        </>
+    );
+}

app/src/sandbox/scroll-spy/ScrollSpyDemo.module.scss

@@ -1,4 +1,12 @@
+@use '~@epam/assets/theme/theme_promo' as *;
+
 .panel {
     display: flex;
     width: 100%;
+
+    &.uui-theme-promo {
+        :global {
+            @include theme-promo();
+        }
+    }
 }

app/src/sandbox/skills/SkillsBatteryPopover.module.scss

@@ -1,5 +1,13 @@
+@use '~@epam/assets/theme/theme_promo' as *;
+
 .wrapper {
     padding: 3rem 1rem 0;
+
+    &.uui-theme-promo {
+        :global {
+            @include theme-promo();
+        }
+    }
 }
 
 .target-body-container {
@@ -19,6 +27,12 @@
 .drop-container {
     width: 334px;
 
+    &.uui-theme-promo {
+        :global {
+            @include theme-promo();
+        }
+    }
+
     &:global(.uui-dropdown-body) {
         min-width: 300px;
         background-color: var(--gray5);

app/src/sandbox/tableCellStyles/TableCellsStylesSandbox.module.scss

@@ -0,0 +1,16 @@
+@use '~@epam/assets/theme/theme_promo' as *;
+@use '~@epam/assets/theme/theme_loveship' as *;
+
+.wrapper {
+    &.uui-theme-promo {
+        :global {
+            @include theme-promo();
+        }
+    }
+
+    &.uui-theme-loveship {
+        :global {
+            @include theme-loveship();
+        }
+    }
+}

app/src/sandbox/tableCellStyles/TableCellsStylesSandbox.tsx

@@ -17,6 +17,7 @@ import * as loveship from '@epam/loveship';
 import * as uui from '@epam/uui';
 import { DatePickerProps } from '@epam/uui';
 import { PickerInputBaseProps } from '@epam/uui-components';
+import css from './TableCellsStylesSandbox.module.scss';
 
 // Defined interface describe data for each row
 interface Item {
@@ -303,7 +304,7 @@ export default function TableCellsStylesSandbox() {
 
     // Render the table, passing the prepared data to it in form of getRows callback, list props (e.g. items counts)
     return (
-        <skin.Panel key={ skinName }>
+        <skin.Panel key={ skinName } cx={ [css.wrapper, skinName !== 'uui' && css[`uui-theme-${skinName}`]] }>
             <skin.FlexRow>
                 <skin.FlexCell width="auto">
                     <skin.MultiSwitch