@consta/uikit 3.5.0 → 3.6.0

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeItem/DateTimeItem.css

@@ -0,0 +1,105 @@
+/* 
+--date-time-item-width
+--date-time-item-height
+
+задаются сверху
+*/
+
+.DateTimeItem {
+  --item-bg-color: transparent;
+  --item-bg-color-hover: transparent;
+  --item-border-color: var(--color-control-bg-primary);
+  --item-border-color-hover: var(--color-control-bg-primary-hover);
+  --item-event-color: var(--color-control-bg-primary);
+  --item-event-color-hover: var(--color-control-bg-primary-hover);
+  --item-text-color: var(--color-typo-primary);
+  --item-text-color-hover: var(--color-control-bg-primary-hover);
+  --bg-color: var(--item-bg-color);
+  --event-color: var(--item-event-color);
+  --border-color: var(--item-border-color);
+  --text-color: var(--item-text-color);
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: var(--date-time-item-width);
+  height: var(--date-time-item-height);
+  color: var(--text-color);
+  background: var(--bg-color);
+  border: none;
+  border-radius: calc(var(--date-time-item-height) / 2);
+  font-size: var(--size-text-s);
+  line-height: var(--date-time-item-height);
+  text-transform: capitalize;
+  -webkit-transition: background 0.2s, color 0.2s, -webkit-box-shadow 0.2s;
+  transition: background 0.2s, color 0.2s, -webkit-box-shadow 0.2s;
+  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
+  transition: background 0.2s, color 0.2s, box-shadow 0.2s, -webkit-box-shadow 0.2s;
+}
+
+.DateTimeItem:hover {
+    --bg-color: var(--item-bg-color-hover);
+    --event-color: var(--item-event-color-hover);
+    --border-color: var(--item-border-color-hover);
+    --text-color: var(--item-text-color-hover);
+  }
+
+.DateTimeItem_selected {
+    --item-bg-color: var(--color-control-bg-primary);
+    --item-bg-color-hover: var(--color-control-bg-primary-hover);
+    --item-border-color: transparent;
+    --item-border-color-hover: transparent;
+    --item-event-color: var(--color-control-typo-primary);
+    --item-event-color-hover: var(--color-control-typo-primary);
+    --item-text-color: var(--color-typo-primary);
+    --item-text-color-hover: var(--color-typo-primary);
+  }
+
+.DateTimeItem:not(.DateTimeItem_disabled) {
+    cursor: pointer;
+  }
+
+.DateTimeItem_disabled {
+    --item-bg-color: transparent;
+    --item-bg-color-hover: transparent;
+    --item-border-color: var(--color-control-bg-primary);
+    --item-border-color-hover: var(--color-control-bg-primary);
+    --item-event-color: var(--color-control-typo-disable);
+    --item-event-color-hover: var(--color-control-typo-disable);
+    --item-text-color: var(--color-control-typo-disable);
+    --item-text-color-hover: var(--color-control-typo-disable);
+  }
+
+.DateTimeItem_selected.date-timeItem_disabled {
+    --item-bg-color: var(--color-control-bg-disable);
+    --item-bg-color-hover: var(--color-control-bg-disable);
+    --item-border-color: transparent;
+    --item-border-color-hover: transparent;
+    --item-event-color: var(--color-control-typo-disable);
+    --item-event-color-hover: var(--color-control-typo-disable);
+    --item-text-color: var(--color-control-typo-disable);
+    --item-text-color-hover: var(--color-control-typo-disable);
+  }
+
+.DateTimeItem_event::before {
+      content: '';
+      position: absolute;
+      bottom: var(--space-2xs);
+      width: var(--space-2xs);
+      height: var(--space-2xs);
+      background: var(--event-color);
+      border-radius: 50%;
+      -webkit-transition: background 0.2s;
+      transition: background 0.2s;
+    }
+
+.DateTimeItem_current {
+    -webkit-box-shadow: inset 0 0 0 1.3px var(--border-color);
+            box-shadow: inset 0 0 0 1.3px var(--border-color);
+  }

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

