@consta/uikit 3.23.0 → 3.24.1-beta.0

package/__internal__/src/components/DatePickerCanary/types.js

@@ -1,3 +1,4 @@
+import { dateTimePropViewDefault } from '../DateTimeCanary/helpers';
 export var datePickerPropType = [
     'date',
     'date-range',
@@ -10,6 +11,7 @@ export var datePickerPropType = [
     'month-range',
 ];
 export var datePickerPropTypeDefault = datePickerPropType[0];
+export var datePickerPropDateTimeViewDefault = dateTimePropViewDefault;
 export var datePickerErrorTypes = [
     'outOfRange',
     'invalidInputAttempt',

package/__internal__/src/components/DatePickerCanary/useCurrentVisibleDate.d.ts

@@ -1,2 +1,5 @@
-import React from 'react';
-export declare const useCurrentVisibleDate: (date?: Date | undefined, onChange?: ((date: Date) => void) | undefined) => [Date | undefined, React.Dispatch<React.SetStateAction<Date | undefined>>];
+/// <reference types="react" />
+import { UseCurrentVisibleDateProps } from '../DateTimeCanary/helpers/useCurrentVisibleDate';
+export declare const useCurrentVisibleDate: (props: UseCurrentVisibleDateProps & {
+    calendarVisible: boolean;
+}) => [Date, import("react").Dispatch<import("react").SetStateAction<Date>>];

package/__internal__/src/components/DatePickerCanary/useCurrentVisibleDate.js

@@ -1,8 +1,11 @@
-import { useEffect, useState } from 'react';
-export var useCurrentVisibleDate = function (date, onChange) {
-    var _a;
-    var state = useState(date);
-    useEffect(function () { return state[1](date); }, [date === null || date === void 0 ? void 0 : date.getTime()]);
-    useEffect(function () { return state[0] && (onChange === null || onChange === void 0 ? void 0 : onChange(state[0])); }, [(_a = state[0]) === null || _a === void 0 ? void 0 : _a.getTime()]);
+import { useEffect } from 'react';
+import { getCurrentVisibleDate, useCurrentVisibleDate as useDateTimeCurrentVisibleDate, } from '../DateTimeCanary/helpers/useCurrentVisibleDate';
+export var useCurrentVisibleDate = function (props) {
+    var state = useDateTimeCurrentVisibleDate(props);
+    useEffect(function () {
+        if (props.calendarVisible) {
+            state[1](getCurrentVisibleDate(props));
+        }
+    }, [props.calendarVisible]);
     return state;
 };

package/__internal__/src/components/DateTimeCanary/DateTimeItem/DateTimeItem.d.ts

@@ -19,4 +19,4 @@ export declare const DateTimeItem: React.ForwardRefExoticComponent<Pick<Pick<{
     event?: boolean | undefined;
     role?: undefined;
     children?: undefined;
-} & Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "css" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "ref" | "key" | "form" | "name" | "type" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value">, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "ref" | "disabled" | "key" | "form" | "label" | "name" | "type" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "selected" | "current" | "event">, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "key" | "form" | "label" | "name" | "type" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "selected" | "current" | "event"> & React.RefAttributes<HTMLButtonElement>>;
+} & Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "css" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "ref" | "key" | "form" | "name" | "type" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value">, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "ref" | "disabled" | "key" | "form" | "label" | "name" | "type" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "selected" | "event" | "current">, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "key" | "form" | "label" | "name" | "type" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "selected" | "event" | "current"> & React.RefAttributes<HTMLButtonElement>>;

package/__internal__/src/components/DateTimeCanary/DateTimeSlider/DateTimeSlider.css

@@ -83,7 +83,7 @@
 
 /* исправляет разрыв между полосками */
 
-.DateTimeSlider-Parent_selected + .DateTimeSlider-Parent_selected {
+.DateTimeSlider-Parent_selected + .DateTimeSlider-Parent_selected::before {
         left: calc(var(--value-offset) - 1px);
         width: calc(var(--value-width) + 1px);
       }

package/__internal__/src/components/DateTimeCanary/DateTimeTypeDate/DateTimeTypeDate.js

@@ -3,7 +3,6 @@ import React, { forwardRef, useEffect } from 'react';
 import { addMonths, startOfMonth } from 'date-fns';
 import ruLocale from 'date-fns/locale/ru';
 import { useFlag } from '../../../hooks/useFlag/useFlag';
-import { DateTimeAdditionalControls } from '../DateTimeAdditionalControls/DateTimeAdditionalControls';
 import { DateTimeLabel } from '../DateTimeLabel/DateTimeLabel';
 import { DateTimeMonth } from '../DateTimeMonth/DateTimeMonth';
 import { DateTimeToggler } from '../DateTimeToggler/DateTimeToggler';
@@ -13,24 +12,24 @@ import { getDaysOfMonth, getDaysOfWeek, getHandleSelectDate, getMouthLabelWithYe
 import { dateTimePropView, dateTimePropViewDefault } from '../helpers/types';
 import { cnDateTimeMixLayout } from '../mixs';
 export var DateTimeTypeDate = forwardRef(function (props, ref) {
-    var className = props.className, 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 ? ruLocale : _a, _b = props.view, view = _b === void 0 ? dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, renderAdditionalControls = props.renderAdditionalControls, otherProps = __rest(props, ["className", "minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "view", "onMove", "onChangeCurrentVisibleDate", "renderAdditionalControls"]);
-    var _c = __read(useFlag(), 2), changeMonth = _c[0], _d = _c[1], on = _d.on, off = _d.off;
+    var className = props.className, 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 ? ruLocale : _a, _b = props.view, view = _b === void 0 ? dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, otherProps = __rest(props, ["className", "minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "view", "onMove", "onChangeCurrentVisibleDate"]);
+    var _c = __read(useFlag(), 2), changeMonth = _c[0], setChangeMonth = _c[1];
     useEffect(function () {
         !changeMonth && (onMove === null || onMove === void 0 ? void 0 : onMove(moveTypes[2]));
     }, [changeMonth]);
-    var _e = __read(useCurrentVisibleDate({
+    var _d = __read(useCurrentVisibleDate({
         currentVisibleDate: currentVisibleDateProp,
         maxDate: maxDate,
         minDate: minDate,
         value: value,
         startOfUnit: startOfMonth,
         onChangeCurrentVisibleDate: onChangeCurrentVisibleDate
-    }), 2), currentVisibleDate = _e[0], setCurrentVisibleDate = _e[1];
+    }), 2), currentVisibleDate = _d[0], setCurrentVisibleDate = _d[1];
     if (changeMonth) {
         return (React.createElement(DateTimeTypeMonth, __assign({}, otherProps, { ref: ref, className: className, minDate: minDate, maxDate: maxDate, locale: locale, events: events, currentVisibleDate: currentVisibleDate, view: view, onChange: function (_a) {
                 var value = _a.value;
                 setCurrentVisibleDate(value);
-                off();
+                setChangeMonth.off();
             }, onMove: onMove })));
     }
     var handleSelectDate = getHandleSelectDate({
@@ -56,9 +55,8 @@ export var DateTimeTypeDate = forwardRef(function (props, ref) {
     var prevMonthHandle = function () { return setCurrentVisibleDate(addMonths(currentVisibleDate, -1)); };
     if (view === dateTimePropView[0]) {
         return (React.createElement("div", __assign({}, otherProps, { ref: ref, className: cnDateTimeMixLayout({ view: view }, [className]) }),
-            React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), prevOnClick: prevMonthHandle, nextOnClick: nextMonthHandle, label: pageOneLabel, onLabelClick: on }),
-            React.createElement(DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageOneDaysOfMonth }),
-            React.createElement(DateTimeAdditionalControls, { currentVisibleDate: currentVisibleDate, renderAdditionalControls: renderAdditionalControls })));
+            React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), prevOnClick: prevMonthHandle, nextOnClick: nextMonthHandle, label: pageOneLabel, onLabelClick: setChangeMonth.on }),
+            React.createElement(DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageOneDaysOfMonth })));
     }
     var pageTwoCurrentVisibleDate = addMonths(currentVisibleDate, 1);
     var pageTwoDaysOfMonth = getDaysOfMonth({
@@ -75,21 +73,19 @@ export var DateTimeTypeDate = forwardRef(function (props, ref) {
         return (React.createElement(React.Fragment, null,
             React.createElement("div", __assign({}, otherProps, { ref: ref, className: cnDateTimeMixLayout({ view: view }, [className]) }),
                 React.createElement("div", { className: cnDateTimeMixLayout('Page') },
-                    React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), prevOnClick: prevMonthHandle, label: pageOneLabel, onLabelClick: on }),
+                    React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), prevOnClick: prevMonthHandle, label: pageOneLabel, onLabelClick: setChangeMonth.on }),
                     React.createElement(DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageOneDaysOfMonth })),
                 React.createElement("div", { className: cnDateTimeMixLayout('Page') },
-                    React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), nextOnClick: nextMonthHandle, label: pageTwoLabel, onLabelClick: on }),
-                    React.createElement(DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageTwoDaysOfMonth }))),
-            React.createElement(DateTimeAdditionalControls, { currentVisibleDate: currentVisibleDate, renderAdditionalControls: renderAdditionalControls })));
+                    React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), nextOnClick: nextMonthHandle, label: pageTwoLabel, onLabelClick: setChangeMonth.on }),
+                    React.createElement(DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageTwoDaysOfMonth })))));
     }
     return (React.createElement("div", __assign({}, otherProps, { ref: ref, className: cnDateTimeMixLayout({ view: view }, [className]) }),
         React.createElement(DateTimeYearSlider, { className: cnDateTimeMixLayout('Slider'), currentVisibleDate: currentVisibleDate, onChange: setCurrentVisibleDate, value: value, locale: locale }),
         React.createElement("div", { className: cnDateTimeMixLayout('PageWrapper') },
             React.createElement("div", { className: cnDateTimeMixLayout('Page') },
-                React.createElement(DateTimeLabel, { className: cnDateTimeMixLayout('Label'), label: pageOneLabel, onClick: on, cursor: "pointer" }),
+                React.createElement(DateTimeLabel, { className: cnDateTimeMixLayout('Label'), label: pageOneLabel, onClick: setChangeMonth.on, cursor: "pointer" }),
                 React.createElement(DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageOneDaysOfMonth })),
             React.createElement("div", { className: cnDateTimeMixLayout('Page') },
-                React.createElement(DateTimeLabel, { className: cnDateTimeMixLayout('Label'), label: pageTwoLabel, onClick: on, cursor: "pointer" }),
-                React.createElement(DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageTwoDaysOfMonth }))),
-        React.createElement(DateTimeAdditionalControls, { currentVisibleDate: currentVisibleDate, renderAdditionalControls: renderAdditionalControls })));
+                React.createElement(DateTimeLabel, { className: cnDateTimeMixLayout('Label'), label: pageTwoLabel, onClick: setChangeMonth.on, cursor: "pointer" }),
+                React.createElement(DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageTwoDaysOfMonth })))));
 });

