@snack-uikit/notification 0.5.5 → 0.6.1

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.6.1 (2024-01-30)
+
+### Only dependencies have been changed
+* [@snack-uikit/list@0.1.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/list/CHANGELOG.md)
+
+
+
+
+
+# 0.6.0 (2024-01-30)
+
+
+### BREAKING CHANGES
+
+
+* **FF-4075:** change usage droplist to list package ([4ce6391](https://github.com/cloud-ru-tech/snack-uikit/commit/4ce63915e838a46a3776e8e21393695a37d2fdd3))
+
+
+
+
 ## 0.5.5 (2024-01-23)
 
 ### Only dependencies have been changed

package/README.md

@@ -91,7 +91,7 @@ const cards = [
 | link | `Omit<LinkProps, "data-test-id" \| "appearance" \| "size" \| "textMode">` | - | Ссылка |
 | onClick | `MouseEventHandler<HTMLDivElement>` | - | Колбэк клика по карточке |
 | onVisible | `(cardId: string) => void` | - | Колбэк при попадании карточки в область видимости на 80% |
-| actions | `Pick<DroplistItemSingleProps, "onClick" \| "option" \| "caption" \| "description" \| "tagLabel" \| "disabled" \| "icon">[]` | - | Дополнительные действия у карточки |
+| actions | `Action[]` | - | Дополнительные действия у карточки |
 | className | `string` | - | CSS-класс |
 ## NotificationPanel
 Компонент панели для уведомлений

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

@@ -1,8 +1,12 @@
-import { MouseEventHandler, ReactNode } from 'react';
-import { ItemSingleProps } from '@snack-uikit/droplist';
+import { MouseEventHandler, ReactElement, ReactNode } from 'react';
 import { LinkProps } from '@snack-uikit/link';
+import { BaseItemProps } from '@snack-uikit/list';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { Appearance } from './types';
+type Action = {
+    icon?: ReactElement;
+    tagLabel?: string;
+} & Pick<BaseItemProps, 'content' | 'onClick' | 'disabled'>;
 export type NotificationCardProps = WithSupportProps<{
     /** Идентификатор уведомления */
     id: string;
@@ -25,9 +29,10 @@ export type NotificationCardProps = WithSupportProps<{
     /** Колбэк при попадании карточки в область видимости на 80% */
     onVisible?(cardId: string): void;
     /** Дополнительные действия у карточки */
-    actions?: Pick<ItemSingleProps, 'option' | 'onClick' | 'disabled' | 'icon' | 'description' | 'caption' | 'tagLabel'>[];
+    actions?: Action[];
     /** CSS-класс */
     className?: string;
 }>;
 /** Компонент карточки уведомления */
 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 {};

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

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
-import { DroplistProps } from '@snack-uikit/droplist';
 import { NotificationCardProps } from '../NotificationCard';
-export type NotificationCardFunctionProps = Required<Pick<NotificationCardProps, 'actions'>> & Required<Pick<DroplistProps, 'open'>> & {
+export type NotificationCardFunctionProps = Required<Pick<NotificationCardProps, 'actions'>> & {
+    open: boolean;
     setDroplistOpen: Dispatch<SetStateAction<boolean>>;
 };
 export declare function NotificationCardFunction({ actions, open, setDroplistOpen }: NotificationCardFunctionProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,13 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
 import { ButtonFunction } from '@snack-uikit/button';
-import { Droplist } from '@snack-uikit/droplist';
 import { KebabSVG } from '@snack-uikit/icons';
+import { Droplist } from '@snack-uikit/list';
+import { Tag } from '@snack-uikit/tag';
 import { TEST_IDS } from '../constants';
 import styles from '../styles.module.css';
 export function NotificationCardFunction({ actions, open, setDroplistOpen }) {
-    const { firstElementRefCallback, triggerElementRef, handleDroplistFocusLeave, handleTriggerKeyDown, handleDroplistItemKeyDown, handleDroplistItemClick, } = Droplist.useKeyboardNavigation({
-        setDroplistOpen,
-    });
-    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 })))) }) }));
+    return (_jsx("div", { className: styles.notificationCardFunction, "data-test-id": TEST_IDS.actions.wrapper, children: _jsx(Droplist, { trigger: 'clickAndFocusVisible', open: open, onOpenChange: setDroplistOpen, placement: 'bottom-end', scroll: true, "data-test-id": TEST_IDS.actions.droplist, items: actions.map(({ onClick, disabled, content, tagLabel, icon }) => ({
+                onClick: e => {
+                    setDroplistOpen(false);
+                    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+                },
+                disabled,
+                content,
+                beforeContent: icon,
+                afterContent: tagLabel ? _jsx(Tag, { label: tagLabel }) : undefined,
+                'data-test-id': TEST_IDS.actions.droplistAction,
+            })), children: _jsx(ButtonFunction, { size: 's', icon: _jsx(KebabSVG, {}), "data-test-id": TEST_IDS.actions.droplistTrigger }) }) }));
 }

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

