Merge branch 'develop' into correct_screenshots_branch

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/app",
-  "version": "5.9.2",
+  "version": "5.10.0",
   "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.9.2",
-    "@epam/draft-rte": "5.9.2",
-    "@epam/electric": "5.9.2",
+    "@epam/assets": "5.10.0",
+    "@epam/draft-rte": "5.10.0",
+    "@epam/electric": "5.10.0",
     "@epam/internal": "0.0.2",
-    "@epam/loveship": "5.9.2",
-    "@epam/promo": "5.9.2",
-    "@epam/uui": "5.9.2",
-    "@epam/uui-components": "5.9.2",
-    "@epam/uui-core": "5.9.2",
-    "@epam/uui-db": "5.9.2",
-    "@epam/uui-docs": "5.9.2",
-    "@epam/uui-editor": "5.9.2",
-    "@epam/uui-timeline": "5.9.2",
+    "@epam/loveship": "5.10.0",
+    "@epam/promo": "5.10.0",
+    "@epam/uui": "5.10.0",
+    "@epam/uui-components": "5.10.0",
+    "@epam/uui-core": "5.10.0",
+    "@epam/uui-db": "5.10.0",
+    "@epam/uui-docs": "5.10.0",
+    "@epam/uui-editor": "5.10.0",
+    "@epam/uui-timeline": "5.10.0",
     "@tanstack/react-query": "^5.17.19",
     "@udecode/plate-common": "31.3.2",
     "amplitude-js": "8.9.1",

app/src/common/docs/baseDocBlock/tabs/docTab.module.scss

@@ -1,14 +1,10 @@
 .width-wrapper {
     padding: 0 60px 60px;
     max-width: 960px;
-
-    & :global(.uui-typography) {
-        --uui-font-size: 24px;
-    }
 }
 
 @media (max-width: 768px) {
     .width-wrapper {
         padding: 0 18px 18px;
     }
-}
+}

app/src/common/sidebar/SidebarButton.module.scss

