@alfalab/core-components-notification 7.5.10 → 8.0.0-snapshot-1393ffa

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 (129) hide show
  1. package/Component.js +11 -12
  2. package/Component.js.map +1 -0
  3. package/cssm/Component.js +9 -8
  4. package/cssm/Component.js.map +1 -0
  5. package/cssm/index.js +1 -0
  6. package/cssm/index.js.map +1 -0
  7. package/cssm/index.module.css +7 -27
  8. package/cssm/shared/index.js +3 -2
  9. package/cssm/shared/index.js.map +1 -0
  10. package/{Component.d.ts → cssm/src/Component.d.ts} +5 -8
  11. package/cssm/src/index.d.ts +1 -0
  12. package/cssm/src/shared/index.d.ts +1 -0
  13. package/cssm/src/utils/getNotificationTestIds.d.ts +4 -0
  14. package/cssm/src/utils/index.d.ts +2 -0
  15. package/cssm/utils/getNotificationTestIds.js +4 -19
  16. package/cssm/utils/getNotificationTestIds.js.map +1 -0
  17. package/cssm/utils/index.js +1 -0
  18. package/cssm/utils/index.js.map +1 -0
  19. package/esm/Component.js +3 -4
  20. package/esm/Component.js.map +1 -0
  21. package/esm/index.css +15 -36
  22. package/esm/index.js +1 -0
  23. package/esm/index.js.map +1 -0
  24. package/esm/index.module.css.js +6 -0
  25. package/esm/index.module.css.js.map +1 -0
  26. package/esm/shared/index.js +1 -0
  27. package/esm/shared/index.js.map +1 -0
  28. package/esm/{Component.d.ts → src/Component.d.ts} +5 -8
  29. package/esm/src/index.d.ts +1 -0
  30. package/esm/src/shared/index.d.ts +1 -0
  31. package/esm/src/utils/getNotificationTestIds.d.ts +4 -0
  32. package/esm/src/utils/index.d.ts +2 -0
  33. package/esm/utils/getNotificationTestIds.js +2 -17
  34. package/esm/utils/getNotificationTestIds.js.map +1 -0
  35. package/esm/utils/index.js +1 -0
  36. package/esm/utils/index.js.map +1 -0
  37. package/index.css +15 -36
  38. package/index.js +1 -0
  39. package/index.js.map +1 -0
  40. package/index.module.css.js +8 -0
  41. package/index.module.css.js.map +1 -0
  42. package/modern/Component.js +3 -4
  43. package/modern/Component.js.map +1 -0
  44. package/modern/index.css +15 -36
  45. package/modern/index.js +1 -0
  46. package/modern/index.js.map +1 -0
  47. package/modern/index.module.css.js +6 -0
  48. package/modern/index.module.css.js.map +1 -0
  49. package/modern/shared/index.js +1 -0
  50. package/modern/shared/index.js.map +1 -0
  51. package/{cssm → modern/src}/Component.d.ts +5 -8
  52. package/modern/src/index.d.ts +1 -0
  53. package/modern/src/shared/index.d.ts +1 -0
  54. package/modern/src/utils/getNotificationTestIds.d.ts +4 -0
  55. package/modern/src/utils/index.d.ts +2 -0
  56. package/modern/utils/getNotificationTestIds.js +2 -17
  57. package/modern/utils/getNotificationTestIds.js.map +1 -0
  58. package/modern/utils/index.js +1 -0
  59. package/modern/utils/index.js.map +1 -0
  60. package/moderncssm/Component.js +2 -1
  61. package/moderncssm/Component.js.map +1 -0
  62. package/moderncssm/index.js +1 -0
  63. package/moderncssm/index.js.map +1 -0
  64. package/moderncssm/index.module.css +1 -2
  65. package/moderncssm/shared/index.js +1 -0
  66. package/moderncssm/shared/index.js.map +1 -0
  67. package/{modern → moderncssm/src}/Component.d.ts +5 -8
  68. package/moderncssm/src/index.d.ts +1 -0
  69. package/moderncssm/src/shared/index.d.ts +1 -0
  70. package/moderncssm/src/utils/getNotificationTestIds.d.ts +4 -0
  71. package/moderncssm/src/utils/index.d.ts +2 -0
  72. package/moderncssm/utils/getNotificationTestIds.js +2 -17
  73. package/moderncssm/utils/getNotificationTestIds.js.map +1 -0
  74. package/moderncssm/utils/index.js +1 -0
  75. package/moderncssm/utils/index.js.map +1 -0
  76. package/package.json +8 -6
  77. package/shared/index.js +3 -2
  78. package/shared/index.js.map +1 -0
  79. package/src/Component.d.ts +86 -0
  80. package/src/Component.tsx +1 -1
  81. package/src/index.d.ts +1 -0
  82. package/src/shared/index.d.ts +1 -0
  83. package/src/utils/getNotificationTestIds.d.ts +4 -0
  84. package/src/utils/index.d.ts +2 -0
  85. package/utils/getNotificationTestIds.js +4 -19
  86. package/utils/getNotificationTestIds.js.map +1 -0
  87. package/utils/index.js +1 -0
  88. package/utils/index.js.map +1 -0
  89. package/browser-e5f2ef37.d.ts +0 -8
  90. package/cssm/browser-e5f2ef37.d.ts +0 -8
  91. package/cssm/fnUtils-edf8408d.d.ts +0 -16
  92. package/cssm/index.d.ts +0 -1
  93. package/cssm/shared/index.d.ts +0 -1
  94. package/cssm/useCustomWebkitScrollbar-e5f2ef37.d.ts +0 -2
  95. package/cssm/useIsMounted-edf8408d.d.ts +0 -3
  96. package/cssm/utils/getNotificationTestIds.d.ts +0 -5
  97. package/cssm/utils/index.d.ts +0 -4
  98. package/esm/browser-e5f2ef37.d.ts +0 -8
  99. package/esm/fnUtils-edf8408d.d.ts +0 -16
  100. package/esm/index.d.ts +0 -1
  101. package/esm/shared/index.d.ts +0 -1
  102. package/esm/useCustomWebkitScrollbar-e5f2ef37.d.ts +0 -2
  103. package/esm/useIsMounted-edf8408d.d.ts +0 -3
  104. package/esm/utils/getNotificationTestIds.d.ts +0 -5
  105. package/esm/utils/index.d.ts +0 -4
  106. package/fnUtils-edf8408d.d.ts +0 -16
  107. package/index.d.ts +0 -1
  108. package/modern/browser-e5f2ef37.d.ts +0 -8
  109. package/modern/fnUtils-edf8408d.d.ts +0 -16
  110. package/modern/index.d.ts +0 -1
  111. package/modern/shared/index.d.ts +0 -1
  112. package/modern/useCustomWebkitScrollbar-e5f2ef37.d.ts +0 -2
  113. package/modern/useIsMounted-edf8408d.d.ts +0 -3
  114. package/modern/utils/getNotificationTestIds.d.ts +0 -5
  115. package/modern/utils/index.d.ts +0 -4
  116. package/moderncssm/Component.d.ts +0 -89
  117. package/moderncssm/browser-e5f2ef37.d.ts +0 -8
  118. package/moderncssm/fnUtils-edf8408d.d.ts +0 -16
  119. package/moderncssm/index.d.ts +0 -1
  120. package/moderncssm/shared/index.d.ts +0 -1
  121. package/moderncssm/useCustomWebkitScrollbar-e5f2ef37.d.ts +0 -2
  122. package/moderncssm/useIsMounted-edf8408d.d.ts +0 -3
  123. package/moderncssm/utils/getNotificationTestIds.d.ts +0 -5
  124. package/moderncssm/utils/index.d.ts +0 -4
  125. package/shared/index.d.ts +0 -1
  126. package/useCustomWebkitScrollbar-e5f2ef37.d.ts +0 -2
  127. package/useIsMounted-edf8408d.d.ts +0 -3
  128. package/utils/getNotificationTestIds.d.ts +0 -5
  129. package/utils/index.d.ts +0 -4
