@snack-uikit/notification 0.4.2 → 0.5.1

package/CHANGELOG.md

@@ -3,6 +3,31 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.5.1 (2023-12-14)
+
+### Only dependencies have been changed
+* [@snack-uikit/chips@0.10.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/chips/CHANGELOG.md)
+* [@snack-uikit/droplist@0.12.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/droplist/CHANGELOG.md)
+* [@snack-uikit/icons@0.19.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/icons/CHANGELOG.md)
+* [@snack-uikit/link@0.9.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/link/CHANGELOG.md)
+* [@snack-uikit/popover-private@0.12.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/popover-private/CHANGELOG.md)
+* [@snack-uikit/truncate-string@0.4.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/truncate-string/CHANGELOG.md)
+
+
+
+
+
+# 0.5.0 (2023-12-14)
+
+
+### BREAKING CHANGES
+
+
+* **FF-3729:** replace enum with unions ([910db4a](https://github.com/cloud-ru-tech/snack-uikit/commit/910db4aa8231ccbc58e538e5c5c1f461b1dec275))
+
+
+
+
 ## 0.4.2 (2023-12-07)
 
 ### Only dependencies have been changed

package/README.md

@@ -17,7 +17,7 @@ const cards = [
   {
     id: 'cardId',
     label: ['Category', 'Subcategory'].join('・'),
-    appearance: NotificationCard.appearances.ErrorCritical,
+    appearance: 'errorCritical',
     title: 'Title truncate two line',
     content: `Demo content.`,
     link: {
@@ -49,12 +49,12 @@ const cards = [
   }}
   chips={[
     {
-      label: ChipFilter.All,
+      label: 'all',
       checked: true,
       onChange() { /* */ },
     },
     {
-      label: ChipFilter.Unread,
+      label: 'unread',
       checked: false,
       onChange() { /* */ },
     },
@@ -85,7 +85,7 @@ const cards = [
 | content* | `ReactNode` | - | Контент уведомления |
 | title* | `string` | - | Заголовок уведомления |
 | id* | `string` | - | Идентификатор уведомления |
-| appearance | enum Appearance: `"neutral"`, `"error"`, `"errorCritical"`, `"warning"`, `"success"` | Appearance.Neutral | Тип уведомления |
+| appearance | enum Appearance: `"neutral"`, `"error"`, `"errorCritical"`, `"warning"`, `"success"` | neutral | Тип уведомления |
 | label | `string` | - | Лейбл перед заголовком |
 | unread | `boolean` | - | Управление состоянием прочитано/не прочитано |
 | link | `Omit<LinkProps, "data-test-id" \| "size" \| "onColor" \| "onSurface">` | - | Ссылка |
@@ -115,10 +115,10 @@ const cards = [
 | hoverDelayClose | `number` | - | Задержка закрытия по ховеру |
 | offset | `number` | 0 | Отступ поповера от его триггер-элемента (в пикселях). |
 | closeOnEscapeKey | `boolean` | true | Закрывать ли по нажатию на кнопку `Esc` |
-| triggerClickByKeys | `boolean` | true | Вызывается ли попоповер по нажатию клавиш Enter/Space (при trigger = `Click`) |
+| triggerClickByKeys | `boolean` | true | Вызывается ли попоповер по нажатию клавиш Enter/Space (при trigger = `click`) |
 | triggerRef | `ForwardedRef<HTMLElement \| ReferenceType>` | - | Ref ссылка на триггер |
-| trigger | enum Trigger: `"click"`, `"hover"`, `"focusVisible"`, `"focus"`, `"hoverAndFocusVisible"`, `"hoverAndFocus"`, `"clickAndFocusVisible"` | - | Условие отображения поповера: <br> - `Click` - открывать по клику <br> - `Hover` - открывать по ховеру <br> - `FocusVisible` - открывать по focus-visible <br> - `Focus` - открывать по фокусу <br> - `HoverAndFocusVisible` - открывать по ховеру и focus-visible <br> - `HoverAndFocus` - открывать по ховеру и фокусу <br> - `ClickAndFocusVisible` - открывать по клику и focus-visible |
-| placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | Placement.Top | Положение поповера относительно своего триггера (children). |
+| trigger | enum Trigger: `"click"`, `"hover"`, `"focusVisible"`, `"focus"`, `"hoverAndFocusVisible"`, `"hoverAndFocus"`, `"clickAndFocusVisible"` | - | Условие отображения поповера: <br> - `click` - открывать по клику <br> - `hover` - открывать по ховеру <br> - `focusVisible` - открывать по focus-visible <br> - `focus` - открывать по фокусу <br> - `hoverAndFocusVisible` - открывать по ховеру и focus-visible <br> - `hoverAndFocus` - открывать по ховеру и фокусу <br> - `clickAndFocusVisible` - открывать по клику и focus-visible |
+| placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Положение поповера относительно своего триггера (children). |
 | contentClassName | `string` | - | CSS-класс для элемента содержащего контент |
 ## NotificationPanel.Blank
 ### Props
@@ -127,7 +127,7 @@ const cards = [
 | title* | `ReactNode` | - | Заголовок |
 | description | `ReactNode` | - | Описание |
 | icon | `JSXElementConstructor<{ size?: number; className?: string; }>` | - | Иконка |
-| iconAppearance | enum Appearance: `"primary"`, `"neutral"`, `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"` | - | Цвет обводки для иконки |
+| iconAppearance | enum Appearance: `"neutral"`, `"primary"`, `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"` | - | Цвет обводки для иконки |
 | className | `string` | - | CSS-класс |
 
 

package/dist/components/NotificationCard/NotificationCard.d.ts

@@ -2,7 +2,7 @@ import { MouseEventHandler, ReactNode } from 'react';
 import { ItemSingleProps } from '@snack-uikit/droplist';
 import { LinkProps } from '@snack-uikit/link';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { Appearance } from './constants';
+import { Appearance } from './types';
 export type NotificationCardProps = WithSupportProps<{
     /** Идентификатор уведомления */
     id: string;
@@ -31,6 +31,3 @@ export type NotificationCardProps = WithSupportProps<{
 }>;
 /** Компонент карточки уведомления */
 export declare function NotificationCard({ id, appearance, label, unread, title, content, link, date, onClick, actions, onVisible, className, ...rest }: NotificationCardProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace NotificationCard {
-    var appearances: typeof Appearance;
-}

package/dist/components/NotificationCard/NotificationCard.js

@@ -17,15 +17,15 @@ import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { NotificationCardFunction } from './components';
-import { Appearance, TEST_IDS } from './constants';
+import { APPEARANCE, TEST_IDS } from './constants';
 import { getIcon } from './helpers';
 import styles from './styles.module.css';
 /** Компонент карточки уведомления */
 export function NotificationCard(_a) {
-    var { id, appearance = Appearance.Neutral, label, unread, title, content, link, date, onClick, actions, onVisible, className } = _a, rest = __rest(_a, ["id", "appearance", "label", "unread", "title", "content", "link", "date", "onClick", "actions", "onVisible", "className"]);
+    var { id, appearance = APPEARANCE.Neutral, label, unread, title, content, link, date, onClick, actions, onVisible, className } = _a, rest = __rest(_a, ["id", "appearance", "label", "unread", "title", "content", "link", "date", "onClick", "actions", "onVisible", "className"]);
     const { icon, linkOnColor } = useMemo(() => ({
         icon: getIcon(appearance),
-        linkOnColor: appearance === Appearance.ErrorCritical ? Link.onColors.Red : undefined,
+        linkOnColor: appearance === APPEARANCE.ErrorCritical ? 'red' : undefined,
     }), [appearance]);
     const [isDroplistOpen, setDroplistOpen] = useState(false);
     const cardRef = useRef(null);
@@ -55,6 +55,5 @@ export function NotificationCard(_a) {
         e.stopPropagation();
         (_a = link === null || link === void 0 ? void 0 : link.onClick) === null || _a === void 0 ? void 0 : _a.call(link, e);
     };
-    return (_jsxs("div", Object.assign({ ref: cardRef, role: 'button', onClick: onClick, tabIndex: 0 }, extractSupportProps(rest), { "data-appearance": appearance, "data-unread": unread || undefined, "data-clickable": Boolean(onClick) || undefined, "data-droplist-open": isDroplistOpen || undefined, className: cn(styles.notificationCard, className) }, { children: [(actions === null || actions === void 0 ? void 0 : actions.length) && (_jsx(NotificationCardFunction, { actions: actions, open: isDroplistOpen, setDroplistOpen: setDroplistOpen })), label && (_jsx(Typography.LightLabelS, Object.assign({ tag: Typography.tags.div, className: styles.notificationCardLabel }, { children: _jsx(TruncateString, { maxLines: 1, text: label, "data-test-id": TEST_IDS.label }) }))), _jsxs("div", Object.assign({ className: styles.notificationCardTitle }, { children: [_jsx("div", Object.assign({ className: styles.notificationCardTitleIcon }, { children: icon })), _jsx(Typography.SansTitleS, Object.assign({ tag: Typography.tags.div, className: styles.notificationCardTitleText }, { children: _jsx(TruncateString, { maxLines: 2, text: title, "data-test-id": TEST_IDS.title }) }))] })), content && (_jsx(Typography.SansBodyS, Object.assign({ tag: Typography.tags.div, className: styles.notificationCardContent, "data-test-id": TEST_IDS.content }, { children: content }))), showFooter && (_jsxs("div", Object.assign({ className: styles.notificationCardFooter }, { children: [link && (_jsx(Link, Object.assign({}, link, { onClick: handleLinkClick, onColor: linkOnColor, onSurface: Link.onSurfaces.Decor, size: Link.sizes.S, "data-test-id": TEST_IDS.link }))), date && (_jsx(Typography.LightLabelS, Object.assign({ className: styles.notificationCardDate, "data-test-id": TEST_IDS.date }, { children: date })))] })))] })));
+    return (_jsxs("div", Object.assign({ ref: cardRef, role: 'button', onClick: onClick, tabIndex: 0 }, extractSupportProps(rest), { "data-appearance": appearance, "data-unread": unread || undefined, "data-clickable": Boolean(onClick) || undefined, "data-droplist-open": isDroplistOpen || undefined, className: cn(styles.notificationCard, className), children: [(actions === null || actions === void 0 ? void 0 : actions.length) && (_jsx(NotificationCardFunction, { actions: actions, open: isDroplistOpen, setDroplistOpen: setDroplistOpen })), label && (_jsx(Typography.LightLabelS, { tag: 'div', className: styles.notificationCardLabel, children: _jsx(TruncateString, { maxLines: 1, text: label, "data-test-id": TEST_IDS.label }) })), _jsxs("div", { className: styles.notificationCardTitle, children: [_jsx("div", { className: styles.notificationCardTitleIcon, children: icon }), _jsx(Typography.SansTitleS, { tag: 'div', className: styles.notificationCardTitleText, children: _jsx(TruncateString, { maxLines: 2, text: title, "data-test-id": TEST_IDS.title }) })] }), content && (_jsx(Typography.SansBodyS, { tag: 'div', className: styles.notificationCardContent, "data-test-id": TEST_IDS.content, children: content })), showFooter && (_jsxs("div", { className: styles.notificationCardFooter, children: [link && (_jsx(Link, Object.assign({}, link, { onClick: handleLinkClick, onColor: linkOnColor, onSurface: 'decor', size: 's', "data-test-id": TEST_IDS.link }))), date && (_jsx(Typography.LightLabelS, { className: styles.notificationCardDate, "data-test-id": TEST_IDS.date, children: date }))] }))] })));
 }
-NotificationCard.appearances = Appearance;

package/dist/components/NotificationCard/components/NotificationCardFunction.js

@@ -9,5 +9,5 @@ export function NotificationCardFunction({ actions, open, setDroplistOpen }) {
     const { firstElementRefCallback, triggerElementRef, handleDroplistFocusLeave, handleTriggerKeyDown, handleDroplistItemKeyDown, handleDroplistItemClick, } = Droplist.useKeyboardNavigation({
         setDroplistOpen,
     });
-    return (_jsx("div", Object.assign({ className: styles.notificationCardFunction, "data-test-id": TEST_IDS.actions.wrapper }, { children: _jsx(Droplist, Object.assign({ open: open, onOpenChange: setDroplistOpen, placement: Droplist.placements.BottomEnd, firstElementRefCallback: firstElementRefCallback, onFocusLeave: handleDroplistFocusLeave, triggerRef: triggerElementRef, useScroll: true, triggerElement: _jsx(ButtonFunction, { size: ButtonFunction.sizes.S, icon: _jsx(KebabSVG, {}), onKeyDown: handleTriggerKeyDown, "data-test-id": TEST_IDS.actions.droplistTrigger }), "data-test-id": TEST_IDS.actions.droplist }, { children: actions.map(action => (_createElement(Droplist.ItemSingle, Object.assign({}, action, { key: action.option, onClick: e => handleDroplistItemClick(e, action.onClick), "data-test-id": TEST_IDS.actions.droplistAction, onKeyDown: handleDroplistItemKeyDown })))) })) })));
+    return (_jsx("div", { className: styles.notificationCardFunction, "data-test-id": TEST_IDS.actions.wrapper, children: _jsx(Droplist, { open: open, onOpenChange: setDroplistOpen, placement: 'bottom-end', firstElementRefCallback: firstElementRefCallback, onFocusLeave: handleDroplistFocusLeave, triggerRef: triggerElementRef, useScroll: true, triggerElement: _jsx(ButtonFunction, { size: 's', icon: _jsx(KebabSVG, {}), onKeyDown: handleTriggerKeyDown, "data-test-id": TEST_IDS.actions.droplistTrigger }), "data-test-id": TEST_IDS.actions.droplist, children: actions.map(action => (_createElement(Droplist.ItemSingle, Object.assign({}, action, { key: action.option, onClick: e => handleDroplistItemClick(e, action.onClick), "data-test-id": TEST_IDS.actions.droplistAction, onKeyDown: handleDroplistItemKeyDown })))) }) }));
 }

package/dist/components/NotificationCard/components/NotificationCardSkeleton.js

@@ -4,5 +4,5 @@ import { TEST_IDS } from '../../NotificationPanel/constants';
 import styles from '../styles.module.css';
 const BORDER_RADIUS = 24;
 export function NotificationCardSkeleton() {
-    return (_jsxs("div", Object.assign({ className: styles.notificationCard, "data-test-id": TEST_IDS.skeleton, "data-skeleton": true }, { children: [_jsx(Skeleton, { width: 140, height: 11, borderRadius: BORDER_RADIUS }), _jsxs("div", Object.assign({ className: styles.notificationCardTitle, "data-center": true }, { children: [_jsx("div", Object.assign({ className: styles.notificationCardTitleIcon }, { children: _jsx(Skeleton, { width: 16, height: 16, borderRadius: BORDER_RADIUS }) })), _jsx(Skeleton, { width: 140, height: 14, borderRadius: BORDER_RADIUS })] })), _jsx("div", Object.assign({ className: styles.notificationCardContent }, { children: _jsx(SkeletonText, { lines: 3, borderRadius: BORDER_RADIUS }) })), _jsxs("div", Object.assign({ className: styles.notificationCardFooter }, { children: [_jsx(Skeleton, { width: 140, borderRadius: BORDER_RADIUS, height: 12 }), _jsx(Skeleton, { width: 140, borderRadius: BORDER_RADIUS, height: 11 })] }))] })));
+    return (_jsxs("div", { className: styles.notificationCard, "data-test-id": TEST_IDS.skeleton, "data-skeleton": true, children: [_jsx(Skeleton, { width: 140, height: 11, borderRadius: BORDER_RADIUS }), _jsxs("div", { className: styles.notificationCardTitle, "data-center": true, children: [_jsx("div", { className: styles.notificationCardTitleIcon, children: _jsx(Skeleton, { width: 16, height: 16, borderRadius: BORDER_RADIUS }) }), _jsx(Skeleton, { width: 140, height: 14, borderRadius: BORDER_RADIUS })] }), _jsx("div", { className: styles.notificationCardContent, children: _jsx(SkeletonText, { lines: 3, borderRadius: BORDER_RADIUS }) }), _jsxs("div", { className: styles.notificationCardFooter, children: [_jsx(Skeleton, { width: 140, borderRadius: BORDER_RADIUS, height: 12 }), _jsx(Skeleton, { width: 140, borderRadius: BORDER_RADIUS, height: 11 })] })] }));
 }

package/dist/components/NotificationCard/constants.d.ts

@@ -1,10 +1,10 @@
-export declare enum Appearance {
-    Neutral = "neutral",
-    Error = "error",
-    ErrorCritical = "errorCritical",
-    Warning = "warning",
-    Success = "success"
-}
+export declare const APPEARANCE: {
+    readonly Neutral: "neutral";
+    readonly Error: "error";
+    readonly ErrorCritical: "errorCritical";
+    readonly Warning: "warning";
+    readonly Success: "success";
+};
 export declare const TEST_IDS: {
     label: string;
     title: string;

package/dist/components/NotificationCard/constants.js

@@ -1,11 +1,10 @@
-export var Appearance;
-(function (Appearance) {
-    Appearance["Neutral"] = "neutral";
-    Appearance["Error"] = "error";
-    Appearance["ErrorCritical"] = "errorCritical";
-    Appearance["Warning"] = "warning";
-    Appearance["Success"] = "success";
-})(Appearance || (Appearance = {}));
+export const APPEARANCE = {
+    Neutral: 'neutral',
+    Error: 'error',
+    ErrorCritical: 'errorCritical',
+    Warning: 'warning',
+    Success: 'success',
+};
 export const TEST_IDS = {
     label: 'notification-card__label',
     title: 'notification-card__title',

package/dist/components/NotificationCard/helpers.d.ts

@@ -1,2 +1,2 @@
-import { Appearance } from './constants';
+import { Appearance } from './types';
 export declare function getIcon(appearance: Appearance): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/NotificationCard/helpers.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { AlarmFilledSVG, CheckFilledSVG, CrossFilledSVG, InfoFilledSVG } from '@snack-uikit/icons';
-import { Appearance } from './constants';
+import { APPEARANCE } from './constants';
 export function getIcon(appearance) {
     switch (appearance) {
-        case Appearance.Success:
+        case APPEARANCE.Success:
             return _jsx(CheckFilledSVG, { size: 16 });
-        case Appearance.Error:
-        case Appearance.ErrorCritical:
+        case APPEARANCE.Error:
+        case APPEARANCE.ErrorCritical:
             return _jsx(CrossFilledSVG, { size: 16 });
-        case Appearance.Warning:
+        case APPEARANCE.Warning:
             return _jsx(AlarmFilledSVG, { size: 16 });
-        case Appearance.Neutral:
+        case APPEARANCE.Neutral:
             return _jsx(InfoFilledSVG, { size: 16 });
         default:
             return null;

package/dist/components/NotificationCard/types.d.ts

@@ -0,0 +1,3 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { APPEARANCE } from './constants';
+export type Appearance = ValueOf<typeof APPEARANCE>;

package/dist/components/NotificationCard/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/NotificationPanel/NotificationPanel.d.ts

@@ -31,11 +31,6 @@ export type NotificationPanelProps = {
 } & Omit<NotificationPanelPopoverProps, 'children' | 'content'>;
 /** Компонент панели для уведомлений */
 export declare function NotificationPanel({ title, triggerElement, settings, chips, readAllButton, footerButton, content, loading, skeletonsAmount, ...rest }: NotificationPanelProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace NotificationPanel {
-    var placements: typeof import("@snack-uikit/popover-private/dist/constants").Placement;
-    var triggers: typeof import("@snack-uikit/popover-private/dist/constants").Trigger;
-    var widthStrategies: typeof import("@snack-uikit/popover-private/dist/constants").PopoverWidthStrategy;
-}
 export declare namespace NotificationPanel {
     const Blank: typeof NotificationPanelBlank;
     type BlankProps = NotificationPanelBlankProps;

package/dist/components/NotificationPanel/NotificationPanel.js

@@ -14,7 +14,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useMemo } from 'react';
 import { ButtonFunction } from '@snack-uikit/button';
 import { ChipToggle } from '@snack-uikit/chips';
-import { PopoverPrivate } from '@snack-uikit/popover-private';
 import { Scroll } from '@snack-uikit/scroll';
 import { SkeletonContextProvider, WithSkeleton } from '@snack-uikit/skeleton';
 import { TruncateString } from '@snack-uikit/truncate-string';
@@ -28,11 +27,8 @@ import styles from './styles.module.css';
 export function NotificationPanel(_a) {
     var { title, triggerElement, settings, chips, readAllButton, footerButton, content, loading, skeletonsAmount = 2 } = _a, rest = __rest(_a, ["title", "triggerElement", "settings", "chips", "readAllButton", "footerButton", "content", "loading", "skeletonsAmount"]);
     const skeletons = useMemo(() => Array.from({ length: skeletonsAmount }, (_, i) => i), [skeletonsAmount]);
-    return (_jsx(NotificationPanelPopover, Object.assign({}, rest, { content: _jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ className: styles.notificationPanelHeader }, { children: [_jsxs("div", Object.assign({ className: styles.notificationPanelHeadline }, { children: [_jsx(Typography.SansHeadlineS, Object.assign({ className: styles.notificationPanelTitle }, { children: _jsx(TruncateString, { text: title, "data-test-id": TEST_IDS.title }) })), settings && _jsx(NotificationPanelSettings, Object.assign({}, settings))] })), _jsxs("div", Object.assign({ className: styles.notificationPanelHeaderFunctions }, { children: [_jsx("div", Object.assign({ className: styles.notificationPanelChips }, { children: chips === null || chips === void 0 ? void 0 : chips.map(chip => (_createElement(ChipToggle, Object.assign({}, chip, { key: chip.label, "data-test-id": `${TEST_IDS.chip}-${chip.label}`, size: ChipToggle.sizes.Xs, disabled: chip.disabled || loading })))) })), readAllButton && (_jsx(ButtonFunction, Object.assign({}, readAllButton, { disabled: readAllButton.disabled || loading, "data-test-id": TEST_IDS.readAll })))] }))] })), _jsx(Scroll, Object.assign({ size: Scroll.sizes.M, className: styles.notificationPanelBody }, { children: loading ? (_jsx(SkeletonContextProvider, Object.assign({ loading: loading || false }, { children: skeletons.map(skeleton => (_jsx(WithSkeleton, { skeleton: _jsx(NotificationCardSkeleton, {}) }, skeleton))) }))) : (content) })), !loading && footerButton && (_jsx("button", Object.assign({ className: styles.notificationPanelFooterButton, "data-test-id": TEST_IDS.footerButton }, { children: _jsx(Typography.SansLabelS, { children: footerButton.label }) })))] }) }, { children: triggerElement })));
+    return (_jsx(NotificationPanelPopover, Object.assign({}, rest, { content: _jsxs(_Fragment, { children: [_jsxs("div", { className: styles.notificationPanelHeader, children: [_jsxs("div", { className: styles.notificationPanelHeadline, children: [_jsx(Typography.SansHeadlineS, { className: styles.notificationPanelTitle, children: _jsx(TruncateString, { text: title, "data-test-id": TEST_IDS.title }) }), settings && _jsx(NotificationPanelSettings, Object.assign({}, settings))] }), _jsxs("div", { className: styles.notificationPanelHeaderFunctions, children: [_jsx("div", { className: styles.notificationPanelChips, children: chips === null || chips === void 0 ? void 0 : chips.map(chip => (_createElement(ChipToggle, Object.assign({}, chip, { key: chip.label, "data-test-id": `${TEST_IDS.chip}-${chip.label}`, size: 'xs', disabled: chip.disabled || loading })))) }), readAllButton && (_jsx(ButtonFunction, Object.assign({}, readAllButton, { disabled: readAllButton.disabled || loading, "data-test-id": TEST_IDS.readAll })))] })] }), _jsx(Scroll, { size: 'm', className: styles.notificationPanelBody, children: loading ? (_jsx(SkeletonContextProvider, { loading: loading || false, children: skeletons.map(skeleton => (_jsx(WithSkeleton, { skeleton: _jsx(NotificationCardSkeleton, {}) }, skeleton))) })) : (content) }), !loading && footerButton && (_jsx("button", { className: styles.notificationPanelFooterButton, "data-test-id": TEST_IDS.footerButton, children: _jsx(Typography.SansLabelS, { children: footerButton.label }) }))] }), children: triggerElement })));
 }
-NotificationPanel.placements = PopoverPrivate.placements;
-NotificationPanel.triggers = PopoverPrivate.triggers;
-NotificationPanel.widthStrategies = PopoverPrivate.widthStrategies;
 (function (NotificationPanel) {
     NotificationPanel.Blank = NotificationPanelBlank;
 })(NotificationPanel || (NotificationPanel = {}));

package/dist/components/NotificationPanel/components/NotificationPanelBlank/NotificationPanelBlank.d.ts

@@ -15,6 +15,3 @@ export type NotificationPanelBlankProps = WithSupportProps<{
 }>;
 /** Компонента для "заглушки" вместо карточек в панели */
 export declare function NotificationPanelBlank({ icon, iconAppearance, title, description, className, ...rest }: NotificationPanelBlankProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace NotificationPanelBlank {
-    var iconAppearances: typeof import("@snack-uikit/icon-predefined/dist/constants").Appearance;
-}

package/dist/components/NotificationPanel/components/NotificationPanelBlank/NotificationPanelBlank.js

@@ -18,7 +18,6 @@ import { TEST_IDS } from '../../constants';
 import styles from './styles.module.css';
 /** Компонента для "заглушки" вместо карточек в панели */
 export function NotificationPanelBlank(_a) {
-    var { icon, iconAppearance = IconPredefined.appearances.Neutral, title, description, className } = _a, rest = __rest(_a, ["icon", "iconAppearance", "title", "description", "className"]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.notificationPanelBlank, className) }, extractSupportProps(rest), { children: [icon && (_jsx(IconPredefined, { icon: icon, appearance: iconAppearance, size: IconPredefined.sizes.L, "data-test-id": TEST_IDS.blank.icon })), _jsxs("div", Object.assign({ className: styles.notificationPanelBlankContent }, { children: [_jsx(Typography.SansTitleS, Object.assign({ tag: Typography.tags.div, className: styles.notificationPanelBlankTitle, "data-test-id": TEST_IDS.blank.title }, { children: title })), _jsx(Typography.SansBodyM, Object.assign({ tag: Typography.tags.div, className: styles.notificationPanelBlankDescription, "data-test-id": TEST_IDS.blank.description }, { children: description }))] }))] })));
+    var { icon, iconAppearance = 'neutral', title, description, className } = _a, rest = __rest(_a, ["icon", "iconAppearance", "title", "description", "className"]);
+    return (_jsxs("div", Object.assign({ className: cn(styles.notificationPanelBlank, className) }, extractSupportProps(rest), { children: [icon && _jsx(IconPredefined, { icon: icon, appearance: iconAppearance, size: 'l', "data-test-id": TEST_IDS.blank.icon }), _jsxs("div", { className: styles.notificationPanelBlankContent, children: [_jsx(Typography.SansTitleS, { tag: 'div', className: styles.notificationPanelBlankTitle, "data-test-id": TEST_IDS.blank.title, children: title }), _jsx(Typography.SansBodyM, { tag: 'div', className: styles.notificationPanelBlankDescription, "data-test-id": TEST_IDS.blank.description, children: description })] })] })));
 }
-NotificationPanelBlank.iconAppearances = IconPredefined.appearances;

package/dist/components/NotificationPanel/components/NotificationPanelSettings/NotificationPanelSettings.js

@@ -4,7 +4,7 @@ import { KebabSVG } from '@snack-uikit/icons';
 import { TEST_IDS } from '../../constants';
 import { NotificationPanelSettingsDroplist } from './NotificationPanelSettingsDroplist';
 export function NotificationPanelSettings({ actions, button }) {
-    const buttonProps = Object.assign(Object.assign({}, button), { size: ButtonSimple.sizes.S, icon: button.icon || _jsx(KebabSVG, {}), 'data-test-id': TEST_IDS.settings.droplistTrigger });
+    const buttonProps = Object.assign(Object.assign({}, button), { size: 's', icon: button.icon || _jsx(KebabSVG, {}), 'data-test-id': TEST_IDS.settings.droplistTrigger });
     if (!(actions === null || actions === void 0 ? void 0 : actions.length)) {
         return _jsx(ButtonSimple, Object.assign({}, buttonProps));
     }

package/dist/components/NotificationPanel/components/NotificationPanelSettings/NotificationPanelSettingsDroplist.js

@@ -9,5 +9,5 @@ export function NotificationPanelSettingsDroplist({ actions, button }) {
     const { firstElementRefCallback, triggerElementRef, handleDroplistFocusLeave, handleTriggerKeyDown, handleDroplistItemKeyDown, handleDroplistItemClick, } = Droplist.useKeyboardNavigation({
         setDroplistOpen,
     });
-    return (_jsx(Droplist, Object.assign({ open: isDroplistOpen, onOpenChange: setDroplistOpen, firstElementRefCallback: firstElementRefCallback, onFocusLeave: handleDroplistFocusLeave, useScroll: true, triggerRef: triggerElementRef, triggerElement: _jsx(ButtonSimple, Object.assign({}, button, { onKeyDown: handleTriggerKeyDown })), placement: Droplist.placements.BottomEnd, "data-test-id": TEST_IDS.settings.droplist }, { children: actions.map(action => (_createElement(Droplist.ItemSingle, Object.assign({}, action, { key: action.option, onClick: e => handleDroplistItemClick(e, action.onClick), onKeyDown: handleDroplistItemKeyDown, "data-test-id": TEST_IDS.settings.droplistAction })))) })));
+    return (_jsx(Droplist, { open: isDroplistOpen, onOpenChange: setDroplistOpen, firstElementRefCallback: firstElementRefCallback, onFocusLeave: handleDroplistFocusLeave, useScroll: true, triggerRef: triggerElementRef, triggerElement: _jsx(ButtonSimple, Object.assign({}, button, { onKeyDown: handleTriggerKeyDown })), placement: 'bottom-end', "data-test-id": TEST_IDS.settings.droplist, children: actions.map(action => (_createElement(Droplist.ItemSingle, Object.assign({}, action, { key: action.option, onClick: e => handleDroplistItemClick(e, action.onClick), onKeyDown: handleDroplistItemKeyDown, "data-test-id": TEST_IDS.settings.droplistAction })))) }));
 }

package/dist/helperComponents/NotificationPanelPopover/NotificationPanelPopover.js

@@ -14,9 +14,9 @@ import cn from 'classnames';
 import { PopoverPrivate } from '@snack-uikit/popover-private';
 import styles from './styles.module.css';
 export function NotificationPanelPopover(_a) {
-    var { content, trigger = PopoverPrivate.triggers.Click, placement = PopoverPrivate.placements.BottomEnd, children, contentClassName } = _a, otherProps = __rest(_a, ["content", "trigger", "placement", "children", "contentClassName"]);
+    var { content, trigger = 'click', placement = 'bottom-end', children, contentClassName } = _a, otherProps = __rest(_a, ["content", "trigger", "placement", "children", "contentClassName"]);
     if (!children) {
         return null;
     }
-    return (_jsx(PopoverPrivate, Object.assign({ fallbackPlacements: [], placement: placement, popoverContent: _jsx("div", Object.assign({ className: styles.notificationPanelPopoverWrap }, { children: _jsx("div", Object.assign({ className: cn(styles.notificationPanelPopover, contentClassName) }, { children: content })) })), trigger: trigger, hasArrow: false, heightStrategy: PopoverPrivate.heightStrategies.Lte }, otherProps, { children: children })));
+    return (_jsx(PopoverPrivate, Object.assign({ fallbackPlacements: [], placement: placement, popoverContent: _jsx("div", { className: styles.notificationPanelPopoverWrap, children: _jsx("div", { className: cn(styles.notificationPanelPopover, contentClassName), children: content }) }), trigger: trigger, hasArrow: false, heightStrategy: 'lte' }, otherProps, { children: children })));
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Notification",
-  "version": "0.4.2",
+  "version": "0.5.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,19 +32,19 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.14.1",
-    "@snack-uikit/chips": "0.9.2",
-    "@snack-uikit/droplist": "0.11.2",
-    "@snack-uikit/icon-predefined": "0.3.1",
-    "@snack-uikit/icons": "0.19.0",
-    "@snack-uikit/link": "0.8.1",
-    "@snack-uikit/popover-private": "0.11.1",
-    "@snack-uikit/scroll": "0.4.1",
-    "@snack-uikit/skeleton": "0.3.1",
-    "@snack-uikit/truncate-string": "0.3.1",
-    "@snack-uikit/typography": "0.5.1",
-    "@snack-uikit/utils": "3.1.0",
+    "@snack-uikit/button": "0.15.0",
+    "@snack-uikit/chips": "0.10.1",
+    "@snack-uikit/droplist": "0.12.1",
+    "@snack-uikit/icon-predefined": "0.4.0",
+    "@snack-uikit/icons": "0.19.1",
+    "@snack-uikit/link": "0.9.1",
+    "@snack-uikit/popover-private": "0.12.1",
+    "@snack-uikit/scroll": "0.5.0",
+    "@snack-uikit/skeleton": "0.3.2",
+    "@snack-uikit/truncate-string": "0.4.1",
+    "@snack-uikit/typography": "0.6.0",
+    "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "e124e31699926810648702f97db72413d7ebd2b2"
+  "gitHead": "62f43bf0cbfd611d0b746117400f67096b1790f6"
 }

package/src/components/NotificationCard/NotificationCard.tsx

@@ -8,9 +8,10 @@ import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
 import { NotificationCardFunction } from './components';
-import { Appearance, TEST_IDS } from './constants';
+import { APPEARANCE, TEST_IDS } from './constants';
 import { getIcon } from './helpers';
 import styles from './styles.module.scss';
+import { Appearance } from './types';
 
 export type NotificationCardProps = WithSupportProps<{
   /** Идентификатор уведомления */
@@ -45,7 +46,7 @@ export type NotificationCardProps = WithSupportProps<{
 /** Компонент карточки уведомления */
 export function NotificationCard({
   id,
-  appearance = Appearance.Neutral,
+  appearance = APPEARANCE.Neutral,
   label,
   unread,
   title,
@@ -58,10 +59,10 @@ export function NotificationCard({
   className,
   ...rest
 }: NotificationCardProps) {
-  const { icon, linkOnColor } = useMemo(
+  const { icon, linkOnColor } = useMemo<{ icon: ReturnType<typeof getIcon>; linkOnColor: LinkProps['onColor'] }>(
     () => ({
       icon: getIcon(appearance),
-      linkOnColor: appearance === Appearance.ErrorCritical ? Link.onColors.Red : undefined,
+      linkOnColor: appearance === APPEARANCE.ErrorCritical ? 'red' : undefined,
     }),
     [appearance],
   );
@@ -122,7 +123,7 @@ export function NotificationCard({
       )}
 
       {label && (
-        <Typography.LightLabelS tag={Typography.tags.div} className={styles.notificationCardLabel}>
+        <Typography.LightLabelS tag='div' className={styles.notificationCardLabel}>
           <TruncateString maxLines={1} text={label} data-test-id={TEST_IDS.label} />
         </Typography.LightLabelS>
       )}
@@ -130,17 +131,13 @@ export function NotificationCard({
       <div className={styles.notificationCardTitle}>
         <div className={styles.notificationCardTitleIcon}>{icon}</div>
 
-        <Typography.SansTitleS tag={Typography.tags.div} className={styles.notificationCardTitleText}>
+        <Typography.SansTitleS tag='div' className={styles.notificationCardTitleText}>
           <TruncateString maxLines={2} text={title} data-test-id={TEST_IDS.title} />
         </Typography.SansTitleS>
       </div>
 
       {content && (
-        <Typography.SansBodyS
-          tag={Typography.tags.div}
-          className={styles.notificationCardContent}
-          data-test-id={TEST_IDS.content}
-        >
+        <Typography.SansBodyS tag='div' className={styles.notificationCardContent} data-test-id={TEST_IDS.content}>
           {content}
         </Typography.SansBodyS>
       )}
@@ -152,8 +149,8 @@ export function NotificationCard({
               {...link}
               onClick={handleLinkClick}
               onColor={linkOnColor}
-              onSurface={Link.onSurfaces.Decor}
-              size={Link.sizes.S}
+              onSurface='decor'
+              size='s'
               data-test-id={TEST_IDS.link}
             />
           )}
@@ -168,5 +165,3 @@ export function NotificationCard({
     </div>
   );
 }
-
-NotificationCard.appearances = Appearance;

package/src/components/NotificationCard/components/NotificationCardFunction.tsx

@@ -30,14 +30,14 @@ export function NotificationCardFunction({ actions, open, setDroplistOpen }: Not
       <Droplist
         open={open}
         onOpenChange={setDroplistOpen}
-        placement={Droplist.placements.BottomEnd}
+        placement='bottom-end'
         firstElementRefCallback={firstElementRefCallback}
         onFocusLeave={handleDroplistFocusLeave}
         triggerRef={triggerElementRef}
         useScroll
         triggerElement={
           <ButtonFunction
-            size={ButtonFunction.sizes.S}
+            size='s'
             icon={<KebabSVG />}
             onKeyDown={handleTriggerKeyDown}
             data-test-id={TEST_IDS.actions.droplistTrigger}

package/src/components/NotificationCard/constants.ts

@@ -1,10 +1,10 @@
-export enum Appearance {
-  Neutral = 'neutral',
-  Error = 'error',
-  ErrorCritical = 'errorCritical',
-  Warning = 'warning',
-  Success = 'success',
-}
+export const APPEARANCE = {
+  Neutral: 'neutral',
+  Error: 'error',
+  ErrorCritical: 'errorCritical',
+  Warning: 'warning',
+  Success: 'success',
+} as const;
 
 export const TEST_IDS = {
   label: 'notification-card__label',

package/src/components/NotificationCard/helpers.tsx

@@ -1,17 +1,18 @@
 import { AlarmFilledSVG, CheckFilledSVG, CrossFilledSVG, InfoFilledSVG } from '@snack-uikit/icons';
 
-import { Appearance } from './constants';
+import { APPEARANCE } from './constants';
+import { Appearance } from './types';
 
 export function getIcon(appearance: Appearance) {
   switch (appearance) {
-    case Appearance.Success:
+    case APPEARANCE.Success:
       return <CheckFilledSVG size={16} />;
-    case Appearance.Error:
-    case Appearance.ErrorCritical:
+    case APPEARANCE.Error:
+    case APPEARANCE.ErrorCritical:
       return <CrossFilledSVG size={16} />;
-    case Appearance.Warning:
+    case APPEARANCE.Warning:
       return <AlarmFilledSVG size={16} />;
-    case Appearance.Neutral:
+    case APPEARANCE.Neutral:
       return <InfoFilledSVG size={16} />;
     default:
       return null;

package/src/components/NotificationCard/types.ts

@@ -0,0 +1,5 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+import { APPEARANCE } from './constants';
+
+export type Appearance = ValueOf<typeof APPEARANCE>;

package/src/components/NotificationPanel/NotificationPanel.tsx

@@ -2,7 +2,6 @@ import { MouseEventHandler, ReactNode, useMemo } from 'react';
 
 import { ButtonFunction, ButtonFunctionProps } from '@snack-uikit/button';
 import { ChipToggle, ChipToggleProps } from '@snack-uikit/chips';
-import { PopoverPrivate } from '@snack-uikit/popover-private';
 import { Scroll } from '@snack-uikit/scroll';
 import { SkeletonContextProvider, WithSkeleton } from '@snack-uikit/skeleton';
 import { TruncateString } from '@snack-uikit/truncate-string';
@@ -83,7 +82,7 @@ export function NotificationPanel({
                     {...chip}
                     key={chip.label}
                     data-test-id={`${TEST_IDS.chip}-${chip.label}`}
-                    size={ChipToggle.sizes.Xs}
+                    size='xs'
                     disabled={chip.disabled || loading}
                   />
                 ))}
@@ -99,7 +98,7 @@ export function NotificationPanel({
             </div>
           </div>
 
-          <Scroll size={Scroll.sizes.M} className={styles.notificationPanelBody}>
+          <Scroll size='m' className={styles.notificationPanelBody}>
             {loading ? (
               <SkeletonContextProvider loading={loading || false}>
                 {skeletons.map(skeleton => (
@@ -124,10 +123,6 @@ export function NotificationPanel({
   );
 }
 
-NotificationPanel.placements = PopoverPrivate.placements;
-NotificationPanel.triggers = PopoverPrivate.triggers;
-NotificationPanel.widthStrategies = PopoverPrivate.widthStrategies;
-
 export namespace NotificationPanel {
   export const Blank: typeof NotificationPanelBlank = NotificationPanelBlank;
   export type BlankProps = NotificationPanelBlankProps;

package/src/components/NotificationPanel/components/NotificationPanelBlank/NotificationPanelBlank.tsx

@@ -24,7 +24,7 @@ export type NotificationPanelBlankProps = WithSupportProps<{
 /** Компонента для "заглушки" вместо карточек в панели */
 export function NotificationPanelBlank({
   icon,
-  iconAppearance = IconPredefined.appearances.Neutral,
+  iconAppearance = 'neutral',
   title,
   description,
   className,
@@ -32,18 +32,11 @@ export function NotificationPanelBlank({
 }: NotificationPanelBlankProps) {
   return (
     <div className={cn(styles.notificationPanelBlank, className)} {...extractSupportProps(rest)}>
-      {icon && (
-        <IconPredefined
-          icon={icon}
-          appearance={iconAppearance}
-          size={IconPredefined.sizes.L}
-          data-test-id={TEST_IDS.blank.icon}
-        />
-      )}
+      {icon && <IconPredefined icon={icon} appearance={iconAppearance} size='l' data-test-id={TEST_IDS.blank.icon} />}
 
       <div className={styles.notificationPanelBlankContent}>
         <Typography.SansTitleS
-          tag={Typography.tags.div}
+          tag='div'
           className={styles.notificationPanelBlankTitle}
           data-test-id={TEST_IDS.blank.title}
         >
@@ -51,7 +44,7 @@ export function NotificationPanelBlank({
         </Typography.SansTitleS>
 
         <Typography.SansBodyM
-          tag={Typography.tags.div}
+          tag='div'
           className={styles.notificationPanelBlankDescription}
           data-test-id={TEST_IDS.blank.description}
         >
@@ -61,5 +54,3 @@ export function NotificationPanelBlank({
     </div>
   );
 }
-
-NotificationPanelBlank.iconAppearances = IconPredefined.appearances;

package/src/components/NotificationPanel/components/NotificationPanelSettings/NotificationPanelSettings.tsx

@@ -18,7 +18,7 @@ export type NotificationPanelSettingsProps = {
 export function NotificationPanelSettings({ actions, button }: NotificationPanelSettingsProps) {
   const buttonProps: ButtonSimpleProps = {
     ...button,
-    size: ButtonSimple.sizes.S,
+    size: 's',
     icon: button.icon || <KebabSVG />,
     'data-test-id': TEST_IDS.settings.droplistTrigger,
   };

package/src/components/NotificationPanel/components/NotificationPanelSettings/NotificationPanelSettingsDroplist.tsx

@@ -33,7 +33,7 @@ export function NotificationPanelSettingsDroplist({ actions, button }: Notificat
       useScroll
       triggerRef={triggerElementRef}
       triggerElement={<ButtonSimple {...button} onKeyDown={handleTriggerKeyDown} />}
-      placement={Droplist.placements.BottomEnd}
+      placement='bottom-end'
       data-test-id={TEST_IDS.settings.droplist}
     >
       {actions.map(action => (

package/src/helperComponents/NotificationPanelPopover/NotificationPanelPopover.tsx

@@ -30,8 +30,8 @@ export type NotificationPanelPopoverProps = WithSupportProps<
 
 export function NotificationPanelPopover({
   content,
-  trigger = PopoverPrivate.triggers.Click,
-  placement = PopoverPrivate.placements.BottomEnd,
+  trigger = 'click',
+  placement = 'bottom-end',
   children,
   contentClassName,
   ...otherProps
@@ -51,7 +51,7 @@ export function NotificationPanelPopover({
       }
       trigger={trigger}
       hasArrow={false}
-      heightStrategy={PopoverPrivate.heightStrategies.Lte}
+      heightStrategy='lte'
       {...otherProps}
     >
       {children}