@epam/uui 6.1.1-beta.0 → 6.1.1

package/index.esm.js

@@ -1,7 +1,7 @@
 import * as uuiComponents from '@epam/uui-components';
-import { Spinner as Spinner$1, Clickable, IconContainer, RadioInput as RadioInput$1, TextInput as TextInput$1, ControlGroup as ControlGroup$1, NumericInput as NumericInput$1, TextArea as TextArea$1, Dropdown as Dropdown$1, InputAddon as InputAddon$1, Slider as Slider$1, Anchor as Anchor$1, FlexSpacer, Text as Text$1, FlexCell as FlexCell$1, VPanel, ScrollBars as ScrollBars$1, Blocker as Blocker$1, ModalBlocker as ModalBlocker$1, ModalWindow as ModalWindow$1, Snackbar as Snackbar$1, Calendar as Calendar$1, YearSelection, MonthSelection, Day, uuiDaySelection, AvatarStack as AvatarStack$1, Paginator as Paginator$1, DragHandle, Avatar, usePickerModal, handleDataSourceKeyboard, PickerToggler as PickerToggler$1, usePickerInput, usePickerList, DataTableCell as DataTableCell$1, DataTableRow as DataTableRow$1, DataTableCellContainer, DataTableHeaderCell as DataTableHeaderCell$1, DataTableHeaderRow as DataTableHeaderRow$1, useShowSelected, usePickerApi, AdaptivePanel, useColumnsConfiguration, Accordion as Accordion$1, DataTableSelectionProvider, DataTableFocusProvider, Burger as Burger$1, Button as Button$1, DropSpot as DropSpot$1, UploadFileToggler, ErrorCatch } from '@epam/uui-components';
+import { Spinner as Spinner$1, Blocker as Blocker$1, Clickable, IconContainer, RadioInput as RadioInput$1, TextInput as TextInput$1, ControlGroup as ControlGroup$1, NumericInput as NumericInput$1, TextArea as TextArea$1, Dropdown as Dropdown$1, InputAddon as InputAddon$1, Slider as Slider$1, Anchor as Anchor$1, FlexSpacer, Text as Text$1, FlexCell as FlexCell$1, VPanel, ScrollBars as ScrollBars$1, ModalBlocker as ModalBlocker$1, ModalWindow as ModalWindow$1, Snackbar as Snackbar$1, Calendar as Calendar$1, YearSelection, MonthSelection, Day, uuiDaySelection, AvatarStack as AvatarStack$1, Paginator as Paginator$1, DragHandle, Avatar, usePickerModal, handleDataSourceKeyboard, PickerToggler as PickerToggler$1, usePickerInput, usePickerList, DataTableCell as DataTableCell$1, DataTableRow as DataTableRow$1, DataTableCellContainer, DataTableHeaderCell as DataTableHeaderCell$1, DataTableHeaderRow as DataTableHeaderRow$1, useColumnsConfiguration, Accordion as Accordion$1, DataTableSelectionProvider, DataTableFocusProvider, useShowSelected, usePickerApi, AdaptivePanel, Burger as Burger$1, Button as Button$1, DropSpot as DropSpot$1, UploadFileToggler, ErrorCatch } from '@epam/uui-components';
 export { Avatar, DataTableCellContainer, FlexSpacer, IconContainer } from '@epam/uui-components';
-import { withMods, devLogger, uuiElement, cx as cx$1, uuiMarkers, IEditableDebouncer, isFocusReceiverInsideFocusLock, UuiContext, uuiMod, getDir, isEventTargetInsideClickable, directionMode, useVirtualList, useScrollShadows, isMobile, i18n as i18n$1, useUuiContext, usePrevious, mobilePositioning, uuiDataTableHeaderCell, uuiDataTableHeaderGroupCell, useForceUpdate, getSeparatedValue, useArrayDataSource, orderBy, getOrderBetween, DndActor, uuiDndState, useColumnsConfig, uuiScrollShadows, Form as Form$1, useForm as useForm$1, formatBytes, useUuiError } from '@epam/uui-core';
+import { withMods, devLogger, uuiElement, cx as cx$1, uuiMarkers, IEditableDebouncer, isFocusReceiverInsideFocusLock, UuiContext, uuiMod, getDir, isEventTargetInsideClickable, directionMode, useVirtualList, useScrollShadows, isMobile, i18n as i18n$1, useUuiContext, useLayoutEffectSafeForSsr, usePrevious, mobilePositioning, uuiDataTableHeaderCell, uuiDataTableHeaderGroupCell, DndActor, uuiDndState, useColumnsConfig, uuiScrollShadows, useForceUpdate, getSeparatedValue, useArrayDataSource, orderBy, getOrderBetween, Form as Form$1, useForm as useForm$1, formatBytes, useUuiError } from '@epam/uui-core';
 import * as React from 'react';
 import React__default, { forwardRef, useState, useEffect, useContext, useRef, useReducer, useMemo, useImperativeHandle, useCallback, Fragment } from 'react';
 import cx from 'classnames';
@@ -151,7 +151,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
   }, props), /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#v2wk6w47wlehc5gfj_a)"
+    clipPath: "url(#9l7x0xu2fje5j0bij_a)"
   }, _path$I || (_path$I = /*#__PURE__*/React.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"
@@ -172,7 +172,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.createElement("mask", {
-    id: "v2wk6wjtsr4fftw2l_b",
+    id: "9l7x0xtlqfqu58qx_b",
     style: {
       maskType: "alpha"
     },
@@ -185,7 +185,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.createElement("g", {
-    mask: "url(#v2wk6wjtsr4fftw2l_b)",
+    mask: "url(#9l7x0xtlqfqu58qx_b)",
     fillRule: "evenodd",
     clipRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
@@ -271,7 +271,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.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "v2wk6w47wlehc5gfj_a"
+    id: "9l7x0xu2fje5j0bij_a"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "#fff",
     transform: "translate(.552)",
@@ -922,14 +922,14 @@ var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
 };
 var ForwardRef$4 = /*#__PURE__*/forwardRef(SvgSearchWithBackground);
 
-var css$1w = {"root":"KtfPbX","uui-spinner":"JrR98L","uuiSpinner":"JrR98L"};
+var css$1w = {"root":"lpoilb","uui-spinner":"sVDjSB","uuiSpinner":"sVDjSB"};
 
 function applySpinnerMods() {
     return [css$1w.root, 'uui-spinner'];
 }
 const Spinner = /* @__PURE__ */withMods(Spinner$1, applySpinnerMods);
 
-var css$1v = {"root":"H39cah","loading-word":"T2TcV9","loadingWord":"T2TcV9","animated-loading":"eJXzsu","animatedLoading":"eJXzsu","skeleton_loading":"yct4NW","skeletonLoading":"yct4NW"};
+var css$1v = {"root":"FBLOc0","loading-word":"JkZzdB","loadingWord":"JkZzdB","animated-loading":"lFlRHo","animatedLoading":"lFlRHo","skeleton_loading":"hbp-Uz","skeletonLoading":"hbp-Uz"};
 
 const TextPlaceholder = (props) => {
     const pattern = ' ';
@@ -946,7 +946,7 @@ const TextPlaceholder = (props) => {
         ]), dangerouslySetInnerHTML: { __html: it } })))));
 };
 
-var css$1u = {"root":"vRTzRd","line-height":"mG9eYn","lineHeight":"mG9eYn","font-size":"B-pWsa","fontSize":"B-pWsa"};
+var css$1u = {"root":"rBUWga","line-height":"nrY8nN","lineHeight":"nrY8nN","font-size":"_4UQjff","fontSize":"_4UQjff"};
 
 function applyTextMods(mods) {
     return [
@@ -973,6 +973,10 @@ const Text = /* @__PURE__ */withMods(uuiComponents.Text, applyTextMods, (props)
     };
 });
 
