@alfalab/core-components-date-time-input 4.0.0 → 4.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/{Component-89a3cf4c.d.ts → Component-50136800.d.ts} +1 -1
  2. package/Component-72dda473.d.ts +53 -0
  3. package/Component-8b5756fe.d.ts +9 -1
  4. package/components/date-time-input/Component.js +1 -1
  5. package/components/date-time-input/index.css +7 -7
  6. package/cssm/{Component-89a3cf4c.d.ts → Component-50136800.d.ts} +1 -1
  7. package/cssm/Component-72dda473.d.ts +53 -0
  8. package/cssm/Component-8b5756fe.d.ts +9 -1
  9. package/cssm/index-50136800.d.ts +11 -0
  10. package/cssm/index-72dda473.d.ts +12 -0
  11. package/esm/{Component-89a3cf4c.d.ts → Component-50136800.d.ts} +1 -1
  12. package/esm/Component-72dda473.d.ts +53 -0
  13. package/esm/Component-8b5756fe.d.ts +9 -1
  14. package/esm/components/date-time-input/Component.js +1 -1
  15. package/esm/components/date-time-input/index.css +7 -7
  16. package/esm/index-50136800.d.ts +11 -0
  17. package/esm/index-72dda473.d.ts +12 -0
  18. package/index-50136800.d.ts +11 -0
  19. package/index-72dda473.d.ts +12 -0
  20. package/modern/{Component-89a3cf4c.d.ts → Component-50136800.d.ts} +1 -1
  21. package/modern/Component-72dda473.d.ts +53 -0
  22. package/modern/Component-8b5756fe.d.ts +9 -1
  23. package/modern/components/date-time-input/Component.js +1 -1
  24. package/modern/components/date-time-input/index.css +7 -7
  25. package/modern/index-50136800.d.ts +11 -0
  26. package/modern/index-72dda473.d.ts +12 -0
  27. package/package.json +7 -4
  28. package/cssm/index-89a3cf4c.d.ts +0 -3
  29. package/esm/index-89a3cf4c.d.ts +0 -3
  30. package/index-89a3cf4c.d.ts +0 -3
  31. package/modern/index-89a3cf4c.d.ts +0 -3
  32. /package/cssm/{types-ebda875c.d.ts → types-83e2bd9e.d.ts} +0 -0
  33. /package/esm/{types-ebda875c.d.ts → types-83e2bd9e.d.ts} +0 -0
  34. /package/modern/{types-ebda875c.d.ts → types-83e2bd9e.d.ts} +0 -0
  35. /package/{types-ebda875c.d.ts → types-83e2bd9e.d.ts} +0 -0
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { NavigationBarProps } from "./types-ebda875c";
3
+ import { NavigationBarProps } from "./types-83e2bd9e";
4
4
  declare const NavigationBar: React.ForwardRefExoticComponent<NavigationBarProps & React.RefAttributes<HTMLDivElement>>;
5
5
  export * from "./Component-63dec22f";
6
6
  export { NavigationBar };
@@ -0,0 +1,53 @@
1
+ /// <reference types="react" />
2
+ import React from 'react';
3
+ import { BackgroundColorType, GraphicColorType } from "./index-72dda473";
4
+ type IconColorType = Extract<GraphicColorType, 'positive' | 'attention' | 'link' | 'negative' | 'tertiary' | 'secondary' | 'primary'>;
5
+ type BadgeProps = {
6
+ /**
7
+ * Дополнительный класс
8
+ */
9
+ className?: string;
10
+ /**
11
+ * Вид компонента
12
+ */
13
+ view: 'icon' | 'count';
14
+ /**
15
+ * Размер компонента (только для view=icon)
16
+ * //deprecated(используйте height для view=count )
17
+ */
18
+ size?: 's' | 'm' | 'l' | 'xl';
19
+ /**
20
+ * Видимость белой обводки вокруг иконки
21
+ */
22
+ visibleIconOutline?: boolean;
23
+ /**
24
+ * Видимость цветной обводки вокруг иконки (только для view=icon)
25
+ */
26
+ visibleColorOutline?: boolean;
27
+ /**
28
+ * Контент компонента
29
+ */
30
+ content?: React.ReactElement | number;
31
+ /**
32
+ * Высота компонента, min = 16; max = 48 (только для view=count)
33
+ */
34
+ height?: number;
35
+ /**
36
+ * Цветовое оформление бейджа при view='count'
37
+ */
38
+ color?: Extract<BackgroundColorType, 'accent' | 'primary' | 'specialbg-secondary-transparent'>;
39
+ /**
40
+ * Цветовое оформление бейджа при view='icon'
41
+ */
42
+ iconColor?: IconColorType;
43
+ /**
44
+ * Цвет подложки под иконкой
45
+ */
46
+ iconUnderlayColor?: Extract<GraphicColorType, 'primary' | 'static-light'>;
47
+ /**
48
+ * Идентификатор для систем автоматизированного тестирования
49
+ */
50
+ dataTestId?: string;
51
+ };
52
+ declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, color, iconUnderlayColor, dataTestId, }: BadgeProps) => React.JSX.Element;
53
+ export { IconColorType, BadgeProps, Badge };
@@ -4,7 +4,7 @@ import React from "react";
4
4
  import { ReactNode, FC, KeyboardEvent, MouseEvent, MutableRefObject, Ref, RefObject } from "react";
