@epam/uui 6.3.3 → 6.4.1-alpha.0

package/index.js

@@ -14,8 +14,8 @@ var updateLocale = require('dayjs/plugin/updateLocale.js');
 var objectSupport = require('dayjs/plugin/objectSupport');
 var customParseFormat = require('dayjs/plugin/customParseFormat.js');
 var isoWeek = require('dayjs/plugin/isoWeek.js');
-var overlayscrollbarsReact = require('overlayscrollbars-react');
 var isEqual = require('react-fast-compare');
+var overlayscrollbarsReact = require('overlayscrollbars-react');
 var FocusLock = require('react-focus-lock');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -190,7 +190,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
   }, props), /*#__PURE__*/React__namespace.createElement("g", {
-    clipPath: "url(#rxjxnmw20s14yc7wc_a)"
+    clipPath: "url(#o66wzyj8d6nz4vuo_a)"
   }, _path$I || (_path$I = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M150.585 1.535C49.483-11.495 27.481 61.805 45.725 97.481c10.581 20.69-39.64 70.792 17.744 81.468 27.538 5.123 36-13.341 62.433-10.655 35.4 3.6 148.167-4.73 88.349-78.915-31.713-39.335 1.026-79.506-63.666-87.844Z",
     fill: "#F5F6FA"
@@ -211,7 +211,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M86.786 22.982c-2.55 0-4.965 2.07-4.965 4.552V120.6c0 2.484 2.4 4.572 4.965 4.572h88.101c2.582 0 4.986-2.089 4.986-4.572V27.534c0-2.464-2.418-4.552-4.986-4.552h-88.1Zm-5.793 4.552c0-3.022 2.874-5.38 5.793-5.38h88.101c2.935 0 5.814 2.374 5.814 5.38V120.6c0 3.021-2.86 5.4-5.814 5.4h-88.1c-2.94 0-5.794-2.381-5.794-5.4V27.534Z",
     fill: "#1D1E26"
   })), /*#__PURE__*/React__namespace.createElement("mask", {
-    id: "rxjxnmhfz1pboirun_b",
+    id: "o66wzycpvnnm3f03f_b",
     style: {
       maskType: "alpha"
     },
@@ -224,7 +224,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M174.887 125.586h-88.1c-2.752 0-5.38-2.234-5.38-4.986V27.534c0-2.752 2.644-4.966 5.38-4.966h88.1c2.752 0 5.4 2.23 5.4 4.966V120.6c0 2.752-2.632 4.986-5.4 4.986Z",
     fill: "#9BDEFF"
   }))), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
-    mask: "url(#rxjxnmhfz1pboirun_b)",
+    mask: "url(#o66wzycpvnnm3f03f_b)",
     fillRule: "evenodd",
     clipRule: "evenodd"
   }, /*#__PURE__*/React__namespace.createElement("path", {
@@ -310,7 +310,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M24.73 96.184a.414.414 0 0 1 .581.06l48.646 59.751a.413.413 0 1 1-.642.523L24.67 96.766a.414.414 0 0 1 .06-.582Z",
     fill: "#fff"
   }))), _defs || (_defs = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
-    id: "rxjxnmw20s14yc7wc_a"
+    id: "o66wzyj8d6nz4vuo_a"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#fff",
     transform: "translate(.552)",
@@ -961,14 +961,14 @@ var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
 };
 var ForwardRef$4 = /*#__PURE__*/React.forwardRef(SvgSearchWithBackground);
 
-var css$1w = {"root":"dpkSNc","uui-spinner":"oxsdAj","uuiSpinner":"oxsdAj"};
+var css$1w = {"root":"-rERxX","uui-spinner":"tmGu8u","uuiSpinner":"tmGu8u"};
 
 function applySpinnerMods() {
     return [css$1w.root, 'uui-spinner'];
 }
 const Spinner = /* @__PURE__ */uuiCore.withMods(uuiComponents.Spinner, applySpinnerMods);
 
-var css$1v = {"root":"uolm7F","loading-word":"McidsQ","loadingWord":"McidsQ","animated-loading":"A1bEkN","animatedLoading":"A1bEkN","skeleton_loading":"_01M-hF","skeletonLoading":"_01M-hF"};
+var css$1v = {"root":"YG5Frk","loading-word":"ddaclv","loadingWord":"ddaclv","animated-loading":"_2sk6Ph","animatedLoading":"_2sk6Ph","skeleton_loading":"eCOoaB","skeletonLoading":"eCOoaB"};
 
 const TextPlaceholder = (props) => {
     const pattern = ' ';
@@ -985,7 +985,7 @@ const TextPlaceholder = (props) => {
         ]), dangerouslySetInnerHTML: { __html: it } })))));
 };
 
-var css$1u = {"root":"iUsxUP","line-height":"BAeEx5","lineHeight":"BAeEx5","font-size":"hItLbk","fontSize":"hItLbk"};
+var css$1u = {"root":"KLWzoq","line-height":"hWyW2v","lineHeight":"hWyW2v","font-size":"qBzQH7","fontSize":"qBzQH7"};
 
 function applyTextMods(mods) {
     return [
@@ -1012,7 +1012,7 @@ const Text = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Text, appl
     };
 });
 
-var css$1t = {"root":"bMbmsL"};
+var css$1t = {"root":"qd0CK-"};
 
 const Blocker = /* @__PURE__ */uuiCore.withMods(uuiComponents.Blocker, () => [css$1t.root], () => ({ renderSpinner: settings.blocker.renderSpinner }));
 
@@ -1517,7 +1517,7 @@ const settings = {
     textInput: textInputSettings,
 };
 
-var css$1s = {"root":"pufwib"};
+var css$1s = {"root":"cg5jG-"};
 
 function applyButtonMods(mods) {
     return [
@@ -1535,7 +1535,7 @@ const Button = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Button,
     };
 });
 
-var css$1r = {"root":"_58RMXB"};
+var css$1r = {"root":"_0wd3Z9"};
 
 function applyIconButtonMods(props) {
     return ['uui-icon_button', `uui-color-${props.color || 'neutral'}`, css$1r.root];
@@ -1572,7 +1572,7 @@ function getIconClass(props) {
     return [classList['has-left-icon'] ? 'uui-has-left-icon' : 'uui-no-left-icon', classList['has-right-icon'] ? 'uui-has-right-icon' : 'uui-no-right-icon'];
 }
 
-var css$1q = {"root":"pAqBVv"};
+var css$1q = {"root":"_8vaJ3-"};
 
 const DEFAULT_COLOR = 'primary';
 const LinkButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
@@ -1602,7 +1602,7 @@ const LinkButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
         props.isDropdown && (React__namespace.createElement(uuiComponents.IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$1p = {"root":"shN7Y7"};
+var css$1p = {"root":"EbDk16"};
 
 const CountIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
     return (React__namespace.default.createElement("div", { ref: ref, className: cx__default.default([
@@ -1614,7 +1614,7 @@ const CountIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
         ]) }, props.caption));
 });
 
-var css$1o = {"root":"cvBqKr","withNotify":"yocW2W"};
+var css$1o = {"root":"IgWcfw","withNotify":"_7XjmaT"};
 
 const TabButton = /* @__PURE__ */React__namespace.default.forwardRef((props, refExternal) => {
     const refLocal = React__namespace.default.useRef(null);
@@ -1661,13 +1661,13 @@ const TabButton = /* @__PURE__ */React__namespace.default.forwardRef((props, ref
         props.onClear && !props.isDisabled && (React__namespace.default.createElement(uuiComponents.IconContainer, { cx: uuiCore.uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
 });
 
-var css$1n = {"root":"u2hjky","noLeftPadding":"HiKm-D","foldingArea":"ZEHu-o","onlyFoldable":"xmOBsH","captionWrapper":"JpCPj9","withNotify":"R-x9pH"};
+var css$1n = {"root":"ii1Tlg","noLeftPadding":"oHyLdV","foldingArea":"xNmyNz","onlyFoldable":"D1eLwm","captionWrapper":"q0CZQq","withNotify":"eO3WxS"};
 
-var css$1m = {"root":"sTz6SX"};
+var css$1m = {"root":"cg-MDT"};
 
 const AvatarStack = /* @__PURE__ */uuiCore.withMods(uuiComponents.AvatarStack, () => [css$1m.root]);
 
-var css$1l = {"root":"UJjX18"};
+var css$1l = {"root":"_9MeVl1"};
 
 const DEFAULT_FILL = 'solid';
 function applyBadgeMods(mods) {
@@ -1695,7 +1695,7 @@ const Badge = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) =>
         props.isDropdown && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$1k = {"root":"TmgNQ2"};
+var css$1k = {"root":"lkDT6R"};
 
 function applyTagMods(props) {
     return [
@@ -1710,44 +1710,58 @@ const Tag = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
     const styles = [applyTagMods(props), props.cx];
     const ClearIcon = props.clearIcon ? props.clearIcon : settings.tag.icons.clearIcon;
     const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : settings.tag.icons.dropdownIcon;
+    const icon = (React__namespace.default.createElement(uuiComponents.ControlIcon, { icon: props.icon, onClick: props.onIconClick, isDisabled: props.isDisabled, rawProps: {
+            'aria-label': 'Icon in input',
+        } }));
     return (React__namespace.default.createElement(uuiComponents.Clickable, { ...props, rawProps: {
             'aria-haspopup': props.isDropdown,
             'aria-expanded': props.isOpen,
             ...props.rawProps,
         }, cx: styles, ref: ref },
-        props.icon && props.iconPosition !== 'right' && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
+        props.iconPosition !== 'right' && icon,
         props.caption && (React__namespace.default.createElement("div", { className: uuiCore.uuiElement.caption }, props.caption)),
         props.count !== undefined && props.count !== null && (React__namespace.default.createElement(CountIndicator, { color: (!props.color || props.color === 'neutral') ? 'white' : props.color, size: settings.tag.sizes.countIndicatorMap[(props.size || settings.tag.sizes.default)], caption: props.count })),
-        props.icon && props.iconPosition === 'right' && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
-        props.isDropdown && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: DropdownIcon, flipY: props.isOpen })),
-        props.onClear && !props.isDisabled && (React__namespace.default.createElement(uuiComponents.IconContainer, { cx: uuiCore.uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
+        props.iconPosition === 'right' && icon,
+        props.isDropdown && (React__namespace.default.createElement(uuiComponents.ControlIcon, { icon: DropdownIcon, flipY: props.isOpen })),
+        props.onClear && !props.isDisabled && (React__namespace.default.createElement(uuiComponents.ControlIcon, { cx: "uui-icon-cancel", icon: ClearIcon, onClick: props.onClear, rawProps: {
+                'aria-label': 'Remove tag',
+            } }))));
 });
 
-var css$1j = {"root":"nzWlrk","page":"QsZuJ8","spacer":"m-5g-m","mode-ghost":"Q5Mw6F","modeGhost":"Q5Mw6F"};
+var css$1j = {"root":"nomWYi","page":"ShrTZL","spacer":"gVZEHt","mode-ghost":"OnqSGD","modeGhost":"OnqSGD"};
 
 function Paginator(props) {
-    const renderPaginator = (params) => (React__namespace.default.createElement("nav", { role: "navigation", className: cx__default.default(css$1j.root, 'uui-paginator', `uui-size-${props.size || settings.paginator.sizes.default}`), ...params.rawProps },
-        React__namespace.default.createElement(Button, { size: props.size || settings.paginator.sizes.default, icon: settings.paginator.icons.leftArrowIcon, onClick: params.goToPrev, isDisabled: params.isFirst || props.isDisabled, fill: "outline", color: "secondary" }),
-        params.pages.map((page, index) => {
-            if (page.type === 'spacer') {
-                return (React__namespace.default.createElement(Button, { cx: cx__default.default(css$1j.spacer, css$1j.page), size: props.size || settings.paginator.sizes.default, key: `${index}_spacer`, caption: "...", fill: "ghost", color: "secondary", tabIndex: -1, isDisabled: props.isDisabled }));
-            }
-            else {
-                return (React__namespace.default.createElement(Button, { cx: cx__default.default(css$1j[`mode-${!page.isActive && 'ghost'}`], css$1j.page), size: props.size || settings.paginator.sizes.default, key: page.pageNumber, caption: page.pageNumber, onClick: () => page.onClick?.(), rawProps: { 'aria-current': page.isActive }, fill: (page.isActive && 'outline') || 'ghost', color: "primary", isDisabled: props.isDisabled }));
-            }
-        }),
-        React__namespace.default.createElement(Button, { size: props.size || settings.paginator.sizes.default, icon: settings.paginator.icons.rightArrowIcon, onClick: params.goToNext, isDisabled: params.isLast || props.isDisabled, fill: "outline", color: "secondary" })));
+    const renderPaginator = (params) => (React__namespace.default.createElement("nav", { role: "navigation", className: cx__default.default('uui-paginator', `uui-size-${props.size || settings.paginator.sizes.default}`), ...params.rawProps },
+        React__namespace.default.createElement("ul", { className: css$1j.root },
+            React__namespace.default.createElement("li", null,
+                React__namespace.default.createElement(Button, { size: props.size || settings.paginator.sizes.default, icon: settings.paginator.icons.leftArrowIcon, onClick: params.goToPrev, isDisabled: params.isFirst || props.isDisabled, fill: "outline", color: "secondary", rawProps: {
+                        'aria-label': 'Previous page',
+                    } })),
+            params.pages.map((page, index) => {
+                if (page.type === 'spacer') {
+                    return (React__namespace.default.createElement("li", { key: `${index}_spacer` },
+                        React__namespace.default.createElement(Button, { cx: cx__default.default(css$1j.spacer, css$1j.page), size: props.size || settings.paginator.sizes.default, caption: "...", fill: "ghost", color: "secondary", tabIndex: -1, isDisabled: props.isDisabled })));
+                }
+                else {
+                    return (React__namespace.default.createElement("li", { key: page.pageNumber },
+                        React__namespace.default.createElement(Button, { cx: cx__default.default(css$1j[`mode-${!page.isActive && 'ghost'}`], css$1j.page), size: props.size || settings.paginator.sizes.default, caption: page.pageNumber, onClick: () => page.onClick?.(), rawProps: { 'aria-current': page.isActive }, fill: (page.isActive && 'outline') || 'ghost', color: "primary", isDisabled: props.isDisabled })));
+                }
+            }),
+            React__namespace.default.createElement("li", null,
+                React__namespace.default.createElement(Button, { size: props.size || settings.paginator.sizes.default, icon: settings.paginator.icons.rightArrowIcon, onClick: params.goToNext, isDisabled: params.isLast || props.isDisabled, fill: "outline", color: "secondary", rawProps: {
+                        'aria-label': 'Next page',
+                    } })))));
     return React__namespace.default.createElement(uuiComponents.Paginator, { ...props, render: renderPaginator });
 }
 
-var css$1i = {"root":"mbv-7G","progress-bar":"sLZ-sP","progressBar":"sLZ-sP","progressBar-indeterminate":"ZM2d6q","progressBarIndeterminate":"ZM2d6q","size-12":"mQV2DG","size12":"mQV2DG","size-18":"ch2kb0","size18":"ch2kb0","size-24":"QXgmWs","size24":"QXgmWs"};
+var css$1i = {"root":"sWkrVL","progress-bar":"_7begqO","progressBar":"_7begqO","progressBar-indeterminate":"y0smf9","progressBarIndeterminate":"y0smf9","size-12":"SXuyip","size12":"SXuyip","size-18":"_52yxTD","size18":"_52yxTD","size-24":"SUNEIR","size24":"SUNEIR"};
 
 const IndeterminateBar = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     return (React__namespace.createElement("div", { ref: ref, className: cx__default.default('uui-indeterminate_bar', props.cx, css$1i.root, css$1i[`size-${props.size || 12}`]) },
         React__namespace.createElement("div", { className: cx__default.default(css$1i.progressBar) })));
 });
 
-var css$1h = {"root":"x9sUUM","striped":"OXI-tg","animate-stripes":"Q95Po2","animateStripes":"Q95Po2","size-12":"TSer3i","size12":"TSer3i","size-18":"u4ly7L","size18":"u4ly7L","size-24":"jaWae1","size24":"jaWae1"};
+var css$1h = {"root":"T85CMI","striped":"f6nSVy","animate-stripes":"lBOPBW","animateStripes":"lBOPBW","size-12":"cFINQZ","size12":"cFINQZ","size-18":"I2EBy2","size18":"I2EBy2","size-24":"iTXtyz","size24":"iTXtyz"};
 
 const DEFAULT_SIZE = '12';
 function applyProgressBarMods(mods) {
@@ -1762,14 +1776,14 @@ const ProgressBar = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Pro
     hideLabel: props.hideLabel || props.striped,
 }));
 
-var css$1g = {"root":"dm2lWh"};
+var css$1g = {"root":"P-Cmqu"};
 
 const IndicatorBar = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const { progress } = props;
     return progress || progress === 0 ? (React__namespace.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx__default.default(css$1g.root, props.cx), hideLabel: true })) : (React__namespace.createElement(IndeterminateBar, { ref: ref, cx: cx__default.default(css$1g.root, props.cx) }));
 });
 
