@alfalab/core-components-notification 5.2.3 → 5.2.6

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 (13) hide show
  1. package/dist/Component.d.ts +3 -4
  2. package/dist/Component.js +3 -3
  3. package/dist/cssm/Component.d.ts +3 -4
  4. package/dist/cssm/Component.js +2 -2
  5. package/dist/cssm/index.module.css +10 -5
  6. package/dist/esm/Component.d.ts +3 -4
  7. package/dist/esm/Component.js +3 -3
  8. package/dist/esm/index.css +17 -12
  9. package/dist/index.css +17 -12
  10. package/dist/modern/Component.d.ts +3 -4
  11. package/dist/modern/Component.js +3 -3
  12. package/dist/modern/index.css +17 -12
  13. package/package.json +3 -3
package/dist/Component.d.ts CHANGED
@@ -42,13 +42,12 @@ type NotificationProps = ToastPlateProps & {
42
42
  };
43
43
  declare const Notification: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
44
44
  className?: string | undefined;
45
+ titleClassName?: string | undefined;
45
46
  contentClassName?: string | undefined;
47
+ actionSectionClassName?: string | undefined;
46
48
  children?: React.ReactNode;
47
49
  title?: React.ReactNode;
48
- badge?: "positive" | "attention" | "negative" | undefined;
49
- /**
50
- * Обработчик события наведения курсора на компонент
51
- */
50
+ badge?: "negative" | "positive" | "attention" | undefined;
52
51
  leftAddons?: React.ReactNode;
53
52
  actionButton?: React.ReactNode;
54
53
  dataTestId?: string | undefined;
package/dist/Component.js CHANGED
@@ -58,12 +58,12 @@ function __rest(s, e) {
58
58
  return t;
59
59
  }
60
60
 
61
- var styles = {"notificationComponent":"notification__notificationComponent_131v8","isVisible":"notification__isVisible_131v8","isClosing":"notification__isClosing_131v8","toastContent":"notification__toastContent_131v8"};
61
+ var styles = {"notificationComponent":"notification__notificationComponent_s4oou","isVisible":"notification__isVisible_s4oou","isClosing":"notification__isClosing_s4oou","toastContent":"notification__toastContent_s4oou","actionSection":"notification__actionSection_s4oou"};
62
62
  require('./index.css')
63
63
 
64
64
  var notificationClassNameSelector = "." + styles.notificationComponent;
65
65
  var Notification = React.forwardRef(function (_a, ref) {
66
- var className = _a.className, children = _a.children, visible = _a.visible, _b = _a.offset, offset = _b === void 0 ? 108 : _b, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, _d = _a.autoCloseDelay, autoCloseDelay = _d === void 0 ? 5000 : _d, _e = _a.usePortal, usePortal = _e === void 0 ? true : _e, _f = _a.zIndex, zIndex = _f === void 0 ? coreComponentsStack.stackingOrder.TOAST : _f, style = _a.style, onClose = _a.onClose, onCloseTimeout = _a.onCloseTimeout, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onClickOutside = _a.onClickOutside, restProps = __rest(_a, ["className", "children", "visible", "offset", "hasCloser", "autoCloseDelay", "usePortal", "zIndex", "style", "onClose", "onCloseTimeout", "onMouseEnter", "onMouseLeave", "onClickOutside"]);
66
+ var className = _a.className, actionSectionClassName = _a.actionSectionClassName, children = _a.children, visible = _a.visible, _b = _a.offset, offset = _b === void 0 ? 108 : _b, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, _d = _a.autoCloseDelay, autoCloseDelay = _d === void 0 ? 5000 : _d, _e = _a.usePortal, usePortal = _e === void 0 ? true : _e, _f = _a.zIndex, zIndex = _f === void 0 ? coreComponentsStack.stackingOrder.TOAST : _f, style = _a.style, onClose = _a.onClose, onCloseTimeout = _a.onCloseTimeout, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onClickOutside = _a.onClickOutside, restProps = __rest(_a, ["className", "actionSectionClassName", "children", "visible", "offset", "hasCloser", "autoCloseDelay", "usePortal", "zIndex", "style", "onClose", "onCloseTimeout", "onMouseEnter", "onMouseLeave", "onClickOutside"]);
67
67
  var notificationRef = React.useRef(null);
68
68
  var autoCloseTimeoutRef = React.useRef(0);
69
69
  var closeTimeoutRef = React.useRef(0);
@@ -139,7 +139,7 @@ var Notification = React.forwardRef(function (_a, ref) {
139
139
  React__default['default'].createElement(coreComponentsToastPlate.ToastPlate, __assign({ className: cn__default['default'](styles.notificationComponent, (_a = {},
140
140
  _a[styles.isVisible] = visible,
141
141
  _a[styles.isClosing] = isClosing,
142
- _a), className), contentClassName: styles.toastContent, style: __assign({ top: offset, zIndex: computedZIndex }, style), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: mergeRefs__default['default']([ref, notificationRef]), role: visible ? 'alert' : undefined, hasCloser: hasCloser, onClose: onClose }, restProps), children))));
142
+ _a), className), contentClassName: styles.toastContent, actionSectionClassName: cn__default['default'](actionSectionClassName, styles.actionSection), style: __assign({ top: offset, zIndex: computedZIndex }, style), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: mergeRefs__default['default']([ref, notificationRef]), role: visible ? 'alert' : undefined, hasCloser: hasCloser, onClose: onClose }, restProps), children))));
143
143
  }));