5
5
  import { TransitionProps } from "react-transition-group/Transition";
6
6
  import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
7
- import { NavigationBarProps } from "./types-ebda875c";
7
+ import { NavigationBarProps } from "./types-83e2bd9e";
8
8
  import { CalendarDesktopProps } from "./Component.desktop-8b5756fe";
9
9
  type BackdropProps = Partial<TransitionProps> & {
10
10
  /**
@@ -116,6 +116,14 @@ type BaseModalProps = {
116
116
  * Дополнительный класс
117
117
  */
118
118
  contentClassName?: string;
119
+ /**
120
+ * Дополнительные пропсы на обертку контента
121
+ */
122
+ contentProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
123
+ /**
124
+ * Дополнительные пропсы на компонентную обертку контента
125
+ */
126
+ componentDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
119
127
  /**
120
128
  * Дополнительный класс для обертки (Modal)
121
129
  */
@@ -21,7 +21,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
21
21
  var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
22
22
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
23
23
 
24
- var styles = {"component":"date-time-input__component_wtuc8","calendarContainer":"date-time-input__calendarContainer_wtuc8","calendarResponsive":"date-time-input__calendarResponsive_wtuc8","block":"date-time-input__block_wtuc8","calendarIcon":"date-time-input__calendarIcon_wtuc8"};
24
+ var styles = {"component":"date-time-input__component_17o5k","calendarContainer":"date-time-input__calendarContainer_17o5k","calendarResponsive":"date-time-input__calendarResponsive_17o5k","block":"date-time-input__block_17o5k","calendarIcon":"date-time-input__calendarIcon_17o5k"};
25
25
  require('./index.css')
26
26
 
27
27
  /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
@@ -1,4 +1,4 @@
1
- /* hash: zrugz */
1
+ /* hash: reilf */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-secondary: #e9e9eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -41,24 +41,24 @@
41
41
  /* marker */
42
42
  } :root {
43
43
  --calendar-popover-border-radius: var(--border-radius-m);
44
- } .date-time-input__component_wtuc8 {
44
+ } .date-time-input__component_17o5k {
45
45
  display: inline-block;
46
46
  outline: none;
47
47
  position: relative;
48
- } .date-time-input__calendarContainer_wtuc8 {
48
+ } .date-time-input__calendarContainer_17o5k {
49
49
  display: inline-block;
50
50
  box-sizing: border-box;
51
51
  border-radius: var(--calendar-popover-border-radius);
52
52
  border: 1px solid var(--color-light-border-secondary)
53
- } @media (max-width: 374px) { .date-time-input__calendarContainer_wtuc8 {
53
+ } @media (max-width: 374px) { .date-time-input__calendarContainer_17o5k {
54
54
  width: 100%;
55
55
  min-width: 288px
56
56
  }
57
- } .date-time-input__calendarResponsive_wtuc8 {
57
+ } .date-time-input__calendarResponsive_17o5k {
58
58
  width: var(--calendar-width);
59
- } .date-time-input__block_wtuc8 {
59
+ } .date-time-input__block_17o5k {
60
60
  width: 100%;
61
- } .date-time-input__calendarIcon_wtuc8 {
61
+ } .date-time-input__calendarIcon_17o5k {
62
62
  margin-right: var(--gap-s-neg);
63
63
  height: 100%;
64
64
  }
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { NavigationBarProps } from "./types-ebda875c";
3
+ import { NavigationBarProps } from "./types-83e2bd9e";
4
4
  declare const NavigationBar: React.ForwardRefExoticComponent<NavigationBarProps & React.RefAttributes<HTMLDivElement>>;
5
5
  export * from "./Component-63dec22f";
6
6
  export { NavigationBar };
@@ -0,0 +1,53 @@
1
+ /// <reference types="react" />
2
+ import React from 'react';
3
+ import { BackgroundColorType, GraphicColorType } from "./index-72dda473";
4
+ type IconColorType = Extract<GraphicColorType, 'positive' | 'attention' | 'link' | 'negative' | 'tertiary' | 'secondary' | 'primary'>;
5
+ type BadgeProps = {
6
+ /**
7
+ * Дополнительный класс
8
+ */
9
+ className?: string;
10
+ /**
11
+ * Вид компонента
12
+ */
13
+ view: 'icon' | 'count';
14
+ /**
15
+ * Размер компонента (только для view=icon)
16
+ * //deprecated(используйте height для view=count )
17
+ */
18
+ size?: 's' | 'm' | 'l' | 'xl';
19
+ /**
20
+ * Видимость белой обводки вокруг иконки
21
+ */
22
+ visibleIconOutline?: boolean;
23
+ /**
24
+ * Видимость цветной обводки вокруг иконки (только для view=icon)
25
+ */
26
+ visibleColorOutline?: boolean;
27
+ /**
28
+ * Контент компонента
29
+ */
30
+ content?: React.ReactElement | number;
31
+ /**
32
+ * Высота компонента, min = 16; max = 48 (только для view=count)
33
+ */
34
+ height?: number;
35
+ /**
36
+ * Цветовое оформление бейджа при view='count'
37
+ */
38
+ color?: Extract<BackgroundColorType, 'accent' | 'primary' | 'specialbg-secondary-transparent'>;
39
+ /**
40
+ * Цветовое оформление бейджа при view='icon'
41
+ */
42
+ iconColor?: IconColorType;
43
+ /**
44
+ * Цвет подложки под иконкой
45
+ */
46
+ iconUnderlayColor?: Extract<GraphicColorType, 'primary' | 'static-light'>;
47
+ /**
48
+ * Идентификатор для систем автоматизированного тестирования
49
+ */
50
+ dataTestId?: string;
51
+ };
52
+ declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, color, iconUnderlayColor, dataTestId, }: BadgeProps) => React.JSX.Element;
53
+ export { IconColorType, BadgeProps, Badge };
@@ -4,7 +4,7 @@ import React from "react";
4
4
  import { ReactNode, FC, KeyboardEvent, MouseEvent, MutableRefObject, Ref, RefObject } from "react";