-var css$1f = {"root":"Wevfyh"};
+var css$1f = {"root":"_1Mr0VY"};
 
 const StatusIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
     return (React__namespace.default.createElement("div", { ref: ref, className: cx__default.default([
@@ -1784,7 +1798,7 @@ const StatusIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
         React__namespace.default.createElement("p", { className: "uui-status_indicator-caption" }, props.caption)));
 });
 
-var css$1e = {"root":"tUtPao"};
+var css$1e = {"root":"Gd6Owo"};
 
 function applyCheckboxMods(mods) {
     return [
@@ -1802,7 +1816,7 @@ const applyUUICheckboxProps = (props) => {
 };
 const Checkbox = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Checkbox, applyCheckboxMods, applyUUICheckboxProps);
 
-var css$1d = {"root":"_9T3ecW"};
+var css$1d = {"root":"FmOU1l"};
 
 function applyRadioInputMods(mods) {
     return [
@@ -1814,7 +1828,7 @@ function applyRadioInputMods(mods) {
 }
 const RadioInput = /* @__PURE__ */uuiCore.withMods(uuiComponents.RadioInput, applyRadioInputMods, (props) => ({ icon: props.icon ? props.icon : settings.radioInput.icons.dotIcon }));
 
-var css$1c = {"root":"LHUfJy"};
+var css$1c = {"root":"aiLFwk"};
 
 function applySwitchMods(mods) {
     return [
@@ -1838,7 +1852,7 @@ var EditMode;
     EditMode["INLINE"] = "inline";
 })(EditMode || (EditMode = {}));
 
-var textInputCss = {"root":"nV0lWp"};
+var textInputCss = {"root":"N4GMpV"};
 
 const DEFAULT_MODE$3 = EditMode.FORM;
 function applyTextInputMods(mods) {
@@ -1863,7 +1877,7 @@ const SearchInput = /* @__PURE__ */React__namespace.default.forwardRef((props, r
         } }));
 });
 
-var css$1b = {"root":"Dv1-mz"};
+var css$1b = {"root":"ZHQCH6"};
 
 const ControlGroup = /* @__PURE__ */uuiCore.withMods(uuiComponents.ControlGroup, () => [css$1b.root, 'uui-control-group']);
 
@@ -1879,7 +1893,7 @@ function MultiSwitchComponent(props, ref) {
 }
 const MultiSwitch = /* @__PURE__ */React__namespace.forwardRef(MultiSwitchComponent);
 
-var css$1a = {"root":"cbmBVi"};
+var css$1a = {"root":"nUEgSZ"};
 
 const DEFAULT_MODE$2 = EditMode.FORM;
 function applyNumericInputMods(mods) {
@@ -1899,7 +1913,7 @@ const NumericInput = /* @__PURE__ */uuiCore.withMods(uuiComponents.NumericInput,
     };
 });
 
-var css$19 = {"root":"gVpB8t"};
+var css$19 = {"root":"GNWzGP"};
 
 const DEFAULT_MODE$1 = EditMode.FORM;
 function applyTextAreaMods(mods) {
@@ -1940,7 +1954,7 @@ function TREE_SHAKEABLE_INIT$1() {
     };
 }
 
-var css$18 = {"root":"_0CgujI"};
+var css$18 = {"root":"_2ALu1f"};
 
 function applyDropdownContainerMods(mods) {
     return [
@@ -1951,7 +1965,7 @@ function applyDropdownContainerMods(mods) {
 }
 const DropdownContainer = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.DropdownContainer, applyDropdownContainerMods);
 
-var css$17 = {"root":"SZ7nWY","timepicker-input":"TxL-jx","timepickerInput":"TxL-jx","ltr-always":"UHPtDZ","ltrAlways":"UHPtDZ"};
+var css$17 = {"root":"ZrsqsF","timepicker-input":"jKz84-","timepickerInput":"jKz84-","ltr-always":"iSqVov","ltrAlways":"iSqVov"};
 
 const uuiTimePicker = {
     container: 'uui-timepicker-container',
@@ -2057,7 +2071,7 @@ const formatTime = (hours, minutes, meridian, format) => {
 
 const DEFAULT_MODE = EditMode.FORM;
 const valueToTimeString = (value, format) => {
-    if (value === null)
+    if (value === null || (value?.hours === null && value?.minutes === null))
         return null;
     return uuiDayjs.dayjs()
         .set(value)
@@ -2069,6 +2083,7 @@ function TimePickerComponent(props, ref) {
         value: valueToTimeString(props.value, props.format),
         inputValue: valueToTimeString(props.value, props.format),
     });
+    const targetRef = React__namespace.default.useRef(null);
     React.useEffect(() => {
         if (valueToTimeString(props.value, props.format) !== state.value) {
             const stringValue = valueToTimeString(props.value, props.format);
@@ -2090,13 +2105,17 @@ function TimePickerComponent(props, ref) {
     };
     const onClear = () => {
         props.onValueChange(null);
+        setState((prevState) => ({ ...prevState, value: null, inputValue: null }));
     };
     const onToggle = (value) => {
         setState((prevState) => ({ ...prevState, isOpen: value }));
     };
     const saveTime = (newTime) => {
         setState((prevState) => ({ ...prevState, inputValue: newTime }));
-        props.onValueChange(formatStringTimeToObject(newTime));
+        const newValue = formatStringTimeToObject(newTime);
+        if (!isEqual__default.default(props.value, newValue)) {
+            props.onValueChange(formatStringTimeToObject(newTime));
+        }
     };
     const getTimeFromInputValue = (newValue) => {
         const trimmedNewValue = newValue.trimStart();
@@ -2110,7 +2129,6 @@ function TimePickerComponent(props, ref) {
         saveTime(inputValue);
     };
     const handleFocus = (e) => {
-        onToggle(true);
         props.onFocus?.(e);
     };
     const handleInputChange = (newValue) => {
@@ -2123,29 +2141,46 @@ function TimePickerComponent(props, ref) {
         }
     };
     const handleBlur = (e) => {
-        if (uuiCore.isFocusReceiverInsideFocusLock(e))
-            return;
-        onToggle(false);
         props.onBlur?.(e);
         if (state.value === '' || state.inputValue === '') {
             props.onValueChange(null);
             setState((prevState) => ({ ...prevState, value: null, inputValue: null }));
         }
-        state.value && state.inputValue && saveTime(state.value);
+        else {
+            saveTime(state.value);
+        }
+    };
+    const onKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            onToggle(true);
+        }
+        if (e.key === 'Escape' && state.isOpen) {
+            e.preventDefault();
+            e.stopPropagation();
+            onToggle(false);
+        }
     };
     const renderInput = (inputProps) => {
-        return (React__namespace.default.createElement(TextInput, { ...inputProps, onClick: null, size: props.size, isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, cx: [css$17.root, css$17.timepickerInput, props.inputCx], value: state.inputValue, onValueChange: handleInputChange, onCancel: !props.disableClear && onClear, onFocus: handleFocus, onBlur: handleBlur, isDropdown: false, placeholder: props.placeholder ? props.placeholder : getFormat(), mode: props.mode || DEFAULT_MODE, rawProps: props.rawProps?.input }));
+        return (React__namespace.default.createElement(TextInput, { ...inputProps, size: props.size, isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, cx: [css$17.root, css$17.timepickerInput, props.inputCx], value: state.inputValue, onValueChange: handleInputChange, onCancel: !props.disableClear && onClear, onKeyDown: onKeyDown, onFocus: handleFocus, onBlur: handleBlur, isDropdown: false, placeholder: props.placeholder ? props.placeholder : getFormat(), mode: props.mode || DEFAULT_MODE, rawProps: props.rawProps?.input, ref: (node) => {
+                targetRef.current = node;
+                if (typeof inputProps.ref === 'function') {
+                    inputProps.ref(node);
+                }
+                else if (inputProps.ref && 'current' in inputProps.ref) {
+                    inputProps.ref.current = node;
+                }
+            } }));
     };
     const renderBody = (bodyProps) => {
         const { forwardedRef, onValueChange, ...timePickerBodyProps } = props;
-        return (!props.isDisabled && !props.isReadonly && (React__namespace.default.createElement(DropdownContainer, { ...bodyProps, focusLock: false },
+        return (!props.isDisabled && !props.isReadonly && (React__namespace.default.createElement(DropdownContainer, { ...bodyProps, shards: [targetRef] },
             React__namespace.default.createElement(TimePickerBody, { ...timePickerBodyProps, onValueChange: handleBodyValueChange, value: formatStringTimeToObject(state.value), rawProps: props.rawProps?.body, cx: props.bodyCx }))));
     };
     return (React__namespace.default.createElement(uuiComponents.Dropdown, { renderTarget: (targetProps) => (props.renderTarget ? props.renderTarget(targetProps) : renderInput(targetProps)), renderBody: (bodyProps) => !props.isDisabled && !props.isReadonly && renderBody(bodyProps), onValueChange: !props.isDisabled && !props.isReadonly ? onToggle : null, value: state.isOpen, middleware: [react.offset(6)], ref: ref }));
 }
 const TimePicker = /* @__PURE__ */React__namespace.default.forwardRef(TimePickerComponent);
 
-var css$16 = {"root":"RgwtBr"};
+var css$16 = {"root":"GA6XVL"};
 
 function applyInputAddonMods() {
     return [
@@ -2154,14 +2189,14 @@ function applyInputAddonMods() {
 }
 const InputAddon = /* @__PURE__ */uuiCore.withMods(uuiComponents.InputAddon, applyInputAddonMods);
 
-var css$15 = {"root":"DTDFey"};
+var css$15 = {"root":"YI2DoO"};
 
 function applySliderMods() {
     return [css$15.root, 'uui-color-neutral'];
 }
 const Slider = /* @__PURE__ */uuiCore.withMods(uuiComponents.Slider, applySliderMods);
 
-var css$14 = {"root":"AyT26F"};
+var css$14 = {"root":"c2Fz5n"};
 
 function applyTooltipMods(mods) {
     return [
@@ -2171,7 +2206,7 @@ function applyTooltipMods(mods) {
 }
 const Tooltip = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Tooltip, applyTooltipMods);
 
-var css$13 = {"root":"_1-LKLW","tooltip":"_6n8Rzt"};
+var css$13 = {"root":"_4tN6Vo","tooltip":"_--ktVA"};
 
 function applyRatingMods(mods) {
     return [
@@ -2185,7 +2220,7 @@ const Rating = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Rating,
     Tooltip,
 }));
 
-var css$12 = {"drag-handle-wrapper":"_5lu9Dy","dragHandleWrapper":"_5lu9Dy","with-indent":"NX4NdU","withIndent":"NX4NdU","drag-handle":"yyMf9e","dragHandle":"yyMf9e","icon-container":"QDWCMB","iconContainer":"QDWCMB"};
+var css$12 = {"drag-handle-wrapper":"YRz7Mc","dragHandleWrapper":"YRz7Mc","with-indent":"xWMYR8","withIndent":"xWMYR8","drag-handle":"ef-8MF","dragHandle":"ef-8MF","icon-container":"_4hI4b7","iconContainer":"_4hI4b7"};
 
 function DataRowAddons(props) {
     const row = props.rowProps;
@@ -2202,15 +2237,20 @@ function DataRowAddons(props) {
         return (React__namespace.default.createElement("div", { key: "dh", className: cx__default.default(css$12.dragHandleWrapper, row.indent > 0 && css$12.withIndent), style: { width: row.indent > 0 ? (getIndent() + getWidth()) : 0 }, ...props.eventHandlers },
             React__namespace.default.createElement(uuiComponents.DragHandle, { cx: css$12.dragHandle })));
     };
+    const handleFold = (e) => {
+        if (e.key === 'Enter') {
+            row.onFold(row);
+        }
+    };
     return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
         row.dnd?.srcData && renderDragHandle(),
-        row?.checkbox?.isVisible && (React__namespace.default.createElement(Checkbox, { key: "cb", cx: "uui-dr_addons-checkbox", tabIndex: props.tabIndex, size: settings.dataTable.sizes.body.checkboxMap[props.size], value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: () => row.onCheck?.(row), isDisabled: row.checkbox.isDisabled, isInvalid: row.checkbox.isInvalid })),
-        row.indent > 0 && (React__namespace.default.createElement("div", { key: "fold", className: cx__default.default('uui-dr_addons-indent', `uui-size-${props.size || settings.dataTable.sizes.body.row}`), style: { marginInlineStart: getIndent(), width: getWidth() } }, row.isFoldable && (React__namespace.default.createElement(uuiComponents.IconContainer, { rawProps: {
+        row?.checkbox?.isVisible && (React__namespace.default.createElement(Checkbox, { key: "cb", cx: "uui-dr_addons-checkbox", tabIndex: props.tabIndex, size: settings.dataTable.sizes.body.checkboxMap[props.size], value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: () => row.onCheck?.(row), isDisabled: row.checkbox.isDisabled, isInvalid: row.checkbox.isInvalid, rawProps: { 'aria-label': 'Select' } })),
+        row.indent > 0 && (React__namespace.default.createElement("div", { key: "fold", className: cx__default.default('uui-dr_addons-indent', `uui-size-${props.size || settings.dataTable.sizes.body.row}`), style: { marginInlineStart: getIndent(), width: getWidth() } }, row.isFoldable && (React__namespace.default.createElement(uuiComponents.ControlIcon, { rawProps: {
                 'aria-label': row.isFolded ? 'Unfold' : 'Fold',
                 role: 'button',
             }, key: "icon", icon: settings.dataTable.icons.body.foldingIcon, cx: [
                 uuiCore.uuiElement.foldingArrow, uuiCore.uuiMarkers.clickable, css$12.iconContainer,
-            ], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row), size: settings.dataTable.sizes.body.iconMap[props.size || settings.dataTable.sizes.body.row] }))))));
+            ], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row), onKeyDown: handleFold, size: settings.dataTable.sizes.body.iconMap[props.size || settings.dataTable.sizes.body.row], tabIndex: props.tabIndex }))))));
 }
 
 function VerticalTabButtonComponent(props, ref) {
@@ -2262,7 +2302,7 @@ function VerticalTabButtonComponent(props, ref) {
 }
 const VerticalTabButton = /* @__PURE__ */React__namespace.default.forwardRef(VerticalTabButtonComponent);
 
-var css$11 = {"root":"gnFr4J","main-path":"svNf3N","mainPath":"svNf3N","content-wrapper":"J-ipHv","contentWrapper":"J-ipHv","content":"_5xanMQ","action-wrapper":"UtYDA3","actionWrapper":"UtYDA3","icon-wrapper":"MhpdaO","iconWrapper":"MhpdaO","icon":"_9Vn7Pz","close-icon":"CP2E8F","closeIcon":"CP2E8F"};
+var css$11 = {"root":"-AZD5l","main-path":"A8D5IL","mainPath":"A8D5IL","content-wrapper":"ESdizU","contentWrapper":"ESdizU","content":"gVGFnr","action-wrapper":"_3CNi09","actionWrapper":"_3CNi09","icon-wrapper":"AEgpSZ","iconWrapper":"AEgpSZ","icon":"jcBJDE","close-icon":"nrX1Kd","closeIcon":"nrX1Kd"};
 
 const Alert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("div", { role: "alert", ref: ref, className: cx__default.default('uui-alert', css$11.root, props.color && `uui-color-${props.color}`, props.cx, `uui-size-${props.size || settings.alert.sizes.default}`), ...props.rawProps },
     React__namespace.createElement("div", { className: css$11.mainPath },
@@ -2280,7 +2320,7 @@ const ErrorAlert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => Re
 
 const Dropdown = /* @__PURE__ */uuiCore.withMods(uuiComponents.Dropdown);
 
-var css$10 = {"submenu-root-item-rtl":"nnMnfl","submenuRootItemRtl":"nnMnfl","icon-after":"_0S0N4H","iconAfter":"_0S0N4H","submenu-root-item":"yIStM6","submenuRootItem":"yIStM6","icon-check":"iCT86R","iconCheck":"iCT86R","splitter-root":"VGEv2Z","splitterRoot":"VGEv2Z","splitter":"DBadzz","header-root":"qO1z0u","headerRoot":"qO1z0u","item-root":"Ev9E5N","itemRoot":"Ev9E5N","icon":"ZIuvRA","link":"gLnRBG","indent":"wSfXnL","selected-mark":"N8fR8R","selectedMark":"N8fR8R"};
+var css$10 = {"submenu-root-item-rtl":"He9nlj","submenuRootItemRtl":"He9nlj","icon-after":"DJA1nf","iconAfter":"DJA1nf","submenu-root-item":"FPXAdU","submenuRootItem":"FPXAdU","icon-check":"_6VyYYI","iconCheck":"_6VyYYI","splitter-root":"p6a8ks","splitterRoot":"p6a8ks","splitter":"OBncR1","header-root":"Q6WxhY","headerRoot":"Q6WxhY","item-root":"mKx6TD","itemRoot":"mKx6TD","icon":"v-dNnw","link":"Fa0FSB","indent":"hpjhIv","selected-mark":"IiWN5i","selectedMark":"IiWN5i"};
 
 exports.IDropdownControlKeys = void 0;
 (function (IDropdownControlKeys) {
@@ -2414,7 +2454,7 @@ function DropdownMenuSwitchButton(props) {
         React__namespace.default.createElement(Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange })));
 }
 
-var css$$ = {"root":"_6FHJqJ","mode-block":"iuufnM","modeBlock":"iuufnM","mode-inline":"St3Pt4","modeInline":"St3Pt4","padding-0":"D0GNDi","padding0":"D0GNDi","padding-6":"Y-8Pta","padding6":"Y-8Pta","padding-12":"_4GJsxO","padding12":"_4GJsxO","padding-18":"wD3g1U","padding18":"wD3g1U"};
+var css$$ = {"root":"Vuhp5T","mode-block":"_4Ytq4q","modeBlock":"_4Ytq4q","mode-inline":"Uu-kpz","modeInline":"Uu-kpz","padding-0":"iIhgAX","padding0":"iIhgAX","padding-6":"dMYTXo","padding6":"dMYTXo","padding-12":"fU6vv2","padding12":"fU6vv2","padding-18":"D1X6y5","padding18":"D1X6y5"};
 
 function applyAccordionMods(mods) {
     return [
@@ -2427,7 +2467,7 @@ const Accordion = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Accor
     dropdownIcon: mods.dropdownIcon !== null && settings.accordion.icons.dropdownIcon,
 }));
 
-var css$_ = {"root":"Nt3Vmd","align-items":"MHofXy","alignItems":"MHofXy","justify-content":"gEFWNK","justifyContent":"gEFWNK","border-top":"MtkWse","borderTop":"MtkWse","border-bottom":"NrnXXI","borderBottom":"NrnXXI","top-shadow":"NkGhGT","topShadow":"NkGhGT","padding":"DGrJ3D","margin":"_56-OZD","vPadding":"_4qpiO2","column-gap":"WIfh-k","columnGap":"WIfh-k","row-gap":"ByLp8m","rowGap":"ByLp8m","spacing":"Sdm7PW"};
+var css$_ = {"root":"_78kox8","align-items":"pALOKl","alignItems":"pALOKl","justify-content":"n9-HO1","justifyContent":"n9-HO1","border-top":"SyQ1-Z","borderTop":"SyQ1-Z","border-bottom":"uJ3zVB","borderBottom":"uJ3zVB","top-shadow":"AAkCe0","topShadow":"AAkCe0","padding":"_4Qg8r-","margin":"fZ-Uzs","vPadding":"c11Fz4","column-gap":"muZmDq","columnGap":"muZmDq","row-gap":"YafDEI","rowGap":"YafDEI","spacing":"g4aQ7w"};
 
 const FlexCell = /* @__PURE__ */uuiCore.withMods(uuiComponents.FlexCell, () => [css$_.flexCell]);
 
@@ -2479,7 +2519,7 @@ const FlexRow = /* @__PURE__ */React.forwardRef((props, ref) => {
         } }, props.children));
 });
 
