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

package/styled-components/es/examples/plasma_web/components/Segment/Segment.stories.tsx

@@ -1,55 +1,23 @@
 import React from 'react';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
-import { disableProps } from '@salutejs/plasma-sb-utils';
 
 import { segmentGroupConfig } from '../../../../components/Segment';
 import { mergeConfig } from '../../../../engines';
 import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 import { SegmentProvider } from '../../../../components/Segment/SegmentProvider';
-import { Counter } from '../Counter/Counter';
-import { IconMic } from '../../../../components/_Icon';
 
 import { config } from './SegmentGroup.config';
 import { SegmentItem, SegmentGroup } from './Segment';
 
-const contentLeftOptions = ['none', 'icon'];
-const contentRightOptions = ['none', 'text', 'counter', 'icon'];
+const segmentItemViews = ['clear', 'default', 'secondary'];
 
-const segmentItemViews = ['default', 'secondary'];
-type Size = typeof sizes[number];
-
-type CustomStoryProps = {
-    itemQuantity: number;
-    contentLeft: string;
-    contentRight: string;
-    segmentItemView?: 'default' | 'secondary';
-};
-
-type StorySegmentProps = ComponentProps<typeof SegmentGroup> & CustomStoryProps;
-
-const sizes = ['xs', 's', 'm', 'l'] as const;
-
-const getContentLeft = (contentLeftOption: string, size: Size) => {
-    const iconSize = size === 'xs' ? 'xs' : 's';
-    return contentLeftOption === 'icon' ? <IconMic size={iconSize} color="inherit" /> : undefined;
+type CustomStorySegmentProps = {
+    segmentItemView?: string;
+    contentItemsNumber?: number;
 };
 
-const getContentRight = (contentRightOption: string, size: Size) => {
-    const iconSize = size === 'xs' ? 'xs' : 's';
-    const counterSize = size === 'xs' ? 'xxs' : 'xs';
-
-    switch (contentRightOption) {
-        case 'icon':
-            return <IconMic size={iconSize} color="inherit" />;
-        case 'counter':
-            return <Counter size={counterSize} count={1} view="positive" />;
-        case 'text':
-            return <div style={{ textOverflow: 'ellipsis', overflow: 'hidden' }}>Text</div>;
-        default:
-            return undefined;
-    }
-};
+type StorySegmentProps = ComponentProps<typeof SegmentGroup> & CustomStorySegmentProps;
 
 const meta: Meta<StorySegmentProps> = {
     title: 'plasma_web/Segment',
@@ -57,19 +25,6 @@ const meta: Meta<StorySegmentProps> = {
     component: SegmentGroup,
     argTypes: {
         ...argTypesFromConfig(mergeConfig(segmentGroupConfig, config)),
-        ...disableProps(['filledBackground', 'view', 'selectionMode']),
-        stretch: {
-            control: {
-                type: 'boolean',
-            },
-            if: { arg: 'orientation', eq: 'horizontal' },
-        },
-        orientation: {
-            options: ['horizontal', 'vertical'],
-            control: {
-                type: 'select',
-            },
-        },
         selectionMode: {
             options: ['single', 'multiple'],
             control: {
@@ -82,91 +37,59 @@ const meta: Meta<StorySegmentProps> = {
                 type: 'select',
             },
         },
-        contentLeft: {
-            options: contentLeftOptions,
-            control: {
-                type: 'select',
-            },
-        },
-        contentRight: {
-            options: contentRightOptions,
-            control: {
-                type: 'select',
-            },
-        },
     },
 };
 
 export default meta;
 
-const StoryDefault = (props: StorySegmentProps) => {
-    const {
-        disabled,
-        itemQuantity,
-        size,
-        stretch,
-        orientation,
-
-        segmentItemView,
-        contentLeft: contentLeftOption,
-        contentRight: contentRightOption,
-        ...args
-    } = props;
-    const items = Array(itemQuantity).fill(0);
+const StoryDefault = ({ contentItemsNumber, selectionMode, segmentItemView, view, ...args }: StorySegmentProps) => {
+    const contentItems = Array(contentItemsNumber).fill(0);
 
     return (
-        <SegmentProvider>
-            <SegmentGroup stretch={stretch} disabled={disabled} size={size} orientation={orientation} {...args}>
-                {items.map((_, i) => (
-                    <SegmentItem
-                        view={segmentItemView}
-                        label={`Label ${i}`}
-                        value={`label_${i}`}
-                        size={size}
-                        key={`label_${i}`}
-                        contentLeft={getContentLeft(contentLeftOption, size)}
-                        contentRight={getContentRight(contentRightOption, size)}
-                        {...args}
-                    >
-                        {`Label${i + 1}`}
-                    </SegmentItem>
-                ))}
-            </SegmentGroup>
-        </SegmentProvider>
+        <>
+            <h3>Segment with auto width</h3>
+            <SegmentProvider>
+                <SegmentGroup view={view} selectionMode={selectionMode} {...args}>
+                    {contentItems.map((_, i) => (
+                        <SegmentItem
+                            view={segmentItemView}
+                            label={`Label ${i}`}
+                            value={`label_${i}`}
+                            key={`label_${i}`}
+                            {...args}
+                        />
+                    ))}
+                </SegmentGroup>
+            </SegmentProvider>
+
+            <h3>Segment with fixed width</h3>
+            <SegmentProvider>
+                <SegmentGroup view={view} style={{ width: '28.5rem' }} selectionMode={selectionMode} {...args}>
+                    {contentItems.map((_, i) => (
+                        <SegmentItem
+                            view={segmentItemView}
+                            label={`Label ${i}`}
+                            value={`label_${i}`}
+                            key={`label_${i}`}
+                            {...args}
+                        />
+                    ))}
+                </SegmentGroup>
+            </SegmentProvider>
+        </>
     );
 };
 
 export const Default: StoryObj<StorySegmentProps> = {
     args: {
-        itemQuantity: 8,
+        view: 'clear',
         size: 'xs',
-        segmentItemView: 'default',
+        segmentItemView: 'clear',
         selectionMode: 'single',
+        contentItemsNumber: 11,
         pilled: false,
         filledBackground: false,
-        hasBackground: false,
         disabled: false,
-        stretch: false,
-        orientation: 'horizontal',
-        contentRight: 'none',
-        contentLeft: 'none',
-    },
-    argTypes: {
-        stretch: {
-            control: {
-                type: 'boolean',
-            },
-            if: { arg: 'orientation', eq: 'horizontal' },
-        },
-        size: {
-            options: sizes,
-            control: {
-                type: 'select',
-            },
-        },
-        ...disableProps(['filledBackground', 'view', 'selectionMode', 'vertical']),
-    },
-    render: (args: StorySegmentProps) => {
-        return <StoryDefault {...args} />;
     },
+    render: (args) => <StoryDefault {...args} />,
 };

package/styled-components/es/examples/plasma_web/components/Segment/SegmentGroup.config.js

@@ -7,29 +7,23 @@ export var config = {
   },
   variations: {
     view: {
-      clear: /*#__PURE__*/css(["", ":tranparent;", ":var(--plasma-colors-button-focused);"], segmentTokens.groupBackgroundColor, segmentTokens.outlineFocusColor),
-      filled: /*#__PURE__*/css(["", ":transparent;", ":var(--plasma-colors-button-focused);"], segmentTokens.groupBackgroundColor, segmentTokens.outlineFocusColor)
+      clear: /*#__PURE__*/css(["", ":var(--text-secondary);", ":tranparent;", ":var(--plasma-colors-button-focused);"], segmentTokens.arrowColor, segmentTokens.groupBackgroundColor, segmentTokens.outlineFocusColor),
+      filled: /*#__PURE__*/css(["", ":var(--text-secondary);", ":transparent;", ":var(--plasma-colors-button-focused);"], segmentTokens.arrowColor, segmentTokens.groupBackgroundColor, segmentTokens.outlineFocusColor)
     },
     size: {
-      xs: /*#__PURE__*/css(["", ":0.625rem;", ":1.125rem;", ":auto;", ":auto;"], segmentTokens.groupBorderRadius, segmentTokens.groupPilledBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight),
-      s: /*#__PURE__*/css(["", ":0.75rem;", ":1.375rem;", ":auto;", ":auto;"], segmentTokens.groupBorderRadius, segmentTokens.groupPilledBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight),
-      m: /*#__PURE__*/css(["", ":0.875rem;", ":1.625rem;", ":auto;", ":auto;"], segmentTokens.groupBorderRadius, segmentTokens.groupPilledBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight),
-      l: /*#__PURE__*/css(["", ":1rem;", ":1.875rem;", ":auto;", ":auto;"], segmentTokens.groupBorderRadius, segmentTokens.groupPilledBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight)
+      xs: /*#__PURE__*/css(["", ":0.5rem;", ":auto;", ":auto;"], segmentTokens.groupBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight),
+      s: /*#__PURE__*/css(["", ":0.625rem;", ":auto;", ":auto;"], segmentTokens.groupBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight),
+      m: /*#__PURE__*/css(["", ":0.75rem;", ":auto;", ":auto;"], segmentTokens.groupBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight),
+      l: /*#__PURE__*/css(["", ":0.75rem;", ":auto;", ":auto;"], segmentTokens.groupBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight)
     },
     disabled: {
       "true": /*#__PURE__*/css(["", ":0.4;"], segmentTokens.disabledOpacity)
     },
     pilled: {
-      "true": /*#__PURE__*/css([""])
-    },
-    stretch: {
-      "true": /*#__PURE__*/css([""])
+      "true": /*#__PURE__*/css(["", ":1.75rem;"], segmentTokens.groupPilledBorderRadius)
     },
     filledBackground: {
       "true": /*#__PURE__*/css(["", ":var(--plasma-colors-surface-liquid02);"], segmentTokens.groupFilledBackgroundColor)
-    },
-    orientation: {
-      vertical: /*#__PURE__*/css([""])
     }
   }
 };

package/styled-components/es/examples/plasma_web/components/Segment/SegmentItem.config.js

@@ -7,21 +7,21 @@ export var config = {
   },
   variations: {
     view: {
-      clear: /*#__PURE__*/css(["", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-tertiary);", ":var(--text-secondary);", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--plasma-colors-button-focused);"], segmentTokens.itemColor, segmentTokens.itemBackgroundColor, segmentTokens.itemColorHover, segmentTokens.itemBackgroundColorHover, segmentTokens.itemAdditionalColor, segmentTokens.itemAdditionalColorHover, segmentTokens.itemSelectedColor, segmentTokens.itemSelectedBackgroundColor, segmentTokens.itemSelectedColorHover, segmentTokens.itemSelectedBackgroundColorHover, segmentTokens.itemSelectedAdditionalColor, segmentTokens.itemSelectedAdditionalColorHover, segmentTokens.outlineFocusColor),
-      secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--plasma-colors-button-focused);"], segmentTokens.itemColor, segmentTokens.itemBackgroundColor, segmentTokens.itemColorHover, segmentTokens.itemBackgroundColorHover, segmentTokens.itemAdditionalColor, segmentTokens.itemAdditionalColorHover, segmentTokens.itemSelectedColor, segmentTokens.itemSelectedBackgroundColor, segmentTokens.itemSelectedColorHover, segmentTokens.itemSelectedBackgroundColorHover, segmentTokens.itemSelectedAdditionalColor, segmentTokens.itemSelectedAdditionalColorHover, segmentTokens.outlineFocusColor),
-      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-secondary);", ":var(--inverse-text-secondary);", ":var(--plasma-colors-button-focused);"], segmentTokens.itemColor, segmentTokens.itemBackgroundColor, segmentTokens.itemColorHover, segmentTokens.itemBackgroundColorHover, segmentTokens.itemAdditionalColor, segmentTokens.itemAdditionalColorHover, segmentTokens.itemSelectedColor, segmentTokens.itemSelectedBackgroundColor, segmentTokens.itemSelectedColorHover, segmentTokens.itemSelectedBackgroundColorHover, segmentTokens.itemSelectedAdditionalColor, segmentTokens.itemSelectedAdditionalColorHover, segmentTokens.outlineFocusColor)
+      clear: /*#__PURE__*/css(["", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--plasma-colors-button-focused);"], segmentTokens.itemColor, segmentTokens.itemBackgroundColor, segmentTokens.itemColorHover, segmentTokens.itemBackgroundColorHover, segmentTokens.itemSelectedColor, segmentTokens.itemSelectedBackgroundColor, segmentTokens.itemSelectedColorHover, segmentTokens.itemSelectedBackgroundColorHover, segmentTokens.outlineFocusColor),
+      secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--plasma-colors-button-focused);"], segmentTokens.itemColor, segmentTokens.itemBackgroundColor, segmentTokens.itemColorHover, segmentTokens.itemBackgroundColorHover, segmentTokens.itemSelectedColor, segmentTokens.itemSelectedBackgroundColor, segmentTokens.itemSelectedColorHover, segmentTokens.itemSelectedBackgroundColorHover, segmentTokens.outlineFocusColor),
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--plasma-colors-button-focused);"], segmentTokens.itemColor, segmentTokens.itemBackgroundColor, segmentTokens.itemColorHover, segmentTokens.itemBackgroundColorHover, segmentTokens.itemSelectedColor, segmentTokens.itemSelectedBackgroundColor, segmentTokens.itemSelectedColorHover, segmentTokens.itemSelectedBackgroundColorHover, segmentTokens.outlineFocusColor)
     },
     size: {
-      xs: /*#__PURE__*/css(["", ":0.5rem;", ":auto;", ":2rem;", ":0.5rem 0.75rem;", ":0.5rem 0.5rem;", ":0.0625rem 0.125rem;", ":0.125rem;", ":0;", ":var(--plasma-typo-body-xs-bold-font-family);", ":var(--plasma-typo-body-xs-bold-font-size);", ":var(--plasma-typo-body-xs-bold-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-bold-letter-spacing);", ":var(--plasma-typo-body-xs-bold-line-height);"], segmentTokens.itemBorderRadius, segmentTokens.itemWidth, segmentTokens.itemHeight, segmentTokens.itemPadding, segmentTokens.itemPilledPadding, segmentTokens.itemContentPadding, segmentTokens.itemIconMargin, segmentTokens.itemMarginLeft, segmentTokens.fontFamily, segmentTokens.fontSize, segmentTokens.fontStyle, segmentTokens.fontWeight, segmentTokens.letterSpacing, segmentTokens.lineHeight),
-      s: /*#__PURE__*/css(["", ":0.625rem;", ":auto;", ":2.5rem;", ":0.5rem 1rem;", ":0.5rem 0.5rem;", ":0.1875rem 0.125rem;", ":0.125rem;", ":0rem;", ":var(--plasma-typo-body-s-bold-font-family);", ":var(--plasma-typo-body-s-bold-font-size);", ":var(--plasma-typo-body-s-bold-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-bold-letter-spacing);", ":var(--plasma-typo-body-s-bold-line-height);"], segmentTokens.itemBorderRadius, segmentTokens.itemWidth, segmentTokens.itemHeight, segmentTokens.itemPadding, segmentTokens.itemPilledPadding, segmentTokens.itemContentPadding, segmentTokens.itemIconMargin, segmentTokens.itemMarginLeft, segmentTokens.fontFamily, segmentTokens.fontSize, segmentTokens.fontStyle, segmentTokens.fontWeight, segmentTokens.letterSpacing, segmentTokens.lineHeight),
-      m: /*#__PURE__*/css(["", ":0.75rem;", ":auto;", ":3rem;", ":0.75rem 1.25rem;", ":0.75rem 0.75rem;", ":0.125rem;", ":0.25rem;", ":0rem;", ":var(--plasma-typo-body-m-bold-font-family);", ":var(--plasma-typo-body-m-bold-font-size);", ":var(--plasma-typo-body-m-bold-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-bold-letter-spacing);", ":var(--plasma-typo-body-m-bold-line-height);"], segmentTokens.itemBorderRadius, segmentTokens.itemWidth, segmentTokens.itemHeight, segmentTokens.itemPadding, segmentTokens.itemPilledPadding, segmentTokens.itemContentPadding, segmentTokens.itemIconMargin, segmentTokens.itemMarginLeft, segmentTokens.fontFamily, segmentTokens.fontSize, segmentTokens.fontStyle, segmentTokens.fontWeight, segmentTokens.letterSpacing, segmentTokens.lineHeight),
-      l: /*#__PURE__*/css(["", ":0.875rem;", ":auto;", ":3.5rem;", ":1rem 1.5rem;", ":1rem 1rem;", ":0.0625rem 0.125rem;", ":0.375rem;", ":0;", ":var(--plasma-typo-body-l-bold-font-family);", ":var(--plasma-typo-body-l-bold-font-size);", ":var(--plasma-typo-body-l-bold-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-bold-letter-spacing);", ":var(--plasma-typo-body-l-bold-line-height);"], segmentTokens.itemBorderRadius, segmentTokens.itemWidth, segmentTokens.itemHeight, segmentTokens.itemPadding, segmentTokens.itemPilledPadding, segmentTokens.itemContentPadding, segmentTokens.itemIconMargin, segmentTokens.itemMarginLeft, segmentTokens.fontFamily, segmentTokens.fontSize, segmentTokens.fontStyle, segmentTokens.fontWeight, segmentTokens.letterSpacing, segmentTokens.lineHeight)
+      xs: /*#__PURE__*/css(["", ":0.375rem;", ":auto;", ":1.5rem;", ":0 0.625rem;", ":0.125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], segmentTokens.itemBorderRadius, segmentTokens.itemWidth, segmentTokens.itemHeight, segmentTokens.itemPadding, segmentTokens.itemMarginLeft, segmentTokens.fontFamily, segmentTokens.fontSize, segmentTokens.fontStyle, segmentTokens.fontWeight, segmentTokens.letterSpacing, segmentTokens.lineHeight),
+      s: /*#__PURE__*/css(["", ":0.5rem;", ":auto;", ":2rem;", ":0 0.75rem;", ":0.125rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], segmentTokens.itemBorderRadius, segmentTokens.itemWidth, segmentTokens.itemHeight, segmentTokens.itemPadding, segmentTokens.itemMarginLeft, segmentTokens.fontFamily, segmentTokens.fontSize, segmentTokens.fontStyle, segmentTokens.fontWeight, segmentTokens.letterSpacing, segmentTokens.lineHeight),
+      m: /*#__PURE__*/css(["", ":0.625rem;", ":auto;", ":2.5rem;", ":0 0.875rem;", ":0.125rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], segmentTokens.itemBorderRadius, segmentTokens.itemWidth, segmentTokens.itemHeight, segmentTokens.itemPadding, segmentTokens.itemMarginLeft, segmentTokens.fontFamily, segmentTokens.fontSize, segmentTokens.fontStyle, segmentTokens.fontWeight, segmentTokens.letterSpacing, segmentTokens.lineHeight),
+      l: /*#__PURE__*/css(["", ":0.75rem;", ":auto;", ":3rem;", ":0 1rem;", ":0.125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], segmentTokens.itemBorderRadius, segmentTokens.itemWidth, segmentTokens.itemHeight, segmentTokens.itemPadding, segmentTokens.itemMarginLeft, segmentTokens.fontFamily, segmentTokens.fontSize, segmentTokens.fontStyle, segmentTokens.fontWeight, segmentTokens.letterSpacing, segmentTokens.lineHeight)
     },
     disabled: {
       "true": /*#__PURE__*/css(["", ":0.4;"], segmentTokens.disabledOpacity)
     },
     pilled: {
-      "true": /*#__PURE__*/css(["", ":1.75rem;"], segmentTokens.itemPilledBorderRadius)
+      "true": /*#__PURE__*/css(["", ":1.5rem;"], segmentTokens.itemPilledBorderRadius)
     }
   }
 };

package/styled-components/es/examples/plasma_web/components/Tooltip/Tooltip.stories.tsx

@@ -5,7 +5,7 @@ import type { StoryObj, Meta } from '@storybook/react';
 import { WithTheme } from '../../../_helpers';
 import { Button } from '../Button/Button';
 import { PopoverPlacement } from '../Popover/Popover';
-import { IconDisclosureRightCentered } from '../../../../components/_Icon';
+import { IconDisclosureRight } from '../../../../components/_Icon';
 
 import { Tooltip } from './Tooltip';
 import type { TooltipProps } from './Tooltip';
@@ -166,7 +166,7 @@ const StoryLive = (args: TooltipProps) => {
                             aria-describedby="example-tooltip-firstname"
                         />
                     }
-                    contentLeft={<IconDisclosureRightCentered size="xs" />}
+                    contentLeft={<IconDisclosureRight size="xs" />}
                     {...args}
                     id="example-tooltip-firstname"
                     text={text}

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

@@ -4,4 +4,5 @@ export { usePreviousValue } from './usePreviousValue';
 export { useForceUpdate } from './useForceUpdate';
 export { useDidMountEffect } from './useDidMountEffect';
 export { useOutsideClick } from './useOutsideClick';
-export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+export { useForm } from './useForm';

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

@@ -0,0 +1,128 @@
+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; }
+import React, { useEffect } from 'react';
+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 !== '';
+};
+export var useForm = function useForm(onSubmit, defaultValues) {
+  var formRef = /*#__PURE__*/React.createRef();
+  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/es/types/FormType.js

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

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

@@ -3,6 +3,7 @@ export { extractTextFrom } from './extractTextFrom';
 export { getSizeValueFromProp } from './getSizeValueFromProp';
 export { IS_REACT_18, safeUseId } from './react';
 export { isNumber } from './isNumber';
+export { mergeRefs, setRefList } from './setRefList';
 export { isEmpty } from './isEmpty';
 import * as _constants from './constants';
 export { _constants as constants };

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

@@ -0,0 +1,4 @@
+import styled from 'styled-components';
+export var InputHidden = /*#__PURE__*/styled.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/es/utils/setRefList.js

@@ -0,0 +1,20 @@
+export 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));
+  };
+}
+export 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/types/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAU/C,OAAO,KAAK,EAAE,WAAW,EAA0B,MAAM,gBAAgB,CAAC;AAa1E,eAAO,MAAM,UAAU,SAAU,UAAU,iBAAiB,EAAE,WAAW,CAAC,uGA0EpE,CAAC;AAEP,eAAO,MAAM,YAAY;;;mBA5EQ,UAAU,iBAAiB,EAAE,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4GzE,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAU/C,OAAO,KAAK,EAAE,WAAW,EAA0B,MAAM,gBAAgB,CAAC;AAa1E,eAAO,MAAM,UAAU,SAAU,UAAU,iBAAiB,EAAE,WAAW,CAAC,uGAyEpE,CAAC;AAEP,eAAO,MAAM,YAAY;;;mBA3EQ,UAAU,iBAAiB,EAAE,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2GzE,CAAC"}

package/types/components/DatePicker/DatePickerBase.types.d.ts

@@ -97,8 +97,15 @@ export declare type UseDatePickerProps = {
     valueError?: boolean;
     valueSuccess?: boolean;
     inputRef?: MutableRefObject<HTMLInputElement | null>;
+    name?: string;
     onToggle?: (isOpen: boolean, event: SyntheticEvent | Event) => void;
     onChangeValue?: (event: ChangeEvent<HTMLInputElement>, value?: string) => void;
     onCommitDate?: (value: Date | string, error?: boolean, success?: boolean, dateInfo?: DateInfo) => void;
+    onChange?: (event: {
+        target: {
+            value?: string;
+            name?: string;
+        };
+    }) => void;
 };
 //# sourceMappingURL=DatePickerBase.types.d.ts.map

package/types/components/DatePicker/DatePickerBase.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerBase.types.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePickerBase.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"DatePickerBase.types.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePickerBase.types.ts"],"names":[],"mappings":"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"}