package/Component.js CHANGED
@@ -10,9 +10,10 @@ var cn = require('classnames');
10
10
  var elementClosest = require('element-closest');
11
11
  var coreComponentsPortal = require('@alfalab/core-components-portal');
12
12
  var coreComponentsStack = require('@alfalab/core-components-stack');
13
+ var coreComponentsStackContext = require('@alfalab/core-components-stack-context');
13
14
  var desktop = require('@alfalab/core-components-toast-plate/desktop');
14
- var stackContext = require('@alfalab/stack-context');
15
- var utils_index = require('./utils/index.js');
15
+ var index = require('./utils/index.js');
16
+ var index_module = require('./index.module.css.js');
16
17
 
17
18
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
18
19
 
@@ -21,12 +22,9 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
21
22
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
22
23
  var elementClosest__default = /*#__PURE__*/_interopDefaultCompat(elementClosest);
23
24
 
24
- var styles = {"notificationComponent":"notification__notificationComponent_1o0d1","isVisible":"notification__isVisible_1o0d1","isClosing":"notification__isClosing_1o0d1","toastContent":"notification__toastContent_1o0d1","actionSection":"notification__actionSection_1o0d1"};
25
- require('./index.css')
26
-
27
- var notificationClassNameSelector = ".".concat(styles.notificationComponent);
25
+ var notificationClassNameSelector = ".".concat(index_module.notificationComponent);
28
26
  var Notification = React.forwardRef(function (_a, ref) {
29
- 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 ? stackContext.stackingOrder.TOAST : _f, style = _a.style, _g = _a.position, position = _g === void 0 ? 'top' : _g, onClose = _a.onClose, onCloseTimeout = _a.onCloseTimeout, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onClickOutside = _a.onClickOutside, restProps = tslib.__rest(_a, ["className", "actionSectionClassName", "children", "visible", "offset", "hasCloser", "autoCloseDelay", "usePortal", "zIndex", "style", "position", "onClose", "onCloseTimeout", "onMouseEnter", "onMouseLeave", "onClickOutside"]);
27
+ 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 ? coreComponentsStackContext.stackingOrder.TOAST : _f, style = _a.style, _g = _a.position, position = _g === void 0 ? 'top' : _g, onClose = _a.onClose, onCloseTimeout = _a.onCloseTimeout, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onClickOutside = _a.onClickOutside, restProps = tslib.__rest(_a, ["className", "actionSectionClassName", "children", "visible", "offset", "hasCloser", "autoCloseDelay", "usePortal", "zIndex", "style", "position", "onClose", "onCloseTimeout", "onMouseEnter", "onMouseLeave", "onClickOutside"]);
30
28
  var notificationRef = React.useRef(null);
31
29
  var autoCloseTimeoutRef = React.useRef(0);
32
30
  var closeTimeoutRef = React.useRef(0);
@@ -80,7 +78,7 @@ var Notification = React.forwardRef(function (_a, ref) {
80
78
  onClickOutside(event);
81
79
  }
82
80
  }, [onClickOutside, visible]);
83
- utils_index.useClickOutside(notificationRef, handleOutsideClick);
81
+ index.useClickOutside(notificationRef, handleOutsideClick);
84
82
  var swipeableHandlers = reactSwipeable.useSwipeable({
85
83
  onSwiped: function (_a) {
86
84
  var dir = _a.dir;
@@ -99,12 +97,13 @@ var Notification = React.forwardRef(function (_a, ref) {
99
97
  var _a, _b;
100
98
  return (React__default.default.createElement(Wrapper, null,
101
99
  React__default.default.createElement("div", tslib.__assign({}, swipeableHandlers),
102
- React__default.default.createElement(desktop.ToastPlateDesktop, tslib.__assign({ className: cn__default.default(styles.notificationComponent, (_a = {},
103
- _a[styles.isVisible] = visible,
104
- _a[styles.isClosing] = isClosing,
105
- _a), className), contentClassName: styles.toastContent, actionSectionClassName: cn__default.default(actionSectionClassName, styles.actionSection), style: tslib.__assign((_b = {}, _b[position] = offset, _b.zIndex = computedZIndex, _b), style), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: mergeRefs__default.default([ref, notificationRef]), role: visible ? 'alert' : undefined, hasCloser: hasCloser, onClose: onClose }, restProps), children))));
100
+ React__default.default.createElement(desktop.ToastPlateDesktop, tslib.__assign({ className: cn__default.default(index_module.notificationComponent, (_a = {},
101
+ _a[index_module.isVisible] = visible,
102
+ _a[index_module.isClosing] = isClosing,
103
+ _a), className), contentClassName: index_module.toastContent, actionSectionClassName: cn__default.default(actionSectionClassName, index_module.actionSection), style: tslib.__assign((_b = {}, _b[position] = offset, _b.zIndex = computedZIndex, _b), style), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: mergeRefs__default.default([ref, notificationRef]), role: visible ? 'alert' : undefined, hasCloser: hasCloser, onClose: onClose }, restProps), children))));
106
104
  }));