+var css$1t = {"root":"Dx6fgP"};
+
+const Blocker = /* @__PURE__ */withMods(Blocker$1, () => [css$1t.root], () => ({ renderSpinner: settings.blocker.renderSpinner }));
+
 const accordionSettings = {
     icons: {
         dropdownIcon: ForwardRef$P,
@@ -1234,6 +1238,7 @@ const paginatorSettings = {
 const pickerInputSettings = {
     renderPlaceholder: (props) => React__default.createElement(Text, { size: props.rowSize },
         React__default.createElement(TextPlaceholder, null)),
+    renderBlocker: (props) => React__default.createElement(Blocker, { isEnabled: props.isLoading }),
     icons: {
         toggler: {
             clearIcon: ForwardRef$Q,
@@ -1456,11 +1461,11 @@ const settings = {
     textInput: textInputSettings,
 };
 
-var css$1t = {"root":"NuYi4-"};
+var css$1s = {"root":"LvZsFX"};
 
 function applyButtonMods(mods) {
     return [
-        css$1t.root,
+        css$1s.root,
         'uui-button',
         `uui-fill-${mods.fill || 'solid'}`,
         `uui-color-${mods.color || 'primary'}`,
@@ -1474,10 +1479,10 @@ const Button = /* @__PURE__ */withMods(uuiComponents.Button, applyButtonMods, ()
     };
 });
 
-var css$1s = {"root":"PHApNj"};
+var css$1r = {"root":"WMMKMw"};
 
 function applyIconButtonMods(props) {
-    return ['uui-icon_button', `uui-color-${props.color || 'neutral'}`, css$1s.root];
+    return ['uui-icon_button', `uui-color-${props.color || 'neutral'}`, css$1r.root];
 }
 const IconButton = /* @__PURE__ */withMods(uuiComponents.IconButton, applyIconButtonMods, (props) => {
     const isDeprecated = ['info', 'success', 'error', 'warning'].includes(props.color);
@@ -1511,7 +1516,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$1r = {"root":"gPFka3"};
+var css$1q = {"root":"s1p-zs"};
 
 const DEFAULT_COLOR = 'primary';
 const LinkButton = /* @__PURE__ */React.forwardRef((props, ref) => {
@@ -1526,7 +1531,7 @@ const LinkButton = /* @__PURE__ */React.forwardRef((props, ref) => {
     }
     const rootStyles = [
         'uui-link_button',
-        css$1r.root,
+        css$1q.root,
         `uui-size-${props.size || settings.linkButton.sizes.default}`,
         ...getIconClass(props),
         `uui-color-${props.color || DEFAULT_COLOR}`,
@@ -1541,11 +1546,11 @@ const LinkButton = /* @__PURE__ */React.forwardRef((props, ref) => {
         props.isDropdown && (React.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$1q = {"root":"X-037P"};
+var css$1p = {"root":"Vt0Fr-"};
 
 const CountIndicator = /* @__PURE__ */forwardRef((props, ref) => {
     return (React__default.createElement("div", { ref: ref, className: cx([
-            css$1q.root,
+            css$1p.root,
             'uui-count_indicator',
             `uui-size-${props.size || settings.countIndicator.sizes.default}`,
             props.color && `uui-color-${props.color}`,
@@ -1553,11 +1558,11 @@ const CountIndicator = /* @__PURE__ */forwardRef((props, ref) => {
         ]) }, props.caption));
 });
 
-var css$1p = {"root":"_4u-AQs","withNotify":"BlFXS5"};
+var css$1o = {"root":"_0K-UIR","withNotify":"_5LYwFT"};
 
 const TabButton = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     const styles = [
-        css$1p.root,
+        css$1o.root,
         'uui-tab-button',
         `uui-size-${props.size || settings.tabButton.sizes.default}`,
         ...getIconClass(props),
@@ -1574,25 +1579,25 @@ const TabButton = /* @__PURE__ */React__default.forwardRef((props, ref) => {
         props.icon && props.iconPosition !== 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
         (props.caption || props.withNotify) && (React__default.createElement("div", { className: cx$1(uuiElement.caption) },
             props.caption,
-            props.withNotify && React__default.createElement("div", { className: css$1p.withNotify }))),
+            props.withNotify && React__default.createElement("div", { className: css$1o.withNotify }))),
         props.icon && props.iconPosition === 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
         props.count !== undefined && props.count !== null && (React__default.createElement(CountIndicator, { color: "neutral", size: settings.tabButton.sizes.countIndicatorMap[props.size || settings.tabButton.sizes.default], caption: props.count })),
         props.isDropdown && (React__default.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen })),
         props.onClear && !props.isDisabled && (React__default.createElement(IconContainer, { cx: uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
 });
 
-var css$1o = {"root":"NLxraJ"};
+var css$1n = {"root":"aJjlD6"};
 
 function applyVerticalTabButtonMods() {
-    return [css$1o.root, 'uui-vertical-tab-button'];
+    return [css$1n.root, 'uui-vertical-tab-button'];
 }
 const VerticalTabButton = /* @__PURE__ */withMods(TabButton, applyVerticalTabButtonMods);
 
-var css$1n = {"root":"WrIDRo"};
+var css$1m = {"root":"iSN8ad"};
 
 function applyCheckboxMods(mods) {
     return [
-        css$1n.root,
+        css$1m.root,
         `uui-size-${mods.size || settings.checkbox.sizes.default}`,
         'uui-control-mode-' + (mods.mode || 'form'),
         'uui-color-primary',
@@ -1606,11 +1611,11 @@ const applyUUICheckboxProps = (props) => {
 };
 const Checkbox = /* @__PURE__ */withMods(uuiComponents.Checkbox, applyCheckboxMods, applyUUICheckboxProps);
 
-var css$1m = {"root":"_4BWBUS"};
+var css$1l = {"root":"ZD-bnJ"};
 
 function applyRadioInputMods(mods) {
     return [
-        css$1m.root,
+        css$1l.root,
         `uui-size-${mods.size || settings.radioInput.sizes.default}`,
         'uui-radio-input-container',
         'uui-color-primary',
@@ -1618,11 +1623,11 @@ function applyRadioInputMods(mods) {
 }
 const RadioInput = /* @__PURE__ */withMods(RadioInput$1, applyRadioInputMods, (props) => ({ icon: props.icon ? props.icon : settings.radioInput.icons.dotIcon }));
 
-var css$1l = {"root":"GfuBqT"};
+var css$1k = {"root":"fwp9WK"};
 
 function applySwitchMods(mods) {
     return [
-        css$1l.root,
+        css$1k.root,
         `uui-size-${mods.size || settings.switch.sizes.default}`,
         'uui-color-primary',
     ];
@@ -1642,7 +1647,7 @@ var EditMode;
     EditMode["INLINE"] = "inline";
 })(EditMode || (EditMode = {}));
 
-var textInputCss = {"root":"dRLyQh"};
+var textInputCss = {"root":"jiu2Fc"};
 
 const DEFAULT_MODE$3 = EditMode.FORM;
 function applyTextInputMods(mods) {
@@ -1667,9 +1672,9 @@ const SearchInput = /* @__PURE__ */React__default.forwardRef((props, ref) => {
         } }));
 });
 
-var css$1k = {"root":"CZmqPI"};
+var css$1j = {"root":"ItDOGS"};
 
-const ControlGroup = /* @__PURE__ */withMods(ControlGroup$1, () => [css$1k.root, 'uui-control-group']);
+const ControlGroup = /* @__PURE__ */withMods(ControlGroup$1, () => [css$1j.root, 'uui-control-group']);
 
 function MultiSwitchComponent(props, ref) {
     return (React.createElement(ControlGroup, { ref: ref, rawProps: {
@@ -1683,13 +1688,13 @@ function MultiSwitchComponent(props, ref) {
 }
 const MultiSwitch = /* @__PURE__ */React.forwardRef(MultiSwitchComponent);
 
-var css$1j = {"root":"yJrD-9"};
+var css$1i = {"root":"oKS3F5"};
 
 const DEFAULT_MODE$2 = EditMode.FORM;
 function applyNumericInputMods(mods) {
     return [
         textInputCss.root,
-        css$1j.root,
+        css$1i.root,
         `uui-size-${mods.size || settings.numericInput.sizes.default}`,
         'uui-control-mode-' + (mods.mode || DEFAULT_MODE$2),
     ];
@@ -1703,12 +1708,12 @@ const NumericInput = /* @__PURE__ */withMods(NumericInput$1, applyNumericInputMo
     };
 });
 
-var css$1i = {"root":"_8raT3o"};
+var css$1h = {"root":"MSTlg8"};
 
 const DEFAULT_MODE$1 = EditMode.FORM;
 function applyTextAreaMods(mods) {
     return [
-        css$1i.root,
+        css$1h.root,
         'uui-textarea',
         'uui-size-' + (mods.size || settings.textArea.sizes.default),
         'uui-control-mode-' + (mods.mode || DEFAULT_MODE$1),
@@ -1744,18 +1749,18 @@ function TREE_SHAKEABLE_INIT$1() {
     };
 }
 
-var css$1h = {"root":"hyUzMy"};
+var css$1g = {"root":"Fj-MkA"};
 
 function applyDropdownContainerMods(mods) {
     return [
-        css$1h.root,
+        css$1g.root,
         mods.vPadding && `vPadding-${mods.vPadding}`,
         mods.padding && `padding-${mods.padding}`,
     ];
 }
 const DropdownContainer = /* @__PURE__ */withMods(uuiComponents.DropdownContainer, applyDropdownContainerMods);
 
-var css$1g = {"root":"Ju6xVU","timepicker-input":"Xw-Zqg","timepickerInput":"Xw-Zqg","ltr-always":"gT-D8O","ltrAlways":"gT-D8O"};
+var css$1f = {"root":"YCSBR1","timepicker-input":"FVJor4","timepickerInput":"FVJor4","ltr-always":"_8Ogt91","ltrAlways":"_8Ogt91"};
 
 const uuiTimePicker = {
     container: 'uui-timepicker-container',
@@ -1794,8 +1799,8 @@ function TimePickerBody(props) {
         const minutesToSubtract = value.minute() % minutesStep === 0 ? minutesStep : value.minute() % minutesStep;
         onMinutesChange(value.subtract(minutesToSubtract, 'm').minute());
     };
-    return (React.createElement("div", { className: cx$1(css$1g.root, uuiTimePicker.container, props.cx), ref: props.forwardedRef, ...props.rawProps },
-        React.createElement("div", { className: css$1g.ltrAlways },
+    return (React.createElement("div", { className: cx$1(css$1f.root, uuiTimePicker.container, props.cx), ref: props.forwardedRef, ...props.rawProps },
+        React.createElement("div", { className: css$1f.ltrAlways },
             React.createElement("div", { className: uuiTimePicker.elementContainer },
                 React.createElement(IconContainer, { size: 18, rawProps: { 'aria-label': 'Increment hours' }, cx: uuiTimePicker.iconUp, icon: ForwardRef$P, onClick: () => onHoursChange(uuiDayjs.dayjs().set(props.value).add(1, 'h').hour()) }),
                 React.createElement(NumericInput$1, { cx: uuiTimePicker.input, onValueChange: onHoursChange, value: +(uuiDayjs.dayjs()
@@ -1938,7 +1943,7 @@ function TimePickerComponent(props, ref) {
         state.value && state.inputValue && saveTime(state.value);
     };
     const renderInput = (inputProps) => {
-        return (React__default.createElement(TextInput, { ...inputProps, onClick: null, size: props.size, isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, cx: [css$1g.root, css$1g.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__default.createElement(TextInput, { ...inputProps, onClick: null, size: props.size, isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, cx: [css$1f.root, css$1f.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 }));
     };
     const renderBody = (bodyProps) => {
         const { forwardedRef, onValueChange, ...timePickerBodyProps } = props;
@@ -1949,37 +1954,37 @@ function TimePickerComponent(props, ref) {
 }
 const TimePicker = /* @__PURE__ */React__default.forwardRef(TimePickerComponent);
 
-var css$1f = {"root":"BgZoLW"};
+var css$1e = {"root":"naMHF1"};
 
 function applyInputAddonMods() {
     return [
-        css$1f.root,
+        css$1e.root,
     ];
 }
 const InputAddon = /* @__PURE__ */withMods(InputAddon$1, applyInputAddonMods);
 
-var css$1e = {"root":"OLHPbm"};
+var css$1d = {"root":"_0zIzP8"};
 
 function applySliderMods() {
-    return [css$1e.root, 'uui-color-neutral'];
+    return [css$1d.root, 'uui-color-neutral'];
 }
 const Slider = /* @__PURE__ */withMods(Slider$1, applySliderMods);
 
-var css$1d = {"root":"vvutu6"};
+var css$1c = {"root":"wVtZ9H"};
 
 function applyTooltipMods(mods) {
     return [
-        css$1d.root,
+        css$1c.root,
         `uui-color-${mods.color || 'inverted'}`,
     ];
 }
 const Tooltip = /* @__PURE__ */withMods(uuiComponents.Tooltip, applyTooltipMods);
 
-var css$1c = {"root":"-PNieQ","tooltip":"RR7IDO"};
+var css$1b = {"root":"iWGNyF","tooltip":"IM7BGh"};
 
 function applyRatingMods(mods) {
     return [
-        css$1c.root,
+        css$1b.root,
         `uui-size-${mods.size || settings.rating.sizes.default}`,
     ];
 }
@@ -1989,17 +1994,17 @@ const Rating = /* @__PURE__ */withMods(uuiComponents.Rating, applyRatingMods, (p
     Tooltip,
 }));
 
-var css$1b = {"root":"O5DwH-","main-path":"u-iZd1","mainPath":"u-iZd1","content-wrapper":"M3hvaW","contentWrapper":"M3hvaW","content":"SrMRs4","action-wrapper":"UjARAi","actionWrapper":"UjARAi","icon-wrapper":"g0drrs","iconWrapper":"g0drrs","icon":"S5oV3L","close-icon":"F1T40l","closeIcon":"F1T40l"};
+var css$1a = {"root":"qoPWPH","main-path":"P5D2sx","mainPath":"P5D2sx","content-wrapper":"FTPp2R","contentWrapper":"FTPp2R","content":"KBzuJ-","action-wrapper":"NFl92L","actionWrapper":"NFl92L","icon-wrapper":"SJzPzb","iconWrapper":"SJzPzb","icon":"C60jAv","close-icon":"e5AYJU","closeIcon":"e5AYJU"};
 
-const Alert = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement("div", { role: "alert", ref: ref, className: cx('uui-alert', css$1b.root, props.color && `uui-color-${props.color}`, props.cx, `uui-size-${props.size || settings.alert.sizes.default}`), ...props.rawProps },
-    React.createElement("div", { className: css$1b.mainPath },
-        React.createElement("div", { className: css$1b.contentWrapper },
-            props.icon && (React.createElement("div", { className: css$1b.iconWrapper },
-                React.createElement(IconContainer, { icon: props.icon, cx: css$1b.icon }))),
-            React.createElement("div", { className: css$1b.content },
+const Alert = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement("div", { role: "alert", ref: ref, className: cx('uui-alert', css$1a.root, props.color && `uui-color-${props.color}`, props.cx, `uui-size-${props.size || settings.alert.sizes.default}`), ...props.rawProps },
+    React.createElement("div", { className: css$1a.mainPath },
+        React.createElement("div", { className: css$1a.contentWrapper },
+            props.icon && (React.createElement("div", { className: css$1a.iconWrapper },
+                React.createElement(IconContainer, { icon: props.icon, cx: css$1a.icon }))),
+            React.createElement("div", { className: css$1a.content },
                 props.children,
-                props.actions && (React.createElement("div", { className: css$1b.actionWrapper }, props.actions.map((action) => (React.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$1b.actionLink, size: settings.alert.sizes.actionMap[props.size || settings.alert.sizes.default] }))))))),
-        props.onClose && React.createElement(IconButton, { icon: settings.alert.icons.closeIcon, color: "neutral", onClick: props.onClose, cx: css$1b.closeIcon })))));
+                props.actions && (React.createElement("div", { className: css$1a.actionWrapper }, props.actions.map((action) => (React.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$1a.actionLink, size: settings.alert.sizes.actionMap[props.size || settings.alert.sizes.default] }))))))),
+        props.onClose && React.createElement(IconButton, { icon: settings.alert.icons.closeIcon, color: "neutral", onClick: props.onClose, cx: css$1a.closeIcon })))));
 const WarningAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createElement(Alert, { icon: settings.alert.icons.warningIcon, color: "warning", ref: ref, ...props }));
 const SuccessAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createElement(Alert, { icon: settings.alert.icons.successIcon, color: "success", ref: ref, ...props }));
 const HintAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createElement(Alert, { icon: settings.alert.icons.infoIcon, color: "info", ref: ref, ...props }));
@@ -2007,7 +2012,7 @@ const ErrorAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createE
 
 const Dropdown = /* @__PURE__ */withMods(Dropdown$1);
 
-var css$1a = {"submenu-root-item-rtl":"f15SRe","submenuRootItemRtl":"f15SRe","icon-after":"gi35-Q","iconAfter":"gi35-Q","submenu-root-item":"eWn4X-","submenuRootItem":"eWn4X-","icon-check":"-frNN-","iconCheck":"-frNN-","splitter-root":"eJ2t7t","splitterRoot":"eJ2t7t","splitter":"CnUioI","header-root":"_71V8Dt","headerRoot":"_71V8Dt","item-root":"OSTm5D","itemRoot":"OSTm5D","icon":"biEMb6","link":"irzMXQ","indent":"K4mvIF","selected-mark":"aXpl6-","selectedMark":"aXpl6-"};
+var css$19 = {"submenu-root-item-rtl":"_0k5n5A","submenuRootItemRtl":"_0k5n5A","icon-after":"U6bpFN","iconAfter":"U6bpFN","submenu-root-item":"_1HjPKu","submenuRootItem":"_1HjPKu","icon-check":"GFnONx","iconCheck":"GFnONx","splitter-root":"rqIhmo","splitterRoot":"rqIhmo","splitter":"_575uFj","header-root":"vTb1P9","headerRoot":"vTb1P9","item-root":"sZMvs-","itemRoot":"sZMvs-","icon":"tGfVOG","link":"dYJqbl","indent":"NMqowm","selected-mark":"t-yjP2","selectedMark":"t-yjP2"};
 
 var IDropdownControlKeys;
 (function (IDropdownControlKeys) {
@@ -2072,29 +2077,29 @@ const DropdownMenuButton = /* @__PURE__ */React__default.forwardRef((props, ref)
     const getMenuButtonContent = () => {
         const isIconBefore = Boolean(icon && iconPosition !== 'right');
         const isIconAfter = Boolean(icon && iconPosition === 'right');
-        const iconElement = (React__default.createElement(IconButton, { icon: icon, color: isActive ? 'primary' : 'neutral', onClick: onIconClick, isDisabled: isDisabled, cx: cx$1(css$1a.icon, iconPosition === 'right' ? css$1a.iconAfter : css$1a.iconBefore) }));
+        const iconElement = (React__default.createElement(IconButton, { icon: icon, color: isActive ? 'primary' : 'neutral', onClick: onIconClick, isDisabled: isDisabled, cx: cx$1(css$19.icon, iconPosition === 'right' ? css$19.iconAfter : css$19.iconBefore) }));
         return (React__default.createElement(React__default.Fragment, null,
             isIconBefore && iconElement,
-            React__default.createElement(Text$1, { cx: props.indent && css$1a.indent }, caption),
+            React__default.createElement(Text$1, { cx: props.indent && css$19.indent }, caption),
             isIconAfter && (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(FlexSpacer, null),
                 iconElement))));
     };
     const isAnchor = Boolean(link || href);
-    const itemClassNames = cx$1(props.cx, css$1a.itemRoot, isDisabled && uuiMod.disabled, isActive && uuiMod.active, isOpen && uuiMod.opened, (!isDisabled && onClick) && uuiMarkers.clickable);
-    return isAnchor ? (React__default.createElement(Anchor$1, { cx: cx$1(css$1a.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0 }, onClick: handleClick, isLinkActive: isActive, isDisabled: isDisabled, target: target }, getMenuButtonContent())) : (React__default.createElement("div", { tabIndex: isDisabled ? -1 : 0, role: "menuitem", onKeyDown: isDisabled ? null : handleOpenDropdown, className: itemClassNames, onClick: handleClick, ref: ref },
+    const itemClassNames = cx$1(props.cx, css$19.itemRoot, isDisabled && uuiMod.disabled, isActive && uuiMod.active, isOpen && uuiMod.opened, (!isDisabled && onClick) && uuiMarkers.clickable);
+    return isAnchor ? (React__default.createElement(Anchor$1, { cx: cx$1(css$19.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0 }, onClick: handleClick, isLinkActive: isActive, isDisabled: isDisabled, target: target }, getMenuButtonContent())) : (React__default.createElement("div", { tabIndex: isDisabled ? -1 : 0, role: "menuitem", onKeyDown: isDisabled ? null : handleOpenDropdown, className: itemClassNames, onClick: handleClick, ref: ref },
         getMenuButtonContent(),
         isSelected && (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(FlexSpacer, null),
-            React__default.createElement(IconContainer, { icon: settings.dropdownMenu.icons.acceptIcon, cx: css$1a.selectedMark })))));
+            React__default.createElement(IconContainer, { icon: settings.dropdownMenu.icons.acceptIcon, cx: css$19.selectedMark })))));
 });
 function DropdownMenuSplitter(props) {
-    return (React__default.createElement("div", { className: cx$1(props.cx, css$1a.splitterRoot) },
-        React__default.createElement("hr", { className: css$1a.splitter })));
+    return (React__default.createElement("div", { className: cx$1(props.cx, css$19.splitterRoot) },
+        React__default.createElement("hr", { className: css$19.splitter })));
 }
 function DropdownMenuHeader(props) {
-    return (React__default.createElement("div", { className: cx$1('uui-dropdown-menu-header', props.cx, css$1a.headerRoot) },
-        React__default.createElement("span", { className: css$1a.header }, props.caption)));
+    return (React__default.createElement("div", { className: cx$1('uui-dropdown-menu-header', props.cx, css$19.headerRoot) },
+        React__default.createElement("span", { className: css$19.header }, props.caption)));
 }
 function DropdownSubMenu(props) {
     const subMenuMiddleware = [
@@ -2109,7 +2114,7 @@ function DropdownSubMenu(props) {
         }),
     ];
     const isRtl = getDir() === 'rtl';
-    return (React__default.createElement(Dropdown$1, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", openDelay: 400, closeDelay: 400, placement: isRtl ? 'left-start' : 'right-start', middleware: subMenuMiddleware, renderBody: (dropdownProps) => !props.isDisabled && (React__default.createElement(DropdownMenuBody, { closeOnKey: IDropdownControlKeys.LEFT_ARROW, ...props, ...dropdownProps })), renderTarget: ({ toggleDropdownOpening, ...targetProps }) => (React__default.createElement(DropdownMenuButton, { cx: cx$1(isRtl ? css$1a.submenuRootItemRtl : css$1a.submenuRootItem), icon: settings.dropdownMenu.icons.dropdownIcon, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening, ...props, ...targetProps })) }));
+    return (React__default.createElement(Dropdown$1, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", openDelay: 400, closeDelay: 400, placement: isRtl ? 'left-start' : 'right-start', middleware: subMenuMiddleware, renderBody: (dropdownProps) => !props.isDisabled && (React__default.createElement(DropdownMenuBody, { closeOnKey: IDropdownControlKeys.LEFT_ARROW, ...props, ...dropdownProps })), renderTarget: ({ toggleDropdownOpening, ...targetProps }) => (React__default.createElement(DropdownMenuButton, { cx: cx$1(isRtl ? css$19.submenuRootItemRtl : css$19.submenuRootItem), icon: settings.dropdownMenu.icons.dropdownIcon, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening, ...props, ...targetProps })) }));
 }
 function DropdownMenuSwitchButton(props) {
     const context = useContext(UuiContext);
@@ -2125,29 +2130,29 @@ function DropdownMenuSwitchButton(props) {
             onHandleValueChange(!isSelected);
         }
     };
-    return (React__default.createElement("div", { className: cx$1(props.cx, css$1a.itemRoot, isDisabled && uuiMod.disabled, (!isDisabled || onValueChange) && uuiMarkers.clickable), onClick: () => onHandleValueChange(!isSelected), role: "menuitem", onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 },
-        icon && React__default.createElement(IconContainer, { icon: icon, cx: css$1a.iconBefore }),
+    return (React__default.createElement("div", { className: cx$1(props.cx, css$19.itemRoot, isDisabled && uuiMod.disabled, (!isDisabled || onValueChange) && uuiMarkers.clickable), onClick: () => onHandleValueChange(!isSelected), role: "menuitem", onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 },
+        icon && React__default.createElement(IconContainer, { icon: icon, cx: css$19.iconBefore }),
         React__default.createElement(Text$1, null, caption),
         React__default.createElement(FlexSpacer, null),
         React__default.createElement(Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange })));
 }
 
-var css$19 = {"root":"kX3uow","mode-block":"ZS8yqT","modeBlock":"ZS8yqT","mode-inline":"h2hFOF","modeInline":"h2hFOF","padding-0":"gHajJ-","padding0":"gHajJ-","padding-6":"qE3jQ-","padding6":"qE3jQ-","padding-12":"VPyF3q","padding12":"VPyF3q","padding-18":"jWhxOY","padding18":"jWhxOY"};
+var css$18 = {"root":"Smkgw7","mode-block":"K-zqEM","modeBlock":"K-zqEM","mode-inline":"ca8Lhn","modeInline":"ca8Lhn","padding-0":"OXJ-iI","padding0":"OXJ-iI","padding-6":"_3QiAmD","padding6":"_3QiAmD","padding-12":"S2IS6q","padding12":"S2IS6q","padding-18":"_43VsVy","padding18":"_43VsVy"};
 
 function applyAccordionMods(mods) {
     return [
-        css$19.root,
-        css$19[`mode-${mods.mode || 'block'}`],
-        mods.padding && css$19['padding-' + mods.padding],
+        css$18.root,
+        css$18[`mode-${mods.mode || 'block'}`],
+        mods.padding && css$18['padding-' + mods.padding],
     ];
 }
 const Accordion = /* @__PURE__ */withMods(uuiComponents.Accordion, applyAccordionMods, (mods) => ({
     dropdownIcon: mods.dropdownIcon !== null && settings.accordion.icons.dropdownIcon,
 }));
 
-var css$18 = {"root":"_7wK-Oo","align-items":"dVjC-K","alignItems":"dVjC-K","justify-content":"uSqYUm","justifyContent":"uSqYUm","border-top":"_4V-rz0","borderTop":"_4V-rz0","border-bottom":"_40EY-m","borderBottom":"_40EY-m","top-shadow":"zBnH7-","topShadow":"zBnH7-","padding":"fZZq-S","margin":"_3nbLv3","vPadding":"jlEI5l","column-gap":"FQZ1O2","columnGap":"FQZ1O2","row-gap":"HVkz-Z","rowGap":"HVkz-Z","spacing":"oysLiL"};
+var css$17 = {"root":"Bb0cNr","align-items":"RUG07H","alignItems":"RUG07H","justify-content":"of19Mn","justifyContent":"of19Mn","border-top":"jTKQxS","borderTop":"jTKQxS","border-bottom":"_93XWek","borderBottom":"_93XWek","top-shadow":"X3Lzqv","topShadow":"X3Lzqv","padding":"oDhIbS","margin":"TggVlR","vPadding":"LUyMRi","column-gap":"tzvI-H","columnGap":"tzvI-H","row-gap":"v2TPYz","rowGap":"v2TPYz","spacing":"GDKene"};
 
-const FlexCell = /* @__PURE__ */withMods(FlexCell$1, () => [css$18.flexCell]);
+const FlexCell = /* @__PURE__ */withMods(FlexCell$1, () => [css$17.flexCell]);
 
 const FlexRow = /* @__PURE__ */forwardRef((props, ref) => {
     if (process.env.NODE_ENV !== "production") {
@@ -2156,22 +2161,22 @@ const FlexRow = /* @__PURE__ */forwardRef((props, ref) => {
         }
     }
     const classNames = cx$1([
-        css$18.root,
+        css$17.root,
         'uui-flex-row',
         props.onClick && uuiMarkers.clickable,
         props.cx,
         props.size !== null && 'uui-size-' + (props.size || settings.flexRow.sizes.default),
-        props.alignItems && css$18.alignItems,
-        props.justifyContent && css$18.justifyContent,
-        props.padding && css$18.padding,
-        props.vPadding && css$18.vPadding,
-        props.margin && css$18.margin,
-        props.topShadow && css$18.topShadow,
-        props.borderBottom && css$18.borderBottom,
-        props.borderTop && css$18.borderTop,
-        props.columnGap && css$18.columnGap,
-        props.rowGap && css$18.rowGap,
-        props.spacing && css$18.spacing,
+        props.alignItems && css$17.alignItems,
+        props.justifyContent && css$17.justifyContent,
+        props.padding && css$17.padding,
+        props.vPadding && css$17.vPadding,
+        props.margin && css$17.margin,
+        props.topShadow && css$17.topShadow,
+        props.borderBottom && css$17.borderBottom,
+        props.borderTop && css$17.borderTop,
+        props.columnGap && css$17.columnGap,
+        props.rowGap && css$17.rowGap,
+        props.spacing && css$17.spacing,
         props.background && `uui-flex-row-bg-${props.background}`,
     ]);
     let alignItemsValue = props.alignItems;
@@ -2197,22 +2202,22 @@ const FlexRow = /* @__PURE__ */forwardRef((props, ref) => {
         } }, props.children));
 });
 
-var css$17 = {"root":"-jcuN3","margin-24":"fFvJXu","margin24":"fFvJXu","padding-12":"yjx9Nv","padding12":"yjx9Nv","padding-24":"NL7aOM","padding24":"NL7aOM","shadow":"Pm1nGz","uui-surface-main":"ofnPE0","uuiSurfaceMain":"ofnPE0"};
+var css$16 = {"root":"b4MALG","margin-24":"MeaDaG","margin24":"MeaDaG","padding-12":"ocyyUU","padding12":"ocyyUU","padding-24":"_4iLZ83","padding24":"_4iLZ83","shadow":"Qk4GUe","uui-surface-main":"aKcOAp","uuiSurfaceMain":"aKcOAp"};
 
 const Panel = /* @__PURE__ */withMods(VPanel, (props) => [
     'uui-panel',
-    css$17.root,
-    props.shadow && css$17.shadow,
-    props.margin && css$17['margin-' + props.margin],
-    props.background && css$17[`uui-${props.background}`],
+    css$16.root,
+    props.shadow && css$16.shadow,
+    props.margin && css$16['margin-' + props.margin],
+    props.background && css$16[`uui-${props.background}`],
 ]);
 
-var css$16 = {"root":"lvgrzV"};
+var css$15 = {"root":"enVw7n"};
 
 function applyLabeledInputMods(mods) {
     return [
         'uui-labeled-input',
-        css$16.root,
+        css$15.root,
         'uui-size-' + (mods.size || settings.labeledInput.sizes.default),
     ];
 }
@@ -2224,7 +2229,7 @@ function applyLabeledInputProps(props) {
 }
 const LabeledInput = /* @__PURE__ */withMods(uuiComponents.LabeledInput, applyLabeledInputMods, applyLabeledInputProps);
 
-var css$15 = {"root":"_1DAPxt"};
+var css$14 = {"root":"LMv-XN"};
 
 function RadioGroup(props) {
     const direction = props.direction || 'vertical';
@@ -2233,26 +2238,22 @@ function RadioGroup(props) {
             props.onValueChange(newVal);
         }
     };
-    return (React.createElement("fieldset", { ref: props.forwardedRef, className: cx$1(css$15.root, directionMode[direction], props.cx), onFocus: props.onFocus, onBlur: props.onBlur, ...props.rawProps }, props.items.map((i) => {
+    return (React.createElement("fieldset", { ref: props.forwardedRef, className: cx$1(css$14.root, directionMode[direction], props.cx), onFocus: props.onFocus, onBlur: props.onBlur, ...props.rawProps }, props.items.map((i) => {
         const { id, name, renderName, ...restItemProps } = i;
         return (React.createElement(RadioInput, { name: props.name, renderLabel: i.renderName ? i.renderName : () => i.name, value: props.value === i.id, onValueChange: () => handleChange(i.id), isDisabled: props.isDisabled || i.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, isRequired: props.isRequired, key: i.id.toString(), size: props.size || i.size, ...restItemProps }));
     })));
 }
 
-var css$14 = {"root":"-at4qd"};
+var css$13 = {"root":"Jrgzym"};
 
 function applyScrollBarsMods() {
     return [
-        css$14.root, 'uui-scroll-bars', 'uui-shadow-top', 'uui-shadow-bottom',
+        css$13.root, 'uui-scroll-bars', 'uui-shadow-top', 'uui-shadow-bottom',
     ];
 }
 const ScrollBars = /* @__PURE__ */withMods(ScrollBars$1, applyScrollBarsMods);
 
-var css$13 = {"scroll-container":"-vHIcX","scrollContainer":"-vHIcX","list-container":"etzd4T","listContainer":"etzd4T"};
-
-var css$12 = {"root":"_2PfsNy"};
-
-const Blocker = /* @__PURE__ */withMods(Blocker$1, () => [css$12.root], () => ({ renderSpinner: settings.blocker.renderSpinner }));
+var css$12 = {"scroll-container":"_04b4AF","scrollContainer":"_04b4AF","list-container":"j4QBN-","listContainer":"j4QBN-"};
 
 const VirtualList = /* @__PURE__ */React.forwardRef((props, ref) => {
     const { listContainerRef, offsetY, handleScroll, estimatedHeight, scrollContainerRef, } = useVirtualList({
@@ -2266,15 +2267,15 @@ const VirtualList = /* @__PURE__ */React.forwardRef((props, ref) => {
     const scrollShadows = useScrollShadows({ root: scrollContainerRef.current });
     const renderRows = () => props.renderRows?.({
         listContainerRef, estimatedHeight, offsetY, scrollShadows,
-    }) || (React.createElement("div", { className: css$13.listContainer, style: { minHeight: `${estimatedHeight}px` } },
+    }) || (React.createElement("div", { className: css$12.listContainer, style: { minHeight: `${estimatedHeight}px` } },
         React.createElement("div", { ref: listContainerRef, role: props.role, style: { marginTop: offsetY } }, props.rows)));
-    const renderView = ({ style }) => (React.createElement(VirtualListView, { isLoading: props.isLoading, style: style, rawProps: props.rawProps }));
+    const renderView = ({ style }) => (React.createElement(VirtualListView, { isLoading: props.isLoading, style: style, rawProps: props.rawProps, renderBlocker: props.renderBlocker }));
     const scrollBarsRef = React.useCallback((scrollbars) => {
         if (!scrollbars?.container?.firstChild)
             return;
         scrollContainerRef.current = scrollbars.container.firstChild;
     }, []);
-    return (React.createElement(ScrollBars, { cx: cx$1(css$13.scrollContainer, props.cx, {
+    return (React.createElement(ScrollBars, { cx: cx$1(css$12.scrollContainer, props.cx, {
             [uuiMarkers.scrolledLeft]: scrollShadows.horizontalLeft,
             [uuiMarkers.scrolledRight]: scrollShadows.horizontalRight,
             [uuiMarkers.scrolledTop]: scrollShadows.verticalTop,
@@ -2293,10 +2294,10 @@ const VirtualListView = /* @__PURE__ */React.forwardRef((props, ref) => {
                 marginRight: props.isLoading ? 0 : props.style.marginRight,
                 marginBottom: props.isLoading ? 0 : props.style.marginBottom,
             }, ref: ref }, props.children),
-        React.createElement(Blocker, { isEnabled: props.isLoading })));
+        props.renderBlocker ? props.renderBlocker({ isLoading: props.isLoading }) : React.createElement(Blocker, { isEnabled: props.isLoading })));
 });
 
-var css$11 = {"root":"qrXL9u"};
+var css$11 = {"root":"P6vhUh"};
 
 function CheckboxGroup(props) {
     const currentValue = props.value || [];
@@ -2318,7 +2319,7 @@ function CheckboxGroup(props) {
     })));
 }
 
-var css$10 = {"root":"ekMFrw","modal-blocker":"sH4seA","modalBlocker":"sH4seA","animateModalBlocker":"dpKXWW","modal":"QYFDYk","modal-footer":"Gy6Pld","modalFooter":"Gy6Pld","border-top":"hnz9Lk","borderTop":"hnz9Lk","modal-header":"r9BPq7","modalHeader":"r9BPq7","border-bottom":"WGLbas","borderBottom":"WGLbas"};
+var css$10 = {"root":"-RGUT-","modal-blocker":"cdfoAE","modalBlocker":"cdfoAE","animateModalBlocker":"LegIr6","modal":"IeWIz1","modal-footer":"CfJg8L","modalFooter":"CfJg8L","border-top":"Dj9L9d","borderTop":"Dj9L9d","modal-header":"e1D2TU","modalHeader":"e1D2TU","border-bottom":"SKzQtq","borderBottom":"SKzQtq"};
 
 const ModalBlocker = /* @__PURE__ */withMods(ModalBlocker$1, () => [css$10.modalBlocker]);
 const ModalWindow = /* @__PURE__ */withMods(ModalWindow$1, () => [css$10.root, css$10.modal], (props) => {
@@ -2509,7 +2510,7 @@ const TREE_SHAKEABLE_INIT = () => ({
 });
 const i18n = /* @__PURE__ */TREE_SHAKEABLE_INIT();
 
-var css$$ = {"root":"AjwFbP","icon-wrapper":"_2W5wsc","iconWrapper":"_2W5wsc","action-wrapper":"KF60aA","actionWrapper":"KF60aA","close-icon":"JoI8JJ","closeIcon":"JoI8JJ","main-path":"hlZRyF","mainPath":"hlZRyF","content":"qRwEZq","close-wrapper":"yNSWbK","closeWrapper":"yNSWbK","clear-notifications":"ssCsV5","clearNotifications":"ssCsV5"};
+var css$$ = {"root":"o4J3JS","icon-wrapper":"GzWvii","iconWrapper":"GzWvii","action-wrapper":"oVNJhc","actionWrapper":"oVNJhc","close-icon":"vag5dL","closeIcon":"vag5dL","main-path":"PAKp2p","mainPath":"PAKp2p","content":"q-WDoD","close-wrapper":"MCvzcD","closeWrapper":"MCvzcD","clear-notifications":"daePwD","clearNotifications":"daePwD"};
 
 const NotificationCard = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     const notificationCardNode = React__default.useRef(null);
@@ -2542,7 +2543,7 @@ function ClearNotification() {
         React__default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => uuiCtx.uuiNotifications.clearAll() })));
 }
 
-var css$_ = {"footer":"_07rrK1"};
+var css$_ = {"footer":"sMt3Lh"};
 
 class ConfirmationModal extends React.Component {
     render() {
@@ -2584,7 +2585,7 @@ function useReliableForceUpdate() {
     return red[1];
 }
 
-var css$Z = {"root":"RZCXZy","container":"-YTseC"};
+var css$Z = {"root":"-NVSOT","container":"_0ZqNg3"};
 
 const defaultFormat = 'MMM D, YYYY';
 const valueFormat = 'YYYY-MM-DD';
@@ -2603,7 +2604,7 @@ const defaultRangeValue = {
     from: null,
     to: null,
 };
-const getMonthOnOpen = (selectedDate, focus) => {
+const getDisplayedMonth = (selectedDate, focus) => {
     if (selectedDate.from && selectedDate.to && focus) {
         return uuiDayjs.dayjs(selectedDate[focus]);
     }
@@ -2712,6 +2713,13 @@ const getPrevYearsList = (currentDate) => {
 const getNextYearsList = (currentDate) => {
     return currentDate.add(16, 'year');
 };
+const isValidAndInFilter = (dateValue, inputType, filter) => {
+    if (!dateValue[inputType])
+        return false;
+    if (!isValidRange(dateValue))
+        return false;
+    return !(filter && filter(uuiDayjs.dayjs(dateValue[inputType])) === false);
+};
 
 const uuiHeader = {
     container: 'uui-datepicker-header-container',
@@ -2795,14 +2803,14 @@ function DatePickerHeader({ navIconLeft, navIconRight, value: { month, view }, o
             React.createElement(Button, { icon: navIconRight || settings.datePicker.icons.body.nextIcon, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: !isDisabled && (() => onRightNavigationArrow()), isDisabled: disableNext }))));
 }
 
-var css$Y = {"root":"kTrymf"};
+var css$Y = {"root":"_4vgg2Z"};
 
 function applyDateSelectionMods() {
     return [css$Y.root, `uui-size-${settings.datePicker.sizes.body}`];
 }
 const Calendar = /* @__PURE__ */withMods(Calendar$1, applyDateSelectionMods);
 
-var css$X = {"root":"_-93-Dt"};
+var css$X = {"root":"bbSvDK"};
 
 const uuiDatePickerBody = {
     wrapper: 'uui-datepicker-body-wrapper',
@@ -2923,7 +2931,7 @@ function DatePickerComponent(props, ref) {
 }
 const DatePicker = /* @__PURE__ */React__default.forwardRef(DatePickerComponent);
 
-var css$W = {"date-input":"qWbsUs","dateInput":"qWbsUs","root":"VwUKru","separator":"PHJveS"};
+var css$W = {"date-input":"GsiXsw","dateInput":"GsiXsw","root":"kiSAPW","separator":"GHS-RA"};
 
 const RangeDatePickerInput = /* @__PURE__ */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] = useState(toCustomDateRangeFormat(value, format));
@@ -2931,10 +2939,15 @@ const RangeDatePickerInput = /* @__PURE__ */forwardRef(({ isDisabled, isInvalid,
         setInputValue(toCustomDateRangeFormat(value, format));
     }, [format, value, setInputValue]);
     const onInputChange = (newValue, inputType) => {
-        setInputValue({
+        const updatedInputValue = {
             ...inputValue,
             [inputType]: newValue,
-        });
+        };
+        setInputValue(updatedInputValue);
+        const selectedDate = toValueDateRangeFormat(updatedInputValue, format);
+        if (isValidAndInFilter(selectedDate, inputType, filter)) {
+            onValueChange(selectedDate);
+        }
     };
     const handleFocus = (event, inputType) => {
         onFocusInput(event, inputType);
@@ -2946,20 +2959,20 @@ const RangeDatePickerInput = /* @__PURE__ */forwardRef(({ isDisabled, isInvalid,
             to: !preventEmptyToDate,
         };
         const selectedDate = toValueDateRangeFormat(inputValue, format);
-        // If new value is null and input can't be empty, set the value to the last selected value
+        // If the new value is null and the input can't be empty, set the value to the last selected value
         if (selectedDate[inputType] === null && !canBeEmpty[inputType]) {
             selectedDate[inputType] = value[inputType];
         }
-        const isDateDisabled = filter?.(uuiDayjs.dayjs(selectedDate[inputType])) === false;
-        if (isValidRange(selectedDate) && !isDateDisabled) {
+        if (isValidAndInFilter(selectedDate, inputType, filter)) {
             setInputValue(toCustomDateRangeFormat(selectedDate, format));
             onValueChange(selectedDate);
         }
         else {
+            const newInputValue = !canBeEmpty[inputType] ? toCustomDateRangeFormat(value, format)[inputType] : null;
             const newValue = !canBeEmpty[inputType] ? value[inputType] : null;
             setInputValue({
                 ...inputValue,
-                [inputType]: newValue,
+                [inputType]: newInputValue,
             });
             onValueChange({
                 ...selectedDate,
@@ -2989,7 +3002,7 @@ const RangeDatePickerInput = /* @__PURE__ */forwardRef(({ isDisabled, isInvalid,
         React__default.createElement(TextInput, { cx: cx$1(css$W.dateInput, inFocus === 'to' && 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 })));
 });
 
-var css$V = {"root":"Xtwshr"};
+var css$V = {"root":"aG6aZL"};
 
 const uuiPresets = {
     container: 'uui-presets-container',
@@ -3009,7 +3022,7 @@ function CalendarPresets(props) {
         getPresets(props.presets).map((item) => (React.createElement(LinkButton, { key: item.key, caption: item.name, onClick: () => props.onPresetSet(item), size: settings.rangeDatePicker.sizes.preset })))));
 }
 
-var css$U = {"root":"YNPZ26","container":"Tr6Bt1","day-selection":"LmNzGk","daySelection":"LmNzGk","from-picker":"tFpNUz","fromPicker":"tFpNUz","to-picker":"qkruws","toPicker":"qkruws","bodes-wrapper":"d9fUry","bodesWrapper":"d9fUry","blocker":"Lt8FWe"};
+var css$U = {"root":"tAAVkC","container":"qoqXZc","day-selection":"fU-vsF","daySelection":"fU-vsF","from-picker":"_6eHrp0","fromPicker":"_6eHrp0","to-picker":"wsrFIF","toPicker":"wsrFIF","bodes-wrapper":"HppESd","bodesWrapper":"HppESd","blocker":"_8sQ5J4"};
 
 const uuiRangeDatePickerBody = {
     inRange: 'uui-range-datepicker-in-range',
@@ -3088,10 +3101,10 @@ function RangeDatePickerBodyComp(props, ref) {
     const { value: _value, filter } = props;
     const { selectedDate: _selectedDate, inFocus, } = _value;
     const selectedDate = _selectedDate || defaultRangeValue; // also handles null in comparison to default value
-    const [activeMonth, setActiveMonth] = useState(inFocus);
     const [view, setView] = useState('DAY_SELECTION');
+    const [disabledPanel, setDisabledPanel] = useState(null);
     const [month, setMonth] = useState(() => {
-        return getMonthOnOpen(selectedDate, inFocus);
+        return getDisplayedMonth(selectedDate, inFocus);
     });
     const getRange = (newValue) => {
         if (!filter || filter(uuiDayjs.dayjs(newValue))) {
@@ -3103,7 +3116,7 @@ function RangeDatePickerBodyComp(props, ref) {
             }
         }
     };
-    const onBodyValueChange = (v, part) => {
+    const onBodyValueChange = (v) => {
         // selectedDate can be null, other params should always have values
         const newRange = v ? getRange(v) : selectedDate;
         let newInFocus = null;
@@ -3112,25 +3125,28 @@ function RangeDatePickerBodyComp(props, ref) {
         if (inFocus === 'from' && fromChanged) {
             newInFocus = 'to';
         }
-        else if (inFocus === 'to' && toChanged) {
+        else if (inFocus === 'to' && toChanged && !fromChanged) { // for the case when we change the value "to" less than the value "from" and do not want to get stuck on the focus "from"
             newInFocus = 'from';
         }
-        setActiveMonth(part);
         props.onValueChange({
             selectedDate: newRange ? newRange : selectedDate,
             inFocus: newInFocus ?? inFocus,
         });
     };
     const renderDay = (renderProps) => {
-        return (React__default.createElement(Day, { ...renderProps, cx: getDayCX(renderProps.value, selectedDate) }));
+        const { inRange, isFirst, isLast } = getDayState(renderProps.value, selectedDate);
+        return (React__default.createElement(Day, { ...renderProps, cx: getDayCX({ inRange, isFirst, isLast }), rawProps: {
+                ...renderProps.rawProps,
+                'aria-selected': (isFirst || isLast || inRange) ? 'true' : undefined,
+            } }));
     };
     const from = {
         month,
-        view: activeMonth === 'from' ? view : 'DAY_SELECTION',
+        view: disabledPanel === 'right' ? view : 'DAY_SELECTION',
         value: null,
     };
     const to = {
-        view: activeMonth === 'to' ? view : 'DAY_SELECTION',
+        view: disabledPanel === 'left' ? view : 'DAY_SELECTION',
         month: month.add(1, 'month'),
         value: null,
     };
@@ -3140,6 +3156,7 @@ function RangeDatePickerBodyComp(props, ref) {
             React__default.createElement(CalendarPresets, { onPresetSet: (presetVal) => {
                     // enable day if smth other were selected
                     setView('DAY_SELECTION');
+                    setDisabledPanel(null);
                     setMonth(uuiDayjs.dayjs(presetVal.from));
                     props.onValueChange({
                         inFocus: props.value.inFocus,
@@ -3150,25 +3167,44 @@ function RangeDatePickerBodyComp(props, ref) {
                     });
                 }, presets: presets })));
     };
-    return (React__default.createElement("div", { ref: ref, className: cx(css$U.root, uuiDatePickerBodyBase.container, props.cx), ...props.rawProps },
+    useLayoutEffectSafeForSsr(() => {
+        const monthToSet = getDisplayedMonth(selectedDate, inFocus);
+        // 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) {
+            setMonth(monthToSet);
+        }
+    }, [selectedDate]);
+    return (React__default.createElement("div", { ref: ref, className: cx(css$U.root, uuiDatePickerBodyBase.container, props.cx), ...props.rawProps, "aria-multiselectable": "true" },
         React__default.createElement(FlexRow, { cx: [view === 'DAY_SELECTION' && css$U.daySelection, css$U.container], alignItems: "top" },
             React__default.createElement(FlexCell, { width: "auto" },
                 React__default.createElement(FlexRow, null,
                     React__default.createElement(FlexRow, { cx: css$U.bodesWrapper, alignItems: "top" },
-                        React__default.createElement(StatelessDatePickerBody, { key: "date-picker-body-left", cx: cx(css$U.fromPicker), ...from, onValueChange: (v) => onBodyValueChange(v, 'from'), onMonthChange: (m) => {
+                        React__default.createElement(StatelessDatePickerBody, { key: "date-picker-body-left", cx: cx(css$U.fromPicker), ...from, onValueChange: (v) => onBodyValueChange(v), onMonthChange: (m) => {
                                 setMonth(m);
-                            }, onViewChange: (v) => setView(v), filter: props.filter, isHoliday: props.isHoliday, renderDay: props.renderDay || renderDay, isDisabled: view !== 'DAY_SELECTION' && activeMonth === 'to' }),
-                        React__default.createElement(StatelessDatePickerBody, { key: "date-picker-body-right", cx: cx(css$U.toPicker), ...to, onValueChange: (v) => onBodyValueChange(v, 'to'), onMonthChange: (m) => {
+                            }, onViewChange: (v) => {
+                                setView(v);
+                                setDisabledPanel(v !== 'DAY_SELECTION' ? 'right' : null);
+                            }, filter: props.filter, isHoliday: props.isHoliday, renderDay: props.renderDay || renderDay, isDisabled: disabledPanel === 'left' }),
+                        React__default.createElement(StatelessDatePickerBody, { key: "date-picker-body-right", cx: cx(css$U.toPicker), ...to, onValueChange: (v) => onBodyValueChange(v), onMonthChange: (m) => {
                                 setMonth(m.subtract(1, 'month'));
-                            }, onViewChange: (v) => setView(v), filter: props.filter, renderDay: props.renderDay || renderDay, isHoliday: props.isHoliday, isDisabled: view !== 'DAY_SELECTION' && activeMonth === 'from' }),
+                            }, onViewChange: (v) => {
+                                setView(v);
+                                setDisabledPanel(v !== 'DAY_SELECTION' ? 'left' : null);
+                            }, filter: props.filter, renderDay: props.renderDay || renderDay, isHoliday: props.isHoliday, isDisabled: disabledPanel === 'right' }),
                         view !== 'DAY_SELECTION' && (React__default.createElement("div", { style: {
-                                left: activeMonth === 'from' ? '50%' : undefined,
-                                right: activeMonth === 'to' ? '50%' : undefined,
+                                left: disabledPanel === 'right' ? '50%' : undefined,
+                                right: disabledPanel === 'left' ? '50%' : undefined,
                             }, className: css$U.blocker }))),
                     props.presets && renderPresets(props.presets)),
                 props.renderFooter && props.renderFooter()))));
 }
-const getDayCX = (day, selectedDate) => {
+const getDayCX = ({ inRange, isFirst, isLast }) => {
+    return [
+        cx(inRange && uuiRangeDatePickerBody.inRange, isFirst && uuiRangeDatePickerBody.firstDayInRangeWrapper, !inRange && isFirst && uuiRangeDatePickerBody.lastDayInRangeWrapper, isLast && uuiRangeDatePickerBody.lastDayInRangeWrapper, !inRange && isLast && uuiRangeDatePickerBody.firstDayInRangeWrapper, (isFirst || isLast) && uuiDaySelection.selectedDay),
+    ];
+};
+const getDayState = (day, selectedDate) => {
     const dayValue = day.valueOf();
     const fromValue = selectedDate?.from
         ? uuiDayjs.dayjs(selectedDate.from).valueOf() : null;
@@ -3181,10 +3217,14 @@ const getDayCX = (day, selectedDate) => {
         && fromValue !== toValue;
     const isFirst = dayValue === fromValue;
     const isLast = dayValue === toValue;
-    return [cx(inRange && uuiRangeDatePickerBody.inRange, isFirst && uuiRangeDatePickerBody.firstDayInRangeWrapper, !inRange && isFirst && uuiRangeDatePickerBody.lastDayInRangeWrapper, isLast && uuiRangeDatePickerBody.lastDayInRangeWrapper, !inRange && isLast && uuiRangeDatePickerBody.firstDayInRangeWrapper, (dayValue === fromValue || dayValue === toValue) && uuiDaySelection.selectedDay)];
+    return {
+        inRange,
+        isFirst,
+        isLast,
+    };
 };
 
-var css$T = {"dropdown-container":"IDuAlE","dropdownContainer":"IDuAlE"};
+var css$T = {"dropdown-container":"uBQN9c","dropdownContainer":"uBQN9c"};
 
 function RangeDatePickerComponent(props, ref) {
     const { value: _value, format = defaultFormat, size = settings.rangeDatePicker.sizes.default } = props;
@@ -3252,7 +3292,7 @@ function RangeDatePickerComponent(props, ref) {
 }
 const RangeDatePicker = /* @__PURE__ */React__default.forwardRef(RangeDatePickerComponent);
 
-var css$S = {"root":"j3GxDu","blocker":"WnqBhZ","marker":"-vTDMB","top":"vFxijS","bottom":"PqWdqC","left":"_2SN9K-","right":"_1-LtJk","inside":"_9phclY"};
+var css$S = {"root":"M0Ddpv","blocker":"HYg-ro","marker":"NsUHDF","top":"_6szlT4","bottom":"sjy1OE","left":"T--QNm","right":"ErrPbF","inside":"BReapR"};
 
 function DropMarker(props) {
     return props.isDndInProgress
@@ -3269,15 +3309,15 @@ function DropMarker(props) {
 
 const RichTextView = /* @__PURE__ */withMods(uuiComponents.RichTextView, (mods) => ['uui-typography', `uui-typography-size-${mods.size || settings.richTextView.sizes.default}`]);
 
-var css$R = {"search-wrapper":"M7wn2O","searchWrapper":"M7wn2O","no-data":"y0Lob1","noData":"y0Lob1"};
+var css$R = {"search-wrapper":"zLkJ7-","searchWrapper":"zLkJ7-","no-data":"_7022y7","noData":"_7022y7"};
 
-var css$Q = {"picker-row":"C6JG7a","pickerRow":"C6JG7a","align-widgets-top":"iSFAUc","alignWidgetsTop":"iSFAUc","row-content":"I4AB0H","rowContent":"I4AB0H","align-widgets-center":"xhogGL","alignWidgetsCenter":"xhogGL","icon-container":"-uPuGM","iconContainer":"-uPuGM","content-wrapper":"_2eUljz","contentWrapper":"_2eUljz","icon-wrapper":"AYN6gT","iconWrapper":"AYN6gT","icon-default":"dXF00j","iconDefault":"dXF00j","selected-mark":"Y7Hlg9","selectedMark":"Y7Hlg9"};
+var css$Q = {"picker-row":"AbMukL","pickerRow":"AbMukL","align-widgets-top":"iYtV-i","alignWidgetsTop":"iYtV-i","row-content":"XYYJu-","rowContent":"XYYJu-","align-widgets-center":"np-G7P","alignWidgetsCenter":"np-G7P","icon-container":"FEfGii","iconContainer":"FEfGii","content-wrapper":"MNc2X6","contentWrapper":"MNc2X6","icon-wrapper":"gaG0l-","iconWrapper":"gaG0l-","icon-default":"OT3k40","iconDefault":"OT3k40","selected-mark":"-abbcb","selectedMark":"-abbcb"};
 
-var css$P = {"root":"NzLONf"};
+var css$P = {"root":"pKMwAQ"};
 
 const AvatarStack = /* @__PURE__ */withMods(AvatarStack$1, () => [css$P.root]);
 
-var css$O = {"root":"VkK2R2"};
+var css$O = {"root":"GTWyHr"};
 
 const DEFAULT_FILL = 'solid';
 function applyBadgeMods(mods) {
@@ -3305,7 +3345,7 @@ const Badge = /* @__PURE__ */React__default.forwardRef((props, ref) => {
         props.isDropdown && (React__default.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$N = {"root":"VzzI7i"};
+var css$N = {"root":"fICQyy"};
 
 function applyTagMods(props) {
     return [
@@ -3333,7 +3373,7 @@ const Tag = /* @__PURE__ */React__default.forwardRef((props, ref) => {
         props.onClear && !props.isDisabled && (React__default.createElement(IconContainer, { cx: uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
 });
 
-var css$M = {"root":"Y0Ai5E","page":"tmJ15G","spacer":"t6k4ra","mode-ghost":"mSNBCb","modeGhost":"mSNBCb"};
+var css$M = {"root":"syAz-F","page":"Z6AZYc","spacer":"_4uT9Qr","mode-ghost":"tYmAfG","modeGhost":"tYmAfG"};
 
 function Paginator(props) {
     const renderPaginator = (params) => (React__default.createElement("nav", { role: "navigation", className: cx(css$M.root, 'uui-paginator', `uui-size-${props.size || settings.paginator.sizes.default}`), ...params.rawProps },
@@ -3350,14 +3390,14 @@ function Paginator(props) {
     return React__default.createElement(Paginator$1, { ...props, render: renderPaginator });
 }
 
-var css$L = {"root":"_2m5msK","progress-bar":"MkpTL3","progressBar":"MkpTL3","progressBar-indeterminate":"ib7YBp","progressBarIndeterminate":"ib7YBp","size-12":"_2rXjmT","size12":"_2rXjmT","size-18":"_7Nh5dH","size18":"_7Nh5dH","size-24":"oxyWMs","size24":"oxyWMs"};
+var css$L = {"root":"_3ntsOj","progress-bar":"WuKIZ1","progressBar":"WuKIZ1","progressBar-indeterminate":"cj1mnj","progressBarIndeterminate":"cj1mnj","size-12":"iFV517","size12":"iFV517","size-18":"jeZs0g","size18":"jeZs0g","size-24":"orXw0A","size24":"orXw0A"};
 
 const IndeterminateBar = /* @__PURE__ */React.forwardRef((props, ref) => {
     return (React.createElement("div", { ref: ref, className: cx('uui-indeterminate_bar', props.cx, css$L.root, css$L[`size-${props.size || 12}`]) },
         React.createElement("div", { className: cx(css$L.progressBar) })));
 });
 
-var css$K = {"root":"E4kmco","striped":"_54kh8M","animate-stripes":"AY2z8d","animateStripes":"AY2z8d","size-12":"bRsHHK","size12":"bRsHHK","size-18":"TzU-Q8","size18":"TzU-Q8","size-24":"flRYIk","size24":"flRYIk"};
+var css$K = {"root":"J-9CIA","striped":"wbPol5","animate-stripes":"_-8Hhhq","animateStripes":"_-8Hhhq","size-12":"UzL78T","size12":"UzL78T","size-18":"ZKMfFn","size18":"ZKMfFn","size-24":"nMvE1Z","size24":"nMvE1Z"};
 
 const DEFAULT_SIZE = '12';
 function applyProgressBarMods(mods) {
@@ -3372,14 +3412,14 @@ const ProgressBar = /* @__PURE__ */withMods(uuiComponents.ProgressBar, applyProg
     hideLabel: props.hideLabel || props.striped,
 }));
 
-var css$J = {"root":"z0TvBt"};
+var css$J = {"root":"QpCsO4"};
 
 const IndicatorBar = /* @__PURE__ */React.forwardRef((props, ref) => {
     const { progress } = props;
     return progress || progress === 0 ? (React.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx(css$J.root, props.cx), hideLabel: true })) : (React.createElement(IndeterminateBar, { ref: ref, cx: cx(css$J.root, props.cx) }));
 });
 
-var css$I = {"root":"u0HYrt"};
+var css$I = {"root":"k0MxET"};
 
 const StatusIndicator = /* @__PURE__ */forwardRef((props, ref) => {
     return (React__default.createElement("div", { ref: ref, className: cx([
@@ -3394,7 +3434,7 @@ const StatusIndicator = /* @__PURE__ */forwardRef((props, ref) => {
         React__default.createElement("p", { className: "uui-status_indicator-caption" }, props.caption)));
 });
 
-var css$H = {"drag-handle":"_-8VO9r","dragHandle":"_-8VO9r","icon-container":"TbYALr","iconContainer":"TbYALr"};
+var css$H = {"drag-handle-wrapper":"cXRZfe","dragHandleWrapper":"cXRZfe","with-indent":"_2nvwIJ","withIndent":"_2nvwIJ","drag-handle":"-qdXtz","dragHandle":"-qdXtz","icon-container":"dcKp0w","iconContainer":"dcKp0w"};
 
 function DataRowAddons(props) {
     const row = props.rowProps;
@@ -3405,7 +3445,8 @@ function DataRowAddons(props) {
         return settings.dataTable.sizes.body.indentWidthMap[props.size || settings.dataTable.sizes.body.row];
     };
     return (React__default.createElement(React__default.Fragment, null,
-        row.dnd?.srcData && React__default.createElement(DragHandle, { key: "dh", cx: css$H.dragHandle, rawProps: { ...props.eventHandlers } }),
+        row.dnd?.srcData && (React__default.createElement("div", { key: "dh", className: cx(css$H.dragHandleWrapper, row.indent > 0 && css$H.withIndent), style: { width: row.indent > 0 ? (getIndent() + getWidth()) : 0 }, ...props.eventHandlers },
+            React__default.createElement(DragHandle, { cx: css$H.dragHandle }))),
         row?.checkbox?.isVisible && (React__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__default.createElement("div", { key: "fold", className: cx('uui-dr_addons-indent', `uui-size-${props.size || settings.dataTable.sizes.body.row}`), style: { marginInlineStart: getIndent(), width: getWidth() } }, row.isFoldable && (React__default.createElement(IconContainer, { rawProps: {
                 'aria-label': row.isFolded ? 'Unfold' : 'Fold',
@@ -3480,7 +3521,7 @@ const getHighlightedSearchMatches = (str, search) => {
     return getDecoratedText(str, ranges);
 };
 
-var css$G = {"root":"_8Ip-d2","column-gap":"E8Uc5b","columnGap":"E8Uc5b","title":"Tjrvzm","subtitle":"-rtsRJ","disabled":"i9zift","multiline":"pvheYC"};
+var css$G = {"root":"_-01Pr-","column-gap":"_0UleJC","columnGap":"_0UleJC","title":"TObxj2","subtitle":"aUw96Y","disabled":"zJpgJ7","multiline":"CMtVMR"};
 
 function PickerItem(props) {
     const { highlightSearchMatches = true, size, avatarUrl, isLoading, isDisabled, icon, } = props;
@@ -3503,6 +3544,9 @@ function getAvatarSize(size, isMultiline) {
 
 function DataPickerRow(props) {
     const rowNode = React.useRef(null);
+    const handleMouseEnter = useCallback(() => {
+        props.onFocus && props.onFocus(props.index);
+    }, [props.onFocus, props.index]);
     React.useEffect(() => {
         if (props.onFocus) {
             rowNode.current?.addEventListener('mouseenter', handleMouseEnter);
@@ -3510,10 +3554,7 @@ function DataPickerRow(props) {
         return () => {
             rowNode.current?.removeEventListener('mouseenter', handleMouseEnter);
         };
-    }, [props.onFocus]);
-    const handleMouseEnter = () => {
-        props.onFocus && props.onFocus(props.index);
-    };
+    }, [props.onFocus, handleMouseEnter]);
     const getSubtitle = ({ path }) => {
         if (!props.dataSourceState?.search)
             return;
@@ -3625,8 +3666,9 @@ function DataPickerBody({ highlightSearchMatches = true, ...props }) {
             ? renderEmpty() : (React__default.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, rows: renderedDataRows, rawProps: {
                 'aria-multiselectable': props.selectionMode === 'multi' ? true : null,
                 'aria-orientation': 'vertical',
+                tabIndex: -1,
                 ...props.rawProps,
-            }, rowsCount: props.rowsCount, isLoading: props.isReloading })))));
+            }, rowsCount: props.rowsCount, isLoading: props.isReloading, renderBlocker: settings.pickerInput.renderBlocker })))));
 }
 
 function DataPickerFooterImpl(props) {
@@ -3653,7 +3695,7 @@ function DataPickerFooterImpl(props) {
 }
 const DataPickerFooter = /* @__PURE__ */React__default.memo(DataPickerFooterImpl);
 
-var css$F = {"header":"hFYMa9","title":"_-8h-k-","close":"PreWwq"};
+var css$F = {"header":"jPZdqS","title":"al4-Uc","close":"nkM7P1"};
 
 const DataPickerMobileHeaderImpl = (props) => {
     const title = props.title && typeof props.title === 'string' ? props.title.charAt(0).toUpperCase() + props.title.slice(1) : '';
@@ -3663,7 +3705,7 @@ const DataPickerMobileHeaderImpl = (props) => {
 };
 const DataPickerMobileHeader = /* @__PURE__ */React__default.memo(DataPickerMobileHeaderImpl);
 
-var css$E = {"done":"lC4pHm","container":"q3K2Q8"};
+var css$E = {"done":"pNgBB-","container":"eTofk2"};
 
 const PickerBodyMobileView = (props) => {
     const isMobileView = isMobile();
@@ -3675,7 +3717,7 @@ const PickerBodyMobileView = (props) => {
         isMobileView && (React__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":"irMaaN","subHeaderWrapper":"irMaaN","switch":"ceyEQo","no-found-modal-container":"_-6UUgI","noFoundModalContainer":"_-6UUgI","no-found-modal-container-icon":"BVLlAw","noFoundModalContainerIcon":"BVLlAw","no-found-modal-container-text":"noOViD","noFoundModalContainerText":"noOViD","body":"qNZxsP"};
+var css$D = {"sub-header-wrapper":"XNwoaN","subHeaderWrapper":"XNwoaN","switch":"creXF9","no-found-modal-container":"LP28fr","noFoundModalContainer":"LP28fr","no-found-modal-container-icon":"_5opuMC","noFoundModalContainerIcon":"_5opuMC","no-found-modal-container-text":"YvKrki","noFoundModalContainerText":"YvKrki","body":"ydBJYo"};
 
 function PickerModal(props) {
     const { view, selection, dataSourceStateLens, dataSourceState, getName, clearSelection, getRows, getListProps, getFooterProps, isSingleSelect, handleDataSourceValueChange, } = usePickerModal(props);
@@ -3699,6 +3741,7 @@ function PickerModal(props) {
             React__default.createElement(Text, { cx: css$D.noFoundModalContainerText, fontSize: "12", lineHeight: "18", color: "primary" }, i18n.dataPickerBody.noRecordsSubTitle)));
     };
     const dataRows = getRows();
+    const isSearching = dataSourceState.search && dataSourceState.search.length > 0;
     return (React__default.createElement(ModalBlocker, { ...props },
         React__default.createElement(ModalWindow, { width: 600, height: 700, cx: css$D.body },
             React__default.createElement(ModalHeader, { title: props.caption || i18n.pickerModal.headerTitle, onClose: () => props.abort() }),
@@ -3711,13 +3754,13 @@ function PickerModal(props) {
                             rows: dataRows,
                             searchPosition: 'body',
                         }, e), autoFocus: true, placeholder: i18n.pickerModal.searchPlaceholder, rawProps: { dir: 'auto' } })),
-                !isSingleSelect() && (React__default.createElement(Switch, { cx: css$D.switch, size: settings.pickerInput.sizes.body.footerSwitchMap[settings.pickerInput.sizes.body.row], ...getFooterProps().showSelected, isDisabled: view.getSelectedRowsCount() < 1, label: "Show only selected" })),
+                !isSingleSelect() && (React__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__default.createElement(FlexCell, { grow: 2 }, props.renderFilter(dataSourceStateLens.prop('filter').toProps()))),
             React__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__default.createElement(ModalFooter, null, props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()))));
 }
 
-var css$C = {"tooltip":"GIs7Wc"};
+var css$C = {"tooltip":"eoabab"};
 
 const PickerTogglerTag = /* @__PURE__ */React.forwardRef((props, ref) => {
     const tagProps = {
@@ -3736,7 +3779,7 @@ const PickerTogglerTag = /* @__PURE__ */React.forwardRef((props, ref) => {
     }
 });
 
-var css$B = {"root":"yvn-0u"};
+var css$B = {"root":"Rrzzff"};
 
 const defaultMode = EditMode.FORM;
 function applyPickerTogglerMods(mods) {
@@ -3818,7 +3861,7 @@ function PickerInputComponent(props, ref) {
 }
 const PickerInput = /* @__PURE__ */React__default.forwardRef(PickerInputComponent);
 
-var css$A = {"row":"bdeg3t"};
+var css$A = {"row":"l0lC-Q"};
 
 function PickerListRow(props) {
     let label;
@@ -3838,7 +3881,7 @@ function PickerListRow(props) {
     return (React__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":"_2u1fzO"};
+var css$z = {"root":"Fsqj8t"};
 
 function PickerList(props) {
     const { context, view, onlySelectedView, getName, getEntityName, appendLastSelected, getSelectedIdsArray, buildRowsList, getMaxDefaultItems, getModalTogglerCaption, } = usePickerList(props);
@@ -3873,7 +3916,7 @@ function PickerList(props) {
             }, selectedRows)));
 }
 
-var css$y = {"root":"YiM3x9","wrapper":"S0nw-i","align-widgets-top":"Z8JfGq","alignWidgetsTop":"Z8JfGq","align-widgets-center":"jVCfKh","alignWidgetsCenter":"jVCfKh"};
+var css$y = {"root":"_08YOU7","wrapper":"imbolo","align-widgets-top":"AqAHVp","alignWidgetsTop":"AqAHVp","align-widgets-center":"paIvaX","alignWidgetsCenter":"paIvaX"};
 
 function DataTableCell(initialProps) {
     const props = { ...initialProps };
@@ -3923,7 +3966,7 @@ function DataTableCell(initialProps) {
     return React.createElement(DataTableCell$1, { ...props });
 }
 
-var css$x = {"root":"_3QOJcW"};
+var css$x = {"root":"d2xvZ7"};
 
 // 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.
@@ -3939,7 +3982,7 @@ const DataTableRow = /* @__PURE__ */withMods(DataTableRow$1, ({ borderBottom = t
     ];
 }, () => propsMods);
 
-var css$w = {"sorting-panel-container":"bXZR52","sortingPanelContainer":"bXZR52"};
+var css$w = {"sorting-panel-container":"QeYb2b","sortingPanelContainer":"QeYb2b"};
 
 const SortingPanelImpl = ({ sortDirection, onSort }) => {
     const sortAsc = useCallback(() => onSort(sortDirection === 'asc' ? undefined : 'asc'), [onSort]);
@@ -3959,7 +4002,7 @@ const ColumnHeaderDropdownImpl = (props) => {
 };
 const ColumnHeaderDropdown = /* @__PURE__ */React__default.memo(ColumnHeaderDropdownImpl);
 
-var css$v = {"root":"_8Y9blt","caption-wrapper":"Rs5OI7","captionWrapper":"Rs5OI7","sort-icon":"ZOi8z9","sortIcon":"ZOi8z9","dropdown-icon":"BgqPEP","dropdownIcon":"BgqPEP","infoIcon":"ElcdJ3","align-right":"_7ffuFI","alignRight":"_7ffuFI","align-center":"pB8h-n","alignCenter":"pB8h-n","caption":"gzr7Y-","truncate":"e2nCCI","upper-case":"yP5tWs","upperCase":"yP5tWs","checkbox":"h140DR","icon":"ok8PTZ","fold-all-icon":"_1q08p2","foldAllIcon":"_1q08p2","cell-tooltip":"MqY--L","cellTooltip":"MqY--L","resizing-marker":"_-6fPAs","resizingMarker":"_-6fPAs","pinned-right":"d6xMLn","pinnedRight":"d6xMLn","draggable":"LxqxYU","ghost":"KNDQdy","is-dragged-out":"_8lM4FJ","isDraggedOut":"_8lM4FJ","dnd-marker-left":"_3DyrVa","dndMarkerLeft":"_3DyrVa","dnd-marker-right":"nwczMW","dndMarkerRight":"nwczMW","cell-tooltip-wrapper":"cCIMI7","cellTooltipWrapper":"cCIMI7","cell-tooltip-text":"MU8iw3","cellTooltipText":"MU8iw3","tooltip-caption":"c0WA4f","tooltipCaption":"c0WA4f","tooltip-info":"aeB5kM","tooltipInfo":"aeB5kM"};
+var css$v = {"root":"IlbHTY","caption-wrapper":"_8OoFTY","captionWrapper":"_8OoFTY","sort-icon":"upJaPX","sortIcon":"upJaPX","dropdown-icon":"_35hlRE","dropdownIcon":"_35hlRE","infoIcon":"vkc8lC","align-right":"avrCkG","alignRight":"avrCkG","align-center":"_00OM2q","alignCenter":"_00OM2q","caption":"SEA4Js","truncate":"zg3K4k","upper-case":"X34Hdm","upperCase":"X34Hdm","checkbox":"yJjBU3","icon":"fJBrO9","fold-all-icon":"NApwch","foldAllIcon":"NApwch","cell-tooltip":"qEt01T","cellTooltip":"qEt01T","resizing-marker":"_0WCOZ8","resizingMarker":"_0WCOZ8","pinned-right":"lUYepH","pinnedRight":"lUYepH","draggable":"dHujBI","ghost":"_76ZaGA","is-dragged-out":"_0EJy1E","isDraggedOut":"_0EJy1E","dnd-marker-left":"sXLDHf","dndMarkerLeft":"sXLDHf","dnd-marker-right":"iwq1Q4","dndMarkerRight":"iwq1Q4","cell-tooltip-wrapper":"_2X6trX","cellTooltipWrapper":"_2X6trX","cell-tooltip-text":"fM193P","cellTooltipText":"fM193P","tooltip-caption":"rkYWXV","tooltipCaption":"rkYWXV","tooltip-info":"_2y-7L-","tooltipInfo":"_2y-7L-"};
 
 class DataTableHeaderCell extends React.Component {
     constructor() {
@@ -4053,7 +4096,7 @@ class DataTableHeaderCell extends React.Component {
     }
 }
 
-var css$u = {"root":"bpX3-z","caption-wrapper":"rpX1qh","captionWrapper":"rpX1qh","align-center":"uR9JzK","alignCenter":"uR9JzK","caption":"iV2AMw","truncate":"UPs8nP","upper-case":"_2LX1T-","upperCase":"_2LX1T-","group-cell-tooltip":"E2L8Rs","groupCellTooltip":"E2L8Rs","group-cell-tooltip-wrapper":"-fOGZU","groupCellTooltipWrapper":"-fOGZU","group-cell-tooltip-text":"y01sK1","groupCellTooltipText":"y01sK1","tooltip-caption":"_6XBpb0","tooltipCaption":"_6XBpb0","tooltip-info":"_0cCL0N","tooltipInfo":"_0cCL0N"};
+var css$u = {"root":"Zpk3gd","caption-wrapper":"EhJqll","captionWrapper":"EhJqll","align-center":"vbfV86","alignCenter":"vbfV86","caption":"XbmxsS","truncate":"Zii2FT","upper-case":"RofbWZ","upperCase":"RofbWZ","group-cell-tooltip":"MUH2i3","groupCellTooltip":"MUH2i3","group-cell-tooltip-wrapper":"FJnsff","groupCellTooltipWrapper":"FJnsff","group-cell-tooltip-text":"ge8v7K","groupCellTooltipText":"ge8v7K","tooltip-caption":"z0VPWA","tooltipCaption":"z0VPWA","tooltip-info":"_1n1KkI","tooltipInfo":"_1n1KkI"};
 
 class DataTableHeaderGroupCell extends React.Component {
     constructor() {
@@ -4093,7 +4136,7 @@ class DataTableHeaderGroupCell extends React.Component {
     }
 }
 
-var css$t = {"root":"LQcATP"};
+var css$t = {"root":"dvZkYS"};
 
 const DataTableHeaderRow = /* @__PURE__ */withMods(DataTableHeaderRow$1, () => [css$t.root, 'uui-dt-vars'], (mods) => ({
     renderCell: (props) => (React.createElement(DataTableHeaderCell, { ...props, size: mods.size, textCase: mods.textCase || 'normal', key: props.column.key, columnsGap: mods.columnsGap })),
@@ -4101,6 +4144,85 @@ const DataTableHeaderRow = /* @__PURE__ */withMods(DataTableHeaderRow$1, () => [
     renderConfigButton: () => (React.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 normalizeFilterWithPredicates = (filter) => {
+    if (!filter) {
+        return {};
+    }
+    const result = filter;
+    const keys = Object.keys(filter);
+    for (let n = 0; n < keys.length; n++) {
+        const key = keys[n];
+        const filterValue = filter[key];
+        if (filterValue && typeof filterValue === 'object') {
+            if (Object.keys(filterValue).length === 0) {
+                delete filter[key];
+                continue;
+            }
+            if ('from' in filterValue && 'to' in filterValue) {
+                continue;
+            }
+            if ('in' in filterValue && (!Array.isArray(filterValue.in) || !filterValue.in.length)) {
+                delete filter[key];
+            }
+            if ('nin' in filterValue && (!Array.isArray(filterValue.nin) || !filterValue.nin.length)) {
+                delete filter[key];
+            }
+            if ('inRange' in filterValue) {
+                if (!filterValue.inRange || (!filterValue.inRange.from && !filterValue.inRange.to)) {
+                    delete filter[key];
+                }
+            }
+            if ('notInRange' in filterValue) {
+                if (!filterValue.notInRange || (!filterValue.notInRange.from && !filterValue.notInRange.to)) {
+                    delete filter[key];
+                }
+            }
+            Object.keys(filterValue).forEach((predicate) => {
+                if (filterValue[predicate] === null || filterValue[predicate] === undefined) {
+                    delete filter[key];
+                }
+            });
+        }
+    }
+    return result;
+};
+const getValue = (predicate, value) => predicate ? value?.[predicate] : value;
+
+function FilterPredicatePanel(props) {
+    if (!props.predicates)
+        return null;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+        // This effect needs when the filter dropdown was closed and opened again
+        if (props.predicates && props.value && Object.keys(props.value).length > 0) {
+            const predicateFromValue = Object.keys(props.value)[0];
+            if (predicateFromValue !== props.predicate) {
+                props.setPredicate(predicateFromValue);
+            }
+        }
+    }, [props.value]);
+    const changePredicate = (val) => {
+        const isInRange = (p) => p === 'inRange' || p === 'notInRange';
+        if (props.type === 'numeric') {
+            let predicateValue = { [val]: getValue(props.predicate, props.value) };
+            if (isInRange(val) && !isInRange(props.predicate)) {
+                // from simple predicate -> to Range
+                predicateValue = { [val]: { from: null, to: null } };
+            }
+            else if (!isInRange(val) && isInRange(props.predicate)) {
+                // from Range -> to simple predicate
+                predicateValue = { [val]: null };
+            }
+            props.onValueChange(predicateValue);
+        }
+        else {
+            props.onValueChange({ [val]: getValue(props.predicate, props.value) });
+        }
+        props.setPredicate(val);
+    };
+    return (React__default.createElement(MultiSwitch, { items: props.predicates?.map((i) => ({ id: i.predicate, caption: i.name })), value: props.predicate, onValueChange: changePredicate, size: settings.filtersPanel.sizes.pickerBodyMultiSwitch }));
+}
+
 const UUI_FILTERS_PANEL_ADD_BUTTON = 'uui-filters-panel-add-button';
 const UUI_FILTERS_PANEL_ADD_BUTTON_BODY = 'uui-filters-panel-add-button-body';
 const UUI_FILTERS_PANEL_ITEM_BODY = 'uui-filters-panel-item-body';
@@ -4110,315 +4232,647 @@ 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 = {"root":"a-hv0j","title-wrapper":"I5eDh6","titleWrapper":"I5eDh6","title":"jFj4yd","text-wrapper":"kCfZ-8","textWrapper":"kCfZ-8","selection":"USanEX","postfix":"_9jqEyr","selected":"lYLuCj"};
+var css$s = {"body":"LSc8Q3","header":"Nuwfs-","title":"gySx8A","removeButton":"RyTt9M","with-search":"pnhTP-","withSearch":"pnhTP-"};
 
-const FilterPanelItemToggler = /* @__PURE__ */React.forwardRef((props, ref) => {
-    const togglerPickerOpened = (e) => {
-        if (props.isDisabled)
-            return;
-        e.preventDefault();
-        !isEventTargetInsideClickable(e) && props.onClick?.();
-    };
-    const onKeyDownHandler = (e) => {
-        if (props.isDisabled)
-            return;
-        if (e.key === 'Enter' && !props.isOpen) {
-            e.preventDefault();
-            props.toggleDropdownOpening(true);
+function FilterColumnBody(props) {
+    const [predicate, setPredicate] = useState(getDefaultPredicate(props.predicates, props.value));
+    const onValueChange = (value) => {
+        if (props.predicates) {
+            props.onValueChange({ [predicate]: value });
         }
-        if (e.key === 'Escape' && props.isOpen) {
-            e.preventDefault();
-            props.toggleDropdownOpening(false);
+        else {
+            props.onValueChange(value);
         }
     };
-    const getTitle = props.predicateName ? `${props.title} ${props.predicateName}` : `${props.title}${props.selection ? ':' : ''}`;
-    const getSelectionText = () => props.selection.map((i, index) => (React.createElement(React.Fragment, { key: `${i}${index}` },
-        React.createElement("div", { className: cx(css$s.selection, UUI_FILTERS_PANEL_ITEM_TOGGLER_SELECTION) }, i),
-        (props.postfix || index !== props.selection.length - 1) && React.createElement("span", null, ",\u00A0"))));
-    return (React.createElement("div", { style: { maxWidth: `${props.maxWidth ? props.maxWidth + 'px' : 'auto'}` }, role: "button", tabIndex: props.isDisabled ? -1 : 0, onKeyDown: onKeyDownHandler, className: cx(UUI_FILTERS_PANEL_ITEM_TOGGLER, css$s.root, uuiElement.inputBox, uuiMarkers.clickable, props.isOpen && uuiMod.opened, props.selection?.length > 0 && uuiMarkers.hasValue, `uui-size-${props.size || settings.pickerInput.sizes.toggler.default}`, props.cx), onClick: togglerPickerOpened, ref: ref },
-        React.createElement("div", { className: css$s.titleWrapper },
-            React.createElement("div", { className: cx(css$s.title, UUI_FILTERS_PANEL_ITEM_TOGGLER_TITLE) }, getTitle),
-            props.selection && (React.createElement("div", { className: css$s.textWrapper },
-                getSelectionText(),
-                props.postfix && (React.createElement("div", { className: cx(css$s.postfix, UUI_FILTERS_PANEL_ITEM_TOGGLER_POSTFIX) }, props.postfix))))),
-        !props.isDisabled && React.createElement(IconContainer, { icon: settings.filtersPanel.icons.itemDropdownIcon, flipY: props.isOpen, cx: "uui-icon-dropdown" })));
-});
-
-const pickerHeight = 300;
-function FilterPickerBody({ highlightSearchMatches = true, ...restProps }) {
-    const props = { ...restProps, highlightSearchMatches };
-    const [dsState, setDsState] = useState({
-        focusedIndex: 0,
-        topIndex: 0,
-        visibleCount: 20,
-        checked: [],
-    });
-    const { showSelected, setShowSelected } = useShowSelected({ dataSourceState: dsState });
-    const { view, getName, dataSourceState, getListProps, handleDataSourceValueChange, clearSelection, } = usePickerApi({ ...props, dataSourceState: dsState, setDataSourceState: setDsState, showSelectedOnly: showSelected });
-    const prevValue = usePrevious(props.value);
-    const prevOpened = usePrevious(props.isOpen);
-    React.useLayoutEffect(() => {
-        if (prevOpened === props.isOpen && props.isOpen
-            && prevValue !== props.value && props.value !== props.emptyValue
-            && props.selectionMode === 'single') {
-            props.onClose();
-        }
-    }, [props.value]);
-    const renderFooter = () => {
-        const footerProps = {
-            view,
-            showSelected: {
-                value: showSelected,
-                onValueChange: setShowSelected,
-            },
-            clearSelection,
-            selectionMode: props.selectionMode,
-            selection: props.value,
-            search: dataSourceState.search,
+    const renderHeader = () => {
+        const panelProps = {
+            predicates: props.predicates,
+            predicate,
+            type: props.type,
+            onValueChange: props.onValueChange,
+            value: props.value,
+            setPredicate,
         };
-        return props.renderFooter
-            ? props.renderFooter(footerProps)
-            : React.createElement(DataPickerFooter, { ...footerProps, cx: UUI_FILTERS_PANEL_BODY_FOOTER, size: settings.pickerInput.sizes.body.row });
-    };
-    const renderBody = () => {
-        const rows = view.getVisibleRows();
-        const maxHeight = isMobile() ? document.documentElement.clientHeight : props.maxBodyHeight || pickerHeight;
-        const maxWidth = isMobile() ? undefined : 360;
-        const onKeyDown = (e) => handleDataSourceKeyboard({
-            value: dataSourceState,
-            onValueChange: handleDataSourceValueChange,
-            listView: view,
-            searchPosition: 'body',
-            rows,
-        }, e);
-        return (React.createElement(React.Fragment, null,
-            React.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 }),
-            renderFooter()));
+        return props.predicates?.length > 0 && (React__default.createElement("div", { className: css$s.header },
+            React__default.createElement(FilterPredicatePanel, { ...panelProps })));
     };
-    return renderBody();
+    return (React__default.createElement(DropdownContainer, { style: { minWidth: '360px' }, cx: [css$s.body, UUI_FILTERS_PANEL_ITEM_BODY], ...props },
+        renderHeader(),
+        React__default.createElement(FilterItemBody, { ...props, selectedPredicate: predicate, value: getValue(predicate, props.value), onValueChange: onValueChange })));
 }
 
-const UUI_FILTERS_PANEL_DTP_FOOTER = 'uui-filters-panel-dtp-footer';
-function FilterDatePickerBodyFooter({ value, onValueChange }) {
-    return (React__default.createElement(FlexCell, { alignSelf: "stretch" },
-        React__default.createElement(FlexRow, { cx: UUI_FILTERS_PANEL_DTP_FOOTER },
-            React__default.createElement(Text, null, value ? uuiDayjs.dayjs(value).format('MMM DD, YYYY') : ''),
-            React__default.createElement(FlexSpacer, null),
-            React__default.createElement(LinkButton, { isDisabled: !value, caption: i18n.filterToolbar.datePicker.clearCaption, onClick: () => onValueChange(undefined) }))));
-}
+const useColumnsWithFilters = (initialColumns, filters) => {
+    const makeFilterRenderCallback = useCallback((key) => function (filterLens, dropdownProps) {
+        const filter = filters?.find((f) => f.columnKey === key);
+        if (!filter)
+            return null;
+        const props = filterLens
+            .onChange((oldFilter, newFilter) => normalizeFilterWithPredicates(newFilter))
+            .prop(filter.field)
+            .toProps();
+        return React__default.createElement(FilterColumnBody, { ...props, ...filter, ...dropdownProps });
+    }, [filters]);
+    const columns = useMemo(() => {
+        if (filters) {
+            const filterKeys = filters.map((f) => f.columnKey);
+            const newColumns = (initialColumns.map((column) => {
+                if (filterKeys.includes(column.key)) {
+                    return {
+                        ...column,
+                        renderFilter: makeFilterRenderCallback(column.key),
+                    };
+                }
+                else {
+                    return column;
+                }
+            }));
+            return newColumns;
+        }
+        return initialColumns;
+    }, [filters, initialColumns]);
+    return columns;
+};
 
-function FilterDatePickerBody(props) {
-    const { value } = props;
-    const context = useUuiContext();
-    const handleValueChange = (newValue) => {
-        props.onValueChange(newValue);
-        if (props.getValueChangeAnalyticsEvent) {
-            const event = props.getValueChangeAnalyticsEvent(newValue, value);
-            context.uuiAnalytics.sendEvent(event);
+var css$r = {"unpin-icon":"PgNXu7","unpinIcon":"PgNXu7","pin-toggler-icon":"gEjRnd","pinTogglerIcon":"gEjRnd"};
+
+function PinIconButton(props) {
+    const i18nLocal = i18n.tables.columnsConfigurationModal;
+    const { onTogglePin, pinPosition, canUnpin, } = props;
+    const isPinned = !!pinPosition;
+    const isPinnedAlways = isPinned && !canUnpin;
+    let pinUnpinNode;
+    if (isPinned) {
+        const unpinIcon = getUnpinIcon({ isPinnedAlways, pinPosition });
+        const iconTooltip = isPinnedAlways ? i18nLocal.lockedColumnPinButton : i18nLocal.unPinColumnButton;
+        const unpinClickHandler = isPinnedAlways ? undefined : () => onTogglePin(undefined);
+        pinUnpinNode = (React.createElement(Tooltip, { content: iconTooltip, placement: "bottom", color: "inverted" },
+            React.createElement(IconButton, { cx: cx$1(!isPinnedAlways && css$r.unpinIcon, css$r.pinTogglerIcon), icon: unpinIcon, onClick: unpinClickHandler, isDisabled: isPinnedAlways, color: "primary" })));
+    }
+    else {
+        pinUnpinNode = (React.createElement(React.Fragment, null,
+            React.createElement(Tooltip, { content: i18nLocal.pinColumnToTheLeftButton, placement: "bottom", color: "inverted" },
+                React.createElement(IconButton, { cx: css$r.pinTogglerIcon, icon: settings.dataTable.icons.columnsConfigurationModal.pinLeftIcon, onClick: () => onTogglePin('left'), isDisabled: isPinnedAlways })),
+            React.createElement(Tooltip, { content: i18nLocal.pinColumnToTheRightButton, placement: "bottom", color: "inverted" },
+                React.createElement(IconButton, { cx: css$r.pinTogglerIcon, icon: settings.dataTable.icons.columnsConfigurationModal.pinRightIcon, onClick: () => onTogglePin('right'), isDisabled: isPinnedAlways }))));
+    }
+    return pinUnpinNode;
+}
+function getUnpinIcon(params) {
+    const { isPinnedAlways, pinPosition } = params;
+    if (isPinnedAlways) {
+        return settings.dataTable.icons.columnsConfigurationModal.lockIcon;
+    }
+    switch (pinPosition) {
+        case 'left': {
+            return settings.dataTable.icons.columnsConfigurationModal.pinLeftIcon;
         }
-        if (newValue) {
-            props.onClose?.();
+        case 'right': {
+            return settings.dataTable.icons.columnsConfigurationModal.pinRightIcon;
         }
-    };
-    const handleBodyChange = (newValue) => {
-        if (newValue && value !== newValue) {
-            handleValueChange(newValue);
+        default: {
+            return;
         }
-    };
-    function renderFooter() {
-        const footerProps = {
-            value,
-            onValueChange: handleValueChange,
-        };
-        return props.renderFooter ? props.renderFooter(footerProps) : React__default.createElement(FilterDatePickerBodyFooter, { ...footerProps });
     }
-    return (React__default.createElement(Fragment, null,
-        React__default.createElement(FlexRow, { borderBottom: true },
-            React__default.createElement(DatePickerBody, { filter: props.filter, value: value, onValueChange: handleBodyChange, renderDay: props.renderDay, isHoliday: props.isHoliday, rawProps: props.rawProps?.body })),
-        renderFooter()));
 }
 
-const UUI_FILTERS_PANEL_RDTP_FOOTER = 'uui-filters-panel-rdtp-footer';
-function FilterRangeDatePickerBodyFooter(props) {
-    const shouldShowClearButton = (!props.preventEmptyToDate || !props.preventEmptyFromDate) && !props.disableClear;
-    return (React__default.createElement(FlexCell, { alignSelf: "stretch" },
-        React__default.createElement(FlexRow, { cx: UUI_FILTERS_PANEL_RDTP_FOOTER },
-            React__default.createElement(RangeDatePickerInput, { size: settings.filtersPanel.sizes.rangeDatePickerInput, disableClear: props.disableClear, inFocus: props.inFocus, format: props.format, value: props.value, onValueChange: props.onValueChange, onFocusInput: (event, inputType) => {
-                    if (props.onFocus) {
-                        props.onFocus(event, inputType);
-                    }
-                    props.setInFocus(inputType);
-                }, onBlurInput: props.onBlur, preventEmptyFromDate: props.preventEmptyFromDate, preventEmptyToDate: props.preventEmptyToDate }),
-            React__default.createElement(FlexSpacer, null),
-            shouldShowClearButton && (React__default.createElement(LinkButton, { isDisabled: !props.value.from && !props.value.to, caption: i18n.filterToolbar.rangeDatePicker.clearCaption, onClick: props.onClear })))));
-}
+var css$q = {"row-wrapper":"HqrWXh","rowWrapper":"HqrWXh","pin-icon-button":"jEIrO4","pinIconButton":"jEIrO4","not-pinned":"ptsMZ-","notPinned":"ptsMZ-","checkbox":"LntbW2","drag-handle":"hhhojw","dragHandle":"hhhojw","dnd-disabled":"_39y8GS","dndDisabled":"_39y8GS"};
 
-function FilterRangeDatePickerBody(props) {
-    const { value: _value, format = defaultFormat } = props;
-    const value = _value || defaultRangeValue; // also handles null in comparison to default value
-    const context = useUuiContext();
-    const onOpenChange = (newIsOpen) => {
-        {
-            props.onClose?.();
-        }
-        props.onOpenChange?.(newIsOpen);
+const ColumnRow = /* @__PURE__ */React.memo(function ColumnRow(props) {
+    const { column } = props;
+    const { toggleVisibility, togglePin, onCanAcceptDrop, onDrop, columnConfig, isDndAllowed, isPinnedAlways, } = column;
+    const { isVisible, fix } = columnConfig;
+    const pinPosition = fix || (isPinnedAlways ? 'left' : undefined);
+    const isPinned = !!pinPosition;
+    const data = { column, columnConfig };
+    const renderContent = (dndActorParams) => {
+        const wrapperClasses = cx$1(css$q.rowWrapper, !isPinned && css$q.notPinned, dndActorParams.isDragGhost && uuiDndState.dragGhost, 'uui-dt-columns-config-row');
+        const { onTouchStart, onPointerDown, ...restEventHandlers } = dndActorParams.eventHandlers;
+        const { ref, ...dndActorPropsWithoutRef } = dndActorParams;
+        return (React.createElement(FlexRow, { size: settings.dataTable.sizes.columnsConfigurationModal.columnRow, cx: wrapperClasses, ref: dndActorParams.ref, rawProps: { ...restEventHandlers }, alignItems: "top" },
+            React.createElement(DragHandle, { dragHandleIcon: settings.dataTable.icons.columnsConfigurationModal.dragIndicator, rawProps: { onTouchStart, onPointerDown }, isDisabled: !isDndAllowed, cx: cx$1(css$q.dragHandle, !isDndAllowed && css$q.dndDisabled) }),
+            React.createElement(Checkbox, { key: column.key, label: props.renderItem ? props.renderItem(props.column) : column.caption, value: isVisible, onValueChange: toggleVisibility, isReadonly: column.isAlwaysVisible || column.isLocked, cx: css$q.checkbox }),
+            React.createElement(FlexRow, { size: null, cx: css$q.pinIconButton },
+                React.createElement(PinIconButton, { pinPosition: pinPosition, canUnpin: !isPinnedAlways, onTogglePin: togglePin })),
+            React.createElement(DropMarker, { ...dndActorPropsWithoutRef })));
     };
-    const [inFocus, setInFocus] = useState('from');
-    const onValueChange = (newValue) => {
-        const fromChanged = value?.from !== newValue?.from;
-        const toChanged = value?.to !== newValue?.to;
-        if (fromChanged || toChanged) {
-            props.onValueChange(newValue);
-            if (props.getValueChangeAnalyticsEvent) {
-                const event = props.getValueChangeAnalyticsEvent(newValue, value);
-                context.uuiAnalytics.sendEvent(event);
-            }
+    return (React.createElement(DndActor, { key: column.key, srcData: isDndAllowed && data, dstData: data, canAcceptDrop: onCanAcceptDrop, onDrop: onDrop, render: renderContent }));
+});
+
+var css$p = {"root":"XjlMmM","main-panel":"xP1rU-","mainPanel":"xP1rU-","group":"I-ME2R","group-title":"ZdYRzs","groupTitle":"ZdYRzs","group-items":"Qq8rn1","groupItems":"Qq8rn1","no-data":"ASJA-v","noData":"ASJA-v","no-data-title":"H2kxVC","noDataTitle":"H2kxVC","no-data-sub-title":"YMA3-F","noDataSubTitle":"YMA3-F","h-divider":"-jVy-h","hDivider":"-jVy-h","search-area":"VHak-q","searchArea":"VHak-q","subgroup-accordion":"i-2omt","subgroupAccordion":"i-2omt","subgroup":"PrFSBb","subgroup-title":"_354tAm","subgroupTitle":"_354tAm"};
+
+const renderGroupTitle = (title, amount) => (React.createElement(FlexRow, { cx: css$p.group },
+    React.createElement(Text, { size: "none", cx: css$p.groupTitle }, title),
+    React.createElement(CountIndicator, { caption: amount, color: "neutral", size: settings.dataTable.sizes.columnsConfigurationModal.countIndicator }),
+    React.createElement(FlexSpacer, null)));
+function ColumnsConfigurationModal(props) {
+    const i18n$1 = i18n.tables.columnsConfigurationModal;
+    const { columns, columnsConfig: initialColumnsConfig, defaultConfig, ...modalProps } = props;
+    const { groupedColumns, searchValue, columnsConfig, reset, checkAll, uncheckAll, setSearchValue, hasAnySelectedColumns, } = useColumnsConfiguration({
+        initialColumnsConfig,
+        columns,
+        defaultConfig,
+        getSearchFields: props.getSearchFields,
+    });
+    const apply = useCallback(() => modalProps.success(columnsConfig), [columnsConfig, modalProps]);
+    const close = useCallback(() => modalProps.abort(), [modalProps]);
+    const isNoData = useMemo(() => Object.values(groupedColumns).every((v) => !v.length), [groupedColumns]);
+    const renderVisible = () => {
+        const amountPinnedLeft = groupedColumns.displayedPinnedLeft.length;
+        const amountPinnedRight = groupedColumns.displayedPinnedRight.length;
+        const amountUnPinned = groupedColumns.displayedUnpinned.length;
+        const totalAmountOfVisibleColumns = amountPinnedLeft + amountUnPinned + amountPinnedRight;
+        if (!totalAmountOfVisibleColumns) {
+            return null;
         }
+        const hasDividerBelowPinnedLeft = !!(amountPinnedLeft && amountUnPinned);
+        const hasDividerAbovePinnedRight = !!(amountPinnedRight && amountUnPinned);
+        const divider = (React.createElement(FlexRow, { size: null, cx: css$p.hDivider }));
+        return (React.createElement(React.Fragment, null,
+            renderGroupTitle(i18n$1.displayedSectionTitle, totalAmountOfVisibleColumns),
+            React.createElement(SubGroup, { renderItem: props.renderItem, title: i18n$1.pinnedToTheLeftSubgroupTitle, items: groupedColumns.displayedPinnedLeft }),
+            hasDividerBelowPinnedLeft && divider,
+            React.createElement(SubGroup, { renderItem: props.renderItem, title: i18n$1.notPinnedSubgroupTitle, items: groupedColumns.displayedUnpinned }),
+            hasDividerAbovePinnedRight && divider,
+            React.createElement(SubGroup, { renderItem: props.renderItem, title: i18n$1.pinnedToTheRightSubgroupTitle, items: groupedColumns.displayedPinnedRight })));
     };
-    const onBodyValueChange = (newValue) => {
-        setInFocus(newValue.inFocus ?? inFocus);
-        onValueChange(newValue.selectedDate);
-        const toChanged = value.to !== newValue.selectedDate.to;
-        const closeBody = newValue.selectedDate.from && newValue.selectedDate.to
-            && inFocus === 'to'
-            && toChanged;
-        if (closeBody) {
-            onOpenChange(false);
+    const renderHidden = () => {
+        const items = groupedColumns.hidden;
+        const title = renderGroupTitle(i18n$1.hiddenSectionTitle, items.length);
+        if (!items.length) {
+            return null;
         }
+        return (React.createElement(React.Fragment, null,
+            title,
+            React.createElement(SubGroup, { renderItem: props.renderItem, items: items })));
     };
-    const onClear = () => {
-        const newValue = {
-            from: props.preventEmptyFromDate ? value.from : null,
-            to: props.preventEmptyToDate ? value.to : null,
-        };
-        onValueChange(newValue);
-    };
-    function renderFooter() {
-        const footerProps = {
-            value,
-            onValueChange,
-            format: format,
-            disableClear: props.disableClear,
-            preventEmptyFromDate: props.preventEmptyFromDate,
-            preventEmptyToDate: props.preventEmptyToDate,
-            onFocus: props.onFocus,
-            onBlur: props.onBlur,
-            inFocus,
-            setInFocus,
-            onClear,
-        };
-        return props.renderFooter ? props.renderFooter(footerProps) : React__default.createElement(FilterRangeDatePickerBodyFooter, { ...footerProps });
-    }
-    return (React__default.createElement(Fragment, null,
-        React__default.createElement(FlexRow, { borderBottom: true },
-            React__default.createElement(RangeDatePickerBody, { value: {
-                    selectedDate: value,
-                    inFocus,
-                }, onValueChange: onBodyValueChange, filter: props.filter, presets: props.presets })),
-        renderFooter()));
+    const applyButton = React.createElement(Button, { caption: i18n$1.applyButton, isDisabled: !hasAnySelectedColumns, color: "primary", onClick: apply });
+    return (React.createElement(ModalBlocker, { ...modalProps },
+        React.createElement(ModalWindow, { cx: [css$p.root, 'uui-columns-config-modal'], height: "95dvh", maxHeight: "95dvh" },
+            React.createElement(ModalHeader, { title: i18n$1.configureColumnsTitle, onClose: close }),
+            React.createElement(FlexRow, { borderBottom: true, cx: css$p.searchArea },
+                React.createElement(SearchInput, { size: settings.dataTable.sizes.columnsConfigurationModal.searchInput, value: searchValue, onValueChange: setSearchValue, placeholder: i18n$1.searchPlaceholder }),
+                React.createElement(Dropdown, { closeOnTargetClick: true, renderBody: () => (React.createElement(DropdownMenuBody, { minWidth: 100 },
+                        React.createElement(DropdownMenuButton, { caption: i18n$1.clearAllButton, onClick: uncheckAll }),
+                        React.createElement(DropdownMenuButton, { caption: i18n$1.selectAllButton, onClick: checkAll }))), renderTarget: (props) => (React.createElement(Button, { ...props, fill: "none", icon: settings.dataTable.icons.columnsConfigurationModal.menuIcon, size: settings.dataTable.sizes.columnsConfigurationModal.menuButton, color: "secondary", isDropdown: false })) })),
+            React.createElement(Panel, { background: "surface-main", cx: css$p.mainPanel },
+                React.createElement(ScrollBars, null,
+                    renderVisible(),
+                    renderHidden(),
+                    isNoData && (React.createElement(FlexRow, { cx: css$p.noData },
+                        React.createElement(Text, { cx: css$p.noDataTitle }, i18n$1.noResultsFound.title),
+                        React.createElement(Text, { cx: css$p.noDataSubTitle }, i18n$1.noResultsFound.subTitle))))),
+            React.createElement(ModalFooter, { borderTop: true },
+                React.createElement(LinkButton, { icon: settings.dataTable.icons.columnsConfigurationModal.resetIcon, caption: i18n$1.resetToDefaultButton, onClick: reset }),
+                React.createElement(FlexSpacer, null),
+                React.createElement(Button, { fill: "none", color: "secondary", caption: i18n$1.cancelButton, onClick: close }),
+                !hasAnySelectedColumns ? (React.createElement(Tooltip, { content: i18n$1.enableAtLeastOneColumnMessage, placement: "top-end", color: "critical" }, applyButton)) : (applyButton)))));
 }
-
-var css$r = {"container":"_2KOlKI"};
-
-function FilterNumericBody(props) {
-    const isInRangePredicate = props?.selectedPredicate === 'inRange' || props?.selectedPredicate === 'notInRange';
-    const isWrongRange = (from, to) => {
-        if (!to && to !== 0)
-            return false;
-        return from > to;
-    };
-    const rangeValueHandler = (type) => (val) => {
-        const value = props.value;
-        switch (type) {
-            case 'from': {
-                props.onValueChange({
-                    from: val,
-                    to: value?.to ?? null,
-                });
-                break;
-            }
-            case 'to': {
-                props.onValueChange({
-                    from: value?.from ?? null,
-                    to: val,
-                });
-                break;
-            }
+function SubGroup(props) {
+    const [isExpanded, setIsExpanded] = useState(true);
+    const { title, items, renderItem } = props;
+    const isCollapsible = !!title;
+    if (items.length) {
+        const content = (React.createElement(FlexRow, { cx: css$p.groupItems, size: settings.dataTable.sizes.columnsConfigurationModal.columnRow }, items.map((c) => (React.createElement(ColumnRow, { column: c, key: c.key, renderItem: renderItem })))));
+        if (isCollapsible) {
+            const renderTitle = (isOpened) => {
+                const toggleIcon = settings.dataTable.icons.columnsConfigurationModal[isOpened ? 'expandedIcon' : 'collapsedIcon'];
+                return (React.createElement(FlexRow, { cx: cx$1(css$p.subgroup) },
+                    React.createElement(IconContainer, { icon: toggleIcon }),
+                    React.createElement(Text, { size: "none", color: "tertiary", cx: css$p.subgroupTitle }, title)));
+            };
+            return (React.createElement(Accordion$1, { value: isExpanded, onValueChange: setIsExpanded, renderTitle: renderTitle, cx: css$p.subgroupAccordion }, content));
         }
-    };
-    const renderFooter = () => {
-        const clearSelection = () => {
-            if (isInRangePredicate) {
-                props.onValueChange({
-                    from: undefined,
-                    to: undefined,
-                });
-            }
-            else {
-                props.onValueChange(undefined);
-            }
-        };
-        const isClearDisabled = typeof props.value !== 'number' && typeof props.value !== 'object';
-        return (React__default.createElement(FlexRow, { padding: "12" },
-            React__default.createElement(FlexSpacer, null),
-            React__default.createElement(FlexCell, { width: "auto", alignSelf: "center" },
-                React__default.createElement(LinkButton, { isDisabled: isClearDisabled, size: settings.filtersPanel.sizes[isMobile() ? 'mobileFooterLinkButton' : 'footerLinkButton'], caption: i18n.pickerInput.clearSelectionButtonSingle, onClick: clearSelection }))));
-    };
-    if (isInRangePredicate) {
-        const value = props.value;
-        return (React__default.createElement("div", null,
-            React__default.createElement(FlexRow, { padding: "12", alignItems: "center", columnGap: "12", borderBottom: true, cx: css$r.container },
-                React__default.createElement(FlexCell, { width: "100%" },
-                    React__default.createElement(NumericInput, { size: settings.filtersPanel.sizes.default, value: value?.from ?? null, onValueChange: rangeValueHandler('from'), placeholder: "Min", formatOptions: { maximumFractionDigits: 2 } })),
-                React__default.createElement(FlexCell, { width: "100%" },
-                    React__default.createElement(NumericInput, { size: settings.filtersPanel.sizes.default, value: value?.to ?? null, onValueChange: rangeValueHandler('to'), placeholder: "Max", formatOptions: { maximumFractionDigits: 2 }, isInvalid: isWrongRange(value?.from, value?.to) }))),
-            renderFooter()));
+        return content;
     }
-    return (React__default.createElement("div", null,
-        React__default.createElement(FlexRow, { padding: "12", alignItems: "center", borderBottom: true, cx: css$r.container },
-            React__default.createElement(FlexCell, { width: 130 },
-                React__default.createElement(NumericInput, { size: settings.filtersPanel.sizes.default, value: typeof props.value === 'number' ? props.value : null, onValueChange: props.onValueChange, placeholder: "Enter a number", formatOptions: { maximumFractionDigits: 2 } }))),
-        renderFooter()));
+    return null;
 }
 
-function FilterItemBody(props) {
-    switch (props.type) {
-        case 'singlePicker':
-            return React__default.createElement(FilterPickerBody, { ...props, selectionMode: "single", valueType: "id" });
-        case 'numeric':
-            return React__default.createElement(FilterNumericBody, { ...props });
-        case 'multiPicker':
-            return React__default.createElement(FilterPickerBody, { ...props, selectionMode: "multi", valueType: "id" });
-        case 'datePicker':
-            return React__default.createElement(FilterDatePickerBody, { ...props, format: props.format || 'DD/MM/YYYY' });
-        case 'rangeDatePicker':
-            return React__default.createElement(FilterRangeDatePickerBody, { ...props, format: props.format || 'DD/MM/YYYY', value: props.value || { from: null, to: null } });
-        case 'custom':
-            return props.render(props);
+const getChildrenAndRest = (row, rows) => {
+    const firstNotChildIndex = rows.findIndex((other) => other.depth < row.depth || (row.depth === other.depth && other.isPinned));
+    if (firstNotChildIndex === -1) {
+        return [rows, []];
     }
-}
+    if (firstNotChildIndex === 0) {
+        return [[], rows];
+    }
+    const children = rows.slice(0, firstNotChildIndex);
+    const rest = rows.slice(firstNotChildIndex, rows.length);
+    return [children, rest];
+};
 
-var css$q = {"body":"_38deit","header":"PfpwqR","title":"qV9H5T","removeButton":"W3mfp8","with-search":"zO7Iv-","withSearch":"zO7Iv-"};
+var css$o = {"listContainer":"IP-lCK","header":"ZVtQ-Y","group":"EYSSZW","stickyHeader":"_2RXqqB"};
 
-function useView(props, value) {
-    const forceUpdate = useForceUpdate();
-    let useViewFn;
-    const dataSourceState = {};
-    if (props.type === 'singlePicker' || props.type === 'multiPicker') {
-        useViewFn = props.dataSource.useView.bind(props.dataSource);
-        if (props.type === 'singlePicker') {
-            dataSourceState.selectedId = value;
-        }
-        if (props.type === 'multiPicker') {
-            dataSourceState.checked = value;
-        }
-    }
-    return useViewFn?.(dataSourceState, forceUpdate, { showSelectedOnly: true });
-}
-function FiltersToolbarItemImpl(props) {
+function DataRowsGroup({ row, childRows, renderRow, top = 1, }) {
+    const rowRef = useRef(undefined);
+    const childrenPinnedTop = row.isPinned ? (top + (rowRef.current?.clientHeight ?? 0)) : top;
+    return (React__default.createElement("div", { className: css$o.group, key: row.rowKey },
+        React__default.createElement("div", { className: row.isPinned ? css$o.stickyHeader : css$o.header, 
+            // Gaps between pinned parents should be removed by -1 from top height.
+            // Otherwise, sometimes top value is rounded top.
+            style: { zIndex: row.depth + 10, top: top - 1 }, ref: rowRef }, renderRow(row)),
+        childRows.length > 0 && (React__default.createElement("div", null,
+            React__default.createElement(DataRowsGroups, { rows: childRows, renderRow: renderRow, top: childrenPinnedTop })))));
+}
+const renderRows = (rows, renderRow, top) => {
+    if (!rows.length)
+        return [];
+    const [row, ...rest] = rows;
+    if (!rest.length) {
+        return [renderRow(row)];
+    }
+    const [next] = rest;
+    if (next.depth <= row.depth && !row.isPinned) {
+        return [renderRow(row)].concat(renderRows(rest, renderRow, top));
+    }
+    const [children, otherRows] = getChildrenAndRest(row, rest);
+    const group = (React__default.createElement(DataRowsGroup, { row: row, childRows: children, renderRow: renderRow, top: top, key: row.rowKey }));
+    return [group].concat(renderRows(otherRows, renderRow, top));
+};
+function DataRowsGroups({ rows, renderRow, top = 1, }) {
+    const rowsWithGroups = renderRows(rows, renderRow, top);
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return (React__default.createElement(React__default.Fragment, null, rowsWithGroups));
+}
+
+function DataRowsContainer({ estimatedHeight, listContainerRef, offsetY, rows, renderRow, headerRef, }) {
+    return (React__default.createElement("div", { className: cx(css$o.listContainer, 'uui-dt-data_row_container'), style: { minHeight: `${estimatedHeight}px` } },
+        React__default.createElement("div", { ref: listContainerRef, role: "rowgroup", style: { marginTop: offsetY } },
+            React__default.createElement(DataRowsGroups, { rows: rows, renderRow: renderRow, top: headerRef?.current?.clientHeight }))));
+}
+
+var css$n = {"root":"Sgq252","sticky-header":"D2QEgn","stickyHeader":"D2QEgn","no-results":"w1vRX8","noResults":"w1vRX8","icon":"kYP-6P","title":"IEbCHB"};
+
+function DataTable(props) {
+    const { uuiModals } = useUuiContext();
+    const headerRef = React.useRef(undefined);
+    const columnsWithFilters = useColumnsWithFilters(props.columns, props.filters);
+    const { columns, config, defaultConfig } = useColumnsConfig(columnsWithFilters, props.value?.columnsConfig);
+    const defaultRenderRow = React.useCallback((rowProps) => {
+        return (React.createElement(DataTableRow, { size: props.size || settings.dataTable.sizes.body.row, columnsGap: props.columnsGap, borderBottom: props.border, ...rowProps, key: rowProps.rowKey, cx: css$n.cell }));
+    }, []);
+    const renderRow = (row) => (props.renderRow ?? defaultRenderRow)({ ...row, columns });
+    const rows = props.getRows?.() ?? props.rows ?? [];
+    const renderNoResultsBlock = React.useCallback(() => {
+        return (React.createElement("div", { className: css$n.noResults }, props.renderNoResultsBlock ? (props.renderNoResultsBlock?.()) : (React.createElement(React.Fragment, null,
+            React.createElement(IconContainer, { cx: css$n.icon, icon: settings.dataTable.icons.emptyTable }),
+            React.createElement(Text, { cx: css$n.title, fontSize: "24", lineHeight: "30", color: "primary", fontWeight: "600" }, i18n.tables.noResultsBlock.title),
+            React.createElement(Text, { fontSize: "16", lineHeight: "24", color: "primary" }, i18n.tables.noResultsBlock.message)))));
+    }, [props.renderNoResultsBlock]);
+    const onConfigurationButtonClick = React.useCallback(() => {
+        const configProps = { columns: props.columns, columnsConfig: { ...config }, defaultConfig };
+        uuiModals
+            .show((modalProps) => {
+            return (props.renderColumnsConfigurationModal
+                ? props.renderColumnsConfigurationModal({ ...configProps, ...modalProps })
+                : (React.createElement(ColumnsConfigurationModal, { ...modalProps, columns: props.columns, columnsConfig: config, defaultConfig: defaultConfig })));
+        })
+            .then((columnsConfig) => props.onValueChange({ ...props.value, columnsConfig }))
+            .catch(() => null);
+    }, [
+        props.columns, config, defaultConfig, props.value, props.onValueChange, props.renderColumnsConfigurationModal,
+    ]);
+    const renderRowsContainer = React.useCallback(({ listContainerRef, estimatedHeight, offsetY, scrollShadows }) => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: cx$1(css$n.stickyHeader, 'uui-dt-sticky_header'), ref: headerRef },
+            React.createElement(DataTableHeaderRow, { columns: columns, columnGroups: props.columnGroups, onConfigButtonClick: props.showColumnsConfig && onConfigurationButtonClick, selectAll: props.selectAll, size: props.headerSize || settings.dataTable.sizes.header.row, textCase: props.headerTextCase, allowColumnsReordering: props.allowColumnsReordering, allowColumnsResizing: props.allowColumnsResizing, showFoldAll: props.showFoldAll, value: { ...props.value, columnsConfig: config }, onValueChange: props.onValueChange, columnsGap: props.columnsGap }),
+            React.createElement("div", { className: cx$1(uuiScrollShadows.top, {
+                    [uuiScrollShadows.topVisible]: scrollShadows.verticalTop,
+                }) })),
+        props.exactRowsCount !== 0 ? (React.createElement(DataRowsContainer, { headerRef: headerRef, listContainerRef: listContainerRef, estimatedHeight: estimatedHeight, offsetY: offsetY, scrollShadows: scrollShadows, renderRow: renderRow, rows: rows })) : (renderNoResultsBlock?.()))), [
+        props, columns, rows, renderNoResultsBlock, onConfigurationButtonClick,
+    ]);
+    return (React.createElement(DataTableSelectionProvider, { onCopy: props.onCopy, rows: rows, columns: columns },
+        React.createElement(DataTableFocusProvider, { dataTableFocusManager: props.dataTableFocusManager },
+            React.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, onScroll: props.onScroll, rowsCount: props.rowsCount, renderRows: renderRowsContainer, cx: cx$1(css$n.root, props.cx, 'uui-dt-vars', 'uui-data_table'), isLoading: props.isReloading, rowsSelector: "[role=row]", rawProps: {
+                    role: 'table',
+                    'aria-colcount': columns.length,
+                    'aria-rowcount': props.rowsCount,
+                } }))));
+}
+
+var css$m = {"root":"Qcghyd","title-wrapper":"EJWZMK","titleWrapper":"EJWZMK","title":"qUE-ge","text-wrapper":"_0RCvXA","textWrapper":"_0RCvXA","selection":"l7Mkx-","postfix":"_02Rn5U","selected":"VAO5TQ"};
+
+const FilterPanelItemToggler = /* @__PURE__ */React.forwardRef((props, ref) => {
+    const togglerPickerOpened = (e) => {
+        if (props.isDisabled)
+            return;
+        e.preventDefault();
+        !isEventTargetInsideClickable(e) && props.onClick?.();
+    };
+    const onKeyDownHandler = (e) => {
+        if (props.isDisabled)
+            return;
+        if (e.key === 'Enter' && !props.isOpen) {
+            e.preventDefault();
+            props.toggleDropdownOpening(true);
+        }
+        if (e.key === 'Escape' && props.isOpen) {
+            e.preventDefault();
+            props.toggleDropdownOpening(false);
+        }
+    };
+    const getTitle = props.predicateName ? `${props.title} ${props.predicateName}` : `${props.title}${props.selection ? ':' : ''}`;
+    const getSelectionText = () => props.selection.map((i, index) => (React.createElement(React.Fragment, { key: `${i}${index}` },
+        React.createElement("div", { className: cx(css$m.selection, UUI_FILTERS_PANEL_ITEM_TOGGLER_SELECTION) }, i),
+        (props.postfix || index !== props.selection.length - 1) && React.createElement("span", null, ",\u00A0"))));
+    return (React.createElement("div", { style: { maxWidth: `${props.maxWidth ? props.maxWidth + 'px' : 'auto'}` }, role: "button", tabIndex: props.isDisabled ? -1 : 0, onKeyDown: onKeyDownHandler, className: cx(UUI_FILTERS_PANEL_ITEM_TOGGLER, css$m.root, uuiElement.inputBox, uuiMarkers.clickable, props.isOpen && uuiMod.opened, props.selection?.length > 0 && uuiMarkers.hasValue, `uui-size-${props.size || settings.pickerInput.sizes.toggler.default}`, props.cx), onClick: togglerPickerOpened, ref: ref },
+        React.createElement("div", { className: css$m.titleWrapper },
+            React.createElement("div", { className: cx(css$m.title, UUI_FILTERS_PANEL_ITEM_TOGGLER_TITLE) }, getTitle),
+            props.selection && (React.createElement("div", { className: css$m.textWrapper },
+                getSelectionText(),
+                props.postfix && (React.createElement("div", { className: cx(css$m.postfix, UUI_FILTERS_PANEL_ITEM_TOGGLER_POSTFIX) }, props.postfix))))),
+        !props.isDisabled && React.createElement(IconContainer, { icon: settings.filtersPanel.icons.itemDropdownIcon, flipY: props.isOpen, cx: "uui-icon-dropdown" })));
+});
+
+const defaultPredicates = {
+    numeric: [
+        { predicate: 'eq', name: '=', isDefault: true }, { predicate: 'neq', name: '≠' }, { predicate: 'lte', name: '≤' }, { predicate: 'gte', name: '≥' }, { predicate: 'inRange', name: 'In Range' },
+    ],
+    multiPicker: [{ predicate: 'in', name: 'is', isDefault: true }, { predicate: 'nin', name: 'is not' }],
+    rangeDatePicker: [{ predicate: 'inRange', name: 'In Range', isDefault: true }, { predicate: 'notInRange', name: 'Not in Range' }],
+};
+const getDefaultPredicate = (predicates, value) => {
+    if (!predicates) {
+        return null;
+    }
+    return Object.keys(value || {})[0]
+        || predicates.find((i) => i.isDefault)?.predicate
+        || predicates?.[0].predicate;
+};
+
+const pickerHeight = 300;
+function FilterPickerBody({ highlightSearchMatches = true, ...restProps }) {
+    const props = { ...restProps, highlightSearchMatches };
+    const [dsState, setDsState] = useState({
+        focusedIndex: 0,
+        topIndex: 0,
+        visibleCount: 20,
+        checked: [],
+    });
+    const { showSelected, setShowSelected } = useShowSelected({ dataSourceState: dsState });
+    const { view, getName, dataSourceState, getListProps, handleDataSourceValueChange, clearSelection, } = usePickerApi({ ...props, dataSourceState: dsState, setDataSourceState: setDsState, showSelectedOnly: showSelected });
+    const prevValue = usePrevious(props.value);
+    const prevOpened = usePrevious(props.isOpen);
+    React.useLayoutEffect(() => {
+        if (prevOpened === props.isOpen && props.isOpen
+            && prevValue !== props.value && props.value !== props.emptyValue
+            && props.selectionMode === 'single') {
+            props.onClose();
+        }
+    }, [props.value]);
+    const renderFooter = () => {
+        const footerProps = {
+            view,
+            showSelected: {
+                value: showSelected,
+                onValueChange: setShowSelected,
+            },
+            clearSelection,
+            selectionMode: props.selectionMode,
+            selection: props.value,
+            search: dataSourceState.search,
+        };
+        return props.renderFooter
+            ? props.renderFooter(footerProps)
+            : React.createElement(DataPickerFooter, { ...footerProps, cx: UUI_FILTERS_PANEL_BODY_FOOTER, size: settings.pickerInput.sizes.body.row });
+    };
+    const renderBody = () => {
+        const rows = view.getVisibleRows();
+        const maxHeight = isMobile() ? document.documentElement.clientHeight : props.maxBodyHeight || pickerHeight;
+        const maxWidth = isMobile() ? undefined : 360;
+        const onKeyDown = (e) => handleDataSourceKeyboard({
+            value: dataSourceState,
+            onValueChange: handleDataSourceValueChange,
+            listView: view,
+            searchPosition: 'body',
+            rows,
+        }, e);
+        return (React.createElement(React.Fragment, null,
+            React.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 }),
+            renderFooter()));
+    };
+    return renderBody();
+}
+
+const UUI_FILTERS_PANEL_DTP_FOOTER = 'uui-filters-panel-dtp-footer';
+function FilterDatePickerBodyFooter({ value, onValueChange }) {
+    return (React__default.createElement(FlexCell, { alignSelf: "stretch" },
+        React__default.createElement(FlexRow, { cx: UUI_FILTERS_PANEL_DTP_FOOTER },
+            React__default.createElement(Text, null, value ? uuiDayjs.dayjs(value).format('MMM DD, YYYY') : ''),
+            React__default.createElement(FlexSpacer, null),
+            React__default.createElement(LinkButton, { isDisabled: !value, caption: i18n.filterToolbar.datePicker.clearCaption, onClick: () => onValueChange(undefined) }))));
+}
+
+function FilterDatePickerBody(props) {
+    const { value } = props;
+    const context = useUuiContext();
+    const handleValueChange = (newValue) => {
+        props.onValueChange(newValue);
+        if (props.getValueChangeAnalyticsEvent) {
+            const event = props.getValueChangeAnalyticsEvent(newValue, value);
+            context.uuiAnalytics.sendEvent(event);
+        }
+        if (newValue) {
+            props.onClose?.();
+        }
+    };
+    const handleBodyChange = (newValue) => {
+        if (newValue && value !== newValue) {
+            handleValueChange(newValue);
+        }
+    };
+    function renderFooter() {
+        const footerProps = {
+            value,
+            onValueChange: handleValueChange,
+        };
+        return props.renderFooter ? props.renderFooter(footerProps) : React__default.createElement(FilterDatePickerBodyFooter, { ...footerProps });
+    }
+    return (React__default.createElement(Fragment, null,
+        React__default.createElement(FlexRow, { borderBottom: true },
+            React__default.createElement(DatePickerBody, { filter: props.filter, value: value, onValueChange: handleBodyChange, renderDay: props.renderDay, isHoliday: props.isHoliday, rawProps: props.rawProps?.body })),
+        renderFooter()));
+}
+
+const UUI_FILTERS_PANEL_RDTP_FOOTER = 'uui-filters-panel-rdtp-footer';
+function FilterRangeDatePickerBodyFooter(props) {
+    const shouldShowClearButton = (!props.preventEmptyToDate || !props.preventEmptyFromDate) && !props.disableClear;
+    return (React__default.createElement(FlexCell, { alignSelf: "stretch" },
+        React__default.createElement(FlexRow, { cx: UUI_FILTERS_PANEL_RDTP_FOOTER },
+            React__default.createElement(RangeDatePickerInput, { size: settings.filtersPanel.sizes.rangeDatePickerInput, disableClear: props.disableClear, inFocus: props.inFocus, format: props.format, value: props.value, onValueChange: props.onValueChange, onFocusInput: (event, inputType) => {
+                    if (props.onFocus) {
+                        props.onFocus(event, inputType);
+                    }
+                    props.setInFocus(inputType);
+                }, onBlurInput: props.onBlur, preventEmptyFromDate: props.preventEmptyFromDate, preventEmptyToDate: props.preventEmptyToDate }),
+            React__default.createElement(FlexSpacer, null),
+            shouldShowClearButton && (React__default.createElement(LinkButton, { isDisabled: !props.value.from && !props.value.to, caption: i18n.filterToolbar.rangeDatePicker.clearCaption, onClick: props.onClear })))));
+}
+
+function FilterRangeDatePickerBody(props) {
+    const { value: _value, format = defaultFormat } = props;
+    const value = _value || defaultRangeValue; // also handles null in comparison to default value
+    const context = useUuiContext();
+    const onOpenChange = (newIsOpen) => {
+        {
+            props.onClose?.();
+        }
+        props.onOpenChange?.(newIsOpen);
+    };
+    const [inFocus, setInFocus] = useState('from');
+    const onValueChange = (newValue) => {
+        const fromChanged = value?.from !== newValue?.from;
+        const toChanged = value?.to !== newValue?.to;
+        if (fromChanged || toChanged) {
+            props.onValueChange(newValue);
+            if (props.getValueChangeAnalyticsEvent) {
+                const event = props.getValueChangeAnalyticsEvent(newValue, value);
+                context.uuiAnalytics.sendEvent(event);
+            }
+        }
+    };
+    const onBodyValueChange = (newValue) => {
+        setInFocus(newValue.inFocus ?? inFocus);
+        onValueChange(newValue.selectedDate);
+        const toChanged = value.to !== newValue.selectedDate.to;
+        const closeBody = newValue.selectedDate.from && newValue.selectedDate.to
+            && inFocus === 'to'
+            && toChanged;
+        if (closeBody) {
+            onOpenChange(false);
+        }
+    };
+    const onClear = () => {
+        const newValue = {
+            from: props.preventEmptyFromDate ? value.from : null,
+            to: props.preventEmptyToDate ? value.to : null,
+        };
+        onValueChange(newValue);
+    };
+    function renderFooter() {
+        const footerProps = {
+            value,
+            onValueChange,
+            format: format,
+            disableClear: props.disableClear,
+            preventEmptyFromDate: props.preventEmptyFromDate,
+            preventEmptyToDate: props.preventEmptyToDate,
+            onFocus: props.onFocus,
+            onBlur: props.onBlur,
+            inFocus,
+            setInFocus,
+            onClear,
+        };
+        return props.renderFooter ? props.renderFooter(footerProps) : React__default.createElement(FilterRangeDatePickerBodyFooter, { ...footerProps });
+    }
+    return (React__default.createElement(Fragment, null,
+        React__default.createElement(FlexRow, { borderBottom: true },
+            React__default.createElement(RangeDatePickerBody, { value: {
+                    selectedDate: value,
+                    inFocus,
+                }, onValueChange: onBodyValueChange, filter: props.filter, presets: props.presets })),
+        renderFooter()));
+}
+
+var css$l = {"container":"lIs0PD"};
+
+function FilterNumericBody(props) {
+    const isInRangePredicate = props?.selectedPredicate === 'inRange' || props?.selectedPredicate === 'notInRange';
+    const isWrongRange = (from, to) => {
+        if (!to && to !== 0)
+            return false;
+        return from > to;
+    };
+    const rangeValueHandler = (type) => (val) => {
+        const value = props.value;
+        switch (type) {
+            case 'from': {
+                props.onValueChange({
+                    from: val,
+                    to: value?.to ?? null,
+                });
+                break;
+            }
+            case 'to': {
+                props.onValueChange({
+                    from: value?.from ?? null,
+                    to: val,
+                });
+                break;
+            }
+        }
+    };
+    const renderFooter = () => {
+        const clearSelection = () => {
+            if (isInRangePredicate) {
+                props.onValueChange({
+                    from: undefined,
+                    to: undefined,
+                });
+            }
+            else {
+                props.onValueChange(undefined);
+            }
+        };
+        const isClearDisabled = typeof props.value !== 'number' && typeof props.value !== 'object';
+        return (React__default.createElement(FlexRow, { padding: "12" },
+            React__default.createElement(FlexSpacer, null),
+            React__default.createElement(FlexCell, { width: "auto", alignSelf: "center" },
+                React__default.createElement(LinkButton, { isDisabled: isClearDisabled, size: settings.filtersPanel.sizes[isMobile() ? 'mobileFooterLinkButton' : 'footerLinkButton'], caption: i18n.pickerInput.clearSelectionButtonSingle, onClick: clearSelection }))));
+    };
+    if (isInRangePredicate) {
+        const value = props.value;
+        return (React__default.createElement("div", null,
+            React__default.createElement(FlexRow, { padding: "12", alignItems: "center", columnGap: "12", borderBottom: true, cx: css$l.container },
+                React__default.createElement(FlexCell, { width: "100%" },
+                    React__default.createElement(NumericInput, { size: settings.filtersPanel.sizes.default, value: value?.from ?? null, onValueChange: rangeValueHandler('from'), placeholder: "Min", formatOptions: { maximumFractionDigits: 2 } })),
+                React__default.createElement(FlexCell, { width: "100%" },
+                    React__default.createElement(NumericInput, { size: settings.filtersPanel.sizes.default, value: value?.to ?? null, onValueChange: rangeValueHandler('to'), placeholder: "Max", formatOptions: { maximumFractionDigits: 2 }, isInvalid: isWrongRange(value?.from, value?.to) }))),
+            renderFooter()));
+    }
+    return (React__default.createElement("div", null,
+        React__default.createElement(FlexRow, { padding: "12", alignItems: "center", borderBottom: true, cx: css$l.container },
+            React__default.createElement(FlexCell, { width: 130 },
+                React__default.createElement(NumericInput, { size: settings.filtersPanel.sizes.default, value: typeof props.value === 'number' ? props.value : null, onValueChange: props.onValueChange, placeholder: "Enter a number", formatOptions: { maximumFractionDigits: 2 } }))),
+        renderFooter()));
+}
+
+function FilterItemBody(props) {
+    switch (props.type) {
+        case 'singlePicker':
+            return React__default.createElement(FilterPickerBody, { ...props, selectionMode: "single", valueType: "id" });
+        case 'numeric':
+            return React__default.createElement(FilterNumericBody, { ...props });
+        case 'multiPicker':
+            return React__default.createElement(FilterPickerBody, { ...props, selectionMode: "multi", valueType: "id" });
+        case 'datePicker':
+            return React__default.createElement(FilterDatePickerBody, { ...props, format: props.format || 'DD/MM/YYYY' });
+        case 'rangeDatePicker':
+            return React__default.createElement(FilterRangeDatePickerBody, { ...props, format: props.format || 'DD/MM/YYYY', value: props.value || { from: null, to: null } });
+        case 'custom':
+            return props.render(props);
+    }
+}
+
+function useView(props, value) {
+    const forceUpdate = useForceUpdate();
+    let useViewFn;
+    const dataSourceState = {};
+    if (props.type === 'singlePicker' || props.type === 'multiPicker') {
+        useViewFn = props.dataSource.useView.bind(props.dataSource);
+        if (props.type === 'singlePicker') {
+            dataSourceState.selectedId = value;
+        }
+        if (props.type === 'multiPicker') {
+            dataSourceState.checked = value;
+        }
+    }
+    return useViewFn?.(dataSourceState, forceUpdate, { showSelectedOnly: true });
+}
+function FiltersToolbarItemImpl(props) {
     const { maxCount = 2 } = props;
     const isPickersType = props?.type === 'multiPicker' || props?.type === 'singlePicker';
     const isMobileScreen = isMobile();
+    const hideHeaderTitle = isPickersType && isMobileScreen;
     const floatingMiddleware = useMemo(() => {
         const middleware = [
             offset(() => {
@@ -4430,65 +4884,38 @@ function FiltersToolbarItemImpl(props) {
         }
         return middleware;
     }, [isPickersType]);
-    const getDefaultPredicate = () => {
-        if (!props.predicates) {
-            return null;
-        }
-        return Object.keys(props.value || {})[0] || props.predicates.find((i) => i.isDefault)?.predicate || props.predicates?.[0].predicate;
-    };
     const [isOpen, isOpenChange] = useState(props.autoFocus);
-    const [predicate, setPredicate] = useState(getDefaultPredicate());
+    const [predicate, setPredicate] = useState(getDefaultPredicate(props.predicates, props.value));
     const predicateName = React__default.useMemo(() => predicate && props.predicates.find((p) => p.predicate === predicate).name, [predicate]);
-    useEffect(() => {
-        if (props.predicates && Object.keys(props.value || {})[0] && Object.keys(props.value || {})[0] !== predicate) {
-            setPredicate(Object.keys(props.value || {})[0]);
-        }
-    }, [props.value]);
-    const onValueChange = useCallback((value) => {
+    const onValueChange = (value) => {
         if (props.predicates) {
-            props.onValueChange({ [props.field]: { [predicate]: value } });
+            props.onValueChange({ [predicate]: value });
         }
         else {
-            props.onValueChange({ [props.field]: value });
+            props.onValueChange(value);
         }
-    }, [props.field, props.onValueChange]);
-    const removeOnclickHandler = () => {
-        props.removeFilter(props.field);
     };
-    const changePredicate = (val) => {
-        const isInRange = (p) => p === 'inRange' || p === 'notInRange';
-        if (props.type === 'numeric') {
-            let predicateValue = {
-                [props.field]: { [val]: getValue() },
-            };
-            if (isInRange(val) && !isInRange(predicate)) {
-                // from simple predicate -> to Range
-                predicateValue = { [props.field]: { [val]: { from: null, to: null } } };
-            }
-            else if (!isInRange(val) && isInRange(predicate)) {
-                // from Range -> to simple predicate
-                predicateValue = { [props.field]: { [val]: null } };
+    useEffect(() => {
+        // This effect needs when the filter dropdown was closed and opened again
+        if (props.predicates && props.value && Object.keys(props.value).length > 0) {
+            const predicateFromValue = Object.keys(props.value)[0];
+            if (predicateFromValue !== predicate) {
+                setPredicate(predicateFromValue);
             }
-            props.onValueChange(predicateValue);
-        }
-        else {
-            props.onValueChange({ [props.field]: { [val]: getValue() } });
         }
-        setPredicate(val);
+    }, [props.value]);
+    const removeOnclickHandler = () => {
+        props.removeFilter(props.field);
     };
-    const renderHeader = (hideTitle) => (React__default.createElement("div", { className: cx(css$q.header, isPickersType && (props.showSearch ?? css$q.withSearch)) },
-        props.predicates ? (React__default.createElement(MultiSwitch, { items: props.predicates.map((i) => ({ id: i.predicate, caption: i.name })), value: predicate, onValueChange: changePredicate, size: settings.filtersPanel.sizes.pickerBodyMultiSwitch })) : (!hideTitle && (React__default.createElement("div", { className: css$q.title }, props.title))),
-        !props?.isAlwaysVisible && (React__default.createElement(LinkButton, { cx: css$q.removeButton, caption: i18n.filterToolbar.datePicker.removeCaption, onClick: removeOnclickHandler, size: settings.filtersPanel.sizes.pickerBodyLinkButton, icon: settings.filtersPanel.icons.pickerBodyRemoveIcon }))));
+    const renderHeader = (hideTitle) => (React__default.createElement("div", { className: cx(css$s.header, isPickersType && (props.showSearch ?? css$s.withSearch)) },
+        props.predicates ? (React__default.createElement(FilterPredicatePanel, { predicates: props.predicates, predicate: predicate, type: props.type, onValueChange: props.onValueChange, value: props.value, setPredicate: setPredicate })) : (!hideTitle && (React__default.createElement("div", { className: css$s.title }, props.title))),
+        !props?.isAlwaysVisible && (React__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) => {
-        const hideHeaderTitle = isPickersType && isMobileScreen;
-        return isPickersType ? (React__default.createElement(PickerBodyMobileView, { ...dropdownProps, cx: [css$q.body, UUI_FILTERS_PANEL_ITEM_BODY], title: props.title, width: settings.filtersPanel.sizes.pickerBodyMinWidth, onClose: () => isOpenChange(false) },
+        return isPickersType ? (React__default.createElement(PickerBodyMobileView, { ...dropdownProps, cx: [css$s.body, UUI_FILTERS_PANEL_ITEM_BODY], title: props.title, width: settings.filtersPanel.sizes.pickerBodyMinWidth, onClose: () => isOpenChange(false) },
             renderHeader(hideHeaderTitle),
-            React__default.createElement(FilterItemBody, { ...props, ...dropdownProps, selectedPredicate: predicate, value: getValue(), onValueChange: onValueChange }))) : (React__default.createElement(DropdownContainer, { cx: [css$q.body, UUI_FILTERS_PANEL_ITEM_BODY], ...dropdownProps },
+            React__default.createElement(FilterItemBody, { ...props, ...dropdownProps, selectedPredicate: predicate, value: getValue(predicate, props.value), onValueChange: onValueChange }))) : (React__default.createElement(DropdownContainer, { cx: [css$s.body, UUI_FILTERS_PANEL_ITEM_BODY], ...dropdownProps },
             renderHeader(hideHeaderTitle),
-            React__default.createElement(FilterItemBody, { ...props, ...dropdownProps, selectedPredicate: predicate, value: getValue(), onValueChange: onValueChange })));
-    };
-    const getValue = () => {
-        return predicate ? props.value?.[predicate] : props.value;
+            React__default.createElement(FilterItemBody, { ...props, ...dropdownProps, selectedPredicate: predicate, value: getValue(predicate, props.value), onValueChange: onValueChange })));
     };
     const getPickerItemName = (item, config) => {
         if (item.isLoading) {
@@ -4499,9 +4926,9 @@ function FiltersToolbarItemImpl(props) {
         }
         return config.getName ? config.getName(item.value) : item.value.name;
     };
-    const view = useView(props, getValue());
+    const view = useView(props, getValue(predicate, props.value));
     const getTogglerValue = () => {
-        const currentValue = getValue();
+        const currentValue = getValue(predicate, props.value);
         const defaultFormat = 'MMM DD, YYYY';
         switch (props.type) {
             case 'multiPicker': {
@@ -4567,44 +4994,6 @@ function FiltersToolbarItemImpl(props) {
 }
 const FiltersPanelItem = /* @__PURE__ */React__default.memo(FiltersToolbarItemImpl);
 
-const normalizeFilterWithPredicates = (filter) => {
-    if (!filter) {
-        return {};
-    }
-    const result = filter;
-    const keys = Object.keys(filter);
-    for (let n = 0; n < keys.length; n++) {
-        const key = keys[n];
-        const filterValue = filter[key];
-        if (filterValue && typeof filterValue === 'object') {
-            if ('from' in filterValue && 'to' in filterValue) {
-                continue;
-            }
-            if ('in' in filterValue && (!Array.isArray(filterValue.in) || !filterValue.in.length)) {
-                delete filter[key];
-            }
-            if ('nin' in filterValue && (!Array.isArray(filterValue.nin) || !filterValue.nin.length)) {
-                delete filter[key];
-            }
-            if ('inRange' in filterValue) {
-                if (!filterValue.inRange || (!filterValue.inRange.from && !filterValue.inRange.to)) {
-                    delete filter[key];
-                }
-            }
-            if ('notInRange' in filterValue) {
-                if (!filterValue.notInRange || (!filterValue.notInRange.from && !filterValue.notInRange.to)) {
-                    delete filter[key];
-                }
-            }
-            Object.keys(filterValue).forEach((predicate) => {
-                if (filterValue[predicate] === null || filterValue[predicate] === undefined) {
-                    delete filter[key];
-                }
-            });
-        }
-    }
-    return result;
-};
 function FiltersToolbarImpl(props) {
     const { filters, tableState, setTableState, size = (settings.filtersPanel.sizes.default) } = props;
     const [newFilterId, setNewFilterId] = useState(null);
@@ -4637,8 +5026,8 @@ function FiltersToolbarImpl(props) {
             filter: newFilter,
         });
     };
-    const handleFilterChange = (newFilter) => {
-        const filter = normalizeFilterWithPredicates({ ...tableState.filter, ...newFilter });
+    const handleFilterChange = (newFilter, field) => {
+        const filter = normalizeFilterWithPredicates({ ...tableState.filter, [field]: newFilter });
         setTableState({
             ...tableState,
             filter: filter,
@@ -4687,7 +5076,7 @@ function FiltersToolbarImpl(props) {
     }, [newFilterId, sortedActiveFilters]);
     return (React__default.createElement(React__default.Fragment, null,
         sortedActiveFilters.map((f) => (React__default.createElement(FlexCell$1, { width: "auto", key: f.field },
-            React__default.createElement(FiltersPanelItem, { ...f, value: tableState.filter?.[f.field], onValueChange: handleFilterChange, key: f.field, autoFocus: newFilterId === f.field, removeFilter: removeFilter, size: size })))),
+            React__default.createElement(FiltersPanelItem, { ...f, value: tableState.filter?.[f.field], onValueChange: (newFilter) => handleFilterChange(newFilter, f.field), key: f.field, autoFocus: newFilterId === f.field, removeFilter: removeFilter, size: size })))),
         !isAllFiltersAlwaysVisible && (React__default.createElement(PickerInput, { dataSource: dataSource, value: selectedFilters, onValueChange: onFiltersChange, selectionMode: "multi", valueType: "entity", renderRow: (props) => (React__default.createElement(DataPickerRow, { ...props, padding: "12", key: props.key, onCheck: (row) => {
                     props.onCheck && props.onCheck(row);
                     setNewFilterId(row.value.field);
@@ -4695,7 +5084,7 @@ function FiltersToolbarImpl(props) {
 }
 const FiltersPanel = /* @__PURE__ */React__default.memo(FiltersToolbarImpl);
 
-var css$p = {"delete-button":"p8f4QK","deleteButton":"p8f4QK","tab-button":"YPlKC7","tabButton":"YPlKC7","targetOpen":"v7Xv6c"};
+var css$k = {"delete-button":"G-vsF6","deleteButton":"G-vsF6","tab-button":"ukt8Jm","tabButton":"ukt8Jm","targetOpen":"ON2vdE"};
 
 function PresetActionsDropdown(props) {
     const { uuiNotifications } = useUuiContext();
@@ -4754,416 +5143,123 @@ function PresetActionsDropdown(props) {
             React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-copyLink`, icon: settings.presetsPanel.icons.copyLinkIcon, caption: "Copy Link", onClick: copyUrlToClipboard }),
             !isReadonlyPreset && (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(DropdownMenuSplitter, { key: "delete-splitter" }),
-                React__default.createElement(DropdownMenuButton, { icon: settings.presetsPanel.icons.deleteIcon, caption: "Delete", cx: css$p.deleteButton, onClick: deleteHandler })))));
+                React__default.createElement(DropdownMenuButton, { icon: settings.presetsPanel.icons.deleteIcon, caption: "Delete", cx: css$k.deleteButton, onClick: deleteHandler })))));
     };
     const renderTarget = useCallback((dropdownProps) => {
-        return (React__default.createElement(IconButton, { cx: [css$p.tabButton, dropdownProps.isOpen && css$p.targetOpen], color: props.preset.id === props.activePresetId ? 'primary' : 'neutral', ...dropdownProps, icon: settings.presetsPanel.icons.menuIcon, size: settings.presetsPanel.sizes.dropdownTargetIconButton }));
-    }, []);
-    return (React__default.createElement(Dropdown, { renderBody: renderBody, renderTarget: renderTarget, placement: "bottom-end", middleware: [offset(22)] }));
-}
-
-const UUI_PRESETS_PANEL_ADD_BUTTON = 'uui-presets-panel-add-button';
-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$o = {"preset-input-cell":"YV-mX-","presetInputCell":"YV-mX-","preset-input":"cp3R-D","presetInput":"cp3R-D"};
-
-function PresetInput(props) {
-    const [presetCaption, setPresetCaption] = useState(props.preset?.name || '');
-    const [readonly, setReadonly] = useState(false);
-    const cancelActionHandler = useCallback(() => {
-        setPresetCaption('');
-        props.onCancel();
-    }, [props.onCancel]);
-    const acceptActionHandler = useCallback(async () => {
-        setReadonly(() => true);
-        if (presetCaption) {
-            await props.onSuccess(presetCaption);
-        }
-        props.onCancel();
-        setReadonly(() => false);
-    }, [presetCaption]);
-    const newPresetOnBlurHandler = useCallback(() => {
-        if (presetCaption.length) {
-            return;
-        }
-        props.onCancel();
-    }, [presetCaption.length, props.onCancel]);
-    return (React__default.createElement(FlexCell, { cx: [css$o.presetInputCell, UUI_PRESETS_PANEL_INPUT], minWidth: 180 },
-        React__default.createElement(TextInput, { cx: css$o.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50, isReadonly: readonly })));
-}
-
-var css$n = {"preset":"v4dEih","activePreset":"GQBEYQ"};
-
-function Preset(props) {
-    const [isRenamePreset, setIsRenamePreset] = useState(false);
-    const choosePresetHandler = useCallback(() => props.choosePreset(props.preset), [props]);
-    const cancelRenamePreset = useCallback(() => {
-        setIsRenamePreset(() => false);
-    }, []);
-    const setPresetForRename = useCallback(() => {
-        if (!isRenamePreset) {
-            setIsRenamePreset(() => true);
-        }
-    }, []);
-    const handlePresetRename = useCallback((name) => {
-        const newPreset = {
-            ...props.preset,
-            name: name,
-        };
-        return props.updatePreset(newPreset);
-    }, [props.preset]);
-    const isPresetActive = props.activePresetId === props.preset.id;
-    const PresetActionsDropdownComponent = useCallback(() => React__default.createElement(PresetActionsDropdown, { renamePreset: setPresetForRename, ...props }), [props.preset, props.tableState, props.activePresetId]);
-    return (React__default.createElement(FlexCell, { key: props.preset.id, alignSelf: "center", width: "auto" }, isRenamePreset ? (React__default.createElement(PresetInput, { onCancel: cancelRenamePreset, onSuccess: handlePresetRename, preset: props.preset })) : (React__default.createElement(TabButton, { caption: props.preset.name, onClick: !isPresetActive && choosePresetHandler, cx: [css$n.preset, isPresetActive && css$n.activePreset, UUI_PRESETS_PANEL_PRESET], size: settings.presetsPanel.sizes.tabButton, withNotify: isPresetActive && props.hasPresetChanged(props.preset), icon: PresetActionsDropdownComponent, iconPosition: "right", isLinkActive: isPresetActive }))));
-}
-
-var css$m = {"divider":"TG-HIb","dropdownDeleteIcon":"TXplNC","presetsWrapper":"pG6E8M","addPresetContainer":"nEdkxo","dropContainer":"cTodOA"};
-
-function PresetsPanel(props) {
-    const [isAddingPreset, setIsAddingPreset] = useState(false);
-    const setAddingPreset = useCallback(() => {
-        setIsAddingPreset(true);
-    }, []);
-    const cancelAddingPreset = useCallback(() => {
-        setIsAddingPreset(false);
-    }, []);
-    const { presets, ...presetApi } = props;
-    const renderPreset = (preset) => {
-        return React__default.createElement(Preset, { key: preset.id, preset: preset, addPreset: setAddingPreset, ...presetApi });
-    };
-    const renderAddPresetButton = useCallback(() => {
-        return (React__default.createElement("div", { key: "addingPresetBlock", className: css$m.addPresetContainer }, !isAddingPreset ? (React__default.createElement(Button, { cx: UUI_PRESETS_PANEL_ADD_BUTTON, onClick: setAddingPreset, caption: i18n.presetPanel.addCaption, icon: settings.presetsPanel.icons.addIcon, iconPosition: "left", fill: "ghost", color: "primary" })) : (React__default.createElement(PresetInput, { onCancel: cancelAddingPreset, onSuccess: props.createNewPreset }))));
-    }, [isAddingPreset]);
-    const onPresetDropdownSelect = (preset) => {
-        props.choosePreset(preset.preset);
-    };
-    const renderMoreButtonDropdown = (item, hiddenItems) => {
-        return (React__default.createElement(Dropdown, { key: "more", renderTarget: (props) => (React__default.createElement(FlexRow, null,
-                React__default.createElement("div", { className: css$m.divider }),
-                React__default.createElement(Button, { cx: UUI_PRESETS_PANEL_MORE_BUTTON, fill: "ghost", color: "secondary", caption: `${hiddenItems?.length || ''} more`, ...props }))), renderBody: (propsBody) => (React__default.createElement(DropdownMenuBody, { minWidth: 230, maxHeight: 300, ...propsBody },
-                React__default.createElement(ScrollBars, null, hiddenItems.map((hiddenItem) => (React__default.createElement(DropdownMenuButton, { key: hiddenItem.preset.id, onClick: () => onPresetDropdownSelect(hiddenItem), caption: hiddenItem.preset.name, icon: !hiddenItem.preset.isReadonly && settings.presetsPanel.icons.deleteIcon, iconPosition: "right", cx: css$m.dropdownDeleteIcon, onIconClick: !hiddenItem.preset.isReadonly && (() => props.deletePreset(hiddenItem.preset)) })))))) }));
-    };
-    const getPresetPriority = (preset, index) => {
-        return preset.id === props.activePresetId ? 100499 : 1000 - index;
-    };
-    const getPanelItems = () => {
-        return [
-            ...orderBy(props.presets, ({ order }) => order)
-                .map((preset, index) => ({
-                id: preset.id.toString(),
-                render: () => renderPreset(preset),
-                priority: getPresetPriority(preset, index),
-                preset: preset,
-            })),
-            {
-                id: 'collapsedContainer', render: renderMoreButtonDropdown, priority: 100501, collapsedContainer: true,
-            },
-            { id: 'addPreset', render: renderAddPresetButton, priority: 100501 },
-        ];
-    };
-    return (React__default.createElement(FlexCell, { grow: 1, minWidth: 310, rawProps: props.rawProps },
-        React__default.createElement(FlexRow, { size: null, columnGap: "12", cx: css$m.presetsWrapper },
-            React__default.createElement(AdaptivePanel, { items: getPanelItems() }))));
-}
-
-const defaultPredicates = {
-    numeric: [
-        { predicate: 'eq', name: '=', isDefault: true }, { predicate: 'neq', name: '≠' }, { predicate: 'lte', name: '≤' }, { predicate: 'gte', name: '≥' }, { predicate: 'inRange', name: 'In Range' },
-    ],
-    multiPicker: [{ predicate: 'in', name: 'is', isDefault: true }, { predicate: 'nin', name: 'is not' }],
-    rangeDatePicker: [{ predicate: 'inRange', name: 'In Range', isDefault: true }, { predicate: 'notInRange', name: 'Not in Range' }],
-};
-
-const useColumnsWithFilters = (initialColumns, filters) => {
-    const makeFilterRenderCallback = useCallback((key) => function (filterLens, dropdownProps) {
-        const filter = filters?.find((f) => f.columnKey === key);
-        if (!filter)
-            return null;
-        const props = filterLens.prop(filter.field).toProps();
-        return React__default.createElement(FilterItemBody, { ...props, ...filter, ...dropdownProps });
-    }, [filters]);
-    const columns = useMemo(() => {
-        if (filters) {
-            const filterKeys = filters.map((f) => f.columnKey);
-            const newColumns = (initialColumns.map((column) => {
-                if (filterKeys.includes(column.key)) {
-                    return {
-                        ...column,
-                        renderFilter: makeFilterRenderCallback(column.key),
-                    };
-                }
-                else {
-                    return column;
-                }
-            }));
-            return newColumns;
-        }
-        return initialColumns;
-    }, [filters, initialColumns]);
-    return columns;
-};
-
-var css$l = {"unpin-icon":"XM3Xu-","unpinIcon":"XM3Xu-","pin-toggler-icon":"NF9tuf","pinTogglerIcon":"NF9tuf"};
-
-function PinIconButton(props) {
-    const i18nLocal = i18n.tables.columnsConfigurationModal;
-    const { onTogglePin, pinPosition, canUnpin, } = props;
-    const isPinned = !!pinPosition;
-    const isPinnedAlways = isPinned && !canUnpin;
-    let pinUnpinNode;
-    if (isPinned) {
-        const unpinIcon = getUnpinIcon({ isPinnedAlways, pinPosition });
-        const iconTooltip = isPinnedAlways ? i18nLocal.lockedColumnPinButton : i18nLocal.unPinColumnButton;
-        const unpinClickHandler = isPinnedAlways ? undefined : () => onTogglePin(undefined);
-        pinUnpinNode = (React.createElement(Tooltip, { content: iconTooltip, placement: "bottom", color: "inverted" },
-            React.createElement(IconButton, { cx: cx$1(!isPinnedAlways && css$l.unpinIcon, css$l.pinTogglerIcon), icon: unpinIcon, onClick: unpinClickHandler, isDisabled: isPinnedAlways, color: "primary" })));
-    }
-    else {
-        pinUnpinNode = (React.createElement(React.Fragment, null,
-            React.createElement(Tooltip, { content: i18nLocal.pinColumnToTheLeftButton, placement: "bottom", color: "inverted" },
-                React.createElement(IconButton, { cx: css$l.pinTogglerIcon, icon: settings.dataTable.icons.columnsConfigurationModal.pinLeftIcon, onClick: () => onTogglePin('left'), isDisabled: isPinnedAlways })),
-            React.createElement(Tooltip, { content: i18nLocal.pinColumnToTheRightButton, placement: "bottom", color: "inverted" },
-                React.createElement(IconButton, { cx: css$l.pinTogglerIcon, icon: settings.dataTable.icons.columnsConfigurationModal.pinRightIcon, onClick: () => onTogglePin('right'), isDisabled: isPinnedAlways }))));
-    }
-    return pinUnpinNode;
-}
-function getUnpinIcon(params) {
-    const { isPinnedAlways, pinPosition } = params;
-    if (isPinnedAlways) {
-        return settings.dataTable.icons.columnsConfigurationModal.lockIcon;
-    }
-    switch (pinPosition) {
-        case 'left': {
-            return settings.dataTable.icons.columnsConfigurationModal.pinLeftIcon;
-        }
-        case 'right': {
-            return settings.dataTable.icons.columnsConfigurationModal.pinRightIcon;
-        }
-        default: {
-            return;
-        }
-    }
+        return (React__default.createElement(IconButton, { cx: [css$k.tabButton, dropdownProps.isOpen && css$k.targetOpen], color: props.preset.id === props.activePresetId ? 'primary' : 'neutral', ...dropdownProps, icon: settings.presetsPanel.icons.menuIcon, size: settings.presetsPanel.sizes.dropdownTargetIconButton }));
+    }, []);
+    return (React__default.createElement(Dropdown, { renderBody: renderBody, renderTarget: renderTarget, placement: "bottom-end", middleware: [offset(22)] }));
 }
 
-var css$k = {"row-wrapper":"Fc9fDy","rowWrapper":"Fc9fDy","pin-icon-button":"nwUmHo","pinIconButton":"nwUmHo","not-pinned":"ow3TnC","notPinned":"ow3TnC","checkbox":"_9uyEMM","drag-handle":"F1xeAf","dragHandle":"F1xeAf","dnd-disabled":"ChC0Gk","dndDisabled":"ChC0Gk"};
-
-const ColumnRow = /* @__PURE__ */React.memo(function ColumnRow(props) {
-    const { column } = props;
-    const { toggleVisibility, togglePin, onCanAcceptDrop, onDrop, columnConfig, isDndAllowed, isPinnedAlways, } = column;
-    const { isVisible, fix } = columnConfig;
-    const pinPosition = fix || (isPinnedAlways ? 'left' : undefined);
-    const isPinned = !!pinPosition;
-    const data = { column, columnConfig };
-    const renderContent = (dndActorParams) => {
-        const wrapperClasses = cx$1(css$k.rowWrapper, !isPinned && css$k.notPinned, dndActorParams.isDragGhost && uuiDndState.dragGhost, 'uui-dt-columns-config-row');
-        const { onTouchStart, onPointerDown, ...restEventHandlers } = dndActorParams.eventHandlers;
-        const { ref, ...dndActorPropsWithoutRef } = dndActorParams;
-        return (React.createElement(FlexRow, { size: settings.dataTable.sizes.columnsConfigurationModal.columnRow, cx: wrapperClasses, ref: dndActorParams.ref, rawProps: { ...restEventHandlers }, alignItems: "top" },
-            React.createElement(DragHandle, { dragHandleIcon: settings.dataTable.icons.columnsConfigurationModal.dragIndicator, rawProps: { onTouchStart, onPointerDown }, isDisabled: !isDndAllowed, cx: cx$1(css$k.dragHandle, !isDndAllowed && css$k.dndDisabled) }),
-            React.createElement(Checkbox, { key: column.key, label: props.renderItem ? props.renderItem(props.column) : column.caption, value: isVisible, onValueChange: toggleVisibility, isReadonly: column.isAlwaysVisible || column.isLocked, cx: css$k.checkbox }),
-            React.createElement(FlexRow, { size: null, cx: css$k.pinIconButton },
-                React.createElement(PinIconButton, { pinPosition: pinPosition, canUnpin: !isPinnedAlways, onTogglePin: togglePin })),
-            React.createElement(DropMarker, { ...dndActorPropsWithoutRef })));
-    };
-    return (React.createElement(DndActor, { key: column.key, srcData: isDndAllowed && data, dstData: data, canAcceptDrop: onCanAcceptDrop, onDrop: onDrop, render: renderContent }));
-});
+const UUI_PRESETS_PANEL_ADD_BUTTON = 'uui-presets-panel-add-button';
+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 = {"root":"KXI3zY","main-panel":"_5HSKWW","mainPanel":"_5HSKWW","group":"lD-a-E","group-title":"t6Dw-D","groupTitle":"t6Dw-D","group-items":"_52UP4D","groupItems":"_52UP4D","no-data":"BT0qCQ","noData":"BT0qCQ","no-data-title":"FhwtwI","noDataTitle":"FhwtwI","no-data-sub-title":"OJsxt7","noDataSubTitle":"OJsxt7","h-divider":"_56ehox","hDivider":"_56ehox","search-area":"FtOBIA","searchArea":"FtOBIA","subgroup-accordion":"fPc1VJ","subgroupAccordion":"fPc1VJ","subgroup":"N99roU","subgroup-title":"c2mxgK","subgroupTitle":"c2mxgK"};
+var css$j = {"preset-input-cell":"_-5vEGf","presetInputCell":"_-5vEGf","preset-input":"SMKs80","presetInput":"SMKs80"};
 
-const renderGroupTitle = (title, amount) => (React.createElement(FlexRow, { cx: css$j.group },
-    React.createElement(Text, { size: "none", cx: css$j.groupTitle }, title),
-    React.createElement(CountIndicator, { caption: amount, color: "neutral", size: settings.dataTable.sizes.columnsConfigurationModal.countIndicator }),
-    React.createElement(FlexSpacer, null)));
-function ColumnsConfigurationModal(props) {
-    const i18n$1 = i18n.tables.columnsConfigurationModal;
-    const { columns, columnsConfig: initialColumnsConfig, defaultConfig, ...modalProps } = props;
-    const { groupedColumns, searchValue, columnsConfig, reset, checkAll, uncheckAll, setSearchValue, hasAnySelectedColumns, } = useColumnsConfiguration({
-        initialColumnsConfig,
-        columns,
-        defaultConfig,
-        getSearchFields: props.getSearchFields,
-    });
-    const apply = useCallback(() => modalProps.success(columnsConfig), [columnsConfig, modalProps]);
-    const close = useCallback(() => modalProps.abort(), [modalProps]);
-    const isNoData = useMemo(() => Object.values(groupedColumns).every((v) => !v.length), [groupedColumns]);
-    const renderVisible = () => {
-        const amountPinnedLeft = groupedColumns.displayedPinnedLeft.length;
-        const amountPinnedRight = groupedColumns.displayedPinnedRight.length;
-        const amountUnPinned = groupedColumns.displayedUnpinned.length;
-        const totalAmountOfVisibleColumns = amountPinnedLeft + amountUnPinned + amountPinnedRight;
-        if (!totalAmountOfVisibleColumns) {
-            return null;
-        }
-        const hasDividerBelowPinnedLeft = !!(amountPinnedLeft && amountUnPinned);
-        const hasDividerAbovePinnedRight = !!(amountPinnedRight && amountUnPinned);
-        const divider = (React.createElement(FlexRow, { size: null, cx: css$j.hDivider }));
-        return (React.createElement(React.Fragment, null,
-            renderGroupTitle(i18n$1.displayedSectionTitle, totalAmountOfVisibleColumns),
-            React.createElement(SubGroup, { renderItem: props.renderItem, title: i18n$1.pinnedToTheLeftSubgroupTitle, items: groupedColumns.displayedPinnedLeft }),
-            hasDividerBelowPinnedLeft && divider,
-            React.createElement(SubGroup, { renderItem: props.renderItem, title: i18n$1.notPinnedSubgroupTitle, items: groupedColumns.displayedUnpinned }),
-            hasDividerAbovePinnedRight && divider,
-            React.createElement(SubGroup, { renderItem: props.renderItem, title: i18n$1.pinnedToTheRightSubgroupTitle, items: groupedColumns.displayedPinnedRight })));
-    };
-    const renderHidden = () => {
-        const items = groupedColumns.hidden;
-        const title = renderGroupTitle(i18n$1.hiddenSectionTitle, items.length);
-        if (!items.length) {
-            return null;
+function PresetInput(props) {
+    const [presetCaption, setPresetCaption] = useState(props.preset?.name || '');
+    const [readonly, setReadonly] = useState(false);
+    const cancelActionHandler = useCallback(() => {
+        setPresetCaption('');
+        props.onCancel();
+    }, [props.onCancel]);
+    const acceptActionHandler = useCallback(async () => {
+        setReadonly(() => true);
+        if (presetCaption) {
+            await props.onSuccess(presetCaption);
         }
-        return (React.createElement(React.Fragment, null,
-            title,
-            React.createElement(SubGroup, { renderItem: props.renderItem, items: items })));
-    };
-    const applyButton = React.createElement(Button, { caption: i18n$1.applyButton, isDisabled: !hasAnySelectedColumns, color: "primary", onClick: apply });
-    return (React.createElement(ModalBlocker, { ...modalProps },
-        React.createElement(ModalWindow, { cx: [css$j.root, 'uui-columns-config-modal'], height: "95dvh", maxHeight: "95dvh" },
-            React.createElement(ModalHeader, { title: i18n$1.configureColumnsTitle, onClose: close }),
-            React.createElement(FlexRow, { borderBottom: true, cx: css$j.searchArea },
-                React.createElement(SearchInput, { size: settings.dataTable.sizes.columnsConfigurationModal.searchInput, value: searchValue, onValueChange: setSearchValue, placeholder: i18n$1.searchPlaceholder }),
-                React.createElement(Dropdown, { closeOnTargetClick: true, renderBody: () => (React.createElement(DropdownMenuBody, { minWidth: 100 },
-                        React.createElement(DropdownMenuButton, { caption: i18n$1.clearAllButton, onClick: uncheckAll }),
-                        React.createElement(DropdownMenuButton, { caption: i18n$1.selectAllButton, onClick: checkAll }))), renderTarget: (props) => (React.createElement(Button, { ...props, fill: "none", icon: settings.dataTable.icons.columnsConfigurationModal.menuIcon, size: settings.dataTable.sizes.columnsConfigurationModal.menuButton, color: "secondary", isDropdown: false })) })),
-            React.createElement(Panel, { background: "surface-main", cx: css$j.mainPanel },
-                React.createElement(ScrollBars, null,
-                    renderVisible(),
-                    renderHidden(),
-                    isNoData && (React.createElement(FlexRow, { cx: css$j.noData },
-                        React.createElement(Text, { cx: css$j.noDataTitle }, i18n$1.noResultsFound.title),
-                        React.createElement(Text, { cx: css$j.noDataSubTitle }, i18n$1.noResultsFound.subTitle))))),
-            React.createElement(ModalFooter, { borderTop: true },
-                React.createElement(LinkButton, { icon: settings.dataTable.icons.columnsConfigurationModal.resetIcon, caption: i18n$1.resetToDefaultButton, onClick: reset }),
-                React.createElement(FlexSpacer, null),
-                React.createElement(Button, { fill: "none", color: "secondary", caption: i18n$1.cancelButton, onClick: close }),
-                !hasAnySelectedColumns ? (React.createElement(Tooltip, { content: i18n$1.enableAtLeastOneColumnMessage, placement: "top-end", color: "critical" }, applyButton)) : (applyButton)))));
-}
-function SubGroup(props) {
-    const [isExpanded, setIsExpanded] = useState(true);
-    const { title, items, renderItem } = props;
-    const isCollapsible = !!title;
-    if (items.length) {
-        const content = (React.createElement(FlexRow, { cx: css$j.groupItems, size: settings.dataTable.sizes.columnsConfigurationModal.columnRow }, items.map((c) => (React.createElement(ColumnRow, { column: c, key: c.key, renderItem: renderItem })))));
-        if (isCollapsible) {
-            const renderTitle = (isOpened) => {
-                const toggleIcon = settings.dataTable.icons.columnsConfigurationModal[isOpened ? 'expandedIcon' : 'collapsedIcon'];
-                return (React.createElement(FlexRow, { cx: cx$1(css$j.subgroup) },
-                    React.createElement(IconContainer, { icon: toggleIcon }),
-                    React.createElement(Text, { size: "none", color: "tertiary", cx: css$j.subgroupTitle }, title)));
-            };
-            return (React.createElement(Accordion$1, { value: isExpanded, onValueChange: setIsExpanded, renderTitle: renderTitle, cx: css$j.subgroupAccordion }, content));
+        props.onCancel();
+        setReadonly(() => false);
+    }, [presetCaption]);
+    const newPresetOnBlurHandler = useCallback(() => {
+        if (presetCaption.length) {
+            return;
         }
-        return content;
-    }
-    return null;
+        props.onCancel();
+    }, [presetCaption.length, props.onCancel]);
+    return (React__default.createElement(FlexCell, { cx: [css$j.presetInputCell, UUI_PRESETS_PANEL_INPUT], minWidth: 180 },
+        React__default.createElement(TextInput, { cx: css$j.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50, isReadonly: readonly })));
 }
 
-const getChildrenAndRest = (row, rows) => {
-    const firstNotChildIndex = rows.findIndex((other) => other.depth < row.depth || (row.depth === other.depth && other.isPinned));
-    if (firstNotChildIndex === -1) {
-        return [rows, []];
-    }
-    if (firstNotChildIndex === 0) {
-        return [[], rows];
-    }
-    const children = rows.slice(0, firstNotChildIndex);
-    const rest = rows.slice(firstNotChildIndex, rows.length);
-    return [children, rest];
-};
-
-var css$i = {"listContainer":"O-A1s0","header":"Q3P5sV","group":"j-Z6lo","stickyHeader":"bLkOtn"};
-
-function DataRowsGroup({ row, childRows, renderRow, top = 1, }) {
-    const rowRef = useRef(undefined);
-    const childrenPinnedTop = row.isPinned ? (top + (rowRef.current?.clientHeight ?? 0)) : top;
-    return (React__default.createElement("div", { className: css$i.group, key: row.rowKey },
-        React__default.createElement("div", { className: row.isPinned ? css$i.stickyHeader : css$i.header, 
-            // Gaps between pinned parents should be removed by -1 from top height.
-            // Otherwise, sometimes top value is rounded top.
-            style: { zIndex: row.depth + 10, top: top - 1 }, ref: rowRef }, renderRow(row)),
-        childRows.length > 0 && (React__default.createElement("div", null,
-            React__default.createElement(DataRowsGroups, { rows: childRows, renderRow: renderRow, top: childrenPinnedTop })))));
-}
-const renderRows = (rows, renderRow, top) => {
-    if (!rows.length)
-        return [];
-    const [row, ...rest] = rows;
-    if (!rest.length) {
-        return [renderRow(row)];
-    }
-    const [next] = rest;
-    if (next.depth <= row.depth && !row.isPinned) {
-        return [renderRow(row)].concat(renderRows(rest, renderRow, top));
-    }
-    const [children, otherRows] = getChildrenAndRest(row, rest);
-    const group = (React__default.createElement(DataRowsGroup, { row: row, childRows: children, renderRow: renderRow, top: top, key: row.rowKey }));
-    return [group].concat(renderRows(otherRows, renderRow, top));
-};
-function DataRowsGroups({ rows, renderRow, top = 1, }) {
-    const rowsWithGroups = renderRows(rows, renderRow, top);
-    // eslint-disable-next-line react/jsx-no-useless-fragment
-    return (React__default.createElement(React__default.Fragment, null, rowsWithGroups));
-}
+var css$i = {"preset":"Bvv6qX","activePreset":"pJ2Nkh"};
 
-function DataRowsContainer({ estimatedHeight, listContainerRef, offsetY, rows, renderRow, headerRef, }) {
-    return (React__default.createElement("div", { className: cx(css$i.listContainer, 'uui-dt-data_row_container'), style: { minHeight: `${estimatedHeight}px` } },
-        React__default.createElement("div", { ref: listContainerRef, role: "rowgroup", style: { marginTop: offsetY } },
-            React__default.createElement(DataRowsGroups, { rows: rows, renderRow: renderRow, top: headerRef?.current?.clientHeight }))));
+function Preset(props) {
+    const [isRenamePreset, setIsRenamePreset] = useState(false);
+    const choosePresetHandler = useCallback(() => props.choosePreset(props.preset), [props]);
+    const cancelRenamePreset = useCallback(() => {
+        setIsRenamePreset(() => false);
+    }, []);
+    const setPresetForRename = useCallback(() => {
+        if (!isRenamePreset) {
+            setIsRenamePreset(() => true);
+        }
+    }, []);
+    const handlePresetRename = useCallback((name) => {
+        const newPreset = {
+            ...props.preset,
+            name: name,
+        };
+        return props.updatePreset(newPreset);
+    }, [props.preset]);
+    const isPresetActive = props.activePresetId === props.preset.id;
+    const PresetActionsDropdownComponent = useCallback(() => React__default.createElement(PresetActionsDropdown, { renamePreset: setPresetForRename, ...props }), [props.preset, props.tableState, props.activePresetId]);
+    return (React__default.createElement(FlexCell, { key: props.preset.id, alignSelf: "center", width: "auto" }, isRenamePreset ? (React__default.createElement(PresetInput, { onCancel: cancelRenamePreset, onSuccess: handlePresetRename, preset: props.preset })) : (React__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", isLinkActive: isPresetActive }))));
 }
 
-var css$h = {"root":"GREoL4","sticky-header":"jOMad9","stickyHeader":"jOMad9","no-results":"QFswuU","noResults":"QFswuU","icon":"Nzzj5f","title":"Fvd-dV"};
+var css$h = {"divider":"lnbSjC","dropdownDeleteIcon":"_4aIEmS","presetsWrapper":"mOOabL","addPresetContainer":"_5qCjcl","dropContainer":"_8-raMS"};
 
-function DataTable(props) {
-    const { uuiModals } = useUuiContext();
-    const headerRef = React.useRef(undefined);
-    const columnsWithFilters = useColumnsWithFilters(props.columns, props.filters);
-    const { columns, config, defaultConfig } = useColumnsConfig(columnsWithFilters, props.value?.columnsConfig);
-    const defaultRenderRow = React.useCallback((rowProps) => {
-        return (React.createElement(DataTableRow, { size: props.size || settings.dataTable.sizes.body.row, columnsGap: props.columnsGap, borderBottom: props.border, ...rowProps, key: rowProps.rowKey, cx: css$h.cell }));
+function PresetsPanel(props) {
+    const [isAddingPreset, setIsAddingPreset] = useState(false);
+    const setAddingPreset = useCallback(() => {
+        setIsAddingPreset(true);
     }, []);
-    const renderRow = (row) => (props.renderRow ?? defaultRenderRow)({ ...row, columns });
-    const rows = props.getRows?.() ?? props.rows ?? [];
-    const renderNoResultsBlock = React.useCallback(() => {
-        return (React.createElement("div", { className: css$h.noResults }, props.renderNoResultsBlock ? (props.renderNoResultsBlock?.()) : (React.createElement(React.Fragment, null,
-            React.createElement(IconContainer, { cx: css$h.icon, icon: settings.dataTable.icons.emptyTable }),
-            React.createElement(Text, { cx: css$h.title, fontSize: "24", lineHeight: "30", color: "primary", fontWeight: "600" }, i18n.tables.noResultsBlock.title),
-            React.createElement(Text, { fontSize: "16", lineHeight: "24", color: "primary" }, i18n.tables.noResultsBlock.message)))));
-    }, [props.renderNoResultsBlock]);
-    const onConfigurationButtonClick = React.useCallback(() => {
-        const configProps = { columns: props.columns, columnsConfig: { ...config }, defaultConfig };
-        uuiModals
-            .show((modalProps) => {
-            return (props.renderColumnsConfigurationModal
-                ? props.renderColumnsConfigurationModal({ ...configProps, ...modalProps })
-                : (React.createElement(ColumnsConfigurationModal, { ...modalProps, columns: props.columns, columnsConfig: config, defaultConfig: defaultConfig })));
-        })
-            .then((columnsConfig) => props.onValueChange({ ...props.value, columnsConfig }))
-            .catch(() => null);
-    }, [
-        props.columns, config, defaultConfig, props.value, props.onValueChange, props.renderColumnsConfigurationModal,
-    ]);
-    const renderRowsContainer = React.useCallback(({ listContainerRef, estimatedHeight, offsetY, scrollShadows }) => (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: cx$1(css$h.stickyHeader, 'uui-dt-sticky_header'), ref: headerRef },
-            React.createElement(DataTableHeaderRow, { columns: columns, columnGroups: props.columnGroups, onConfigButtonClick: props.showColumnsConfig && onConfigurationButtonClick, selectAll: props.selectAll, size: props.headerSize || settings.dataTable.sizes.header.row, textCase: props.headerTextCase, allowColumnsReordering: props.allowColumnsReordering, allowColumnsResizing: props.allowColumnsResizing, showFoldAll: props.showFoldAll, value: { ...props.value, columnsConfig: config }, onValueChange: props.onValueChange, columnsGap: props.columnsGap }),
-            React.createElement("div", { className: cx$1(uuiScrollShadows.top, {
-                    [uuiScrollShadows.topVisible]: scrollShadows.verticalTop,
-                }) })),
-        props.exactRowsCount !== 0 ? (React.createElement(DataRowsContainer, { headerRef: headerRef, listContainerRef: listContainerRef, estimatedHeight: estimatedHeight, offsetY: offsetY, scrollShadows: scrollShadows, renderRow: renderRow, rows: rows })) : (renderNoResultsBlock?.()))), [
-        props, columns, rows, renderNoResultsBlock, onConfigurationButtonClick,
-    ]);
-    return (React.createElement(DataTableSelectionProvider, { onCopy: props.onCopy, rows: rows, columns: columns },
-        React.createElement(DataTableFocusProvider, { dataTableFocusManager: props.dataTableFocusManager },
-            React.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, onScroll: props.onScroll, rowsCount: props.rowsCount, renderRows: renderRowsContainer, cx: cx$1(css$h.root, props.cx, 'uui-dt-vars', 'uui-data_table'), isLoading: props.isReloading, rowsSelector: "[role=row]", rawProps: {
-                    role: 'table',
-                    'aria-colcount': columns.length,
-                    'aria-rowcount': props.rowsCount,
-                } }))));
+    const cancelAddingPreset = useCallback(() => {
+        setIsAddingPreset(false);
+    }, []);
+    const { presets, ...presetApi } = props;
+    const renderPreset = (preset) => {
+        return React__default.createElement(Preset, { key: preset.id, preset: preset, addPreset: setAddingPreset, ...presetApi });
+    };
+    const renderAddPresetButton = useCallback(() => {
+        return (React__default.createElement("div", { key: "addingPresetBlock", className: css$h.addPresetContainer }, !isAddingPreset ? (React__default.createElement(Button, { cx: UUI_PRESETS_PANEL_ADD_BUTTON, onClick: setAddingPreset, caption: i18n.presetPanel.addCaption, icon: settings.presetsPanel.icons.addIcon, iconPosition: "left", fill: "ghost", color: "primary" })) : (React__default.createElement(PresetInput, { onCancel: cancelAddingPreset, onSuccess: props.createNewPreset }))));
+    }, [isAddingPreset]);
+    const onPresetDropdownSelect = (preset) => {
+        props.choosePreset(preset.preset);
+    };
+    const renderMoreButtonDropdown = (item, hiddenItems) => {
+        return (React__default.createElement(Dropdown, { key: "more", renderTarget: (props) => (React__default.createElement(FlexRow, null,
+                React__default.createElement("div", { className: css$h.divider }),
+                React__default.createElement(Button, { cx: UUI_PRESETS_PANEL_MORE_BUTTON, fill: "ghost", color: "secondary", caption: `${hiddenItems?.length || ''} more`, ...props }))), renderBody: (propsBody) => (React__default.createElement(DropdownMenuBody, { minWidth: 230, maxHeight: 300, ...propsBody },
+                React__default.createElement(ScrollBars, null, hiddenItems.map((hiddenItem) => (React__default.createElement(DropdownMenuButton, { key: hiddenItem.preset.id, onClick: () => onPresetDropdownSelect(hiddenItem), caption: hiddenItem.preset.name, icon: !hiddenItem.preset.isReadonly && settings.presetsPanel.icons.deleteIcon, iconPosition: "right", cx: css$h.dropdownDeleteIcon, onIconClick: !hiddenItem.preset.isReadonly && (() => props.deletePreset(hiddenItem.preset)) })))))) }));
+    };
+    const getPresetPriority = (preset, index) => {
+        return preset.id === props.activePresetId ? 100499 : 1000 - index;
+    };
+    const getPanelItems = () => {
+        return [
+            ...orderBy(props.presets, ({ order }) => order)
+                .map((preset, index) => ({
+                id: preset.id.toString(),
+                render: () => renderPreset(preset),
+                priority: getPresetPriority(preset, index),
+                preset: preset,
+            })),
+            {
+                id: 'collapsedContainer', render: renderMoreButtonDropdown, priority: 100501, collapsedContainer: true,
+            },
+            { id: 'addPreset', render: renderAddPresetButton, priority: 100501 },
+        ];
+    };
+    return (React__default.createElement(FlexCell, { grow: 1, minWidth: 310, rawProps: props.rawProps },
+        React__default.createElement(FlexRow, { size: null, columnGap: "12", cx: css$h.presetsWrapper },
+            React__default.createElement(AdaptivePanel, { items: getPanelItems() }))));
 }
 
-var css$g = {"root":"HbOFk-"};
+var css$g = {"root":"j88Ip7"};
 
-var css$f = {"root":"VERlXS","burger-content":"_4iNO4X","burgerContent":"_4iNO4X"};
+var css$f = {"root":"euSR2M","burger-content":"_5IoB7J","burgerContent":"_5IoB7J"};
 
 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); }
@@ -5206,7 +5302,7 @@ var SvgNavigationArrowDownOutline = function SvgNavigationArrowDownOutline(props
 };
 var ForwardRef$2 = /*#__PURE__*/forwardRef(SvgNavigationArrowDownOutline);
 
-var css$e = {"root":"d3-c7D","button-primary":"_9sISB6","buttonPrimary":"_9sISB6","button-secondary":"v2yDud","buttonSecondary":"v2yDud","hasIcon":"s7bo89","dropdown":"_5QjwTp"};
+var css$e = {"root":"w3TTjw","button-primary":"_1g50KI","buttonPrimary":"_1g50KI","button-secondary":"OEj9qi","buttonSecondary":"OEj9qi","hasIcon":"baJGGE","dropdown":"_-0Tage"};
 
 const BurgerButton = /* @__PURE__ */withMods(Button$1, (props) => [
     css$e.root,
@@ -5217,13 +5313,13 @@ const BurgerButton = /* @__PURE__ */withMods(Button$1, (props) => [
     props.icon && css$e.hasIcon,
 ], () => ({ dropdownIcon: ForwardRef$2, dropdownIconPosition: 'left', role: 'menuitem' }));
 
-var css$d = {"search-input":"Sm5zh0","searchInput":"Sm5zh0"};
+var css$d = {"search-input":"UXbmGP","searchInput":"UXbmGP"};
 
 function BurgerSearch(props) {
     return (React.createElement(TextInput$1, { cx: cx(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":"_6s2xRv","group-header":"_2-32-2","groupHeader":"_2-32-2","group-name":"znVaK8","groupName":"znVaK8","line":"nhxSvM"};
+var css$c = {"root":"_4P2Jz6","group-header":"EJCs7M","groupHeader":"EJCs7M","group-name":"_0ycmk9","groupName":"_0ycmk9","line":"ugRQT0"};
 
 function BurgerGroupHeader(props) {
     return (React.createElement("div", { className: cx(css$c.root, css$c.groupHeader, 'uui-burger-group-header') },
@@ -5231,7 +5327,7 @@ function BurgerGroupHeader(props) {
         React.createElement("span", { className: css$c.groupName }, props.caption)));
 }
 
-var css$b = {"root":"_0BvCfR","type-primary":"x61DUV","typePrimary":"x61DUV","type-secondary":"jyRKQP","typeSecondary":"jyRKQP"};
+var css$b = {"root":"ddb9WL","type-primary":"NqVc-u","typePrimary":"NqVc-u","type-secondary":"-R06Pf","typeSecondary":"-R06Pf"};
 
 const MainMenuButton = /* @__PURE__ */React.forwardRef((props, ref) => {
     const { type, ...clickableProps } = props;
@@ -5253,7 +5349,7 @@ const MainMenuButton = /* @__PURE__ */React.forwardRef((props, ref) => {
         props.isDropdown && (React.createElement(IconContainer, { icon: ForwardRef$P, flipY: props.isOpen }))));
 });
 
-var css$a = {"dropdown-body":"sfJj28","dropdownBody":"sfJj28"};
+var css$a = {"dropdown-body":"xeukO9","dropdownBody":"xeukO9"};
 
 class MainMenuDropdown extends React.Component {
     render() {
@@ -5312,12 +5408,12 @@ var SvgNavigationGlobalMenuOutlineOutline = function SvgNavigationGlobalMenuOutl
 };
 var ForwardRef$1 = /*#__PURE__*/forwardRef(SvgNavigationGlobalMenuOutlineOutline);
 
-var css$9 = {"global-menu-btn":"nFsYfW","globalMenuBtn":"nFsYfW","global-menu-icon":"FVBlEJ","globalMenuIcon":"FVBlEJ"};
+var css$9 = {"global-menu-btn":"CGxtfU","globalMenuBtn":"CGxtfU","global-menu-icon":"R4hrqd","globalMenuIcon":"R4hrqd"};
 
 const GlobalMenu = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement("button", { ref: ref, id: "global_menu_toggle", className: cx(css$9.globalMenuBtn, props.cx), ...props.rawProps },
     React.createElement(IconContainer, { size: 36, icon: ForwardRef$1, cx: css$9.globalMenuIcon }))));
 
-var css$8 = {"container":"wpTsiB","open":"ylEQ4n","folding-arrow":"_8FFq-2","foldingArrow":"_8FFq-2"};
+var css$8 = {"container":"S1zR0N","open":"g3KDdD","folding-arrow":"kjftOu","foldingArrow":"kjftOu"};
 
 const MainMenuAvatar = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement("button", { ref: ref, className: cx(css$8.container, props.isDropdown && css$8.dropdown, props.isOpen && css$8.open, props.onClick && uuiMarkers.clickable, props.cx), onClick: props.onClick, ...props.rawProps },
     React.createElement(Avatar, { size: "36", img: props.avatarUrl }),
@@ -5325,15 +5421,15 @@ const MainMenuAvatar = /* @__PURE__ */React.forwardRef((props, ref) => (React.cr
     props.isDropdown && (React.createElement("div", null,
         React.createElement(IconContainer, { size: 18, icon: ForwardRef$P, flipY: props.isOpen, cx: css$8.foldingArrow }))))));
 
-var css$7 = {"search-input":"c-BASn","searchInput":"c-BASn"};
+var css$7 = {"search-input":"NN2BF-","searchInput":"NN2BF-"};
 
 const MainMenuSearch = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement(IEditableDebouncer, { ...props, render: (iEditable) => (React.createElement(TextInput$1, { iconPosition: "left", icon: ForwardRef$M, cancelIcon: props.value?.length > 0 && ForwardRef$Q, ...props, ...iEditable, ref: ref, cx: cx$1(css$7.searchInput, props.cx), ...props.rawProps })) })));
 
-var css$6 = {"container":"cdU-Uu"};
+var css$6 = {"container":"EJcA4l"};
 
 const MainMenuIcon = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement(IconButton, { ref: ref, icon: props.icon, cx: cx$1(props.cx, css$6.container), ...props })));
 
-var css$5 = {"root":"Qr-0Dv"};
+var css$5 = {"root":"-PyHHH"};
 
 const Anchor = /* @__PURE__ */withMods(Anchor$1, () => [css$5.root]);
 
@@ -5391,7 +5487,7 @@ var SvgFileCloudUploadFill = function SvgFileCloudUploadFill(props, ref) {
 };
 var ForwardRef = /*#__PURE__*/forwardRef(SvgFileCloudUploadFill);
 
-var css$4 = {"root":"_1AmbtK","drop-start":"_66lafG","dropStart":"_66lafG","drop-over":"OnEU-v","dropOver":"OnEU-v","link":"TBPNxm","drop-area":"e2iMGK","dropArea":"e2iMGK","drop-caption":"-W85F3","dropCaption":"-W85F3","icon-blue":"hWVXhj","iconBlue":"hWVXhj"};
+var css$4 = {"root":"YGbC6y","drop-start":"sugNfp","dropStart":"sugNfp","drop-over":"N5UGwm","dropOver":"N5UGwm","link":"SlXvfl","drop-area":"RhR58o","dropArea":"RhR58o","drop-caption":"RHhPMS","dropCaption":"RHhPMS","icon-blue":"_9tz16R","iconBlue":"_9tz16R"};
 
 function DropSpot(props) {
     const getInfoText = typeof props.infoText === 'string'
@@ -5409,7 +5505,7 @@ function DropSpot(props) {
     return React.createElement(DropSpot$1, { render: renderAttachmentArea, onFilesDropped: props.onUploadFiles });
 }
 
-var css$3 = {"root":"ZNvhMf"};
+var css$3 = {"root":"-z-c-3"};
 
 const SvgCircleProgress = /* @__PURE__ */React.forwardRef((props, ref) => {
     const outsetRadius = props.size / 2 - 1;
@@ -5420,7 +5516,7 @@ const SvgCircleProgress = /* @__PURE__ */React.forwardRef((props, ref) => {
         React.createElement("circle", { strokeWidth: 1, fill: "transparent", r: outsetRadius, cx: props.size / 2, cy: props.size / 2 })));
 });
 
-var css$2 = {"root":"_-4JI1Q","file-name":"NmNY4X","fileName":"NmNY4X","default-color":"HaQ12N","defaultColor":"HaQ12N","doc-color":"_6utvPJ","docColor":"_6utvPJ","xls-color":"ecl9XX","xlsColor":"ecl9XX","pdf-color":"hQsJhm","pdfColor":"hQsJhm","movie-color":"aeHHVJ","movieColor":"aeHHVJ","img-color":"G8Fnio","imgColor":"G8Fnio","mov-color":"na-bdU","movColor":"na-bdU","error-block":"Td0m2O","errorBlock":"Td0m2O","icons-block":"f-FkiK","iconsBlock":"f-FkiK"};
+var css$2 = {"root":"AuYJ3s","file-name":"xc9OXq","fileName":"xc9OXq","default-color":"NuRN4E","defaultColor":"NuRN4E","doc-color":"BCI-Hg","docColor":"BCI-Hg","xls-color":"kKGhMt","xlsColor":"kKGhMt","pdf-color":"_-2DhwP","pdfColor":"_-2DhwP","movie-color":"I5Hw8R","movieColor":"I5Hw8R","img-color":"tqJ6c9","imgColor":"tqJ6c9","mov-color":"KxAgox","movColor":"KxAgox","error-block":"_4pcG0J","errorBlock":"_4pcG0J","icons-block":"XVH--U","iconsBlock":"XVH--U"};
 
 const FileCard = /* @__PURE__ */React.forwardRef((props, ref) => {
     const [isLoadingShow, setIsLoadingShow] = React.useState(true);
@@ -5539,7 +5635,7 @@ const getErrorPageConfig = () => ({
     },
 });
 
-var css$1 = {"container":"_1u5dNH"};
+var css$1 = {"container":"petk3l"};
 
 const ErrorPage = (props) => {
     const isMobileScreen = isMobile();
@@ -5551,7 +5647,7 @@ const ErrorPage = (props) => {
             props?.supportLink && React__default.createElement("div", { className: "uui-error-support-link" }, props?.supportLink))));
 };
 
-var css = {"recovery-spinner":"DQ9F-Z","recoverySpinner":"DQ9F-Z","recovery-message":"XWMck0","recoveryMessage":"XWMck0","modal-blocker":"dx9DyK","modalBlocker":"dx9DyK","modalFadeIn":"H9nO6k"};
+var css = {"recovery-spinner":"h1QYl0","recoverySpinner":"h1QYl0","recovery-message":"UVEnxn","recoveryMessage":"UVEnxn","modal-blocker":"_0E-ysL","modalBlocker":"_0E-ysL","modalFadeIn":"BYQS8K"};
 
 function ErrorHandler(props) {
     const { uuiNotifications, uuiModals, uuiApi } = useUuiContext();
@@ -5602,5 +5698,5 @@ function ErrorHandler(props) {
         errorType === 'recovery' && renderRecoveryBlocker(errorInfo)));
 }
 
-export { Accordion, Alert, Anchor, AvatarStack, Badge, Blocker, Burger, BurgerButton, BurgerGroupHeader, BurgerSearch, Button, Calendar, Checkbox, CheckboxGroup, ClearNotification, ColumnHeaderDropdown, ColumnsConfigurationModal, ConfirmationModal, ControlGroup, CountIndicator, DataPickerBody, DataPickerFooter, DataPickerMobileHeader, DataPickerRow, DataRowAddons, DataRowsContainer, DataTable, DataTableCell, DataTableHeaderCell, DataTableHeaderRow, DataTableRow, DatePicker, DatePickerBody, DatePickerComponent, DropMarker, DropSpot, Dropdown, DropdownContainer, DropdownMenuBody, DropdownMenuButton, DropdownMenuHeader, DropdownMenuSplitter, DropdownMenuSwitchButton, DropdownSubMenu, ErrorAlert, ErrorHandler, ErrorNotification, ErrorPage, FileCard, FilterDatePickerBodyFooter, FilterItemBody, FilterPickerBody, FilterRangeDatePickerBodyFooter, FiltersPanel, FlexCell, FlexRow, Form, GlobalMenu, HintAlert, HintNotification, IDropdownControlKeys, IconButton, IndeterminateBar, IndicatorBar, InputAddon, LabeledInput, LinkButton, MainMenu, MainMenuAvatar, MainMenuButton, MainMenuDropdown, MainMenuIcon, MainMenuSearch, ModalBlocker, ModalFooter, ModalHeader, ModalWindow, MultiSwitch, NotificationCard, NumericInput, Paginator, Panel, PickerBodyMobileView, PickerInput, PickerItem, PickerList, PickerListRow, PickerModal, PickerToggler, PickerTogglerTag, PresetsPanel, ProgressBar, RadioGroup, RadioInput, RangeDatePicker, RangeDatePickerBody, RangeDatePickerInput, Rating, RichTextView, ScrollBars, SearchInput, Slider, Snackbar, Spinner, StatusIndicator, SuccessAlert, SuccessNotification, SvgCircleProgress, Switch, TabButton, Tag, Text, TextArea, TextInput, TextPlaceholder, TimePicker, TimePickerBody, TimePickerComponent, Tooltip, VerticalTabButton, VirtualList, WarningAlert, WarningNotification, applyDateSelectionMods, defaultPredicates, getErrorPageConfig, getHighlightRanges, getHighlightedSearchMatches, getRecoveryMessageConfig, i18n, propsMods, rangeDatePickerPresets, renderCell, renderDropMarkers, settings, useColumnsWithFilters, useForm, uuiDatePickerBody, uuiRangeDatePickerBody, uuiTimePicker };
+export { Accordion, Alert, Anchor, AvatarStack, Badge, Blocker, Burger, BurgerButton, BurgerGroupHeader, BurgerSearch, Button, Calendar, Checkbox, CheckboxGroup, ClearNotification, ColumnHeaderDropdown, ColumnsConfigurationModal, ConfirmationModal, ControlGroup, CountIndicator, DataPickerBody, DataPickerFooter, DataPickerMobileHeader, DataPickerRow, DataRowAddons, DataRowsContainer, DataTable, DataTableCell, DataTableHeaderCell, DataTableHeaderRow, DataTableRow, DatePicker, DatePickerBody, DatePickerComponent, DropMarker, DropSpot, Dropdown, DropdownContainer, DropdownMenuBody, DropdownMenuButton, DropdownMenuHeader, DropdownMenuSplitter, DropdownMenuSwitchButton, DropdownSubMenu, ErrorAlert, ErrorHandler, ErrorNotification, ErrorPage, FileCard, FilterDatePickerBodyFooter, FilterItemBody, FilterPickerBody, FilterRangeDatePickerBodyFooter, FiltersPanel, FlexCell, FlexRow, Form, GlobalMenu, HintAlert, HintNotification, IDropdownControlKeys, IconButton, IndeterminateBar, IndicatorBar, InputAddon, LabeledInput, LinkButton, MainMenu, MainMenuAvatar, MainMenuButton, MainMenuDropdown, MainMenuIcon, MainMenuSearch, ModalBlocker, ModalFooter, ModalHeader, ModalWindow, MultiSwitch, NotificationCard, NumericInput, Paginator, Panel, PickerBodyMobileView, PickerInput, PickerItem, PickerList, PickerListRow, PickerModal, PickerToggler, PickerTogglerTag, PresetsPanel, ProgressBar, RadioGroup, RadioInput, RangeDatePicker, RangeDatePickerBody, RangeDatePickerInput, Rating, RichTextView, ScrollBars, SearchInput, Slider, Snackbar, Spinner, StatusIndicator, SuccessAlert, SuccessNotification, SvgCircleProgress, Switch, TabButton, Tag, Text, TextArea, TextInput, TextPlaceholder, TimePicker, TimePickerBody, TimePickerComponent, Tooltip, VerticalTabButton, VirtualList, WarningAlert, WarningNotification, applyDateSelectionMods, defaultPredicates, getDefaultPredicate, getErrorPageConfig, getHighlightRanges, getHighlightedSearchMatches, getRecoveryMessageConfig, i18n, propsMods, rangeDatePickerPresets, renderCell, renderDropMarkers, settings, useColumnsWithFilters, useForm, uuiDatePickerBody, uuiRangeDatePickerBody, uuiTimePicker };
 //# sourceMappingURL=index.esm.js.map