144
144
  });
145
145
  /**
package/dist/cssm/Component.d.ts CHANGED
@@ -42,13 +42,12 @@ type NotificationProps = ToastPlateProps & {
42
42
  };
43
43
  declare const Notification: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
44
44
  className?: string | undefined;
45
+ titleClassName?: string | undefined;
45
46
  contentClassName?: string | undefined;
47
+ actionSectionClassName?: string | undefined;
46
48
  children?: React.ReactNode;
47
49
  title?: React.ReactNode;
48
- badge?: "positive" | "attention" | "negative" | undefined;
49
- /**
50
- * Обработчик события наведения курсора на компонент
51
- */
50
+ badge?: "negative" | "positive" | "attention" | undefined;
52
51
  leftAddons?: React.ReactNode;
53
52
  actionButton?: React.ReactNode;
54
53
  dataTestId?: string | undefined;
package/dist/cssm/Component.js CHANGED
@@ -62,7 +62,7 @@ function __rest(s, e) {
62
62
 
63
63
  var notificationClassNameSelector = "." + styles__default['default'].notificationComponent;
64
64
  var Notification = React.forwardRef(function (_a, ref) {
65
- var className = _a.className, children = _a.children, visible = _a.visible, _b = _a.offset, offset = _b === void 0 ? 108 : _b, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, _d = _a.autoCloseDelay, autoCloseDelay = _d === void 0 ? 5000 : _d, _e = _a.usePortal, usePortal = _e === void 0 ? true : _e, _f = _a.zIndex, zIndex = _f === void 0 ? coreComponentsStack.stackingOrder.TOAST : _f, style = _a.style, onClose = _a.onClose, onCloseTimeout = _a.onCloseTimeout, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onClickOutside = _a.onClickOutside, restProps = __rest(_a, ["className", "children", "visible", "offset", "hasCloser", "autoCloseDelay", "usePortal", "zIndex", "style", "onClose", "onCloseTimeout", "onMouseEnter", "onMouseLeave", "onClickOutside"]);
65
+ var className = _a.className, actionSectionClassName = _a.actionSectionClassName, children = _a.children, visible = _a.visible, _b = _a.offset, offset = _b === void 0 ? 108 : _b, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, _d = _a.autoCloseDelay, autoCloseDelay = _d === void 0 ? 5000 : _d, _e = _a.usePortal, usePortal = _e === void 0 ? true : _e, _f = _a.zIndex, zIndex = _f === void 0 ? coreComponentsStack.stackingOrder.TOAST : _f, style = _a.style, onClose = _a.onClose, onCloseTimeout = _a.onCloseTimeout, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onClickOutside = _a.onClickOutside, restProps = __rest(_a, ["className", "actionSectionClassName", "children", "visible", "offset", "hasCloser", "autoCloseDelay", "usePortal", "zIndex", "style", "onClose", "onCloseTimeout", "onMouseEnter", "onMouseLeave", "onClickOutside"]);
66
66
  var notificationRef = React.useRef(null);
67
67
  var autoCloseTimeoutRef = React.useRef(0);
68
68
  var closeTimeoutRef = React.useRef(0);
@@ -138,7 +138,7 @@ var Notification = React.forwardRef(function (_a, ref) {
138
138
  React__default['default'].createElement(coreComponentsToastPlate.ToastPlate, __assign({ className: cn__default['default'](styles__default['default'].notificationComponent, (_a = {},
139
139
  _a[styles__default['default'].isVisible] = visible,
140
140
  _a[styles__default['default'].isClosing] = isClosing,
141
- _a), className), contentClassName: styles__default['default'].toastContent, style: __assign({ top: offset, zIndex: computedZIndex }, style), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: mergeRefs__default['default']([ref, notificationRef]), role: visible ? 'alert' : undefined, hasCloser: hasCloser, onClose: onClose }, restProps), children))));
141
+ _a), className), contentClassName: styles__default['default'].toastContent, actionSectionClassName: cn__default['default'](actionSectionClassName, styles__default['default'].actionSection), style: __assign({ top: offset, zIndex: computedZIndex }, style), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: mergeRefs__default['default']([ref, notificationRef]), role: visible ? 'alert' : undefined, hasCloser: hasCloser, onClose: onClose }, restProps), children))));
142
142
  }));