107
105
  });
108
106
  Notification.displayName = 'Notification';
109
107
 
110
108
  exports.Notification = Notification;
109
+ //# sourceMappingURL=Component.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n forwardRef,\n Fragment,\n MouseEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { useSwipeable } from 'react-swipeable';\nimport cn from 'classnames';\nimport elementClosest from 'element-closest';\n\nimport { Portal } from '@alfalab/core-components-portal';\nimport { Stack } from '@alfalab/core-components-stack';\nimport { stackingOrder } from '@alfalab/core-components-stack-context';\nimport {\n ToastPlateDesktop,\n ToastPlateDesktopProps,\n} from '@alfalab/core-components-toast-plate/desktop';\n\nimport { useClickOutside } from './utils';\n\nimport styles from './index.module.css';\n\nexport type NotificationProps = ToastPlateDesktopProps & {\n /**\n * Управление видимостью компонента\n */\n visible?: boolean;\n\n /**\n * Отступ от верхнего края\n */\n offset?: number;\n\n /**\n * Время до закрытия компонента\n */\n autoCloseDelay?: number | null;\n\n /**\n * Использовать портал\n */\n usePortal?: boolean;\n\n /**\n * z-index компонента\n */\n zIndex?: number;\n\n /**\n * Позиционирование компонента от верхнего или нижнего края экрана\n */\n position?: 'top' | 'bottom';\n\n /**\n * Обработчик события истечения времени до закрытия компонента\n */\n onCloseTimeout?: () => void;\n\n /**\n * Обработчик события наведения курсора на компонент\n */\n onMouseEnter?: (event?: MouseEvent<HTMLDivElement>) => void;\n\n /**\n * Обработчик события снятия курсора с компонента\n */\n onMouseLeave?: (event?: MouseEvent<HTMLDivElement>) => void;\n\n /**\n * Обработчик клика вне компонента\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onClickOutside?: (event?: MouseEvent<any>) => void;\n};\n\nconst notificationClassNameSelector = `.${styles.notificationComponent}`;\n\nexport const Notification = forwardRef<HTMLDivElement, NotificationProps>(\n (\n {\n className,\n actionSectionClassName,\n children,\n visible,\n offset = 108,\n hasCloser = true,\n autoCloseDelay = 5000,\n usePortal = true,\n zIndex = stackingOrder.TOAST,\n style,\n position = 'top',\n onClose,\n onCloseTimeout,\n onMouseEnter,\n onMouseLeave,\n onClickOutside,\n ...restProps\n },\n ref,\n ) => {\n const notificationRef = useRef<HTMLDivElement>(null);\n const autoCloseTimeoutRef = useRef(0);\n const closeTimeoutRef = useRef(0);\n\n const [isClosing, setIsClosing] = useState(false);\n\n const startAutoCloseTimer = useCallback(() => {\n if (autoCloseDelay !== null) {\n autoCloseTimeoutRef.current = window.setTimeout(() => {\n if (onCloseTimeout) {\n onCloseTimeout();\n }\n }, autoCloseDelay);\n }\n }, [autoCloseDelay, onCloseTimeout]);\n\n const stopAutoCloseTimer = useCallback(() => {\n clearTimeout(autoCloseTimeoutRef.current);\n }, []);\n\n useEffect(\n () => () => {\n clearTimeout(closeTimeoutRef.current);\n },\n [],\n );\n\n useEffect(() => {\n elementClosest(window);\n }, []);\n\n useEffect(() => {\n if (visible) {\n startAutoCloseTimer();\n }\n\n return () => {\n stopAutoCloseTimer();\n };\n }, [startAutoCloseTimer, stopAutoCloseTimer, visible]);\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n stopAutoCloseTimer();\n\n if (onMouseEnter) {\n onMouseEnter(event);\n }\n },\n [onMouseEnter, stopAutoCloseTimer],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n stopAutoCloseTimer();\n startAutoCloseTimer();\n\n if (onMouseLeave) {\n onMouseLeave(event);\n }\n },\n [onMouseLeave, startAutoCloseTimer, stopAutoCloseTimer],\n );\n\n const handleOutsideClick = useCallback(\n (event: React.MouseEvent | React.TouchEvent) => {\n const isTargetNotification = !!(event.target as Element).closest(\n notificationClassNameSelector,\n );\n\n /*\n * проверка isTargetNotification нужна для предотвращения срабатывания handleOutsideClick\n * при клике на другие нотификации, если их несколько на странице\n */\n if (onClickOutside && visible && !isTargetNotification) {\n onClickOutside(event as React.MouseEvent);\n }\n },\n [onClickOutside, visible],\n );\n\n useClickOutside(notificationRef, handleOutsideClick);\n\n const swipeableHandlers = useSwipeable({\n onSwiped: ({ dir }) => {\n if (onClose && ['Left', 'Right', 'Up'].includes(dir)) {\n setIsClosing(true);\n\n closeTimeoutRef.current = window.setTimeout(() => {\n setIsClosing(false);\n onClose();\n }, 100);\n }\n },\n delta: 100,\n });\n\n const Wrapper = usePortal ? Portal : Fragment;\n\n return (\n <Stack value={zIndex}>\n {(computedZIndex) => (\n <Wrapper>\n <div {...swipeableHandlers}>\n <ToastPlateDesktop\n className={cn(\n styles.notificationComponent,\n {\n [styles.isVisible]: visible,\n [styles.isClosing]: isClosing,\n },\n className,\n )}\n contentClassName={styles.toastContent}\n actionSectionClassName={cn(\n actionSectionClassName,\n styles.actionSection,\n )}\n style={{\n [position]: offset,\n zIndex: computedZIndex,\n ...style,\n }}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n ref={mergeRefs([ref, notificationRef])}\n role={visible ? 'alert' : undefined}\n hasCloser={hasCloser}\n onClose={onClose}\n {...restProps}\n >\n {children}\n </ToastPlateDesktop>\n </div>\n </Wrapper>\n )}\n </Stack>\n );\n },\n);\n\nNotification.displayName = 'Notification';\n"],"names":["styles","forwardRef","stackingOrder","__rest","useRef","useState","useCallback","useEffect","elementClosest","useClickOutside","useSwipeable","Portal","Fragment","React","Stack","__assign","ToastPlateDesktop","cn","mergeRefs"],"mappings":"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"}
package/cssm/Component.js CHANGED
@@ -8,11 +8,11 @@ var mergeRefs = require('react-merge-refs');
8
8
  var reactSwipeable = require('react-swipeable');