-var css$Z = {"root":"bndaRP","margin-24":"p-NFd7","margin24":"p-NFd7","padding-12":"fefPkE","padding12":"fefPkE","padding-24":"-EdIVy","padding24":"-EdIVy","shadow":"IEGC8G","uui-surface-main":"OBk6Ve","uuiSurfaceMain":"OBk6Ve"};
+var css$Z = {"root":"h8UxYN","margin-24":"HqhPjY","margin24":"HqhPjY","padding-12":"_7OQUtz","padding12":"_7OQUtz","padding-24":"wxeTgM","padding24":"wxeTgM","shadow":"_5tdAQ4","uui-surface-main":"lSNKuA","uuiSurfaceMain":"lSNKuA"};
 
 const Panel = /* @__PURE__ */uuiCore.withMods(uuiComponents.VPanel, (props) => [
     'uui-panel',
@@ -2489,7 +2529,7 @@ const Panel = /* @__PURE__ */uuiCore.withMods(uuiComponents.VPanel, (props) => [
     props.background && css$Z[`uui-${props.background}`],
 ]);
 
-var css$Y = {"root":"JRvS-I"};
+var css$Y = {"root":"k3oM9K"};
 
 function applyLabeledInputMods(mods) {
     return [
@@ -2498,15 +2538,20 @@ function applyLabeledInputMods(mods) {
         'uui-size-' + (mods.size || settings.labeledInput.sizes.default),
     ];
 }
+function getInfoIconForSize(size) {
+    return size <= '30'
+        ? settings.labeledInput.icons.fillInfoIcon
+        : settings.labeledInput.icons.infoIcon;
+}
 function applyLabeledInputProps(props) {
-    return ({
+    return {
         Tooltip: props.Tooltip || Tooltip,
-        infoIcon: props.infoIcon || props.size <= '30' ? settings.labeledInput.icons.fillInfoIcon : settings.labeledInput.icons.infoIcon,
-    });
+        infoIcon: props.infoIcon || getInfoIconForSize(props.size),
+    };
 }
 const LabeledInput = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.LabeledInput, applyLabeledInputMods, applyLabeledInputProps);
 
-var css$X = {"root":"PVUym3"};
+var css$X = {"root":"b4tIuJ"};
 
 function RadioGroup(props) {
     const direction = props.direction || 'vertical';
@@ -2521,7 +2566,7 @@ function RadioGroup(props) {
     })));
 }
 