@@ -0,0 +1,22 @@
+import './DateTimeItem.css';
+import React from 'react';
+import { PropsWithJsxAttributes } from '../../../utils/types/PropsWithJsxAttributes';
+export declare type DateTimeItemProps = PropsWithJsxAttributes<{
+    label: number | string;
+    current?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    event?: boolean;
+    role?: never;
+    children?: never;
+}, 'button'>;
+export declare const cnDateTimeItem: import("@bem-react/classname").ClassNameFormatter;
+export declare const DateTimeItem: React.ForwardRefExoticComponent<Pick<Pick<{
+    label: number | string;
+    current?: boolean | undefined;
+    selected?: boolean | undefined;
+    disabled?: boolean | undefined;
+    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" | "form" | "key" | "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" | "form" | "label" | "key" | "name" | "type" | "autoFocus" | "disabled" | "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" | "form" | "label" | "key" | "name" | "type" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "selected" | "current" | "event"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,19 @@
+"use strict";
+exports.__esModule = true;
+exports.DateTimeItem = exports.cnDateTimeItem = void 0;
+var tslib_1 = require("tslib");
+require("./DateTimeItem.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var classnames_1 = require("@bem-react/classnames");
+var MixFocus_1 = require("../../../mixs/MixFocus/MixFocus");
+var bem_1 = require("../../../utils/bem");
+var Theme_1 = require("../../Theme/Theme");
+exports.cnDateTimeItem = bem_1.cn('DateTimeItem');
+exports.DateTimeItem = react_1.forwardRef(function (props, ref) {
+    var label = props.label, current = props.current, selected = props.selected, event = props.event, disabled = props.disabled, otherProps = tslib_1.__rest(props, ["label", "current", "selected", "event", "disabled"]);
+    var themeClassNames = Theme_1.useTheme().themeClassNames;
+    var className = selected && !disabled
+        ? classnames_1.classnames(props.className, themeClassNames.color.accent)
+        : props.className;
+    return (react_1["default"].createElement("button", tslib_1.__assign({}, otherProps, { ref: ref, className: exports.cnDateTimeItem({ event: event, current: current, disabled: disabled, selected: selected }, [className, MixFocus_1.cnMixFocus()]), type: "button", disabled: disabled }), label));
+});

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeLabel/DateTimeLabel.css

@@ -0,0 +1,3 @@
+.DateTimeLabel {
+  text-transform: capitalize;
+}

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeLabel/DateTimeLabel.d.ts

@@ -0,0 +1,11 @@
+import './DateTimeLabel.css';
+import React from 'react';
+import { PropsWithHTMLAttributes } from '../../../utils/types/PropsWithHTMLAttributes';
+export declare type DateTimeLabelProps = PropsWithHTMLAttributes<{
+    label: string | number;
+    align?: 'left' | 'center' | 'right';
+    children?: never;
+    cursor?: 'pointer';
+}, HTMLDivElement>;
+export declare const cnDateTimeLabel: import("@bem-react/classname").ClassNameFormatter;
+export declare const DateTimeLabel: React.FC<DateTimeLabelProps>;

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

@@ -0,0 +1,13 @@
+"use strict";
+exports.__esModule = true;
+exports.DateTimeLabel = exports.cnDateTimeLabel = void 0;
+var tslib_1 = require("tslib");
+require("./DateTimeLabel.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var bem_1 = require("../../../utils/bem");
+var Text_1 = require("../../Text/Text");
+exports.cnDateTimeLabel = bem_1.cn('DateTimeLabel');
+exports.DateTimeLabel = function (props) {
+    var label = props.label, className = props.className, align = props.align, cursor = props.cursor, otherProps = tslib_1.__rest(props, ["label", "className", "align", "cursor"]);
+    return (react_1["default"].createElement(Text_1.Text, tslib_1.__assign({}, otherProps, { className: exports.cnDateTimeLabel(null, [className]), as: "span", size: "s", align: align, weight: "bold", cursor: cursor }), label));
+};

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeMonth/DateTimeMonth.css

@@ -0,0 +1,14 @@
+.DateTimeMonth {
+  --date-time-item-width: var(--control-height-s);
+  --date-time-item-height: var(--control-height-s);
+  --date-time-cell-vertical-gap: var(--space-3xs);
+  --date-time-cell-horisontal-gap: var(--space-3xs);
+  --date-time-cell-width: calc(
+    var(--date-time-item-width) + (var(--date-time-cell-horisontal-gap) * 2)
+  );
+  --date-time-cell-height: calc(
+    var(--date-time-item-height) + (var(--date-time-cell-vertical-gap) * 2)
+  );
+  --date-time-grid-columns: 7;
+  --date-time-grid-row-gap: 0;
+}

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeMonth/DateTimeMonth.d.ts

@@ -0,0 +1,14 @@
+import './DateTimeMonth.css';
+import React from 'react';
+import { PropsWithJsxAttributes } from '../../../utils/types/PropsWithJsxAttributes';
+import { DateTimeCellPropRange } from '../DateTimeCell/DateTimeCell';
+import { DateTimeItemProps } from '../DateTimeItem/DateTimeItem';
+export declare type DateTimeMonthProps = PropsWithJsxAttributes<{
+    children?: never;
+    daysOfWeek: string[];
+    daysOfMonth: Omit<DateTimeItemProps & {
+        range?: DateTimeCellPropRange;
+    }, 'ref'>[];
+}, 'div'>;
+export declare const cnDateTimeMonth: import("@bem-react/classname").ClassNameFormatter;
+export declare const DateTimeMonth: React.FC<DateTimeMonthProps>;

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

@@ -0,0 +1,13 @@
+"use strict";
+exports.__esModule = true;
+exports.DateTimeMonth = exports.cnDateTimeMonth = void 0;
+var tslib_1 = require("tslib");
+require("./DateTimeMonth.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var bem_1 = require("../../../utils/bem");
+var DateTimeGrid_1 = require("../DateTimeGrid/DateTimeGrid");
+exports.cnDateTimeMonth = bem_1.cn('DateTimeMonth');
+exports.DateTimeMonth = function (props) {
+    var className = props.className, daysOfWeek = props.daysOfWeek, daysOfMonth = props.daysOfMonth, otherProps = tslib_1.__rest(props, ["className", "daysOfWeek", "daysOfMonth"]);
+    return (react_1["default"].createElement(DateTimeGrid_1.DateTimeGrid, tslib_1.__assign({}, otherProps, { className: exports.cnDateTimeMonth(null, [className]), items: tslib_1.__spread(daysOfWeek, daysOfMonth) })));
+};

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

@@ -0,0 +1,154 @@
+/*
+задается сверху
+--item-width
+--parent-width
+*/
+
+.DateTimeSlider {
+  --slider-height: var(--control-height-m);
+  --slider-width: calc(var(--date-time-cell-width) * 14 + var(--space-m));
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: var(--slider-width);
+}
+
+.DateTimeSlider-Slider {
+    position: relative;
+    overflow: hidden;
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+    height: var(--slider-height);
+    margin: 0 var(--space-xs);
+    background: var(--color-control-bg-ghost);
+    border-radius: var(--control-radius);
+  }
+
+.DateTimeSlider-Button_direction_prev {
+    -webkit-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+
+.DateTimeSlider-SliderBody {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    height: 100%;
+  }
+
+.DateTimeSlider-Parent {
+    position: absolute;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    width: var(--parent-width);
+    height: 100%;
+    -webkit-transition: -webkit-transform 0.5s;
+    transition: -webkit-transform 0.5s;
+    transition: transform 0.5s;
+    transition: transform 0.5s, -webkit-transform 0.5s;
+  }
+
+.DateTimeSlider-Parent_position_0 {
+        -webkit-transform: translateX(calc(var(--parent-width) * -1));
+                transform: translateX(calc(var(--parent-width) * -1));
+      }
+
+.DateTimeSlider-Parent_position_1 {
+        -webkit-transform: translateX(0);
+                transform: translateX(0);
+      }
+
+.DateTimeSlider-Parent_position_2 {
+        -webkit-transform: translateX(calc(var(--parent-width)));
+                transform: translateX(calc(var(--parent-width)));
+      }
+
+.DateTimeSlider-Parent_position_3 {
+        -webkit-transform: translateX(calc(var(--parent-width) * 2));
+                transform: translateX(calc(var(--parent-width) * 2));
+      }
+
+.DateTimeSlider-Parent_selected::before {
+        content: '';
+        position: absolute;
+        left: var(--value-offset);
+        bottom: 0;
+        width: var(--value-width);
+        height: var(--space-3xs);
+        background-color: var(--color-control-bg-primary);
+        pointer-events: none;
+      }
+
+/* исправляет разрыв между полосками */
+
+.DateTimeSlider-Parent_selected + .DateTimeSlider-Parent_selected {
+        left: calc(var(--value-offset) - 1px);
+        width: calc(var(--value-width) + 1px);
+      }
+
+.DateTimeSlider-ParentLabel {
+    position: absolute;
+    right: 0;
+    -webkit-transition: color 0.2s, -webkit-transform 0.5s;
+    transition: color 0.2s, -webkit-transform 0.5s;
+    transition: transform 0.5s, color 0.2s;
+    transition: transform 0.5s, color 0.2s, -webkit-transform 0.5s;
+  }
+
+.DateTimeSlider-ParentLabel_position_0 {
+        -webkit-transform: translateX(calc(var(--item-width) * -13));
+                transform: translateX(calc(var(--item-width) * -13));
+      }
+
+.DateTimeSlider-ParentLabel_position_1 {
+        -webkit-transform: translateX(calc((var(--parent-width) + var(--item-width)) / -2 + 50%));
+                transform: translateX(calc((var(--parent-width) + var(--item-width)) / -2 + 50%));
+      }
+
+.DateTimeSlider-ParentLabel_position_2 {
+        -webkit-transform: translateX(calc(var(--space-2xs) * -1));
+                transform: translateX(calc(var(--space-2xs) * -1));
+      }
+
+.DateTimeSlider-ParentLabel_position_3 {
+        -webkit-transform: translateX(calc(var(--parent-width)));
+                transform: translateX(calc(var(--parent-width)));
+      }
+
+.DateTimeSlider-Item {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: end;
+        -ms-flex-align: end;
+            align-items: flex-end;
+    width: var(--item-width);
+    height: 100%;
+    margin-bottom: var(--space-3xs);
+    background: transparent;
+    border: none;
+    outline: transparent;
+    cursor: pointer;
+  }
+
+.DateTimeSlider-ItemLabel {
+    width: var(--item-width);
+    height: var(--space-m);
+    margin-bottom: var(--space-3xs);
+  }
+
+.DateTimeSlider-Selector {
+    position: absolute;
+    width: calc(var(--item-width) * 2);
+    height: var(--slider-height);
+    background-color: var(--color-control-bg-ghost);
+    border-radius: var(--control-radius);
+    -webkit-transition: -webkit-transform 0.3s;
+    transition: -webkit-transform 0.3s;
+    transition: transform 0.3s;
+    transition: transform 0.3s, -webkit-transform 0.3s;
+    -webkit-transform: translateX(calc(var(--item-width) * var(--current-item)));
+            transform: translateX(calc(var(--item-width) * var(--current-item)));
+  }

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeSlider/DateTimeSlider.d.ts

@@ -0,0 +1,24 @@
+import './DateTimeSlider.css';
+import React from 'react';
+import { PropsWithHTMLAttributes } from '../../../utils/types/PropsWithHTMLAttributes';
+declare type Data = {
+    label: string | number;
+    current?: boolean;
+    valueRange?: number[];
+    date: Date;
+    items: {
+        label: string;
+        date: Date;
+        current?: boolean;
+    }[];
+};
+export declare type DateTimeSliderProps = PropsWithHTMLAttributes<{
+    onChange?: (date: Date) => void;
+    onPrev?: () => void;
+    onNext?: () => void;
+    children?: never;
+    data: Data[];
+}, HTMLDivElement>;
+export declare const cnDateTimeSlider: import("@bem-react/classname").ClassNameFormatter;
+export declare const DateTimeSlider: React.FC<DateTimeSliderProps>;
+export {};

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

@@ -0,0 +1,39 @@
+"use strict";
+exports.__esModule = true;
+exports.DateTimeSlider = exports.cnDateTimeSlider = void 0;
+var tslib_1 = require("tslib");
+require("./DateTimeSlider.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var IconForward_1 = require("../../../icons/IconForward/IconForward");
+var bem_1 = require("../../../utils/bem");
+var Button_1 = require("../../Button/Button");
+var Text_1 = require("../../Text/Text");
+exports.cnDateTimeSlider = bem_1.cn('DateTimeSlider');
+var getCurrentItem = function (data) {
+    var _a;
+    var index = ((_a = data.find(function (item) { return item.current; })) === null || _a === void 0 ? void 0 : _a.items.findIndex(function (item) { return item.current; })) || 0;
+    return index < 0 ? 0 : index;
+};
+exports.DateTimeSlider = function (props) {
+    var _a;
+    var className = props.className, onChange = props.onChange, data = props.data, onPrev = props.onPrev, onNext = props.onNext, otherProps = tslib_1.__rest(props, ["className", "onChange", "data", "onPrev", "onNext"]);
+    var currentItemIndex = getCurrentItem(data);
+    return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: exports.cnDateTimeSlider(null, [className]) }),
+        react_1["default"].createElement(Button_1.Button, { className: exports.cnDateTimeSlider('Button', { direction: 'prev' }), view: "ghost", iconLeft: IconForward_1.IconForward, onClick: onPrev }),
+        react_1["default"].createElement("div", { className: exports.cnDateTimeSlider('Slider'), style: (_a = {}, _a['--current-item'] = currentItemIndex, _a) },
+            react_1["default"].createElement("div", { className: exports.cnDateTimeSlider('SliderBody') },
+                react_1["default"].createElement("div", { className: exports.cnDateTimeSlider('Selector') }),
+                data.map(function (year, index) { return (react_1["default"].createElement(Text_1.Text, { className: exports.cnDateTimeSlider('ParentLabel', { position: index.toString() }), weight: "bold", size: "s", key: year.label, view: year.current ? undefined : 'ghost' }, year.label)); }),
+                data.map(function (year, index) {
+                    var _a;
+                    return (react_1["default"].createElement("div", { key: year.label, className: exports.cnDateTimeSlider('Parent', {
+                            position: index.toString(),
+                            selected: !!year.valueRange
+                        }), style: year.valueRange && (_a = {},
+                            _a['--value-offset'] = year.valueRange[0] + "%",
+                            _a['--value-width'] = year.valueRange[1] + "%",
+                            _a) }, year.items.map(function (item, index) { return (react_1["default"].createElement("button", { className: exports.cnDateTimeSlider('Item'), key: index, onFocus: function () { return onChange === null || onChange === void 0 ? void 0 : onChange(item.date); }, type: "button" },
+                        react_1["default"].createElement(Text_1.Text, { className: exports.cnDateTimeSlider('ItemLabel'), size: "2xs", view: "ghost", align: "center" }, item.label))); })));
+                }))),
+        react_1["default"].createElement(Button_1.Button, { className: exports.cnDateTimeSlider('Button', { direction: 'next' }), view: "ghost", iconLeft: IconForward_1.IconForward, onClick: onNext })));
+};

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeTimeColumn/DateTimeTimeColumn.css

@@ -0,0 +1,34 @@
+.DateTimeTimeColumn {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+  .DateTimeTimeColumn-Label {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+  }
+
+  .DateTimeTimeColumn-ScrollWrapper {
+    overflow-y: scroll;
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+    -ms-overflow-style: none;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+  }
+
+  .DateTimeTimeColumn-ScrollWrapper::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
+
+  .DateTimeTimeColumn-FakeElemet {
+    height: calc(100% - var(--date-time-cell-height));
+  }

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeTimeColumn/DateTimeTimeColumn.d.ts

@@ -0,0 +1,17 @@
+import './DateTimeTimeColumn.css';
+import React from 'react';
+import { PropsWithJsxAttributes } from '../../../utils/types/PropsWithJsxAttributes';
+declare type DateTimeTimeColumnPropItem = {
+    label: string;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    disabled?: boolean;
+    selected?: boolean;
+};
+declare type DateTimeTimeColumnProps = PropsWithJsxAttributes<{
+    children?: never;
+    label: string;
+    items: DateTimeTimeColumnPropItem[];
+}, 'div'>;
+export declare const cnDateTimeTimeColumn: import("@bem-react/classname").ClassNameFormatter;
+export declare const DateTimeTimeColumn: React.FC<DateTimeTimeColumnProps>;
+export {};

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

@@ -0,0 +1,26 @@
+"use strict";
+exports.__esModule = true;
+exports.DateTimeTimeColumn = exports.cnDateTimeTimeColumn = void 0;
+var tslib_1 = require("tslib");
+require("./DateTimeTimeColumn.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var bem_1 = require("../../../utils/bem");
+var Text_1 = require("../../Text/Text");
+var DateTimeCell_1 = require("../DateTimeCell/DateTimeCell");
+var DateTimeGrid_1 = require("../DateTimeGrid/DateTimeGrid");
+var useScrollToElement_1 = require("./useScrollToElement/useScrollToElement");
+exports.cnDateTimeTimeColumn = bem_1.cn('DateTimeTimeColumn');
+exports.DateTimeTimeColumn = react_1.memo(function (props) {
+    var label = props.label, items = props.items, className = props.className, otherProps = tslib_1.__rest(props, ["label", "items", "className"]);
+    var scrollWrapperRef = react_1.useRef(null);
+    var _a = tslib_1.__read(useScrollToElement_1.useScrollToElement(items, scrollWrapperRef), 1), itemsRefs = _a[0];
+    if (items.length === 0) {
+        return null;
+    }
+    return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: exports.cnDateTimeTimeColumn(null, [className]) }),
+        react_1["default"].createElement(DateTimeCell_1.DateTimeCell, { className: exports.cnDateTimeTimeColumn('Label') },
+            react_1["default"].createElement(Text_1.Text, { view: "ghost", size: "2xs" }, label)),
+        react_1["default"].createElement("div", { className: exports.cnDateTimeTimeColumn('ScrollWrapper'), ref: scrollWrapperRef },
+            react_1["default"].createElement(DateTimeGrid_1.DateTimeGrid, { className: exports.cnDateTimeTimeColumn('List'), items: items, itemsRefs: itemsRefs }),
+            react_1["default"].createElement("div", { className: exports.cnDateTimeTimeColumn('FakeElemet') }))));
+});

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeTimeColumn/useScrollToElement/useScrollToElement.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const useScrollToElement: (items: {
+    selected?: boolean;
+}[], scrollWrapper: React.RefObject<HTMLDivElement>) => import("react").RefObject<HTMLDivElement>[][];

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeTimeColumn/useScrollToElement/useScrollToElement.js