@@ -1,6 +1,7 @@
 .root {
     &:global(.uui-button-box) {
-        height: 36px;
+        min-height: 36px;
+        height: auto;
         align-items: center;
         padding-inline-start: 11px;
         font-size: 16px;
@@ -19,6 +20,7 @@
         font-size: 16px;
         overflow-x: hidden;
         text-overflow: ellipsis;
+        height: auto;
     }
 
     &.indent-12 {

app/src/demo/tables/editableTable/columns.tsx

@@ -24,6 +24,7 @@ export function getColumnsTableMode(columnsProps: ColumnsProps) {
             caption: 'Name',
             width: 300,
             fix: 'left',
+            isLocked: true,
             renderCell: (props) => (
                 <DataTableCell
                     { ...props.rowLens.prop('name').toProps() }

app/src/demo/tables/filteredTable/columns.tsx

@@ -11,7 +11,7 @@ export const personColumns: DataColumnProps<Person, number>[] = [
         width: 130,
         fix: 'left',
         isSortable: true,
-        isAlwaysVisible: true,
+        isLocked: true,
     },
     {
         key: 'profileStatus',
@@ -26,6 +26,7 @@ export const personColumns: DataColumnProps<Person, number>[] = [
         width: 100,
         minWidth: 90,
         isSortable: true,
+        isAlwaysVisible: true,
     },
     {
         key: 'salary',

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

@@ -15,7 +15,7 @@ export const personColumns: DataColumnProps<Person, PersonTableRecordId[], DataQ
         fix: 'left',
         isSortable: true,
         justifyContent: 'space-between',
-        isAlwaysVisible: true,
+        isLocked: true,
     }, {
         key: 'profileStatus',
         caption: 'Profile Status',

app/src/docs/_examples/tables/PresetsPanelBasic.example.tsx

@@ -134,7 +134,7 @@ export default function PresetsPanelExample() {
 
     return (
         <Panel background="surface-main" shadow style={ { height: '400px' } }>
-            <FlexRow>
+            <FlexRow padding="12">
                 <PresetsPanel { ...tableStateApi } />
             </FlexRow>
             <DataTable

app/src/docs/_examples/tables/useTableState/useTableState.example.tsx

@@ -129,7 +129,7 @@ export default function FiltersPanelExample() {
 
     return (
         <Panel background="surface-main" shadow style={ { height: '400px' } }>
-            <FlexRow>
+            <FlexRow padding="12">
                 <PresetsPanel { ...tableStateApi } />
             </FlexRow>
             <DataTable

changelog.md

@@ -1,14 +1,33 @@
-# 5.*.* - **.**.****
+# 5.10.0 - 11.10.2024
 
 **What's New**
+* [DataTable]:
+  * [Breaking change]: reworked `isAwaysVisible` column configuration prop. Now it's not make column fixed by default and doesn't forbid to unpin or reorder, it's only disallow to hide this column from table. If you need previous behavior, please use `isLocked` prop.
+  * Added `isLocked` prop for column configuration. If `true` value provided, makes this column locked, which means that you can't hide, unpin or reorder this column. This column should always be pined. 
+* [DataTable]: `ColumnsConfigurationModal` updated modal width from 420px to 560px according design, 'disabled' state for locked columns is changed to 'readonly', added vertical paddings to multiline column names.
+* [PickerInput]: 
+  * Added support of `minCharsToSearch` > 0 with `searchPosition = 'body'`.
+  * Added renderEmpty prop to render custom empty block for depends on various reasons.
+  * `renderNotFonud` prop is deprecated, please use `renderEmpty` instead
 * Sass updated to the last version, warnings 'Mixed Declarations' fixed https://sass-lang.com/documentation/breaking-changes/mixed-decls/
-* [DataTable]: - `ColumnsConfigurationModal` - updated modal width from 420px to 560px according design, 'disabled' state for locked columns is changed to 'readonly', added vertical paddings to multiline column names.
 * [Modals]: for mobile view (width is up to 720px) by default the modal position is fixed at the bottom edge of the screen
 * [TabButton][VerticalTabButton]: decreased paddings & gaps for all sizes according to the design
 
 **What's Fixed**
-*[VirtualList]: fixed offsets counting if rows have different height
+* [Form]: fixed bug when `beforeLeave` modal appears in case of redirect in `onSuccess` callback
+* [VirtualList]: fixed offsets counting if rows have different height
+* [TabButton][VerticalTabButton]: aligned with design, paddings & gaps decreased
+
 
+# 5.9.5 - 09.10.2024
+
+**What's Fixed**
+* [ArrayDataSource]: fixed initializing caches on data source creation.
+
+# 5.9.4 - 26.09.2024
+
+**What's Fixed**
+* [useAsyncDataSource]: fixed refetching of data after deps change.
 
 
 # 5.9.3 - 16.09.2024
@@ -39,7 +58,7 @@
 * [LinkButton]: added `weight` and `underline` props
 * [DataTable]: disable animation for loading skeletons due to performance issues
 * [DatePickers]: added 'DDMMYYYY' format to the list of supported date formats for parsing user input
-* Uploaded new version of icons pack: 
+* Uploaded new version of icons pack:
   * icons added: action-clock_fast-fill, action-clock_fast-outline
   * icons updated (visual weight tweaked, icon size was slightly decreased): action-job_function-fill, action-job_function-outline, communication-mail-fill, communication-mail-outline
 

draft-rte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/draft-rte",
-  "version": "5.9.2",
+  "version": "5.10.0",
   "author": "EPAM",
   "license": "MIT",
   "main": "index.js",
@@ -11,10 +11,10 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@epam/assets": "5.9.2",
-    "@epam/loveship": "5.9.2",
-    "@epam/uui-components": "5.9.2",
-    "@epam/uui-core": "5.9.2",
+    "@epam/assets": "5.10.0",
+    "@epam/loveship": "5.10.0",
+    "@epam/uui-components": "5.10.0",
+    "@epam/uui-core": "5.10.0",
     "@types/draft-js": "0.10.23",
     "classnames": "^2.2.6",
     "draft-convert": "^2.1.2",

epam-assets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/assets",
-  "version": "5.9.2",
+  "version": "5.10.0",
   "description": "EPAM Assets Library",
   "author": "EPAM",
   "license": "MIT",

epam-electric/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/electric",
-  "version": "5.9.2",
+  "version": "5.10.0",
   "description": "EPAM UUI components set branded with 'electric' style",
   "author": "EPAM",
   "license": "MIT",
@@ -12,9 +12,9 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@epam/uui": "5.9.2",
-    "@epam/uui-components": "5.9.2",
-    "@epam/uui-core": "5.9.2"
+    "@epam/uui": "5.10.0",
+    "@epam/uui-components": "5.10.0",
+    "@epam/uui-core": "5.10.0"
   },
   "devDependencies": {
     "mockdate": "^3.0.5"

epam-promo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/promo",
-  "version": "5.9.2",
+  "version": "5.10.0",
   "description": "EPAM UUI4 components set",
   "author": "EPAM",
   "license": "MIT",
@@ -12,10 +12,10 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@epam/assets": "5.9.2",
-    "@epam/uui": "5.9.2",
-    "@epam/uui-components": "5.9.2",
-    "@epam/uui-core": "5.9.2",
+    "@epam/assets": "5.10.0",
+    "@epam/uui": "5.10.0",
+    "@epam/uui-components": "5.10.0",
+    "@epam/uui-core": "5.10.0",
     "@types/classnames": "2.2.6",
     "classnames": "2.2.6"
   },

extra/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/uui-extra",
-  "version": "5.9.2",
+  "version": "5.10.0",
   "description": "EPAM UUI components set branded with 'loveship' style",
   "author": "EPAM",
   "license": "MIT",
@@ -11,9 +11,9 @@
     "build": "ts-node ../uui-build/ts/scripts/buildUuiModule.ts"
   },
   "dependencies": {
-    "@epam/loveship": "5.9.2",
-    "@epam/promo": "5.9.2",
-    "@epam/uui-core": "5.9.2",
+    "@epam/loveship": "5.10.0",
+    "@epam/promo": "5.10.0",
+    "@epam/uui-core": "5.10.0",
     "immutable": "3.8.2"
   },
   "peerDependencies": {

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.9.2",
+  "version": "5.10.0",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "exact": true

loveship/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/loveship",
-  "version": "5.9.2",
+  "version": "5.10.0",
   "description": "EPAM UUI components set branded with 'loveship' style",
   "author": "EPAM",
   "license": "MIT",
@@ -12,10 +12,10 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@epam/assets": "5.9.2",
-    "@epam/uui": "5.9.2",
-    "@epam/uui-components": "5.9.2",
-    "@epam/uui-core": "5.9.2",
+    "@epam/assets": "5.10.0",
+    "@epam/uui": "5.10.0",
+    "@epam/uui-components": "5.10.0",
+    "@epam/uui-core": "5.10.0",
     "@types/classnames": "2.2.6",
     "classnames": "2.2.6"
   },

templates/uui-cra-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/cra-template-uui",
-  "version": "5.9.2",
+  "version": "5.10.0",
   "keywords": [
     "UUI",
     "react",

test-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/uui-test-utils",
-  "version": "5.9.2",
+  "version": "5.10.0",
   "author": "EPAM",
   "license": "MIT",
   "private": false,
@@ -11,7 +11,7 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@epam/uui-core": "5.9.2",
+    "@epam/uui-core": "5.10.0",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
     "@types/react-test-renderer": "18.0.0",

uui-build/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/uui-build",
-  "version": "5.9.2",
+  "version": "5.10.0",
   "bin": {
     "epam-uui-build": "./bin/cli.js"
   },

uui-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/uui-components",
-  "version": "5.9.2",
+  "version": "5.10.0",
   "description": "EPAM UUI Components",
   "author": "EPAM",
   "license": "MIT",
@@ -13,7 +13,7 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@epam/uui-core": "5.9.2",
+    "@epam/uui-core": "5.10.0",
     "@popperjs/core": "2.9.0",
     "@types/classnames": "2.2.6",
     "@types/react-measure": "2.0.8",

uui-components/src/pickers/KeyboardUtils.tsx

@@ -1,5 +1,4 @@
-import { DataSourceState, DataRowProps, IEditable, IDataSourceView } from '@epam/uui-core';
-import { PickerInputSearchPosition } from './hooks/types';
+import { DataSourceState, DataRowProps, IEditable, IDataSourceView, PickerInputSearchPosition } from '@epam/uui-core';
 
 interface DataSourceKeyboardParams extends IEditable<DataSourceState> {
     listView: IDataSourceView<any, any, any>;

uui-components/src/pickers/PickerBodyBase.tsx

@@ -1,19 +1,15 @@
 import * as React from 'react';
 import isEqual from 'react-fast-compare';
 
-import {
-    DataSourceListProps, DataSourceState, IEditable, IHasRawProps, isMobile,
-} from '@epam/uui-core';
+import { DataSourceListProps, DataSourceState, IEditable, IHasRawProps, isMobile } from '@epam/uui-core';
+import { PickerInputBaseProps } from './hooks/types';
 
-export interface PickerBodyBaseProps extends DataSourceListProps, IEditable<DataSourceState>, IHasRawProps<React.HTMLAttributes<HTMLDivElement>> {
+export interface PickerBodyBaseProps extends DataSourceListProps, IEditable<DataSourceState>, IHasRawProps<React.HTMLAttributes<HTMLDivElement>>, Pick<PickerInputBaseProps<any, any>, 'minCharsToSearch' | 'renderEmpty' | 'renderNotFound' | 'fixedBodyPosition' | 'searchDebounceDelay'> {
     onKeyDown?(e: React.KeyboardEvent<HTMLElement>): void;
-    renderNotFound?: () => React.ReactNode;
     rows: React.ReactNode[];
     scheduleUpdate?: () => void;
     search: IEditable<string>;
     showSearch?: boolean | 'auto';
-    fixedBodyPosition?: boolean;
-    searchDebounceDelay?: number;
 }
 
 export abstract class PickerBodyBase<TProps extends PickerBodyBaseProps> extends React.Component<TProps> {

uui-components/src/pickers/PickerToggler.tsx

@@ -203,7 +203,7 @@ function PickerTogglerComponent<TItem, TId>(props: PickerTogglerProps<TItem, TId
 
     const shouldToggleBody = (e: React.MouseEvent<HTMLDivElement>): boolean => {
         const isInteractionDisabled = (props.isDisabled || props.isReadonly || isEventTargetInsideClickable(e));
-        const shouldOpenWithMinCharsToSearch = (inFocus && props.value && props.minCharsToSearch);
+        const shouldOpenWithMinCharsToSearch = (inFocus && props.value && (props.minCharsToSearch && props.searchPosition === 'input'));
         const isPickerOpenWithSearchInInput = (props.isOpen && props.searchPosition === 'input' && (e.target as HTMLInputElement).tagName === 'INPUT');
         return !(isInteractionDisabled || shouldOpenWithMinCharsToSearch || isPickerOpenWithSearchInInput);
     };
@@ -260,7 +260,9 @@ function PickerTogglerComponent<TItem, TId>(props: PickerTogglerProps<TItem, TId
                             rawProps={ { role: 'button', 'aria-label': 'Clear' } }
                         />
                     )}
-                    {props.isDropdown && !props?.minCharsToSearch && <IconContainer icon={ props.dropdownIcon } flipY={ props.isOpen } cx="uui-icon-dropdown" />}
+                    {props.isDropdown
+                        && (!props?.minCharsToSearch || (props?.minCharsToSearch && props.searchPosition === 'body'))
+                        && <IconContainer icon={ props.dropdownIcon } flipY={ props.isOpen } cx="uui-icon-dropdown" />}
                 </div>
             )}
         </div>