@salutejs/plasma-new-hope 0.154.0-canary.1392.11041436795.0 → 0.154.0-canary.1421.11039037651.0

package/styled-components/cjs/hooks/useForm.js

@@ -0,0 +1,137 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useForm = void 0;
+var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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; }
+var initData = function initData(ref, defaultValues) {
+  if (!ref.current) {
+    return;
+  }
+  var form = ref.current;
+  var items = form.elements;
+  for (var i = 0; i < items.length; i++) {
+    var item = items[i];
+    var _name = item.name,
+      value = item.value,
+      type = item.type;
+    if ((type === 'text' || type === 'textarea') && defaultValues[_name]) {
+      item.value = String(defaultValues[_name]);
+    }
+    if (type === 'checkbox' && defaultValues[_name]) {
+      item.checked = Boolean(defaultValues[_name]);
+    }
+    if (type === 'radio' && defaultValues[_name]) {
+      item.checked = defaultValues[_name] === value;
+    }
+    if (type === 'number' && defaultValues[_name]) {
+      var sliderType = item.getAttribute('datatype');
+      if (sliderType === 'slider-single') {
+        item.setAttribute('defaultValue', String(defaultValues[_name]));
+        var event = new Event('setInitValue');
+        item.dispatchEvent(event);
+      }
+      if (sliderType === 'slider-double') {
+        var isMax = item.getAttribute('data-slidertype') === 'max' ? 1 : 0;
+        var _data = defaultValues[_name];
+        item.setAttribute('defaultValue', String(_data[isMax]));
+        var _event = new Event('setInitValue');
+        item.dispatchEvent(_event);
+      }
+    }
+    if (type === 'hidden') {
+      var datepickerType = item.getAttribute('datatype');
+      if (datepickerType === 'datepicker-single') {
+        item.setAttribute('defaultValue', String(defaultValues[_name]));
+        var _event2 = new Event('setInitValue');
+        item.dispatchEvent(_event2);
+      }
+      if (datepickerType === 'datepicker-double') {
+        var isTo = item.getAttribute('data-datepicker') === 'to' ? 1 : 0;
+        var _data2 = defaultValues[_name];
+        item.setAttribute('defaultValue', String(_data2[isTo]));
+        var _event3 = new Event('setInitValue');
+        item.dispatchEvent(_event3);
+      }
+    }
+  }
+};
+var valideParams = function valideParams(name) {
+  return name && name !== '';
+};
+var useForm = exports.useForm = function useForm(onSubmit, defaultValues) {
+  var formRef = /*#__PURE__*/_react["default"].createRef();
+  (0, _react.useEffect)(function () {
+    initData(formRef, defaultValues);
+  }, []);
+  var formData = function formData(event) {
+    event.preventDefault();
+    var result = {};
+    var form = event.target;
+    var items = form.elements;
+    for (var i = 0; i < items.length; i++) {
+      var item = items[i];
+      var _name2 = item.name,
+        value = item.value,
+        type = item.type;
+      if ((type === 'text' || type === 'textarea') && valideParams(_name2)) {
+        result[_name2] = value;
+      }
+      if (type === 'checkbox' && valideParams(_name2)) {
+        result[_name2] = item.checked;
+      }
+      if (type === 'radio' && valideParams(_name2)) {
+        if (item.checked) {
+          result[_name2] = value;
+        } else if (!(_name2 in result)) {
+          result[_name2] = null;
+        }
+      }
+      if (type === 'number' && valideParams(_name2)) {
+        var sliderType = item.getAttribute('datatype');
+        if (sliderType === 'slider-single') {
+          result[_name2] = value;
+        }
+        if (sliderType === 'slider-double') {
+          var isMin = item.getAttribute('data-slidertype') === 'min';
+          if (isMin) {
+            result[_name2] = [Number(value)];
+          }
+          if (!isMin && Array.isArray(result[_name2])) {
+            result[_name2] = [].concat(_toConsumableArray(result[_name2]), [Number(value)]);
+          }
+        }
+      }
+      if (type === 'hidden' && valideParams(_name2)) {
+        var _sliderType = item.getAttribute('datatype');
+        if (_sliderType === 'datepicker-single') {
+          result[_name2] = value;
+        }
+        if (_sliderType === 'datepicker-double') {
+          var _isMin = item.getAttribute('data-datepicker') === 'from';
+          if (_isMin) {
+            result[_name2] = [String(value)];
+          }
+          if (!_isMin && Array.isArray(result[_name2])) {
+            result[_name2] = [].concat(_toConsumableArray(result[_name2]), [String(value)]);
+          }
+        }
+      }
+    }
+    onSubmit(result);
+  };
+  return {
+    formRef: formRef,
+    formData: formData
+  };
+};