@@ -0,0 +1,35 @@
+"use strict";
+exports.__esModule = true;
+exports.useScrollToElement = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+exports.useScrollToElement = function (items, scrollWrapper) {
+    var _a = tslib_1.__read(react_1.useState([]), 2), itemDimentions = _a[0], setItemDimentions = _a[1];
+    var itemsRefs = react_1.useMemo(function () { return new Array(items.length).fill(null).map(function () { return react_1.createRef(); }); }, [items.length]);
+    react_1.useEffect(function () {
+        var _a;
+        var selectedItemIndex = items.findIndex(function (item) { return item.selected; });
+        var scrollWrapperElement = scrollWrapper.current;
+        if (scrollWrapperElement) {
+            scrollWrapperElement.scrollTo({
+                top: ((_a = itemDimentions === null || itemDimentions === void 0 ? void 0 : itemDimentions[selectedItemIndex]) === null || _a === void 0 ? void 0 : _a.offset) || 0,
+                behavior: 'smooth'
+            });
+        }
+    });
+    react_1.useLayoutEffect(function () {
+        var itemDimentions = itemsRefs.reduce(function (accumulator, currentValue, index) {
+            var _a, _b;
+            var height = ((_a = currentValue.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
+            var offset = accumulator.length > 0 ? ((_b = accumulator[index - 1]) === null || _b === void 0 ? void 0 : _b.offset) + height : 0;
+            return tslib_1.__spread(accumulator, [
+                {
+                    height: height,
+                    offset: offset
+                },
+            ]);
+        }, []);
+        setItemDimentions(itemDimentions);
+    }, [itemsRefs]);
+    return [itemsRefs];
+};

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeToggler/DateTimeToggler.css

@@ -0,0 +1,34 @@
+.DateTimeToggler {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: calc(var(--date-time-cell-width) * 7);
+}
+
+  .DateTimeToggler:not(.DateTimeToggler_withPrevButton) {
+    padding-left: var(--control-height-s);
+  }
+
+  .DateTimeToggler:not(.DateTimeToggler_withNextButton) {
+    padding-right: var(--control-height-s);
+  }
+
+  .DateTimeToggler-Label {
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+    margin: 0 var(--space-xs);
+  }
+
+  .DateTimeToggler-Button_direction_prev {
+    -webkit-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }