resolve conflicts with 'develop' branch

app/src/common/AppHeader.tsx

@@ -74,7 +74,7 @@ export function AppHeader() {
                     </DropdownMenuBody>
                 ) }
                 renderTarget={ (props) => (
-                    <Button { ...props } cx={ css.themeSwitcherButton } caption={ themesById[theme]?.name } fill="none" size="36" isDropdown={ true } />
+                    <Button { ...props } cx={ css.themeSwitcherButton } caption={ themesById[theme]?.name } fill="none" isDropdown={ true } />
                 ) }
                 placement="bottom-end"
                 key="Theme-switcher"

app/src/common/Page.tsx

@@ -10,6 +10,8 @@ export interface PageProps extends IHasChildren {
     contentCx?: string;
     rootCx?: string;
     isFullScreen?: boolean;
+    wrapperRef?: React.Ref<HTMLElement>;
+    onClick?: (e?: React.MouseEvent<HTMLElement>) => void;
 }
 
 export function Page(props: PageProps) {
@@ -36,7 +38,13 @@ export function Page(props: PageProps) {
         <div className={ cx(css.root, rootCx) }>
             <header>{!isFullScreen && renderHeader?.()}</header>
             <ErrorHandler cx={ css.errorBlock }>
-                <main className={ cx(css.content, contentCx) }>{children}</main>
+                <main
+                    className={ cx(css.content, contentCx) }
+                    ref={ props.wrapperRef }
+                    onClick={ props.onClick }
+                >
+                    {children}
+                </main>
                 <footer>{!isFullScreen && renderFooter?.()}</footer>
             </ErrorHandler>
         </div>

app/src/common/docs/EditableDocContent.tsx

@@ -102,7 +102,7 @@ export class EditableDocContent extends React.Component<EditableDocContentProps,
                         <div id={ this.props.title.split(' ').join('_').toLowerCase() } className={ css.title } ref={ this.titleRef }>
                             {this.props.title}
                         </div>
-                        <IconButton cx={ css.anchor } icon={ AnchorIcon } color="info" href={ `#${this.props.title.split(' ').join('_').toLowerCase()}` } />
+                        <IconButton cx={ css.anchor } icon={ AnchorIcon } color="primary" href={ `#${this.props.title.split(' ').join('_').toLowerCase()}` } />
                     </FlexRow>
                 )}
                 <IEditableDebouncer

app/src/common/docs/componentEditor/view/peTable/PeTable.tsx

