@salutejs/plasma-new-hope 0.149.0-canary.1418.10940499394.0 → 0.149.0-canary.1421.10946935893.0

package/styled-components/cjs/examples/plasma_b2c/components/Form/Form.stories.tsx

@@ -0,0 +1,245 @@
+import { useForm as useReactHookForm, Controller } from 'react-hook-form';
+import React, { useRef } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { WithTheme } from '../../../_helpers';
+import { Button } from '../Button/Button';
+import { TextField } from '../TextField/TextField';
+import { TextArea } from '../TextArea/TextArea';
+import { Checkbox } from '../Checkbox/Checkbox';
+import { Switch } from '../Switch/Switch';
+import { Radiobox } from '../Radiobox/Radiobox';
+import { RadioGroup } from '../../../../components/Radiobox';
+import { Slider } from '../Slider/Slider';
+import { useForm } from '../../../../hooks';
+import { DatePicker, DatePickerRange } from '../DatePicker/DatePicker';
+
+type StoryDropdownProps = {};
+
+const langName = 'language';
+const itemsRadiobox = [
+    { langName, value: 'c', label: 'C', disabled: false },
+    { langName, value: 'cpp', label: 'C++', disabled: false },
+    { langName, value: 'assembly', label: 'Assembly', disabled: false },
+];
+
+const PlasmaForm = () => {
+    const onSubmit = (data) => {
+        console.log(data);
+    };
+
+    const { formRef, formData } = useForm(onSubmit, {
+        textfield: 'textfield',
+        textarea: 'textarea',
+        checkbox: 'checkobox',
+        switch: true,
+        radiobox: 'c',
+        slider: 10,
+        sliderd: [10, 20],
+        datepicker: '12.09.2024',
+        datepickerRange: ['09.09.2024', '12.09.2024'],
+    });
+
+    return (
+        <form onSubmit={formData} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }} ref={formRef}>
+            <TextField name="textfield" placeholder="Textfield" required={false} />
+            <TextArea name="textarea" autoResize placeholder="Textarea" />
+            <Checkbox name="checkbox" label="Checkbox" />
+            <Switch name="switch" label="Switch" labelPosition="after" />
+            <RadioGroup aria-labelledby="radiogroup-title-id">
+                <div id="radiogroup-title-id" style={{ margin: '1rem 0', fontWeight: '600' }}>
+                    Выберите язык программирования для изучения.
+                </div>
+                {itemsRadiobox.map((item) => (
+                    <Radiobox
+                        name="radiobox"
+                        key={item.value}
+                        value={item.value}
+                        label={item.label}
+                        disabled={item.disabled}
+                    />
+                ))}
+            </RadioGroup>
+            <Slider name="slider" label="Slider" type="single" min={0} max={100} />
+            <Slider name="sliderd" label="Slider" type="double" min={0} max={100} />
+            <DatePicker label="DatePicker" name="datepicker" />
+            <DatePickerRange label="DatePicker" name="datepickerRange" />
+            <Button type="submit">Отправить</Button>
+        </form>
+    );
+};
+
+const meta: Meta<StoryDropdownProps> = {
+    title: 'plasma_b2c/Form',
+    decorators: [WithTheme],
+    component: PlasmaForm,
+};
+
+export default meta;
+
+const StoryPlasmaForm = () => {
+    return <PlasmaForm />;
+};
+
+export const DefaultPlasmaForm: StoryObj<StoryDropdownProps> = {
+    render: () => <StoryPlasmaForm />,
+};
+
+const DefaultForm = () => {
+    const onSubmit = (event) => {
+        event.preventDefault();
+
+        const fData = new FormData(event.target);
+
+        for (const p of fData) {
+            const name = p[0];
+            const value = p[1];
+
+            console.log(name, value);
+        }
+    };
+    return (
+        <form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+            <TextField name="textfield" placeholder="Textfield" required={false} />
+            <TextArea name="textarea" autoResize placeholder="Textarea" />
+            <Checkbox name="checkbox" label="Checkbox" />
+            <Switch name="switch" label="Switch" labelPosition="after" />
+            <RadioGroup aria-labelledby="radiogroup-title-id">
+                <div id="radiogroup-title-id" style={{ margin: '1rem 0', fontWeight: '600' }}>
+                    Выберите язык программирования для изучения.
+                </div>
+                {itemsRadiobox.map((item) => (
+                    <Radiobox
+                        name="radiobox"
+                        key={item.value}
+                        value={item.value}
+                        label={item.label}
+                        disabled={item.disabled}
+                    />
+                ))}
+            </RadioGroup>
+            <Slider name="slider" label="Slider" type="single" min={0} max={100} />
+            <Slider name="sliderd" label="Slider" type="double" min={0} max={100} />
+            <DatePicker label="DatePicker" name="datepicker" />
+            <DatePickerRange label="DatePicker" name="datepickerRange" />
+            <Button type="submit">Отправить</Button>
+        </form>
+    );
+};
+
+const StoryDefaultForm = () => {
+    return <DefaultForm />;
+};
+
+export const FormDefault: StoryObj<StoryDropdownProps> = {
+    render: () => <StoryDefaultForm />,
+};
+
+const DefaultUseForm = () => {
+    const { register, handleSubmit } = useReactHookForm({
+        defaultValues: {
+            textfield: 'John Doe',
+            textarea: 'Default description',
+            checkbox: true,
+            switch: true,
+            radiobox: 'c',
+            slider: 10,
+        },
+    });
+    const onSubmit = (data) => {
+        console.log(data);
+    };
+
+    return (
+        <form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+            <TextField {...register('textfield')} placeholder="Textfield" required={false} />
+            <TextArea {...register('textarea')} autoResize placeholder="Textarea" />
+            <Checkbox {...register('checkbox')} label="Checkbox" />
+            <Switch {...register('switch')} label="Switch" labelPosition="after" />
+            <RadioGroup aria-labelledby="radiogroup-title-id">
+                <div id="radiogroup-title-id" style={{ margin: '1rem 0', fontWeight: '600' }}>
+                    Выберите язык программирования для изучения.
+                </div>
+                {itemsRadiobox.map((item) => (
+                    <Radiobox
+                        {...register('radiobox')}
+                        key={item.value}
+                        value={item.value}
+                        label={item.label}
+                        disabled={item.disabled}
+                    />
+                ))}
+            </RadioGroup>
+            <Button type="submit">Отправить</Button>
+        </form>
+    );
+};
+
+const StoryHookForm = () => {
+    return <DefaultUseForm />;
+};
+
+export const UseHookForm: StoryObj<StoryDropdownProps> = {
+    render: () => <StoryHookForm />,
+};
+
+const DefaultUseFormController = () => {
+    const { control, handleSubmit } = useReactHookForm({
+        defaultValues: {
+            textfield: 'John Doe',
+            textarea: 'Default description',
+            checkbox: true,
+            switch: true,
+            radiobox: 'c',
+            slider: 10,
+            sliderd: [10, 20],
+        },
+    });
+    const onSubmit = (data) => {
+        console.log(data);
+    };
+
+    return (
+        <form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+            <Controller
+                name="textfield"
+                control={control}
+                render={({ field }) => <TextField {...field} label="TextField" />}
+            />
+            <Controller
+                name="textarea"
+                control={control}
+                render={({ field }) => <TextArea {...field} label="TextArea" />}
+            />
+            <Controller
+                name="checkbox"
+                control={control}
+                render={({ field }) => <Checkbox {...field} checked={field.value} label="Checkbox" />}
+            />
+            <Controller
+                name="switch"
+                control={control}
+                render={({ field }) => <Switch {...field} checked={field.value} labelPosition="after" label="Switch" />}
+            />
+            <Controller
+                name="slider"
+                control={control}
+                render={({ field }) => <Slider {...field} type="single" label="Slider" min={0} max={100} />}
+            />
+            <Controller
+                name="sliderd"
+                control={control}
+                render={({ field }) => <Slider {...field} type="double" label="Slider" min={0} max={100} />}
+            />
+            <Button type="submit">Отправить</Button>
+        </form>
+    );
+};
+
+const StoryHookFormController = () => {
+    return <DefaultUseFormController />;
+};
+
+export const UseHookFormController: StoryObj<StoryDropdownProps> = {
+    render: () => <StoryHookFormController />,
+};

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

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "useForceUpdate", {
     return _useForceUpdate.useForceUpdate;
   }
 });