9
9
  var cn = require('classnames');
10
10
  var elementClosest = require('element-closest');
11
- var coreComponentsPortal = require('@alfalab/core-components-portal/cssm');
12
- var coreComponentsStack = require('@alfalab/core-components-stack/cssm');
11
+ var cssm$2 = require('@alfalab/core-components-portal/cssm');
12
+ var cssm$1 = require('@alfalab/core-components-stack/cssm');
13
+ var cssm = require('@alfalab/core-components-stack-context/cssm');
13
14
  var desktop = require('@alfalab/core-components-toast-plate/cssm/desktop');
14
- var stackContext = require('@alfalab/stack-context');
15
- var utils_index = require('./utils/index.js');
15
+ var index = require('./utils/index.js');
16
16
  var styles = require('./index.module.css');
17
17
 
18
18
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -25,7 +25,7 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
25
25
 
26
26
  var notificationClassNameSelector = ".".concat(styles__default.default.notificationComponent);
27
27
  var Notification = React.forwardRef(function (_a, ref) {
28
- 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 ? stackContext.stackingOrder.TOAST : _f, style = _a.style, _g = _a.position, position = _g === void 0 ? 'top' : _g, onClose = _a.onClose, onCloseTimeout = _a.onCloseTimeout, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onClickOutside = _a.onClickOutside, restProps = tslib.__rest(_a, ["className", "actionSectionClassName", "children", "visible", "offset", "hasCloser", "autoCloseDelay", "usePortal", "zIndex", "style", "position", "onClose", "onCloseTimeout", "onMouseEnter", "onMouseLeave", "onClickOutside"]);
28
+ 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 ? cssm.stackingOrder.TOAST : _f, style = _a.style, _g = _a.position, position = _g === void 0 ? 'top' : _g, onClose = _a.onClose, onCloseTimeout = _a.onCloseTimeout, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onClickOutside = _a.onClickOutside, restProps = tslib.__rest(_a, ["className", "actionSectionClassName", "children", "visible", "offset", "hasCloser", "autoCloseDelay", "usePortal", "zIndex", "style", "position", "onClose", "onCloseTimeout", "onMouseEnter", "onMouseLeave", "onClickOutside"]);
29
29
  var notificationRef = React.useRef(null);
30
30
  var autoCloseTimeoutRef = React.useRef(0);
31
31
  var closeTimeoutRef = React.useRef(0);
@@ -79,7 +79,7 @@ var Notification = React.forwardRef(function (_a, ref) {
79
79
  onClickOutside(event);
80
80
  }
81
81
  }, [onClickOutside, visible]);
82
- utils_index.useClickOutside(notificationRef, handleOutsideClick);
82
+ index.useClickOutside(notificationRef, handleOutsideClick);
83
83
  var swipeableHandlers = reactSwipeable.useSwipeable({
84
84
  onSwiped: function (_a) {
85
85
  var dir = _a.dir;
@@ -93,8 +93,8 @@ var Notification = React.forwardRef(function (_a, ref) {
93
93
  },
94
94
  delta: 100,
95
95
  });
96
- var Wrapper = usePortal ? coreComponentsPortal.Portal : React.Fragment;
97
- return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) {
96
+ var Wrapper = usePortal ? cssm$2.Portal : React.Fragment;
97
+ return (React__default.default.createElement(cssm$1.Stack, { value: zIndex }, function (computedZIndex) {
98
98
  var _a, _b;
99
99
  return (React__default.default.createElement(Wrapper, null,
100
100
  React__default.default.createElement("div", tslib.__assign({}, swipeableHandlers),
@@ -107,3 +107,4 @@ var Notification = React.forwardRef(function (_a, ref) {
107
107
  Notification.displayName = 'Notification';
108
108
 
109
109
  exports.Notification = Notification;
110
+ //# sourceMappingURL=Component.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Component.js","sources":["../../src/Component.tsx"],"sourcesContent":["import React, {\n forwardRef,\n Fragment,\n MouseEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { useSwipeable } from 'react-swipeable';\nimport cn from 'classnames';\nimport elementClosest from 'element-closest';\n\nimport { Portal } from '@alfalab/core-components-portal';\nimport { Stack } from '@alfalab/core-components-stack';\nimport { stackingOrder } from '@alfalab/core-components-stack-context';\nimport {\n ToastPlateDesktop,\n ToastPlateDesktopProps,\n} from '@alfalab/core-components-toast-plate/desktop';\n\nimport { useClickOutside } from './utils';\n\nimport styles from './index.module.css';\n\nexport type NotificationProps = ToastPlateDesktopProps & {\n /**\n * Управление видимостью компонента\n */\n visible?: boolean;\n\n /**\n * Отступ от верхнего края\n */\n offset?: number;\n\n /**\n * Время до закрытия компонента\n */\n autoCloseDelay?: number | null;\n\n /**\n * Использовать портал\n */\n usePortal?: boolean;\n\n /**\n * z-index компонента\n */\n zIndex?: number;\n\n /**\n * Позиционирование компонента от верхнего или нижнего края экрана\n */\n position?: 'top' | 'bottom';\n\n /**\n * Обработчик события истечения времени до закрытия компонента\n */\n onCloseTimeout?: () => void;\n\n /**\n * Обработчик события наведения курсора на компонент\n */\n onMouseEnter?: (event?: MouseEvent<HTMLDivElement>) => void;\n\n /**\n * Обработчик события снятия курсора с компонента\n */\n onMouseLeave?: (event?: MouseEvent<HTMLDivElement>) => void;\n\n /**\n * Обработчик клика вне компонента\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onClickOutside?: (event?: MouseEvent<any>) => void;\n};\n\nconst notificationClassNameSelector = `.${styles.notificationComponent}`;\n\nexport const Notification = forwardRef<HTMLDivElement, NotificationProps>(\n (\n {\n className,\n actionSectionClassName,\n children,\n visible,\n offset = 108,\n hasCloser = true,\n autoCloseDelay = 5000,\n usePortal = true,\n zIndex = stackingOrder.TOAST,\n style,\n position = 'top',\n onClose,\n onCloseTimeout,\n onMouseEnter,\n onMouseLeave,\n onClickOutside,\n ...restProps\n },\n ref,\n ) => {\n const notificationRef = useRef<HTMLDivElement>(null);\n const autoCloseTimeoutRef = useRef(0);\n const closeTimeoutRef = useRef(0);\n\n const [isClosing, setIsClosing] = useState(false);\n\n const startAutoCloseTimer = useCallback(() => {\n if (autoCloseDelay !== null) {\n autoCloseTimeoutRef.current = window.setTimeout(() => {\n if (onCloseTimeout) {\n onCloseTimeout();\n }\n }, autoCloseDelay);\n }\n }, [autoCloseDelay, onCloseTimeout]);\n\n const stopAutoCloseTimer = useCallback(() => {\n clearTimeout(autoCloseTimeoutRef.current);\n }, []);\n\n useEffect(\n () => () => {\n clearTimeout(closeTimeoutRef.current);\n },\n [],\n );\n\n useEffect(() => {\n elementClosest(window);\n }, []);\n\n useEffect(() => {\n if (visible) {\n startAutoCloseTimer();\n }\n\n return () => {\n stopAutoCloseTimer();\n };\n }, [startAutoCloseTimer, stopAutoCloseTimer, visible]);\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n stopAutoCloseTimer();\n\n if (onMouseEnter) {\n onMouseEnter(event);\n }\n },\n [onMouseEnter, stopAutoCloseTimer],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n stopAutoCloseTimer();\n startAutoCloseTimer();\n\n if (onMouseLeave) {\n onMouseLeave(event);\n }\n },\n [onMouseLeave, startAutoCloseTimer, stopAutoCloseTimer],\n );\n\n const handleOutsideClick = useCallback(\n (event: React.MouseEvent | React.TouchEvent) => {\n const isTargetNotification = !!(event.target as Element).closest(\n notificationClassNameSelector,\n );\n\n /*\n * проверка isTargetNotification нужна для предотвращения срабатывания handleOutsideClick\n * при клике на другие нотификации, если их несколько на странице\n */\n if (onClickOutside && visible && !isTargetNotification) {\n onClickOutside(event as React.MouseEvent);\n }\n },\n [onClickOutside, visible],\n );\n\n useClickOutside(notificationRef, handleOutsideClick);\n\n const swipeableHandlers = useSwipeable({\n onSwiped: ({ dir }) => {\n if (onClose && ['Left', 'Right', 'Up'].includes(dir)) {\n setIsClosing(true);\n\n closeTimeoutRef.current = window.setTimeout(() => {\n setIsClosing(false);\n onClose();\n }, 100);\n }\n },\n delta: 100,\n });\n\n const Wrapper = usePortal ? Portal : Fragment;\n\n return (\n <Stack value={zIndex}>\n {(computedZIndex) => (\n <Wrapper>\n <div {...swipeableHandlers}>\n <ToastPlateDesktop\n className={cn(\n styles.notificationComponent,\n {\n [styles.isVisible]: visible,\n [styles.isClosing]: isClosing,\n },\n className,\n )}\n contentClassName={styles.toastContent}\n actionSectionClassName={cn(\n actionSectionClassName,\n styles.actionSection,\n )}\n style={{\n [position]: offset,\n zIndex: computedZIndex,\n ...style,\n }}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n ref={mergeRefs([ref, notificationRef])}\n role={visible ? 'alert' : undefined}\n hasCloser={hasCloser}\n onClose={onClose}\n {...restProps}\n >\n {children}\n </ToastPlateDesktop>\n </div>\n </Wrapper>\n )}\n </Stack>\n );\n },\n);\n\nNotification.displayName = 'Notification';\n"],"names":["styles","forwardRef","stackingOrder","__rest","useRef","useState","useCallback","useEffect","elementClosest","useClickOutside","useSwipeable","Portal","Fragment","React","Stack","__assign","ToastPlateDesktop","cn","mergeRefs"],"mappings":"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"}
package/cssm/index.js CHANGED
@@ -7,3 +7,4 @@ var Component = require('./Component.js');
7
7
 
8
8
 
9
9
  exports.Notification = Component.Notification;
10
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
@@ -1,28 +1,9 @@
1
- :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 */ /* 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 */
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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */
5
- } :root {
6
-
7
- /* Hard */
8
-
9
- /* Up */
10
-
11
- /* Hard up */
12
- } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
13
-
14
- /* новые значения, используйте их */
15
- } :root { /* deprecated */ /* deprecated */
16
- --gap-xs: 8px; /* deprecated */
17
- --gap-s: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
18
- --gap-xl: 24px; /* deprecated */ /* deprecated */ /* deprecated */
19
- --gap-4xl: 48px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
20
- --gap-s-neg: -12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
21
-
22
- /* новые значения, используйте их */
23
-
24
- /* no-unit может приводить к проблемам в calc (#1559) */
25
- /* stylelint-disable-next-line length-zero-no-unit */
1
+ :root {
2
+ --gap-xs: 8px;
3
+ --gap-s: 12px;
4
+ --gap-xl: 24px;
5
+ --gap-4xl: 48px;
6
+ --gap-s-neg: -12px;
26
7
  --gap-0: 0px;
27
8
  --gap-8: var(--gap-xs);
28
9
  --gap-12: var(--gap-s);
@@ -30,8 +11,6 @@
30
11
  --gap-48: var(--gap-4xl);
31
12
  --gap-12-neg: var(--gap-s-neg);
32
13
  } :root {
33
- } :root {
34
- } /* сбрасывает синюю подсветку при нажатии */ :root {
35
14
  --notification-desktop-content-width: 278px;
36
15
  } .notificationComponent {
37
16
  visibility: hidden;
@@ -40,6 +19,7 @@
40
19
  width: calc(100% - var(--gap-24));
41
20
  max-width: calc(100vw - var(--gap-24));
42
21
  -webkit-user-select: none;
22
+ -moz-user-select: none;
43
23
  user-select: none;
44
24
  transition: transform 0.4s ease-out
45
25
  } @media screen and (min-width: 600px) { .notificationComponent {
@@ -2,8 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var utils_getNotificationTestIds = require('../utils/getNotificationTestIds.js');
5
+ var getNotificationTestIds = require('../utils/getNotificationTestIds.js');
6
6
 
7
7
 
8
8
 
9
- exports.getNotificationTestIds = utils_getNotificationTestIds.getNotificationTestIds;
9
+ exports.getNotificationTestIds = getNotificationTestIds.getNotificationTestIds;
10
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
@@ -1,8 +1,6 @@
1
- /// <reference types="react" />
2
- import React from 'react';
3
- import { MouseEvent } from "react";
4
- import { ToastPlateDesktopProps } from "@alfalab/core-components-toast-plate/desktop";
5
- type NotificationProps = ToastPlateDesktopProps & {
1
+ import React, { MouseEvent } from 'react';
2
+ import { ToastPlateDesktopProps } from '@alfalab/core-components-toast-plate/desktop';
3
+ export declare type NotificationProps = ToastPlateDesktopProps & {
6
4
  /**
7
5
  * Управление видимостью компонента
8
6
  */
@@ -44,7 +42,7 @@ type NotificationProps = ToastPlateDesktopProps & {
44
42
  */
45
43
  onClickOutside?: (event?: MouseEvent<any>) => void;
46
44
  };
47
- declare const Notification: React.ForwardRefExoticComponent<ToastPlateDesktopProps & {
45
+ export declare const Notification: React.ForwardRefExoticComponent<ToastPlateDesktopProps & {
48
46
  /**
49
47
  * Управление видимостью компонента
50
48
  */
@@ -68,7 +66,7 @@ declare const Notification: React.ForwardRefExoticComponent<ToastPlateDesktopPro
68
66
  /**
69
67
  * Позиционирование компонента от верхнего или нижнего края экрана
70
68
  */
71
- position?: "bottom" | "top" | undefined;
69
+ position?: "top" | "bottom" | undefined;
72
70
  /**
73
71
  * Обработчик события истечения времени до закрытия компонента
74
72
  */
@@ -86,4 +84,3 @@ declare const Notification: React.ForwardRefExoticComponent<ToastPlateDesktopPro
86
84
  */
87
85
  onClickOutside?: ((event?: MouseEvent<any>) => void) | undefined;
88
86
  } & React.RefAttributes<HTMLDivElement>>;
89
- export { NotificationProps, Notification };
@@ -0,0 +1 @@
1
+ export * from './Component';
@@ -0,0 +1 @@
1
+ export { getNotificationTestIds } from '../utils/getNotificationTestIds';
@@ -0,0 +1,4 @@
1
+ export declare function getNotificationTestIds(dataTestId: string): {
2
+ badge: string;
3
+ component: string;
4
+ };
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare function useClickOutside(ref: React.RefObject<HTMLElement>, cb: (e: React.MouseEvent | React.TouchEvent) => void): void;
@@ -2,29 +2,14 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var detectBrowser = require('detect-browser');
6
- var React = require('react');
7
- require('@alfalab/hooks');
8
-
9
- function getDataTestId(dataTestId, element) {
10
- var elementPart = element ? "-".concat(element.toLowerCase()) : '';
11
- return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
12
- }
13
-
14
- detectBrowser.detect();
15
-
16
- detectBrowser.detect();
17
-
18
- React.createContext(function () { return null; });
19
-
20
- /* eslint-disable no-console */
21
- if (process.env.NODE_ENV === 'development') ;
5
+ var cssm = require('@alfalab/core-components-shared/cssm');
22
6
 
23
7
  function getNotificationTestIds(dataTestId) {
24
8
  return {
25
- badge: getDataTestId(dataTestId, 'badge'),
26
- component: getDataTestId(dataTestId, 'component'),
9
+ badge: cssm.getDataTestId(dataTestId, 'badge'),
10
+ component: cssm.getDataTestId(dataTestId, 'component'),
27
11
  };
28
12
  }
29
13
 
30
14
  exports.getNotificationTestIds = getNotificationTestIds;
15
+ //# sourceMappingURL=getNotificationTestIds.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"getNotificationTestIds.js","sources":["../../../src/utils/getNotificationTestIds.ts"],"sourcesContent":["import { getDataTestId } from '@alfalab/core-components-shared';\n\nexport function getNotificationTestIds(dataTestId: string) {\n return {\n badge: getDataTestId(dataTestId, 'badge'),\n component: getDataTestId(dataTestId, 'component'),\n };\n}\n"],"names":["getDataTestId"],"mappings":";;;;;;AAEM,SAAU,sBAAsB,CAAC,UAAkB,EAAA;IACrD,OAAO;AACH,QAAA,KAAK,EAAEA,kBAAa,CAAC,UAAU,EAAE,OAAO,CAAC;AACzC,QAAA,SAAS,EAAEA,kBAAa,CAAC,UAAU,EAAE,WAAW,CAAC;KACpD;AACL;;;;"}
@@ -33,3 +33,4 @@ function useClickOutside(ref, cb) {
33
33
  }
34
34
 
35
35
  exports.useClickOutside = useClickOutside;
36
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../../../src/utils/index.ts"],"sourcesContent":["import React from 'react';\n\n/*\n * Дублирую хук из @alfalab/hooks, так как не подходят названия событий\n * https://github.com/core-ds/utils/blob/develop/packages/hooks/src/useClickOutside/hook.ts\n * issue завел, когда изменения будут реализованы, отсюда можно будет удалить\n * https://github.com/core-ds/utils/issues/35\n */\nexport function useClickOutside(\n ref: React.RefObject<HTMLElement>,\n cb: (e: React.MouseEvent | React.TouchEvent) => void,\n): void {\n React.useEffect(() => {\n // eslint-disable-next-line\n const handler = (event: any) => {\n if (!ref.current || ref.current.contains(event.target)) {\n return;\n }\n\n cb(event);\n };\n\n document.addEventListener('click', handler);\n document.addEventListener('touchend', handler);\n\n return () => {\n document.removeEventListener('click', handler);\n document.removeEventListener('touchend', handler);\n };\n }, [ref, cb]);\n}\n"],"names":["React"],"mappings":";;;;;;;;;;AAEA;;;;;AAKG;AACa,SAAA,eAAe,CAC3B,GAAiC,EACjC,EAAoD,EAAA;IAEpDA,sBAAK,CAAC,SAAS,CAAC,YAAA;;QAEZ,IAAM,OAAO,GAAG,UAAC,KAAU,EAAA;AACvB,YAAA,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;gBACpD;AACH;YAED,EAAE,CAAC,KAAK,CAAC;AACb,SAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC;AAC3C,QAAA,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,OAAO,CAAC;QAE9C,OAAO,YAAA;AACH,YAAA,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC;AAC9C,YAAA,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,OAAO,CAAC;AACrD,SAAC;AACL,KAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;AACjB;;;;"}
package/esm/Component.js CHANGED
@@ -6,12 +6,10 @@ import cn from 'classnames';
6
6
  import elementClosest from 'element-closest';
7
7
  import { Portal } from '@alfalab/core-components-portal/esm';
8
8
  import { Stack } from '@alfalab/core-components-stack/esm';
9
+ import { stackingOrder } from '@alfalab/core-components-stack-context/esm';
9
10
  import { ToastPlateDesktop } from '@alfalab/core-components-toast-plate/esm/desktop';
10
- import { stackingOrder } from '@alfalab/stack-context';
11
11
  import { useClickOutside } from './utils/index.js';
12
-
13
- var styles = {"notificationComponent":"notification__notificationComponent_1o0d1","isVisible":"notification__isVisible_1o0d1","isClosing":"notification__isClosing_1o0d1","toastContent":"notification__toastContent_1o0d1","actionSection":"notification__actionSection_1o0d1"};
14
- require('./index.css')
12
+ import styles from './index.module.css.js';
15
13
 
16
14
  var notificationClassNameSelector = ".".concat(styles.notificationComponent);
17
15
  var Notification = forwardRef(function (_a, ref) {
@@ -97,3 +95,4 @@ var Notification = forwardRef(function (_a, ref) {
97
95
  Notification.displayName = 'Notification';
98
96
 
99
97
  export { Notification };
98
+ //# sourceMappingURL=Component.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Component.js","sources":["../../src/Component.tsx"],"sourcesContent":["import React, {\n forwardRef,\n Fragment,\n MouseEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { useSwipeable } from 'react-swipeable';\nimport cn from 'classnames';\nimport elementClosest from 'element-closest';\n\nimport { Portal } from '@alfalab/core-components-portal';\nimport { Stack } from '@alfalab/core-components-stack';\nimport { stackingOrder } from '@alfalab/core-components-stack-context';\nimport {\n ToastPlateDesktop,\n ToastPlateDesktopProps,\n} from '@alfalab/core-components-toast-plate/desktop';\n\nimport { useClickOutside } from './utils';\n\nimport styles from './index.module.css';\n\nexport type NotificationProps = ToastPlateDesktopProps & {\n /**\n * Управление видимостью компонента\n */\n visible?: boolean;\n\n /**\n * Отступ от верхнего края\n */\n offset?: number;\n\n /**\n * Время до закрытия компонента\n */\n autoCloseDelay?: number | null;\n\n /**\n * Использовать портал\n */\n usePortal?: boolean;\n\n /**\n * z-index компонента\n */\n zIndex?: number;\n\n /**\n * Позиционирование компонента от верхнего или нижнего края экрана\n */\n position?: 'top' | 'bottom';\n\n /**\n * Обработчик события истечения времени до закрытия компонента\n */\n onCloseTimeout?: () => void;\n\n /**\n * Обработчик события наведения курсора на компонент\n */\n onMouseEnter?: (event?: MouseEvent<HTMLDivElement>) => void;\n\n /**\n * Обработчик события снятия курсора с компонента\n */\n onMouseLeave?: (event?: MouseEvent<HTMLDivElement>) => void;\n\n /**\n * Обработчик клика вне компонента\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onClickOutside?: (event?: MouseEvent<any>) => void;\n};\n\nconst notificationClassNameSelector = `.${styles.notificationComponent}`;\n\nexport const Notification = forwardRef<HTMLDivElement, NotificationProps>(\n (\n {\n className,\n actionSectionClassName,\n children,\n visible,\n offset = 108,\n hasCloser = true,\n autoCloseDelay = 5000,\n usePortal = true,\n zIndex = stackingOrder.TOAST,\n style,\n position = 'top',\n onClose,\n onCloseTimeout,\n onMouseEnter,\n onMouseLeave,\n onClickOutside,\n ...restProps\n },\n ref,\n ) => {\n const notificationRef = useRef<HTMLDivElement>(null);\n const autoCloseTimeoutRef = useRef(0);\n const closeTimeoutRef = useRef(0);\n\n const [isClosing, setIsClosing] = useState(false);\n\n const startAutoCloseTimer = useCallback(() => {\n if (autoCloseDelay !== null) {\n autoCloseTimeoutRef.current = window.setTimeout(() => {\n if (onCloseTimeout) {\n onCloseTimeout();\n }\n }, autoCloseDelay);\n }\n }, [autoCloseDelay, onCloseTimeout]);\n\n const stopAutoCloseTimer = useCallback(() => {\n clearTimeout(autoCloseTimeoutRef.current);\n }, []);\n\n useEffect(\n () => () => {\n clearTimeout(closeTimeoutRef.current);\n },\n [],\n );\n\n useEffect(() => {\n elementClosest(window);\n }, []);\n\n useEffect(() => {\n if (visible) {\n startAutoCloseTimer();\n }\n\n return () => {\n stopAutoCloseTimer();\n };\n }, [startAutoCloseTimer, stopAutoCloseTimer, visible]);\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n stopAutoCloseTimer();\n\n if (onMouseEnter) {\n onMouseEnter(event);\n }\n },\n [onMouseEnter, stopAutoCloseTimer],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n stopAutoCloseTimer();\n startAutoCloseTimer();\n\n if (onMouseLeave) {\n onMouseLeave(event);\n }\n },\n [onMouseLeave, startAutoCloseTimer, stopAutoCloseTimer],\n );\n\n const handleOutsideClick = useCallback(\n (event: React.MouseEvent | React.TouchEvent) => {\n const isTargetNotification = !!(event.target as Element).closest(\n notificationClassNameSelector,\n );\n\n /*\n * проверка isTargetNotification нужна для предотвращения срабатывания handleOutsideClick\n * при клике на другие нотификации, если их несколько на странице\n */\n if (onClickOutside && visible && !isTargetNotification) {\n onClickOutside(event as React.MouseEvent);\n }\n },\n [onClickOutside, visible],\n );\n\n useClickOutside(notificationRef, handleOutsideClick);\n\n const swipeableHandlers = useSwipeable({\n onSwiped: ({ dir }) => {\n if (onClose && ['Left', 'Right', 'Up'].includes(dir)) {\n setIsClosing(true);\n\n closeTimeoutRef.current = window.setTimeout(() => {\n setIsClosing(false);\n onClose();\n }, 100);\n }\n },\n delta: 100,\n });\n\n const Wrapper = usePortal ? Portal : Fragment;\n\n return (\n <Stack value={zIndex}>\n {(computedZIndex) => (\n <Wrapper>\n <div {...swipeableHandlers}>\n <ToastPlateDesktop\n className={cn(\n styles.notificationComponent,\n {\n [styles.isVisible]: visible,\n [styles.isClosing]: isClosing,\n },\n className,\n )}\n contentClassName={styles.toastContent}\n actionSectionClassName={cn(\n actionSectionClassName,\n styles.actionSection,\n )}\n style={{\n [position]: offset,\n zIndex: computedZIndex,\n ...style,\n }}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n ref={mergeRefs([ref, notificationRef])}\n role={visible ? 'alert' : undefined}\n hasCloser={hasCloser}\n onClose={onClose}\n {...restProps}\n >\n {children}\n </ToastPlateDesktop>\n </div>\n </Wrapper>\n )}\n </Stack>\n );\n },\n);\n\nNotification.displayName = 'Notification';\n"],"names":[],"mappings":"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"}
package/esm/index.css CHANGED
@@ -1,29 +1,9 @@
1
- /* hash: 1sdri */
2
- :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 */ /* 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
- } /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
5
- } :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 */
6
- } :root {
7
-
8
- /* Hard */
9
-
10
- /* Up */
11
-
12
- /* Hard up */
13
- } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
14
-
15
- /* новые значения, используйте их */
16
- } :root { /* deprecated */ /* deprecated */
17
- --gap-xs: 8px; /* deprecated */
18
- --gap-s: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
19
- --gap-xl: 24px; /* deprecated */ /* deprecated */ /* deprecated */
20
- --gap-4xl: 48px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
21
- --gap-s-neg: -12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
22
-
23
- /* новые значения, используйте их */
24
-
25
- /* no-unit может приводить к проблемам в calc (#1559) */
26
- /* stylelint-disable-next-line length-zero-no-unit */
1
+ :root {
2
+ --gap-xs: 8px;
3
+ --gap-s: 12px;
4
+ --gap-xl: 24px;
5
+ --gap-4xl: 48px;
6
+ --gap-s-neg: -12px;
27
7
  --gap-0: 0px;
28
8
  --gap-8: var(--gap-xs);
29
9
  --gap-12: var(--gap-s);
@@ -31,38 +11,37 @@
31
11
  --gap-48: var(--gap-4xl);
32
12
  --gap-12-neg: var(--gap-s-neg);
33
13
  } :root {
34
- } :root {
35
- } /* сбрасывает синюю подсветку при нажатии */ :root {
36
14
  --notification-desktop-content-width: 278px;
37
- } .notification__notificationComponent_1o0d1 {
15
+ } .notification__notificationComponent_1qc43 {
38
16
  visibility: hidden;
39
17
  right: var(--gap-12);
40
18
  transform: translate(0, -500px);
41
19
  width: calc(100% - var(--gap-24));
42
20
  max-width: calc(100vw - var(--gap-24));
43
21
  -webkit-user-select: none;
22
+ -moz-user-select: none;
44
23
  user-select: none;
45
24
  transition: transform 0.4s ease-out
46
- } @media screen and (min-width: 600px) { .notification__notificationComponent_1o0d1 {
25
+ } @media screen and (min-width: 600px) { .notification__notificationComponent_1qc43 {
47
26
  right: var(--gap-48);
48
27
  width: auto;
49
28
  transform: translate(calc(100% + var(--gap-48)), 0)
50
29
  }
51
- } .notification__notificationComponent_1o0d1.notification__isVisible_1o0d1 {
30
+ } .notification__notificationComponent_1qc43.notification__isVisible_1qc43 {
52
31
  visibility: visible;
53
32
  transform: translate(0, 0);
54
- } .notification__notificationComponent_1o0d1.notification__isClosing_1o0d1 {
33
+ } .notification__notificationComponent_1qc43.notification__isClosing_1qc43 {
55
34
  transition: transform 0.1s ease-out;
56
35
  transform: translate(100vw, 0)
57
- } @media screen and (min-width: 600px) { .notification__notificationComponent_1o0d1.notification__isClosing_1o0d1 {
36
+ } @media screen and (min-width: 600px) { .notification__notificationComponent_1qc43.notification__isClosing_1qc43 {
58
37
  transform: translate(calc(100% + var(--gap-48)), 0)
59
38
  }
60
- } .notification__notificationComponent_1o0d1.notification__notificationComponent_1o0d1 {
39
+ } .notification__notificationComponent_1qc43.notification__notificationComponent_1qc43 {
61
40
  position: fixed;
62
- } @media screen and (min-width: 600px) { .notification__toastContent_1o0d1 {
41
+ } @media screen and (min-width: 600px) { .notification__toastContent_1qc43 {
63
42
  width: var(--notification-desktop-content-width)
64
43
  }
65
- } .notification__actionSection_1o0d1 {
44
+ } .notification__actionSection_1qc43 {
66
45
  min-width: 104px;
67
46
  min-height: 48px;
68
47
  padding: var(--gap-0) var(--gap-8);
package/esm/index.js CHANGED
@@ -1 +1,2 @@
1
1
  export { Notification } from './Component.js';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,6 @@
1
+ import './index.css';
2
+
3
+ var styles = {"notificationComponent":"notification__notificationComponent_1qc43","isVisible":"notification__isVisible_1qc43","isClosing":"notification__isClosing_1qc43","toastContent":"notification__toastContent_1qc43","actionSection":"notification__actionSection_1qc43"};
4
+
5
+ export { styles as default };
6
+ //# sourceMappingURL=index.module.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '../../vars/src/index.css';\n\n:root {\n --notification-desktop-content-width: 278px;\n}\n\n.notificationComponent {\n visibility: hidden;\n right: var(--gap-12);\n transform: translate(0, -500px);\n width: calc(100% - var(--gap-24));\n max-width: calc(100vw - var(--gap-24));\n user-select: none;\n transition: transform 0.4s ease-out;\n\n @media screen and (min-width: 600px) {\n right: var(--gap-48);\n width: auto;\n transform: translate(calc(100% + var(--gap-48)), 0);\n }\n\n &.isVisible {\n visibility: visible;\n transform: translate(0, 0);\n }\n\n &.isClosing {\n transition: transform 0.1s ease-out;\n transform: translate(100vw, 0);\n\n @media screen and (min-width: 600px) {\n transform: translate(calc(100% + var(--gap-48)), 0);\n }\n }\n}\n\n.notificationComponent.notificationComponent {\n position: fixed;\n}\n\n.toastContent {\n @media screen and (min-width: 600px) {\n width: var(--notification-desktop-content-width);\n }\n}\n\n.actionSection {\n min-width: 104px;\n min-height: 48px;\n padding: var(--gap-0) var(--gap-8);\n margin: var(--gap-12-neg) var(--gap-0);\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,uBAAuB,CAAC,2CAA2C,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC,cAAc,CAAC,kCAAkC,CAAC,eAAe,CAAC,mCAAmC,CAAC;;;;"}
@@ -1 +1,2 @@
1
1
  export { getNotificationTestIds } from '../utils/getNotificationTestIds.js';
2
+ //# sourceMappingURL=index.js.map