-var css$W = {"root":"nHJ-hZ","viewport":"wxehuT"};
+var css$W = {"root":"P-ohAs","viewport":"_8g-keC"};
 
 var uuiScrollbars;
 (function (uuiScrollbars) {
@@ -2531,16 +2576,25 @@ var uuiScrollbars;
     uuiScrollbars["uuiLineBottom"] = "uui-line-bottom";
 })(uuiScrollbars || (uuiScrollbars = {}));
 const ScrollBars = /* @__PURE__ */React.forwardRef((props, ref) => {
-    const { cx: outerCx, children, overflowTopEffect = 'none', overflowBottomEffect = 'none', onScroll, autoHide = 'never', autoHideDelay, rawProps, ...rest } = props;
+    const { cx: outerCx, children, overflowTopEffect = 'none', overflowBottomEffect = 'none', onScroll, autoHide = 'never', autoHideDelay, elementEvents, rawProps, ...rest } = props;
     const [shadowElements, setShadowElements] = React.useState({
         host: null,
         viewport: null,
     });
     const hostRef = React.useRef(null);
     const viewportRef = React.useRef(null);
-    const containerRef = React.useRef(null);
+    const elementEventsEffective = React.useMemo(() => {
+        const result = [['img', 'load']]; // this is default
+        if (elementEvents && elementEvents.length > 0) {
+            result.push(...elementEvents);
+        }
+        return result;
+    }, [elementEvents]);
     const [initialize, osInstance] = overlayscrollbarsReact.useOverlayScrollbars({
         options: {
+            update: {
+                elementEvents: elementEventsEffective,
+            },
             scrollbars: {
                 theme: 'uui-scroll-bars',
                 autoHide: autoHide,
@@ -2582,7 +2636,7 @@ const ScrollBars = /* @__PURE__ */React.forwardRef((props, ref) => {
     uuiCore.useScrollShadows(shadowElements.host, shadowElements.viewport);
     React.useImperativeHandle(ref, () => {
         return {
-            container: containerRef.current,
+            container: hostRef.current,
             view: viewportRef.current,
         };
     }, []);
@@ -2591,7 +2645,7 @@ const ScrollBars = /* @__PURE__ */React.forwardRef((props, ref) => {
 });
 ScrollBars.displayName = 'ScrollBars';
 
-var css$V = {"scroll-container":"_23kSzp","scrollContainer":"_23kSzp","list-container":"PJiIxz","listContainer":"PJiIxz"};
+var css$V = {"scroll-container":"_2krmNf","scrollContainer":"_2krmNf","list-container":"_7zmV6q","listContainer":"_7zmV6q"};
 
 const VirtualList = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
     const { listContainerRef, offsetY, handleScroll, estimatedHeight, scrollContainerRef, } = uuiCore.useVirtualList({
@@ -2644,7 +2698,7 @@ function Tree(props) {
     return (React__namespace.createElement(VirtualList, { value: value, onValueChange: onValueChange, rowsCount: rowsCount, rows: renderedRows, cx: uuiCore.cx(propsCx), role: "tree" }));
 }
 
-var css$U = {"root":"pdgEzz"};
+var css$U = {"root":"flGm0-"};
 
 function CheckboxGroup(props) {
     const currentValue = props.value || [];
@@ -2746,7 +2800,7 @@ const Tabs = /* @__PURE__ */React.forwardRef((props, ref) => {
 });
 Tabs.displayName = 'Tabs';
 
-var css$T = {"root":"B-MREe","modal-blocker":"_71ZdkV","modalBlocker":"_71ZdkV","animateModalBlocker":"TJUR9d","modal":"_05ZVN-","modal-footer":"D2nU0P","modalFooter":"D2nU0P","border-top":"gVONDg","borderTop":"gVONDg","modal-header":"v1unTV","modalHeader":"v1unTV","border-bottom":"ze7Uv-","borderBottom":"ze7Uv-"};
+var css$T = {"root":"HLI76q","modal-blocker":"aXkr3-","modalBlocker":"aXkr3-","animateModalBlocker":"_74aywb","modal":"IaquOA","modal-footer":"ZQA-WC","modalFooter":"ZQA-WC","border-top":"Lx0X-r","borderTop":"Lx0X-r","modal-header":"mb3C-Z","modalHeader":"mb3C-Z","border-bottom":"SMNrOE","borderBottom":"SMNrOE"};
 
 const ModalBlocker = /* @__PURE__ */uuiCore.withMods(uuiComponents.ModalBlocker, () => [css$T.modalBlocker]);
 const ModalWindow = /* @__PURE__ */uuiCore.withMods(uuiComponents.ModalWindow, () => [css$T.root, css$T.modal], (props) => {
@@ -2938,7 +2992,7 @@ const TREE_SHAKEABLE_INIT = () => ({
 });
 const i18n = /* @__PURE__ */TREE_SHAKEABLE_INIT();
 
-var css$S = {"root":"l8yk-s","icon-wrapper":"Mkwo0P","iconWrapper":"Mkwo0P","action-wrapper":"hVM9VD","actionWrapper":"hVM9VD","close-icon":"_9Hb8ZR","closeIcon":"_9Hb8ZR","main-path":"keDJfE","mainPath":"keDJfE","content":"X5hz2X","close-wrapper":"_7o71vO","closeWrapper":"_7o71vO","clear-notifications":"dZD3-7","clearNotifications":"dZD3-7"};
+var css$S = {"root":"eR6KR3","icon-wrapper":"E2PBfc","iconWrapper":"E2PBfc","action-wrapper":"l7gGg0","actionWrapper":"l7gGg0","close-icon":"Q6rXwG","closeIcon":"Q6rXwG","main-path":"W4YKXs","mainPath":"W4YKXs","content":"RmEqRm","close-wrapper":"MJTTeU","closeWrapper":"MJTTeU","clear-notifications":"_9CdTPS","clearNotifications":"_9CdTPS"};
 
 const NotificationCard = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
     const notificationCardNode = React__namespace.default.useRef(null);
@@ -2971,7 +3025,7 @@ function ClearNotification() {
         React__namespace.default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => uuiCtx.uuiNotifications.clearAll() })));
 }
 
-var css$R = {"footer":"_1-0oP9"};
+var css$R = {"footer":"a-fq0e"};
 
 class ConfirmationModal extends React__namespace.Component {
     render() {
@@ -3013,7 +3067,7 @@ function useReliableForceUpdate() {
     return red[1];
 }
 
-var css$Q = {"root":"IAiwak","container":"_2E8lx6"};
+var css$Q = {"root":"HKKizN","container":"e8PE-q"};
 
 const defaultFormat = 'MMM D, YYYY';
 const valueFormat = 'YYYY-MM-DD';
@@ -3032,7 +3086,16 @@ const defaultRangeValue = {
     from: null,
     to: null,
 };
-const getDisplayedMonth = (selectedDate, focus) => {
+const getDisplayedMonth = (selectedDate, focus, initialViewMonth) => {
+    if (selectedDate.from || selectedDate.to) {
+        return getDisplayedMonthBySelection(selectedDate, focus);
+    }
+    else if (initialViewMonth) {
+        return getNewMonth(`${initialViewMonth}-01`);
+    }
+    return uuiDayjs.dayjs();
+};
+const getDisplayedMonthBySelection = (selectedDate, focus) => {
     if (selectedDate.from && selectedDate.to && focus) {
         return uuiDayjs.dayjs(selectedDate[focus]);
     }
@@ -3231,26 +3294,27 @@ function DatePickerHeader({ navIconLeft, navIconRight, value: { month, view }, o
             React__namespace.createElement(Button, { icon: navIconRight || settings.datePicker.icons.body.nextIcon, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: !isDisabled && (() => onRightNavigationArrow()), isDisabled: disableNext }))));
 }
 
-var css$P = {"root":"jnWZre"};
+var css$P = {"root":"W9e-sc"};
 
 function applyDateSelectionMods() {
     return [css$P.root, `uui-size-${settings.datePicker.sizes.body}`];
 }
 const Calendar = /* @__PURE__ */uuiCore.withMods(uuiComponents.Calendar, applyDateSelectionMods);
 
-var css$O = {"root":"LHAvX6"};
+var css$O = {"root":"o5uHOc"};
 
 const uuiDatePickerBody = {
     wrapper: 'uui-datepicker-body-wrapper',
 };
 const DatePickerBody = /* @__PURE__ */React.forwardRef(DatePickerBodyComp);
 function DatePickerBodyComp(props, ref) {
-    const { value, onValueChange } = props;
-    const [month, setMonth] = React.useState(getNewMonth(value));
+    const { value, onValueChange, initialViewMonth } = props;
+    const initialViewDate = value || (initialViewMonth ? `${initialViewMonth}-01` : '');
+    const [month, setMonth] = React.useState(getNewMonth(initialViewDate));
     const [view, setView] = React.useState('DAY_SELECTION');
     // sync updated props with internal state
     React.useEffect(() => {
-        setMonth(getNewMonth(value));
+        setMonth(getNewMonth(initialViewDate));
         setView('DAY_SELECTION');
     }, [value, setMonth]);
     return (React__namespace.default.createElement(StatelessDatePickerBody, { ref: ref, ...props, month: month, view: view, onValueChange: onValueChange, onMonthChange: (m) => setMonth(m), onViewChange: (v) => setView(v) }));
@@ -3348,7 +3412,7 @@ function DatePickerComponent(props, ref) {
     };
     const renderBody = React.useMemo(() => (renderProps) => {
         return (React__namespace.default.createElement(DropdownContainer, { ...renderProps },
-            React__namespace.default.createElement(DatePickerBody, { value: value, onValueChange: onBodyValueChange, cx: uuiCore.cx(props.bodyCx), filter: props.filter, isHoliday: props.isHoliday, renderDay: props.renderDay, rawProps: props.rawProps?.body }),
+            React__namespace.default.createElement(DatePickerBody, { value: value, onValueChange: onBodyValueChange, cx: uuiCore.cx(props.bodyCx), filter: props.filter, isHoliday: props.isHoliday, renderDay: props.renderDay, rawProps: props.rawProps?.body, initialViewMonth: props.initialViewMonth }),
             props.renderFooter?.()));
     }, [value, onBodyValueChange]);
     return (React__namespace.default.createElement(uuiComponents.Dropdown, { value: isBodyOpen, middleware: [react.offset(6)], placement: props.placement, ref: ref, onValueChange: (v) => {
@@ -3359,7 +3423,7 @@ function DatePickerComponent(props, ref) {
 }
 const DatePicker = /* @__PURE__ */React__namespace.default.forwardRef(DatePickerComponent);
 
-var css$N = {"date-input":"O-HUK8","dateInput":"O-HUK8","root":"l745ew","separator":"_7XHHq5"};
+var css$N = {"date-input":"_5O2Vyh","dateInput":"_5O2Vyh","root":"SW9V00","separator":"qWAE5e"};
 
 const RangeDatePickerInput = /* @__PURE__ */React.forwardRef(({ isDisabled, isInvalid, isReadonly, size, disableClear, rawProps, value, inFocus, format, onValueChange, onFocusInput, onBlurInput, onClick, getPlaceholder, filter, onKeyDown, preventEmptyFromDate, preventEmptyToDate, id, cx: classes, }, ref) => {
     const [inputValue, setInputValue] = React.useState(toCustomDateRangeFormat(value, format));
@@ -3421,16 +3485,18 @@ const RangeDatePickerInput = /* @__PURE__ */React.forwardRef(({ isDisabled, isIn
         };
         onValueChange(newValue);
     };
-    const clearAllowed = !disableClear && !(preventEmptyFromDate && preventEmptyToDate) && inputValue.from && inputValue.to;
+    const clearAllowed = !disableClear && !isReadonly && !isDisabled
+        && !(preventEmptyFromDate && preventEmptyToDate)
+        && ((value.from && !preventEmptyFromDate) || (value.to && !preventEmptyToDate));
     return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     React__namespace.default.createElement("div", { ref: ref, className: uuiCore.cx(`uui-size-${size || settings.rangeDatePicker.sizes.default}`, 'uui-range-date-picker', classes, css$N.root, isDisabled && uuiCore.uuiMod.disabled, isReadonly && uuiCore.uuiMod.readonly, isInvalid && uuiCore.uuiMod.invalid, inFocus && uuiCore.uuiMod.focus), onKeyDown: onKeyDown },
         React__namespace.default.createElement(TextInput, { icon: settings.rangeDatePicker.icons.input.calendarIcon, cx: uuiCore.cx(css$N.dateInput, inFocus === 'from' && uuiCore.uuiMod.focus), size: size || settings.rangeDatePicker.sizes.default, placeholder: getPlaceholder ? getPlaceholder('from') : i18n.rangeDatePicker.pickerPlaceholderFrom, value: inputValue.from || undefined, onValueChange: (v) => onInputChange(v || '', 'from'), onFocus: (event) => handleFocus(event, 'from'), onBlur: (event) => handleBlur(event, 'from'), isInvalid: isInvalid, isDisabled: isDisabled, isReadonly: isReadonly, isDropdown: false, rawProps: rawProps?.from, onClick: onClick, onKeyDown: onInputKeyDown, id: id }),
         React__namespace.default.createElement("div", { className: css$N.separator }),
-        React__namespace.default.createElement(TextInput, { cx: uuiCore.cx(css$N.dateInput, inFocus === 'to' && uuiCore.uuiMod.focus), placeholder: getPlaceholder ? getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: size || settings.rangeDatePicker.sizes.default, value: inputValue.to || undefined, onCancel: clearAllowed ? onClear : undefined, onValueChange: (v) => onInputChange(v || '', 'to'), onFocus: (e) => handleFocus(e, 'to'), onBlur: (e) => handleBlur(e, 'to'), isInvalid: isInvalid, isDisabled: isDisabled, isReadonly: isReadonly, isDropdown: false, rawProps: rawProps?.to, onClick: onClick, onKeyDown: onInputKeyDown })));
+        React__namespace.default.createElement(TextInput, { cx: uuiCore.cx(css$N.dateInput, inFocus === 'to' && uuiCore.uuiMod.focus), placeholder: getPlaceholder ? getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: size || settings.rangeDatePicker.sizes.default, value: inputValue.to || undefined, icon: clearAllowed && ForwardRef$Q, iconPosition: "right", iconLabel: "Clear selected date range", onIconClick: onClear, onValueChange: (v) => onInputChange(v || '', 'to'), onFocus: (e) => handleFocus(e, 'to'), onBlur: (e) => handleBlur(e, 'to'), isInvalid: isInvalid, isDisabled: isDisabled, isReadonly: isReadonly, isDropdown: false, rawProps: rawProps?.to, onClick: onClick, onKeyDown: onInputKeyDown })));
 });
 
-var css$M = {"root":"_9f9SK5"};
+var css$M = {"root":"e8CP52"};
 
 const uuiPresets = {
     container: 'uui-presets-container',
@@ -3450,7 +3516,7 @@ function CalendarPresets(props) {
         getPresets(props.presets).map((item) => (React__namespace.createElement(LinkButton, { key: item.key, caption: item.name, onClick: () => props.onPresetSet(item), size: settings.rangeDatePicker.sizes.preset })))));
 }
 
-var css$L = {"root":"h--zMZ","container":"_1TghEu","day-selection":"ebrMLw","daySelection":"ebrMLw","from-picker":"HDLKfi","fromPicker":"HDLKfi","to-picker":"cX6Gj3","toPicker":"cX6Gj3","bodes-wrapper":"UB7ZwA","bodesWrapper":"UB7ZwA","blocker":"hjKe03"};
+var css$L = {"root":"t-7IbW","container":"mz-gC0","day-selection":"MWjUgo","daySelection":"MWjUgo","from-picker":"CkOMEl","fromPicker":"CkOMEl","to-picker":"wd8kxl","toPicker":"wd8kxl","bodes-wrapper":"dsp6dB","bodesWrapper":"dsp6dB","blocker":"we3R0m"};
 
 const uuiRangeDatePickerBody = {
     inRange: 'uui-range-datepicker-in-range',
@@ -3526,13 +3592,13 @@ const rangeDatePickerPresets = {
 };
 const RangeDatePickerBody = /* @__PURE__ */React.forwardRef(RangeDatePickerBodyComp);
 function RangeDatePickerBodyComp(props, ref) {
-    const { value: _value, filter } = props;
+    const { value: _value, filter, initialViewMonth } = props;
     const { selectedDate: _selectedDate, inFocus, } = _value;
     const selectedDate = _selectedDate || defaultRangeValue; // also handles null in comparison to default value
     const [view, setView] = React.useState('DAY_SELECTION');
     const [disabledPanel, setDisabledPanel] = React.useState(null);
     const [month, setMonth] = React.useState(() => {
-        return getDisplayedMonth(selectedDate, inFocus);
+        return getDisplayedMonth(selectedDate, inFocus, initialViewMonth);
     });
     const getRange = (newValue) => {
         if (!filter || filter(uuiDayjs.dayjs(newValue))) {
@@ -3596,7 +3662,7 @@ function RangeDatePickerBodyComp(props, ref) {
                 }, presets: presets })));
     };
     uuiCore.useLayoutEffectSafeForSsr(() => {
-        const monthToSet = getDisplayedMonth(selectedDate, inFocus);
+        const monthToSet = getDisplayedMonth(selectedDate, inFocus, initialViewMonth);
         // To avoid re-rendering the body if the current month being displayed is equal to or greater than 1
         const shouldNotIgnoreUpdate = !(uuiDayjs.dayjs(month).isSame(monthToSet, 'month') || uuiDayjs.dayjs(month).add(1, 'month').isSame(monthToSet, 'month'));
         if (shouldNotIgnoreUpdate) {
@@ -3652,7 +3718,7 @@ const getDayState = (day, selectedDate) => {
     };
 };
 
-var css$K = {"dropdown-container":"OWH2eI","dropdownContainer":"OWH2eI"};
+var css$K = {"dropdown-container":"uz8bCC","dropdownContainer":"uz8bCC"};
 
 function RangeDatePickerComponent(props, ref) {
     const { value: _value, format = defaultFormat, size = settings.rangeDatePicker.sizes.default } = props;
@@ -3703,7 +3769,7 @@ function RangeDatePickerComponent(props, ref) {
                         inFocus,
                     }, onValueChange: onBodyValueChange, filter: props.filter, presets: props.presets, renderDay: props.renderDay, renderFooter: () => {
                         return props.renderFooter?.(value);
-                    }, isHoliday: props.isHoliday, rawProps: props.rawProps?.body, preventEmptyToDate: props.preventEmptyToDate, preventEmptyFromDate: props.preventEmptyFromDate }))));
+                    }, isHoliday: props.isHoliday, rawProps: props.rawProps?.body, preventEmptyToDate: props.preventEmptyToDate, preventEmptyFromDate: props.preventEmptyFromDate, initialViewMonth: props.initialViewMonth }))));
     };
     const handleEscape = (e) => {
         if (e.key === 'Escape' && isOpen) {
@@ -3720,7 +3786,7 @@ function RangeDatePickerComponent(props, ref) {
 }
 const RangeDatePicker = /* @__PURE__ */React__namespace.default.forwardRef(RangeDatePickerComponent);
 
-var css$J = {"root":"CyOFln","blocker":"H-cZjS","marker":"KI6Qzs","top":"f-8yiA","bottom":"Ru99qO","left":"GkJivw","right":"j61gnS","inside":"bzYllE"};
+var css$J = {"root":"_22QTE1","blocker":"jo1jLX","marker":"hC7D4B","top":"IU1oP9","bottom":"g0-uFw","left":"ZbgvZ5","right":"gxoxxo","inside":"AjTVvj"};
 
 function DropMarker(props) {
     return props.isDndInProgress
@@ -3735,9 +3801,9 @@ function DropMarker(props) {
         : null;
 }
 
-var css$I = {"search-wrapper":"_6NgEiS","searchWrapper":"_6NgEiS","no-data":"I1K0Ei","noData":"I1K0Ei"};
+var css$I = {"root":"DN2C02","search-wrapper":"xFbLs8","searchWrapper":"xFbLs8","no-data":"lsm8-P","noData":"lsm8-P"};
 
-var css$H = {"picker-row":"-StfyF","pickerRow":"-StfyF","align-widgets-top":"JJnK6P","alignWidgetsTop":"JJnK6P","row-content":"S9tdXR","rowContent":"S9tdXR","align-widgets-center":"x-cav9","alignWidgetsCenter":"x-cav9","icon-container":"PxEPqM","iconContainer":"PxEPqM","content-wrapper":"tDzzsF","contentWrapper":"tDzzsF","icon-wrapper":"RlEzNR","iconWrapper":"RlEzNR","icon-default":"ZQpQ6Y","iconDefault":"ZQpQ6Y","selected-mark":"yEpqqx","selectedMark":"yEpqqx"};
+var css$H = {"picker-row":"ZV9Evd","pickerRow":"ZV9Evd","align-widgets-top":"gHuc-F","alignWidgetsTop":"gHuc-F","row-content":"sRX7Cb","rowContent":"sRX7Cb","align-widgets-center":"VW-1QN","alignWidgetsCenter":"VW-1QN","icon-container":"YGdY3d","iconContainer":"YGdY3d","content-wrapper":"orJNxE","contentWrapper":"orJNxE","icon-wrapper":"Uu5Nvt","iconWrapper":"Uu5Nvt","icon-default":"cB83jB","iconDefault":"cB83jB","selected-mark":"StYSsP","selectedMark":"StYSsP"};
 
 const mergeHighlightRanges = (ranges) => {
     const mergedRanges = [];
@@ -3804,7 +3870,7 @@ const getHighlightedSearchMatches = (str, search) => {
     return getDecoratedText(str, ranges);
 };
 
-var css$G = {"root":"u16SjP","column-gap":"o40jjy","columnGap":"o40jjy","title":"_5qG2fv","subtitle":"GHUFnn","disabled":"GrQp1V","multiline":"gdrDvZ"};
+var css$G = {"root":"xgOlkL","column-gap":"TGS6aA","columnGap":"TGS6aA","title":"_76nI11","subtitle":"NjETha","disabled":"_5U6PdI","multiline":"vnj5wW"};
 
 function PickerItem(props) {
     const { highlightSearchMatches = true, size, avatarUrl, isLoading, isDisabled, icon, } = props;
@@ -3837,6 +3903,12 @@ function DataPickerRow(props) {
             rowNode.current?.removeEventListener('mouseenter', handleMouseEnter);
         };
     }, [props.onFocus, handleMouseEnter]);
+    const handleFocus = () => {
+        // If this row gets focus but is not the focused row, make it focused
+        if (!props.isFocused && props.onFocus) {
+            props.onFocus(props.index);
+        }
+    };
     const getSubtitle = ({ path }) => {
         if (!props.dataSourceState?.search)
             return;
@@ -3878,14 +3950,15 @@ function DataPickerRow(props) {
     const clickHandler = props.onClick || props.onSelect || props.onFold || props.onCheck;
     return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-    React__namespace.createElement("div", { onClick: clickHandler && ((e) => !uuiCore.isEventTargetInsideClickable(e) && clickHandler(props)), role: "option", "aria-busy": props.isLoading, "aria-posinset": props.index + 1, "aria-checked": props.checkbox?.isVisible ? props.isChecked : null, "aria-selected": props.isSelectable ? props.isSelected : null, ref: rowNode, className: uuiCore.cx(css$H.pickerRow, 'uui-picker_input-row', `uui-size-${props.size || settings.pickerInput.sizes.body.row}`, css$H[`align-widgets-${props.alignActions || 'top'}`], clickHandler && props.isFocused && uuiCore.uuiMod.focus, clickHandler && uuiCore.uuiMarkers.clickable, props.cx), style: props.padding && {
+    React__namespace.createElement("div", { onClick: clickHandler && ((e) => !uuiCore.isEventTargetInsideClickable(e) && clickHandler(props)), onFocus: handleFocus, role: "option", "aria-busy": props.isLoading, "aria-posinset": props.index + 1, "aria-checked": props.checkbox?.isVisible ? props.isChecked : null, "aria-selected": props.isSelectable ? props.isSelected : null, tabIndex: -1, ref: rowNode, id: props.rowKey, className: uuiCore.cx(css$H.pickerRow, 'uui-picker_input-row', `uui-size-${props.size || settings.pickerInput.sizes.body.row}`, css$H[`align-widgets-${props.alignActions || 'top'}`], clickHandler && props.isFocused && uuiCore.uuiMod.focus, clickHandler && uuiCore.uuiMarkers.clickable, props.cx), style: props.padding && {
             '--uui-data_picker-horizontal-padding': `${props.padding}px`,
         }, ...props.rawProps }, renderContent()));
 }
 
-function DataPickerBody({ highlightSearchMatches = true, ...props }) {
+function DataPickerBody({ highlightSearchMatches = true, autoFocusSearch = true, ...props }) {
     const prevProps = uuiCore.usePrevious(props);
     const showSearch = props.showSearch === 'auto' ? props.totalCount > 10 : Boolean(props.showSearch);
+    const [isKeyboardNavigation, setIsKeyboardNavigation] = React__namespace.default.useState(false);
     React.useEffect(() => {
         if (props.rows.length !== prevProps?.rows.length || (!isEqual__default.default(prevProps?.value.checked, props.value.checked) && !props.fixedBodyPosition)) {
             props.scheduleUpdate?.();
@@ -3893,9 +3966,36 @@ function DataPickerBody({ highlightSearchMatches = true, ...props }) {
     }, [props.rows, prevProps, props.value.checked, props.fixedBodyPosition]);
     const searchKeyDown = (e) => {
         props.onKeyDown?.(e);
-        if (e.shiftKey && e.key === 'Tab')
-            e.preventDefault();
     };
+    const handleVirtualListFocus = (e) => {
+        // Only set keyboard navigation if focus came from keyboard (Tab key)
+        // Check if the focus event was triggered by keyboard navigation
+        const isKeyboardFocus = e.target === e.currentTarget;
+        if (isKeyboardFocus) {
+            setIsKeyboardNavigation(true);
+        }
+    };
+    const handleVirtualListBlur = (e) => {
+        // Check if focus is moving outside the virtual list
+        const relatedTarget = e.relatedTarget;
+        const currentTarget = e.currentTarget;
+        if (relatedTarget && !currentTarget.contains(relatedTarget)) {
+            // Focus is leaving the virtual list, hide visual focus but keep focusedIndex for navigation "by circle"
+            setIsKeyboardNavigation(false);
+        }
+    };
+    const { focusedIndex, topIndex, } = props.value;
+    const focusedRowId = React.useMemo(() => {
+        // No need to make unnecessary calculations.
+        if (!props.showSearch) {
+            return '';
+        }
+        const focusedRow = props.rows.at(focusedIndex - topIndex);
+        if (!focusedRow) {
+            return '';
+        }
+        return focusedRow.rowKey;
+    }, [props.showSearch, focusedIndex, topIndex]);
     const renderEmpty = () => {
         const search = props.value.search;
         if (props.renderEmpty) {
@@ -3930,25 +4030,36 @@ function DataPickerBody({ highlightSearchMatches = true, ...props }) {
         return props.size || settings.pickerInput.sizes.body.row;
     };
     const renderRow = (row, dsState) => {
-        const pickerRowProps = { ...row, getName: props.getName };
+        const pickerRowProps = {
+            ...row,
+            getName: props.getName,
+            cx: uuiCore.cx(row.cx, isKeyboardNavigation && row.isFocused && 'uui-focus', isKeyboardNavigation && row.isFocused && 'uui-keyboard-focus'),
+        };
         return props.renderRow ? (props.renderRow(pickerRowProps, dsState)) : (React__namespace.default.createElement(DataPickerRow, { ...pickerRowProps, key: row.rowKey, size: getRowSize(), flattenSearchResults: props.flattenSearchResults, highlightSearchMatches: highlightSearchMatches, dataSourceState: dsState, getName: props.getName }));
     };
+    const renderSearchInput = () => {
+        return (React__namespace.default.createElement(SearchInput, { placeholder: i18n.dataPickerBody.searchPlaceholder, value: props.value.search, onValueChange: (newVal) => props.onValueChange({ ...props.value, search: newVal }), onKeyDown: searchKeyDown, size: searchSize, debounceDelay: props.searchDebounceDelay, rawProps: {
+                dir: 'auto',
+                'aria-activedescendant': focusedRowId,
+            } }));
+    };
     const searchSize = uuiCore.isMobile()
         ? settings.pickerInput.sizes.body.mobileSearchInput
         : settings.pickerInput.sizes.body.getSearchSize({ pickerSize: props.searchSize });
-    const renderedDataRows = React.useMemo(() => props.rows.map((row) => renderRow(row, props.value)), [props.rows, props.value]);
+    const renderedDataRows = React.useMemo(() => props.rows.map((row) => renderRow(row, props.value)), [props.rows, props.value, isKeyboardNavigation]);
     return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
         showSearch && (React__namespace.default.createElement("div", { key: "search", className: uuiCore.cx(css$I.searchWrapper, 'uui-picker_input-body-search') },
-            React__namespace.default.createElement(uuiComponents.FlexCell, { grow: 1 },
-                React__namespace.default.createElement(FocusLock.MoveFocusInside, null,
-                    React__namespace.default.createElement(SearchInput, { placeholder: i18n.dataPickerBody.searchPlaceholder, value: props.value.search, onValueChange: (newVal) => props.onValueChange({ ...props.value, search: newVal }), onKeyDown: searchKeyDown, size: searchSize, debounceDelay: props.searchDebounceDelay, rawProps: { dir: 'auto' } }))))),
+            React__namespace.default.createElement(uuiComponents.FlexCell, { grow: 1 }, autoFocusSearch ? React__namespace.default.createElement(FocusLock.MoveFocusInside, null, renderSearchInput()) : renderSearchInput()))),
         React__namespace.default.createElement(FlexRow, { key: "body", cx: uuiCore.cx('uui-picker_input-body'), rawProps: { style: { maxHeight: props.maxHeight, maxWidth: props.maxWidth }, tabIndex: -1 } }, props.rows.length === 0 && props.value.topIndex === 0
             // We need to also ensure that topIndex === 0, because we can have state were there is no rows but topIndex > 0, in case when we scrolled lover than we have rows
             // we fix this state on next render and shouldn't show empty state.
-            ? renderEmpty() : (React__namespace.default.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, rows: renderedDataRows, rawProps: {
+            ? renderEmpty() : (React__namespace.default.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, rows: renderedDataRows, role: "listbox", cx: css$I.root, rawProps: {
                 'aria-multiselectable': props.selectionMode === 'multi' ? true : null,
                 'aria-orientation': 'vertical',
-                tabIndex: -1,
+                tabIndex: 0,
+                onKeyDown: props.onKeyDown,
+                onFocus: handleVirtualListFocus,
+                onBlur: handleVirtualListBlur,
                 ...props.rawProps,
             }, rowsCount: props.rowsCount, isLoading: props.isReloading, renderBlocker: settings.pickerInput.renderBlocker, overflowTopEffect: showSearch ? 'line' : 'none', overflowBottomEffect: "line" })))));
 }
@@ -3977,7 +4088,7 @@ function DataPickerFooterImpl(props) {
 }
 const DataPickerFooter = /* @__PURE__ */React__namespace.default.memo(DataPickerFooterImpl);
 
-var css$F = {"header":"dWqlir","title":"DLS7WK","close":"_4popBc"};
+var css$F = {"header":"AZz4sm","title":"wqVddw","close":"-F5F4O"};
 
 const DataPickerMobileHeaderImpl = (props) => {
     const title = props.title && typeof props.title === 'string' ? props.title.charAt(0).toUpperCase() + props.title.slice(1) : '';
@@ -3987,7 +4098,7 @@ const DataPickerMobileHeaderImpl = (props) => {
 };
 const DataPickerMobileHeader = /* @__PURE__ */React__namespace.default.memo(DataPickerMobileHeaderImpl);
 
-var css$E = {"done":"dtgy0X","container":"kz9zZt"};
+var css$E = {"done":"qq1qxT","container":"_40T4mJ"};
 
 const PickerBodyMobileView = (props) => {
     const isMobileView = uuiCore.isMobile();
@@ -3999,7 +4110,7 @@ const PickerBodyMobileView = (props) => {
         isMobileView && (React__namespace.default.createElement(LinkButton, { caption: i18n.pickerInput.doneButton, onClick: () => props.onClose?.(), cx: css$E.done, size: settings.pickerInput.sizes.body.mobileFooterLinkButton }))));
 };
 
-var css$D = {"sub-header-wrapper":"_3qCOvA","subHeaderWrapper":"_3qCOvA","switch":"P0z88W","no-found-modal-container":"mend-4","noFoundModalContainer":"mend-4","no-found-modal-container-icon":"fhhX5t","noFoundModalContainerIcon":"fhhX5t","no-found-modal-container-text":"PtJy9y","noFoundModalContainerText":"PtJy9y","body":"OEleEb"};
+var css$D = {"sub-header-wrapper":"-Ux2dj","subHeaderWrapper":"-Ux2dj","switch":"NoIFcA","search":"Y5QceC","no-found-modal-container":"_90xb1v","noFoundModalContainer":"_90xb1v","no-found-modal-container-icon":"Iuaf-8","noFoundModalContainerIcon":"Iuaf-8","no-found-modal-container-text":"k0AQZH","noFoundModalContainerText":"k0AQZH","body":"wfsrAa"};
 
 function PickerModal(props) {
     const { view, selection, dataSourceStateLens, dataSourceState, getName, clearSelection, getRows, getListProps, getFooterProps, isSingleSelect, handleDataSourceValueChange, } = uuiComponents.usePickerModal(props);
@@ -4027,25 +4138,40 @@ function PickerModal(props) {
             React__namespace.default.createElement(Text, { cx: css$D.noFoundModalContainerText, fontSize: "12", lineHeight: "18", color: "primary" }, i18n.dataPickerBody.noRecordsSubTitle)));
     };
     const dataRows = getRows();
+    const { focusedIndex, topIndex, } = dataSourceState;
+    const focusedRowId = React.useMemo(() => {
+        const focusedRow = dataRows.at(focusedIndex - topIndex);
+        if (!focusedRow) {
+            return '';
+        }
+        return focusedRow.rowKey;
+    }, [focusedIndex, topIndex]);
+    const onKeyDownHandler = (e) => {
+        uuiComponents.handleDataSourceKeyboard({
+            value: dataSourceState,
+            onValueChange: handleDataSourceValueChange,
+            listView: view,
+            rows: dataRows,
+            searchPosition: 'body',
+        }, e);
+    };
     return (React__namespace.default.createElement(ModalBlocker, { ...props },
         React__namespace.default.createElement(ModalWindow, { width: 600, height: 700, cx: css$D.body },
             React__namespace.default.createElement(ModalHeader, { title: props.caption || i18n.pickerModal.headerTitle, onClose: () => props.abort() }),
             React__namespace.default.createElement(FlexCell, { cx: css$D.subHeaderWrapper },
                 React__namespace.default.createElement(FlexRow, { vPadding: "24" },
-                    React__namespace.default.createElement(SearchInput, { ...dataSourceStateLens.prop('search').toProps(), onKeyDown: (e) => uuiComponents.handleDataSourceKeyboard({
-                            value: dataSourceState,
-                            onValueChange: handleDataSourceValueChange,
-                            listView: view,
-                            rows: dataRows,
-                            searchPosition: 'body',
-                        }, e), autoFocus: true, placeholder: i18n.pickerModal.searchPlaceholder, rawProps: { dir: 'auto' } })),
+                    React__namespace.default.createElement(FocusLock.MoveFocusInside, { className: css$D.search },
+                        React__namespace.default.createElement(SearchInput, { ...dataSourceStateLens.prop('search').toProps(), onKeyDown: onKeyDownHandler, placeholder: i18n.pickerModal.searchPlaceholder, rawProps: {
+                                dir: 'auto',
+                                'aria-activedescendant': focusedRowId,
+                            } }))),
                 !isSingleSelect() && (React__namespace.default.createElement(Switch, { cx: css$D.switch, size: settings.pickerInput.sizes.body.footerSwitchMap[settings.pickerInput.sizes.body.row], ...getFooterProps().showSelected, isDisabled: isSearching || view.getSelectedRowsCount() < 1, label: "Show only selected" })),
                 props.renderFilter && React__namespace.default.createElement(FlexCell, { grow: 2 }, props.renderFilter(dataSourceStateLens.prop('filter').toProps()))),
-            React__namespace.default.createElement(DataPickerBody, { ...getListProps(), value: dataSourceState, onValueChange: handleDataSourceValueChange, showSearch: false, getName: getName, rows: dataRows, renderRow: renderRow, renderEmpty: renderNotFound, size: settings.pickerInput.sizes.body.row }),
+            React__namespace.default.createElement(DataPickerBody, { ...getListProps(), value: dataSourceState, onValueChange: handleDataSourceValueChange, showSearch: false, getName: getName, rows: dataRows, renderRow: renderRow, renderEmpty: renderNotFound, size: settings.pickerInput.sizes.body.row, onKeyDown: onKeyDownHandler }),
             React__namespace.default.createElement(ModalFooter, null, props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()))));
 }
 
-var css$C = {"tooltip":"_4mcV-D"};
+var css$C = {"tooltip":"nqfmn3","noShrink":"ag--MC"};
 
 const PickerTogglerTag = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const tagProps = {
@@ -4057,14 +4183,14 @@ const PickerTogglerTag = /* @__PURE__ */React__namespace.forwardRef((props, ref)
     if (props.isCollapsed) {
         const collapsedRows = props.collapsedRows.map((row) => props.getName(row.value)).join(', ');
         return (React__namespace.createElement(Tooltip, { key: "selected", content: collapsedRows, closeDelay: 150, closeOnMouseLeave: "boundary", cx: css$C.tooltip },
-            React__namespace.createElement(Tag, { ref: ref, rawProps: { role: 'option' }, ...tagProps })));
+            React__namespace.createElement(Tag, { ref: ref, rawProps: { role: 'option' }, ...tagProps, cx: css$C.noShrink })));
     }
     else {
         return React__namespace.createElement(Tag, { ref: ref, rawProps: { role: 'option' }, ...tagProps });
     }
 });
 
-var css$B = {"root":"x5R0RZ"};
+var css$B = {"root":"Qjfu8Y"};
 
 const defaultMode = EditMode.FORM;
 function applyPickerTogglerMods(mods) {
@@ -4134,7 +4260,7 @@ function PickerInputComponent(props, ref) {
         const bodyHeight = uuiCore.isMobile() ? document.documentElement.clientHeight : props.dropdownHeight || settings.pickerInput.sizes.body.maxHeight;
         const minBodyWidth = props.minBodyWidth || settings.pickerInput.sizes.body.minWidth;
         const onKeyDown = (e) => handlePickerInputKeyboard(rows, e);
-        return (React__namespace.default.createElement(PickerBodyMobileView, { title: props.entityName, onClose: () => toggleBodyOpening(false), cx: [props.bodyCx, 'uui-picker_input-body-wrapper'], onKeyDown: onKeyDown, width: dropdownProps.togglerWidth > minBodyWidth ? dropdownProps.togglerWidth : minBodyWidth, focusLock: getSearchPosition() === 'body' },
+        return (React__namespace.default.createElement(PickerBodyMobileView, { title: props.entityName, onClose: () => toggleBodyOpening(false), cx: [props.bodyCx, 'uui-picker_input-body-wrapper'], width: dropdownProps.togglerWidth > minBodyWidth ? dropdownProps.togglerWidth : minBodyWidth, focusLock: true, shards: getSearchPosition() === 'input' ? [togglerRef] : undefined, rawProps: { 'aria-modal': true } },
             React__namespace.default.createElement(DataPickerBody, { ...dropdownProps, ...getListProps(), showSearch: getSearchPosition() === 'body', getName: getName, value: dataSourceState, onValueChange: handleDataSourceValueChange, rows: rows, maxHeight: bodyHeight, searchSize: props.size, selectionMode: props.selectionMode, renderNotFound: props.renderNotFound, renderEmpty: props.renderEmpty, renderRow: props.renderRow, onKeyDown: onKeyDown, minCharsToSearch: props.minCharsToSearch, fixedBodyPosition: props.fixedBodyPosition, searchDebounceDelay: props.searchDebounceDelay, rawProps: props.rawProps?.body, highlightSearchMatches: props.highlightSearchMatches, flattenSearchResults: view.getConfig().flattenSearchResults }),
             renderFooter()));
     };
@@ -4142,11 +4268,11 @@ function PickerInputComponent(props, ref) {
     return (React__namespace.default.createElement(Dropdown, { renderTarget: (dropdownProps) => {
             const targetProps = getTogglerProps();
             return renderTarget({ ...dropdownProps, ...targetProps, renderItem });
-        }, renderBody: (bodyProps) => renderBody(bodyProps), value: shouldShowBody(), onValueChange: !props.isDisabled && toggleBodyOpening, placement: props.dropdownPlacement, middleware: middleware, closeBodyOnTogglerHidden: !uuiCore.isMobile(), portalTarget: props.portalTarget, ref: togglerRef }));
+        }, renderBody: (bodyProps) => renderBody(bodyProps), value: shouldShowBody(), onValueChange: !props.isDisabled && toggleBodyOpening, placement: props.dropdownPlacement, middleware: middleware, closeBodyOnTogglerHidden: uuiCore.isMobile() ? false : props.closeBodyOnTogglerHidden, portalTarget: props.portalTarget, ref: togglerRef }));
 }
 const PickerInput = /* @__PURE__ */React__namespace.default.forwardRef(PickerInputComponent);
 
-var css$A = {"row":"ioKxSN"};
+var css$A = {"row":"luGXrO"};
 
 function PickerListRow(props) {
     let label;
@@ -4166,7 +4292,7 @@ function PickerListRow(props) {
     return (React__namespace.default.createElement("div", { role: "option", "aria-selected": props.isSelectable ? props.isSelected : undefined, "aria-busy": props.isLoading, "aria-posinset": props.index + 1, ...(props.checkbox?.isVisible && { 'aria-checked': props.isChecked }), className: css$A.row }, component));
 }
 
-var css$z = {"root":"bxJ1W7"};
+var css$z = {"root":"_6KhRL1"};
 
 function PickerList(props) {
     const { context, view, onlySelectedView, getName, getEntityName, appendLastSelected, getSelectedIdsArray, buildRowsList, getMaxDefaultItems, getModalTogglerCaption, } = uuiComponents.usePickerList(props);
@@ -4201,7 +4327,7 @@ function PickerList(props) {
             }, selectedRows)));
 }
 
-var css$y = {"root":"xeNBUr","wrapper":"Xg0x3n","align-widgets-top":"eHeecQ","alignWidgetsTop":"eHeecQ","align-widgets-center":"IYTmfs","alignWidgetsCenter":"IYTmfs"};
+var css$y = {"root":"ae2y-y","wrapper":"-ti4Ak","align-widgets-top":"-rtEm8","alignWidgetsTop":"-rtEm8","align-widgets-center":"sgsK4n","alignWidgetsCenter":"sgsK4n"};
 
 function DataTableCell(initialProps) {
     const props = { ...initialProps };
@@ -4251,7 +4377,7 @@ function DataTableCell(initialProps) {
     return React__namespace.createElement(uuiComponents.DataTableCell, { ...props });
 }
 
-var css$x = {"root":"KyIaqJ"};
+var css$x = {"root":"P3uLuH"};
 
 // Here we define a single instance of the renderCell function to make DataTableRow#shouldComponentUpdate work.
 // As we need our mods to style the cell properly, we extract them from DataTableCellProps.rowProps, which is a hack, but it's reliable enough.
@@ -4267,7 +4393,7 @@ const DataTableRow = /* @__PURE__ */uuiCore.withMods(uuiComponents.DataTableRow,
     ];
 }, () => propsMods);
 
-var css$w = {"sorting-panel-container":"rljpiS","sortingPanelContainer":"rljpiS"};
+var css$w = {"sorting-panel-container":"JjOQqc","sortingPanelContainer":"JjOQqc"};
 
 const SortingPanelImpl = ({ sortDirection, onSort }) => {
     const sortAsc = React.useCallback(() => onSort(sortDirection === 'asc' ? undefined : 'asc'), [onSort]);
@@ -4281,13 +4407,13 @@ const SortingPanel = /* @__PURE__ */React__namespace.default.memo(SortingPanelIm
 const ColumnHeaderDropdownImpl = (props) => {
     const middleware = React.useMemo(() => [react.offset(1), uuiCore.mobilePositioning], []);
     const closeDropdown = React.useCallback(() => props.onOpenChange(false), [props.onOpenChange]);
-    return (React__namespace.default.createElement(uuiComponents.Dropdown, { renderTarget: props.renderTarget, renderBody: (dropdownProps) => (React__namespace.default.createElement(PickerBodyMobileView, { width: 280, maxWidth: "auto", title: props.title, onClose: closeDropdown },
+    return (React__namespace.default.createElement(uuiComponents.Dropdown, { renderTarget: props.renderTarget, renderBody: (dropdownProps) => (React__namespace.default.createElement(PickerBodyMobileView, { width: 280, maxWidth: "auto", title: props.title, onClose: closeDropdown, rawProps: { 'aria-modal': true } },
             props.isSortable && React__namespace.default.createElement(SortingPanel, { sortDirection: props.sortDirection, onSort: props.onSort }),
             props.renderFilter(dropdownProps))), middleware: middleware, value: props.isOpen, onValueChange: props.onOpenChange }));
 };
 const ColumnHeaderDropdown = /* @__PURE__ */React__namespace.default.memo(ColumnHeaderDropdownImpl);
 
-var css$v = {"root":"Ck-KHz","caption-wrapper":"tovuou","captionWrapper":"tovuou","sort-icon":"RIJMFS","sortIcon":"RIJMFS","dropdown-icon":"BgFxBb","dropdownIcon":"BgFxBb","infoIcon":"m9IO-U","align-right":"OvoBKt","alignRight":"OvoBKt","align-center":"Ec5nAn","alignCenter":"Ec5nAn","caption":"PYDEL8","truncate":"exm7Dv","upper-case":"HyeItf","upperCase":"HyeItf","checkbox":"aWT3wq","icon":"NvjR5G","fold-all-icon":"MWxuDp","foldAllIcon":"MWxuDp","cell-tooltip":"_5sa2Gu","cellTooltip":"_5sa2Gu","resizing-marker":"IVYqkm","resizingMarker":"IVYqkm","pinned-right":"_4NIKgX","pinnedRight":"_4NIKgX","draggable":"_1erJ0J","ghost":"tS0RWI","is-dragged-out":"fAZrIh","isDraggedOut":"fAZrIh","dnd-marker-left":"PzT1cZ","dndMarkerLeft":"PzT1cZ","dnd-marker-right":"YIoD08","dndMarkerRight":"YIoD08","cell-tooltip-wrapper":"rzGNKC","cellTooltipWrapper":"rzGNKC","cell-tooltip-text":"_3amhLs","cellTooltipText":"_3amhLs","tooltip-caption":"okkCmc","tooltipCaption":"okkCmc","tooltip-info":"Z3yhZx","tooltipInfo":"Z3yhZx"};
+var css$v = {"root":"MJLpus","caption-wrapper":"ohPeD8","captionWrapper":"ohPeD8","sort-icon":"NjdgKI","sortIcon":"NjdgKI","dropdown-icon":"kKYcNj","dropdownIcon":"kKYcNj","infoIcon":"eYFoTH","sortInActive":"p2USYh","align-right":"AXccWm","alignRight":"AXccWm","align-center":"vnka-Y","alignCenter":"vnka-Y","caption":"OjJJjN","truncate":"_7ioVNO","upper-case":"C-VAvt","upperCase":"C-VAvt","checkbox":"NGPbSU","icon":"u8z9RT","fold-all-icon":"_4KPyED","foldAllIcon":"_4KPyED","cell-tooltip":"nNwYJ5","cellTooltip":"nNwYJ5","resizing-marker":"ka--8Q","resizingMarker":"ka--8Q","pinned-right":"DQKLZt","pinnedRight":"DQKLZt","draggable":"GWeAJV","ghost":"_6glR-c","is-dragged-out":"iDM0UI","isDraggedOut":"iDM0UI","dnd-marker-left":"YfMd8a","dndMarkerLeft":"YfMd8a","dnd-marker-right":"Zc5EF3","dndMarkerRight":"Zc5EF3","cell-tooltip-wrapper":"_7x6mkx","cellTooltipWrapper":"_7x6mkx","cell-tooltip-text":"_45WssY","cellTooltipText":"_45WssY","tooltip-caption":"ryEuI8","tooltipCaption":"ryEuI8","tooltip-info":"NaiOJQ","tooltipInfo":"NaiOJQ"};
 
 class DataTableHeaderCell extends React__namespace.Component {
     constructor() {
@@ -4298,7 +4424,7 @@ class DataTableHeaderCell extends React__namespace.Component {
         this.getTooltipContent = (column) => (React__namespace.createElement("div", { className: uuiCore.cx(css$v.cellTooltipWrapper, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCaptionTooltip) },
             React__namespace.createElement(Text, { cx: [css$v.cellTooltipText, css$v.tooltipCaption] }, column.caption),
             column.info && (React__namespace.createElement(Text, { cx: [css$v.cellTooltipText, css$v.tooltipInfo] }, column.info))));
-        this.getColumnCaption = () => {
+        this.getColumnCaption = (props, dropdownProps) => {
             const renderTooltip = this.props.column.renderTooltip || this.getTooltipContent;
             const captionCx = uuiCore.cx([
                 css$v.caption,
@@ -4307,16 +4433,28 @@ class DataTableHeaderCell extends React__namespace.Component {
                 'uui-typography-inline',
                 this.props.size >= '48' && css$v.truncate,
             ]);
+            const handleFilterOpen = (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    dropdownProps.onClick(e);
+                    e.preventDefault();
+                }
+            };
+            const handleSort = (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    props.toggleSort(e);
+                    e.preventDefault();
+                }
+            };
             return (React__namespace.createElement("div", { className: uuiCore.cx(css$v.captionWrapper, css$v['align-' + this.props.column.textAlign], uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCaptionWrapper) },
-                React__namespace.createElement(Tooltip, { placement: "top", color: "inverted", content: renderTooltip(this.props.column), cx: [css$v.cellTooltip, 'uui-dt-header-tooltip'], openDelay: 600 },
+                React__namespace.createElement(Tooltip, { placement: "top", color: "inverted", content: renderTooltip(this.props.column), cx: [css$v.cellTooltip, 'uui-dt-header-tooltip'], openDelay: 600, closeOnMouseLeave: "boundary" },
                     React__namespace.createElement("div", { key: "text", className: captionCx }, this.props.column.caption)),
-                this.props.column.isSortable && (!this.props.column.renderFilter || this.props.sortDirection) && (React__namespace.createElement(IconButton, { key: "sort", cx: uuiCore.cx(css$v.icon, css$v.sortIcon, this.props.sortDirection && css$v.sortIconActive, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderSortIcon), color: this.props.sortDirection ? 'neutral' : 'secondary', icon: settings.dataTable.icons.header[this.props.sortDirection === 'desc' ? 'descSortIcon' : this.props.sortDirection === 'asc' ? 'ascSortIcon' : 'defaultSortIcon'] })),
+                this.props.column.isSortable && (!this.props.column.renderFilter || this.props.sortDirection) && (React__namespace.createElement(uuiComponents.ControlIcon, { key: "sort", cx: uuiCore.cx(css$v.icon, css$v.sortIcon, !this.props.sortDirection && css$v.sortInActive, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderSortIcon), icon: settings.dataTable.icons.header[this.props.sortDirection === 'desc' ? 'descSortIcon' : this.props.sortDirection === 'asc' ? 'ascSortIcon' : 'defaultSortIcon'], onKeyDown: !this.props.column.renderFilter ? handleSort : undefined })),
                 this.props.isFilterActive && (React__namespace.createElement(IconButton, { key: "filter", cx: uuiCore.cx(css$v.icon, !this.props.sortDirection && css$v.filterIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderFilterIcon), color: "neutral", icon: settings.dataTable.icons.header.filterIcon })),
-                this.props.column.renderFilter && (React__namespace.createElement(IconButton, { key: "dropdown", cx: uuiCore.cx(css$v.icon, css$v.dropdownIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderDropdownIcon), color: "secondary", icon: settings.dataTable.icons.header[this.state.isDropdownOpen ? 'openedDropdownIcon' : 'dropdownIcon'] }))));
+                this.props.column.renderFilter && (React__namespace.createElement(uuiComponents.ControlIcon, { key: "dropdown", cx: uuiCore.cx(css$v.icon, css$v.dropdownIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderDropdownIcon), icon: settings.dataTable.icons.header[this.state.isDropdownOpen ? 'openedDropdownIcon' : 'dropdownIcon'], onKeyDown: handleFilterOpen }))));
         };
         this.renderHeaderCheckbox = () => {
             if (this.props.selectAll && this.props.isFirstColumn) {
-                return (React__namespace.createElement(Checkbox, { size: settings.dataTable.sizes.body.checkboxMap[this.props.size], ...this.props.selectAll, cx: uuiCore.cx(css$v.checkbox, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCheckbox) }));
+                return (React__namespace.createElement(Checkbox, { size: settings.dataTable.sizes.body.checkboxMap[this.props.size], rawProps: { 'aria-label': 'Select All' }, ...this.props.selectAll, cx: uuiCore.cx(css$v.checkbox, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCheckbox) }));
             }
         };
         this.renderFoldAllIcon = () => {
@@ -4324,7 +4462,7 @@ class DataTableHeaderCell extends React__namespace.Component {
                 return (React__namespace.createElement(Tooltip, { content: this.props.areAllFolded
                         ? i18n.tables.columnHeader.expandAllTooltip
                         : i18n.tables.columnHeader.collapseAllTooltip },
-                    React__namespace.createElement(IconButton, { color: "secondary", cx: uuiCore.cx(css$v.icon, css$v.foldAllIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderFoldAllIcon), icon: settings.dataTable.icons.header[this.props.areAllFolded ? 'unfoldIcon' : 'foldIcon'], onClick: this.props.onFoldAll, rawProps: {
+                    React__namespace.createElement(uuiComponents.ControlIcon, { cx: uuiCore.cx(css$v.icon, css$v.foldAllIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderFoldAllIcon), icon: settings.dataTable.icons.header[this.props.areAllFolded ? 'unfoldIcon' : 'foldIcon'], onClick: this.props.onFoldAll, rawProps: {
                             'aria-label': this.props.areAllFolded ? 'Expand All' : 'Collapse All',
                             'aria-expanded': !!this.props.areAllFolded,
                         } })));
@@ -4368,7 +4506,7 @@ class DataTableHeaderCell extends React__namespace.Component {
                 }, style: computeStyles },
                 this.renderHeaderCheckbox(),
                 this.renderFoldAllIcon(),
-                this.getColumnCaption(),
+                this.getColumnCaption(props, dropdownProps),
                 isResizable && this.renderResizingMarker(props)));
         };
         this.renderCellWithFilter = (props) => (React__namespace.createElement(ColumnHeaderDropdown, { isOpen: this.state.isDropdownOpen, isSortable: this.props.column.isSortable, renderTarget: (dropdownProps) => this.renderCellContent(props, dropdownProps), renderFilter: this.props.renderFilter, onSort: this.props.onSort, sortDirection: this.props.sortDirection, onOpenChange: (isDropdownOpen) => this.setState({ isDropdownOpen }), title: this.props.column.caption }));
@@ -4381,7 +4519,7 @@ class DataTableHeaderCell extends React__namespace.Component {
     }
 }
 
-var css$u = {"root":"aL8Twq","caption-wrapper":"BhE4Li","captionWrapper":"BhE4Li","align-center":"R5SNqN","alignCenter":"R5SNqN","caption":"_5XUzaV","truncate":"VkQyIE","upper-case":"qyEjmE","upperCase":"qyEjmE","group-cell-tooltip":"kzEKJW","groupCellTooltip":"kzEKJW","group-cell-tooltip-wrapper":"fJhEde","groupCellTooltipWrapper":"fJhEde","group-cell-tooltip-text":"y8ZEYS","groupCellTooltipText":"y8ZEYS","tooltip-caption":"sqTDmB","tooltipCaption":"sqTDmB","tooltip-info":"Fkrwae","tooltipInfo":"Fkrwae"};
+var css$u = {"root":"YPhvpm","caption-wrapper":"Q-PMU3","captionWrapper":"Q-PMU3","align-center":"Qs9tDK","alignCenter":"Qs9tDK","caption":"d37ZU9","truncate":"hXklwY","upper-case":"HScr7i","upperCase":"HScr7i","group-cell-tooltip":"A05edc","groupCellTooltip":"A05edc","group-cell-tooltip-wrapper":"ii7QVL","groupCellTooltipWrapper":"ii7QVL","group-cell-tooltip-text":"-QRiXj","groupCellTooltipText":"-QRiXj","tooltip-caption":"_6SIcfa","tooltipCaption":"_6SIcfa","tooltip-info":"wR6NCW","tooltipInfo":"wR6NCW"};
 
 class DataTableHeaderGroupCell extends React__namespace.Component {
     constructor() {
@@ -4421,13 +4559,17 @@ class DataTableHeaderGroupCell extends React__namespace.Component {
     }
 }
 
-var css$t = {"root":"zFwUX2"};
+var css$t = {"root":"LQ3nji"};
 
-const DataTableHeaderRow = /* @__PURE__ */uuiCore.withMods(uuiComponents.DataTableHeaderRow, () => [css$t.root, 'uui-dt-vars'], (mods) => ({
-    renderCell: (props) => (React__namespace.createElement(DataTableHeaderCell, { ...props, size: mods.size, textCase: mods.textCase || 'normal', key: props.column.key, columnsGap: mods.columnsGap })),
-    renderGroupCell: (props) => (React__namespace.createElement(DataTableHeaderGroupCell, { ...props, size: mods.size, textCase: mods.textCase || 'normal', key: props.key, columnsGap: mods.columnsGap })),
-    renderConfigButton: () => (React__namespace.createElement(IconButton, { key: "configuration", onClick: mods.onConfigButtonClick, cx: ['config-icon', `uui-size-${settings.dataTable.sizes.header.iconMap[mods.size || settings.dataTable.sizes.header.row]}`], color: "neutral", icon: settings.dataTable.icons.header.configIcon })),
-}));
+const DataTableHeaderRow = /* @__PURE__ */uuiCore.withMods(uuiComponents.DataTableHeaderRow, () => [css$t.root, 'uui-dt-vars'], (mods) => {
+    return ({
+        renderCell: (props) => (React__namespace.createElement(DataTableHeaderCell, { ...props, size: mods.size, textCase: mods.textCase || 'normal', key: props.column.key, columnsGap: mods.columnsGap })),
+        renderGroupCell: (props) => (React__namespace.createElement(DataTableHeaderGroupCell, { ...props, size: mods.size, textCase: mods.textCase || 'normal', key: props.key, columnsGap: mods.columnsGap })),
+        renderConfigButton: () => (React__namespace.createElement(uuiComponents.ControlIcon, { key: "configuration", onClick: mods.onConfigButtonClick, size: settings.dataTable.sizes.header.iconMap[mods.size || settings.dataTable.sizes.header.row], cx: ['config-icon'], icon: settings.dataTable.icons.header.configIcon, rawProps: {
+                'aria-label': 'Configure columns',
+            } })),
+    });
+});
 
 const normalizeFilterWithPredicates = (filter) => {
     if (!filter) {
@@ -4517,7 +4659,7 @@ const UUI_FILTERS_PANEL_ITEM_TOGGLER_SELECTION = 'uui-filters-panel-item-toggler
 const UUI_FILTERS_PANEL_ITEM_TOGGLER_POSTFIX = 'uui-filters-panel-item-toggler-postfix';
 const UUI_FILTERS_PANEL_BODY_FOOTER = 'uui-filters-panel-item-footer';
 
-var css$s = {"body":"rzzXLN","header":"IFH7Cw","title":"bfx5Tz","removeButton":"pOOiE6","with-search":"u9Wf35","withSearch":"u9Wf35"};
+var css$s = {"body":"Cgez4E","header":"O7hH4D","title":"AnrAje","removeButton":"pw1vuC","with-search":"ePEaMD","withSearch":"ePEaMD"};
 
 function FilterColumnBody(props) {
     const [predicate, setPredicate] = React.useState(getDefaultPredicate(props.predicates, props.value));
@@ -4541,7 +4683,7 @@ function FilterColumnBody(props) {
         return props.predicates?.length > 0 && (React__namespace.default.createElement("div", { className: css$s.header },
             React__namespace.default.createElement(FilterPredicatePanel, { ...panelProps })));
     };
-    return (React__namespace.default.createElement(DropdownContainer, { style: { minWidth: '360px' }, cx: [css$s.body, UUI_FILTERS_PANEL_ITEM_BODY], ...props },
+    return (React__namespace.default.createElement(DropdownContainer, { style: { minWidth: '360px' }, cx: [css$s.body, UUI_FILTERS_PANEL_ITEM_BODY], ...props, focusLock: false, rawProps: { 'aria-modal': true } },
         renderHeader(),
         React__namespace.default.createElement(FilterItemBody, { ...props, selectedPredicate: predicate, value: getValue(predicate, props.value), onValueChange: onValueChange })));
 }
@@ -4578,7 +4720,7 @@ const useColumnsWithFilters = (initialColumns, filters) => {
     return columns;
 };
 
-var css$r = {"unpin-icon":"GWvjk2","unpinIcon":"GWvjk2","pin-toggler-icon":"_2jyLnZ","pinTogglerIcon":"_2jyLnZ"};
+var css$r = {"unpin-icon":"Nxvd7H","unpinIcon":"Nxvd7H","pin-toggler-icon":"fG9JjQ","pinTogglerIcon":"fG9JjQ"};
 
 function PinIconButton(props) {
     const i18nLocal = i18n.tables.columnsConfigurationModal;
@@ -4629,7 +4771,7 @@ function getUnpinIcon(params) {
     }
 }
 
-var css$q = {"row-wrapper":"_9wTmmF","rowWrapper":"_9wTmmF","pin-icon-button":"_3XFwfA","pinIconButton":"_3XFwfA","not-pinned":"Zn9VUK","notPinned":"Zn9VUK","checkbox":"d3OPjY","drag-handle":"_7-QbWp","dragHandle":"_7-QbWp","dnd-disabled":"c8MqGC","dndDisabled":"c8MqGC"};
+var css$q = {"row-wrapper":"_8NCedf","rowWrapper":"_8NCedf","pin-icon-button":"jfvmSt","pinIconButton":"jfvmSt","not-pinned":"OvTdDW","notPinned":"OvTdDW","checkbox":"KWEjLV","drag-handle":"VDUDgX","dragHandle":"VDUDgX","dnd-disabled":"dDZaOA","dndDisabled":"dDZaOA"};
 
 const ColumnRow = /* @__PURE__ */React__namespace.memo(function ColumnRow(props) {
     const { column } = props;
@@ -4663,7 +4805,7 @@ const ColumnRow = /* @__PURE__ */React__namespace.memo(function ColumnRow(props)
     return (React__namespace.createElement(uuiCore.DndActor, { key: column.key, srcData: isDndAllowed && data, dstData: data, canAcceptDrop: onCanAcceptDrop, onDrop: onDrop, render: renderContent }));
 });
 
-var css$p = {"root":"l7zs0-","main-panel":"wMbeYU","mainPanel":"wMbeYU","group":"vdzyBr","group-title":"tz0Ysp","groupTitle":"tz0Ysp","group-items":"VsxZVD","groupItems":"VsxZVD","no-data":"xyWtJv","noData":"xyWtJv","no-data-title":"mdTCLB","noDataTitle":"mdTCLB","no-data-sub-title":"XcLNpa","noDataSubTitle":"XcLNpa","h-divider":"T74Nj-","hDivider":"T74Nj-","search-area":"VbSpki","searchArea":"VbSpki","subgroup-accordion":"Pd2epb","subgroupAccordion":"Pd2epb","subgroup":"vwjpH9","subgroup-title":"_60zNp2","subgroupTitle":"_60zNp2"};
+var css$p = {"root":"WFAJIu","main-panel":"gnN2L8","mainPanel":"gnN2L8","group":"s7rdZG","group-title":"h7pjdp","groupTitle":"h7pjdp","group-items":"-clb9l","groupItems":"-clb9l","no-data":"sYlk8C","noData":"sYlk8C","no-data-title":"M-HUYY","noDataTitle":"M-HUYY","no-data-sub-title":"mGCD1R","noDataSubTitle":"mGCD1R","h-divider":"Pd9LlD","hDivider":"Pd9LlD","search-area":"hMbWvD","searchArea":"hMbWvD","subgroup-accordion":"N3AQr2","subgroupAccordion":"N3AQr2","subgroup":"pgdZt7","subgroup-title":"a51HcU","subgroupTitle":"a51HcU"};
 
 const renderGroupTitle = (title, amount) => (React__namespace.createElement(FlexRow, { cx: css$p.group },
     React__namespace.createElement(Text, { size: "none", cx: css$p.groupTitle }, title),
@@ -4766,7 +4908,7 @@ const getChildrenAndRest = (row, rows) => {
     return [children, rest];
 };
 
-var css$o = {"listContainer":"Q-Ch6h","header":"AAgchz","group":"VxmsI7","stickyHeader":"J9Tklo"};
+var css$o = {"listContainer":"o3EBCy","header":"YjOVZ0","group":"_2CvL54","stickyHeader":"INY7eh"};
 
 function DataRowsGroup({ row, childRows, renderRow, top = 1, }) {
     const rowRef = React.useRef(undefined);
@@ -4806,7 +4948,7 @@ function DataRowsContainer({ estimatedHeight, listContainerRef, offsetY, rows, r
             React__namespace.default.createElement(DataRowsGroups, { rows: rows, renderRow: renderRow, top: headerRef?.current?.clientHeight }))));
 }
 
-var css$n = {"root":"QyMtkZ","sticky-header":"_0UBG1u","stickyHeader":"_0UBG1u","no-results":"_6oZt0j","noResults":"_6oZt0j","icon":"AzAfuB","title":"vn2Xrj"};
+var css$n = {"root":"tjYSZ7","sticky-header":"v-kz2B","stickyHeader":"v-kz2B","no-results":"BZ2BIi","noResults":"BZ2BIi","icon":"iIx8Y7","title":"_8vR-87"};
 
 function DataTable(props) {
     const { uuiModals } = uuiCore.useUuiContext();
@@ -4855,7 +4997,7 @@ function DataTable(props) {
             : (React__namespace.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, onScroll: props.onScroll, rowsCount: props.rowsCount, renderRows: renderTableBody, cx: classes, isLoading: props.isReloading, rowsSelector: "[role=row]", rawProps: rawProps })))));
 }
 
-var css$m = {"root":"R--cjC","title-wrapper":"l-sDvY","titleWrapper":"l-sDvY","title":"jDkMWZ","text-wrapper":"huVKvh","textWrapper":"huVKvh","selection":"FmpwJ-","postfix":"FoUBhP","selected":"-S9Skk"};
+var css$m = {"root":"Jr6fN7","title-wrapper":"ZpWRnD","titleWrapper":"ZpWRnD","title":"_0ZQ5pw","text-wrapper":"clmXAV","textWrapper":"clmXAV","selection":"_7Ex0VE","postfix":"r6Jk2T","selected":"_8wnXVv"};
 
 const FilterPanelItemToggler = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const togglerPickerOpened = (e) => {
@@ -4954,7 +5096,7 @@ function FilterPickerBody({ highlightSearchMatches = true, ...restProps }) {
             rows,
         }, e);
         return (React__namespace.createElement(React__namespace.Fragment, null,
-            React__namespace.createElement(DataPickerBody, { ...getListProps(), selectionMode: props.selectionMode, rows: rows, maxHeight: maxHeight, maxWidth: maxWidth, searchSize: settings.pickerInput.sizes.body.row, showSearch: props.showSearch ?? true, getName: getName, value: dataSourceState, onValueChange: handleDataSourceValueChange, renderRow: props.renderRow, onKeyDown: onKeyDown, minCharsToSearch: props.minCharsToSearch, searchDebounceDelay: props.searchDebounceDelay, rawProps: props.rawProps?.body, highlightSearchMatches: props.highlightSearchMatches, flattenSearchResults: view.getConfig().flattenSearchResults }),
+            React__namespace.createElement(DataPickerBody, { ...getListProps(), selectionMode: props.selectionMode, rows: rows, maxHeight: maxHeight, maxWidth: maxWidth, searchSize: settings.pickerInput.sizes.body.row, showSearch: props.showSearch ?? true, getName: getName, value: dataSourceState, onValueChange: handleDataSourceValueChange, renderRow: props.renderRow, onKeyDown: onKeyDown, minCharsToSearch: props.minCharsToSearch, searchDebounceDelay: props.searchDebounceDelay, rawProps: props.rawProps?.body, highlightSearchMatches: props.highlightSearchMatches, flattenSearchResults: view.getConfig().flattenSearchResults, autoFocusSearch: false }),
             renderFooter()));
     };
     return renderBody();
@@ -5080,7 +5222,7 @@ function FilterRangeDatePickerBody(props) {
         renderFooter()));
 }
 
-var css$l = {"container":"BU-ui6"};
+var css$l = {"container":"JBPNQI"};
 
 function FilterNumericBody(props) {
     const isInRangePredicate = props?.selectedPredicate === 'inRange' || props?.selectedPredicate === 'notInRange';
@@ -5218,9 +5360,9 @@ function FiltersToolbarItemImpl(props) {
         props.predicates ? (React__namespace.default.createElement(FilterPredicatePanel, { predicates: props.predicates, predicate: predicate, type: props.type, onValueChange: props.onValueChange, value: props.value, setPredicate: setPredicate })) : (!hideTitle && (React__namespace.default.createElement("div", { className: css$s.title }, props.title))),
         !props?.isAlwaysVisible && (React__namespace.default.createElement(LinkButton, { cx: css$s.removeButton, caption: i18n.filterToolbar.datePicker.removeCaption, onClick: removeOnclickHandler, size: settings.filtersPanel.sizes.pickerBodyLinkButton, icon: settings.filtersPanel.icons.pickerBodyRemoveIcon }))));
     const renderBody = (dropdownProps) => {
-        return isPickersType ? (React__namespace.default.createElement(PickerBodyMobileView, { ...dropdownProps, cx: [css$s.body, UUI_FILTERS_PANEL_ITEM_BODY], title: props.title, width: settings.filtersPanel.sizes.pickerBodyMinWidth, onClose: () => isOpenChange(false) },
+        return isPickersType ? (React__namespace.default.createElement(PickerBodyMobileView, { ...dropdownProps, rawProps: { ...dropdownProps.arrowProps, 'aria-modal': true }, cx: [css$s.body, UUI_FILTERS_PANEL_ITEM_BODY], title: props.title, width: settings.filtersPanel.sizes.pickerBodyMinWidth, onClose: () => isOpenChange(false) },
             renderHeader(hideHeaderTitle),
-            React__namespace.default.createElement(FilterItemBody, { ...props, ...dropdownProps, selectedPredicate: predicate, value: getValue(predicate, props.value), onValueChange: onValueChange }))) : (React__namespace.default.createElement(DropdownContainer, { cx: [css$s.body, UUI_FILTERS_PANEL_ITEM_BODY], ...dropdownProps },
+            React__namespace.default.createElement(FilterItemBody, { ...props, ...dropdownProps, selectedPredicate: predicate, value: getValue(predicate, props.value), onValueChange: onValueChange }))) : (React__namespace.default.createElement(DropdownContainer, { cx: [css$s.body, UUI_FILTERS_PANEL_ITEM_BODY], ...dropdownProps, rawProps: { ...dropdownProps.arrowProps, 'aria-modal': true } },
             renderHeader(hideHeaderTitle),
             React__namespace.default.createElement(FilterItemBody, { ...props, ...dropdownProps, selectedPredicate: predicate, value: getValue(predicate, props.value), onValueChange: onValueChange })));
     };
@@ -5391,7 +5533,7 @@ function FiltersToolbarImpl(props) {
 }
 const FiltersPanel = /* @__PURE__ */React__namespace.default.memo(FiltersToolbarImpl);
 
-var css$k = {"delete-button":"xmirER","deleteButton":"xmirER","tab-button":"dzZ4kJ","tabButton":"dzZ4kJ","targetOpen":"uVDrYJ"};
+var css$k = {"delete-button":"OkvPVs","deleteButton":"OkvPVs","tab-button":"mzvBgk","tabButton":"mzvBgk","targetOpen":"Xd8-BI"};
 
 function PresetActionsDropdown(props) {
     const { uuiNotifications } = uuiCore.useUuiContext();
@@ -5467,7 +5609,7 @@ const UUI_PRESETS_PANEL_MORE_BUTTON = 'uui-presets-panel-more-button';
 const UUI_PRESETS_PANEL_INPUT = 'uui-presets-panel-input';
 const UUI_PRESETS_PANEL_PRESET = 'uui-presets-panel-preset';
 
-var css$j = {"preset-input-cell":"X6dfIE","presetInputCell":"X6dfIE","preset-input":"KWCrrV","presetInput":"KWCrrV"};
+var css$j = {"preset-input-cell":"zBtfM-","presetInputCell":"zBtfM-","preset-input":"_8-wJJA","presetInput":"_8-wJJA"};
 
 function PresetInput(props) {
     const [presetCaption, setPresetCaption] = React.useState(props.preset?.name || '');
@@ -5494,7 +5636,7 @@ function PresetInput(props) {
         React__namespace.default.createElement(TextInput, { cx: css$j.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50, isReadonly: readonly })));
 }
 
-var css$i = {"preset":"-uZkrv","activePreset":"op4Qx0"};
+var css$i = {"preset":"Cl35Fz","activePreset":"ywDM3I"};
 
 function Preset(props) {
     const [isRenamePreset, setIsRenamePreset] = React.useState(false);
@@ -5519,7 +5661,7 @@ function Preset(props) {
     return (React__namespace.default.createElement(FlexCell, { key: props.preset.id, alignSelf: "center", width: "auto" }, isRenamePreset ? (React__namespace.default.createElement(PresetInput, { onCancel: cancelRenamePreset, onSuccess: handlePresetRename, preset: props.preset })) : (React__namespace.default.createElement(TabButton, { caption: props.preset.name, onClick: !isPresetActive && choosePresetHandler, cx: [css$i.preset, isPresetActive && css$i.activePreset, UUI_PRESETS_PANEL_PRESET], size: settings.presetsPanel.sizes.tabButton, withNotify: isPresetActive && props.hasPresetChanged(props.preset), icon: PresetActionsDropdownComponent, iconPosition: "right", isActive: isPresetActive }))));
 }
 
-var css$h = {"divider":"_4tDRWz","dropdownDeleteIcon":"FkHpAH","presetsWrapper":"HfQbG6","addPresetContainer":"sAEbnU","dropContainer":"xcIYcQ"};
+var css$h = {"divider":"Pfwr3S","dropdownDeleteIcon":"TEqwSY","presetsWrapper":"JDdEfY","addPresetContainer":"sOjGi2","dropContainer":"FTtAnD"};
 
 function PresetsPanel(props) {
     const [isAddingPreset, setIsAddingPreset] = React.useState(false);
@@ -5568,9 +5710,9 @@ function PresetsPanel(props) {
             React__namespace.default.createElement(uuiComponents.AdaptivePanel, { items: getPanelItems() }))));
 }
 
-var css$g = {"root":"Bx9J8v"};
+var css$g = {"root":"vXX3DP"};
 
-var css$f = {"root":"_2aTpmj","burger-content":"blr-tu","burgerContent":"blr-tu"};
+var css$f = {"root":"mM4fS8","burger-content":"Iip-wm","burgerContent":"Iip-wm"};
 
 var _path$3;
 function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
@@ -5613,7 +5755,7 @@ var SvgNavigationArrowDownOutline = function SvgNavigationArrowDownOutline(props
 };
 var ForwardRef$2 = /*#__PURE__*/React.forwardRef(SvgNavigationArrowDownOutline);
 
-var css$e = {"root":"dkpNIL","button-primary":"iuc9Ll","buttonPrimary":"iuc9Ll","button-secondary":"_6lB3hL","buttonSecondary":"_6lB3hL","hasIcon":"InEgC7","dropdown":"g8DRM9"};
+var css$e = {"root":"aoIEPm","button-primary":"Pdl-O-","buttonPrimary":"Pdl-O-","button-secondary":"irX5AT","buttonSecondary":"irX5AT","hasIcon":"MM3Rem","dropdown":"ad9kUj"};
 
 function applyBurgerButtonMods(props) {
     return [
@@ -5638,13 +5780,13 @@ const BurgerButton = /* @__PURE__ */React__namespace.default.forwardRef((props,
         }, dropdownIcon: ForwardRef$2 }));
 });
 
-var css$d = {"search-input":"na3WgR","searchInput":"na3WgR"};
+var css$d = {"search-input":"oSkSBR","searchInput":"oSkSBR"};
 
 function BurgerSearch(props) {
     return (React__namespace.createElement(uuiComponents.TextInput, { cx: cx__default.default(css$d.searchInput, 'uui-main_menu-burger-search'), iconPosition: "left", icon: ForwardRef$M, placeholder: props.placeholder, value: props.value, onValueChange: props.onValueChange, onCancel: props.onCancel, cancelIcon: props.value && ForwardRef$Q }));
 }
 
-var css$c = {"root":"TVwSBe","group-header":"FVN9mR","groupHeader":"FVN9mR","group-name":"q4fQD0","groupName":"q4fQD0","line":"ohInOl"};
+var css$c = {"root":"Z8MKw1","group-header":"lBb5vZ","groupHeader":"lBb5vZ","group-name":"orLD22","groupName":"orLD22","line":"EkVnP-"};
 
 function BurgerGroupHeader(props) {
     return (React__namespace.createElement("div", { className: cx__default.default(css$c.root, css$c.groupHeader, 'uui-burger-group-header') },
@@ -5652,7 +5794,7 @@ function BurgerGroupHeader(props) {
         React__namespace.createElement("span", { className: css$c.groupName }, props.caption)));
 }
 
-var css$b = {"root":"W-FE93","type-primary":"C20kxK","typePrimary":"C20kxK","type-secondary":"_7QoYDY","typeSecondary":"_7QoYDY"};
+var css$b = {"root":"WSCYgO","type-primary":"izG5lJ","typePrimary":"izG5lJ","type-secondary":"gsjURf","typeSecondary":"gsjURf"};
 
 const MainMenuButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const { type, ...clickableProps } = props;
@@ -5680,7 +5822,7 @@ const MainMenuButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) =
         props.isDropdown && (React__namespace.createElement(uuiComponents.IconContainer, { icon: ForwardRef$P, flipY: props.isOpen }))));
 });
 
-var css$a = {"dropdown-body":"Sbn6kF","dropdownBody":"Sbn6kF"};
+var css$a = {"dropdown-body":"g83vaP","dropdownBody":"g83vaP"};
 
 function MainMenuDropdown(props) {
     const handleEscape = (e, onClose, isOpen) => {
@@ -5688,10 +5830,13 @@ function MainMenuDropdown(props) {
             onClose();
         }
     };
-    return (React__namespace.default.createElement(uuiComponents.Dropdown, { renderTarget: (dropdownProps) => (React__namespace.default.createElement(MainMenuButton, { caption: props.caption, ...dropdownProps, rawProps: props.rawProps, isActive: props.isActive, isDropdown: true })), renderBody: (dropdownBodyProps) => (React__namespace.default.createElement(FocusLock__default.default, { returnFocus: true, persistentFocus: true, lockProps: {
+    return (React__namespace.default.createElement(uuiComponents.Dropdown, { renderTarget: (dropdownProps) => (React__namespace.default.createElement(MainMenuButton, { caption: props.caption, ...dropdownProps, rawProps: {
+                'aria-haspopup': 'menu',
+                ...props.rawProps,
+            }, isActive: props.isActive, isDropdown: true })), renderBody: (dropdownBodyProps) => (React__namespace.default.createElement(FocusLock__default.default, { returnFocus: true, persistentFocus: true, lockProps: {
                 onKeyDown: (e) => handleEscape(e, dropdownBodyProps.onClose, dropdownBodyProps.isOpen),
             } },
-            React__namespace.default.createElement("div", { className: cx__default.default(css$a.dropdownBody, 'uui-main_menu-dropdown', props.cx) }, props.renderBody({ ...dropdownBodyProps })))), placement: "bottom-start" }));
+            React__namespace.default.createElement("div", { className: cx__default.default(css$a.dropdownBody, 'uui-main_menu-dropdown', props.cx), role: "menu" }, props.renderBody({ ...dropdownBodyProps })))), placement: "bottom-start" }));
 }
 
 function applyMainMenuMods() {
@@ -5723,12 +5868,12 @@ var SvgNavigationGlobalMenuOutlineOutline = function SvgNavigationGlobalMenuOutl
 };
 var ForwardRef$1 = /*#__PURE__*/React.forwardRef(SvgNavigationGlobalMenuOutlineOutline);
 
-var css$9 = {"global-menu-btn":"JslM6H","globalMenuBtn":"JslM6H","global-menu-icon":"b3HWPM","globalMenuIcon":"b3HWPM"};
+var css$9 = {"global-menu-btn":"GxtYRl","globalMenuBtn":"GxtYRl","global-menu-icon":"qI7KOq","globalMenuIcon":"qI7KOq"};
 
 const GlobalMenu = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("button", { ref: ref, id: "global_menu_toggle", className: cx__default.default(css$9.globalMenuBtn, props.cx), ...props.rawProps },
     React__namespace.createElement(uuiComponents.IconContainer, { size: 36, icon: ForwardRef$1, cx: css$9.globalMenuIcon }))));
 
-var css$8 = {"container":"fizvnn","open":"ZWSL6o","folding-arrow":"QjgEVb","foldingArrow":"QjgEVb"};
+var css$8 = {"container":"PK5s5K","open":"_--CMyR","folding-arrow":"R2UeDT","foldingArrow":"R2UeDT"};
 
 const MainMenuAvatar = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("button", { ref: ref, className: cx__default.default(css$8.container, props.isDropdown && css$8.dropdown, props.isOpen && css$8.open, props.onClick && uuiCore.uuiMarkers.clickable, props.cx), onClick: props.onClick, ...props.rawProps },
     React__namespace.createElement(uuiComponents.Avatar, { size: "36", img: props.avatarUrl }),
@@ -5736,15 +5881,15 @@ const MainMenuAvatar = /* @__PURE__ */React__namespace.forwardRef((props, ref) =
     props.isDropdown && (React__namespace.createElement("div", null,
         React__namespace.createElement(uuiComponents.IconContainer, { size: 18, icon: ForwardRef$P, flipY: props.isOpen, cx: css$8.foldingArrow }))))));
 
-var css$7 = {"search-input":"_96ClOE","searchInput":"_96ClOE"};
+var css$7 = {"search-input":"PyAbJ7","searchInput":"PyAbJ7"};
 
 const MainMenuSearch = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement(uuiCore.IEditableDebouncer, { ...props, render: (iEditable) => (React__namespace.createElement(uuiComponents.TextInput, { iconPosition: "left", icon: ForwardRef$M, cancelIcon: props.value?.length > 0 && ForwardRef$Q, ...props, ...iEditable, ref: ref, cx: uuiCore.cx(css$7.searchInput, props.cx), ...props.rawProps })) })));
 
-var css$6 = {"container":"_6DEYCV"};
+var css$6 = {"container":"_8jcFV6"};
 
 const MainMenuIcon = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement(IconButton, { ref: ref, icon: props.icon, cx: uuiCore.cx(props.cx, css$6.container), ...props })));
 
