@salutejs/plasma-new-hope 0.88.0-canary.1223.9505247307.0 → 0.88.0-canary.1224.9504044130.0

package/styled-components/es/components/DatePicker/RangeDate/variations/_disabled/base.js

@@ -0,0 +1,3 @@
+import { css } from 'styled-components';
+import { tokens } from '../../../DatePicker.tokens';
+export var base = /*#__PURE__*/css(["&[disabled]{opacity:var(", ");cursor:not-allowed;}"], tokens.disabledOpacity);

package/styled-components/es/components/DatePicker/RangeDate/variations/_readonly/base.js

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { tokens } from '../../../DatePicker.tokens';
+import { LeftHelper, StyledLabel } from '../../DatePicker.styles';
+export var base = /*#__PURE__*/css(["&[readonly]{cursor:default;", ":transparent;", "{display:block;color:var(", ");}", "{color:var(", ");}}"], tokens.textFieldBackgroundColorReadOnly, StyledLabel, tokens.labelColorReadOnly, LeftHelper, tokens.leftHelperColorReadOnly);

package/styled-components/es/components/DatePicker/RangeDate/variations/_readonly/tokens.json

@@ -0,0 +1,4 @@
+{
+    "type": "boolean",
+    "tokens": ["--plasma-date-picker__label-color-readonly", "--plasma-date-picker__left-helper-color-readonly"]
+}

package/styled-components/es/components/DatePicker/RangeDate/variations/_size/base.js

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { tokens } from '../../../DatePicker.tokens';
+import { StyledLabel, LeftHelper } from '../../DatePicker.styles';
+export var base = /*#__PURE__*/css(["width:var(", ");", "{margin:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}"], tokens.width, StyledLabel, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, LeftHelper, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight);

package/styled-components/es/components/DatePicker/RangeDate/variations/_view/base.js

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { LeftHelper, StyledLabel } from '../../DatePicker.styles';
+import { tokens } from '../../../DatePicker.tokens';
+export var base = /*#__PURE__*/css(["", "{display:block;color:var(", ");}", "{color:var(", ");}"], StyledLabel, tokens.labelColor, LeftHelper, tokens.leftHelperColor);

package/styled-components/es/components/DatePicker/SingleDate/DatePicker.js