package/styled-components/cjs/types/FormType.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/styled-components/cjs/utils/index.js

@@ -13,6 +13,8 @@ var _exportNames = {
   IS_REACT_18: true,
   safeUseId: true,
   isNumber: true,
+  mergeRefs: true,
+  setRefList: true,
   isEmpty: true,
   constants: true
 };
@@ -53,17 +55,30 @@ Object.defineProperty(exports, "isNumber", {
     return _isNumber.isNumber;
   }
 });
+Object.defineProperty(exports, "mergeRefs", {
+  enumerable: true,
+  get: function get() {
+    return _setRefList.mergeRefs;
+  }
+});
 Object.defineProperty(exports, "safeUseId", {
   enumerable: true,
   get: function get() {
     return _react.safeUseId;
   }
 });
+Object.defineProperty(exports, "setRefList", {
+  enumerable: true,
+  get: function get() {
+    return _setRefList.setRefList;
+  }
+});
 var _canUseDOM = /*#__PURE__*/require("./canUseDOM");
 var _extractTextFrom = /*#__PURE__*/require("./extractTextFrom");
 var _getSizeValueFromProp = /*#__PURE__*/require("./getSizeValueFromProp");
 var _react = /*#__PURE__*/require("./react");
 var _isNumber = /*#__PURE__*/require("./isNumber");
+var _setRefList = /*#__PURE__*/require("./setRefList");
 var _isEmpty = /*#__PURE__*/require("./isEmpty");
 var _constants = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("./constants"));
 exports.constants = _constants;

package/styled-components/cjs/utils/inputHidden.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputHidden = void 0;
+var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var InputHidden = exports.InputHidden = /*#__PURE__*/_styledComponents["default"].input.withConfig({
+  componentId: "plasma-new-hope__sc-12z83ad-0"
+})(["visibility:hidden;width:0;height:0;opacity:0;margin:0;padding:0;border:none;"]);

package/styled-components/cjs/utils/setRefList.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mergeRefs = mergeRefs;
+exports.setRefList = setRefList;
+function mergeRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+  return function (val) {
+    setRefList.apply(void 0, [val].concat(refs));
+  };
+}
+function setRefList(val) {
+  for (var _len2 = arguments.length, refs = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+    refs[_key2 - 1] = arguments[_key2];
+  }
+  refs.forEach(function (ref) {
+    if (typeof ref === 'function') {
+      ref(val);
+    } else if (ref != null) {
+      ref.current = val;
+    }
+  });
+}

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

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { css } from 'styled-components';
 import { linkConfig } from '../Link';
 import { component, mergeConfig } from '../../engines';
-import { IconDisclosureRightCentered } from '../_Icon';
+import { IconDisclosureRight } from '../_Icon';
 import { addFocus } from '../../mixins';
 import { tokens } from './Breadcrumbs.tokens';
 var mergedLinkConfig = /*#__PURE__*/mergeConfig(linkConfig);
