@alfalab/core-components-notification 6.1.16 → 6.1.18

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 (19) hide show
  1. package/Component.d.ts +2 -0
  2. package/Component.js +3 -1
  3. package/cssm/Component.d.ts +2 -0
  4. package/cssm/Component.js +2 -0
  5. package/cssm/index.js +2 -0
  6. package/cssm/index.module.css +2 -2
  7. package/cssm/utils/index.js +3 -0
  8. package/esm/Component.d.ts +2 -0
  9. package/esm/Component.js +1 -1
  10. package/esm/index.css +10 -10
  11. package/esm/utils/index.js +1 -0
  12. package/index.css +10 -10
  13. package/index.js +2 -0
  14. package/modern/Component.d.ts +2 -0
  15. package/modern/Component.js +1 -1
  16. package/modern/index.css +10 -10
  17. package/modern/utils/index.js +1 -0
  18. package/package.json +4 -4
  19. package/utils/index.js +3 -0
package/Component.d.ts CHANGED
@@ -52,6 +52,8 @@ declare const Notification: React.ForwardRefExoticComponent<React.HTMLAttributes
52
52
  actionButton?: React.ReactNode;
53
53
  dataTestId?: string | undefined;
54
54
  hasCloser?: boolean | undefined;
55
+ closerWrapperClassName?: string | undefined;
56
+ closerClassName?: string | undefined;
55
57
  block?: boolean | undefined;
56
58
  onClose?: ((event?: React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent> | undefined) => void) | undefined;
57
59
  getBadgeIcons?: ((icons: import("@alfalab/core-components-toast-plate").BadgeIcons) => import("@alfalab/core-components-toast-plate").BadgeIcons) | undefined;
package/Component.js CHANGED
@@ -1,5 +1,7 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
3
5
  var tslib = require('tslib');
4
6
  var React = require('react');
5
7
  var mergeRefs = require('react-merge-refs');
@@ -18,7 +20,7 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
18
20
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
19
21
  var elementClosest__default = /*#__PURE__*/_interopDefaultCompat(elementClosest);
20
22
 
21
- var styles = {"notificationComponent":"notification__notificationComponent_rkhyt","isVisible":"notification__isVisible_rkhyt","isClosing":"notification__isClosing_rkhyt","toastContent":"notification__toastContent_rkhyt","actionSection":"notification__actionSection_rkhyt"};
23
+ var styles = {"notificationComponent":"notification__notificationComponent_1erur","isVisible":"notification__isVisible_1erur","isClosing":"notification__isClosing_1erur","toastContent":"notification__toastContent_1erur","actionSection":"notification__actionSection_1erur"};
22
24
  require('./index.css')
23
25
 
24
26
  var notificationClassNameSelector = ".".concat(styles.notificationComponent);
package/cssm/Component.d.ts CHANGED
@@ -52,6 +52,8 @@ declare const Notification: React.ForwardRefExoticComponent<React.HTMLAttributes
52
52
  actionButton?: React.ReactNode;
53
53
  dataTestId?: string | undefined;
54
54
  hasCloser?: boolean | undefined;
55
+ closerWrapperClassName?: string | undefined;
56
+ closerClassName?: string | undefined;
55
57
  block?: boolean | undefined;
56
58
  onClose?: ((event?: React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent> | undefined) => void) | undefined;
57
59
  getBadgeIcons?: ((icons: import("@alfalab/core-components-toast-plate").BadgeIcons) => import("@alfalab/core-components-toast-plate").BadgeIcons) | undefined;
package/cssm/Component.js CHANGED
@@ -1,5 +1,7 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
3
5
  var tslib = require('tslib');
4
6
  var React = require('react');
5
7
  var mergeRefs = require('react-merge-refs');
package/cssm/index.js CHANGED
@@ -1,5 +1,7 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
3
5
  var Component = require('./Component.js');
4
6
  require('tslib');
5
7
  require('react');