@@ -0,0 +1,181 @@
+var _excluded = ["className", "isOpen", "label", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "defaultDate", "valueError", "valueSuccess", "format", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "type", "placement", "closeOnOverlayClick", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { forwardRef, useCallback, useRef, useState } from 'react';
+import { cx, getPlacements } from '../../../utils';
+import { formatCalendarValue, formatInputValue, getDateFormatDelimiter } from '../utils/dateHelper';
+import { useDatePicker } from '../hooks/useDatePicker';
+import { classes } from '../DatePicker.tokens';
+import { StyledCalendar } from '../DatePickerBase.styles';
+import { base as sizeCSS } from './variations/_size/base';
+import { base as viewCSS } from './variations/_view/base';
+import { base as disabledCSS } from './variations/_disabled/base';
+import { base as readOnlyCSS } from './variations/_readonly/base';
+import { LeftHelper, StyledInput, StyledLabel, StyledPopover, base } from './DatePicker.styles';
+export var datePickerRoot = function datePickerRoot(Root) {
+  return /*#__PURE__*/forwardRef(function (_ref, ref) {
+    var className = _ref.className,
+      _ref$isOpen = _ref.isOpen,
+      isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+      label = _ref.label,
+      placeholder = _ref.placeholder,
+      leftHelper = _ref.leftHelper,
+      contentLeft = _ref.contentLeft,
+      contentRight = _ref.contentRight,
+      textBefore = _ref.textBefore,
+      textAfter = _ref.textAfter,
+      view = _ref.view,
+      size = _ref.size,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$defaultDate = _ref.defaultDate,
+      defaultDate = _ref$defaultDate === void 0 ? '' : _ref$defaultDate,
+      valueError = _ref.valueError,
+      valueSuccess = _ref.valueSuccess,
+      _ref$format = _ref.format,
+      format = _ref$format === void 0 ? 'DD.MM.YYYY' : _ref$format,
+      maskWithFormat = _ref.maskWithFormat,
+      min = _ref.min,
+      max = _ref.max,
+      _ref$includeEdgeDates = _ref.includeEdgeDates,
+      includeEdgeDates = _ref$includeEdgeDates === void 0 ? false : _ref$includeEdgeDates,
+      eventList = _ref.eventList,
+      disabledList = _ref.disabledList,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'Days' : _ref$type,
+      _ref$placement = _ref.placement,
+      placement = _ref$placement === void 0 ? ['top', 'bottom'] : _ref$placement,
+      _ref$closeOnOverlayCl = _ref.closeOnOverlayClick,
+      closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
+      offset = _ref.offset,
+      onChangeValue = _ref.onChangeValue,
+      onCommitDate = _ref.onCommitDate,
+      onToggle = _ref.onToggle,
+      onFocus = _ref.onFocus,
+      onBlur = _ref.onBlur,
+      rest = _objectWithoutProperties(_ref, _excluded);
+    var inputRef = useRef(null);
+    var _useState = useState(isOpen),
+      _useState2 = _slicedToArray(_useState, 2),
+      isInnerOpen = _useState2[0],
+      setIsInnerOpen = _useState2[1];
+    var _useState3 = useState(formatCalendarValue(defaultDate, format)),
+      _useState4 = _slicedToArray(_useState3, 2),
+      calendarValue = _useState4[0],
+      setCalendarValue = _useState4[1];
+    var _useState5 = useState(formatInputValue(defaultDate, format)),
+      _useState6 = _slicedToArray(_useState5, 2),
+      inputValue = _useState6[0],
+      setInputValue = _useState6[1];
+    var dateFormatDelimiter = useCallback(function () {
+      return getDateFormatDelimiter(format);
+    }, [format]);
+    var _useDatePicker = useDatePicker({
+        currentValue: inputValue,
+        setInputValue: setInputValue,
+        setCalendarValue: setCalendarValue,
+        setIsInnerOpen: setIsInnerOpen,
+        dateFormatDelimiter: dateFormatDelimiter,
+        format: format,
+        disabled: disabled,
+        readOnly: readOnly,
+        maskWithFormat: maskWithFormat,
+        valueError: valueError,
+        valueSuccess: valueSuccess,
+        inputRef: inputRef,
+        onToggle: onToggle,
+        onChangeValue: onChangeValue,
+        onCommitDate: onCommitDate
+      }),
+      datePickerErrorClass = _useDatePicker.datePickerErrorClass,
+      datePickerSuccessClass = _useDatePicker.datePickerSuccessClass,
+      handleToggle = _useDatePicker.handleToggle,
+      handleChangeValue = _useDatePicker.handleChangeValue,
+      handleCommitDate = _useDatePicker.handleCommitDate;
+    var DatePickerInput = /*#__PURE__*/React.createElement(StyledInput, {
+      ref: inputRef,
+      className: cx(datePickerErrorClass, datePickerSuccessClass),
+      value: inputValue,
+      readOnly: readOnly,
+      disabled: disabled,
+      placeholder: placeholder,
+      contentLeft: contentLeft,
+      contentRight: contentRight,
+      textBefore: textBefore,
+      textAfter: textAfter,
+      onChange: handleChangeValue,
+      onSearch: function onSearch(date) {
+        return handleCommitDate(date, true, false);
+      },
+      onFocus: onFocus,
+      onBlur: onBlur
+    });
+    return /*#__PURE__*/React.createElement(Root, _extends({
+      view: view,
+      size: size,
+      className: cx(classes.datePickerRoot, className),
+      disabled: disabled,
+      readOnly: !disabled && readOnly,
+      ref: ref
+    }, rest), label && /*#__PURE__*/React.createElement(StyledLabel, null, label), /*#__PURE__*/React.createElement(StyledPopover, {
+      isOpen: isOpen || isInnerOpen,
+      usePortal: false,
+      onToggle: handleToggle,
+      offset: offset,
+      placement: getPlacements(placement),
+      trigger: "click",
+      closeOnOverlayClick: closeOnOverlayClick,
+      isFocusTrapped: false,
+      target: DatePickerInput,
+      preventOverflow: false
+    }, /*#__PURE__*/React.createElement(StyledCalendar, {
+      size: size,
+      value: calendarValue,
+      type: type,
+      eventList: eventList,
+      disabledList: disabledList,
+      min: min,
+      max: max,
+      includeEdgeDates: includeEdgeDates,
+      isRange: false,
+      onChangeValue: function onChangeValue(date) {
+        return handleCommitDate(date, false, true);
+      }
+    })), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, null, leftHelper));
+  });
+};
+export var datePickerConfig = {
+  name: 'DatePicker',
+  tag: 'div',
+  layout: datePickerRoot,
+  base: base,
+  variations: {
+    view: {
+      css: viewCSS
+    },
+    size: {
+      css: sizeCSS
+    },
+    disabled: {
+      css: disabledCSS,
+      attrs: true
+    },
+    readOnly: {
+      css: readOnlyCSS,
+      attrs: true
+    }
+  },
+  defaults: {
+    size: 'm',
+    view: 'default'
+  }
+};