@@ -19,6 +19,6 @@ export var StyledLink = /*#__PURE__*/styled(Link).withConfig({
   outlineColor: /*#__PURE__*/"var(".concat(tokens.breadcrumbsFocusOutlineColor, ")")
 }));
 export var base = /*#__PURE__*/css(["display:flex;flex-direction:row;align-items:center;gap:var(", ");color:var(", ");font-family:var(", ");font-size:var(", ");font-weight:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.breadcrumbsGap, tokens.breadcrumbsColor, tokens.breadcrumbsFontFamily, tokens.breadcrumbsFontSize, tokens.breadcrumbsFontWeight, tokens.breadcrumbsFontStyle, tokens.breadcrumbsLetterSpacing, tokens.breadcrumbsLineHeight);
-export var Separator = /*#__PURE__*/styled(IconDisclosureRightCentered).withConfig({
+export var Separator = /*#__PURE__*/styled(IconDisclosureRight).withConfig({
   componentId: "plasma-new-hope__sc-4bjoev-1"
 })(["color:var(", ");opacity:var(", ");"], tokens.breadcrumbsColor, tokens.breadcrumbsOpacity);

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

@@ -64,7 +64,6 @@ export var buttonRoot = function buttonRoot(Root) {
       value: value,
       disabled: disabled,
       focused: focused || outlined,
-      contentPlacing: contentPlacing,
       className: cx(squareClass, stretchingClass, classes.buttonItem, isLoadingClass, className),
       style: _objectSpread(_objectSpread({}, style), {}, {
         '--plasma_computed-btn-br': buttonBorderRadius,

package/styled-components/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
-import { IconDisclosureDownFill, IconDisclosureLeftCentered, IconDisclosureRightCentered } from '../../../_Icon';
+import { IconDisclosureDownFill, IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon';
 import { CalendarState } from '../../store/types';
 import { getCalendarType, MONTH_NAMES, YEAR_RENDER_COUNT } from '../../utils';
 import { classes } from '../../Calendar.tokens';
@@ -62,7 +62,7 @@ export var CalendarHeader = function CalendarHeader(_ref) {
       onClick: function onClick() {
         return onPrev();
       }
-    }, /*#__PURE__*/React.createElement(IconDisclosureLeftCentered, {
+    }, /*#__PURE__*/React.createElement(IconDisclosureLeft, {
       color: "inherit",
       size: size === 'xs' ? 'xs' : 's'
     }));
@@ -73,7 +73,7 @@ export var CalendarHeader = function CalendarHeader(_ref) {
       onClick: function onClick() {
         return onNext();
       }
-    }, /*#__PURE__*/React.createElement(IconDisclosureRightCentered, {
+    }, /*#__PURE__*/React.createElement(IconDisclosureRight, {
       color: "inherit",
       size: size === 'xs' ? 'xs' : 's'
     }));

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

@@ -1,4 +1,4 @@
-var _excluded = ["className", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onToggle", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
+var _excluded = ["className", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "name", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onToggle", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
 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."); }
@@ -14,6 +14,8 @@ import { formatCalendarValue, formatInputValue, getDateFormatDelimiter } from '.
 import { useDatePicker } from '../hooks/useDatePicker';
 import { classes } from '../DatePicker.tokens';
 import { useKeyNavigation } from '../hooks/useKeyboardNavigation';
+import { setInitValue } from '../utils/setInitValue';
+import { InputHidden } from '../../../utils/inputHidden';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as viewCSS } from './variations/_view/base';
 import { base as disabledCSS } from './variations/_disabled/base';
@@ -38,6 +40,7 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      name = _ref.name,
       _ref$dividerVariant = _ref.dividerVariant,
       dividerVariant = _ref$dividerVariant === void 0 ? 'dash' : _ref$dividerVariant,
       dividerIcon = _ref.dividerIcon,
@@ -97,6 +100,8 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       rest = _objectWithoutProperties(_ref, _excluded);
     var rangeRef = ref && 'current' in ref ? ref : /*#__PURE__*/createRef();
     var rootRef = useRef(null);
+    var innerRefFirst = useRef(null);
+    var innerRefSecond = useRef(null);
     var _useState = useState(rangeRef === null || rangeRef === void 0 || (_rangeRef$current = rangeRef.current) === null || _rangeRef$current === void 0 ? void 0 : _rangeRef$current.firstTextField()),
       _useState2 = _slicedToArray(_useState, 2),
       firstInputRef = _useState2[0],
@@ -150,6 +155,7 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         valueError: firstValueError,
         valueSuccess: firstValueSuccess,
         inputRef: firstInputRef,
+        name: name,
         onChangeValue: onChangeFirstValue,
         onCommitDate: onCommitFirstDate
       }),
@@ -190,6 +196,23 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         onToggle: handleToggle
       }),
       onKeyDown = _useKeyNavigation.onKeyDown;
+    var setValue = function setValue(e) {
+      var firstElement = innerRefFirst.current;
+      var firstValueInit = String(firstElement.getAttribute('defaultValue'));
+      var secondValueInit = setInitValue(e);
+      handleCommitFirstDate(firstValueInit, true, false);
+      handleCommitSecondDate(secondValueInit, true, false);
+    };
+    useEffect(function () {
+      if (innerRefSecond.current) {
+        innerRefSecond.current.addEventListener('setInitValue', setValue);
+      }
+      return function () {
+        if (innerRefSecond.current) {
+          innerRefSecond.current.removeEventListener('setInitValue', setValue);
+        }
+      };
+    }, [innerRefSecond]);
     var RangeComponent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledRange, {
       ref: rangeRef,
       dividerIcon: dividerIcon,
@@ -216,6 +239,7 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       secondValueSuccess: secondValueSuccess,
       onChangeFirstValue: handleChangeFirstValue,
       onChangeSecondValue: handleChangeSecondValue,
+      name: name,
       onSearchFirstValue: function onSearchFirstValue(_, date) {
         handleCommitFirstDate(String(date), true, false);
         if (!calendarSecondValue || secondValueError) {
@@ -319,7 +343,23 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
           setIsInnerOpen(false);
         }
       }
-    }), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, null, leftHelper));
+    }), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, null, leftHelper), /*#__PURE__*/React.createElement(InputHidden, {
+      name: name,
+      type: "hidden",
+      datatype: "datepicker-double",
+      "data-datepicker": "from",
+      value: inputFirstValue,
+      ref: innerRefFirst,
+      onChange: function onChange() {}
+    }), /*#__PURE__*/React.createElement(InputHidden, {
+      name: name,
+      type: "hidden",
+      datatype: "datepicker-double",
+      "data-datepicker": "to",
+      value: inputSecondValue,
+      ref: innerRefSecond,
+      onChange: function onChange() {}
+    }));
   });
 };
 export var datePickerRangeConfig = {

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

@@ -1,4 +1,4 @@
-var _excluded = ["className", "opened", "label", "labelPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur"];
+var _excluded = ["className", "opened", "label", "labelPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "name", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur", "onChange"];
 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."); }
@@ -15,6 +15,8 @@ import { useDatePicker } from '../hooks/useDatePicker';
 import { classes } from '../DatePicker.tokens';
 import { StyledCalendar } from '../DatePickerBase.styles';
 import { useKeyNavigation } from '../hooks/useKeyboardNavigation';
+import { setInitValue } from '../utils/setInitValue';
+import { InputHidden } from '../../../utils/inputHidden';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as viewCSS } from './variations/_view/base';
 import { base as disabledCSS } from './variations/_disabled/base';