package/__internal__/src/components/DateTimeCanary/DateTimeTypeDateTime/DateTimeTypeDateTime.js

@@ -3,14 +3,13 @@ import './DateTimeTypeDateTime.css';
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { useForkRef } from '../../../hooks/useForkRef/useForkRef';
 import { cn } from '../../../utils/bem';
-import { DateTimeAdditionalControls } from '../DateTimeAdditionalControls/DateTimeAdditionalControls';
 import { DateTimeTypeDate } from '../DateTimeTypeDate/DateTimeTypeDate';
 import { DateTimeTypeTime } from '../DateTimeTypeTime/DateTimeTypeTime';
 import { moveTypes } from '../helpers';
 import { useOnChange } from './useOnChange';
 var cnDateTimeTypeDateTime = cn('DateTimeTypeDateTime');
 export var DateTimeTypeDateTime = forwardRef(function (props, ref) {
-    var className = props.className, onMoveProp = props.onMove, currentVisibleDate = props.currentVisibleDate, value = props.value, onChange = props.onChange, onChangeRange = props.onChangeRange, minDate = props.minDate, maxDate = props.maxDate, events = props.events, locale = props.locale, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, multiplicitySeconds = props.multiplicitySeconds, multiplicityMinutes = props.multiplicityMinutes, multiplicityHours = props.multiplicityHours, style = props.style, renderAdditionalControls = props.renderAdditionalControls, _a = props.timeFor, timeFor = _a === void 0 ? 'start' : _a, otherProps = __rest(props, ["className", "onMove", "currentVisibleDate", "value", "onChange", "onChangeRange", "minDate", "maxDate", "events", "locale", "onChangeCurrentVisibleDate", "multiplicitySeconds", "multiplicityMinutes", "multiplicityHours", "style", "renderAdditionalControls", "timeFor"]);
+    var className = props.className, onMoveProp = props.onMove, currentVisibleDate = props.currentVisibleDate, value = props.value, onChange = props.onChange, onChangeRange = props.onChangeRange, minDate = props.minDate, maxDate = props.maxDate, events = props.events, locale = props.locale, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, multiplicitySeconds = props.multiplicitySeconds, multiplicityMinutes = props.multiplicityMinutes, multiplicityHours = props.multiplicityHours, style = props.style, _a = props.timeFor, timeFor = _a === void 0 ? 'start' : _a, otherProps = __rest(props, ["className", "onMove", "currentVisibleDate", "value", "onChange", "onChangeRange", "minDate", "maxDate", "events", "locale", "onChangeCurrentVisibleDate", "multiplicitySeconds", "multiplicityMinutes", "multiplicityHours", "style", "timeFor"]);
     var _b = __read(useState(moveTypes[2]), 2), moveType = _b[0], setMoveType = _b[1];
     var _c = __read(useState({
         '--root-padding-left': '0px'
@@ -31,7 +30,6 @@ export var DateTimeTypeDateTime = forwardRef(function (props, ref) {
     }, []);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", __assign({}, otherProps, { className: cnDateTimeTypeDateTime({ withTime: withTime }, [className]), ref: useForkRef([rootRef, ref]), style: __assign(__assign({}, style), cssVars) }),
-            React.createElement(DateTimeTypeDate, { className: cnDateTimeTypeDateTime('Date', { withTime: withTime }), onMove: onMove, currentVisibleDate: currentVisibleDate, value: value, onChange: onDateChange, onChangeRange: onDateChangeRange, minDate: minDate, maxDate: maxDate, events: events, locale: locale, renderAdditionalControls: withTime ? undefined : renderAdditionalControls, onChangeCurrentVisibleDate: onChangeCurrentVisibleDate }),
-            withTime && (React.createElement(DateTimeTypeTime, { className: cnDateTimeTypeDateTime('Time'), value: valueTime, onChange: onTimeChange, minDate: minDate, maxDate: maxDate, locale: locale, multiplicitySeconds: multiplicitySeconds, multiplicityMinutes: multiplicityMinutes, multiplicityHours: multiplicityHours }))),
-        React.createElement(DateTimeAdditionalControls, { currentVisibleDate: currentVisibleDate, renderAdditionalControls: withTime ? renderAdditionalControls : undefined })));
+            React.createElement(DateTimeTypeDate, { className: cnDateTimeTypeDateTime('Date', { withTime: withTime }), onMove: onMove, currentVisibleDate: currentVisibleDate, value: value, onChange: onDateChange, onChangeRange: onDateChangeRange, minDate: minDate, maxDate: maxDate, events: events, locale: locale, onChangeCurrentVisibleDate: onChangeCurrentVisibleDate }),
+            withTime && (React.createElement(DateTimeTypeTime, { className: cnDateTimeTypeDateTime('Time'), value: valueTime, onChange: onTimeChange, minDate: minDate, maxDate: maxDate, locale: locale, multiplicitySeconds: multiplicitySeconds, multiplicityMinutes: multiplicityMinutes, multiplicityHours: multiplicityHours })))));
 });

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