-var css$5 = {"root":"UD4xba"};
+var css$5 = {"root":"M7lLFI"};
 
 const Anchor = /* @__PURE__ */uuiCore.withMods(uuiComponents.Anchor, () => [css$5.root]);
 
@@ -5802,7 +5947,7 @@ var SvgFileCloudUploadFill = function SvgFileCloudUploadFill(props, ref) {
 };
 var ForwardRef = /*#__PURE__*/React.forwardRef(SvgFileCloudUploadFill);
 
-var css$4 = {"root":"c5ju2U","drop-start":"_114QVF","dropStart":"_114QVF","drop-over":"oSYNsy","dropOver":"oSYNsy","link":"_1mmrVv","drop-area":"_4jHpBM","dropArea":"_4jHpBM","drop-caption":"RLzs0n","dropCaption":"RLzs0n","icon-blue":"_2we0-q","iconBlue":"_2we0-q"};
+var css$4 = {"root":"sObhr8","drop-start":"_1k1E2E","dropStart":"_1k1E2E","drop-over":"_2f9qQJ","dropOver":"_2f9qQJ","link":"_4q4vVv","drop-area":"D2cItJ","dropArea":"D2cItJ","drop-caption":"UC-LWl","dropCaption":"UC-LWl","icon-blue":"ALwEj-","iconBlue":"ALwEj-"};
 
 function DropSpot(props) {
     const getInfoText = typeof props.infoText === 'string'
@@ -5820,7 +5965,7 @@ function DropSpot(props) {
     return React__namespace.createElement(uuiComponents.DropSpot, { render: renderAttachmentArea, onFilesDropped: props.onUploadFiles });
 }
 
-var css$3 = {"root":"_994kkB"};
+var css$3 = {"root":"cqnPz7"};
 
 const SvgCircleProgress = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const outsetRadius = props.size / 2 - 1;
@@ -5831,7 +5976,7 @@ const SvgCircleProgress = /* @__PURE__ */React__namespace.forwardRef((props, ref
         React__namespace.createElement("circle", { strokeWidth: 1, fill: "transparent", r: outsetRadius, cx: props.size / 2, cy: props.size / 2 })));
 });
 
