@consta/uikit 3.23.0 → 3.24.1-beta.0

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeTypeMonth/DateTimeTypeMonth.js

@@ -8,7 +8,6 @@ var ru_1 = tslib_1.__importDefault(require("date-fns/locale/ru"));
 var useFlag_1 = require("../../../hooks/useFlag/useFlag");
 var DateTime10Years_1 = require("../DateTime10Years/DateTime10Years");
 var DateTime10YearSlider_1 = require("../DateTime10YearSlider/DateTime10YearSlider");
-var DateTimeAdditionalControls_1 = require("../DateTimeAdditionalControls/DateTimeAdditionalControls");
 var DateTimeLabel_1 = require("../DateTimeLabel/DateTimeLabel");
 var DateTimeToggler_1 = require("../DateTimeToggler/DateTimeToggler");
 var DateTimeTypeYear_1 = require("../DateTimeTypeYear/DateTimeTypeYear");
@@ -17,7 +16,7 @@ var helpers_1 = require("../helpers");
 var types_1 = require("../helpers/types");
 var mixs_1 = require("../mixs");
 exports.DateTimeTypeMonth = react_1.forwardRef(function (props, ref) {
-    var minDate = props.minDate, maxDate = props.maxDate, value = props.value, onChange = props.onChange, onChangeRange = props.onChangeRange, currentVisibleDateProp = props.currentVisibleDate, events = props.events, _a = props.locale, locale = _a === void 0 ? ru_1["default"] : _a, className = props.className, _b = props.view, view = _b === void 0 ? types_1.dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, renderAdditionalControls = props.renderAdditionalControls, otherProps = tslib_1.__rest(props, ["minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "className", "view", "onMove", "onChangeCurrentVisibleDate", "renderAdditionalControls"]);
+    var minDate = props.minDate, maxDate = props.maxDate, value = props.value, onChange = props.onChange, onChangeRange = props.onChangeRange, currentVisibleDateProp = props.currentVisibleDate, events = props.events, _a = props.locale, locale = _a === void 0 ? ru_1["default"] : _a, className = props.className, _b = props.view, view = _b === void 0 ? types_1.dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, otherProps = tslib_1.__rest(props, ["minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "className", "view", "onMove", "onChangeCurrentVisibleDate"]);
     var _c = tslib_1.__read(useFlag_1.useFlag(), 2), changeYear = _c[0], _d = _c[1], on = _d.on, off = _d.off;
     react_1.useEffect(function () {
         !changeYear && (onMove === null || onMove === void 0 ? void 0 : onMove(helpers_1.moveTypes[1]));
@@ -60,8 +59,7 @@ exports.DateTimeTypeMonth = react_1.forwardRef(function (props, ref) {
     if (view === types_1.dateTimePropView[0]) {
         return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: mixs_1.cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
             react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), prevOnClick: handlePrev, nextOnClick: handleNext, label: pageOneLabel, onLabelClick: on }),
-            react_1["default"].createElement(DateTimeYear_1.DateTimeYear, { years: pageOneMonthsOfYear }),
-            react_1["default"].createElement(DateTimeAdditionalControls_1.DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
+            react_1["default"].createElement(DateTimeYear_1.DateTimeYear, { years: pageOneMonthsOfYear })));
     }
     var pageTwoCurrentVisibleDate = date_fns_1.addYears(currentVisibleDate, 1);
     var pageTwoLabel = helpers_1.getYearTitle(pageTwoCurrentVisibleDate);
@@ -82,8 +80,7 @@ exports.DateTimeTypeMonth = react_1.forwardRef(function (props, ref) {
                     react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageOneMonthsOfYear })),
                 react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
                     react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), nextOnClick: handleNext, label: pageTwoLabel, onLabelClick: on }),
-                    react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageTwoMonthsOfYear }))),
-            react_1["default"].createElement(DateTimeAdditionalControls_1.DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
+                    react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageTwoMonthsOfYear })))));
     }
     return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: mixs_1.cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
         react_1["default"].createElement(DateTime10YearSlider_1.DateTime10YearSlider, { className: mixs_1.cnDateTimeMixLayout('Slider'), currentVisibleDate: currentVisibleDate, onChange: setCurrentVisibleDate, value: value, locale: locale }),
@@ -93,6 +90,5 @@ exports.DateTimeTypeMonth = react_1.forwardRef(function (props, ref) {
                 react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageOneMonthsOfYear })),
             react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
                 react_1["default"].createElement(DateTimeLabel_1.DateTimeLabel, { className: mixs_1.cnDateTimeMixLayout('Label'), label: pageTwoLabel, onClick: on, cursor: "pointer" }),
-                react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageTwoMonthsOfYear }))),
-        react_1["default"].createElement(DateTimeAdditionalControls_1.DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
+                react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageTwoMonthsOfYear })))));
 });

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeTypeTime/DateTimeTypeTime.js

