@true-engineering/true-react-common-ui-kit 4.0.0-alpha65 → 4.0.0-alpha67

package/dist/true-react-common-ui-kit.js

@@ -1,6 +1,6 @@
 import { createContext, useContext, useMemo, useRef, useEffect, memo, useLayoutEffect, useCallback, useState, Fragment as Fragment$1, forwardRef, PureComponent, createRef, createElement } from "react";
 import { createUseStyles } from "react-jss";
-import { isObject, isString, isNotEmpty, isArrayNotEmpty, mergeStyles, isStringEmpty, isStringNotEmpty, mergeRefs, isFunction, isEmpty, addDataAttributes as addDataAttributes$1, stopPropagation, applyAction, isReactNodeNotEmpty, addClickHandler, getTestId, getSelectKeyHandler, addDataTestId, getArray, isArrayLikeNotEmpty, doNothing, createFilter, merge, getTransition, indexMap, isNumberInteger, hasDuplicates, isArrayEmpty } from "@true-engineering/true-react-platform-helpers";
+import { isObject, isString, isNotEmpty, isArrayNotEmpty, mergeStyles, isStringEmpty, isStringNotEmpty, mergeRefs, isFunction, isEmpty, addDataAttributes as addDataAttributes$1, stopPropagation, applyAction, isReactNodeNotEmpty, addClickHandler, getTestId, getSelectKeyHandler, addDataTestId, getArray, isArrayLikeNotEmpty, doNothing, createFilter, merge, getTransition, indexMap, isNumberInteger, isArrayEmpty } from "@true-engineering/true-react-platform-helpers";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { CSSTransition } from "react-transition-group";
 import clsx from "clsx";
@@ -207,7 +207,7 @@ const getTweakStylesCache = () => {
   };
 };
 const tweakStylesCache = getTweakStylesCache();
-const useStyles$Y = createUseStyles((tweakStyles) => tweakStyles);
+const useStyles$Z = createUseStyles((tweakStyles) => tweakStyles);
 const createThemedStyles = (first, second) => {
   const componentName = isString(first) ? first : void 0;
   const styles = second ?? first;
@@ -220,7 +220,7 @@ const createThemedStyles = (first, second) => {
       const resultStyles = mixStyles(styles, themeStyles, tweakStyles).filter(areStylesNotEmpty);
       return { theme: tweakStylesCache(resultStyles) };
     }, [themeStyles, tweakStyles]);