5
5
  import { TransitionProps } from "react-transition-group/Transition";
6
6
  import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
7
- import { NavigationBarProps } from "./types-ebda875c";
7
+ import { NavigationBarProps } from "./types-83e2bd9e";
8
8
  import { CalendarDesktopProps } from "./Component.desktop-8b5756fe";
9
9
  type BackdropProps = Partial<TransitionProps> & {
10
10
  /**
@@ -116,6 +116,14 @@ type BaseModalProps = {
116
116
  * Дополнительный класс
117
117
  */
118
118
  contentClassName?: string;
119
+ /**
120
+ * Дополнительные пропсы на обертку контента
121
+ */
122
+ contentProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
123
+ /**
124
+ * Дополнительные пропсы на компонентную обертку контента
125
+ */
126
+ componentDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
119
127
  /**
120
128
  * Дополнительный класс для обертки (Modal)
121
129
  */
@@ -0,0 +1,11 @@
1
+ /// <reference types="react" />
2
+ import React from "react";
3
+ import { PaddingType } from "./index-72dda473";
4
+ declare const isClient: () => boolean;
5
+ declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
6
+ declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
7
+ declare function easeInOutQuad(x: number): number;
8
+ declare const easingFns: {
9
+ easeInOutQuad: typeof easeInOutQuad;
10
+ };
11
+ export { isClient, getDataTestId, createPaddingStyle, easingFns };
@@ -0,0 +1,12 @@
1
+ type BackgroundColorType = 'accent' | 'info' | 'attention-muted' | 'positive-muted' | 'negative-muted' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'specialbg-component' | 'specialbg-component-inverted' | 'specialbg-primary-grouped' | 'specialbg-secondary-grouped' | 'specialbg-tertiary-grouped' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
2
+ type BorderColorType = 'accent' | 'key' | 'key-inverted' | 'link' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'underline' | 'underline-inverted' | 'graphic-attention' | 'graphic-link' | 'graphic-negative' | 'graphic-positive' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
3
+ type GraphicColorType = 'accent' | 'link' | 'attention' | 'positive' | 'negative' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'static-light' | 'static-accent' | 'static-dark';
4
+ type ShadowType = 'shadow-xs' | 'shadow-s' | 'shadow-m' | 'shadow-l' | 'shadow-xl' | 'shadow-xs-hard' | 'shadow-s-hard' | 'shadow-m-hard' | 'shadow-l-hard' | 'shadow-xl-hard' | 'shadow-xs-up' | 'shadow-s-up' | 'shadow-m-up' | 'shadow-l-up' | 'shadow-xl-up' | 'shadow-xs-hard-up' | 'shadow-s-hard-up' | 'shadow-m-hard-up' | 'shadow-l-hard-up' | 'shadow-xl-hard-up';
5
+ type GapType = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl';
6
+ type PaddingType = number | string | {
7
+ top?: number;
8
+ right?: number;
9
+ bottom?: number;
10
+ left?: number;
11
+ };
12
+ export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType, PaddingType };
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { NavigationBarProps } from "./types-ebda875c";
3
+ import { NavigationBarProps } from "./types-83e2bd9e";
4
4
  declare const NavigationBar: React.ForwardRefExoticComponent<NavigationBarProps & React.RefAttributes<HTMLDivElement>>;