@@ -40,6 +42,7 @@ export var datePickerRoot = function datePickerRoot(Root) {
       readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      name = _ref.name,
       _ref$defaultDate = _ref.defaultDate,
       defaultDate = _ref$defaultDate === void 0 ? '' : _ref$defaultDate,
       valueError = _ref.valueError,
@@ -73,8 +76,10 @@ export var datePickerRoot = function datePickerRoot(Root) {
       onToggle = _ref.onToggle,
       onFocus = _ref.onFocus,
       onBlur = _ref.onBlur,
+      onChange = _ref.onChange,
       rest = _objectWithoutProperties(_ref, _excluded);
     var inputRef = useRef(null);
+    var innerRef = useRef(null);
     var _useState = useState(opened),
       _useState2 = _slicedToArray(_useState, 2),
       isInnerOpen = _useState2[0],
@@ -109,9 +114,11 @@ export var datePickerRoot = function datePickerRoot(Root) {
         valueError: valueError,
         valueSuccess: valueSuccess,
         inputRef: inputRef,
+        name: name,
         onToggle: onToggle,
         onChangeValue: onChangeValue,
-        onCommitDate: onCommitDate
+        onCommitDate: onCommitDate,
+        onChange: onChange
       }),
       datePickerErrorClass = _useDatePicker.datePickerErrorClass,
       datePickerSuccessClass = _useDatePicker.datePickerSuccessClass,
@@ -167,6 +174,20 @@ export var datePickerRoot = function datePickerRoot(Root) {
         lang: lang
       }));
     }, [format, lang]);