@@ -5,7 +5,6 @@ import ruLocale from 'date-fns/locale/ru';
 import { useFlag } from '../../../hooks/useFlag/useFlag';
 import { DateTime10Years } from '../DateTime10Years/DateTime10Years';
 import { DateTime10YearSlider } from '../DateTime10YearSlider/DateTime10YearSlider';
-import { DateTimeAdditionalControls } from '../DateTimeAdditionalControls/DateTimeAdditionalControls';
 import { DateTimeLabel } from '../DateTimeLabel/DateTimeLabel';
 import { DateTimeToggler } from '../DateTimeToggler/DateTimeToggler';
 import { DateTimeTypeYear } from '../DateTimeTypeYear/DateTimeTypeYear';
@@ -14,7 +13,7 @@ import { getHandleSelectDate, getMonthsOfYear, getYearTitle, isEqualMount, moveT
 import { dateTimePropView, dateTimePropViewDefault } from '../helpers/types';
 import { cnDateTimeMixLayout } from '../mixs';
 export var DateTimeTypeMonth = 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 ? ruLocale : _a, className = props.className, _b = props.view, view = _b === void 0 ? dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, renderAdditionalControls = props.renderAdditionalControls, otherProps = __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 ? ruLocale : _a, className = props.className, _b = props.view, view = _b === void 0 ? dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, otherProps = __rest(props, ["minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "className", "view", "onMove", "onChangeCurrentVisibleDate"]);
     var _c = __read(useFlag(), 2), changeYear = _c[0], _d = _c[1], on = _d.on, off = _d.off;
     useEffect(function () {
         !changeYear && (onMove === null || onMove === void 0 ? void 0 : onMove(moveTypes[1]));
@@ -57,8 +56,7 @@ export var DateTimeTypeMonth = forwardRef(function (props, ref) {
     if (view === dateTimePropView[0]) {
         return (React.createElement("div", __assign({}, otherProps, { className: cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
             React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), prevOnClick: handlePrev, nextOnClick: handleNext, label: pageOneLabel, onLabelClick: on }),
-            React.createElement(DateTimeYear, { years: pageOneMonthsOfYear }),
-            React.createElement(DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
+            React.createElement(DateTimeYear, { years: pageOneMonthsOfYear })));
     }
     var pageTwoCurrentVisibleDate = addYears(currentVisibleDate, 1);
     var pageTwoLabel = getYearTitle(pageTwoCurrentVisibleDate);
@@ -79,8 +77,7 @@ export var DateTimeTypeMonth = forwardRef(function (props, ref) {
                     React.createElement(DateTime10Years, { years: pageOneMonthsOfYear })),
                 React.createElement("div", { className: cnDateTimeMixLayout('Page') },
                     React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), nextOnClick: handleNext, label: pageTwoLabel, onLabelClick: on }),
-                    React.createElement(DateTime10Years, { years: pageTwoMonthsOfYear }))),
-            React.createElement(DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
+                    React.createElement(DateTime10Years, { years: pageTwoMonthsOfYear })))));
     }
     return (React.createElement("div", __assign({}, otherProps, { className: cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
         React.createElement(DateTime10YearSlider, { className: cnDateTimeMixLayout('Slider'), currentVisibleDate: currentVisibleDate, onChange: setCurrentVisibleDate, value: value, locale: locale }),
@@ -90,6 +87,5 @@ export var DateTimeTypeMonth = forwardRef(function (props, ref) {
                 React.createElement(DateTime10Years, { years: pageOneMonthsOfYear })),
             React.createElement("div", { className: cnDateTimeMixLayout('Page') },
                 React.createElement(DateTimeLabel, { className: cnDateTimeMixLayout('Label'), label: pageTwoLabel, onClick: on, cursor: "pointer" }),
-                React.createElement(DateTime10Years, { years: pageTwoMonthsOfYear }))),
-        React.createElement(DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
+                React.createElement(DateTime10Years, { years: pageTwoMonthsOfYear })))));
 });

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