5
5
  export * from "./Component-63dec22f";
6
6
  export { NavigationBar };
@@ -0,0 +1,53 @@
1
+ /// <reference types="react" />
2
+ import React from 'react';
3
+ import { BackgroundColorType, GraphicColorType } from "./index-72dda473";
4
+ type IconColorType = Extract<GraphicColorType, 'positive' | 'attention' | 'link' | 'negative' | 'tertiary' | 'secondary' | 'primary'>;
5
+ type BadgeProps = {
6
+ /**
7
+ * Дополнительный класс
8
+ */
9
+ className?: string;
10
+ /**
11
+ * Вид компонента
12
+ */
13
+ view: 'icon' | 'count';
14
+ /**
15
+ * Размер компонента (только для view=icon)
16
+ * //deprecated(используйте height для view=count )
17
+ */
18
+ size?: 's' | 'm' | 'l' | 'xl';
19
+ /**
20
+ * Видимость белой обводки вокруг иконки
21
+ */
22
+ visibleIconOutline?: boolean;
23
+ /**
24
+ * Видимость цветной обводки вокруг иконки (только для view=icon)
25
+ */
26
+ visibleColorOutline?: boolean;
27
+ /**
28
+ * Контент компонента
29
+ */
30
+ content?: React.ReactElement | number;
31
+ /**
32
+ * Высота компонента, min = 16; max = 48 (только для view=count)
33
+ */
34
+ height?: number;
35
+ /**
36
+ * Цветовое оформление бейджа при view='count'
37
+ */
38
+ color?: Extract<BackgroundColorType, 'accent' | 'primary' | 'specialbg-secondary-transparent'>;
39
+ /**
40
+ * Цветовое оформление бейджа при view='icon'
41
+ */
42
+ iconColor?: IconColorType;
43
+ /**
44
+ * Цвет подложки под иконкой
45
+ */
46
+ iconUnderlayColor?: Extract<GraphicColorType, 'primary' | 'static-light'>;
47
+ /**
48
+ * Идентификатор для систем автоматизированного тестирования
49
+ */
50
+ dataTestId?: string;
51
+ };
52
+ declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, color, iconUnderlayColor, dataTestId, }: BadgeProps) => React.JSX.Element;
53
+ export { IconColorType, BadgeProps, Badge };
@@ -4,7 +4,7 @@ import React from "react";
4
4
  import { ReactNode, FC, KeyboardEvent, MouseEvent, MutableRefObject, Ref, RefObject } from "react";
5
5
  import { TransitionProps } from "react-transition-group/Transition";
6
6
  import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
7
- import { NavigationBarProps } from "./types-ebda875c";
7
+ import { NavigationBarProps } from "./types-83e2bd9e";
8
8
  import { CalendarDesktopProps } from "./Component.desktop-8b5756fe";
