@snack-uikit/table 0.10.2 → 0.11.1

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.11.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)
+* [@snack-uikit/toolbar@0.7.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/toolbar/CHANGELOG.md)
+
+
+
+
+
+# 0.11.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.10.2 (2024-01-23)
 
 ### Only dependencies have been changed

package/README.md

@@ -119,7 +119,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | outline | `boolean` | - | Внешний бордер для тулбара и таблицы |
 | columnFilters | `ReactNode` | - | Фильтры |
 | exportFileName | `string` | - | Название файла при экспорте CSV/XLSX |
-| moreActions | `Pick<DroplistItemSingleProps, "option" \| "caption" \| "description" \| "tagLabel" \| "disabled" \| "icon" \| "onClick">[]` | - | Элементы выпадающего списка кнопки с действиями |
+| moreActions | `Action[]` | - | Элементы выпадающего списка кнопки с действиями |
 | noDataState | `TableEmptyStateProps` | {   icon: CrossSVG,   appearance: 'red',   title: 'Data collection error',   description: 'Try refreshing the page', } as const | Экран при отстутствии данных |
 | noResultsState | `TableEmptyStateProps` | {   icon: SearchSVG,   appearance: 'neutral',   title: 'Not found',   description: 'Try entering another query', } as const | Экран при отстутствии результатов поиска |
 | suppressToolbar | `boolean` | - | Отключение тулбара |

package/dist/helperComponents/Cells/RowActionsCell/RowActionsCell.d.ts

@@ -1,13 +1,15 @@
 import { CellContext } from '@tanstack/react-table';
-import { MouseEvent } from 'react';
-import { ItemSingleProps } from '@snack-uikit/droplist';
+import { MouseEvent, ReactElement } from 'react';
+import { BaseItemProps } from '@snack-uikit/list';
 import { ColumnDefinition } from '../../../types';
 export type RowActionInfo<TData> = {
     rowId: string;
     data: TData;
     itemId?: string;
 };