-var css$2 = {"root":"HIioBH","file-name":"Viin8x","fileName":"Viin8x","default-color":"ctiPRC","defaultColor":"ctiPRC","doc-color":"xHfMWQ","docColor":"xHfMWQ","xls-color":"QICpHh","xlsColor":"QICpHh","pdf-color":"mvjeQS","pdfColor":"mvjeQS","movie-color":"L3qkOq","movieColor":"L3qkOq","img-color":"dFud6U","imgColor":"dFud6U","mov-color":"_8cFs4A","movColor":"_8cFs4A","error-block":"O8mFs-","errorBlock":"O8mFs-","icons-block":"-xczdV","iconsBlock":"-xczdV"};
+var css$2 = {"root":"_3cwuh-","file-name":"_6gnHvs","fileName":"_6gnHvs","default-color":"otwSV0","defaultColor":"otwSV0","doc-color":"_3DPL0n","docColor":"_3DPL0n","xls-color":"NJu6xp","xlsColor":"NJu6xp","pdf-color":"-VxYwF","pdfColor":"-VxYwF","movie-color":"Wr52xo","movieColor":"Wr52xo","img-color":"Bz5e4C","imgColor":"Bz5e4C","mov-color":"w6Twno","movColor":"w6Twno","error-block":"dfEKNZ","errorBlock":"dfEKNZ","icons-block":"NhB8mK","iconsBlock":"NhB8mK"};
 
 const FileCard = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const [isLoadingShow, setIsLoadingShow] = React__namespace.useState(true);