9
9
  type BackdropProps = Partial<TransitionProps> & {
10
10
  /**
@@ -116,6 +116,14 @@ type BaseModalProps = {
116
116
  * Дополнительный класс
117
117
  */
118
118
  contentClassName?: string;
119
+ /**
120
+ * Дополнительные пропсы на обертку контента
121
+ */
122
+ contentProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
123
+ /**
124
+ * Дополнительные пропсы на компонентную обертку контента
125
+ */
126
+ componentDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
119
127
  /**
120
128
  * Дополнительный класс для обертки (Modal)
121
129
  */
@@ -11,7 +11,7 @@ import { getDateWithoutTime, DATE_WITH_TIME_LENGTH, format, getFullDateTime, isC
11
11
  import 'date-fns/isValid';
12
12
  import 'date-fns/parse';
13
13
 
14
- var styles = {"component":"date-time-input__component_wtuc8","calendarContainer":"date-time-input__calendarContainer_wtuc8","calendarResponsive":"date-time-input__calendarResponsive_wtuc8","block":"date-time-input__block_wtuc8","calendarIcon":"date-time-input__calendarIcon_wtuc8"};
14
+ var styles = {"component":"date-time-input__component_17o5k","calendarContainer":"date-time-input__calendarContainer_17o5k","calendarResponsive":"date-time-input__calendarResponsive_17o5k","block":"date-time-input__block_17o5k","calendarIcon":"date-time-input__calendarIcon_17o5k"};
15
15
  require('./index.css')
16
16
 
17
17
  /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
@@ -1,4 +1,4 @@
1
- /* hash: zrugz */
1
+ /* hash: reilf */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-secondary: #e9e9eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -41,24 +41,24 @@
41
41
  /* marker */
42
42
  } :root {
43
43
  --calendar-popover-border-radius: var(--border-radius-m);
44
- } .date-time-input__component_wtuc8 {
44
+ } .date-time-input__component_17o5k {
45
45
  display: inline-block;
46
46
  outline: none;
47
47
  position: relative;
48
- } .date-time-input__calendarContainer_wtuc8 {
48
+ } .date-time-input__calendarContainer_17o5k {
49
49
  display: inline-block;
50
50
  box-sizing: border-box;
51
51
  border-radius: var(--calendar-popover-border-radius);
52
52
  border: 1px solid var(--color-light-border-secondary)
53
- } @media (max-width: 374px) { .date-time-input__calendarContainer_wtuc8 {
53
+ } @media (max-width: 374px) { .date-time-input__calendarContainer_17o5k {
54
54
  width: 100%;
55
55
  min-width: 288px
56
56
  }
57
- } .date-time-input__calendarResponsive_wtuc8 {
57
+ } .date-time-input__calendarResponsive_17o5k {
58
58
  width: var(--calendar-width);
59
- } .date-time-input__block_wtuc8 {
59
+ } .date-time-input__block_17o5k {
60
60
  width: 100%;
61
- } .date-time-input__calendarIcon_wtuc8 {
61
+ } .date-time-input__calendarIcon_17o5k {
62
62
  margin-right: var(--gap-s-neg);
63
63
  height: 100%;
64
64
  }
@@ -0,0 +1,11 @@
1
+ /// <reference types="react" />
2
+ import React from "react";
3
+ import { PaddingType } from "./index-72dda473";
4
+ declare const isClient: () => boolean;
5
+ declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
6
+ declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
7
+ declare function easeInOutQuad(x: number): number;
8
+ declare const easingFns: {
9
+ easeInOutQuad: typeof easeInOutQuad;
10
+ };
11
+ export { isClient, getDataTestId, createPaddingStyle, easingFns };
@@ -0,0 +1,12 @@
1
+ type BackgroundColorType = 'accent' | 'info' | 'attention-muted' | 'positive-muted' | 'negative-muted' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'specialbg-component' | 'specialbg-component-inverted' | 'specialbg-primary-grouped' | 'specialbg-secondary-grouped' | 'specialbg-tertiary-grouped' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
2
+ type BorderColorType = 'accent' | 'key' | 'key-inverted' | 'link' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'underline' | 'underline-inverted' | 'graphic-attention' | 'graphic-link' | 'graphic-negative' | 'graphic-positive' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
3
+ type GraphicColorType = 'accent' | 'link' | 'attention' | 'positive' | 'negative' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'static-light' | 'static-accent' | 'static-dark';
4
+ type ShadowType = 'shadow-xs' | 'shadow-s' | 'shadow-m' | 'shadow-l' | 'shadow-xl' | 'shadow-xs-hard' | 'shadow-s-hard' | 'shadow-m-hard' | 'shadow-l-hard' | 'shadow-xl-hard' | 'shadow-xs-up' | 'shadow-s-up' | 'shadow-m-up' | 'shadow-l-up' | 'shadow-xl-up' | 'shadow-xs-hard-up' | 'shadow-s-hard-up' | 'shadow-m-hard-up' | 'shadow-l-hard-up' | 'shadow-xl-hard-up';
5
+ type GapType = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl';
6
+ type PaddingType = number | string | {
7
+ top?: number;
8
+ right?: number;
9
+ bottom?: number;
10
+ left?: number;
11
+ };
12
+ export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType, PaddingType };
@@ -0,0 +1,11 @@
1
+ /// <reference types="react" />
2
+ import React from "react";
3
+ import { PaddingType } from "./index-72dda473";
4
+ declare const isClient: () => boolean;
5
+ declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
6
+ declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
7
+ declare function easeInOutQuad(x: number): number;
8
+ declare const easingFns: {
9
+ easeInOutQuad: typeof easeInOutQuad;
10
+ };
11
+ export { isClient, getDataTestId, createPaddingStyle, easingFns };
@@ -0,0 +1,12 @@
1
+ type BackgroundColorType = 'accent' | 'info' | 'attention-muted' | 'positive-muted' | 'negative-muted' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'specialbg-component' | 'specialbg-component-inverted' | 'specialbg-primary-grouped' | 'specialbg-secondary-grouped' | 'specialbg-tertiary-grouped' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
2
+ type BorderColorType = 'accent' | 'key' | 'key-inverted' | 'link' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'underline' | 'underline-inverted' | 'graphic-attention' | 'graphic-link' | 'graphic-negative' | 'graphic-positive' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
3
+ type GraphicColorType = 'accent' | 'link' | 'attention' | 'positive' | 'negative' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'static-light' | 'static-accent' | 'static-dark';
4
+ type ShadowType = 'shadow-xs' | 'shadow-s' | 'shadow-m' | 'shadow-l' | 'shadow-xl' | 'shadow-xs-hard' | 'shadow-s-hard' | 'shadow-m-hard' | 'shadow-l-hard' | 'shadow-xl-hard' | 'shadow-xs-up' | 'shadow-s-up' | 'shadow-m-up' | 'shadow-l-up' | 'shadow-xl-up' | 'shadow-xs-hard-up' | 'shadow-s-hard-up' | 'shadow-m-hard-up' | 'shadow-l-hard-up' | 'shadow-xl-hard-up';
5
+ type GapType = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl';
6
+ type PaddingType = number | string | {
7
+ top?: number;
8
+ right?: number;
9
+ bottom?: number;
10
+ left?: number;
11
+ };
12
+ export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType, PaddingType };
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { NavigationBarProps } from "./types-ebda875c";
3
+ import { NavigationBarProps } from "./types-83e2bd9e";
4
4
  declare const NavigationBar: React.ForwardRefExoticComponent<NavigationBarProps & React.RefAttributes<HTMLDivElement>>;