+Object.defineProperty(exports, "useForm", {
+  enumerable: true,
+  get: function get() {
+    return _useForm.useForm;
+  }
+});
 Object.defineProperty(exports, "useIsomorphicLayoutEffect", {
   enumerable: true,
   get: function get() {
@@ -51,4 +57,5 @@ var _usePreviousValue = /*#__PURE__*/require("./usePreviousValue");
 var _useForceUpdate = /*#__PURE__*/require("./useForceUpdate");
 var _useDidMountEffect = /*#__PURE__*/require("./useDidMountEffect");
 var _useOutsideClick = /*#__PURE__*/require("./useOutsideClick");
-var _useIsomorphicLayoutEffect = /*#__PURE__*/require("./useIsomorphicLayoutEffect");
+var _useIsomorphicLayoutEffect = /*#__PURE__*/require("./useIsomorphicLayoutEffect");
+var _useForm = /*#__PURE__*/require("./useForm");

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/index.js

@@ -629,15 +629,4 @@ Object.keys(_Editable).forEach(function (key) {
       return _Editable[key];
     }
   });
-});
-var _Mask = /*#__PURE__*/require("./components/Mask");
-Object.keys(_Mask).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Mask[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Mask[key];
-    }
-  });
 });

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,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputHidden = void 0;
+var _react = /*#__PURE__*/require("@linaria/react");
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var InputHidden = exports.InputHidden = /*#__PURE__*/_react.styled.input(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    visibility: hidden;\n    width: 0;\n    height: 0;\n    opacity: 0;\n    margin: 0;\n    padding: 0;\n    border: none;\n"])));

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/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],
@@ -190,6 +195,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 +238,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 +342,21 @@ 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
+    }), /*#__PURE__*/React.createElement(InputHidden, {
+      name: name,
+      type: "hidden",
+      datatype: "datepicker-double",
+      "data-datepicker": "to",
+      value: inputSecondValue,
+      ref: innerRefSecond
+    }));
   });
 };
 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"];
 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,
@@ -75,6 +78,7 @@ export var datePickerRoot = function datePickerRoot(Root) {
       onBlur = _ref.onBlur,
       rest = _objectWithoutProperties(_ref, _excluded);
     var inputRef = useRef(null);
+    var innerRef = useRef(null);
     var _useState = useState(opened),
       _useState2 = _slicedToArray(_useState, 2),
       isInnerOpen = _useState2[0],
@@ -167,6 +171,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 +222,13 @@ 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
+    }));
   });
 };
 export var datePickerConfig = {

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;
+};