143
143
  });
144
144
  /**
package/dist/cssm/index.module.css CHANGED
@@ -7,9 +7,11 @@
7
7
  /* Hard up */
8
8
  }
9
9
  :root {
10
+ --gap-xs: 8px;
10
11
  --gap-s: 12px;
11
12
  --gap-xl: 24px;
12
13
  --gap-4xl: 48px;
14
+ --gap-s-neg: -12px;
13
15
  }
14
16
  :root {
15
17
  --notification-desktop-content-width: 278px;
@@ -30,7 +32,7 @@
30
32
  .notificationComponent {
31
33
  right: var(--gap-4xl);
32
34
  width: auto;
33
- transform: translate(var(--notification-desktop-content-width), 0)
35
+ transform: translate(calc(100% + var(--gap-4xl)), 0)
34
36
  }
35
37
  }
36
38
  .notificationComponent.isVisible {
@@ -43,10 +45,7 @@
43
45
  }
44
46
  @media screen and (min-width: 600px) {
45
47
  .notificationComponent.isClosing {
46
- transform: translate(
47
- calc(var(--notification-desktop-content-width) + var(--gap-4xl)),
48
- 0
49
- )
48
+ transform: translate(calc(100% + var(--gap-4xl)), 0)
50
49
  }
51
50
  }
52
51
  @media screen and (min-width: 600px) {
@@ -54,3 +53,9 @@
54
53
  width: var(--notification-desktop-content-width)
55
54
  }
56
55
  }
56
+ .actionSection {
57
+ min-width: 104px;
58
+ min-height: 48px;
59
+ padding: 0 var(--gap-xs);
60
+ margin: var(--gap-s-neg) 0;
61
+ }
package/dist/esm/Component.d.ts CHANGED
@@ -42,13 +42,12 @@ type NotificationProps = ToastPlateProps & {
42
42
  };
43
43
  declare const Notification: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
44
44
  className?: string | undefined;
45
+ titleClassName?: string | undefined;
45
46
  contentClassName?: string | undefined;
47
+ actionSectionClassName?: string | undefined;
46
48
  children?: React.ReactNode;
47
49
  title?: React.ReactNode;
48
- badge?: "positive" | "attention" | "negative" | undefined;
49
- /**
50
- * Обработчик события наведения курсора на компонент
51
- */
50
+ badge?: "negative" | "positive" | "attention" | undefined;
52
51
  leftAddons?: React.ReactNode;
53
52
  actionButton?: React.ReactNode;