@@ -5,7 +5,6 @@ var tslib_1 = require("tslib");
 require("./DateTimeTypeTime.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var bem_1 = require("../../../utils/bem");
-var DateTimeAdditionalControls_1 = require("../DateTimeAdditionalControls/DateTimeAdditionalControls");
 var DateTimeLabel_1 = require("../DateTimeLabel/DateTimeLabel");
 var DateTimeTimeColumn_1 = require("../DateTimeTimeColumn/DateTimeTimeColumn");
 var helpers_1 = require("../helpers");
@@ -14,7 +13,7 @@ var cnDateTimeTypeTime = bem_1.cn('DateTimeTypeTime');
 exports.DateTimeTypeTime = react_1.forwardRef(function (props, ref) {
     var _a;
     var _b, _c, _d;
-    var localeProp = props.locale, value = props.value, className = props.className, onChange = props.onChange, maxDate = props.maxDate, minDate = props.minDate, _e = props.multiplicityHours, multiplicityHours = _e === void 0 ? 1 : _e, _f = props.multiplicityMinutes, multiplicityMinutes = _f === void 0 ? 1 : _f, _g = props.multiplicitySeconds, multiplicitySeconds = _g === void 0 ? 1 : _g, onMove = props.onMove, renderAdditionalControls = props.renderAdditionalControls, otherProps = tslib_1.__rest(props, ["locale", "value", "className", "onChange", "maxDate", "minDate", "multiplicityHours", "multiplicityMinutes", "multiplicitySeconds", "onMove", "renderAdditionalControls"]);
+    var localeProp = props.locale, value = props.value, className = props.className, onChange = props.onChange, maxDate = props.maxDate, minDate = props.minDate, _e = props.multiplicityHours, multiplicityHours = _e === void 0 ? 1 : _e, _f = props.multiplicityMinutes, multiplicityMinutes = _f === void 0 ? 1 : _f, _g = props.multiplicitySeconds, multiplicitySeconds = _g === void 0 ? 1 : _g, onMove = props.onMove, otherProps = tslib_1.__rest(props, ["locale", "value", "className", "onChange", "maxDate", "minDate", "multiplicityHours", "multiplicityMinutes", "multiplicitySeconds", "onMove"]);
     react_1.useEffect(function () {
         onMove === null || onMove === void 0 ? void 0 : onMove(helpers_1.moveTypes[3]);
     }, []);
@@ -32,6 +31,5 @@ exports.DateTimeTypeTime = react_1.forwardRef(function (props, ref) {
         react_1["default"].createElement("div", { className: cnDateTimeTypeTime('Grid') },
             react_1["default"].createElement(DateTimeTimeColumn_1.DateTimeTimeColumn, { label: locale.hours, items: hours }),
             react_1["default"].createElement(DateTimeTimeColumn_1.DateTimeTimeColumn, { label: locale.minutes, items: minutes }),
-            react_1["default"].createElement(DateTimeTimeColumn_1.DateTimeTimeColumn, { label: locale.seconds, items: seconds })),
-        react_1["default"].createElement(DateTimeAdditionalControls_1.DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls })));
+            react_1["default"].createElement(DateTimeTimeColumn_1.DateTimeTimeColumn, { label: locale.seconds, items: seconds }))));
 });

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeTypeYear/DateTimeTypeYear.js

@@ -7,14 +7,13 @@ var date_fns_1 = require("date-fns");
 var ru_1 = tslib_1.__importDefault(require("date-fns/locale/ru"));
 var DateTime10Years_1 = require("../DateTime10Years/DateTime10Years");
 var DateTime100YearSlider_1 = require("../DateTime100YearSlider/DateTime100YearSlider");