package/cssm/index.module.css CHANGED
@@ -1,6 +1,6 @@
1
1
  :root {
2
- } /* deprecated */ :root {
3
- } :root {
2
+ } /* deprecated */ :root { /* 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 */
3
+ } :root { /* 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 */
4
4
  } :root {
5
5
  } :root {
6
6
 
package/cssm/utils/index.js CHANGED
@@ -1,5 +1,7 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
3
5
  var React = require('react');
4
6
 
5
7
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -14,6 +16,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
16
  */
15
17
  function useClickOutside(ref, cb) {
16
18
  React__default.default.useEffect(function () {
19
+ // eslint-disable-next-line
17
20
  var handler = function (event) {
18
21
  if (!ref.current || ref.current.contains(event.target)) {
19
22
  return;
package/esm/Component.d.ts CHANGED
@@ -52,6 +52,8 @@ declare const Notification: React.ForwardRefExoticComponent<React.HTMLAttributes
52
52
  actionButton?: React.ReactNode;
53
53
  dataTestId?: string | undefined;
54
54
  hasCloser?: boolean | undefined;
55
+ closerWrapperClassName?: string | undefined;
56
+ closerClassName?: string | undefined;
55
57
  block?: boolean | undefined;
56
58
  onClose?: ((event?: React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent> | undefined) => void) | undefined;
57
59
  getBadgeIcons?: ((icons: import("@alfalab/core-components-toast-plate").BadgeIcons) => import("@alfalab/core-components-toast-plate").BadgeIcons) | undefined;
package/esm/Component.js CHANGED
@@ -9,7 +9,7 @@ import { stackingOrder, Stack } from '@alfalab/core-components-stack/esm';
9
9
  import { ToastPlate } from '@alfalab/core-components-toast-plate/esm';
10
10
  import { useClickOutside } from './utils/index.js';
11
11
 
12
- var styles = {"notificationComponent":"notification__notificationComponent_rkhyt","isVisible":"notification__isVisible_rkhyt","isClosing":"notification__isClosing_rkhyt","toastContent":"notification__toastContent_rkhyt","actionSection":"notification__actionSection_rkhyt"};
12
+ var styles = {"notificationComponent":"notification__notificationComponent_1erur","isVisible":"notification__isVisible_1erur","isClosing":"notification__isClosing_1erur","toastContent":"notification__toastContent_1erur","actionSection":"notification__actionSection_1erur"};
13
13
  require('./index.css')
14
14
 
15
15
  var notificationClassNameSelector = ".".concat(styles.notificationComponent);
package/esm/index.css CHANGED
@@ -1,7 +1,7 @@
1
- /* hash: 246ut */
1
+ /* hash: beilo */
2
2
  :root {
3
- } /* deprecated */ :root {
4
- } :root {
3
+ } /* deprecated */ :root { /* 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 */
4
+ } :root { /* 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 */
5
5
  } :root {
6
6
  } :root {
7
7
 
@@ -21,7 +21,7 @@
21
21
  } :root {
22
22
  } :root {
23
23
  --notification-desktop-content-width: 278px;
24
- } .notification__notificationComponent_rkhyt {
24
+ } .notification__notificationComponent_1erur {
25
25
  visibility: hidden;
26
26
  position: fixed;
27
27
  right: var(--gap-s);
@@ -32,24 +32,24 @@
32
32
  -webkit-user-select: none;
33
33
  user-select: none;
34
34
  transition: transform 0.4s ease-out
35
- } @media screen and (min-width: 600px) { .notification__notificationComponent_rkhyt {
35
+ } @media screen and (min-width: 600px) { .notification__notificationComponent_1erur {
36
36
  right: var(--gap-4xl);
37
37
  width: auto;
38
38
  transform: translate(calc(100% + var(--gap-4xl)), 0)
39
39
  }
40
- } .notification__notificationComponent_rkhyt.notification__isVisible_rkhyt {
40
+ } .notification__notificationComponent_1erur.notification__isVisible_1erur {
41
41
  visibility: visible;
42
42
  transform: translate(0, 0);
43
- } .notification__notificationComponent_rkhyt.notification__isClosing_rkhyt {
43
+ } .notification__notificationComponent_1erur.notification__isClosing_1erur {
44
44
  transition: transform 0.1s ease-out;
45
45
  transform: translate(100vw, 0)
46
- } @media screen and (min-width: 600px) { .notification__notificationComponent_rkhyt.notification__isClosing_rkhyt {
46
+ } @media screen and (min-width: 600px) { .notification__notificationComponent_1erur.notification__isClosing_1erur {
47
47
  transform: translate(calc(100% + var(--gap-4xl)), 0)
48
48
  }
49
- } @media screen and (min-width: 600px) { .notification__toastContent_rkhyt {
49
+ } @media screen and (min-width: 600px) { .notification__toastContent_1erur {
50
50
  width: var(--notification-desktop-content-width)
51
51
  }
52
- } .notification__actionSection_rkhyt {
52
+ } .notification__actionSection_1erur {
53
53
  min-width: 104px;
54
54
  min-height: 48px;
55
55
  padding: 0 var(--gap-xs);
package/esm/utils/index.js CHANGED
@@ -8,6 +8,7 @@ import React from 'react';
8
8
  */
9
9
  function useClickOutside(ref, cb) {
10
10
  React.useEffect(function () {
11
+ // eslint-disable-next-line
11
12
  var handler = function (event) {
12
13
  if (!ref.current || ref.current.contains(event.target)) {
13
14
  return;
package/index.css CHANGED
@@ -1,7 +1,7 @@
1
- /* hash: 246ut */
1
+ /* hash: beilo */
2
2
  :root {
3
- } /* deprecated */ :root {
4
- } :root {
3
+ } /* deprecated */ :root { /* 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 */
4
+ } :root { /* 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 */
5
5
  } :root {
6
6
  } :root {
7
7
 
@@ -21,7 +21,7 @@
21
21
  } :root {
22
22
  } :root {
23
23
  --notification-desktop-content-width: 278px;
24
- } .notification__notificationComponent_rkhyt {
24
+ } .notification__notificationComponent_1erur {
25
25
  visibility: hidden;
26
26
  position: fixed;
27
27
  right: var(--gap-s);
@@ -32,24 +32,24 @@
32
32
  -webkit-user-select: none;
33
33
  user-select: none;
34
34
  transition: transform 0.4s ease-out
35
- } @media screen and (min-width: 600px) { .notification__notificationComponent_rkhyt {
35
+ } @media screen and (min-width: 600px) { .notification__notificationComponent_1erur {
36
36
  right: var(--gap-4xl);
37
37
  width: auto;
38
38
  transform: translate(calc(100% + var(--gap-4xl)), 0)
39
39
  }
40
- } .notification__notificationComponent_rkhyt.notification__isVisible_rkhyt {
40
+ } .notification__notificationComponent_1erur.notification__isVisible_1erur {
41
41
  visibility: visible;
42
42
  transform: translate(0, 0);
43
- } .notification__notificationComponent_rkhyt.notification__isClosing_rkhyt {
43
+ } .notification__notificationComponent_1erur.notification__isClosing_1erur {
44
44
  transition: transform 0.1s ease-out;
45
45
  transform: translate(100vw, 0)
46
- } @media screen and (min-width: 600px) { .notification__notificationComponent_rkhyt.notification__isClosing_rkhyt {
46
+ } @media screen and (min-width: 600px) { .notification__notificationComponent_1erur.notification__isClosing_1erur {
47
47
  transform: translate(calc(100% + var(--gap-4xl)), 0)
48
48
  }
49
- } @media screen and (min-width: 600px) { .notification__toastContent_rkhyt {
49
+ } @media screen and (min-width: 600px) { .notification__toastContent_1erur {
50
50
  width: var(--notification-desktop-content-width)
51
51
  }
52
- } .notification__actionSection_rkhyt {
52
+ } .notification__actionSection_1erur {
53
53
  min-width: 104px;
54
54
  min-height: 48px;
55
55
  padding: 0 var(--gap-xs);
package/index.js CHANGED
@@ -1,5 +1,7 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
3
5
  var Component = require('./Component.js');
4
6
  require('tslib');
5
7
  require('react');
package/modern/Component.d.ts CHANGED
@@ -52,6 +52,8 @@ declare const Notification: React.ForwardRefExoticComponent<React.HTMLAttributes
52
52
  actionButton?: React.ReactNode;
53
53
  dataTestId?: string | undefined;
54
54
  hasCloser?: boolean | undefined;
55
+ closerWrapperClassName?: string | undefined;
56
+ closerClassName?: string | undefined;
55
57
  block?: boolean | undefined;
56
58
  onClose?: ((event?: React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent> | undefined) => void) | undefined;
57
59
  getBadgeIcons?: ((icons: import("@alfalab/core-components-toast-plate").BadgeIcons) => import("@alfalab/core-components-toast-plate").BadgeIcons) | undefined;
package/modern/Component.js CHANGED
@@ -8,7 +8,7 @@ import { Stack, stackingOrder } from '@alfalab/core-components-stack/modern';
8
8
  import { ToastPlate } from '@alfalab/core-components-toast-plate/modern';
9
9
  import { useClickOutside } from './utils/index.js';
10
10
 
11
- const styles = {"notificationComponent":"notification__notificationComponent_rkhyt","isVisible":"notification__isVisible_rkhyt","isClosing":"notification__isClosing_rkhyt","toastContent":"notification__toastContent_rkhyt","actionSection":"notification__actionSection_rkhyt"};
11
+ const styles = {"notificationComponent":"notification__notificationComponent_1erur","isVisible":"notification__isVisible_1erur","isClosing":"notification__isClosing_1erur","toastContent":"notification__toastContent_1erur","actionSection":"notification__actionSection_1erur"};
12
12
  require('./index.css')
13
13
 
14
14
  const notificationClassNameSelector = `.${styles.notificationComponent}`;
package/modern/index.css CHANGED
@@ -1,7 +1,7 @@
1
- /* hash: 246ut */
1
+ /* hash: beilo */
2
2
  :root {
3
- } /* deprecated */ :root {
4
- } :root {
3
+ } /* deprecated */ :root { /* 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 */
4
+ } :root { /* 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 */
5
5
  } :root {
6
6
  } :root {
7
7
 
@@ -21,7 +21,7 @@
21
21
  } :root {
22
22
  } :root {
23
23
  --notification-desktop-content-width: 278px;
24
- } .notification__notificationComponent_rkhyt {
24
+ } .notification__notificationComponent_1erur {
25
25
  visibility: hidden;
26
26
  position: fixed;
27
27
  right: var(--gap-s);
@@ -32,24 +32,24 @@
32
32
  -webkit-user-select: none;
33
33
  user-select: none;
34
34
  transition: transform 0.4s ease-out
35
- } @media screen and (min-width: 600px) { .notification__notificationComponent_rkhyt {
35
+ } @media screen and (min-width: 600px) { .notification__notificationComponent_1erur {
36
36
  right: var(--gap-4xl);
37
37
  width: auto;
38
38
  transform: translate(calc(100% + var(--gap-4xl)), 0)
39
39
  }
40
- } .notification__notificationComponent_rkhyt.notification__isVisible_rkhyt {
40
+ } .notification__notificationComponent_1erur.notification__isVisible_1erur {
41
41
  visibility: visible;
42
42
  transform: translate(0, 0);
43
- } .notification__notificationComponent_rkhyt.notification__isClosing_rkhyt {
43
+ } .notification__notificationComponent_1erur.notification__isClosing_1erur {
44
44
  transition: transform 0.1s ease-out;
45
45
  transform: translate(100vw, 0)
46
- } @media screen and (min-width: 600px) { .notification__notificationComponent_rkhyt.notification__isClosing_rkhyt {
46
+ } @media screen and (min-width: 600px) { .notification__notificationComponent_1erur.notification__isClosing_1erur {
47
47
  transform: translate(calc(100% + var(--gap-4xl)), 0)
48
48
  }
49
- } @media screen and (min-width: 600px) { .notification__toastContent_rkhyt {
49
+ } @media screen and (min-width: 600px) { .notification__toastContent_1erur {
50
50
  width: var(--notification-desktop-content-width)
51
51
  }
52
- } .notification__actionSection_rkhyt {
52
+ } .notification__actionSection_1erur {
53
53
  min-width: 104px;
54
54
  min-height: 48px;
55
55
  padding: 0 var(--gap-xs);
package/modern/utils/index.js CHANGED
@@ -8,6 +8,7 @@ import React from 'react';
8
8
  */
9
9
  function useClickOutside(ref, cb) {
10
10
  React.useEffect(() => {
11
+ // eslint-disable-next-line
11
12
  const handler = (event) => {
12
13
  if (!ref.current || ref.current.contains(event.target)) {
13
14
  return;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-notification",
3
- "version": "6.1.16",
3
+ "version": "6.1.18",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -17,9 +17,9 @@
17
17
  "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
18
18
  },
19
19
  "dependencies": {
20
- "@alfalab/core-components-portal": "^3.1.3",
21
- "@alfalab/core-components-stack": "^4.0.3",
22
- "@alfalab/core-components-toast-plate": "^5.1.14",
20
+ "@alfalab/core-components-portal": "^3.1.4",
21
+ "@alfalab/core-components-stack": "^4.0.4",
22
+ "@alfalab/core-components-toast-plate": "^5.1.16",
23
23
  "classnames": "^2.3.1",
24
24
  "element-closest": "^3.0.2",
25
25
  "react-merge-refs": "^1.1.0",
package/utils/index.js CHANGED
@@ -1,5 +1,7 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
3
5
  var React = require('react');
4
6
 
5
7
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -14,6 +16,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
16
  */
15
17
  function useClickOutside(ref, cb) {
16
18
  React__default.default.useEffect(function () {
19
+ // eslint-disable-next-line
17
20
  var handler = function (event) {
18
21
  if (!ref.current || ref.current.contains(event.target)) {
19
22
  return;