54
53
  dataTestId?: string | undefined;
package/dist/esm/Component.js CHANGED
@@ -47,12 +47,12 @@ function __rest(s, e) {
47
47
  return t;
48
48
  }
49
49
 
50
- var styles = {"notificationComponent":"notification__notificationComponent_131v8","isVisible":"notification__isVisible_131v8","isClosing":"notification__isClosing_131v8","toastContent":"notification__toastContent_131v8"};
50
+ var styles = {"notificationComponent":"notification__notificationComponent_s4oou","isVisible":"notification__isVisible_s4oou","isClosing":"notification__isClosing_s4oou","toastContent":"notification__toastContent_s4oou","actionSection":"notification__actionSection_s4oou"};
51
51
  require('./index.css')
52
52
 
53
53
  var notificationClassNameSelector = "." + styles.notificationComponent;
54
54
  var Notification = forwardRef(function (_a, ref) {
55
- var className = _a.className, children = _a.children, visible = _a.visible, _b = _a.offset, offset = _b === void 0 ? 108 : _b, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, _d = _a.autoCloseDelay, autoCloseDelay = _d === void 0 ? 5000 : _d, _e = _a.usePortal, usePortal = _e === void 0 ? true : _e, _f = _a.zIndex, zIndex = _f === void 0 ? stackingOrder.TOAST : _f, style = _a.style, onClose = _a.onClose, onCloseTimeout = _a.onCloseTimeout, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onClickOutside = _a.onClickOutside, restProps = __rest(_a, ["className", "children", "visible", "offset", "hasCloser", "autoCloseDelay", "usePortal", "zIndex", "style", "onClose", "onCloseTimeout", "onMouseEnter", "onMouseLeave", "onClickOutside"]);
55
+ var className = _a.className, actionSectionClassName = _a.actionSectionClassName, children = _a.children, visible = _a.visible, _b = _a.offset, offset = _b === void 0 ? 108 : _b, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, _d = _a.autoCloseDelay, autoCloseDelay = _d === void 0 ? 5000 : _d, _e = _a.usePortal, usePortal = _e === void 0 ? true : _e, _f = _a.zIndex, zIndex = _f === void 0 ? stackingOrder.TOAST : _f, style = _a.style, onClose = _a.onClose, onCloseTimeout = _a.onCloseTimeout, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onClickOutside = _a.onClickOutside, restProps = __rest(_a, ["className", "actionSectionClassName", "children", "visible", "offset", "hasCloser", "autoCloseDelay", "usePortal", "zIndex", "style", "onClose", "onCloseTimeout", "onMouseEnter", "onMouseLeave", "onClickOutside"]);
56
56
  var notificationRef = useRef(null);
57
57
  var autoCloseTimeoutRef = useRef(0);
58
58
  var closeTimeoutRef = useRef(0);
@@ -128,7 +128,7 @@ var Notification = forwardRef(function (_a, ref) {
128
128
  React.createElement(ToastPlate, __assign({ className: cn(styles.notificationComponent, (_a = {},
129
129
  _a[styles.isVisible] = visible,
130
130
  _a[styles.isClosing] = isClosing,
131
- _a), className), contentClassName: styles.toastContent, style: __assign({ top: offset, zIndex: computedZIndex }, style), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: mergeRefs([ref, notificationRef]), role: visible ? 'alert' : undefined, hasCloser: hasCloser, onClose: onClose }, restProps), children))));
131
+ _a), className), contentClassName: styles.toastContent, actionSectionClassName: cn(actionSectionClassName, styles.actionSection), style: __assign({ top: offset, zIndex: computedZIndex }, style), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: mergeRefs([ref, notificationRef]), role: visible ? 'alert' : undefined, hasCloser: hasCloser, onClose: onClose }, restProps), children))));
132
132
  }));
133
133
  });
134
134
  /**
package/dist/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1kobl */
1
+ /* hash: uyuxb */
2
2
  :root {
3
3
 
4
4
  /* Hard */
@@ -8,14 +8,16 @@
8
8
  /* Hard up */
9
9
  }