-var DateTimeAdditionalControls_1 = require("../DateTimeAdditionalControls/DateTimeAdditionalControls");
 var DateTimeLabel_1 = require("../DateTimeLabel/DateTimeLabel");
 var DateTimeToggler_1 = require("../DateTimeToggler/DateTimeToggler");
 var helpers_1 = require("../helpers");
 var types_1 = require("../helpers/types");
 var mixs_1 = require("../mixs");
 exports.DateTimeTypeYear = react_1.forwardRef(function (props, ref) {
-    var minDate = props.minDate, maxDate = props.maxDate, value = props.value, onChange = props.onChange, onChangeRange = props.onChangeRange, currentVisibleDateProp = props.currentVisibleDate, events = props.events, _a = props.locale, locale = _a === void 0 ? ru_1["default"] : _a, className = props.className, _b = props.view, view = _b === void 0 ? types_1.dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, renderAdditionalControls = props.renderAdditionalControls, otherProps = tslib_1.__rest(props, ["minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "className", "view", "onMove", "onChangeCurrentVisibleDate", "renderAdditionalControls"]);
+    var minDate = props.minDate, maxDate = props.maxDate, value = props.value, onChange = props.onChange, onChangeRange = props.onChangeRange, currentVisibleDateProp = props.currentVisibleDate, events = props.events, _a = props.locale, locale = _a === void 0 ? ru_1["default"] : _a, className = props.className, _b = props.view, view = _b === void 0 ? types_1.dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, otherProps = tslib_1.__rest(props, ["minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "className", "view", "onMove", "onChangeCurrentVisibleDate"]);
     react_1.useEffect(function () {
         onMove === null || onMove === void 0 ? void 0 : onMove(helpers_1.moveTypes[0]);
     }, []);
@@ -49,8 +48,7 @@ exports.DateTimeTypeYear = react_1.forwardRef(function (props, ref) {
     if (view === types_1.dateTimePropView[0]) {
         return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: mixs_1.cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
             react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), prevOnClick: handlePrev, nextOnClick: handleNext, label: pageOneLabel }),
-            react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageOneYearsOfDecade }),
-            react_1["default"].createElement(DateTimeAdditionalControls_1.DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
+            react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageOneYearsOfDecade })));
     }
     var pageTwoCurrentVisibleDate = date_fns_1.addYears(currentVisibleDate, 10);
     var pageTwoYearsOfDecade = helpers_1.getYearsOfDecade({
@@ -64,15 +62,13 @@ exports.DateTimeTypeYear = react_1.forwardRef(function (props, ref) {
     });
     var pageTwoLabel = helpers_1.getDecadeTitle(pageTwoCurrentVisibleDate);
     if (view === types_1.dateTimePropView[1]) {
-        return (react_1["default"].createElement(react_1["default"].Fragment, null,
-            react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: mixs_1.cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
-                react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
-                    react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), prevOnClick: handlePrev, label: pageOneLabel }),
-                    react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageOneYearsOfDecade })),
-                react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
-                    react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), nextOnClick: handleNext, label: pageTwoLabel }),
-                    react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageTwoYearsOfDecade }))),
-            react_1["default"].createElement(DateTimeAdditionalControls_1.DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
+        return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: mixs_1.cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
+            react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
+                react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), prevOnClick: handlePrev, label: pageOneLabel }),
+                react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageOneYearsOfDecade })),
+            react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
+                react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), nextOnClick: handleNext, label: pageTwoLabel }),
+                react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageTwoYearsOfDecade }))));
     }
     return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: mixs_1.cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
         react_1["default"].createElement(DateTime100YearSlider_1.DateTime100YearSlider, { className: mixs_1.cnDateTimeMixLayout('Slider'), currentVisibleDate: currentVisibleDate, onChange: setCurrentVisibleDate, value: value, locale: locale }),
@@ -82,6 +78,5 @@ exports.DateTimeTypeYear = react_1.forwardRef(function (props, ref) {
                 react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageOneYearsOfDecade })),
             react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
                 react_1["default"].createElement(DateTimeLabel_1.DateTimeLabel, { className: mixs_1.cnDateTimeMixLayout('Label'), label: pageTwoLabel }),
-                react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageTwoYearsOfDecade }))),
-        react_1["default"].createElement(DateTimeAdditionalControls_1.DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
+                react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageTwoYearsOfDecade })))));
 });

package/__internal__/cjs-src/components/DateTimeCanary/helpers/types.d.ts

@@ -45,14 +45,8 @@ export declare type DateTimeProps<TYPE extends DateTimePropType = 'date'> = Prop
     multiplicityMinutes?: number;
     multiplicityHours?: number;
     onMove?: (type: MoveType) => void;
-    renderAdditionalControls?: DateTimeAdditionalControlRenderProp;
     timeFor?: DateTimePropTimeFor<TYPE>;
 }, HTMLDivElement>;