+    useEffect(function () {
+      if (innerRef.current) {
+        innerRef.current.addEventListener('setInitValue', function (e) {
+          return handleCommitDate(setInitValue(e), true, false);
+        });
+      }
+      return function () {
+        if (innerRef.current) {
+          innerRef.current.removeEventListener('setInitValue', function (e) {
+            return handleCommitDate(setInitValue(e), true, false);
+          });
+        }
+      };
+    }, [innerRef]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       view: view,
       size: size,
@@ -204,7 +225,14 @@ export var datePickerRoot = function datePickerRoot(Root) {
       onChangeValue: function onChangeValue(date, dateInfo) {
         return handleCommitDate(date, false, true, dateInfo);
       }
-    })), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, null, leftHelper));
+    })), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, null, leftHelper), /*#__PURE__*/React.createElement(InputHidden, {
+      type: "hidden",
+      datatype: "datepicker-single",
+      name: name,
+      value: inputValue,
+      ref: innerRef,
+      onChange: function onChange() {}
+    }));
   });
 };
 export var datePickerConfig = {

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

@@ -16,9 +16,11 @@ export var useDatePicker = function useDatePicker(_ref) {
     valueError = _ref.valueError,
     valueSuccess = _ref.valueSuccess,
     inputRef = _ref.inputRef,
+    name = _ref.name,
     onToggle = _ref.onToggle,
     onChangeValue = _ref.onChangeValue,
-    onCommitDate = _ref.onCommitDate;
+    onCommitDate = _ref.onCommitDate,
+    onChange = _ref.onChange;
   var datePickerErrorClass = valueError ? classes.datePickerError : undefined;
   var datePickerSuccessClass = valueSuccess ? classes.datePickerSuccess : undefined;
   var handleToggle = function handleToggle(opened, event) {
@@ -45,6 +47,12 @@ export var useDatePicker = function useDatePicker(_ref) {
         lang: lang
       }));
       onChangeValue === null || onChangeValue === void 0 || onChangeValue(event, newValue);
+      onChange === null || onChange === void 0 || onChange({
+        target: {
+          value: newValue,
+          name: name
+        }
+      });
       return;
     }
 
@@ -77,6 +85,12 @@ export var useDatePicker = function useDatePicker(_ref) {
       isLengthEqual: isLengthEqual
     }));
     onChangeValue === null || onChangeValue === void 0 || onChangeValue(event, newValue);
+    onChange === null || onChange === void 0 || onChange({
+      target: {
+        value: newValue,
+        name: name
+      }
+    });
   };
   var handleCommitDate = function handleCommitDate(date, applyFormat, isCalendarValue, dateInfo) {
     if (disabled || readOnly) {
@@ -95,6 +109,16 @@ export var useDatePicker = function useDatePicker(_ref) {
         lang: lang
       }));
       onCommitDate === null || onCommitDate === void 0 || onCommitDate(date, false, true, dateInfo);
+      onChange === null || onChange === void 0 || onChange({
+        target: {
+          value: formatInputValue({
+            value: date,
+            format: format,
+            lang: lang
+          }),
+          name: name
+        }
+      });
       return;
     }
     var formatString = applyFormat ? format : undefined;
@@ -109,6 +133,15 @@ export var useDatePicker = function useDatePicker(_ref) {
       lang: lang
     }));
     onCommitDate === null || onCommitDate === void 0 || onCommitDate(newDate, isError, isSuccess);
