@snack-uikit/notification 0.7.59 → 0.7.60-preview-ba12ca94.0

package/dist/esm/components/NotificationPanel/styles.module.css

@@ -0,0 +1,111 @@
+.notificationPanelHeader{
+  padding-left:var(--space-notification-panel-header-horizontal-padding, 24px);
+  padding-right:var(--space-notification-panel-header-horizontal-padding, 24px);
+  padding-top:var(--space-notification-panel-header-padding-top, 24px);
+  padding-bottom:var(--space-notification-panel-header-padding-bottom, 16px);
+  gap:var(--space-notification-panel-header-gap, 16px);
+  border-bottom-width:var(--border-width-notification-panel-container, 1px);
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  border-bottom-color:var(--sys-neutral-decor-default, #dde0ea);
+  border-bottom-style:solid;
+}
+.notificationPanelHeader::before{
+  pointer-events:none;
+  content:"";
+  position:absolute;
+  top:0;
+  left:0;
+  box-sizing:border-box;
+  width:100%;
+  height:calc(100% + var(--border-width-notification-panel-container, 1px));
+  opacity:var(--opacity-a004, 0.04);
+  background-color:var(--sys-neutral-accent-default, #787b8a);
+  border-radius:inherit;
+}
+
+.notificationPanelChips{
+  gap:var(--space-notification-panel-header-chips-gap, 8px);
+  display:flex;
+  align-items:center;
+}
+
+.notificationPanelHeaderFunctions{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+}
+
+.notificationPanelHeadline{
+  gap:var(--space-notification-panel-header-headline-gap, 16px);
+  display:flex;
+  align-items:center;
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.notificationPanelTitle{
+  flex:1 1 auto;
+  min-width:0;
+}
+
+.notificationPanelBody{
+  flex:1 1 auto;
+  min-height:0;
+}
+
+.notificationPanelCard:last-of-type{
+  border-bottom:none;
+}
+
+.notificationPanelFooterButton{
+  border-top-width:var(--border-width-notification-panel-container, 1px);
+  border-bottom-right-radius:var(--radius-notification-panel-footer-radius-bottom, 16px);
+  border-bottom-left-radius:var(--radius-notification-panel-footer-radius-bottom, 16px);
+  height:var(--size-notification-panel-button, 32px);
+  cursor:pointer;
+  flex-shrink:0;
+  box-sizing:border-box;
+  width:100%;
+  margin:0;
+  padding:0;
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  background:none;
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
+  border-top-style:solid;
+  border-right:none;
+  border-bottom:none;
+  border-left:none;
+  outline:0;
+  outline-offset:0;
+}
+.notificationPanelFooterButton:hover{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.notificationPanelFooterButton:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
+  color:var(--sys-neutral-text-support, #6d707f);
+  border-color:transparent;
+  outline-color:var(--sys-available-complementary, #1c1c24);
+}
+.notificationPanelFooterButton:active{
+  color:var(--sys-neutral-text-main, #41424e);
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
+}
+
+.wrapper{
+  box-sizing:border-box;
+  width:100%;
+  height:100%;
+  display:flex;
+  flex-direction:column;
+}
+
+.scrollStub{
+  height:calc(var(--dimension-025m, 2px) / 2);
+  margin-top:calc(var(--dimension-025m, 2px) / -2);
+  background:transparent;
+}

package/dist/esm/components/NotificationPanelPopover/NotificationPanelPopover.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+import { PopoverPrivateProps } from '@snack-uikit/popover-private';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { NotificationPanel, NotificationPanelProps } from '../NotificationPanel';
+export type NotificationPanelPopoverProps = WithSupportProps<{
+    content: ReactElement<NotificationPanelProps, typeof NotificationPanel>;
+    /** CSS-класс для элемента содержащего контент */
+    contentClassName?: string;
+} & Pick<PopoverPrivateProps, 'className' | 'triggerClassName' | 'open' | 'onOpenChange' | 'hoverDelayOpen' | 'hoverDelayClose' | 'offset' | 'children' | 'closeOnEscapeKey' | 'triggerClickByKeys' | 'triggerRef'> & Partial<Pick<PopoverPrivateProps, 'trigger' | 'placement'>>>;
+/** Компонент-обёртка для NotificationPanel для использования как выпадающий элемент */
+export declare function NotificationPanelPopover({ content, trigger, placement, children, contentClassName, ...otherProps }: NotificationPanelPopoverProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/components/NotificationPanelPopover/index.js

@@ -0,0 +1 @@
+export * from './NotificationPanelPopover';

package/dist/esm/components/NotificationPanelPopover/styles.module.css

@@ -0,0 +1,20 @@
+.notificationPanelPopoverWrap{
+  padding-top:var(--space-notification-panel-container-padding-top, 4px);
+  padding-bottom:var(--space-notification-panel-container-padding-bottom, 24px);
+  min-height:var(--size-notification-panel-container, 388px);
+  display:flex;
+  flex-direction:column;
+  box-sizing:border-box;
+  height:100%;
+}
+
+.notificationPanelPopover{
+  border-radius:var(--radius-notification-panel-panel, 16px);
+  width:var(--size-notification-panel-panel, 464px);
+  overflow:hidden;
+  display:flex;
+  flex-direction:column;
+  height:100%;
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  box-shadow:var(--box-shadow-elevation-level2, 0px 0px 4px 0px rgba(0, 0, 0, 0.0392156863), 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863));
+}

package/dist/esm/components/index.js

@@ -0,0 +1,3 @@
+export * from './NotificationCard';
+export * from './NotificationPanel';
+export * from './NotificationPanelPopover';

package/dist/esm/index.js

@@ -0,0 +1 @@
+export * from './components';

package/package.json

@@ -4,15 +4,18 @@
     "access": "public"
   },
   "title": "Notification",
-  "version": "0.7.59",
+  "version": "0.7.60-preview-ba12ca94.0",
   "sideEffects": [
     "*.css",
     "*.woff",
     "*.woff2"
   ],
   "description": "",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "exports": {
+    "import": "./dist/esm/index.js",
+    "require": "./dist/cjs/index.js"
+  },
   "homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/notification",
   "repository": {
     "type": "git",
@@ -24,7 +27,8 @@
     "Белов Алексей <anbelov@cloud.ru>"
   ],
   "files": [
-    "dist",
+    "dist/cjs",
+    "dist/esm",
     "src",
     "./CHANGELOG.md",
     "./LICENSE"
@@ -32,20 +36,20 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.17.5",
-    "@snack-uikit/chips": "0.16.3",
-    "@snack-uikit/icons": "0.22.1",
-    "@snack-uikit/info-block": "0.4.9",
-    "@snack-uikit/link": "0.13.4",
-    "@snack-uikit/list": "0.18.0",
-    "@snack-uikit/popover-private": "0.13.7",
-    "@snack-uikit/scroll": "0.6.2",
-    "@snack-uikit/skeleton": "0.3.5",
-    "@snack-uikit/tag": "0.9.11",
-    "@snack-uikit/truncate-string": "0.4.24",
-    "@snack-uikit/typography": "0.6.3",
-    "@snack-uikit/utils": "3.4.0",
+    "@snack-uikit/button": "0.17.6-preview-ba12ca94.0",
+    "@snack-uikit/chips": "0.16.4-preview-ba12ca94.0",
+    "@snack-uikit/icons": "0.22.2-preview-ba12ca94.0",
+    "@snack-uikit/info-block": "0.4.10-preview-ba12ca94.0",
+    "@snack-uikit/link": "0.13.5-preview-ba12ca94.0",
+    "@snack-uikit/list": "0.18.1-preview-ba12ca94.0",
+    "@snack-uikit/popover-private": "0.13.8-preview-ba12ca94.0",
+    "@snack-uikit/scroll": "0.6.3-preview-ba12ca94.0",
+    "@snack-uikit/skeleton": "0.3.6-preview-ba12ca94.0",
+    "@snack-uikit/tag": "0.9.12-preview-ba12ca94.0",
+    "@snack-uikit/truncate-string": "0.4.25-preview-ba12ca94.0",
+    "@snack-uikit/typography": "0.6.4-preview-ba12ca94.0",
+    "@snack-uikit/utils": "3.4.1-preview-ba12ca94.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "a80c5b606728e51dd8470bf622cbab4f4b6fe337"
+  "gitHead": "9ac0a3e5e530c09fa4dc050f9bc08d1849962129"
 }