package/styled-components/es/components/DatePicker/SingleDate/DatePicker.styles.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import { css } from 'styled-components';
+import { component, mergeConfig } from '../../../engines';
+import { textFieldConfig, textFieldTokens } from '../../TextField';
+import { classes, tokens } from '../DatePicker.tokens';
+import { popoverConfig } from '../../Popover';
+var mergedTextFieldConfig = /*#__PURE__*/mergeConfig(textFieldConfig);
+var TextField = /*#__PURE__*/component(mergedTextFieldConfig);
+var mergedPopoverConfig = /*#__PURE__*/mergeConfig(popoverConfig);
+var Popover = /*#__PURE__*/component(mergedPopoverConfig);
+export var StyledPopover = /*#__PURE__*/styled(Popover).withConfig({
+  componentId: "plasma-new-hope__sc-1ohdd6s-0"
+})([""]);
+
+// NOTE: переопределение токенов TextField
+export var StyledInput = /*#__PURE__*/styled(TextField).withConfig({
+  componentId: "plasma-new-hope__sc-1ohdd6s-1"
+})(["         ", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");&.", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}&.", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], textFieldTokens.color, tokens.textFieldColor, textFieldTokens.placeholderColor, tokens.textFieldPlaceholderColor, textFieldTokens.caretColor, tokens.textFieldCaretColor, textFieldTokens.focusColor, tokens.textFieldFocusColor, textFieldTokens.backgroundColor, tokens.textFieldBackgroundColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundColorFocus, textFieldTokens.borderColor, tokens.borderColor, textFieldTokens.borderColorHover, tokens.borderColorHover, textFieldTokens.borderColorFocus, tokens.borderColorFocus, textFieldTokens.colorReadOnly, tokens.textFieldColorReadOnly, textFieldTokens.backgroundColorReadOnly, tokens.textFieldBackgroundColorReadOnly, textFieldTokens.borderColorReadOnly, tokens.textFieldBorderColorReadOnly, textFieldTokens.placeholderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, textFieldTokens.height, tokens.textFieldHeight, textFieldTokens.borderWidth, tokens.textFieldBorderWidth, textFieldTokens.borderRadius, tokens.textFieldBorderRadius, textFieldTokens.padding, tokens.textFieldPadding, textFieldTokens.leftContentMargin, tokens.textFieldLeftContentMargin, textFieldTokens.rightContentMargin, tokens.textFieldRightContentMargin, textFieldTokens.fontFamily, tokens.textFieldFontFamily, textFieldTokens.fontSize, tokens.textFieldFontSize, textFieldTokens.fontStyle, tokens.textFieldFontStyle, textFieldTokens.fontWeight, tokens.textFieldFontWeight, textFieldTokens.letterSpacing, tokens.textFieldLetterSpacing, textFieldTokens.lineHeight, tokens.textFieldLineHeight, textFieldTokens.disabledOpacity, tokens.disabledOpacity, textFieldTokens.textBeforeColor, tokens.textFieldTextBeforeColor, textFieldTokens.textAfterColor, tokens.textFieldTextAfterColor, textFieldTokens.textBeforeMargin, tokens.textFieldTextBeforeMargin, textFieldTokens.textAfterMargin, tokens.textFieldTextAfterMargin, classes.datePickerError, textFieldTokens.backgroundColor, tokens.textFieldBackgroundErrorColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundErrorColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundErrorColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorError, textFieldTokens.borderColorHover, tokens.textFieldBorderColorErrorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorErrorFocus, classes.datePickerSuccess, textFieldTokens.backgroundColor, tokens.textFieldBackgroundSuccessColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundSuccessColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundSuccessColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorSuccess, textFieldTokens.borderColorHover, tokens.textFieldBorderColorSuccessHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorSuccessFocus);
+export var base = /*#__PURE__*/css(["display:inline-block;"]);
+export var StyledLabel = /*#__PURE__*/styled.label.withConfig({
+  componentId: "plasma-new-hope__sc-1ohdd6s-2"
+})([""]);
+export var LeftHelper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-1ohdd6s-3"
+})([""]);