@@ -1,8 +1,8 @@
 import { ButtonSimpleProps } from '@snack-uikit/button';
-import { ItemSingleProps } from '@snack-uikit/droplist';
+import { Action } from './NotificationPanelSettingsDroplist';
 export type NotificationPanelSettingsProps = {
     /** Дополнительные действия панели */
-    actions?: Pick<ItemSingleProps, 'option' | 'onClick' | 'disabled' | 'icon' | 'description' | 'caption' | 'tagLabel'>[];
+    actions?: Action[];
     /** Кнопка дополнительного действия панели */
     button: Omit<ButtonSimpleProps, 'label' | 'type' | 'size' | 'data-test-id'>;
 };

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

@@ -1,7 +1,12 @@
+import { ReactElement } from 'react';
 import { ButtonSimpleProps } from '@snack-uikit/button';
-import { ItemSingleProps } from '@snack-uikit/droplist';
+import { BaseItemProps } from '@snack-uikit/list';
+export type Action = {
+    icon?: ReactElement;
+    tagLabel?: string;
+} & Pick<BaseItemProps, 'content' | 'disabled' | 'onClick'>;
 type NotificationPanelSettingsDroplistProps = {
-    actions: ItemSingleProps[];
+    actions: Action[];
     button: ButtonSimpleProps;
 };
 export declare function NotificationPanelSettingsDroplist({ actions, button }: NotificationPanelSettingsDroplistProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,13 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
 import { useState } from 'react';
 import { ButtonSimple } from '@snack-uikit/button';
-import { Droplist } from '@snack-uikit/droplist';
+import { Droplist } from '@snack-uikit/list';
+import { Tag } from '@snack-uikit/tag';
 import { TEST_IDS } from '../../constants';
 export function NotificationPanelSettingsDroplist({ actions, button }) {
     const [isDroplistOpen, setDroplistOpen] = useState(false);
-    const { firstElementRefCallback, triggerElementRef, handleDroplistFocusLeave, handleTriggerKeyDown, handleDroplistItemKeyDown, handleDroplistItemClick, } = Droplist.useKeyboardNavigation({
-        setDroplistOpen,
-    });
-    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 })))) }));
+    return (_jsx(Droplist, { trigger: 'clickAndFocusVisible', open: isDroplistOpen, onOpenChange: setDroplistOpen, scroll: true, placement: 'bottom-end', "data-test-id": TEST_IDS.settings.droplist, items: actions.map(({ icon, content, tagLabel, disabled, onClick }) => ({
+            onClick: e => {
+                setDroplistOpen(false);
+                onClick === null || onClick === void 0 ? void 0 : onClick(e);
+            },
+            disabled,
+            content,
+            beforeContent: icon,
+            afterContent: tagLabel ? _jsx(Tag, { label: tagLabel }) : undefined,
+            'data-test-id': TEST_IDS.settings.droplistAction,
+        })), children: _jsx(ButtonSimple, Object.assign({}, button)) }));
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Notification",
-  "version": "0.5.5",
+  "version": "0.6.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,18 +33,19 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.15.1",
-    "@snack-uikit/chips": "0.10.5",
-    "@snack-uikit/droplist": "0.12.5",
+    "@snack-uikit/chips": "0.10.6",
     "@snack-uikit/icon-predefined": "0.4.1",
     "@snack-uikit/icons": "0.20.0",
     "@snack-uikit/link": "0.10.1",
+    "@snack-uikit/list": "0.1.1",
     "@snack-uikit/popover-private": "0.12.2",
     "@snack-uikit/scroll": "0.5.0",
     "@snack-uikit/skeleton": "0.3.2",