5
5
  export * from "./Component-63dec22f";
6
6
  export { NavigationBar };
@@ -0,0 +1,53 @@
1
+ /// <reference types="react" />
2
+ import React from 'react';
3
+ import { BackgroundColorType, GraphicColorType } from "./index-72dda473";
4
+ type IconColorType = Extract<GraphicColorType, 'positive' | 'attention' | 'link' | 'negative' | 'tertiary' | 'secondary' | 'primary'>;
5
+ type BadgeProps = {
6
+ /**
7
+ * Дополнительный класс
8
+ */
9
+ className?: string;
10
+ /**
11
+ * Вид компонента
12
+ */
13
+ view: 'icon' | 'count';
14
+ /**
15
+ * Размер компонента (только для view=icon)
16
+ * //deprecated(используйте height для view=count )
17
+ */
18
+ size?: 's' | 'm' | 'l' | 'xl';
19
+ /**
20
+ * Видимость белой обводки вокруг иконки
21
+ */
22
+ visibleIconOutline?: boolean;
23
+ /**
24
+ * Видимость цветной обводки вокруг иконки (только для view=icon)
25
+ */
26
+ visibleColorOutline?: boolean;
27
+ /**
28
+ * Контент компонента
29
+ */
30
+ content?: React.ReactElement | number;
31
+ /**
32
+ * Высота компонента, min = 16; max = 48 (только для view=count)
33
+ */
34
+ height?: number;
35
+ /**
36
+ * Цветовое оформление бейджа при view='count'
37
+ */
38
+ color?: Extract<BackgroundColorType, 'accent' | 'primary' | 'specialbg-secondary-transparent'>;
39
+ /**
40
+ * Цветовое оформление бейджа при view='icon'
41
+ */
42
+ iconColor?: IconColorType;
43
+ /**
44
+ * Цвет подложки под иконкой
45
+ */
46
+ iconUnderlayColor?: Extract<GraphicColorType, 'primary' | 'static-light'>;
47
+ /**
48
+ * Идентификатор для систем автоматизированного тестирования
49
+ */
50
+ dataTestId?: string;
51
+ };
52
+ declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, color, iconUnderlayColor, dataTestId, }: BadgeProps) => React.JSX.Element;
53
+ export { IconColorType, BadgeProps, Badge };
@@ -4,7 +4,7 @@ import React from "react";
4
4
  import { ReactNode, FC, KeyboardEvent, MouseEvent, MutableRefObject, Ref, RefObject } from "react";