+    onChange === null || onChange === void 0 || onChange({
+      target: {
+        value: formatInputValue({
+          value: date,
+          format: format
+        }),
+        name: name
+      }
+    });
   };
   return {
     datePickerErrorClass: datePickerErrorClass,

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

@@ -0,0 +1,5 @@
+export var setInitValue = function setInitValue(e) {
+  var item = e.target;
+  var defaultValue = String(item.getAttribute('defaultValue'));
+  return defaultValue;
+};

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { classes } from '../../Dropdown.tokens';
 import { cx } from '../../../../utils';
-import { IconDisclosureRightCentered } from '../../../_Icon';
+import { IconDisclosureRight } from '../../../_Icon';
 import { StyledContentLeft, StyledContentRight, StyledText, Wrapper, DisclosureIconWrapper } from './DropdownItem.styles';
 export var DropdownItem = function DropdownItem(_ref) {
   var item = _ref.item,
@@ -76,7 +76,7 @@ export var DropdownItem = function DropdownItem(_ref) {
     "aria-haspopup": ariaHasPopup,
     "aria-level": ariaLevel,
     "aria-label": ariaLabel
-  }, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(StyledText, null, label), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight), item.items && hasArrow && /*#__PURE__*/React.createElement(DisclosureIconWrapper, null, /*#__PURE__*/React.createElement(IconDisclosureRightCentered, {
+  }, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(StyledText, null, label), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight), item.items && hasArrow && /*#__PURE__*/React.createElement(DisclosureIconWrapper, null, /*#__PURE__*/React.createElement(IconDisclosureRight, {
     size: disclosureIconSize,
     color: "inherit"
   })));

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

@@ -2,12 +2,7 @@ export var classes = {
   selectedSegmentItem: 'selected-segment-item',
   segmentPilled: 'segment-pilled',
   segmentGroupFilledBackground: 'segment-group-filled-background',
-  segmentStretch: 'segment-stretched',
-  segmentVertical: 'segment-vertical',
-  segmentArrowPadding: 'segment-arrow-padding',
-  segmentGroupClipScroll: 'segment-group-clip-scroll',
-  segmentGroupClipShowAll: 'segment-group-clip-show-all',
-  segmentXsSize: 'segment-xs-size'
+  segmentStretch: 'segment-stretched'
 };
 export var tokens = {
   fontFamily: '--plasma-segment-item-font-family',
@@ -22,8 +17,6 @@ export var tokens = {
   groupPilledBorderRadius: '--plasma-segment-group-pilled-border-radius',
   groupWidth: '--plasma-segment-group-width',
   groupHeight: '--plasma-segment-group-height',
-  groupArrowPadding: '--plasma-segment-group-arrow-padding',
-  groupVerticalArrowPadding: '--plasma-segment-group-vertical-arrow-padding',
   groupBackgroundColor: '--plasma-segment-group-background-color',
   groupFilledBackgroundColor: '--plasma-segment-group-filled-background-color',
   itemBorderRadius: '--plasma-segment-item-border-radius',
@@ -31,21 +24,14 @@ export var tokens = {
   itemWidth: '--plasma-segment-item-width',
   itemHeight: '--plasma-segment-item-height',
   itemPadding: '--plasma-segment-item-padding',
-  itemPilledPadding: '--plasma-segment-item-pilled-padding',
   itemMarginLeft: '--plasma-segment-item-margin-left',
-  itemContentPadding: '--plasma-segment-item-content-padding',
-  itemIconMargin: '--plasma-segment-item-content-icon-margin',
   itemColor: '--plasma-segment-item-color',
   itemBackgroundColor: '--plasma-segment-item-background-color',
   itemColorHover: '--plasma-segment-item-color-hover',
   itemBackgroundColorHover: '--plasma-segment-item-background-color-hover',
-  itemAdditionalColor: '--plasma-segment-item-additional-color',
-  itemAdditionalColorHover: '--plasma-segment-item-additional-color-hover',
   itemSelectedColor: '--plasma-segment-item-selected-color',
   itemSelectedBackgroundColor: '--plasma-segment-item-selected-background-color',
   itemSelectedColorHover: '--plasma-segment-item-selected-color-hover',
   itemSelectedBackgroundColorHover: '--plasma-segment-item-selected-background-color-hover',
-  itemSelectedAdditionalColor: '--plasma-segment-item-selected-additional-color',
-  itemSelectedAdditionalColorHover: '--plasma-segment-item-selected-additional-color-hover',
   disabledOpacity: '--plasma-segment-disabled-opacity'
 };