package/types/components/DatePicker/RangeDate/RangeDate.d.ts

@@ -5,6 +5,7 @@ import type { DatePickerRangeProps } from './RangeDate.types';
 export declare const datePickerRangeRoot: (Root: RootProps<HTMLDivElement, Omit<DatePickerRangeProps, 'opened' | 'defaultValue' | 'onChangeValue'>>) => React.ForwardRefExoticComponent<import("../DatePickerBase.types").DatePickerdVariationProps & {
     defaultFirstDate?: Date | undefined;
     defaultSecondDate?: Date | undefined;
+    name?: string | undefined;
     onCommitFirstDate?: ((value: string | Date, error?: boolean | undefined, success?: boolean | undefined, dateInfo?: import("../../Calendar/Calendar.types").DateInfo | undefined) => void) | undefined;
     onCommitSecondDate?: ((value: string | Date, error?: boolean | undefined, success?: boolean | undefined, dateInfo?: import("../../Calendar/Calendar.types").DateInfo | undefined) => void) | undefined;
 } & {
@@ -48,6 +49,7 @@ export declare const datePickerRangeConfig: {
     layout: (Root: RootProps<HTMLDivElement, Omit<DatePickerRangeProps, 'opened' | 'defaultValue' | 'onChangeValue'>>) => React.ForwardRefExoticComponent<import("../DatePickerBase.types").DatePickerdVariationProps & {
         defaultFirstDate?: Date | undefined;
         defaultSecondDate?: Date | undefined;
+        name?: string | undefined;
         onCommitFirstDate?: ((value: string | Date, error?: boolean | undefined, success?: boolean | undefined, dateInfo?: import("../../Calendar/Calendar.types").DateInfo | undefined) => void) | undefined;
         onCommitSecondDate?: ((value: string | Date, error?: boolean | undefined, success?: boolean | undefined, dateInfo?: import("../../Calendar/Calendar.types").DateInfo | undefined) => void) | undefined;
     } & {

package/types/components/DatePicker/RangeDate/RangeDate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RangeDate.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/RangeDate/RangeDate.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIlD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAI9D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAQ9D,eAAO,MAAM,mBAAmB,SACtB,UAAU,cAAc,EAAE,KAAK,oBAAoB,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+EAySvG,CAAC;AAEN,eAAO,MAAM,qBAAqB;;;mBA3SxB,UAAU,cAAc,EAAE,KAAK,oBAAoB,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoU3G,CAAC"}
+{"version":3,"file":"RangeDate.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/RangeDate/RangeDate.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIlD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAM9D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAQ9D,eAAO,MAAM,mBAAmB,SACtB,UAAU,cAAc,EAAE,KAAK,oBAAoB,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+EAuVvG,CAAC;AAEN,eAAO,MAAM,qBAAqB;;;mBAzVxB,UAAU,cAAc,EAAE,KAAK,oBAAoB,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkX3G,CAAC"}

package/types/components/DatePicker/RangeDate/RangeDate.types.d.ts

@@ -14,6 +14,10 @@ export declare type DatePickerRangeFieldProps = {
      * Значение по умолчанию для второго поля.
      */
     defaultSecondDate?: Date;
+    /**
+     * Название для формы
+     */
+    name?: string;
     /**
      * Callback по нажатию Enter в поле ввода или выборе дня на календаре для первой даты.
      */

package/types/components/DatePicker/RangeDate/RangeDate.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RangeDate.types.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/RangeDate/RangeDate.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,KAAK,EAAE,uBAAuB,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAClG,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAE9D,oBAAY,wBAAwB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAExD,aAAK,cAAc,GAAG,IAAI,CACtB,eAAe,EACf,YAAY,GAAG,aAAa,GAAG,oBAAoB,GAAG,qBAAqB,CAC9E,CAAC;AAEF,oBAAY,yBAAyB,GAAG;IACpC;;OAEG;IACH,gBAAgB,CAAC,EAAE,IAAI,CAAC;IACxB;;OAEG;IACH,iBAAiB,CAAC,EAAE,IAAI,CAAC;IACzB;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC5G;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAC;CAChH,GAAG,cAAc,CAAC;AAEnB,oBAAY,4BAA4B,GAAG,IAAI,CAAC,sBAAsB,EAAE,WAAW,CAAC,GAAG;IACnF;;;;OAIG;IACH,SAAS,CAAC,EAAE,wBAAwB,GAAG,KAAK,CAAC,wBAAwB,CAAC,CAAC;IACvE;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,oBAAY,oBAAoB,GAAG,yBAAyB,GACxD,yBAAyB,GACzB,uBAAuB,GACvB,4BAA4B,GAC5B,cAAc,CAAC,cAAc,CAAC,CAAC"}
+{"version":3,"file":"RangeDate.types.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/RangeDate/RangeDate.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,KAAK,EAAE,uBAAuB,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAClG,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAE9D,oBAAY,wBAAwB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAExD,aAAK,cAAc,GAAG,IAAI,CACtB,eAAe,EACf,YAAY,GAAG,aAAa,GAAG,oBAAoB,GAAG,qBAAqB,CAC9E,CAAC;AAEF,oBAAY,yBAAyB,GAAG;IACpC;;OAEG;IACH,gBAAgB,CAAC,EAAE,IAAI,CAAC;IACxB;;OAEG;IACH,iBAAiB,CAAC,EAAE,IAAI,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC5G;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAC;CAChH,GAAG,cAAc,CAAC;AAEnB,oBAAY,4BAA4B,GAAG,IAAI,CAAC,sBAAsB,EAAE,WAAW,CAAC,GAAG;IACnF;;;;OAIG;IACH,SAAS,CAAC,EAAE,wBAAwB,GAAG,KAAK,CAAC,wBAAwB,CAAC,CAAC;IACvE;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,oBAAY,oBAAoB,GAAG,yBAAyB,GACxD,yBAAyB,GACzB,uBAAuB,GACvB,4BAA4B,GAC5B,cAAc,CAAC,cAAc,CAAC,CAAC"}

package/types/components/DatePicker/SingleDate/SingleDate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SingleDate.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/SingleDate/SingleDate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAEpF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAQlD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAO1D,eAAO,MAAM,cAAc,SACjB,UAAU,cAAc,EAAE,KAAK,eAAe,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC,gXAgLlG,CAAC;AAEN,eAAO,MAAM,gBAAgB;;;mBAlLnB,UAAU,cAAc,EAAE,KAAK,eAAe,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;CA2MtG,CAAC"}
+{"version":3,"file":"SingleDate.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/SingleDate/SingleDate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAEpF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAUlD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAO1D,eAAO,MAAM,cAAc,SACjB,UAAU,cAAc,EAAE,KAAK,eAAe,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC,gXA6MlG,CAAC;AAEN,eAAO,MAAM,gBAAgB;;;mBA/MnB,UAAU,cAAc,EAAE,KAAK,eAAe,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;CAwOtG,CAAC"}

package/types/components/DatePicker/SingleDate/SingleDate.types.d.ts

@@ -8,6 +8,10 @@ export declare type DatePickerTextFieldProps = {
      * Выбранное значение.
      */
     defaultDate?: Date;
+    /**
+     * Название для формы
+     */
+    name?: string;
     /**
      * Некорректное значение даты
      */
@@ -52,6 +56,12 @@ export declare type DatePickerTextFieldProps = {
      * Обработчик изменения значения.
      */
     onChangeValue?: (event: SyntheticEvent<HTMLInputElement>, value?: string) => void;
+    onChange?: (event: {
+        target: {
+            value?: string;
+            name?: string;
+        };
+    }) => void;
 };
 export declare type DatePickerPopoverProps = {
     /**

package/types/components/DatePicker/SingleDate/SingleDate.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SingleDate.types.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/SingleDate/SingleDate.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,KAAK,EAAE,uBAAuB,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAClG,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAE9D,oBAAY,wBAAwB,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAC3E,oBAAY,mBAAmB,GAAG,wBAAwB,GAAG,MAAM,CAAC;AAEpE,oBAAY,wBAAwB,GAAG;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACnC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAClC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvG;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,gBAAgB,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACrF,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,CAAC;IAClE;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,cAAc,GAAG,KAAK,KAAK,IAAI,CAAC;CACvE,CAAC;AAEF,oBAAY,eAAe,GAAG,yBAAyB,GACnD,wBAAwB,GACxB,uBAAuB,GACvB,sBAAsB,GACtB,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,CAAC"}
+{"version":3,"file":"SingleDate.types.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/SingleDate/SingleDate.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,KAAK,EAAE,uBAAuB,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAClG,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAE9D,oBAAY,wBAAwB,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAC3E,oBAAY,mBAAmB,GAAG,wBAAwB,GAAG,MAAM,CAAC;AAEpE,oBAAY,wBAAwB,GAAG;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACnC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAClC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvG;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,gBAAgB,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAClF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE;YAAE,KAAK,CAAC,EAAE,MAAM,CAAC;YAAC,IAAI,CAAC,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,KAAK,IAAI,CAAC;CAC7E,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,CAAC;IAClE;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,cAAc,GAAG,KAAK,KAAK,IAAI,CAAC;CACvE,CAAC;AAEF,oBAAY,eAAe,GAAG,yBAAyB,GACnD,wBAAwB,GACxB,uBAAuB,GACvB,sBAAsB,GACtB,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,CAAC"}

package/types/components/DatePicker/hooks/useDatePicker.d.ts

@@ -1,7 +1,7 @@
 import { ChangeEvent, SyntheticEvent } from 'react';
 import type { UseDatePickerProps } from '../DatePickerBase.types';
 import type { DateInfo } from '../../Calendar/Calendar.types';
-export declare const useDatePicker: ({ currentValue, setInputValue, setCalendarValue, setIsInnerOpen, dateFormatDelimiter, format, lang, disabled, readOnly, maskWithFormat, valueError, valueSuccess, inputRef, onToggle, onChangeValue, onCommitDate, }: UseDatePickerProps) => {
+export declare const useDatePicker: ({ currentValue, setInputValue, setCalendarValue, setIsInnerOpen, dateFormatDelimiter, format, lang, disabled, readOnly, maskWithFormat, valueError, valueSuccess, inputRef, name, onToggle, onChangeValue, onCommitDate, onChange, }: UseDatePickerProps) => {
     datePickerErrorClass: string | undefined;
     datePickerSuccessClass: string | undefined;
     handleToggle: (opened: boolean, event: SyntheticEvent | Event) => void;