@@ -5913,44 +6058,45 @@ const getRecoveryMessageConfig = () => ({
     'connection-lost': i18n.errorHandler.recoveryMessageConfig['connection-lost'],
     maintenance: i18n.errorHandler.recoveryMessageConfig.maintenance,
     'server-overload': i18n.errorHandler.recoveryMessageConfig['server-overload'],
+    'abort-signal': { title: 'abort signal', subtitle: 'abort signal' },
 });
 const getErrorPageConfig = () => ({
     notFound: {
-        imageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-illustrations/L_Error_404_Monochrome.svg',
-        mobileImageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-illustrations/L_Error_404_Monochrome.svg',
+        imageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-2025/404.svg',
+        mobileImageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-2025/404.svg',
         title: i18n.errorHandler.errorPageConfig.notFound.title,
         subtitle: i18n.errorHandler.errorPageConfig.notFound.subtitle,
     },
     permissionDenied: {
-        imageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-illustrations/L_Error_403_Monochrome.svg',
-        mobileImageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-illustrations/L_Error_403_Monochrome.svg',
+        imageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-2025/403.svg',
+        mobileImageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-2025/403.svg',
         title: i18n.errorHandler.errorPageConfig.permissionDenied.title,
         subtitle: i18n.errorHandler.errorPageConfig.permissionDenied.subtitle,
     },
     serverError: {
-        imageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-illustrations/L_Error_500_Monochrome.svg',
-        mobileImageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-illustrations/L_Error_500_Monochrome.svg',
+        imageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-2025/500.svg',
+        mobileImageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-2025/500.svg',
         title: i18n.errorHandler.errorPageConfig.serverError.title,
         subtitle: i18n.errorHandler.errorPageConfig.serverError.subtitle,
         supportLink: i18n.errorHandler.supportMessage,
     },
     serviceUnavailable: {
-        imageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-illustrations/L_Error_503_Monochrome.svg',
-        mobileImageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-illustrations/L_Error_503_Monochrome.svg',
+        imageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-2025/503.svg',
+        mobileImageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-2025/503.svg',
         title: i18n.errorHandler.errorPageConfig.serviceUnavailable.title,
         subtitle: i18n.errorHandler.errorPageConfig.serviceUnavailable.subtitle,
         supportLink: i18n.errorHandler.supportMessage,
     },
     default: {
-        imageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-illustrations/L_Empty_Monochrome.svg',
-        mobileImageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-illustrations/L_Empty_Monochrome.svg',
+        imageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-2025/Something went wrong.svg',
+        mobileImageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-2025/Something went wrong.svg',
         title: i18n.errorHandler.errorPageConfig.default.title,
         subtitle: i18n.errorHandler.errorPageConfig.default.subtitle,
         supportLink: i18n.errorHandler.supportMessage,
     },
 });
 
-var css$1 = {"container":"sOYAuU"};
+var css$1 = {"container":"ps4eFP"};
 
 const ErrorPage = (props) => {
     const isMobileScreen = uuiCore.isMobile();
@@ -5962,7 +6108,7 @@ const ErrorPage = (props) => {
             props?.supportLink && React__namespace.default.createElement("div", { className: "uui-error-support-link" }, props?.supportLink))));
 };
 
-var css = {"recovery-spinner":"bhxznH","recoverySpinner":"bhxznH","recovery-message":"_9ChxuD","recoveryMessage":"_9ChxuD","modal-blocker":"mEW5sf","modalBlocker":"mEW5sf","modalFadeIn":"gG1KuR"};
+var css = {"recovery-spinner":"l2XbfG","recoverySpinner":"l2XbfG","recovery-message":"-GLWvF","recoveryMessage":"-GLWvF","modal-blocker":"W-r0eV","modalBlocker":"W-r0eV","modalFadeIn":"_5NM4ym"};
 
 function ErrorHandler(props) {
     const { uuiNotifications, uuiModals, uuiApi } = uuiCore.useUuiContext();