-export declare type DateTimeAdditionalControlRenderProp = React.ReactNode | React.ReactNode[] | AdditionalControlRenderType;
-export declare type AdditionalControlRenderType = (props: DateTimeAdditionalControlRenderProps) => React.ReactNode | React.ReactNode[];
-export declare type DateTimeAdditionalControlRenderProps = {
-    currentVisibleDate?: Date;
-};
 export declare type DateTimeComponent = <TYPE extends DateTimePropType = 'date'>(props: DateTimeProps<TYPE>) => React.ReactElement | null;
 export declare type DateTimeTypeComponent<TYPE extends DateTimePropType> = (props: Omit<DateTimeProps<TYPE>, 'type'>) => React.ReactElement | null;
 export declare type HandleSelectDate = (props: {

package/__internal__/cjs-src/components/DateTimeCanary/helpers/useCurrentVisibleDate.d.ts

@@ -4,9 +4,13 @@ declare type GetCurrentVisibleDateProps = {
     currentVisibleDate: Date | undefined;
     minDate: Date | undefined;
     maxDate: Date | undefined;
-    value: Date | DateRange | undefined;
+    value: Date | DateRange | undefined | null;
     startOfUnit: (date: Date) => Date;
     onChangeCurrentVisibleDate?: (date: Date) => void;
 };
-export declare const useCurrentVisibleDate: (props: GetCurrentVisibleDateProps) => [Date, import("react").Dispatch<import("react").SetStateAction<Date>>];
+export declare type UseCurrentVisibleDateProps = GetCurrentVisibleDateProps & {
+    onChangeCurrentVisibleDate?: (date: Date) => void;
+};
+export declare const getCurrentVisibleDate: (props: GetCurrentVisibleDateProps) => Date;
+export declare const useCurrentVisibleDate: (props: UseCurrentVisibleDateProps) => [Date, import("react").Dispatch<import("react").SetStateAction<Date>>];
 export {};

package/__internal__/cjs-src/components/DateTimeCanary/helpers/useCurrentVisibleDate.js

@@ -1,9 +1,9 @@
 "use strict";
 exports.__esModule = true;
-exports.useCurrentVisibleDate = void 0;
+exports.useCurrentVisibleDate = exports.getCurrentVisibleDate = void 0;
 var react_1 = require("react");
 var isDateInRange_1 = require("./isDateInRange");
-var getCurrentVisibleDate = function (_a) {
+var calculateCurrentVisibleDate = function (_a) {
     var currentVisibleDate = _a.currentVisibleDate, minDate = _a.minDate, maxDate = _a.maxDate, value = _a.value;
     if (currentVisibleDate) {
         return currentVisibleDate;
@@ -37,10 +37,13 @@ var getCurrentVisibleDate = function (_a) {
     }
     return currentDate;
 };
+exports.getCurrentVisibleDate = function (props) {
+    return props.startOfUnit(calculateCurrentVisibleDate(props));
+};
 exports.useCurrentVisibleDate = function (props) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     var currentVisibleDate = react_1.useMemo(function () {
-        return props.startOfUnit(getCurrentVisibleDate(props));
+        return exports.getCurrentVisibleDate(props);
     }, [
         ((_a = props.currentVisibleDate) === null || _a === void 0 ? void 0 : _a.getTime()) || 0,
         ((_b = props.minDate) === null || _b === void 0 ? void 0 : _b.getTime()) || 0,
@@ -48,6 +51,6 @@ exports.useCurrentVisibleDate = function (props) {
     ]);
     var state = react_1.useState(currentVisibleDate);
     react_1.useEffect(function () { return state[1](currentVisibleDate); }, [currentVisibleDate.getTime()]);
-    react_1.useEffect(function () { var _a; return (_a = props.onChangeCurrentVisibleDate) === null || _a === void 0 ? void 0 : _a.call(props, state[0]); }, [state[0].getTime()]);
+    react_1.useEffect(function () { var _a; return state[0] && ((_a = props.onChangeCurrentVisibleDate) === null || _a === void 0 ? void 0 : _a.call(props, state[0])); }, [(_d = state[0]) === null || _d === void 0 ? void 0 : _d.getTime()]);
     return state;
 };

package/__internal__/cjs-src/components/File/File.js

@@ -19,7 +19,7 @@ var FileIconMp3_1 = require("../../fileIcons/FileIconMp3/FileIconMp3");
 var FileIconMp4_1 = require("../../fileIcons/FileIconMp4/FileIconMp4");
 var FileIconPdf_1 = require("../../fileIcons/FileIconPdf/FileIconPdf");
 var FileIconPng_1 = require("../../fileIcons/FileIconPng/FileIconPng");
-var FileIconPtt_1 = require("../../fileIcons/FileIconPtt/FileIconPtt");
+var FileIconPpt_1 = require("../../fileIcons/FileIconPpt/FileIconPpt");
 var FileIconRar_1 = require("../../fileIcons/FileIconRar/FileIconRar");
 var FileIconRtf_1 = require("../../fileIcons/FileIconRtf/FileIconRtf");
 var FileIconTiff_1 = require("../../fileIcons/FileIconTiff/FileIconTiff");
@@ -45,8 +45,8 @@ var mapExtensionToSvg = {
     mov: FileIconMov_1.FileIconMov,
     mp4: FileIconMp4_1.FileIconMp4,
     pdf: FileIconPdf_1.FileIconPdf,
-    ptt: FileIconPtt_1.FileIconPtt,
-    pttx: FileIconPtt_1.FileIconPtt,
+    ppt: FileIconPpt_1.FileIconPpt,
+    pptx: FileIconPpt_1.FileIconPpt,
     png: FileIconPng_1.FileIconPng,
     rar: FileIconRar_1.FileIconRar,
     rtf: FileIconRtf_1.FileIconRtf,

package/__internal__/cjs-src/components/Popover/Popover.css

@@ -1,8 +1,42 @@
 .Popover {
   position: absolute;
-  top: var(--popover-top);
-  left: var(--popover-left);
   visibility: var(--popover-visibility);
   width: var(--popover-width);
   pointer-events: var(--popover-pointer-events);
 }
+
+  .Popover_direction_downCenter,
+    .Popover_direction_downRight,
+    .Popover_direction_downLeft,
+    .Popover_direction_downStartLeft,
+    .Popover_direction_downStartRight {
+      top: calc(var(--popover-top) + var(--popover-offset));
+      left: var(--popover-left);
+    }
+
+  .Popover_direction_upCenter,
+    .Popover_direction_upRight,
+    .Popover_direction_upLeft,
+    .Popover_direction_upStartLeft,
+    .Popover_direction_upStartRight {
+      top: calc(var(--popover-top) - var(--popover-offset));
+      left: var(--popover-left);
+    }
+
+  .Popover_direction_leftUp,
+    .Popover_direction_leftCenter,
+    .Popover_direction_leftDown,
+    .Popover_direction_leftStartUp,
+    .Popover_direction_leftStartDown {
+      top: var(--popover-top);
+      left: calc(var(--popover-left) - var(--popover-offset));
+    }
+
+  .Popover_direction_rightUp,
+    .Popover_direction_rightCenter,
+    .Popover_direction_rightDown,
+    .Popover_direction_rightStartUp,
+    .Popover_direction_rightStartDown {
+      top: var(--popover-top);
+      left: calc(var(--popover-left) + var(--popover-offset));
+    }

package/__internal__/cjs-src/components/Popover/Popover.js

@@ -7,7 +7,6 @@ var react_1 = tslib_1.__importStar(require("react"));
 var useClickOutside_1 = require("../../hooks/useClickOutside/useClickOutside");
 var useComponentSize_1 = require("../../hooks/useComponentSize/useComponentSize");
 var useForkRef_1 = require("../../hooks/useForkRef/useForkRef");
-var useThemeVars_1 = require("../../hooks/useThemeVars/useThemeVars");
 var bem_1 = require("../../utils/bem");
 var PortalWithTheme_1 = require("../PortalWithTheme/PortalWithTheme");
 var Theme_1 = require("../Theme/Theme");
@@ -74,7 +73,7 @@ var ContextConsumer = function (_a) {
     return react_1["default"].createElement(react_1["default"].Fragment, null, children);
 };
 var cnPopover = bem_1.cn('Popover');
-exports.Popover = react_1["default"].forwardRef(function (props, componentRef) {
+exports.Popover = react_1.forwardRef(function (props, componentRef) {
     var _a;
     var children = props.children, _b = props.direction, passedDirection = _b === void 0 ? 'upCenter' : _b, _c = props.offset, offset = _c === void 0 ? 0 : _c, arrowOffset = props.arrowOffset, _d = props.possibleDirections, possibleDirections = _d === void 0 ? exports.directions : _d, _e = props.isInteractive, isInteractive = _e === void 0 ? true : _e, onClickOutside = props.onClickOutside, _f = props.spareDirection, spareDirection = _f === void 0 ? 'downStartLeft' : _f, style = props.style, className = props.className, passedPosition = props.position, anchorRef = props.anchorRef, equalAnchorWidth = props.equalAnchorWidth, onSetDirection = props.onSetDirection, otherProps = tslib_1.__rest(props, ["children", "direction", "offset", "arrowOffset", "possibleDirections", "isInteractive", "onClickOutside", "spareDirection", "style", "className", "position", "anchorRef", "equalAnchorWidth", "onSetDirection"]);
     var ref = react_1["default"].useRef(null);
@@ -83,23 +82,12 @@ exports.Popover = react_1["default"].forwardRef(function (props, componentRef) {
     var _h = useComponentSize_1.useComponentSize(ref), width = _h.width, height = _h.height;
     var anchorSize = useComponentSize_1.useComponentSize(anchorRef || { current: null });
     var previousDirectionRef = react_1["default"].useRef(null);
-    var previousDirection = previousDirectionRef.current;
     var _j = tslib_1.__read(react_1["default"].useState([]), 2), bannedDirections = _j[0], setBannedDirections = _j[1];
     var resetBannedDirections = function () {
         setBannedDirections(function (state) { return (state.length ? [] : state); });
         previousDirectionRef.current = null;
     };
-    var vars = useThemeVars_1.useThemeVars();
     var updateAnchorClientRect = function () { var _a; return setAnchorClientRect((_a = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()); };
-    react_1["default"].useLayoutEffect(updateAnchorClientRect, [anchorSize]);
-    usePopoverReposition_1.usePopoverReposition({
-        isActive: true,
-        scrollAnchorRef: anchorRef || { current: null },
-        onRequestReposition: function () {
-            resetBannedDirections();
-            updateAnchorClientRect();
-        }
-    });
     var _k = helpers_1.getComputedPositionAndDirection({
         contentSize: { width: width, height: height },
         viewportSize: {
@@ -107,9 +95,6 @@ exports.Popover = react_1["default"].forwardRef(function (props, componentRef) {
             width: document.documentElement.clientWidth,
             height: document.documentElement.clientHeight
         },
-        offset: typeof offset === 'string'
-            ? vars.space["--space-" + offset]
-            : offset,
         arrowOffset: arrowOffset,
         direction: passedDirection,
         possibleDirections: possibleDirections,
@@ -120,23 +105,33 @@ exports.Popover = react_1["default"].forwardRef(function (props, componentRef) {
         anchorSize: anchorSize,
         spareDirection: spareDirection
     }), position = _k.position, direction = _k.direction;
-    react_1.useEffect(function () { return onSetDirection && onSetDirection(direction); }, [direction]);
+    var content = isRenderProp(children) ? children(direction) : children;
+    react_1.useLayoutEffect(function () { return onSetDirection === null || onSetDirection === void 0 ? void 0 : onSetDirection(direction); }, [direction]);
+    react_1.useLayoutEffect(resetBannedDirections, [props]);
+    react_1.useEffect(updateAnchorClientRect, [anchorSize]);
+    usePopoverReposition_1.usePopoverReposition({
+        scrollAnchorRef: anchorRef || { current: null },
+        onRequestReposition: function () {
+            resetBannedDirections();
+            updateAnchorClientRect();
+        }
+    });
     /**
      * Может возникнуть ситуация, когда перерасчет поповера всегда будет выдавать 2 направления
      * и бесконечно зацикливать себя. Для избежания таких кейсов мы запоминаем стороны,
      * которые не подошли, чтобы не возвращаться к ним и предотвратить бесконечный ререндер.
      * См. PopoverBannedPositionsStory
      */
-    if (previousDirection !== direction) {
-        if (previousDirection && !bannedDirections.includes(previousDirection)) {
-            setBannedDirections(tslib_1.__spread(bannedDirections, [previousDirection]));
+    if (previousDirectionRef.current !== direction) {
+        if (previousDirectionRef.current && !bannedDirections.includes(previousDirectionRef.current)) {
+            setBannedDirections(function (state) {
+                return previousDirectionRef.current ? tslib_1.__spread(state, [previousDirectionRef.current]) : state;
+            });
         }
         previousDirectionRef.current = direction;
     }
     // Сбрасываем при любом изменении пропсов, чтобы заново начать перебор направлений
     // Главное не сбрасывать при изменении размеров поповера, т.к. именно оно может вызвать бесконечный перебор
-    react_1["default"].useLayoutEffect(resetBannedDirections, [props]);
-    var content = isRenderProp(children) ? children(direction) : children;
-    return (react_1["default"].createElement(PortalWithTheme_1.PortalWithTheme, tslib_1.__assign({}, otherProps, { preset: theme, className: cnPopover(null, [className]), container: window.document.body, ref: useForkRef_1.useForkRef([ref, componentRef]), style: tslib_1.__assign(tslib_1.__assign({}, style), (_a = {}, _a['--popover-top'] = ((position === null || position === void 0 ? void 0 : position.y) || 0) + window.scrollY + "px", _a['--popover-left'] = ((position === null || position === void 0 ? void 0 : position.x) || 0) + window.scrollX + "px", _a["--popover-width"] = equalAnchorWidth ? anchorSize.width + "px" : undefined, _a["--popover-pointer-events"] = isInteractive ? undefined : 'none', _a["--popover-visibility"] = position ? undefined : 'hidden', _a)) }),
+    return (react_1["default"].createElement(PortalWithTheme_1.PortalWithTheme, tslib_1.__assign({}, otherProps, { preset: theme, className: cnPopover({ direction: direction }, [className]), container: window.document.body, ref: useForkRef_1.useForkRef([ref, componentRef]), style: tslib_1.__assign(tslib_1.__assign({}, style), (_a = {}, _a['--popover-top'] = ((position === null || position === void 0 ? void 0 : position.y) || 0) + window.scrollY + "px", _a['--popover-left'] = ((position === null || position === void 0 ? void 0 : position.x) || 0) + window.scrollX + "px", _a["--popover-width"] = equalAnchorWidth ? anchorSize.width + "px" : undefined, _a["--popover-pointer-events"] = isInteractive ? undefined : 'none', _a["--popover-visibility"] = position ? undefined : 'hidden', _a["--popover-offset"] = typeof offset === 'string' ? "var(--space-" + offset + ")" : offset + "px", _a)) }),
         react_1["default"].createElement(ContextConsumer, { onClickOutside: onClickOutside, ignoreClicksInsideRefs: [ref, anchorRef || { current: null }] }, content)));
 });

package/__internal__/cjs-src/components/Popover/helpers.d.ts

@@ -2,11 +2,10 @@ import { Direction, Position } from './Popover';
 declare type Size = Pick<ClientRect, 'width' | 'height'>;
 declare type PositionsByDirection = Record<Direction, NonNullable<Position>>;
 export declare const convertPixelsToNumber: (pixels: string) => number;
-export declare const getPositionsByDirection: ({ contentSize, anchorSize, position: { x, y }, offset, arrowOffset, }: {
+export declare const getPositionsByDirection: ({ contentSize, anchorSize, position: { x, y }, arrowOffset, }: {
     contentSize: Size;
     anchorSize: Size;
     position: NonNullable<Position>;
-    offset: number;
     arrowOffset?: number | undefined;
 }) => PositionsByDirection;
 declare type ComputedPositionAndDirectionParams = {
@@ -21,7 +20,7 @@ declare type ComputedPositionAndDirectionParams = {
     possibleDirections: readonly Direction[];
     bannedDirections: readonly Direction[];
 };
-export declare const getComputedPositionAndDirection: ({ position: initialPosition, contentSize, viewportSize, anchorSize, offset, arrowOffset, direction: initialDirection, possibleDirections, bannedDirections, spareDirection, }: ComputedPositionAndDirectionParams) => {
+export declare const getComputedPositionAndDirection: ({ position: initialPosition, contentSize, viewportSize, anchorSize, arrowOffset, direction: initialDirection, possibleDirections, bannedDirections, spareDirection, }: ComputedPositionAndDirectionParams) => {
     direction: Direction;
     position: Position;
 };

package/__internal__/cjs-src/components/Popover/helpers.js

@@ -10,22 +10,22 @@ exports.convertPixelsToNumber = function (pixels) {
     return Number(pixels.slice(0, pixels.length - 2));
 };
 exports.getPositionsByDirection = function (_a) {
-    var contentSize = _a.contentSize, anchorSize = _a.anchorSize, _b = _a.position, x = _b.x, y = _b.y, offset = _a.offset, _c = _a.arrowOffset, arrowOffset = _c === void 0 ? 0 : _c;
+    var contentSize = _a.contentSize, anchorSize = _a.anchorSize, _b = _a.position, x = _b.x, y = _b.y, _c = _a.arrowOffset, arrowOffset = _c === void 0 ? 0 : _c;
     var contentWidth = contentSize.width, contentHeight = contentSize.height;
     var anchorWidth = anchorSize.width, anchorHeight = anchorSize.height;
     var anchorCenter = {
         x: x + anchorWidth / 2,
         y: y + anchorHeight / 2
     };
-    var xForRightDirections = x + anchorWidth + offset;
-    var xForLeftDirections = x - contentWidth - offset;
+    var xForRightDirections = x + anchorWidth;
+    var xForLeftDirections = x - contentWidth;
     var xForVerticalDirections = {
         right: anchorCenter.x - arrowOffset,
         center: anchorCenter.x - contentWidth / 2,
         left: anchorCenter.x - contentWidth + arrowOffset
     };
-    var yForDownDirections = y + anchorHeight + offset;
-    var yForUpDirections = y - contentHeight - offset;
+    var yForDownDirections = y + anchorHeight;
+    var yForUpDirections = y - contentHeight;
     var yForHorizontalDirections = {
         up: anchorCenter.y - contentHeight + arrowOffset,
         center: anchorCenter.y - contentHeight / 2,
@@ -59,16 +59,14 @@ exports.getPositionsByDirection = function (_a) {
     };
 };
 exports.getComputedPositionAndDirection = function (_a) {
-    var initialPosition = _a.position, contentSize = _a.contentSize, viewportSize = _a.viewportSize, _b = _a.anchorSize, anchorSize = _b === void 0 ? { width: 0, height: 0 } : _b, _c = _a.offset, offset = _c === void 0 ? 0 : _c, arrowOffset = _a.arrowOffset, initialDirection = _a.direction, possibleDirections = _a.possibleDirections, bannedDirections = _a.bannedDirections, spareDirection = _a.spareDirection;
+    var initialPosition = _a.position, contentSize = _a.contentSize, viewportSize = _a.viewportSize, _b = _a.anchorSize, anchorSize = _b === void 0 ? { width: 0, height: 0 } : _b, arrowOffset = _a.arrowOffset, initialDirection = _a.direction, possibleDirections = _a.possibleDirections, bannedDirections = _a.bannedDirections, spareDirection = _a.spareDirection;
     if (!initialPosition) {
         return { position: initialPosition, direction: initialDirection };
     }
-    var currentOffset = typeof offset === 'string' ? exports.convertPixelsToNumber(offset) : offset;
     var positionsByDirection = exports.getPositionsByDirection({
         contentSize: contentSize,
         anchorSize: anchorSize,
         position: initialPosition,
-        offset: currentOffset,
         arrowOffset: arrowOffset
     });
     var direction = tslib_1.__spread([initialDirection], possibleDirections).filter(function (dir) { return !bannedDirections.includes(dir); })

package/__internal__/cjs-src/components/Popover/usePopoverReposition.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 /** Запрос репозиции поповера при ресайзе окна и скролле */
-export declare const usePopoverReposition: ({ isActive, scrollAnchorRef, onRequestReposition, }: {
-    isActive: boolean;
+export declare const usePopoverReposition: ({ scrollAnchorRef, onRequestReposition, }: {
     /** При скролле родителей этого элемента будет запрашиваться репозиция поповера */
     scrollAnchorRef: React.RefObject<HTMLElement | null>;
     onRequestReposition: () => void;

package/__internal__/cjs-src/components/Popover/usePopoverReposition.js

@@ -1,8 +1,8 @@
 "use strict";
 exports.__esModule = true;
 exports.usePopoverReposition = void 0;
-var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = require("react");
+var useMutableRef_1 = require("../../hooks/useMutableRef/useMutableRef");
 var getAllParents = function (element) {
     var mutableParents = [];
     var currentNode = element;
@@ -14,19 +14,19 @@ var getAllParents = function (element) {
 };
 /** Запрос репозиции поповера при ресайзе окна и скролле */
 exports.usePopoverReposition = function (_a) {
-    var isActive = _a.isActive, scrollAnchorRef = _a.scrollAnchorRef, onRequestReposition = _a.onRequestReposition;
-    react_1["default"].useEffect(function () {
-        if (isActive) {
-            window.addEventListener('resize', onRequestReposition);
-            var allParents_1 = (scrollAnchorRef === null || scrollAnchorRef === void 0 ? void 0 : scrollAnchorRef.current) ? getAllParents(scrollAnchorRef.current) : [];
-            allParents_1.forEach(function (parentEl) { return parentEl.addEventListener('scroll', onRequestReposition); });
-            return function () {
-                window.removeEventListener('resize', onRequestReposition);
-                allParents_1.forEach(function (parentEl) {
-                    return parentEl.removeEventListener('scroll', onRequestReposition);
-                });
-            };
-        }
-        return undefined;
-    }, [isActive, scrollAnchorRef, onRequestReposition]);
+    var scrollAnchorRef = _a.scrollAnchorRef, onRequestReposition = _a.onRequestReposition;
+    var onRequestRepositionRef = useMutableRef_1.useMutableRef(onRequestReposition);
+    react_1.useEffect(function () {
+        window.addEventListener('resize', onRequestRepositionRef.current);
+        var allParents = (scrollAnchorRef === null || scrollAnchorRef === void 0 ? void 0 : scrollAnchorRef.current) ? getAllParents(scrollAnchorRef.current) : [];
+        allParents.forEach(function (parentEl) {
+            return parentEl.addEventListener('scroll', onRequestRepositionRef.current);
+        });
+        return function () {
+            window.removeEventListener('resize', onRequestRepositionRef.current);
+            allParents.forEach(function (parentEl) {
+                return parentEl.removeEventListener('scroll', onRequestRepositionRef.current);
+            });
+        };
+    }, [scrollAnchorRef]);
 };

package/__internal__/cjs-src/components/RadioGroupCanary/RadioGroup.css

@@ -0,0 +1,35 @@
+.RadioGroup {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+  .RadioGroup_direction_column {
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+          -ms-flex-direction: column;
+              flex-direction: column;
+    }
+
+  .RadioGroup_direction_column .RadioGroup-Item:not(:last-child) {
+        margin-bottom: var(--offset);
+      }
+
+  .RadioGroup_direction_row {
+      -webkit-box-orient: horizontal;
+      -webkit-box-direction: normal;
+          -ms-flex-direction: row;
+              flex-direction: row;
+    }
+
+  .RadioGroup_direction_row .RadioGroup-Item:not(:last-child) {
+        margin-right: var(--offset);
+      }
+
+  .RadioGroup_size_m {
+      --offset: var(--space-xs);
+    }
+
+  .RadioGroup_size_l {
+      --offset: var(--space-s);
+    }

package/__internal__/cjs-src/components/RadioGroupCanary/RadioGroupCannary.d.ts

@@ -0,0 +1,5 @@
+import './RadioGroup.css';
+import { RadioGroupComponent } from './types';
+export declare const cnRadioGroup: import("@bem-react/classname").ClassNameFormatter;
+export declare const RadioGroup: RadioGroupComponent;
+export * from './types';

package/__internal__/cjs-src/components/RadioGroupCanary/RadioGroupCannary.js

@@ -0,0 +1,27 @@
+"use strict";
+exports.__esModule = true;
+exports.RadioGroup = exports.cnRadioGroup = void 0;
+var tslib_1 = require("tslib");
+require("./RadioGroup.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var useChoiceGroup_1 = require("../../hooks/useChoiceGroup/useChoiceGroup");
+var bem_1 = require("../../utils/bem");
+var Radio_1 = require("../Radio/Radio");
+var helper_1 = require("./helper");
+var types_1 = require("./types");
+exports.cnRadioGroup = bem_1.cn('RadioGroup');
+function RadioGroupRender(props, ref) {
+    var _a = helper_1.withDefaultGetters(props), _b = _a.value, value = _b === void 0 ? null : _b, items = _a.items, getItemLabel = _a.getItemLabel, getItemDisabled = _a.getItemDisabled, onChange = _a.onChange, name = _a.name, _c = _a.direction, direction = _c === void 0 ? types_1.radioGroupDefaultDirection : _c, _d = _a.size, size = _d === void 0 ? types_1.radioGroupDefaultSize : _d, _e = _a.view, view = _e === void 0 ? types_1.radioGroupDefaultView : _e, _f = _a.align, align = _f === void 0 ? types_1.radioGroupPropAlignDefault : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, className = _a.className, otherProps = tslib_1.__rest(_a, ["value", "items", "getItemLabel", "getItemDisabled", "onChange", "name", "direction", "size", "view", "align", "disabled", "className"]);
+    var _h = useChoiceGroup_1.useChoiceGroup({
+        value: value,
+        getKey: getItemLabel,
+        callBack: onChange,
+        multiple: false
+    }), getOnChange = _h.getOnChange, getChecked = _h.getChecked;
+    return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { ref: ref, className: exports.cnRadioGroup({ direction: direction, size: size, view: view }, [className]) }), items.map(function (item) { return (react_1["default"].createElement(Radio_1.Radio, { align: align, key: getItemLabel(item), label: getItemLabel(item), size: size, view: view, name: name, disabled: disabled || (!!getItemDisabled && getItemDisabled(item)), checked: getChecked(item), onChange: function (_a) {
+            var e = _a.e;
+            return getOnChange(item)(e);
+        }, className: exports.cnRadioGroup('Item') })); })));
+}
+exports.RadioGroup = react_1.forwardRef(RadioGroupRender);
+tslib_1.__exportStar(require("./types"), exports);