package/styled-components/es/components/DatePicker/SingleDate/DatePicker.types.js

@@ -0,0 +1 @@
+export {};

package/styled-components/es/components/DatePicker/SingleDate/variations/_disabled/base.js

@@ -0,0 +1,3 @@
+import { css } from 'styled-components';
+import { tokens } from '../../../DatePicker.tokens';
+export var base = /*#__PURE__*/css(["&[disabled]{opacity:var(", ");cursor:not-allowed;}"], tokens.disabledOpacity);

package/styled-components/es/components/DatePicker/SingleDate/variations/_disabled/tokens.json

@@ -0,0 +1,4 @@
+{
+    "type": "boolean",
+    "tokens": ["--plasma-date-picker-disabled-opacity"]
+}

package/styled-components/es/components/DatePicker/SingleDate/variations/_readonly/base.js

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { tokens } from '../../../DatePicker.tokens';
+import { LeftHelper, StyledLabel } from '../../DatePicker.styles';
+export var base = /*#__PURE__*/css(["&[readonly]{cursor:default;", "{display:block;color:var(", ");}", "{color:var(", ");}}"], StyledLabel, tokens.labelColorReadOnly, LeftHelper, tokens.leftHelperColorReadOnly);

package/styled-components/es/components/DatePicker/SingleDate/variations/_readonly/tokens.json

@@ -0,0 +1,4 @@
+{
+    "type": "boolean",
+    "tokens": ["--plasma-date-picker__label-color-readonly", "--plasma-date-picker__left-helper-color-readonly"]
+}

package/styled-components/es/components/DatePicker/SingleDate/variations/_size/base.js

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { tokens } from '../../../DatePicker.tokens';
+import { StyledLabel, LeftHelper } from '../../DatePicker.styles';
+export var base = /*#__PURE__*/css(["width:var(", ");", "{margin:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}"], tokens.width, StyledLabel, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, LeftHelper, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight);

package/styled-components/es/components/DatePicker/SingleDate/variations/_size/tokens.json

@@ -0,0 +1,16 @@
+[
+    "--plasma-date-picker__label-offset",
+    "--plasma-date-picker__label-font-family",
+    "--plasma-date-picker__label-font-style",
+    "--plasma-date-picker__label-font-size",
+    "--plasma-date-picker__label-font-weight",
+    "--plasma-date-picker__label-letter-spacing",
+    "--plasma-date-picker__label-line-height",
+    "--plasma-date-picker__left-helper-offset",
+    "--plasma-date-picker__left-helper-font-family",
+    "--plasma-date-picker__left-helper-font-style",
+    "--plasma-date-picker__left-helper-font-size",
+    "--plasma-date-picker__left-helper-font-weight",
+    "--plasma-date-picker__left-helper-letter-spacing",
+    "--plasma-date-picker__left-helper-line-height"
+]

package/styled-components/es/components/DatePicker/SingleDate/variations/_view/base.js

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { LeftHelper, StyledLabel } from '../../DatePicker.styles';
+import { tokens } from '../../../DatePicker.tokens';
+export var base = /*#__PURE__*/css(["", "{display:block;color:var(", ");}", "{color:var(", ");}"], StyledLabel, tokens.labelColor, LeftHelper, tokens.leftHelperColor);

package/styled-components/es/components/DatePicker/SingleDate/variations/_view/tokens.json

@@ -0,0 +1 @@
+["--plasma-datepicker__label-color", "--plasma-datepicker__left-helper-color"]

package/styled-components/es/components/DatePicker/hooks/useDatePicker.js

