@consta/uikit 3.4.0 → 3.8.0

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

@@ -1,12 +1,15 @@
 .ChoiceGroup {
+  --choice-group-bg-color: transparent;
+  --choice-group-border-color: var(--color-control-bg-border-default);
   position: relative;
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   max-width: 100%;
+  background-color: var(--choice-group-bg-color);
   border-radius: var(--choice-radius);
-  -webkit-box-shadow: inset 0 0 0 var(--control-border-width) var(--color-control-bg-border-default);
-          box-shadow: inset 0 0 0 var(--control-border-width) var(--color-control-bg-border-default);
+  -webkit-box-shadow: inset 0 0 0 var(--control-border-width) var(--choice-group-border-color);
+          box-shadow: inset 0 0 0 var(--control-border-width) var(--choice-group-border-color);
 }
 
   .ChoiceGroup_view_primary {
@@ -56,7 +59,10 @@
   .ChoiceGroup_form_default,
     .ChoiceGroup_form_brick {
       --divider-width: var(--control-border-width);
-      --divider-height: 65%;
+      --divider-height: unset;
+      --divider-scale: 0.65;
+      --divider-radius: 0;
+      --divider-align-self: unset;
     }
 
   .ChoiceGroup_form_default {
@@ -71,6 +77,9 @@
       --choice-radius: 99em;
       --divider-width: 4px;
       --divider-height: 4px;
+      --divider-scale: 1;
+      --divider-radius: 99em;
+      --divider-align-self: center;
     }
 
   .ChoiceGroup_form_round .ChoiceGroup-Label {
@@ -78,11 +87,11 @@
         padding-left: calc(var(--choice-space) * 1.2);
       }
 
-  .ChoiceGroup_form_round .ChoiceGroup-Label::after {
-          border-radius: 99em;
-        }
-
   .ChoiceGroup-Label {
+    --choice-group-label-color: var(--color-control-typo-default);
+    --choice-group-label-bg-color: transparent;
+    --choice-group-label-bg-left: 0;
+    --choice-helper-bg-disabled: transparent;
     position: relative;
     z-index: 0;
     display: -webkit-box;
@@ -95,14 +104,12 @@
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
-    -webkit-box-flex: 1;
-        -ms-flex-positive: 1;
-            flex-grow: 1;
     -webkit-box-sizing: border-box;
             box-sizing: border-box;
     height: var(--choice-height);
     padding: 0 var(--choice-space) 0 var(--choice-space);
-    color: var(--color-control-typo-default);
+    color: var(--choice-group-label-color);
+    background-color: var(--choice-group-label-bg-color);
     border-radius: var(--choice-radius);
     font-size: var(--choice-font-size);
     font-weight: var(--font-weight-text-regular);
@@ -117,55 +124,64 @@
       fill 0.15s ease;
     transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease,
       fill 0.15s ease, -webkit-box-shadow 0.15s ease;
+    -webkit-box-flex: 1;
+        -ms-flex-positive: 1;
+            flex-grow: 1;
   }
 
+  .ChoiceGroup-Label::after {
+      content: '';
+      position: absolute;
+      z-index: 0;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: var(--choice-helper-bg-disabled);
+    }
+
   .ChoiceGroup-Input {
     position: absolute;
+    opacity: 0;
     -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
-    opacity: 0;
-  }
-
-  .ChoiceGroup-Label:last-child {
-    padding-right: var(--choice-space);
-  }
-
-  .ChoiceGroup-Label:not(:last-child) {
-    margin-right: var(--control-border-width);
   }
 
-  /* Палочка */
+  .ChoiceGroup-Label:not(.ChoiceGroup-Label_checked):hover {
+      --choice-group-label-color: var(--color-control-typo-secondary-hover);
+    }
 
-  .ChoiceGroup-Label:not(:first-child)::after {
-    content: '';
-    position: absolute;
-    z-index: -1;
-    top: 50%;
-    left: 0;
+  .ChoiceGroup-Divider {
+    --divider-bg-color: var(--color-control-bg-border-default);
     width: var(--divider-width);
+    min-width: var(--divider-width);
     height: var(--divider-height);
-    -webkit-transform: translateY(-50%);
-            transform: translateY(-50%);
+    background-color: var(--divider-bg-color);
+    border-radius: var(--divider-radius);
+    -webkit-transform: scaleY(var(--divider-scale));
+            transform: scaleY(var(--divider-scale));
+    -ms-flex-item-align: var(--divider-align-self);
+        align-self: var(--divider-align-self);
   }
 
-  .ChoiceGroup-Label:not(.ChoiceGroup-Label_checked):hover {
-      color: var(--color-control-typo-secondary-hover);
-    }
-
-  .ChoiceGroup-Label:not(.ChoiceGroup-Label_checked)::after {
-      background-color: var(--color-control-bg-border-default);
+  .ChoiceGroup-Divider_checked:not(.ChoiceGroup-Divider_disabled) {
+      --divider-bg-color: transparent;
     }
 
   .ChoiceGroup-Label_checked {
-    color: var(--choice-text-color);
-    background-color: var(--choice-bg-color);
+    --choice-group-label-color: var(--choice-text-color);
+    --choice-group-label-bg-color: var(--choice-bg-color);
   }
 
-  .ChoiceGroup-Label_checked + .ChoiceGroup-Label::after {
-      background-color: transparent;
+  .ChoiceGroup-Label_checked:not(.ChoiceGroup-Label_disabled) {
+      --divider-bg-color: transparent;
     }
 
+  .ChoiceGroup-Label_checked:not(.ChoiceGroup-Label_disabled) + .ChoiceGroup-Divider {
+        --divider-bg-color: transparent;
+      }
+
   .ChoiceGroup-Text {
     overflow: hidden;
     white-space: nowrap;
@@ -180,11 +196,33 @@
       -webkit-box-pack: center;
           -ms-flex-pack: center;
               justify-content: center;
-      width: calc(var(--choice-height) + var(--control-border-width) * 2);
+      width: var(--choice-height);
       padding: 0;
-      padding-right: var(--control-border-width);
     }
 
   .ChoiceGroup_width_full {
       width: 100%;
     }
+
+  .ChoiceGroup-Label_disabled {
+    --choice-group-label-color: var(--color-control-typo-disable);
+    --choice-group-label-bg-color: var(--color-control-bg-disable);
+    pointer-events: none;
+  }
+
+  .ChoiceGroup_disabled {
+    --choice-group-bg-color: var(--color-control-bg-disable);
+    --choice-group-border-color: transparent;
+  }
+
+  .ChoiceGroup_disabled .ChoiceGroup-Label_disabled:not(.ChoiceGroup-Label_checked) {
+      --choice-group-label-bg-color: transparent;
+    }
+
+  .ChoiceGroup_disabled .ChoiceGroup-Divider {
+      --divider-bg-color: transparent;
+    }
+
+  .ChoiceGroup:not(.ChoiceGroup_disabled) .ChoiceGroup-Label_disabled.ChoiceGroup-Label_checked::after {
+      --choice-helper-bg-disabled: var(--color-control-bg-disable);
+    }

package/__internal__/cjs-src/components/ChoiceGroup/ChoiceGroup.d.ts

@@ -28,6 +28,8 @@ declare type CommonProps<ITEM> = {
     getIcon?: ChoiceGroupPropGetIcon<ITEM>;
     name: string;
     children?: never;
+    disabled?: boolean;
+    getDisabled?: (item: ITEM) => boolean | undefined;
 };
 declare type OnChangeMultiple<ITEM> = (props: {
     e: React.ChangeEvent<HTMLInputElement>;

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

@@ -24,13 +24,22 @@ var sizeMap = {
 };
 exports.cnChoiceGroup = bem_1.cn('ChoiceGroup');
 exports.ChoiceGroup = react_1["default"].forwardRef(function (props, ref) {
-    var _a = props.size, size = _a === void 0 ? exports.choiceGroupDefaultSize : _a, _b = props.form, form = _b === void 0 ? exports.choiceGroupDefaultForm : _b, _c = props.view, view = _c === void 0 ? exports.choiceGroupDefaultView : _c, _d = props.width, width = _d === void 0 ? exports.choiceGroupWidthDefault : _d, onlyIcon = props.onlyIcon, iconSizeProp = props.iconSize, _e = props.value, value = _e === void 0 ? null : _e, _f = props.multiple, multiple = _f === void 0 ? false : _f, items = props.items, getLabel = props.getLabel, onChange = props.onChange, getIcon = props.getIcon, name = props.name, className = props.className, otherProps = tslib_1.__rest(props, ["size", "form", "view", "width", "onlyIcon", "iconSize", "value", "multiple", "items", "getLabel", "onChange", "getIcon", "name", "className"]);
-    var _g = useChoiceGroup_1.useChoiceGroup({
+    var _a = props.size, size = _a === void 0 ? exports.choiceGroupDefaultSize : _a, _b = props.form, form = _b === void 0 ? exports.choiceGroupDefaultForm : _b, _c = props.view, view = _c === void 0 ? exports.choiceGroupDefaultView : _c, _d = props.width, width = _d === void 0 ? exports.choiceGroupWidthDefault : _d, onlyIcon = props.onlyIcon, iconSizeProp = props.iconSize, _e = props.value, value = _e === void 0 ? null : _e, _f = props.multiple, multiple = _f === void 0 ? false : _f, items = props.items, getLabel = props.getLabel, onChange = props.onChange, getIcon = props.getIcon, name = props.name, className = props.className, _g = props.disabled, disabled = _g === void 0 ? false : _g, getDisabled = props.getDisabled, otherProps = tslib_1.__rest(props, ["size", "form", "view", "width", "onlyIcon", "iconSize", "value", "multiple", "items", "getLabel", "onChange", "getIcon", "name", "className", "disabled", "getDisabled"]);
+    var _h = useChoiceGroup_1.useChoiceGroup({
         value: value,
         getKey: getLabel,
         callBack: onChange,
         multiple: multiple
-    }), getOnChange = _g.getOnChange, getChecked = _g.getChecked;
+    }), getOnChange = _h.getOnChange, getChecked = _h.getChecked;
     var iconSize = getSizeByMap_1.getSizeByMap(sizeMap, size, iconSizeProp);
-    return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { ref: ref, className: exports.cnChoiceGroup({ size: size, form: form, view: view, width: width, onlyIcon: onlyIcon }, [className]) }), items.map(function (item) { return (react_1["default"].createElement(ChoiceGroup_Item_1.ChoiceGroupItem, { key: getLabel(item), onChange: getOnChange(item), checked: getChecked(item), label: getLabel(item).toString(), icon: getIcon && getIcon(item), iconSize: iconSize, multiple: multiple, onlyIcon: onlyIcon, name: name })); })));
+    return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { ref: ref, className: exports.cnChoiceGroup({ size: size, form: form, view: view, width: width, onlyIcon: onlyIcon, disabled: disabled }, [className]) }), items.map(function (item, idx) {
+        var itemChecked = getChecked(item);
+        var itemDisabled = !!getDisabled && getDisabled(item);
+        return (react_1["default"].createElement(react_1["default"].Fragment, { key: getLabel(item) },
+            idx > 0 && (react_1["default"].createElement("div", { className: exports.cnChoiceGroup('Divider', {
+                    checked: itemChecked,
+                    disabled: itemDisabled
+                }) })),
+            react_1["default"].createElement(ChoiceGroup_Item_1.ChoiceGroupItem, { onChange: getOnChange(item), checked: itemChecked, label: getLabel(item).toString(), icon: getIcon && getIcon(item), iconSize: iconSize, multiple: multiple, onlyIcon: onlyIcon, name: name, disabled: disabled || itemDisabled })));
+    })));
 });