@@ -2,7 +2,6 @@ import { __assign, __read, __rest } from "tslib";
 import './DateTimeTypeTime.css';
 import React, { forwardRef, useEffect, useMemo } from 'react';
 import { cn } from '../../../utils/bem';
-import { DateTimeAdditionalControls } from '../DateTimeAdditionalControls/DateTimeAdditionalControls';
 import { DateTimeLabel } from '../DateTimeLabel/DateTimeLabel';
 import { DateTimeTimeColumn } from '../DateTimeTimeColumn/DateTimeTimeColumn';
 import { getTimeTitle, moveTypes } from '../helpers';
@@ -11,7 +10,7 @@ var cnDateTimeTypeTime = cn('DateTimeTypeTime');
 export var DateTimeTypeTime = 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 = __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 = __rest(props, ["locale", "value", "className", "onChange", "maxDate", "minDate", "multiplicityHours", "multiplicityMinutes", "multiplicitySeconds", "onMove"]);
     useEffect(function () {
         onMove === null || onMove === void 0 ? void 0 : onMove(moveTypes[3]);
     }, []);
@@ -29,6 +28,5 @@ export var DateTimeTypeTime = forwardRef(function (props, ref) {
         React.createElement("div", { className: cnDateTimeTypeTime('Grid') },
             React.createElement(DateTimeTimeColumn, { label: locale.hours, items: hours }),
             React.createElement(DateTimeTimeColumn, { label: locale.minutes, items: minutes }),
-            React.createElement(DateTimeTimeColumn, { label: locale.seconds, items: seconds })),
-        React.createElement(DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls })));
+            React.createElement(DateTimeTimeColumn, { label: locale.seconds, items: seconds }))));
 });

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