@@ -0,0 +1,71 @@
+import { classes } from '../DatePicker.tokens';
+import { formatCalendarValue, formatInputValue, getDateFromFormat, getMaskedDateOnInput } from '../utils/dateHelper';
+export var useDatePicker = function useDatePicker(_ref) {
+  var currentValue = _ref.currentValue,
+    setInputValue = _ref.setInputValue,
+    setCalendarValue = _ref.setCalendarValue,
+    setIsInnerOpen = _ref.setIsInnerOpen,
+    dateFormatDelimiter = _ref.dateFormatDelimiter,
+    format = _ref.format,
+    disabled = _ref.disabled,
+    readOnly = _ref.readOnly,
+    maskWithFormat = _ref.maskWithFormat,
+    valueError = _ref.valueError,
+    valueSuccess = _ref.valueSuccess,
+    inputRef = _ref.inputRef,
+    onToggle = _ref.onToggle,
+    onChangeValue = _ref.onChangeValue,
+    onCommitDate = _ref.onCommitDate;
+  var datePickerErrorClass = valueError ? classes.datePickerError : undefined;
+  var datePickerSuccessClass = valueSuccess ? classes.datePickerSuccess : undefined;
+  var handleToggle = function handleToggle(opened, event) {
+    if (disabled || readOnly) {
+      return;
+    }
+    var isCalendarOpen = event.target === (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) ? true : opened;
+    if (onToggle) {
+      return onToggle(isCalendarOpen, event);
+    }
+    setIsInnerOpen(isCalendarOpen);
+  };
+  var handleChangeValue = function handleChangeValue(event) {
+    if (disabled || readOnly) {
+      return;
+    }
+    var value = event.target.value;
+    var newValue = maskWithFormat ? getMaskedDateOnInput(value, format, dateFormatDelimiter(), currentValue) : value;
+    setCalendarValue(formatCalendarValue(newValue, format));
+    setInputValue(formatInputValue(newValue, format));
+    onChangeValue === null || onChangeValue === void 0 || onChangeValue(event, newValue);
+  };
+  var handleCommitDate = function handleCommitDate(date, applyFormat, isCalendarValue) {
+    if (disabled || readOnly) {
+      return;
+    }
+    if (!date) {
+      setCalendarValue(undefined);
+      setInputValue('');
+      return onCommitDate === null || onCommitDate === void 0 ? void 0 : onCommitDate('', false, true);
+    }
+    if (isCalendarValue) {
+      setCalendarValue(formatCalendarValue(date, format));
+      setInputValue(formatInputValue(date, format));
+      return onCommitDate === null || onCommitDate === void 0 ? void 0 : onCommitDate(date, false, true);
+    }
+    var formatString = applyFormat ? format : undefined;
+    var _getDateFromFormat = getDateFromFormat(date, formatString),
+      newDate = _getDateFromFormat.value,
+      isError = _getDateFromFormat.isError,
+      isSuccess = _getDateFromFormat.isSuccess;
+    setCalendarValue(formatCalendarValue(newDate, format));
+    setInputValue(formatInputValue(newDate, format));
+    onCommitDate === null || onCommitDate === void 0 || onCommitDate(newDate, isError, isSuccess);
+  };
+  return {
+    datePickerErrorClass: datePickerErrorClass,
+    datePickerSuccessClass: datePickerSuccessClass,
+    handleToggle: handleToggle,
+    handleChangeValue: handleChangeValue,
+    handleCommitDate: handleCommitDate
+  };
+};

package/styled-components/es/components/DatePicker/index.js

@@ -0,0 +1,3 @@
+export { datePickerRoot, datePickerConfig } from './SingleDate/DatePicker';
+export { datePickerRangeRoot, datePickerRangeConfig } from './RangeDate/DatePicker';
+export { classes as datePickerClasses, tokens as datePickerTokens } from './DatePicker.tokens';

package/styled-components/es/components/DatePicker/utils/dateHelper.js

@@ -0,0 +1,72 @@
+import { customDayjs } from '../../../utils/datejs';
+export var formatInputValue = function formatInputValue(value, format) {
+  if (!value) {
+    return '';
+  }
+  if (format && customDayjs(value, format, true).isValid()) {
+    return customDayjs(value, format).format(format);
+  }
+  if (format && String(value).length >= 10 && String(new Date(value)) !== 'Invalid Date') {
+    return customDayjs(value).format(format);
+  }
+  return String(value);
+};
+export var formatCalendarValue = function formatCalendarValue(value, format) {
+  if (!value) {
+    return undefined;
+  }
+  if (format && customDayjs(value, format, true).isValid()) {
+    return customDayjs(value, format, true).toDate();
+  }
+  if (String(new Date(value)) !== 'Invalid Date') {
+    return customDayjs(value).toDate();
+  }
+  return undefined;
+};
+export var getDateFromFormat = function getDateFromFormat(value, format) {
+  if (format && customDayjs(value, format, true).isValid()) {
+    return {
+      value: customDayjs(value, format, true).toDate(),
+      isError: false,
+      isSuccess: true
+    };
+  }
+  if (!format && String(new Date(value)) !== 'Invalid Date') {
+    return {
+      value: customDayjs(value).toDate(),
+      isError: false,
+      isSuccess: true
+    };
+  }
+  return {
+    value: value,
+    isError: true,
+    isSuccess: false
+  };
+};
+export var getDateFormatDelimiter = function getDateFormatDelimiter(format) {
+  var _format$match;
+  if (!format) {
+    return '';
+  }
+  var delimiter = (_format$match = format.match(/[^a-zA-Z0-9]/)) === null || _format$match === void 0 ? void 0 : _format$match[0];
+  return delimiter !== null && delimiter !== void 0 ? delimiter : '';
+};
+export var getMaskedDateOnInput = function getMaskedDateOnInput(value, format, delimiter, prevValue) {
+  if (!value) {
+    return '';
+  }
+  if (!format || !delimiter) {
+    return value;
+  }
+  if (value.length >= format.length) {
+    return value.slice(0, format.length);
+  }
+  if (prevValue && value.length < prevValue.length && (prevValue === null || prevValue === void 0 ? void 0 : prevValue[value.length]) === delimiter) {
+    return value.slice(0, -1);
+  }
+  if ((format === null || format === void 0 ? void 0 : format[value.length]) === delimiter) {
+    return value + delimiter;
+  }
+  return value;
+};