-    return useStyles$Y(data);
+    return useStyles$Z(data);
   };
 };
 const useDidMountEffect = (effect, dependencies) => {
@@ -2932,14 +2932,14 @@ const iconsMap = {
   "status-warning": statusWarning,
   "trash-can": trashCan
 };
-const useStyles$X = createThemedStyles("Icon", {
+const useStyles$Y = createThemedStyles("Icon", {
   root: {
     display: "flex",
     alignItems: "center"
   }
 });
 const Icon = ({ type, data, testId, tweakStyles }) => {
-  const classes = useStyles$X({ theme: tweakStyles });
+  const classes = useStyles$Y({ theme: tweakStyles });
   const theme = useTheme();
   const icon = theme.icons?.[type] ?? iconsMap[type];
   if (isEmpty(icon)) {
@@ -2964,7 +2964,7 @@ const minWidthRelativeToTrigger = size({
     });
   }
 });
-const useStyles$W = createThemedStyles("WithPopup", {
+const useStyles$X = createThemedStyles("WithPopup", {
   trigger: {
     width: "fit-content"
   },
@@ -3024,7 +3024,7 @@ const WithPopup = ({
   testId,
   onToggle
 }) => {
-  const classes = useStyles$W({ theme: tweakStyles });
+  const classes = useStyles$X({ theme: tweakStyles });
   const [isOpen, setIsOpen] = useState(false);
   const isActive = isOpen && !isDisabled;
   const arrowRef = useRef(null);
@@ -3128,7 +3128,7 @@ const WithPopup = ({
 const ITEM_HORIZONTAL_PADDING = 16;
 const ICON_SIZE = 20;
 const ICON_GAP = 12;
-const useStyles$V = createThemedStyles("ListItem", {
+const useStyles$W = createThemedStyles("ListItem", {
   root: {
     display: "flex",
     alignItems: "center",
@@ -3181,7 +3181,7 @@ const ListItem = ({
   data,
   onClick
 }) => {
-  const classes = useStyles$V({ theme: tweakStyles });
+  const classes = useStyles$W({ theme: tweakStyles });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     shouldDrawSpacerAbove && /* @__PURE__ */ jsx("div", { className: classes.spacer }),
     /* @__PURE__ */ jsxs(
@@ -3204,7 +3204,7 @@ const ListItem = ({
     shouldDrawSpacerBelow && /* @__PURE__ */ jsx("div", { className: classes.spacer })
   ] });
 };
-const useStyles$U = createThemedStyles("List", {
+const useStyles$V = createThemedStyles("List", {
   root: {
     minWidth: 180,
     backgroundColor: colors.CLASSIC_WHITE,
@@ -3224,7 +3224,7 @@ const withPopupStyles$1 = {
   }
 };
 const List = ({ items, size: size2, testId, data, tweakStyles, onClick }) => {
-  const classes = useStyles$U({ theme: tweakStyles });
+  const classes = useStyles$V({ theme: tweakStyles });
   const handleItemClick = (event, { onClick: itemOnClick }) => {
     if (isNotEmpty(itemOnClick)) {
       itemOnClick(event);
@@ -3263,7 +3263,7 @@ const List = ({ items, size: size2, testId, data, tweakStyles, onClick }) => {
   );
 };
 const ANIMATION_TIMEOUT = 150;
-const useStyles$T = createThemedStyles("AccountInfo", {
+const useStyles$U = createThemedStyles("AccountInfo", {
   root: {
     display: "flex"
   },
@@ -3310,7 +3310,7 @@ const AccountInfo = ({
   accountName,
   options
 }) => {
-  const classes = useStyles$T({ theme: tweakStyles });
+  const classes = useStyles$U({ theme: tweakStyles });
   const tweakListStyles = useTweakStyles({
     tweakStyles,
     className: "tweakList",
@@ -3347,7 +3347,7 @@ const AccountInfo = ({
     ] })
   ] });
 };
-const useStyles$S = createThemedStyles("AddButton", {
+const useStyles$T = createThemedStyles("AddButton", {
   root: {
     display: "flex",
     alignItems: "center",
@@ -3383,7 +3383,7 @@ const AddButton = ({
   testId,
   tweakStyles
 }) => {
-  const classes = useStyles$S({ theme: tweakStyles });
+  const classes = useStyles$T({ theme: tweakStyles });
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -3403,7 +3403,7 @@ const AddButton = ({
     }
   );
 };
-const useStyles$R = createThemedStyles("DotsPreloader", {
+const useStyles$S = createThemedStyles("DotsPreloader", {
   root: {
     display: "flex",
     gap: 4,
@@ -3448,7 +3448,7 @@ const useStyles$R = createThemedStyles("DotsPreloader", {
   }
 });
 const DotsPreloader = ({ tweakStyles }) => {
-  const classes = useStyles$R({ theme: tweakStyles });
+  const classes = useStyles$S({ theme: tweakStyles });
   return /* @__PURE__ */ jsx("div", { className: classes.root, children: /* @__PURE__ */ jsx("span", { className: classes.dot }) });
 };
 const DefaultPreloader = () => /* @__PURE__ */ jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg", children: [
@@ -3473,7 +3473,7 @@ const DefaultPreloader = () => /* @__PURE__ */ jsxs("svg", { width: "100%", heig
     }
   ) }) })
 ] });
-const useStyles$Q = createThemedStyles("SvgPreloader", {
+const useStyles$R = createThemedStyles("SvgPreloader", {
   root: {
     display: "flex",
     width: "100%",
@@ -3481,13 +3481,13 @@ const useStyles$Q = createThemedStyles("SvgPreloader", {
   }
 });
 const SvgPreloader = ({ type = "default", tweakStyles }) => {
-  const classes = useStyles$Q({ theme: tweakStyles });
+  const classes = useStyles$R({ theme: tweakStyles });
   const theme = useTheme();
   const PreloaderIcon = theme.preloaders?.[type] ?? DefaultPreloader;
   const isInlineSvg = typeof PreloaderIcon === "string";
   return isInlineSvg ? /* @__PURE__ */ jsx("div", { className: classes.root, dangerouslySetInnerHTML: { __html: PreloaderIcon } }) : /* @__PURE__ */ jsx(PreloaderIcon, {});
 };
-const useStyles$P = createThemedStyles("ThemedPreloader", {
+const useStyles$Q = createThemedStyles("ThemedPreloader", {
   root: {
     display: "flex"
   },
@@ -3505,7 +3505,7 @@ const ThemedPreloader = ({
   testId,
   tweakStyles
 }) => {
-  const classes = useStyles$P({ theme: tweakStyles });
+  const classes = useStyles$Q({ theme: tweakStyles });
   const tweakDotsPreloaderStyles = useTweakStyles({
     tweakStyles,
     className: "tweakDotsPreloader",
@@ -3527,7 +3527,7 @@ const ThemedPreloader = ({
     }
   );
 };
-const useStyles$O = createThemedStyles("Button", {
+const useStyles$P = createThemedStyles("Button", {
   root: {
     display: "flex",
     justifyContent: "center",
@@ -3699,7 +3699,7 @@ const Button = forwardRef(function Button2({
   preloaderType = "dots",
   ...interactions
 }, ref) {
-  const classes = useStyles$O({ theme: tweakStyles });
+  const classes = useStyles$P({ theme: tweakStyles });
   const tweakPreloaderStyles = useTweakStyles({
     innerStyles: getPreloaderStyles(size2),
     tweakStyles,
@@ -3752,7 +3752,7 @@ const Button = forwardRef(function Button2({
     }
   );
 });
-const useStyles$N = createThemedStyles("Checkbox", {
+const useStyles$O = createThemedStyles("Checkbox", {
   root: {
     position: "relative",
     cursor: "pointer",
@@ -3806,7 +3806,7 @@ function Checkbox({
   tweakStyles,
   onSelect
 }) {
-  const classes = useStyles$N({ theme: tweakStyles });
+  const classes = useStyles$O({ theme: tweakStyles });
   const hasAction = !isDisabled && !isReadonly;
   const isSelected = isChecked || isSemiChecked;
   const onToggle = (event) => onSelect?.({ value, isSelected: !isSelected }, event);
@@ -3841,7 +3841,7 @@ function Checkbox({
     }
   );
 }
-const useStyles$M = createThemedStyles("CloseButton", {
+const useStyles$N = createThemedStyles("CloseButton", {
   root: {
     width: 40,
     height: 40,
@@ -3874,7 +3874,7 @@ const CloseButton = ({
   icon = "close",
   onClose
 }) => {
-  const classes = useStyles$M({ theme: tweakStyles });
+  const classes = useStyles$N({ theme: tweakStyles });
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -3886,7 +3886,7 @@ const CloseButton = ({
     }
   );
 };
-const useStyles$L = createThemedStyles("CssBaseline", {
+const useStyles$M = createThemedStyles("CssBaseline", {
   "@global html, body": {
     fontFamily: "Arial, sans-serif",
     color: colors.FONT_MAIN,
@@ -3897,10 +3897,10 @@ const useStyles$L = createThemedStyles("CssBaseline", {
   root: {}
 });
 const CssBaseline = ({ data, testId, tweakStyles }) => {
-  const classes = useStyles$L({ theme: tweakStyles });
+  const classes = useStyles$M({ theme: tweakStyles });
   return /* @__PURE__ */ jsx("div", { className: classes.root, ...addDataAttributes$1(data, testId) });
 };
-const useStyles$K = createThemedStyles("WithMessages", {
+const useStyles$L = createThemedStyles("WithMessages", {
   withMessages: {
     display: "flex",
     flexDirection: "column",
@@ -3935,7 +3935,7 @@ const useStyles$K = createThemedStyles("WithMessages", {
   children: {}
 });
 const WithMessages = forwardRef(function WithMessages2({ children, infoMessage, errorMessage, controlsDirection, tweakStyles, testId, data }, ref) {
-  const classes = useStyles$K({ theme: tweakStyles });
+  const classes = useStyles$L({ theme: tweakStyles });
   const shouldShowError = isReactNodeNotEmpty(errorMessage);
   const shouldShowInfo = isReactNodeNotEmpty(infoMessage) && !shouldShowError;
   return /* @__PURE__ */ jsxs(
@@ -3967,7 +3967,7 @@ const WithMessages = forwardRef(function WithMessages2({ children, infoMessage,
 const isControlWrapperIcon = (iconItem) => isObject(iconItem) && "iconComponent" in iconItem;
 const convertToControlWrapperIcon = (iconItem) => isControlWrapperIcon(iconItem) ? iconItem : { iconComponent: iconItem };
 const { CONTROL, Z_INDEX: Z_INDEX$1 } = dimensions;
-const useStyles$J = createThemedStyles("ControlWrapper", {
+const useStyles$K = createThemedStyles("ControlWrapper", {
   controlWrapper: {
     "--control-height": `${CONTROL.HEIGHT - 2}px`,
     // borders
@@ -4140,7 +4140,7 @@ const ControlWrapper = ({
   data,
   onClear
 }) => {
-  const classes = useStyles$J({ theme: tweakStyles });
+  const classes = useStyles$K({ theme: tweakStyles });
   const [startControlsWidth, setStartControlsWidth] = useState();
   const startIcons = getArray(startIcon).map(convertToControlWrapperIcon);
   const endIcons = getArray(endIcon).map(convertToControlWrapperIcon);
@@ -4232,7 +4232,7 @@ const GROUP_PLACEMENTS = [
   "bottom-right"
 ];
 const PADDING_WITH_UNITS = 8;
-const useStyles$I = createThemedStyles("Input", {
+const useStyles$J = createThemedStyles("Input", {
   inputContent: {
     height: "var(--control-height)",
     padding: [0, "var(--control-padding)"],
@@ -4347,7 +4347,7 @@ const InputBase = forwardRef(function InputBase2({
   children,
   ...inputProps
 }, ref) {
-  const classes = useStyles$I({ theme: tweakStyles });
+  const classes = useStyles$J({ theme: tweakStyles });
   const tweakControlWrapperStyles = useTweakStyles({
     tweakStyles,
     className: "tweakControlWrapper",
@@ -4490,7 +4490,7 @@ const Input = forwardRef(function Input2({ infoMessage, errorMessage, isInvalid,
 });
 const EMPTY_DATE_INPUT_VALUE = "__.__.____";
 const EMPTY_DATE_RANGE_INPUT_VALUE = `${EMPTY_DATE_INPUT_VALUE} - ${EMPTY_DATE_INPUT_VALUE}`;
-const useStyles$H = createThemedStyles("DateInput", {
+const useStyles$I = createThemedStyles("DateInput", {
   root: {
     width: "100%",
     height: "100%",
@@ -4512,7 +4512,7 @@ const DateInput = forwardRef(function DateInput2({
   onChange,
   ...inputProps
 }, ref) {
-  const classes = useStyles$H({ theme: tweakStyles });
+  const classes = useStyles$I({ theme: tweakStyles });
   const tweakInputStyles = useTweakStyles({
     tweakStyles,
     className: "tweakInput",
@@ -4632,7 +4632,7 @@ const ALL_OPTION_INDEX = -1;
 const ROW_HEIGHT$1 = 40;
 const CONTAINER_PADDING = 10;
 const CELL_PADDING = [10, 20];
-const useStyles$G = createThemedStyles("SelectList", {
+const useStyles$H = createThemedStyles("SelectList", {
   root: {
     borderRadius: dimensions.BORDER_RADIUS_SMALL,
     boxShadow: "0 13px 74px -27px rgba(0, 0, 0, 0.11)",
@@ -4763,7 +4763,7 @@ function SelectList({
   convertValueToReactNode = convertValueToString,
   convertValueToId
 }) {
-  const classes = useStyles$G({ theme: tweakStyles });
+  const classes = useStyles$H({ theme: tweakStyles });
   const isHeaderNotEmpty = isReactNodeNotEmpty(customListHeader);
   const isFooterNotEmpty = isReactNodeNotEmpty(customListFooter);
   const optionsDisableMap = useMemo(
@@ -4852,7 +4852,7 @@ const defaultConvertFunction$2 = (v) => v === void 0 ? void 0 : String(v);
 const defaultCompareFunction = (v1, v2) => v1 === v2;
 const getDefaultConvertToIdFunction = (convertValueToString) => (value) => isNotEmpty(value?.id) ? String(value.id) : convertValueToString(value);
 const { Z_INDEX } = dimensions;
-const useStyles$F = createThemedStyles("Select", {
+const useStyles$G = createThemedStyles("Select", {
   root: {
     width: "100%",
     position: "relative",
@@ -4963,7 +4963,7 @@ function Select(props) {
     size: size2,
     ...inputProps
   } = props;
-  const classes = useStyles$F({ theme: tweakStyles });
+  const classes = useStyles$G({ theme: tweakStyles });
   const { shouldRenderInList: shouldRenderSearchInputInList = false, ...searchInputProps } = searchInput ?? {};
   const hasSearchInputInList = optionsMode !== "normal" && shouldRenderSearchInputInList;
   const hasReadonlyInput = isReadonly || optionsMode === "normal" || shouldRenderSearchInputInList;
@@ -5366,7 +5366,7 @@ function Select(props) {
     }
   );
 }
-const useStyles$E = createThemedStyles("DatePickerHeader", {
+const useStyles$F = createThemedStyles("DatePickerHeader", {
   btn: {
     width: 36,
     height: 36,
@@ -5418,7 +5418,7 @@ const DatePickerHeader = ({
   decreaseMonth,
   increaseMonth
 }) => {
-  const classes = useStyles$E({ theme: tweakStyles });
+  const classes = useStyles$F({ theme: tweakStyles });
   const tweakSelectStyles = useTweakStyles({
     innerStyles: selectStyles$1,
     tweakStyles,
@@ -5489,7 +5489,7 @@ const getDateValueParser = (dateFormat) => (value) => {
   return isStringNotEmpty(inputValue) ? parse(value, dateFormat, /* @__PURE__ */ new Date()) : null;
 };
 const areDatesEquals = (date1, date2) => isEmpty(date1) && isEmpty(date2) || isNotEmpty(date1) && isNotEmpty(date2) && isSameDay(date1, date2);
-const useStyles$D = createThemedStyles("DatePicker", {
+const useStyles$E = createThemedStyles("DatePicker", {
   root: {
     width: "100%",
     height: "100%"
@@ -5541,6 +5541,7 @@ const DatePicker = forwardRef(function DatePicker2({
   preventOpenOnFocus,
   popperModifiers = [],
   popperPlacement = "bottom-start",
+  popperProps,
   todayButton,
   highlightDates,
   calendarContainer,
@@ -5561,7 +5562,7 @@ const DatePicker = forwardRef(function DatePicker2({
   tweakStyles,
   ...inputProps
 }, ref) {
-  const classes = useStyles$D({ theme: tweakStyles });
+  const classes = useStyles$E({ theme: tweakStyles });
   const tweakDateInputStyles = useTweakStyles({
     tweakStyles,
     className: "tweakDateInput",
@@ -5692,6 +5693,7 @@ const DatePicker = forwardRef(function DatePicker2({
       disabledKeyboardNavigation,
       popperContainer: shouldRenderPopperInBody ? PopperContainer : void 0,
       popperModifiers: [offset(-10), ...popperModifiers],
+      popperProps,
       popperPlacement,
       strictParsing,
       preventOpenOnFocus,
@@ -5736,7 +5738,7 @@ const DatePicker = forwardRef(function DatePicker2({
   ) });
 });
 const LINK_REGEXP = /(http(s?):\/\/(.*))(\s?)/;
-const useStyles$C = createThemedStyles("Description", {
+const useStyles$D = createThemedStyles("Description", {
   root: {},
   button: {
     cursor: "pointer",
@@ -5768,7 +5770,7 @@ const Description = ({
   data,
   tweakStyles
 }) => {
-  const classes = useStyles$C({ theme: tweakStyles });
+  const classes = useStyles$D({ theme: tweakStyles });
   const isTooShort = text.length < truncateIndex;
   const [isOpen, setIsOpen] = useState(isAlwaysOpen);
   const link = text.match(LINK_REGEXP);
@@ -5790,7 +5792,7 @@ const blockEvent = (event) => {
   event.preventDefault();
   event.stopPropagation();
 };
-const useStyles$B = createThemedStyles("FileInput", {
+const useStyles$C = createThemedStyles("FileInput", {
   root: {
     display: "flex",
     flexDirection: "column",
@@ -5872,7 +5874,7 @@ const FileInput = forwardRef(function FileInput2({
   tweakStyles,
   data
 }, ref) {
-  const classes = useStyles$B({ theme: tweakStyles });
+  const classes = useStyles$C({ theme: tweakStyles });
   const [isDragOver, setIsDragOver] = useState(false);
   const handleAdd = (files) => {
     if (isDisabled || isEmpty(files) || files?.length === 0) {
@@ -5934,7 +5936,7 @@ const FileInput = forwardRef(function FileInput2({
     /* @__PURE__ */ jsx("div", { className: classes.fileList, children: fileList })
   ] });
 });
-const useStyles$A = createThemedStyles("IconButton", {
+const useStyles$B = createThemedStyles("IconButton", {
   root: {
     display: "flex",
     justifyContent: "center",
@@ -6014,7 +6016,7 @@ const IconButton = forwardRef(function IconButton2({
   onClick,
   ...restProps
 }, ref) {
-  const classes = useStyles$A({ theme: tweakStyles });
+  const classes = useStyles$B({ theme: tweakStyles });
   const hasNoAction = isDisabled || isLoading;
   return /* @__PURE__ */ jsx(
     "button",
@@ -6034,7 +6036,7 @@ const IconButton = forwardRef(function IconButton2({
     }
   );
 });
-const useStyles$z = createThemedStyles("Tooltip", {
+const useStyles$A = createThemedStyles("Tooltip", {
   root: {
     display: "inline-block",
     boxSizing: "border-box"
@@ -6083,7 +6085,7 @@ const Tooltip = ({
   testId,
   tweakStyles
 }) => {
-  const classes = useStyles$z({ theme: tweakStyles });
+  const classes = useStyles$A({ theme: tweakStyles });
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -6098,7 +6100,7 @@ const Tooltip = ({
     }
   );
 };
-const useStyles$y = createThemedStyles("TextWithTooltip", {
+const useStyles$z = createThemedStyles("TextWithTooltip", {
   root: {
     position: "relative"
   },
@@ -6126,7 +6128,7 @@ const TextWithTooltip = ({
   data,
   tweakStyles
 }) => {
-  const classes = useStyles$y({ theme: tweakStyles });
+  const classes = useStyles$z({ theme: tweakStyles });
   const tweakTooltipStyles = useTweakStyles({
     tweakStyles,
     className: "tweakTooltip",
@@ -6249,7 +6251,7 @@ const getFileIcon = ({ type, name }) => {
   }
   return FILE_ICON_DEFAULT;
 };
-const useStyles$x = createThemedStyles("FileItem", {
+const useStyles$y = createThemedStyles("FileItem", {
   root: {
     display: "flex",
     flexDirection: "column",
@@ -6357,7 +6359,7 @@ const FileItem = ({
   data,
   tweakStyles
 }) => {
-  const classes = useStyles$x({ theme: tweakStyles });
+  const classes = useStyles$y({ theme: tweakStyles });
   const tweakIconButtonStyles = useTweakStyles({
     tweakStyles,
     className: "tweakRemoveIconButton",
@@ -6457,6 +6459,7 @@ const FilterLocales = {
     from: "От",
     to: "До",
     back: "Назад",
+    date: "Дата",
     searchPlaceholder: "Поиск",
     displayedFields: "Поля для поиска",
     months: [
@@ -6490,6 +6493,7 @@ const FilterLocales = {
     from: "From",
     to: "To",
     back: "Back",
+    date: "Date",
     searchPlaceholder: "Search",
     displayedFields: "Displayed fields",
     months: [
@@ -6553,6 +6557,154 @@ const getLocale$1 = (key = DEFAULT_LOCALE$1, custom, custom2) => merge(FilterLoc
 const getSelectLocale = (key = DEFAULT_SELECT_LOCALE, custom, custom2) => merge(SelectLocales[key], custom, custom2);
 const sortValues = (arr) => arr.includes(void 0) ? arr : arr.sort((a, b) => a < b ? -1 : 1);
 const defaultConvertFunction$1 = (val) => String(val);
+const FILTER_HEIGHT = 36;
+const useStyles$x = createThemedStyles("FiltersPane", {
+  root: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: 8,
+    width: "100%"
+  },
+  settings: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 18,
+    boxSizing: "border-box",
+    width: 40,
+    height: FILTER_HEIGHT,
+    cursor: "pointer",
+    transition: animations.defaultTransition,
+    transitionProperty: "background-color"
+  },
+  settingsIcon: {
+    width: 16,
+    height: 16
+  },
+  clear: {
+    display: "flex",
+    alignItems: "center",
+    height: FILTER_HEIGHT
+  },
+  filterWithClearButton: {
+    display: "flex",
+    gap: 16,
+    minWidth: 0
+  }
+});
+const clearButtonStyles$5 = {
+  s: {
+    paddingLeft: 0,
+    paddingRight: 0,
+    minWidth: "unset"
+  },
+  text: {
+    background: "none",
+    color: colors.GREY_ACTIVE,
+    "&:hover, &:focus": {
+      color: colors.FONT_MEDIUM
+    },
+    "&:active": {
+      color: colors.FONT_MAIN
+    },
+    "&:hover, &:focus, &:active": {
+      background: "none",
+      borderColor: "transparent"
+    }
+  }
+};
+const innerTextButtonStyles = {
+  text: {
+    color: colors.GREY_ACTIVE,
+    "&:hover, &:focus": {
+      color: colors.FONT_MEDIUM
+    },
+    "&:active": {
+      color: colors.FONT_MEDIUM
+    }
+  }
+};
+const useStyles$w = createThemedStyles("FilterDateSingle", {
+  root: {
+    width: 312,
+    background: colors.CLASSIC_WHITE,
+    position: "relative",
+    zIndex: 20
+  },
+  container: {
+    padding: [8, 20]
+  },
+  buttons: {
+    display: "flex",
+    flexDirection: "row-reverse",
+    justifyContent: "space-between",
+    padding: 8
+  }
+});
+const clearButtonStyles$4 = structuredClone(innerTextButtonStyles);
+const FilterDateSingle = ({
+  value,
+  label,
+  locale,
+  localeKey,
+  isClearable,
+  tweakStyles,
+  onChange,
+  onClose,
+  onEndBtnSubmit,
+  testId,
+  data,
+  ...props
+}) => {
+  const classes = useStyles$w({ theme: tweakStyles });
+  const tweakClearButtonStyles = useTweakStyles({
+    innerStyles: clearButtonStyles$4,
+    tweakStyles,
+    className: "tweakClearButton",
+    currentComponentName: "FilterDateSingle"
+  });
+  const tweakDatePickerStyles = useTweakStyles({
+    tweakStyles,
+    className: "tweakDatePicker",
+    currentComponentName: "FilterDateSingle"
+  });
+  const popperTargetRef = useRef(null);
+  const dateLocale = localeKey === "ru" ? ru : enUS;
+  const translates = useMemo(() => getLocale$1(localeKey, locale), [localeKey, locale]);
+  const handleClear = () => {
+    onEndBtnSubmit();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: classes.root, ref: popperTargetRef, ...addDataAttributes$1(data, testId), children: [
+    /* @__PURE__ */ jsx("div", { className: classes.container, children: /* @__PURE__ */ jsx(
+      DatePicker,
+      {
+        label: label ?? translates.date,
+        locale: dateLocale,
+        months: translates.months,
+        selectedDate: value,
+        onChangeDate: (date) => {
+          onChange(date);
+          onClose?.();
+        },
+        tweakStyles: tweakDatePickerStyles,
+        popperProps: { elements: { reference: popperTargetRef?.current } },
+        ...props
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: classes.buttons, children: isClearable && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: handleClear,
+        size: "s",
+        view: "text",
+        testId: getTestId(testId, "clear-button"),
+        isFullWidth: true,
+        tweakStyles: tweakClearButtonStyles,
+        children: translates.clear
+      }
+    ) }) })
+  ] });
+};
 const getPrevSpaces = (val, position) => val.slice(0, position).split("").filter(isSpaceChar).length;
 const getNewCaretPosition = (defaultPosition, oldValue, newValue, isDeleteForwardAction) => {
   if (oldValue === newValue) {
@@ -6670,73 +6822,6 @@ const NumberInput = forwardRef(function NumberInput2({
     }
   );
 });
-const FILTER_HEIGHT = 36;
-const useStyles$w = createThemedStyles("FiltersPane", {
-  root: {
-    display: "flex",
-    flexWrap: "wrap",
-    gap: 8,
-    width: "100%"
-  },
-  settings: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: 18,
-    boxSizing: "border-box",
-    width: 40,
-    height: FILTER_HEIGHT,
-    cursor: "pointer",
-    transition: animations.defaultTransition,
-    transitionProperty: "background-color"
-  },
-  settingsIcon: {
-    width: 16,
-    height: 16
-  },
-  clear: {
-    display: "flex",
-    alignItems: "center",
-    height: FILTER_HEIGHT
-  },
-  filterWithClearButton: {
-    display: "flex",
-    gap: 16,
-    minWidth: 0
-  }
-});
-const clearButtonStyles$4 = {
-  s: {
-    paddingLeft: 0,
-    paddingRight: 0,
-    minWidth: "unset"
-  },
-  text: {
-    background: "none",
-    color: colors.GREY_ACTIVE,
-    "&:hover, &:focus": {
-      color: colors.FONT_MEDIUM
-    },
-    "&:active": {
-      color: colors.FONT_MAIN
-    },
-    "&:hover, &:focus, &:active": {
-      background: "none",
-      borderColor: "transparent"
-    }
-  }
-};
-const innerTextButtonStyles = {
-  text: {
-    color: colors.GREY_ACTIVE,
-    "&:hover, &:focus": {
-      color: colors.FONT_MEDIUM
-    },
-    "&:active": {
-      color: colors.FONT_MEDIUM
-    }
-  }
-};
 const useStyles$v = createThemedStyles("FilterInterval", {
   root: {
     padding: 8,
@@ -7697,7 +7782,7 @@ function FilterSelect({
 }
 const useStyles$s = createThemedStyles("FilterWithDates", {
   root: {
-    width: 320,
+    width: 312,
     background: colors.CLASSIC_WHITE,
     position: "relative",
     zIndex: 20
@@ -7716,27 +7801,10 @@ const useStyles$s = createThemedStyles("FilterWithDates", {
     flexDirection: "row-reverse",
     justifyContent: "space-between",
     padding: 8
-  },
-  datepicker: {}
+  }
 });
 const clearButtonStyles = structuredClone(innerTextButtonStyles);
 const backButtonStyles = innerTextButtonStyles;
-const PICKER_TOP_MARGIN = 28;
-const PICKER_WITH_BUTTONS_TOP_MARGIN = 56;
-const START_PICKER_LEFT_MARGIN = -20;
-const END_PICKER_LEFT_MARGIN = -170;
-const startDatePickerStyles = {
-  popper: { marginTop: PICKER_TOP_MARGIN, marginLeft: START_PICKER_LEFT_MARGIN }
-};
-const startDatePickerWithButtonStyles = {
-  popper: { marginTop: PICKER_WITH_BUTTONS_TOP_MARGIN, marginLeft: START_PICKER_LEFT_MARGIN }
-};
-const endDatePickerStyles = {
-  popper: { marginTop: PICKER_TOP_MARGIN, marginLeft: END_PICKER_LEFT_MARGIN }
-};
-const endDatePickerWithButtonStyles = {
-  popper: { marginTop: PICKER_WITH_BUTTONS_TOP_MARGIN, marginLeft: END_PICKER_LEFT_MARGIN }
-};
 const FilterWithDates = ({
   value,
   onChange,
@@ -7764,36 +7832,22 @@ const FilterWithDates = ({
     className: "tweakBackButton",
     currentComponentName: "FilterWithDates"
   });
-  const hasButtonsRow = isClearable || isNotEmpty(onStartBtnSubmit);
   const tweakStartDatePickerStyles = useTweakStyles({
-    innerStyles: hasButtonsRow ? startDatePickerWithButtonStyles : startDatePickerStyles,
     tweakStyles,
     className: "tweakStartDatePicker",
     currentComponentName: "FilterWithDates"
   });
   const tweakEndDatePickerStyles = useTweakStyles({
-    innerStyles: hasButtonsRow ? endDatePickerWithButtonStyles : endDatePickerStyles,
     tweakStyles,
     className: "tweakEndDatePicker",
     currentComponentName: "FilterWithDates"
   });
-  const [isOpenFrom, setOpenFrom] = useState(false);
-  const [isOpenTo, setOpenTo] = useState(false);
-  const ref = useRef(null);
+  const popperTargetRef = useRef(null);
   const dateLocale = localeKey === "ru" ? ru : enUS;
   const translates = useMemo(() => getLocale$1(localeKey, locale), [localeKey, locale]);
   const handleClear = () => {
     onEndBtnSubmit();
   };
-  const isOpenCalendar = isOpenFrom || isOpenTo;
-  const handleFromSelected = (val) => {
-    onChange({ from: val, to: value?.to ?? null });
-    setOpenFrom(false);
-  };
-  const handleToSelected = (val) => {
-    onChange({ from: value?.from ?? null, to: val });
-    setOpenTo(false);
-  };
   const handleChangeFrom = (val) => {
     if (val !== null && value !== void 0 && value.to !== null && isAfter(val, value.to)) {
       onChange({ from: value.to, to: val });
@@ -7808,7 +7862,7 @@ const FilterWithDates = ({
       onChange({ from: value?.from ?? null, to: val });
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: classes.root, ...addDataAttributes$1(data, testId), children: [
+  return /* @__PURE__ */ jsxs("div", { className: classes.root, ref: popperTargetRef, ...addDataAttributes$1(data, testId), children: [
     /* @__PURE__ */ jsxs("div", { className: classes.container, children: [
       /* @__PURE__ */ jsx("div", { className: classes.containerItem, children: /* @__PURE__ */ jsx(
         DatePicker,
@@ -7822,6 +7876,7 @@ const FilterWithDates = ({
           tweakStyles: tweakStartDatePickerStyles,
           testId: getTestId(testId, "from"),
           isClearable,
+          popperProps: { elements: { reference: popperTargetRef?.current } },
           ...startPickerProps
         }
       ) }),
@@ -7837,6 +7892,7 @@ const FilterWithDates = ({
           tweakStyles: tweakEndDatePickerStyles,
           testId: getTestId(testId, "to"),
           isClearable,
+          popperProps: { elements: { reference: popperTargetRef?.current } },
           ...endPickerProps
         }
       ) })
@@ -7865,18 +7921,7 @@ const FilterWithDates = ({
           children: translates.back
         }
       ) })
-    ] }),
-    isOpenCalendar && /* @__PURE__ */ jsx("div", { ref, className: classes.datepicker, children: /* @__PURE__ */ jsx(
-      DatePicker,
-      {
-        selectedDate: (isOpenFrom ? value?.from : value?.to) ?? null,
-        label: "",
-        locale: dateLocale,
-        months: translates.months,
-        isInline: true,
-        onChangeDate: isOpenFrom ? handleFromSelected : handleToSelected
-      }
-    ) })
+    ] })
   ] });
 };
 const useStyles$r = createThemedStyles("FilterWithPeriod", {
@@ -8072,6 +8117,22 @@ function Filter(props) {
       }
     );
   }
+  if (filter2.type === "datePickerSingle") {
+    const preparedValue = isDateOrEmpty(value) ? value : void 0;
+    return /* @__PURE__ */ jsx(
+      FilterDateSingle,
+      {
+        value: preparedValue,
+        onChange,
+        onClose,
+        onEndBtnSubmit: () => onChange(void 0),
+        localeKey: translatesLocaleKey,
+        locale: translates,
+        testId: getTestId(testId, "datePicker"),
+        ...filter2
+      }
+    );
+  }
   if (filter2.type === "multiSelect") {
     const preparedValue = isMultiSelectValue(value) ? value : void 0;
     return /* @__PURE__ */ jsx(
@@ -8351,7 +8412,7 @@ function FilterValueView({
   }
   const isMultiple = filter2.type === "custom" && filter2.valueViewType === "multiple";
   const isRange = filter2.type === "custom" && filter2.valueViewType === "range";
-  const isDate = filter2.type === "dateRange" || filter2.type === "dateRangeWithoutPeriod";
+  const isDateRange = filter2.type === "dateRange" || filter2.type === "dateRangeWithoutPeriod";
   const displayValue = (v) => {
     if (!isNotEmpty(v)) {
       return "";
@@ -8400,7 +8461,7 @@ function FilterValueView({
     }
     return /* @__PURE__ */ jsx("span", { className: classes.text, children: intervals.join(" ") });
   }
-  if (isDate) {
+  if (isDateRange) {
     const { from, to, periodType, label } = value;
     const hasFrom = from !== void 0 && from !== null;
     const hasTo = to !== void 0 && to !== null;
@@ -8671,9 +8732,9 @@ function FiltersPane({
   onSettingsButtonClick,
   onClear
 }) {
-  const classes = useStyles$w({ theme: tweakStyles });
+  const classes = useStyles$x({ theme: tweakStyles });
   const tweakClearButtonStyles = useTweakStyles({
-    innerStyles: clearButtonStyles$4,
+    innerStyles: clearButtonStyles$5,
     tweakStyles,
     className: "tweakClearButton",
     currentComponentName: "FiltersPane"
@@ -10774,131 +10835,49 @@ function RadioButton({
     }
   );
 }
-const SELECTOR_TOTAL_GAP = 4;
-const SELECTOR_BORDER_WIDTH = 1;
-const SELECTOR_GAP = SELECTOR_TOTAL_GAP - SELECTOR_BORDER_WIDTH;
-const getSelectorLineStyle = (activeElementData) => isNotEmpty(activeElementData) ? {
-  width: activeElementData.clientWidth - SELECTOR_GAP * 2,
-  transform: `translateX(${activeElementData.offsetLeft}px)`
-} : void 0;
 const useStyles$7 = createThemedStyles("Selector", {
-  root: {
-    display: "flex",
-    alignItems: "center",
-    listStyle: "none",
-    position: "relative"
-  },
-  required: {
-    "&::before": {
-      top: "50%",
-      left: -12,
-      width: 6,
-      height: 6,
+  selector: {
+    display: "grid",
+    gridAutoFlow: "column",
+    gridAutoColumns: "auto",
+    boxSizing: "border-box",
+    position: "relative",
+    "&:has($active)::before": {
       content: '""',
       position: "absolute",
-      transform: "translate(0, -50%)",
-      borderRadius: "50%",
-      backgroundColor: colors.ORANGE_FOCUS
+      transition: animations.defaultTransition,
+      transitionProperty: "left, width",
+      width: "var(--active-element-width)",
+      height: "var(--active-element-height)",
+      top: "var(--active-element-top)",
+      left: "var(--active-element-left)"
     }
   },
-  invalid: {},
-  optionWrapper: {
-    height: "100%"
+  autoWidth: {
+    gridAutoColumns: "1fr"
   },
+  required: {},
+  invalid: {},
   option: {
+    appearance: "none",
+    background: "none",
+    border: "none",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    appearance: "none",
-    borderRadius: 0,
-    padding: 0,
-    border: "none",
-    cursor: "pointer",
-    width: "100%"
-  },
-  active: {
-    cursor: "default"
-  },
-  disabled: {
-    cursor: "default",
-    "& $optionText": {
-      color: colors.FONT_LABEL
-    }
-  },
-  optionIcon: {
-    width: 20,
-    height: 20
-  },
-  optionText: {},
-  iconFromRight: {
-    "& $option": {
+    zIndex: 1,
+    "$iconFromRight &": {
       flexDirection: "row-reverse"
     }
   },
+  active: {},
+  disabled: {},
+  optionIcon: {},
+  optionText: {},
+  iconFromRight: {},
   s: {},
   m: {},
-  l: {},
-  line: {},
-  selector: {
-    display: "grid",
-    gridAutoFlow: "column",
-    gridAutoColumns: "1fr",
-    borderRadius: dimensions.BORDER_RADIUS_SMALL,
-    backgroundColor: colors.BORDER_LIGHT,
-    width: "fit-content",
-    position: "relative",
-    border: ["solid", SELECTOR_BORDER_WIDTH, "transparent"],
-    "& $line": {
-      content: '""',
-      position: "absolute",
-      left: SELECTOR_GAP,
-      height: `calc(100% - ${SELECTOR_GAP * 2}px)`,
-      backgroundColor: colors.CLASSIC_WHITE,
-      borderRadius: dimensions.BORDER_RADIUS_SMALL,
-      transition: animations.defaultTransition,
-      transitionProperty: "transform, width"
-    },
-    "&$invalid": {
-      borderColor: colors.RED_WARNING
-    },
-    "& $option": {
-      gap: 6,
-      position: "relative",
-      zIndex: 1,
-      height: "100%",
-      color: colors.FONT_MEDIUM,
-      fontSize: 16,
-      transition: animations.defaultTransition,
-      transitionProperty: "color",
-      background: "none",
-      "&$s": {
-        padding: [4, 8],
-        fontSize: 10,
-        lineHeight: "14px"
-      },
-      "&$m": {
-        padding: [14, 18]
-      },
-      "&$l": {
-        padding: [16, 24]
-      },
-      "&:hover, &:focus": {
-        color: colors.FONT_MAIN
-      },
-      "&$active": {
-        color: colors.FONT_MAIN
-      }
-    }
-  },
-  autoWidth: {
-    "&$selector": {
-      gridAutoColumns: "auto",
-      "& $line": {
-        width: "unset",
-        transform: "unset"
-      }
-    }
-  }
+  l: {}
 });
 function Selector({
   options,
@@ -10914,57 +10893,53 @@ function Selector({
   tweakStyles,
   onChange
 }) {
-  const classes = useStyles$7({ theme: tweakStyles });
-  const optionsValues = options.map((opt) => opt.value);
-  const [elementsData, setElementsData] = useState([]);
-  const listRef = useRef(null);
-  if (hasDuplicates(optionsValues)) {
-    console.error("Selector: Значения options.value должны быть уникальными");
-  }
-  useEffect(() => {
-    const listEl = listRef.current;
-    if (listEl === null) {
-      return;
+  const classes = useStyles$7({ tweakStyles });
+  const updateVariables = (active) => {
+    if (isNotEmpty(active?.parentElement)) {
+      active.parentElement.style.setProperty("--active-element-width", `${active.clientWidth}px`);
+      active.parentElement.style.setProperty("--active-element-height", `${active.clientHeight}px`);
+      active.parentElement.style.setProperty("--active-element-left", `${active.offsetLeft}px`);
+      active.parentElement.style.setProperty("--active-element-top", `${active.offsetTop}px`);
     }
-    setElementsData([...listEl.querySelectorAll(`.${classes.optionWrapper}`)]);
-  }, [options, size2]);
-  const activeElementData = isNotEmpty(value) ? elementsData[optionsValues.indexOf(value)] : void 0;
-  return /* @__PURE__ */ jsxs(
+  };
+  const resizeRef = useResizeRef({
+    onTargetChange: (target) => updateVariables(target.querySelector(`.${classes.active}`))
+  });
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx(classes.root, classes.selector, {
+      ref: resizeRef,
+      className: clsx(classes.selector, classes[size2], {
         [classes.iconFromRight]: iconPosition === "right",
         [classes.invalid]: isInvalid,
         [classes.required]: isRequired,
         [classes.autoWidth]: hasSameOptionsWidth
       }),
-      ref: listRef,
       ...addDataAttributes$1(data, testId),
-      children: [
-        isNotEmpty(activeElementData) && /* @__PURE__ */ jsx("div", { className: classes.line, style: getSelectorLineStyle(activeElementData) }),
-        options.map((option) => {
-          const optionId = option.value.toString();
-          const isDisabledOption = option.isDisabled ?? isDisabled;
-          const isActiveOption = option.value === value;
-          return /* @__PURE__ */ jsx("div", { className: classes.optionWrapper, children: /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              className: clsx(classes.option, classes[size2], {
-                [classes.active]: isActiveOption,
-                [classes.disabled]: isDisabledOption
-              }),
-              disabled: isDisabledOption,
-              onClick: !isDisabledOption ? () => onChange(option.value) : void 0,
-              ...addDataTestId(testId, optionId),
-              children: [
-                isReactNodeNotEmpty(option.icon) && /* @__PURE__ */ jsx("div", { className: classes.optionIcon, children: renderIcon(option.icon) }),
-                /* @__PURE__ */ jsx("div", { className: classes.optionText, children: option.label })
-              ]
-            }
-          ) }, optionId);
-        })
-      ]
+      children: options.map((option) => {
+        const optionId = String(option.value);
+        const isDisabledOption = option.isDisabled || isDisabled;
+        const isActiveOption = option.value === value;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: isActiveOption ? updateVariables : void 0,
+            type: "button",
+            className: clsx(classes.option, {
+              [classes.active]: isActiveOption,
+              [classes.disabled]: isDisabledOption
+            }),
+            disabled: isDisabledOption,
+            onClick: !isDisabledOption ? () => onChange(option.value) : void 0,
+            ...addDataTestId(testId, optionId),
+            children: [
+              isReactNodeNotEmpty(option.icon) && /* @__PURE__ */ jsx("div", { className: classes.optionIcon, children: renderIcon(option.icon) }),
+              /* @__PURE__ */ jsx("div", { className: classes.optionText, children: option.label })
+            ]
+          },
+          optionId
+        );
+      })
     }
   );
 }
@@ -12025,6 +12000,7 @@ export {
   FileInput,
   FileItem,
   Filter,
+  FilterDateSingle,
   FilterInterval,
   FilterMultiSelect,
   FilterSelect,