@@ -4,14 +4,13 @@ import { addYears, startOfDecade } from 'date-fns';
 import ruLocale from 'date-fns/locale/ru';
 import { DateTime10Years } from '../DateTime10Years/DateTime10Years';
 import { DateTime100YearSlider } from '../DateTime100YearSlider/DateTime100YearSlider';
-import { DateTimeAdditionalControls } from '../DateTimeAdditionalControls/DateTimeAdditionalControls';
 import { DateTimeLabel } from '../DateTimeLabel/DateTimeLabel';
 import { DateTimeToggler } from '../DateTimeToggler/DateTimeToggler';
 import { getDecadeTitle, getHandleSelectDate, getYearsOfDecade, isEqualYear, moveTypes, useCurrentVisibleDate, } from '../helpers';
 import { dateTimePropView, dateTimePropViewDefault } from '../helpers/types';
 import { cnDateTimeMixLayout } from '../mixs';
 export var DateTimeTypeYear = 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 ? ruLocale : _a, className = props.className, _b = props.view, view = _b === void 0 ? dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, renderAdditionalControls = props.renderAdditionalControls, otherProps = __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 ? ruLocale : _a, className = props.className, _b = props.view, view = _b === void 0 ? dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, otherProps = __rest(props, ["minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "className", "view", "onMove", "onChangeCurrentVisibleDate"]);
     useEffect(function () {
         onMove === null || onMove === void 0 ? void 0 : onMove(moveTypes[0]);
     }, []);
@@ -46,8 +45,7 @@ export var DateTimeTypeYear = forwardRef(function (props, ref) {
     if (view === dateTimePropView[0]) {
         return (React.createElement("div", __assign({}, otherProps, { className: cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
             React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), prevOnClick: handlePrev, nextOnClick: handleNext, label: pageOneLabel }),
-            React.createElement(DateTime10Years, { years: pageOneYearsOfDecade }),
-            React.createElement(DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
+            React.createElement(DateTime10Years, { years: pageOneYearsOfDecade })));
     }
     var pageTwoCurrentVisibleDate = addYears(currentVisibleDate, 10);
     var pageTwoYearsOfDecade = getYearsOfDecade({
@@ -61,15 +59,13 @@ export var DateTimeTypeYear = forwardRef(function (props, ref) {
     });
     var pageTwoLabel = getDecadeTitle(pageTwoCurrentVisibleDate);
     if (view === dateTimePropView[1]) {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("div", __assign({}, otherProps, { className: cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
-                React.createElement("div", { className: cnDateTimeMixLayout('Page') },
-                    React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), prevOnClick: handlePrev, label: pageOneLabel }),
-                    React.createElement(DateTime10Years, { years: pageOneYearsOfDecade })),
-                React.createElement("div", { className: cnDateTimeMixLayout('Page') },
-                    React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), nextOnClick: handleNext, label: pageTwoLabel }),
-                    React.createElement(DateTime10Years, { years: pageTwoYearsOfDecade }))),
-            React.createElement(DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
+        return (React.createElement("div", __assign({}, otherProps, { className: cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
+            React.createElement("div", { className: cnDateTimeMixLayout('Page') },
+                React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), prevOnClick: handlePrev, label: pageOneLabel }),
+                React.createElement(DateTime10Years, { years: pageOneYearsOfDecade })),
+            React.createElement("div", { className: cnDateTimeMixLayout('Page') },
+                React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), nextOnClick: handleNext, label: pageTwoLabel }),
+                React.createElement(DateTime10Years, { years: pageTwoYearsOfDecade }))));
     }
     return (React.createElement("div", __assign({}, otherProps, { className: cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
         React.createElement(DateTime100YearSlider, { className: cnDateTimeMixLayout('Slider'), currentVisibleDate: currentVisibleDate, onChange: setCurrentVisibleDate, value: value, locale: locale }),
@@ -79,6 +75,5 @@ export var DateTimeTypeYear = forwardRef(function (props, ref) {
                 React.createElement(DateTime10Years, { years: pageOneYearsOfDecade })),
             React.createElement("div", { className: cnDateTimeMixLayout('Page') },
                 React.createElement(DateTimeLabel, { className: cnDateTimeMixLayout('Label'), label: pageTwoLabel }),
-                React.createElement(DateTime10Years, { years: pageTwoYearsOfDecade }))),
-        React.createElement(DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
+                React.createElement(DateTime10Years, { years: pageTwoYearsOfDecade })))));
 });