package/__internal__/cjs-src/components/ChoiceGroup/Item/ChoiceGroup-Item.d.ts

@@ -9,6 +9,7 @@ declare type Props = {
     onChange: React.ChangeEventHandler<HTMLInputElement>;
     checked: boolean;
     multiple: boolean;
+    disabled?: boolean;
 };
 export declare const ChoiceGroupItem: React.FC<Props>;
 export {};

package/__internal__/cjs-src/components/ChoiceGroup/Item/ChoiceGroup-Item.js

@@ -6,12 +6,12 @@ var react_1 = tslib_1.__importStar(require("react"));
 var MixFocus_1 = require("../../../mixs/MixFocus/MixFocus");
 var ChoiceGroup_1 = require("../ChoiceGroup");
 exports.ChoiceGroupItem = function (props) {
-    var label = props.label, onChange = props.onChange, checked = props.checked, multiple = props.multiple, Icon = props.icon, onlyIcon = props.onlyIcon, name = props.name, iconSize = props.iconSize;
-    var _a = tslib_1.__read(react_1.useState(false), 2), focus = _a[0], setFocus = _a[1];
+    var label = props.label, onChange = props.onChange, checked = props.checked, multiple = props.multiple, Icon = props.icon, onlyIcon = props.onlyIcon, name = props.name, iconSize = props.iconSize, _a = props.disabled, disabled = _a === void 0 ? false : _a;
+    var _b = tslib_1.__read(react_1.useState(false), 2), focus = _b[0], setFocus = _b[1];
     var handleBlur = function () { return setFocus(false); };
     var handleFocus = function () { return setFocus(true); };
-    return (react_1["default"].createElement("label", { className: ChoiceGroup_1.cnChoiceGroup('Label', { focus: focus, checked: checked }, [MixFocus_1.cnMixFocus()]), title: onlyIcon ? label : undefined },
-        react_1["default"].createElement("input", { type: multiple ? 'checkbox' : 'radio', className: ChoiceGroup_1.cnChoiceGroup('Input'), checked: checked, onFocus: handleFocus, onBlur: handleBlur, value: name + "-" + label, onChange: onChange, name: name }),
+    return (react_1["default"].createElement("label", { className: ChoiceGroup_1.cnChoiceGroup('Label', { focus: focus, checked: checked, disabled: disabled }, [MixFocus_1.cnMixFocus()]), title: onlyIcon ? label : undefined },
+        react_1["default"].createElement("input", { type: multiple ? 'checkbox' : 'radio', className: ChoiceGroup_1.cnChoiceGroup('Input'), checked: checked, onFocus: handleFocus, onBlur: handleBlur, value: name + "-" + label, onChange: onChange, name: name, disabled: disabled }),
         Icon && react_1["default"].createElement(Icon, { className: ChoiceGroup_1.cnChoiceGroup('Icon'), size: iconSize }),
         !onlyIcon && react_1["default"].createElement("span", { className: ChoiceGroup_1.cnChoiceGroup('Text') }, label)));
 };

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

@@ -110,10 +110,6 @@
         background: var(--color-control-bg-clear-hover);
       }
 
-  .Collapse-Label_divider {
-      border-bottom: 1px solid var(--color-bg-border);
-    }
-
   .Collapse-Label_iconPosition_right {
         -webkit-box-orient: horizontal;
         -webkit-box-direction: reverse;
@@ -134,6 +130,10 @@
       max-height: 200vh;
     }
 
+  .Collapse-Body_divider {
+      border-bottom: 1px solid var(--color-bg-border);
+    }
+
   .Collapse-Side {
     margin-left: var(--elements-offset);
     line-height: 0;

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

@@ -49,12 +49,11 @@ exports.Collapse = react_1["default"].forwardRef(function (props, ref) {
     return (react_1["default"].createElement("div", { ref: ref, className: exports.cnCollapse({ size: size, view: view, horizontalSpace: horizontalSpace }, [className]), style: style },
         react_1["default"].createElement("div", tslib_1.__assign({ className: exports.cnCollapse('Label', {
                 hoverEffect: hoverEffect,
-                divider: divider,
                 iconPosition: iconPosition
             }) }, otherProps),
             react_1["default"].createElement(CollapseIcon_1.CollapseIcon, { className: exports.cnCollapse('Icon', { position: iconPosition }), size: getSizeByMap_1.getSizeByMap(exports.sizeIconMap, size), icon: icon, closeIcon: closeIcon, isOpen: isOpen, direction: directionIcon, closeDirection: closeDirectionIcon }),
             react_1["default"].createElement(Text_1.Text, { className: exports.cnCollapse('LabelText'), view: view, size: size }, label),
             iconPosition === 'left' && renderSide(rightSide)),
-        react_1["default"].createElement("div", { className: exports.cnCollapse('Body', { isOpen: isOpen }) },
+        react_1["default"].createElement("div", { className: exports.cnCollapse('Body', { isOpen: isOpen, divider: divider }) },
             react_1["default"].createElement("div", { className: exports.cnCollapse('Content') }, children))));
 });

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
-import { PropForm, PropSize, PropView, RenderItemProps } from '../SelectComponents/types';
+import { PropForm, PropSize, PropStatus, PropView, RenderItemProps } from '../SelectComponents/types';
 export declare type DefaultItem = {
     label: string;
     id: string | number;
@@ -38,6 +38,7 @@ export declare type ComboboxProps<ITEM = DefaultItem, GROUP = DefaultGroup, MULT
     view?: PropView;
     placeholder?: string;
     ariaLabel?: string;
+    status?: PropStatus;
     dropdownClassName?: string;
     dropdownRef?: React.RefObject<HTMLDivElement>;
     name?: string;
@@ -62,6 +63,9 @@ export declare type ComboboxProps<ITEM = DefaultItem, GROUP = DefaultGroup, MULT
     getItemDisabled?: PropGetItemDisabled<ITEM>;
     getGroupLabel?: PropGetGroupLabel<GROUP>;
     getGroupKey?: PropGetGroupKey<GROUP>;
+    label?: string;
+    caption?: string;
+    labelPosition?: 'top' | 'left';
 }, HTMLDivElement> & (ITEM extends {
     label: DefaultItem['label'];
 } ? {} : {
@@ -92,11 +96,12 @@ export declare function withDefaultGetters<ITEM = DefaultItem, GROUP = DefaultGr
     items: ITEM[];
     onChange: PropOnChange<ITEM, MULTIPLE>;
     disabled?: boolean | undefined;
-    form?: "default" | "round" | "brick" | "brickDefault" | "defaultBrick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "brickClear" | "clearBrick" | "clearClear" | undefined;
+    form?: "default" | "round" | "brick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "defaultBrick" | "brickDefault" | "brickClear" | "clearBrick" | "clearClear" | undefined;
     size?: "s" | "m" | "l" | undefined;
     view?: "default" | "clear" | undefined;
     placeholder?: string | undefined;
     ariaLabel?: string | undefined;
+    status?: "alert" | "success" | "warning" | undefined;
     dropdownClassName?: string | undefined;
     dropdownRef?: React.RefObject<HTMLDivElement> | undefined;
     name?: string | undefined;
@@ -121,6 +126,9 @@ export declare function withDefaultGetters<ITEM = DefaultItem, GROUP = DefaultGr
     getItemDisabled?: PropGetItemDisabled<ITEM> | undefined;
     getGroupLabel?: PropGetGroupLabel<GROUP> | undefined;
     getGroupKey?: PropGetGroupKey<GROUP> | undefined;
+    label?: string | undefined;
+    caption?: string | undefined;
+    labelPosition?: "left" | "top" | undefined;
 } & Pick<React.HTMLAttributes<HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "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" | "onFocusCapture" | "onBlurCapture" | "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"> & React.RefAttributes<HTMLDivElement> & (ITEM extends {
     label: string;
 } ? {} : {

package/__internal__/cjs-src/components/DatePickerCanary/DatePickerCanary.d.ts

@@ -0,0 +1,3 @@
+import { DatePickerComponent } from './helpers';
+export declare const DatePicker: DatePickerComponent;
+export * from './helpers';

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

@@ -0,0 +1,20 @@
+"use strict";
+exports.__esModule = true;
+exports.DatePicker = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var date_1 = require("../../utils/date");
+var DatePickerTypeDate_1 = require("./DatePickerTypeDate/DatePickerTypeDate");
+var DatePickerTypeDateRange_1 = require("./DatePickerTypeDateRange/DatePickerTypeDateRange");
+var helpers_1 = require("./helpers");
+exports.DatePicker = react_1.forwardRef(function (props, ref) {
+    var propsWidthDefault = tslib_1.__assign(tslib_1.__assign({}, props), { type: props.type || helpers_1.datePickerPropTypeDefault, minDate: props.minDate || date_1.minDateDefault, maxDate: props.maxDate || date_1.maxDateDefault });
+    if (helpers_1.isNotDateRangeParams(propsWidthDefault)) {
+        return react_1["default"].createElement(DatePickerTypeDate_1.DatePickerTypeDate, tslib_1.__assign({}, propsWidthDefault, { ref: ref }));
+    }
+    if (helpers_1.isDateRangeParams(propsWidthDefault)) {
+        return react_1["default"].createElement(DatePickerTypeDateRange_1.DatePickerTypeDateRange, tslib_1.__assign({}, propsWidthDefault, { ref: ref }));
+    }
+    return null;
+});
+tslib_1.__exportStar(require("./helpers"), exports);

package/__internal__/cjs-src/components/DatePickerCanary/DatePickerDropdown/DatePickerDropdown.css

@@ -0,0 +1,68 @@
+.DatePickerDropdown {
+  --transition-spase: var(--space-2xs);
+  padding: var(--space-l);
+  background: var(--color-bg-default);
+  opacity: 0;
+  -webkit-box-shadow: var(--shadow-layer);
+          box-shadow: var(--shadow-layer);
+  -webkit-transform: translateY(var(--transition-spase));
+          transform: translateY(var(--transition-spase));
+}
+
+  .DatePickerDropdown_form_default {
+      border-radius: var(--control-radius);
+    }
+
+  .DatePickerDropdown_form_brick {
+      border-radius: 0;
+    }
+
+  .DatePickerDropdown_form_round {
+      border-radius: var(--space-l);
+    }
+
+  .DatePickerDropdown_animate_appear,
+    .DatePickerDropdown_animate_appearActive,
+    .DatePickerDropdown_animate_appearDone,
+    .DatePickerDropdown_animate_enter,
+    .DatePickerDropdown_animate_enterActive,
+    .DatePickerDropdown_animate_enterDone,
+    .DatePickerDropdown_animate_exit,
+    .DatePickerDropdown_animate_exitActive,
+    .DatePickerDropdown_animate_exitDone {
+      -webkit-transition: 0.2s ease;
+      transition: 0.2s ease;
+      -webkit-transition-property: opacity, -webkit-transform;
+      transition-property: opacity, -webkit-transform;
+      transition-property: opacity, transform;
+      transition-property: opacity, transform, -webkit-transform;
+    }
+
+  .DatePickerDropdown_animate_appear,
+    .DatePickerDropdown_animate_enter {
+      opacity: 0;
+      -webkit-transform: translateY(var(--transition-spase));
+              transform: translateY(var(--transition-spase));
+    }
+
+  .DatePickerDropdown_animate_enterActive,
+    .DatePickerDropdown_animate_appearActive,
+    .DatePickerDropdown_animate_appearDone,
+    .DatePickerDropdown_animate_enterDone {
+      opacity: 1;
+      -webkit-transform: translateY(0);
+              transform: translateY(0);
+    }
+
+  .DatePickerDropdown_animate_exit {
+      opacity: 1;
+      -webkit-transform: translateY(0);
+              transform: translateY(0);
+    }
+
+  .DatePickerDropdown_animate_exitActive,
+    .DatePickerDropdown_animate_exitDone {
+      opacity: 0;
+      -webkit-transform: translateY(var(--transition-spase));
+              transform: translateY(var(--transition-spase));
+    }

package/__internal__/cjs-src/components/DatePickerCanary/DatePickerDropdown/DatePickerDropdown.d.ts

@@ -0,0 +1,26 @@
+import './DatePickerDropdown.css';
+import React from 'react';
+import { DateRange } from '../../../utils/types/Date';
+import { PropsWithHTMLAttributesAndRef } from '../../../utils/types/PropsWithHTMLAttributes';
+import { DateTimePropOnChange, DateTimePropType } from '../../DateTimeCanary/DateTimeCanary';
+import { DatePickerPropDateTimeView, DatePickerPropDropdownForm } from '../helpers';
+export declare type DatePickerDropdownPropOnChange = DateTimePropOnChange;
+export declare type DatePickerDropdownProps = PropsWithHTMLAttributesAndRef<{
+    anchorRef: React.RefObject<HTMLElement>;
+    currentVisibleDate?: Date;
+    type?: DateTimePropType;
+    value?: Date | DateRange;
+    onChange?: DatePickerDropdownPropOnChange;
+    minDate?: Date;
+    maxDate?: Date;
+    events?: Date[];
+    view?: DatePickerPropDateTimeView;
+    locale?: Locale;
+    children?: never;
+    form?: DatePickerPropDropdownForm;
+    isOpen?: boolean;
+    onChangeCurrentVisibleDate?: (date: Date) => void;
+}, HTMLDivElement>;
+declare type DatePickerDropdownComponent = (props: DatePickerDropdownProps) => React.ReactElement | null;
+export declare const DatePickerDropdown: DatePickerDropdownComponent;
+export {};

package/__internal__/cjs-src/components/DatePickerCanary/DatePickerDropdown/DatePickerDropdown.js

@@ -0,0 +1,22 @@
+"use strict";
+exports.__esModule = true;
+exports.DatePickerDropdown = void 0;
+var tslib_1 = require("tslib");
+require("./DatePickerDropdown.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_transition_group_1 = require("react-transition-group");
+var useForkRef_1 = require("../../../hooks/useForkRef/useForkRef");
+var bem_1 = require("../../../utils/bem");
+var cnForCssTransition_1 = require("../../../utils/cnForCssTransition");
+var DateTimeCanary_1 = require("../../DateTimeCanary/DateTimeCanary");
+var Popover_1 = require("../../Popover/Popover");
+var helpers_1 = require("../helpers");
+var cnDatePickerDropdown = bem_1.cn('DatePickerDropdown');
+var cnDatePickerDropdownCssTransition = cnForCssTransition_1.cnForCssTransition(cnDatePickerDropdown);
+exports.DatePickerDropdown = react_1.forwardRef(function (props, ref) {
+    var _a = props.form, form = _a === void 0 ? helpers_1.datePickerPropDropdownFormDefault : _a, anchorRef = props.anchorRef, isOpen = props.isOpen, value = props.value, className = props.className, onChange = props.onChange, otherProps = tslib_1.__rest(props, ["form", "anchorRef", "isOpen", "value", "className", "onChange"]);
+    var rootRef = react_1.useRef(null);
+    return (react_1["default"].createElement(react_transition_group_1.CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, classNames: cnDatePickerDropdownCssTransition, timeout: 200, nodeRef: rootRef },
+        react_1["default"].createElement(Popover_1.Popover, { ref: useForkRef_1.useForkRef([ref, rootRef]), anchorRef: anchorRef, className: cnDatePickerDropdown({ form: form }, [className]), direction: "downStartLeft", spareDirection: "downStartLeft", possibleDirections: ['downStartLeft', 'upStartLeft', 'downStartRight', 'upStartRight'] },
+            react_1["default"].createElement(DateTimeCanary_1.DateTime, tslib_1.__assign({}, otherProps, { onChange: onChange, type: "date", value: value || undefined })))));
+});

package/__internal__/cjs-src/components/DatePickerCanary/DatePickerFieldTypeDate/DatePickerFieldTypeDate.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+export declare const DatePickerFieldTypeDate: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    value?: Date | null | undefined;
+    onChange?: ((props: {
+        e: Event;
+        value: Date | null;
+    }) => void) | undefined;
+    onError?: import("../helpers").DatePickerPropOnError | undefined;
+    id?: string | undefined;
+    name?: string | undefined;
+    disabled?: boolean | undefined;
+    size?: "xs" | "s" | "m" | "l" | undefined;
+    view?: "default" | "clear" | undefined;
+    form?: "default" | "round" | "brick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "defaultBrick" | "brickDefault" | "brickClear" | "clearBrick" | "clearClear" | "brickRound" | "roundBrick" | undefined;
+    status?: "alert" | "success" | "warning" | undefined;
+    width?: "default" | "full" | undefined;
+    onFocus?: ((event: React.FocusEvent<HTMLElement>) => void) | undefined;
+    onBlur?: ((event: React.FocusEvent<HTMLElement>) => void) | undefined;
+    autoFocus?: boolean | undefined;
+    placeholder?: string | undefined;
+    leftSide?: string | React.FC<import("../../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../../../icons/Icon/Icon").Props, HTMLSpanElement>> | undefined;
+    rightSide?: string | React.FC<import("../../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../../../icons/Icon/Icon").Props, HTMLSpanElement>> | undefined;
+    readOnly?: boolean | undefined;
+    required?: boolean | undefined;
+    tabIndex?: number | undefined;
+    inputRef?: ((instance: HTMLInputElement | HTMLTextAreaElement | null) => void) | React.RefObject<HTMLInputElement | HTMLTextAreaElement> | null | undefined;
+    ariaLabel?: string | undefined;
+    iconSize?: "xs" | "s" | "m" | undefined;
+    children?: undefined;
+    format?: string | undefined;
+    separator?: string | undefined;
+    minDate?: Date | undefined;
+    maxDate?: Date | undefined;
+    focused?: boolean | undefined;
+} & Pick<React.HTMLAttributes<HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "slot" | "spellCheck" | "style" | "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" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "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"> & React.RefAttributes<HTMLDivElement>>;