+    "@snack-uikit/tag": "0.6.4",
     "@snack-uikit/truncate-string": "0.4.5",
     "@snack-uikit/typography": "0.6.1",
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "c292f4c45173928f57cc5c9f3cb02efb26887b64"
+  "gitHead": "54873fdb2f34f26a771f62568d3d6fcd62ea1694"
 }

package/src/components/NotificationCard/NotificationCard.tsx

@@ -1,8 +1,8 @@
 import cn from 'classnames';
-import { MouseEventHandler, ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import { MouseEventHandler, ReactElement, ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 
-import { ItemSingleProps } from '@snack-uikit/droplist';
 import { Link, LinkProps } from '@snack-uikit/link';
+import { BaseItemProps } from '@snack-uikit/list';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
@@ -13,6 +13,11 @@ import { getIcon } from './helpers';
 import styles from './styles.module.scss';
 import { Appearance } from './types';
 
+type Action = {
+  icon?: ReactElement;
+  tagLabel?: string;
+} & Pick<BaseItemProps, 'content' | 'onClick' | 'disabled'>;
+
 export type NotificationCardProps = WithSupportProps<{
   /** Идентификатор уведомления */
   id: string;
@@ -35,10 +40,7 @@ export type NotificationCardProps = WithSupportProps<{
   /** Колбэк при попадании карточки в область видимости на 80% */
   onVisible?(cardId: string): void;
   /** Дополнительные действия у карточки */
-  actions?: Pick<
-    ItemSingleProps,
-    'option' | 'onClick' | 'disabled' | 'icon' | 'description' | 'caption' | 'tagLabel'
-  >[];
+  actions?: Action[];
   /** CSS-класс */
   className?: string;
 }>;

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

@@ -1,59 +1,42 @@
 import { Dispatch, SetStateAction } from 'react';
 
 import { ButtonFunction } from '@snack-uikit/button';
-import { Droplist, DroplistProps } from '@snack-uikit/droplist';
 import { KebabSVG } from '@snack-uikit/icons';
+import { Droplist } from '@snack-uikit/list';
+import { Tag } from '@snack-uikit/tag';
 
 import { TEST_IDS } from '../constants';
 import { NotificationCardProps } from '../NotificationCard';
 import styles from '../styles.module.scss';
 
-export type NotificationCardFunctionProps = Required<Pick<NotificationCardProps, 'actions'>> &
-  Required<Pick<DroplistProps, 'open'>> & {
-    setDroplistOpen: Dispatch<SetStateAction<boolean>>;
-  };
+export type NotificationCardFunctionProps = Required<Pick<NotificationCardProps, 'actions'>> & {
+  open: boolean;
+  setDroplistOpen: Dispatch<SetStateAction<boolean>>;
+};
 
 export function NotificationCardFunction({ actions, open, setDroplistOpen }: NotificationCardFunctionProps) {
-  const {
-    firstElementRefCallback,
-    triggerElementRef,
-    handleDroplistFocusLeave,
-    handleTriggerKeyDown,
-    handleDroplistItemKeyDown,
-    handleDroplistItemClick,
-  } = Droplist.useKeyboardNavigation<HTMLButtonElement>({
-    setDroplistOpen,
-  });
-
   return (
     <div className={styles.notificationCardFunction} data-test-id={TEST_IDS.actions.wrapper}>
       <Droplist
+        trigger='clickAndFocusVisible'
         open={open}
         onOpenChange={setDroplistOpen}
         placement='bottom-end'
-        firstElementRefCallback={firstElementRefCallback}
-        onFocusLeave={handleDroplistFocusLeave}
-        triggerRef={triggerElementRef}
-        useScroll
-        triggerElement={
-          <ButtonFunction
-            size='s'
-            icon={<KebabSVG />}
-            onKeyDown={handleTriggerKeyDown}
-            data-test-id={TEST_IDS.actions.droplistTrigger}
-          />
-        }
+        scroll
         data-test-id={TEST_IDS.actions.droplist}
+        items={actions.map(({ onClick, disabled, content, tagLabel, icon }) => ({
+          onClick: e => {
+            setDroplistOpen(false);
+            onClick?.(e);
+          },
+          disabled,
+          content,
+          beforeContent: icon,
+          afterContent: tagLabel ? <Tag label={tagLabel} /> : undefined,
+          'data-test-id': TEST_IDS.actions.droplistAction,
+        }))}
       >
-        {actions.map(action => (
-          <Droplist.ItemSingle
-            {...action}
-            key={action.option}
-            onClick={e => handleDroplistItemClick(e, action.onClick)}
-            data-test-id={TEST_IDS.actions.droplistAction}
-            onKeyDown={handleDroplistItemKeyDown}
-          />
-        ))}
+        <ButtonFunction size='s' icon={<KebabSVG />} data-test-id={TEST_IDS.actions.droplistTrigger} />
       </Droplist>
     </div>
   );

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

@@ -1,16 +1,12 @@
 import { ButtonSimple, ButtonSimpleProps } from '@snack-uikit/button';
-import { ItemSingleProps } from '@snack-uikit/droplist';
 import { KebabSVG } from '@snack-uikit/icons';
 
 import { TEST_IDS } from '../../constants';
-import { NotificationPanelSettingsDroplist } from './NotificationPanelSettingsDroplist';
+import { Action, NotificationPanelSettingsDroplist } from './NotificationPanelSettingsDroplist';
 
 export type NotificationPanelSettingsProps = {
   /** Дополнительные действия панели */
-  actions?: Pick<
-    ItemSingleProps,
-    'option' | 'onClick' | 'disabled' | 'icon' | 'description' | 'caption' | 'tagLabel'
-  >[];
+  actions?: Action[];
   /** Кнопка дополнительного действия панели */
   button: Omit<ButtonSimpleProps, 'label' | 'type' | 'size' | 'data-test-id'>;
 };

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

@@ -1,50 +1,45 @@
-import { useState } from 'react';
+import { ReactElement, useState } from 'react';
 
 import { ButtonSimple, ButtonSimpleProps } from '@snack-uikit/button';
-import { Droplist, ItemSingleProps } from '@snack-uikit/droplist';
+import { BaseItemProps, Droplist } from '@snack-uikit/list';
+import { Tag } from '@snack-uikit/tag';
 
 import { TEST_IDS } from '../../constants';
 
+export type Action = {
+  icon?: ReactElement;
+  tagLabel?: string;
+} & Pick<BaseItemProps, 'content' | 'disabled' | 'onClick'>;
+
 type NotificationPanelSettingsDroplistProps = {
-  actions: ItemSingleProps[];
+  actions: Action[];
   button: ButtonSimpleProps;
 };
 
 export function NotificationPanelSettingsDroplist({ actions, button }: NotificationPanelSettingsDroplistProps) {
   const [isDroplistOpen, setDroplistOpen] = useState(false);
 
-  const {
-    firstElementRefCallback,
-    triggerElementRef,
-    handleDroplistFocusLeave,
-    handleTriggerKeyDown,
-    handleDroplistItemKeyDown,
-    handleDroplistItemClick,
-  } = Droplist.useKeyboardNavigation<HTMLButtonElement>({
-    setDroplistOpen,
-  });
-
   return (
     <Droplist
+      trigger='clickAndFocusVisible'
       open={isDroplistOpen}
       onOpenChange={setDroplistOpen}
-      firstElementRefCallback={firstElementRefCallback}
-      onFocusLeave={handleDroplistFocusLeave}
-      useScroll
-      triggerRef={triggerElementRef}
-      triggerElement={<ButtonSimple {...button} onKeyDown={handleTriggerKeyDown} />}
+      scroll
       placement='bottom-end'
       data-test-id={TEST_IDS.settings.droplist}
+      items={actions.map(({ icon, content, tagLabel, disabled, onClick }) => ({
+        onClick: e => {
+          setDroplistOpen(false);
+          onClick?.(e);
+        },
+        disabled,
+        content,
+        beforeContent: icon,
+        afterContent: tagLabel ? <Tag label={tagLabel} /> : undefined,
+        'data-test-id': TEST_IDS.settings.droplistAction,
+      }))}
     >
-      {actions.map(action => (
-        <Droplist.ItemSingle
-          {...action}
-          key={action.option}
-          onClick={e => handleDroplistItemClick(e, action.onClick)}
-          onKeyDown={handleDroplistItemKeyDown}
-          data-test-id={TEST_IDS.settings.droplistAction}
-        />
-      ))}
+      <ButtonSimple {...button} />
     </Droplist>
   );
 }