package/__internal__/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__/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__/src/components/DateTimeCanary/helpers/useCurrentVisibleDate.js

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import { isDateInRange } from './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;
@@ -34,10 +34,13 @@ var getCurrentVisibleDate = function (_a) {
     }
     return currentDate;
 };
+export var getCurrentVisibleDate = function (props) {
+    return props.startOfUnit(calculateCurrentVisibleDate(props));
+};
 export var useCurrentVisibleDate = function (props) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     var currentVisibleDate = useMemo(function () {
-        return props.startOfUnit(getCurrentVisibleDate(props));
+        return 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,
@@ -45,6 +48,6 @@ export var useCurrentVisibleDate = function (props) {
     ]);
     var state = useState(currentVisibleDate);
     useEffect(function () { return state[1](currentVisibleDate); }, [currentVisibleDate.getTime()]);
-    useEffect(function () { var _a; return (_a = props.onChangeCurrentVisibleDate) === null || _a === void 0 ? void 0 : _a.call(props, state[0]); }, [state[0].getTime()]);
+    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__/src/components/File/File.js

@@ -16,7 +16,7 @@ import { FileIconMp3 } from '../../fileIcons/FileIconMp3/FileIconMp3';
 import { FileIconMp4 } from '../../fileIcons/FileIconMp4/FileIconMp4';
 import { FileIconPdf } from '../../fileIcons/FileIconPdf/FileIconPdf';
 import { FileIconPng } from '../../fileIcons/FileIconPng/FileIconPng';
-import { FileIconPtt } from '../../fileIcons/FileIconPtt/FileIconPtt';
+import { FileIconPpt } from '../../fileIcons/FileIconPpt/FileIconPpt';
 import { FileIconRar } from '../../fileIcons/FileIconRar/FileIconRar';
 import { FileIconRtf } from '../../fileIcons/FileIconRtf/FileIconRtf';
 import { FileIconTiff } from '../../fileIcons/FileIconTiff/FileIconTiff';
@@ -42,8 +42,8 @@ var mapExtensionToSvg = {
     mov: FileIconMov,
     mp4: FileIconMp4,
     pdf: FileIconPdf,
-    ptt: FileIconPtt,
-    pttx: FileIconPtt,
+    ppt: FileIconPpt,
+    pptx: FileIconPpt,
     png: FileIconPng,
     rar: FileIconRar,
     rtf: FileIconRtf,

package/__internal__/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));
+    }