package/styled-components/es/components/Dropdown/Dropdown.js

@@ -9,14 +9,14 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { forwardRef, useReducer } from 'react';
-import { cx } from '../../utils';
+import { cx, getPlacements } from '../../utils';
 import { pathReducer } from './reducers/pathReducer';
 import { focusedPathReducer } from './reducers/focusedPathReducer';
 import { DropdownInner } from './ui';
 import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
 import { Ul, StyledPopover, base } from './Dropdown.styles';
-import { getPlacements, childrenWithProps } from './utils';
+import { childrenWithProps } from './utils';
 import { classes } from './Dropdown.tokens';
 import { useKeyNavigation } from './hooks/useKeyboardNavigation';
 import { useHashMaps } from './hooks/useHashMaps';

package/styled-components/es/components/Dropdown/utils/index.js

@@ -1,20 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 import React, { Children, cloneElement, isValidElement } from 'react';
-export var getPlacement = function getPlacement(placement) {
-  return "".concat(placement, "-start");
-};
-export var getPlacements = function getPlacements(placements) {
-  if (!placements) {
-    return;
-  }
-  var isArray = Array.isArray(placements);
-  if (!isArray) {
-    return getPlacement(placements);
-  }
-  return (placements || []).map(function (placement) {
-    return getPlacement(placement);
-  });
-};
 export var getCorrectHeight = function getCorrectHeight(listHeight) {
   if (Number.isNaN(Number(listHeight))) {
     return listHeight.toString();

package/styled-components/es/components/Range/Range.js

@@ -3,7 +3,7 @@ var _excluded = ["label", "leftHelper", "contentLeft", "contentRight", "view", "
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { forwardRef, useMemo } from 'react';
+import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
 import { cx } from '../../utils';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as viewCSS } from './variations/_view/base';
@@ -53,6 +53,9 @@ export var rangeRoot = function rangeRoot(Root) {
       onBlurFirstTextfield = _ref.onBlurFirstTextfield,
       onBlurSecondTextfield = _ref.onBlurSecondTextfield,
       rest = _objectWithoutProperties(_ref, _excluded);
+    var rangeRef = useRef(null);
+    var firstTextFieldRef = useRef(null);
+    var secondTextFieldRef = useRef(null);
     var rangeErrorClass = firstValueError && secondValueError ? classes.rangeError : undefined;
     var firstValueErrorClass = !rangeErrorClass && firstValueError ? classes.rangeValueError : undefined;
     var secondValueErrorClass = !rangeErrorClass && secondValueError ? classes.rangeValueError : undefined;
@@ -63,6 +66,16 @@ export var rangeRoot = function rangeRoot(Root) {
     var handleChangeSecondValue = getChangeHandler(onChangeSecondValue, disabled, readOnly);
     var handleSearchFirstValue = getSearchHandler(onSearchFirstValue, disabled, readOnly);
     var handleSearchSecondValue = getSearchHandler(onSearchSecondValue, disabled, readOnly);
+    useImperativeHandle(ref, function () {
+      return {
+        firstTextField: function firstTextField() {
+          return firstTextFieldRef;
+        },
+        secondTextField: function secondTextField() {
+          return secondTextFieldRef;
+        }
+      };
+    }, [firstTextFieldRef, secondTextFieldRef]);
     var Divider = useMemo(function () {
       if (dividerVariant === 'none') {
         return null;
@@ -73,14 +86,15 @@ export var rangeRoot = function rangeRoot(Root) {
       return _StyledDivider2 || (_StyledDivider2 = /*#__PURE__*/React.createElement(StyledDivider, null, dividerIcon));
     }, [dividerVariant, dividerIcon]);
     return /*#__PURE__*/React.createElement(Root, _extends({
+      ref: rangeRef,
       view: view,
       size: size,
       disabled: disabled,
-      readOnly: !disabled && readOnly,
-      ref: ref
+      readOnly: !disabled && readOnly
     }, rest), label && /*#__PURE__*/React.createElement(StyledLabel, null, label), /*#__PURE__*/React.createElement(ContentWrapper, {
       className: cx(rangeErrorClass, rangeSuccessClass)
     }, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(StyledInput, {
+      ref: firstTextFieldRef,
       className: cx(firstValueErrorClass, firstValueSuccessClass),
       value: firstValue,
       readOnly: readOnly,
@@ -95,6 +109,7 @@ export var rangeRoot = function rangeRoot(Root) {
       onFocus: onFocusFirstTextfield,
       onBlur: onBlurFirstTextfield
     }), Divider, /*#__PURE__*/React.createElement(StyledInput, {
+      ref: secondTextFieldRef,
       className: cx(secondValueErrorClass, secondValueSuccessClass),
       value: secondValue,
       readOnly: readOnly,

package/styled-components/es/components/Range/Range.styles.js

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 import { css } from 'styled-components';
 import { component, mergeConfig } from '../../engines';
 import { textFieldConfig, textFieldTokens } from '../TextField';
+import { popoverClasses } from '../Popover';
 import { classes, tokens } from './Range.tokens';
 var mergedConfig = /*#__PURE__*/mergeConfig(textFieldConfig);
 var TextField = /*#__PURE__*/component(mergedConfig);
@@ -9,8 +10,8 @@ var TextField = /*#__PURE__*/component(mergedConfig);
 // NOTE: переопределение токенов TextField
 export var StyledInput = /*#__PURE__*/styled(TextField).withConfig({
   componentId: "plasma-new-hope__sc-xpkrak-0"
-})(["flex:1;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");&.", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}&.", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], textFieldTokens.color, tokens.textFieldColor, textFieldTokens.placeholderColor, tokens.textFieldPlaceholderColor, textFieldTokens.caretColor, tokens.textFieldCaretColor, textFieldTokens.focusColor, tokens.textFieldFocusColor, textFieldTokens.backgroundColor, tokens.textFieldBackgroundColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColor, textFieldTokens.borderColorHover, tokens.textFieldBorderColorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorFocus, textFieldTokens.colorReadOnly, tokens.textFieldColorReadOnly, textFieldTokens.backgroundColorReadOnly, tokens.textFieldBackgroundColorReadOnly, textFieldTokens.borderColorReadOnly, tokens.textFieldBorderColorReadOnly, textFieldTokens.placeholderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, textFieldTokens.height, tokens.textFieldHeight, textFieldTokens.borderWidth, tokens.textFieldBorderWidth, textFieldTokens.borderRadius, tokens.textFieldBorderRadius, textFieldTokens.padding, tokens.textFieldPadding, textFieldTokens.leftContentMargin, tokens.textFieldLeftContentMargin, textFieldTokens.rightContentMargin, tokens.textFieldRightContentMargin, textFieldTokens.fontFamily, tokens.textFieldFontFamily, textFieldTokens.fontSize, tokens.textFieldFontSize, textFieldTokens.fontStyle, tokens.textFieldFontStyle, textFieldTokens.fontWeight, tokens.textFieldFontWeight, textFieldTokens.letterSpacing, tokens.textFieldLetterSpacing, textFieldTokens.lineHeight, tokens.textFieldLineHeight, textFieldTokens.disabledOpacity, tokens.disabledOpacity, textFieldTokens.textBeforeColor, tokens.textFieldTextBeforeColor, textFieldTokens.textAfterColor, tokens.textFieldTextAfterColor, textFieldTokens.textBeforeMargin, tokens.textFieldTextBeforeMargin, textFieldTokens.textAfterMargin, tokens.textFieldTextAfterMargin, classes.rangeValueError, textFieldTokens.backgroundColor, tokens.textFieldBackgroundErrorColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundErrorColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundErrorColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorError, textFieldTokens.borderColorHover, tokens.textFieldBorderColorErrorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorErrorFocus, classes.rangeValueSuccess, textFieldTokens.backgroundColor, tokens.textFieldBackgroundSuccessColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundSuccessColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundSuccessColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorSuccess, textFieldTokens.borderColorHover, tokens.textFieldBorderColorSuccessHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorSuccessFocus);
-export var base = /*#__PURE__*/css([""]);
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");&.", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}&.", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], textFieldTokens.color, tokens.textFieldColor, textFieldTokens.placeholderColor, tokens.textFieldPlaceholderColor, textFieldTokens.caretColor, tokens.textFieldCaretColor, textFieldTokens.focusColor, tokens.textFieldFocusColor, textFieldTokens.backgroundColor, tokens.textFieldBackgroundColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColor, textFieldTokens.borderColorHover, tokens.textFieldBorderColorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorFocus, textFieldTokens.colorReadOnly, tokens.textFieldColorReadOnly, textFieldTokens.backgroundColorReadOnly, tokens.textFieldBackgroundColorReadOnly, textFieldTokens.borderColorReadOnly, tokens.textFieldBorderColorReadOnly, textFieldTokens.placeholderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, textFieldTokens.height, tokens.textFieldHeight, textFieldTokens.borderWidth, tokens.textFieldBorderWidth, textFieldTokens.borderRadius, tokens.textFieldBorderRadius, textFieldTokens.padding, tokens.textFieldPadding, textFieldTokens.leftContentMargin, tokens.textFieldLeftContentMargin, textFieldTokens.rightContentMargin, tokens.textFieldRightContentMargin, textFieldTokens.fontFamily, tokens.textFieldFontFamily, textFieldTokens.fontSize, tokens.textFieldFontSize, textFieldTokens.fontStyle, tokens.textFieldFontStyle, textFieldTokens.fontWeight, tokens.textFieldFontWeight, textFieldTokens.letterSpacing, tokens.textFieldLetterSpacing, textFieldTokens.lineHeight, tokens.textFieldLineHeight, textFieldTokens.disabledOpacity, tokens.disabledOpacity, textFieldTokens.textBeforeColor, tokens.textFieldTextBeforeColor, textFieldTokens.textAfterColor, tokens.textFieldTextAfterColor, textFieldTokens.textBeforeMargin, tokens.textFieldTextBeforeMargin, textFieldTokens.textAfterMargin, tokens.textFieldTextAfterMargin, classes.rangeValueError, textFieldTokens.backgroundColor, tokens.textFieldBackgroundErrorColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundErrorColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundErrorColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorError, textFieldTokens.borderColorHover, tokens.textFieldBorderColorErrorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorErrorFocus, classes.rangeValueSuccess, textFieldTokens.backgroundColor, tokens.textFieldBackgroundSuccessColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundSuccessColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundSuccessColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorSuccess, textFieldTokens.borderColorHover, tokens.textFieldBorderColorSuccessHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorSuccessFocus);
+export var base = /*#__PURE__*/css([".", "{display:block;flex:1;}.", "{display:flex;flex-direction:column;}"], /*#__PURE__*/String(popoverClasses.wrapper), /*#__PURE__*/String(popoverClasses.target));
 export var StyledLabel = /*#__PURE__*/styled.label.withConfig({
   componentId: "plasma-new-hope__sc-xpkrak-1"
 })([""]);

package/styled-components/es/components/Select/Select.js

@@ -10,8 +10,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { Children, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { safeUseId, useForkRef } from '@salutejs/plasma-core';
-import { cx } from '../../utils';
-import { getPlacements } from '../Dropdown/utils';
+import { cx, getPlacements } from '../../utils';
 import { useDidMountEffect, useForceUpdate } from '../../hooks';
 import { base as targetCSS } from './variations/_target/base';
 import { base as viewCSS } from './variations/_view/base';

package/styled-components/es/components/TextField/TextField.tokens.js

@@ -20,7 +20,7 @@ export var tokens = {
   caretColor: '--plasma-textfield__caret-color',
   placeholderColor: '--plasma-textfield__placeholder-color',
   height: '--plasma-textfield-height',
-  borderWidth: '--plasmas-textfield-border-width',
+  borderWidth: '--plasma-textfield-border-width',
   borderRadius: '--plasma-textfield-border-radius',
   /** Отступ от границы ТextField */
   padding: '--plasma-textfield-padding',