-export type RowActionProps<TData> = Pick<ItemSingleProps, 'option' | 'disabled' | 'icon' | 'description' | 'caption' | 'tagLabel'> & {
+export type RowActionProps<TData> = Pick<BaseItemProps, 'content' | 'disabled'> & {
+    icon?: ReactElement;
+    tagLabel?: string;
     id?: string;
     hidden?: boolean;
     onClick(row: RowActionInfo<TData>, e: MouseEvent<HTMLButtonElement>): void;

package/dist/helperComponents/Cells/RowActionsCell/RowActionsCell.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 import { ButtonFunction } from '@snack-uikit/button';
-import { Droplist } from '@snack-uikit/droplist';
 import { MoreSVG } from '@snack-uikit/icons';
+import { Droplist } from '@snack-uikit/list';
+import { Tag } from '@snack-uikit/tag';
 import { COLUMN_PIN_POSITION, TEST_IDS } from '../../../constants';
 import { useRowContext } from '../../contexts';
 import styles from './styles.module.css';
 function RowActionsCell({ row, actions }) {
     const { droplistOpened, setDroplistOpen } = useRowContext();
-    const { triggerElementRef, handleDroplistFocusLeave, handleDroplistItemKeyDown, handleTriggerKeyDown, handleDroplistItemClick, firstElementRefCallback, } = Droplist.useKeyboardNavigation({ setDroplistOpen });
+    const triggerRef = useRef(null);
     const handleItemClick = (item) => (e) => {
         item.onClick({ rowId: row.id, itemId: item.id, data: row.original }, e);
     };
@@ -20,7 +20,18 @@ function RowActionsCell({ row, actions }) {
     const visibleActions = useMemo(() => actions.filter(item => !(item === null || item === void 0 ? void 0 : item.hidden)), [actions]);
     return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    _jsx("div", { onClick: stopPropagationClick, className: styles.rowActionsCellWrap, "data-open": droplistOpened || undefined, children: !disabled && Boolean(visibleActions.length) && (_jsx(Droplist, { open: droplistOpened, onOpenChange: setDroplistOpen, placement: 'bottom-end', firstElementRefCallback: firstElementRefCallback, onFocusLeave: handleDroplistFocusLeave, triggerElement: _jsx("span", { children: _jsx(ButtonFunction, { icon: _jsx(MoreSVG, { size: 24 }), "data-test-id": TEST_IDS.rowActions.droplistTrigger, onKeyDown: handleTriggerKeyDown, ref: triggerElementRef }) }), triggerClassName: styles.rowActionsCellTrigger, size: 'm', "data-test-id": TEST_IDS.rowActions.droplist, children: actions.map(item => (_createElement(Droplist.ItemSingle, Object.assign({}, item, { key: `${row.id}-${item.id || item.option}`, onClick: e => handleDroplistItemClick(e, handleItemClick(item)), "data-test-id": TEST_IDS.rowActions.option, onKeyDown: handleDroplistItemKeyDown })))) })) }));
+    _jsx("div", { onClick: stopPropagationClick, className: styles.rowActionsCellWrap, "data-open": droplistOpened || undefined, children: !disabled && Boolean(visibleActions.length) && (_jsx(Droplist, { trigger: 'clickAndFocusVisible', open: droplistOpened, onOpenChange: setDroplistOpen, placement: 'bottom-end', size: 'm', "data-test-id": TEST_IDS.rowActions.droplist, triggerElemRef: triggerRef, items: actions.map(item => ({
+                id: item.id,
+                onClick: e => {
+                    handleItemClick(item)(e);
+                    setDroplistOpen(false);
+                },
+                disabled: item.disabled,
+                content: item.content,
+                beforeContent: item.icon,
+                afterContent: item.tagLabel ? _jsx(Tag, { label: item.tagLabel }) : undefined,
+                'data-test-id': TEST_IDS.rowActions.option,
+            })), children: _jsx("span", { className: styles.rowActionsCellTrigger, children: _jsx(ButtonFunction, { icon: _jsx(MoreSVG, { size: 24 }), "data-test-id": TEST_IDS.rowActions.droplistTrigger, ref: triggerRef }) }) })) }));
 }
 /** Вспомогательная функция для создания ячейки с дополнительными действиями у строки */
 export function getRowActionsColumnDef({ actionsGenerator, pinned, }) {

package/dist/helperComponents/ExportButton/ExportButton.js

@@ -1,27 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { ButtonFunction } from '@snack-uikit/button';
-import { Droplist } from '@snack-uikit/droplist';
 import { DownloadSVG } from '@snack-uikit/icons';
+import { Droplist } from '@snack-uikit/list';
 import { exportToCSV, exportToXLSX } from '../../exportTable';
 export function ExportButton({ fileName, data, columnDefinitions }) {
     const [isOpen, setIsOpen] = useState(false);
-    const { firstElementRefCallback, handleDroplistFocusLeave, handleTriggerKeyDown, handleDroplistItemKeyDown, handleDroplistItemClick, triggerElementRef, } = Droplist.useKeyboardNavigation({ setDroplistOpen: setIsOpen });
-    return (_jsx(Droplist, { firstElementRefCallback: firstElementRefCallback, triggerRef: triggerElementRef, onFocusLeave: handleDroplistFocusLeave, open: isOpen, onOpenChange: setIsOpen, useScroll: true, placement: 'bottom-end', triggerElement: _jsx(ButtonFunction, { size: 'm', onKeyDown: handleTriggerKeyDown, icon: _jsx(DownloadSVG, {}) }), children: [
+    return (_jsx(Droplist, { trigger: 'clickAndFocusVisible', open: isOpen, onOpenChange: setIsOpen, scroll: true, placement: 'bottom-end', items: [
             {
-                option: 'Export to CSV',
+                content: { option: 'Export to CSV' },
                 onClick: () => {
                     exportToCSV({ fileName, columnDefinitions, data });
+                    setIsOpen(false);
                 },
             },
             {
-                option: 'Export to XLSX',
+                content: { option: 'Export to XLSX' },
                 onClick: () => {
                     exportToXLSX({ fileName, columnDefinitions, data });
+                    setIsOpen(false);
                 },
             },
-        ].map(({ option, onClick }) => (_jsx(Droplist.ItemSingle, { option: option, onKeyDown: handleDroplistItemKeyDown, onClick: e => {
-                handleDroplistItemClick(e);
-                onClick === null || onClick === void 0 ? void 0 : onClick();
-            } }, option))) }));
+        ], children: _jsx(ButtonFunction, { size: 'm', icon: _jsx(DownloadSVG, {}) }) }));
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.10.2",
+  "version": "0.11.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,15 +33,16 @@
   "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/list": "0.1.1",
     "@snack-uikit/pagination": "0.6.1",
     "@snack-uikit/scroll": "0.5.0",
     "@snack-uikit/skeleton": "0.3.2",
+    "@snack-uikit/tag": "0.6.4",
     "@snack-uikit/toggles": "0.9.4",
-    "@snack-uikit/toolbar": "0.6.2",
+    "@snack-uikit/toolbar": "0.7.1",
     "@snack-uikit/truncate-string": "0.4.5",
     "@snack-uikit/typography": "0.6.1",
     "@snack-uikit/utils": "3.2.0",
@@ -51,5 +52,5 @@
     "uncontrollable": "8.0.0",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz"
   },
-  "gitHead": "c292f4c45173928f57cc5c9f3cb02efb26887b64"
+  "gitHead": "54873fdb2f34f26a771f62568d3d6fcd62ea1694"
 }

package/src/helperComponents/Cells/RowActionsCell/RowActionsCell.tsx

@@ -1,9 +1,10 @@
 import { CellContext, Row } from '@tanstack/react-table';
-import { MouseEvent, useMemo } from 'react';
+import { MouseEvent, ReactElement, useMemo, useRef } from 'react';
 
 import { ButtonFunction } from '@snack-uikit/button';
-import { Droplist, ItemSingleProps } from '@snack-uikit/droplist';
 import { MoreSVG } from '@snack-uikit/icons';
+import { BaseItemProps, Droplist } from '@snack-uikit/list';
+import { Tag } from '@snack-uikit/tag';
 
 import { COLUMN_PIN_POSITION, TEST_IDS } from '../../../constants';
 import { ColumnDefinition } from '../../../types';
@@ -16,10 +17,9 @@ export type RowActionInfo<TData> = {
   itemId?: string;
 };
 
-export type RowActionProps<TData> = Pick<
-  ItemSingleProps,
-  'option' | 'disabled' | 'icon' | 'description' | 'caption' | 'tagLabel'
-> & {
+export type RowActionProps<TData> = Pick<BaseItemProps, 'content' | 'disabled'> & {
+  icon?: ReactElement;
+  tagLabel?: string;
   id?: string;
   hidden?: boolean;
   onClick(row: RowActionInfo<TData>, e: MouseEvent<HTMLButtonElement>): void;
@@ -32,15 +32,7 @@ type RowActionsCellProps<TData> = {
 
 function RowActionsCell<TData>({ row, actions }: RowActionsCellProps<TData>) {
   const { droplistOpened, setDroplistOpen } = useRowContext();
-
-  const {
-    triggerElementRef,
-    handleDroplistFocusLeave,
-    handleDroplistItemKeyDown,
-    handleTriggerKeyDown,
-    handleDroplistItemClick,
-    firstElementRefCallback,
-  } = Droplist.useKeyboardNavigation<HTMLButtonElement>({ setDroplistOpen });
+  const triggerRef = useRef(null);
 
   const handleItemClick = (item: RowActionProps<TData>) => (e: MouseEvent<HTMLButtonElement>) => {
     item.onClick({ rowId: row.id, itemId: item.id, data: row.original }, e);
@@ -59,34 +51,33 @@ function RowActionsCell<TData>({ row, actions }: RowActionsCellProps<TData>) {
     <div onClick={stopPropagationClick} className={styles.rowActionsCellWrap} data-open={droplistOpened || undefined}>
       {!disabled && Boolean(visibleActions.length) && (
         <Droplist
+          trigger='clickAndFocusVisible'
           open={droplistOpened}
           onOpenChange={setDroplistOpen}
           placement='bottom-end'
-          firstElementRefCallback={firstElementRefCallback}
-          onFocusLeave={handleDroplistFocusLeave}
-          triggerElement={
-            <span>
-              <ButtonFunction
-                icon={<MoreSVG size={24} />}
-                data-test-id={TEST_IDS.rowActions.droplistTrigger}
-                onKeyDown={handleTriggerKeyDown}
-                ref={triggerElementRef}
-              />
-            </span>
-          }
-          triggerClassName={styles.rowActionsCellTrigger}
           size='m'
           data-test-id={TEST_IDS.rowActions.droplist}
+          triggerElemRef={triggerRef}
+          items={actions.map(item => ({
+            id: item.id,
+            onClick: e => {
+              handleItemClick(item)(e);
+              setDroplistOpen(false);
+            },
+            disabled: item.disabled,
+            content: item.content,
+            beforeContent: item.icon,
+            afterContent: item.tagLabel ? <Tag label={item.tagLabel} /> : undefined,
+            'data-test-id': TEST_IDS.rowActions.option,
+          }))}
         >
-          {actions.map(item => (
-            <Droplist.ItemSingle
-              {...item}
-              key={`${row.id}-${item.id || item.option}`}
-              onClick={e => handleDroplistItemClick(e, handleItemClick(item))}
-              data-test-id={TEST_IDS.rowActions.option}
-              onKeyDown={handleDroplistItemKeyDown}
+          <span className={styles.rowActionsCellTrigger}>
+            <ButtonFunction
+              icon={<MoreSVG size={24} />}
+              data-test-id={TEST_IDS.rowActions.droplistTrigger}
+              ref={triggerRef}
             />
-          ))}
+          </span>
         </Droplist>
       )}
     </div>

package/src/helperComponents/ExportButton/ExportButton.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 
 import { ButtonFunction } from '@snack-uikit/button';
-import { Droplist } from '@snack-uikit/droplist';
 import { DownloadSVG } from '@snack-uikit/icons';
+import { Droplist } from '@snack-uikit/list';
 
 import { exportToCSV, exportToXLSX } from '../../exportTable';
 import { ColumnDefinition } from '../../types';
@@ -19,50 +19,31 @@ type ExportButtonProps<TData extends object> = {
 export function ExportButton<TData extends object>({ fileName, data, columnDefinitions }: ExportButtonProps<TData>) {
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
-  const {
-    firstElementRefCallback,
-    handleDroplistFocusLeave,
-    handleTriggerKeyDown,
-    handleDroplistItemKeyDown,
-    handleDroplistItemClick,
-    triggerElementRef,
-  } = Droplist.useKeyboardNavigation<HTMLButtonElement>({ setDroplistOpen: setIsOpen });
-
   return (
     <Droplist
-      firstElementRefCallback={firstElementRefCallback}
-      triggerRef={triggerElementRef}
-      onFocusLeave={handleDroplistFocusLeave}
+      trigger='clickAndFocusVisible'
       open={isOpen}
       onOpenChange={setIsOpen}
-      useScroll
+      scroll
       placement='bottom-end'
-      triggerElement={<ButtonFunction size='m' onKeyDown={handleTriggerKeyDown} icon={<DownloadSVG />} />}
-    >
-      {[
+      items={[
         {
-          option: 'Export to CSV',
+          content: { option: 'Export to CSV' },
           onClick: () => {
             exportToCSV<TData>({ fileName, columnDefinitions, data });
+            setIsOpen(false);
           },
         },
         {
-          option: 'Export to XLSX',
+          content: { option: 'Export to XLSX' },
           onClick: () => {
             exportToXLSX<TData>({ fileName, columnDefinitions, data });
+            setIsOpen(false);
           },
         },
-      ].map(({ option, onClick }) => (
-        <Droplist.ItemSingle
-          option={option}
-          onKeyDown={handleDroplistItemKeyDown}
-          key={option}
-          onClick={e => {
-            handleDroplistItemClick(e);
-            onClick?.();
-          }}
-        />
-      ))}
+      ]}
+    >
+      <ButtonFunction size='m' icon={<DownloadSVG />} />
     </Droplist>
   );
 }