10
10
  :root {
11
+ --gap-xs: 8px;
11
12
  --gap-s: 12px;
12
13
  --gap-xl: 24px;
13
14
  --gap-4xl: 48px;
15
+ --gap-s-neg: -12px;
14
16
  }
15
17
  :root {
16
18
  --notification-desktop-content-width: 278px;
17
19
  }
18
- .notification__notificationComponent_131v8 {
20
+ .notification__notificationComponent_s4oou {
19
21
  visibility: hidden;
20
22
  position: fixed;
21
23
  right: var(--gap-s);
@@ -28,30 +30,33 @@
28
30
  transition: transform 0.4s ease-out
29
31
  }
30
32
  @media screen and (min-width: 600px) {
31
- .notification__notificationComponent_131v8 {
33
+ .notification__notificationComponent_s4oou {
32
34
  right: var(--gap-4xl);
33
35
  width: auto;
34
- transform: translate(var(--notification-desktop-content-width), 0)
36
+ transform: translate(calc(100% + var(--gap-4xl)), 0)
35
37
  }
36
38
  }
37
- .notification__notificationComponent_131v8.notification__isVisible_131v8 {
39
+ .notification__notificationComponent_s4oou.notification__isVisible_s4oou {
38
40
  visibility: visible;
39
41
  transform: translate(0, 0);
40
42
  }
41
- .notification__notificationComponent_131v8.notification__isClosing_131v8 {
43
+ .notification__notificationComponent_s4oou.notification__isClosing_s4oou {
42
44
  transition: transform 0.1s ease-out;
43
45
  transform: translate(100vw, 0)
44
46
  }
45
47
  @media screen and (min-width: 600px) {
46
- .notification__notificationComponent_131v8.notification__isClosing_131v8 {
47
- transform: translate(
48
- calc(var(--notification-desktop-content-width) + var(--gap-4xl)),
49
- 0
50
- )
48
+ .notification__notificationComponent_s4oou.notification__isClosing_s4oou {
49
+ transform: translate(calc(100% + var(--gap-4xl)), 0)
51
50
  }
52
51
  }
53
52
  @media screen and (min-width: 600px) {
54
- .notification__toastContent_131v8 {
53
+ .notification__toastContent_s4oou {
55
54
  width: var(--notification-desktop-content-width)
56
55
  }
57
56
  }
57
+ .notification__actionSection_s4oou {
58
+ min-width: 104px;
59
+ min-height: 48px;
60
+ padding: 0 var(--gap-xs);
61
+ margin: var(--gap-s-neg) 0;
62
+ }
package/dist/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1kobl */
1
+ /* hash: uyuxb */
2
2
  :root {
3
3
 
4
4
  /* Hard */
@@ -8,14 +8,16 @@
8
8
  /* Hard up */
9
9
  }
10
10
  :root {
11
+ --gap-xs: 8px;
11
12
  --gap-s: 12px;
12
13
  --gap-xl: 24px;
13
14
  --gap-4xl: 48px;
15
+ --gap-s-neg: -12px;
14
16
  }
15
17
  :root {
16
18
  --notification-desktop-content-width: 278px;
17
19
  }
18
- .notification__notificationComponent_131v8 {
20
+ .notification__notificationComponent_s4oou {
19
21
  visibility: hidden;
20
22
  position: fixed;
21
23
  right: var(--gap-s);
@@ -28,30 +30,33 @@
28
30
  transition: transform 0.4s ease-out
29
31
  }
30
32
  @media screen and (min-width: 600px) {
31
- .notification__notificationComponent_131v8 {
33
+ .notification__notificationComponent_s4oou {
32
34
  right: var(--gap-4xl);
33
35
  width: auto;
34
- transform: translate(var(--notification-desktop-content-width), 0)
36
+ transform: translate(calc(100% + var(--gap-4xl)), 0)
35
37
  }
36
38
  }
37
- .notification__notificationComponent_131v8.notification__isVisible_131v8 {
39
+ .notification__notificationComponent_s4oou.notification__isVisible_s4oou {
38
40
  visibility: visible;
39
41
  transform: translate(0, 0);
40
42
  }
41
- .notification__notificationComponent_131v8.notification__isClosing_131v8 {
43
+ .notification__notificationComponent_s4oou.notification__isClosing_s4oou {
42
44
  transition: transform 0.1s ease-out;
43
45
  transform: translate(100vw, 0)
44
46
  }
45
47
  @media screen and (min-width: 600px) {
46
- .notification__notificationComponent_131v8.notification__isClosing_131v8 {
47
- transform: translate(
48
- calc(var(--notification-desktop-content-width) + var(--gap-4xl)),
49
- 0
50
- )
48
+ .notification__notificationComponent_s4oou.notification__isClosing_s4oou {
49
+ transform: translate(calc(100% + var(--gap-4xl)), 0)
51
50
  }
52
51
  }
53
52
  @media screen and (min-width: 600px) {
54
- .notification__toastContent_131v8 {
53
+ .notification__toastContent_s4oou {
55
54
  width: var(--notification-desktop-content-width)
56
55
  }
57
56
  }
57
+ .notification__actionSection_s4oou {
58
+ min-width: 104px;
59
+ min-height: 48px;
60
+ padding: 0 var(--gap-xs);
61
+ margin: var(--gap-s-neg) 0;
62
+ }
package/dist/modern/Component.d.ts CHANGED
@@ -42,13 +42,12 @@ type NotificationProps = ToastPlateProps & {
42
42
  };
43
43
  declare const Notification: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
44
44
  className?: string | undefined;
45
+ titleClassName?: string | undefined;
45
46
  contentClassName?: string | undefined;
47
+ actionSectionClassName?: string | undefined;
46
48
  children?: React.ReactNode;
47
49
  title?: React.ReactNode;
48
- badge?: "positive" | "attention" | "negative" | undefined;
49
- /**
50
- * Обработчик события наведения курсора на компонент
51
- */
50
+ badge?: "negative" | "positive" | "attention" | undefined;
52
51
  leftAddons?: React.ReactNode;
53
52
  actionButton?: React.ReactNode;
54
53
  dataTestId?: string | undefined;
package/dist/modern/Component.js CHANGED
@@ -8,11 +8,11 @@ import { ToastPlate } from '@alfalab/core-components-toast-plate/dist/modern';
8
8
  import { stackingOrder, Stack } from '@alfalab/core-components-stack/dist/modern';
9
9
  import { useClickOutside } from './utils/index.js';
10
10
 
11
- var styles = {"notificationComponent":"notification__notificationComponent_131v8","isVisible":"notification__isVisible_131v8","isClosing":"notification__isClosing_131v8","toastContent":"notification__toastContent_131v8"};
11
+ var styles = {"notificationComponent":"notification__notificationComponent_s4oou","isVisible":"notification__isVisible_s4oou","isClosing":"notification__isClosing_s4oou","toastContent":"notification__toastContent_s4oou","actionSection":"notification__actionSection_s4oou"};
12
12
  require('./index.css')
13
13
 
14
14
  const notificationClassNameSelector = `.${styles.notificationComponent}`;
15
- const Notification = forwardRef(({ className, children, visible, offset = 108, hasCloser = true, autoCloseDelay = 5000, usePortal = true, zIndex = stackingOrder.TOAST, style, onClose, onCloseTimeout, onMouseEnter, onMouseLeave, onClickOutside, ...restProps }, ref) => {
15
+ const Notification = forwardRef(({ className, actionSectionClassName, children, visible, offset = 108, hasCloser = true, autoCloseDelay = 5000, usePortal = true, zIndex = stackingOrder.TOAST, style, onClose, onCloseTimeout, onMouseEnter, onMouseLeave, onClickOutside, ...restProps }, ref) => {
16
16
  const notificationRef = useRef(null);
17
17
  const autoCloseTimeoutRef = useRef(0);
18
18
  const closeTimeoutRef = useRef(0);
@@ -85,7 +85,7 @@ const Notification = forwardRef(({ className, children, visible, offset = 108, h
85
85
  React.createElement(ToastPlate, Object.assign({ className: cn(styles.notificationComponent, {
86
86
  [styles.isVisible]: visible,
87
87
  [styles.isClosing]: isClosing,
88
- }, className), contentClassName: styles.toastContent, style: {
88
+ }, className), contentClassName: styles.toastContent, actionSectionClassName: cn(actionSectionClassName, styles.actionSection), style: {
89
89
  top: offset,
90
90
  zIndex: computedZIndex,
91
91
  ...style,
package/dist/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1kobl */
1
+ /* hash: uyuxb */
2
2
  :root {
3
3
 
4
4
  /* Hard */
@@ -8,14 +8,16 @@
8
8
  /* Hard up */
9
9
  }
10
10
  :root {
11
+ --gap-xs: 8px;
11
12
  --gap-s: 12px;
12
13
  --gap-xl: 24px;
13
14
  --gap-4xl: 48px;
15
+ --gap-s-neg: -12px;
14
16
  }
15
17
  :root {
16
18
  --notification-desktop-content-width: 278px;
17
19
  }
18
- .notification__notificationComponent_131v8 {
20
+ .notification__notificationComponent_s4oou {
19
21
  visibility: hidden;
20
22
  position: fixed;
21
23
  right: var(--gap-s);
@@ -28,30 +30,33 @@
28
30
  transition: transform 0.4s ease-out
29
31
  }
30
32
  @media screen and (min-width: 600px) {
31
- .notification__notificationComponent_131v8 {
33
+ .notification__notificationComponent_s4oou {
32
34
  right: var(--gap-4xl);
33
35
  width: auto;
34
- transform: translate(var(--notification-desktop-content-width), 0)
36
+ transform: translate(calc(100% + var(--gap-4xl)), 0)
35
37
  }
36
38
  }
37
- .notification__notificationComponent_131v8.notification__isVisible_131v8 {
39
+ .notification__notificationComponent_s4oou.notification__isVisible_s4oou {
38
40
  visibility: visible;
39
41
  transform: translate(0, 0);
40
42
  }
41
- .notification__notificationComponent_131v8.notification__isClosing_131v8 {
43
+ .notification__notificationComponent_s4oou.notification__isClosing_s4oou {
42
44
  transition: transform 0.1s ease-out;
43
45
  transform: translate(100vw, 0)
44
46
  }
45
47
  @media screen and (min-width: 600px) {
46
- .notification__notificationComponent_131v8.notification__isClosing_131v8 {
47
- transform: translate(
48
- calc(var(--notification-desktop-content-width) + var(--gap-4xl)),
49
- 0
50
- )
48
+ .notification__notificationComponent_s4oou.notification__isClosing_s4oou {
49
+ transform: translate(calc(100% + var(--gap-4xl)), 0)
51
50
  }
52
51
  }
53
52
  @media screen and (min-width: 600px) {
54
- .notification__toastContent_131v8 {
53
+ .notification__toastContent_s4oou {
55
54
  width: var(--notification-desktop-content-width)
56
55
  }
57
56
  }
57
+ .notification__actionSection_s4oou {
58
+ min-width: 104px;
59
+ min-height: 48px;
60
+ padding: 0 var(--gap-xs);
61
+ margin: var(--gap-s-neg) 0;
62
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-notification",
3
- "version": "5.2.3",
3
+ "version": "5.2.6",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -21,11 +21,11 @@
21
21
  "dependencies": {
22
22
  "@alfalab/core-components-portal": "^2.0.2",
23
23
  "@alfalab/core-components-stack": "^3.0.2",
24
- "@alfalab/core-components-toast-plate": "^4.1.3",
24
+ "@alfalab/core-components-toast-plate": "^4.2.0",
25
25
  "classnames": "2.2.6",
26
26
  "element-closest": "3.0.2",
27
27
  "react-merge-refs": "1.1.0",
28
28
  "react-swipeable": "5.5.1"
29
29
  },
30
- "gitHead": "a185c42cf9dbfd14311fd756c696fa116214e289"
30
+ "gitHead": "a9d94bb54b83473443a06cd7338c8f822385cb13"
31
31
  }