5
5
  import { TransitionProps } from "react-transition-group/Transition";
6
6
  import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
7
- import { NavigationBarProps } from "./types-ebda875c";
7
+ import { NavigationBarProps } from "./types-83e2bd9e";
8
8
  import { CalendarDesktopProps } from "./Component.desktop-8b5756fe";
9
9
  type BackdropProps = Partial<TransitionProps> & {
10
10
  /**
@@ -116,6 +116,14 @@ type BaseModalProps = {
116
116
  * Дополнительный класс
117
117
  */
118
118
  contentClassName?: string;
119
+ /**
120
+ * Дополнительные пропсы на обертку контента
121
+ */
122
+ contentProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
123
+ /**
124
+ * Дополнительные пропсы на компонентную обертку контента
125
+ */
126
+ componentDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
119
127
  /**
120
128
  * Дополнительный класс для обертки (Modal)
121
129
  */
@@ -10,7 +10,7 @@ import { getDateWithoutTime, DATE_WITH_TIME_LENGTH, format, getFullDateTime, isC
10
10
  import 'date-fns/isValid';
11
11
  import 'date-fns/parse';
12
12
 
13
- const styles = {"component":"date-time-input__component_wtuc8","calendarContainer":"date-time-input__calendarContainer_wtuc8","calendarResponsive":"date-time-input__calendarResponsive_wtuc8","block":"date-time-input__block_wtuc8","calendarIcon":"date-time-input__calendarIcon_wtuc8"};
13
+ const styles = {"component":"date-time-input__component_17o5k","calendarContainer":"date-time-input__calendarContainer_17o5k","calendarResponsive":"date-time-input__calendarResponsive_17o5k","block":"date-time-input__block_17o5k","calendarIcon":"date-time-input__calendarIcon_17o5k"};
14
14
  require('./index.css')
15
15
 
16
16
  /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
@@ -1,4 +1,4 @@
1
- /* hash: zrugz */
1
+ /* hash: reilf */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-secondary: #e9e9eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -41,24 +41,24 @@
41
41
  /* marker */
42
42
  } :root {
43
43
  --calendar-popover-border-radius: var(--border-radius-m);
44
- } .date-time-input__component_wtuc8 {
44
+ } .date-time-input__component_17o5k {
45
45
  display: inline-block;
46
46
  outline: none;
47
47
  position: relative;
48
- } .date-time-input__calendarContainer_wtuc8 {
48
+ } .date-time-input__calendarContainer_17o5k {
49
49
  display: inline-block;
50
50
  box-sizing: border-box;
51
51
  border-radius: var(--calendar-popover-border-radius);
52
52
  border: 1px solid var(--color-light-border-secondary)
53
- } @media (max-width: 374px) { .date-time-input__calendarContainer_wtuc8 {
53
+ } @media (max-width: 374px) { .date-time-input__calendarContainer_17o5k {
54
54
  width: 100%;
55
55
  min-width: 288px
56
56
  }
57
- } .date-time-input__calendarResponsive_wtuc8 {
57
+ } .date-time-input__calendarResponsive_17o5k {
58
58
  width: var(--calendar-width);
59
- } .date-time-input__block_wtuc8 {
59
+ } .date-time-input__block_17o5k {
60
60
  width: 100%;
61
- } .date-time-input__calendarIcon_wtuc8 {
61
+ } .date-time-input__calendarIcon_17o5k {
62
62
  margin-right: var(--gap-s-neg);
63
63
  height: 100%;
64
64
  }
@@ -0,0 +1,11 @@
1
+ /// <reference types="react" />
2
+ import React from "react";
3
+ import { PaddingType } from "./index-72dda473";
4
+ declare const isClient: () => boolean;
5
+ declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
6
+ declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
7
+ declare function easeInOutQuad(x: number): number;
8
+ declare const easingFns: {
9
+ easeInOutQuad: typeof easeInOutQuad;
10
+ };
11
+ export { isClient, getDataTestId, createPaddingStyle, easingFns };
@@ -0,0 +1,12 @@
1
+ type BackgroundColorType = 'accent' | 'info' | 'attention-muted' | 'positive-muted' | 'negative-muted' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'specialbg-component' | 'specialbg-component-inverted' | 'specialbg-primary-grouped' | 'specialbg-secondary-grouped' | 'specialbg-tertiary-grouped' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
2
+ type BorderColorType = 'accent' | 'key' | 'key-inverted' | 'link' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'underline' | 'underline-inverted' | 'graphic-attention' | 'graphic-link' | 'graphic-negative' | 'graphic-positive' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
3
+ type GraphicColorType = 'accent' | 'link' | 'attention' | 'positive' | 'negative' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'static-light' | 'static-accent' | 'static-dark';
4
+ type ShadowType = 'shadow-xs' | 'shadow-s' | 'shadow-m' | 'shadow-l' | 'shadow-xl' | 'shadow-xs-hard' | 'shadow-s-hard' | 'shadow-m-hard' | 'shadow-l-hard' | 'shadow-xl-hard' | 'shadow-xs-up' | 'shadow-s-up' | 'shadow-m-up' | 'shadow-l-up' | 'shadow-xl-up' | 'shadow-xs-hard-up' | 'shadow-s-hard-up' | 'shadow-m-hard-up' | 'shadow-l-hard-up' | 'shadow-xl-hard-up';
5
+ type GapType = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl';
6
+ type PaddingType = number | string | {
7
+ top?: number;
8
+ right?: number;
9
+ bottom?: number;
10
+ left?: number;
11
+ };
12
+ export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType, PaddingType };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-date-time-input",
3
- "version": "4.0.0",
3
+ "version": "4.0.2",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -35,12 +35,15 @@
35
35
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
36
36
  },