@@ -79,7 +79,7 @@ const PeTableToolbar = React.memo(
                     <IconButton
                         icon={ ResetIcon }
                         onClick={ onResetAllProps }
-                        color="info"
+                        color="primary"
                     />
                 </Tooltip>
             </FlexRow>

app/src/common/slider/Slider.tsx

@@ -43,14 +43,14 @@ export class Slider extends React.Component<SliderProps> {
                 <div className={ css.controls }>
                     <IconButton
                         rawProps={ { 'aria-label': 'Backward' } }
-                        color="info"
+                        color="primary"
                         isDisabled={ this.state.activeSlide === 0 }
                         icon={ ArrowPrev }
                         onClick={ this.handlePreviousClick }
                     />
                     <IconButton
                         rawProps={ { 'aria-label': 'Forward' } }
-                        color="info"
+                        color="primary"
                         isDisabled={ this.state.activeSlide === this.props.slides.length - 1 }
                         icon={ ArrowNext }
                         onClick={ this.handleNextClick }

app/src/demo/dnd/DndMaterial.module.scss

@@ -8,7 +8,7 @@
     padding: 6px 0;
     margin: 0 24px;
 
-    .material-row {
+    .dnd-item {
         border: 1px solid var(--uui-divider);
     }
 

app/src/demo/dnd/DndMaterial.tsx

@@ -57,7 +57,7 @@ export class DndMaterial extends React.Component<DndMaterialProps> {
                 render={ (props) => (
                     <div { ...props.eventHandlers } ref={ props.ref } className={ cx(css.dragElement, props.classNames) }>
                         <Panel background="surface-main" cx={ cx(css.dndItem, props.isDragGhost && uuiDndState.dragGhost) }>
-                            <FlexRow cx={ css.materialRow }>
+                            <FlexRow>
                                 <FlexCell width="auto" shrink={ 0 } cx={ css.iconWrapper }>
                                     <DragHandle cx={ [css.dragHandle] } />
                                     <IconContainer size={ 48 } icon={ FileIcon } cx={ css.icon } />

app/src/docs/_examples/adaptivePanel/Basic.example.tsx

@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
 import { AdaptiveItemProps, AdaptivePanel } from '@epam/uui-components';
-import { Button, Dropdown, DropdownContainer, FlexCell, VerticalTabButton, Slider } from '@epam/uui';
+import { Button, Dropdown, FlexCell, VerticalTabButton, Slider, DropdownMenuBody } from '@epam/uui';
 
 export default function BasicAdaptivePanelExample() {
     const [width, setWidth] = useState<number>(100);
+    const [value, onValueChange] = useState('');
 
     const renderItem = (item: AdaptiveItemProps<{ data?: { caption: string } }>) => {
         return (
@@ -30,11 +31,15 @@ export default function BasicAdaptivePanelExample() {
                 <Dropdown
                     renderTarget={ (props) => <Button caption="Hidden items" { ...props } /> }
                     renderBody={ (props) => (
-                        <DropdownContainer { ...props }>
+                        <DropdownMenuBody { ...props }>
                             {hiddenItems.map((i) => (
-                                <VerticalTabButton caption={ i.data.caption } onClick={ () => {} } />
+                                <VerticalTabButton
+                                    caption={ i.data.caption }
+                                    onClick={ () => onValueChange(i.data.caption) }
+                                    isLinkActive={ i.data.caption === value }
+                                />
                             ))}
-                        </DropdownContainer>
+                        </DropdownMenuBody>
                     ) }
                 />
             ),

app/src/docs/_examples/badge/Dropdown.example.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Dropdown, DropdownContainer, DropdownMenuButton, FlexRow, Badge } from '@epam/uui';
+import { Dropdown, DropdownMenuButton, FlexRow, Badge, DropdownMenuBody } from '@epam/uui';
 import { ReactComponent as navigationDownIcon } from '@epam/assets/icons/navigation-chevron_down-outline.svg';
 import { DropdownBodyProps } from '@epam/uui-core';
 import css from './DropdownExample.module.scss';
@@ -18,7 +18,7 @@ export default function TypesExample() {
 
     const renderDropdownBody = (props: DropdownBodyProps) => {
         return (
-            <DropdownContainer { ...props } width="auto">
+            <DropdownMenuBody { ...props }>
                 {dropdownMenuItems.map((item) => (
                     <DropdownMenuButton
                         key={ item.id }
@@ -30,7 +30,7 @@ export default function TypesExample() {
                         } }
                     />
                 ))}
-            </DropdownContainer>
+            </DropdownMenuBody>
         );
     };
 

app/src/docs/_examples/button/Toggler.example.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react';
-import { Button, FlexRow, Panel, Tooltip, PickerInput } from '@epam/uui';
+import { Button, FlexRow, Tooltip, PickerInput, DropdownMenuBody, DropdownMenuButton } from '@epam/uui';
 import { Dropdown } from '@epam/uui-components';
 import { useLazyDataSource, LazyDataSourceApiRequest, useUuiContext } from '@epam/uui-core';
 import { Person } from '@epam/uui-docs';
@@ -18,9 +18,9 @@ export default function ButtonAsToggler() {
         <FlexRow columnGap="12">
             <Dropdown
                 renderBody={ (props) => (
-                    <Panel background="surface-main" { ...props }>
-                        some dropdown content
-                    </Panel>
+                    <DropdownMenuBody { ...props }>
+                        <DropdownMenuButton caption="Some dropdown content" onClick={ () => window.alert('onClick') } />
+                    </DropdownMenuBody>
                 ) }
                 renderTarget={ (props) => <Button caption="Dropdown" { ...props } /> }
             />

app/src/docs/_examples/controlGroup/Basic.example.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import { Button, ControlGroup, Dropdown, Panel, DropdownMenuButton } from '@epam/uui';
+import { Button, ControlGroup, Dropdown, DropdownMenuButton, DropdownMenuBody } from '@epam/uui';
 import { ReactComponent as menuIcon } from '@epam/assets/icons/common/navigation-more_vert-18.svg';
 
 export default function BasicExample() {
     const renderBody = () => {
         return (
-            <Panel background="surface-main" shadow={ true }>
+            <DropdownMenuBody>
                 <DropdownMenuButton caption="Duplicate" onClick={ () => {} } />
                 <DropdownMenuButton caption="Rename" onClick={ () => {} } />
                 <DropdownMenuButton caption="Delete" onClick={ () => {} } />
-            </Panel>
+            </DropdownMenuBody>
         );
     };
 

app/src/docs/_examples/dropdown/Basic.example.tsx

@@ -64,12 +64,12 @@ export default function BasicDropdownExample() {
                 <FlexRow padding="12" vPadding="24">
                     <Panel background="surface-main">
                         <FlexRow alignItems="center" columnGap="12" padding="6">
-                            <IconButton size="18" icon={ telescopeIcon } color="info" onClick={ () => null } />
-                            <IconButton size="18" icon={ chatIcon } color="info" onClick={ () => null } />
-                            <IconButton size="18" icon={ githubIcon } color="info" onClick={ () => null } />
-                            <IconButton size="18" icon={ skypeIcon } color="info" onClick={ () => null } />
-                            <IconButton size="18" icon={ instaIcon } color="info" onClick={ () => null } />
-                            <IconButton size="18" icon={ shareIcon } color="info" onClick={ () => null } />
+                            <IconButton size="18" icon={ telescopeIcon } color="primary" onClick={ () => null } />
+                            <IconButton size="18" icon={ chatIcon } color="primary" onClick={ () => null } />
+                            <IconButton size="18" icon={ githubIcon } color="primary" onClick={ () => null } />
+                            <IconButton size="18" icon={ skypeIcon } color="primary" onClick={ () => null } />
+                            <IconButton size="18" icon={ instaIcon } color="primary" onClick={ () => null } />
+                            <IconButton size="18" icon={ shareIcon } color="primary" onClick={ () => null } />
                         </FlexRow>
                         <FlexRow padding="6">
                             <Text cx={ css.text } lineHeight="18" fontSize="12" color="secondary">

app/src/docs/_examples/dropdownContainer/Basic.example.tsx

@@ -1,10 +1,7 @@
 import React from 'react';
-import { DropdownContainer, LinkButton, Text, Button, FlexRow, FlexCell, Panel, DropdownMenuButton } from '@epam/uui';
+import { DropdownContainer, LinkButton, Text, Button, FlexRow, FlexCell } from '@epam/uui';
 import { Dropdown } from '@epam/uui-components';
 import { DropdownBodyProps, IDropdownToggler } from '@epam/uui-core';
-import { ReactComponent as DeleteIcon } from '@epam/assets/icons/common/action-delete-12.svg';
-import { ReactComponent as ExportIcon } from '@epam/assets/icons/common/file-export-12.svg';
-import { ReactComponent as phoneIcon } from '@epam/assets/icons/common/communication-phone-18.svg';
 
 export default function BasicExample() {
     const renderFirstDropdownBody = (props: DropdownBodyProps) => {
@@ -30,12 +27,21 @@ export default function BasicExample() {
 
     const renderSecondDropdownBody = (props: DropdownBodyProps) => {
         return (
-            <DropdownContainer showArrow={ true } width="auto" { ...props }>
-                <Panel background="surface-main">
-                    <DropdownMenuButton caption="Export" icon={ ExportIcon } onClick={ () => {} } />
-                    <DropdownMenuButton caption="Delete" icon={ DeleteIcon } onClick={ () => {} } />
-                    <DropdownMenuButton caption="Phone" icon={ phoneIcon } onClick={ () => {} } />
-                </Panel>
+            <DropdownContainer showArrow={ true } maxWidth={ 360 } vPadding="12" padding="18" { ...props }>
+                <FlexCell alignSelf="flex-start">
+                    <Text fontSize="18" lineHeight="24" color="primary" fontWeight="600">
+                        Some Title
+                    </Text>
+                    <Text fontSize="14">
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem beatae delectus distinctio esse explicabo id, optio qui repellat ut veritatis!
+                    </Text>
+                </FlexCell>
+                <FlexCell alignSelf="flex-start">
+                    <FlexRow columnGap="12">
+                        <Button color="primary" size="30" caption="Some Action" onClick={ () => null } />
+                        <Button color="secondary" fill="outline" size="30" caption="Cancel" onClick={ () => null } />
+                    </FlexRow>
+                </FlexCell>
             </DropdownContainer>
         );
     };

app/src/docs/_examples/iconButton/Basic.example.tsx

@@ -9,7 +9,7 @@ export default function BasicIconButtonExample() {
         <>
             <IconButton icon={ AccountIcon24 } onClick={ () => null } />
             <IconButton icon={ AccountIcon24 } isDisabled={ true } onClick={ () => null } />
-            <IconButton icon={ EyeIcon18 } color="info" onClick={ () => null } />
+            <IconButton icon={ EyeIcon18 } color="primary" onClick={ () => null } />
             <IconButton icon={ EyeIcon18 } onClick={ () => null } />
             <IconButton icon={ ConfigIcon12 } href="https://www.epam.com/" />
         </>

app/src/docs/_examples/linkButton/Default.example.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { IDropdownToggler } from '@epam/uui-core';
-import { Dropdown, LinkButton, Panel, Text } from '@epam/uui';
+import { Dropdown, DropdownMenuBody, DropdownMenuButton, LinkButton, Panel, Text } from '@epam/uui';
 import { ReactComponent as navigationBack } from '@epam/assets/icons/common/navigation-back-18.svg';
 import css from './DefaultExample.module.scss';
 
 export default function DefaultLinkButtonExample() {
-    const renderDropdownBody = () => <Panel background="surface-main" shadow><Text>Dropdown body</Text></Panel>;
+    const renderDropdownBody = () => <DropdownMenuBody><DropdownMenuButton caption="Dropdown body" /></DropdownMenuBody>;
 
     return (
         <div className={ css.wrapper }>

app/src/docs/_examples/linkButton/Sorting.example.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { IDropdownToggler, DropdownBodyProps } from '@epam/uui-core';
-import { Dropdown, DropdownMenuButton, FlexRow, LinkButton, DropdownContainer, Text } from '@epam/uui';
+import { Dropdown, DropdownMenuButton, FlexRow, LinkButton, Text, DropdownMenuBody } from '@epam/uui';
 
 const dropdownMenuItems = [
     { id: 1, caption: 'Relevance' }, { id: 2, caption: 'Price' }, { id: 3, caption: 'Size' },
@@ -14,7 +14,7 @@ export default function SortingLinkButtonExample() {
 
     const renderDropdownBody = (props: DropdownBodyProps) => {
         return (
-            <DropdownContainer { ...props } width="auto">
+            <DropdownMenuBody { ...props }>
                 {dropdownMenuItems.map((item) => (
                     <DropdownMenuButton
                         key={ item.id }
@@ -25,7 +25,7 @@ export default function SortingLinkButtonExample() {
                         } }
                     />
                 ))}
-            </DropdownContainer>
+            </DropdownMenuBody>
         );
     };
 

app/src/docs/_examples/statusIndicator/Dropdown.example.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Dropdown, DropdownContainer, DropdownMenuButton, FlexRow, StatusIndicator, StatusIndicatorProps, LinkButton } from '@epam/uui';
+import { Dropdown, DropdownMenuButton, FlexRow, StatusIndicator, StatusIndicatorProps, LinkButton, DropdownMenuBody } from '@epam/uui';
 import { DropdownBodyProps } from '@epam/uui-core';
 
 const dropdownMenuItems = [
@@ -14,7 +14,7 @@ export default function TypesExample() {
 
     const renderDropdownBody = (props: DropdownBodyProps) => {
         return (
-            <DropdownContainer { ...props } width="auto">
+            <DropdownMenuBody { ...props }>
                 {dropdownMenuItems.map((item) => (
                     <DropdownMenuButton
                         key={ item.id }
@@ -25,7 +25,7 @@ export default function TypesExample() {
                         } }
                     />
                 ))}
-            </DropdownContainer>
+            </DropdownMenuBody>
         );
     };
 

app/src/index.tsx

@@ -46,7 +46,12 @@ apm.addLabels({ project: 'epm-uui', service_type: 'ui' });
 
 function UuiEnhancedApp() {
     const [isLoaded, setIsLoaded] = useState(false);
-    const { services } = useUuiServices<TApi, AppContext>({ apiDefinition, router });
+    const { services } = useUuiServices<TApi, AppContext>({
+        apiDefinition,
+        router,
+        apiReloginPath: 'api/auth/login',
+        apiPingPath: 'api/auth/ping',
+    });
 
     useEffect(() => {
         async function initServices() {

app/src/preview/previewContent/matrixSummary/matrixSummary.module.scss

@@ -0,0 +1,33 @@
+.rootTable {
+    width: 100%;
+    min-width: 100%;
+    border-collapse: collapse;
+
+    .title {
+        padding-bottom: 12px;
+    }
+
+    .propName {
+        white-space: nowrap;
+        padding: 0 6px 0 6px;
+        text-align: right;
+        width: 200px;
+    }
+
+    .propValueContainer {
+        padding: 0 6px 0 6px;
+    }
+}
+
+.valueTable {
+    border-collapse: collapse;
+
+    .propValue {
+        padding: 0 6px 0 6px;
+
+        > :global(.uui-text) {
+            padding-top: 4px;
+            padding-bottom: 4px;
+        }
+    }
+}