37
37
  "dependencies": {
38
- "@alfalab/core-components-calendar": "^7.0.0",
39
- "@alfalab/core-components-input": "^12.0.0",
40
- "@alfalab/core-components-icon-button": "^6.2.0",
38
+ "@alfalab/core-components-calendar": "^7.0.2",
39
+ "@alfalab/core-components-input": "^12.0.2",
40
+ "@alfalab/core-components-icon-button": "^6.2.2",
41
41
  "@alfalab/core-components-popover": "^6.1.0",
42
42
  "@alfalab/hooks": "^1.13.0",
43
+ "@alfalab/icons-glyph": "^2.108.0",
43
44
  "classnames": "^2.3.1",
45
+ "date-fns": "^2.16.1",
46
+ "react-merge-refs": "^1.1.0",
44
47
  "tslib": "^2.4.0"
45
48
  }
46
49
  }
@@ -1,3 +0,0 @@
1
- declare const isClient: () => boolean;
2
- declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
3
- export { isClient, getDataTestId };
@@ -1,3 +0,0 @@
1
- declare const isClient: () => boolean;
2
- declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
3
- export { isClient, getDataTestId };
@@ -1,3 +0,0 @@
1
- declare const isClient: () => boolean;
2
- declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
3
- export { isClient, getDataTestId };
@@ -1,3 +0,0 @@
1
- declare const isClient: () => boolean;
2
- declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
3
- export { isClient, getDataTestId };
File without changes