@snack-uikit/toolbar 0.6.2 → 0.7.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.7.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.7.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.6.2 (2024-01-23)
 
 ### Only dependencies have been changed

package/README.md

@@ -24,7 +24,7 @@ Toolbar
 | onRefresh | `() => void` | - | Колбек обновления |
 | before | `ReactNode` | - | Дополнительный слот в начале Тулбара |
 | after | `ReactNode` | - | Дополнительный слот в конце тулбара |
-| moreActions | `Pick<DroplistItemSingleProps, "option" \| "caption" \| "description" \| "tagLabel" \| "disabled" \| "icon" \| "onClick">[]` | - | Элементы выпадающего списка кнопки с действиями |
+| moreActions | `Action[]` | - | Элементы выпадающего списка кнопки с действиями |
 
 
 [//]: DOCUMENTATION_SECTION_END

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

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
-import { ItemSingleProps } from '@snack-uikit/droplist';
-import { DeleteActionProps } from '../../helperComponents';
+import { DeleteActionProps, MoreActionsProps } from '../../helperComponents';
 import { NeverOrUndefined, RequireAtLeastOne } from './typesUtils';
 type OptionalProps = {
     /** Колбек обновления */
@@ -10,7 +9,7 @@ type OptionalProps = {
     /** Дополнительный слот в конце тулбара */
     after?: ReactNode;
     /** Элементы выпадающего списка кнопки с действиями */
-    moreActions?: Pick<ItemSingleProps, 'tagLabel' | 'onClick' | 'option' | 'icon' | 'disabled' | 'description' | 'caption'>[];
+    moreActions?: MoreActionsProps['moreActions'];
 };
 export type CommonToolbarProps = {
     /** Параметры отвечают за строку поиска <br>

package/dist/helperComponents/MoreActions/MoreActions.d.ts

@@ -1,5 +1,11 @@
-import { ItemSingleProps } from '@snack-uikit/droplist';
+import { ReactNode } from 'react';
+import { BaseItemProps } from '@snack-uikit/list';
+type Action = {
+    tagLabel?: string;
+    icon?: ReactNode;
+} & Pick<BaseItemProps, 'content' | 'disabled' | 'onClick'>;
 export type MoreActionsProps = {
-    moreActions: Pick<ItemSingleProps, 'tagLabel' | 'onClick' | 'option' | 'icon' | 'disabled' | 'description' | 'caption'>[];
+    moreActions: Action[];
 };
 export declare function MoreActions({ moreActions }: MoreActionsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/helperComponents/MoreActions/MoreActions.js

@@ -1,27 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
-import { useRef, useState } from 'react';
+import { useState } 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 { useHandlers } from './hooks';
-import styles from './styles.module.css';
 export function MoreActions({ moreActions }) {
     const [isOpen, setIsOpen] = useState(false);
-    const [needsFocus, setNeedsFocus] = useState(false);
-    const triggerRef = useRef(null);
-    const { onKeyDown, onFocusLeave, firstElementRefCallback } = useHandlers({
-        triggerRef,
-        setIsOpen,
-        needsFocus,
-        setNeedsFocus,
-    });
-    return (_jsx(Droplist, { open: isOpen, "data-test-id": TEST_IDS.droplist, onOpenChange: setIsOpen, placement: 'bottom-end', onFocusLeave: onFocusLeave, firstElementRefCallback: firstElementRefCallback, useScroll: true, triggerRef: triggerRef, triggerElement: _jsx(ButtonFunction, { icon: _jsx(KebabSVG, { size: 24 }), size: 'm', onKeyDown: onKeyDown, "data-test-id": TEST_IDS.moreActionsButton }), size: 's', children: moreActions.map(item => (_createElement(Droplist.ItemSingle, Object.assign({}, item, { key: item.option, className: styles.item, onClick: e => {
+    return (_jsx(Droplist, { trigger: 'clickAndFocusVisible', open: isOpen, "data-test-id": TEST_IDS.droplist, onOpenChange: setIsOpen, placement: 'bottom-end', scroll: true, size: 's', items: moreActions.map(item => ({
+            onClick: e => {
                 var _a;
                 (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
                 setIsOpen(false);
-                setNeedsFocus(false);
                 e.stopPropagation();
-            }, "data-test-id": TEST_IDS.option })))) }));
+            },
+            disabled: item.disabled,
+            content: item.content,
+            beforeContent: item.icon,
+            afterContent: item.tagLabel ? _jsx(Tag, { label: item.tagLabel }) : undefined,
+            'data-test-id': TEST_IDS.option,
+        })), children: _jsx(ButtonFunction, { icon: _jsx(KebabSVG, { size: 24 }), size: 'm', "data-test-id": TEST_IDS.moreActionsButton }) }));
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Toolbar",
-  "version": "0.6.2",
+  "version": "0.7.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,12 +33,13 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.15.1",
-    "@snack-uikit/droplist": "0.12.5",
     "@snack-uikit/icons": "0.20.0",
-    "@snack-uikit/search-private": "0.1.1",
+    "@snack-uikit/list": "0.1.1",
+    "@snack-uikit/search-private": "0.1.2",
+    "@snack-uikit/tag": "0.6.4",
     "@snack-uikit/toggles": "0.9.4",
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "c292f4c45173928f57cc5c9f3cb02efb26887b64"
+  "gitHead": "54873fdb2f34f26a771f62568d3d6fcd62ea1694"
 }

package/src/components/Toolbar/types.ts

@@ -1,8 +1,6 @@
 import { ReactNode } from 'react';
 
-import { ItemSingleProps } from '@snack-uikit/droplist';
-
-import { DeleteActionProps } from '../../helperComponents';
+import { DeleteActionProps, MoreActionsProps } from '../../helperComponents';
 import { NeverOrUndefined, RequireAtLeastOne } from './typesUtils';
 
 type OptionalProps = {
@@ -13,10 +11,7 @@ type OptionalProps = {
   /** Дополнительный слот в конце тулбара */
   after?: ReactNode;
   /** Элементы выпадающего списка кнопки с действиями */
-  moreActions?: Pick<
-    ItemSingleProps,
-    'tagLabel' | 'onClick' | 'option' | 'icon' | 'disabled' | 'description' | 'caption'
-  >[];
+  moreActions?: MoreActionsProps['moreActions'];
 };
 
 export type CommonToolbarProps = {

package/src/helperComponents/MoreActions/MoreActions.tsx

@@ -1,66 +1,47 @@
-import { useRef, useState } from 'react';
+import { ReactNode, useState } from 'react';
 
 import { ButtonFunction } from '@snack-uikit/button';
-import { Droplist, ItemSingleProps } from '@snack-uikit/droplist';
 import { KebabSVG } from '@snack-uikit/icons';
+import { BaseItemProps, Droplist } from '@snack-uikit/list';
+import { Tag } from '@snack-uikit/tag';
 
 import { TEST_IDS } from '../../constants';
-import { useHandlers } from './hooks';
-import styles from './styles.module.scss';
+
+type Action = {
+  tagLabel?: string;
+  icon?: ReactNode;
+} & Pick<BaseItemProps, 'content' | 'disabled' | 'onClick'>;
 
 export type MoreActionsProps = {
-  moreActions: Pick<
-    ItemSingleProps,
-    'tagLabel' | 'onClick' | 'option' | 'icon' | 'disabled' | 'description' | 'caption'
-  >[];
+  moreActions: Action[];
 };
 
 export function MoreActions({ moreActions }: MoreActionsProps) {
   const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [needsFocus, setNeedsFocus] = useState<boolean>(false);
-  const triggerRef = useRef<HTMLButtonElement>(null);
-
-  const { onKeyDown, onFocusLeave, firstElementRefCallback } = useHandlers({
-    triggerRef,
-    setIsOpen,
-    needsFocus,
-    setNeedsFocus,
-  });
 
   return (
     <Droplist
+      trigger='clickAndFocusVisible'
       open={isOpen}
       data-test-id={TEST_IDS.droplist}
       onOpenChange={setIsOpen}
       placement='bottom-end'
-      onFocusLeave={onFocusLeave}
-      firstElementRefCallback={firstElementRefCallback}
-      useScroll
-      triggerRef={triggerRef}
-      triggerElement={
-        <ButtonFunction
-          icon={<KebabSVG size={24} />}
-          size='m'
-          onKeyDown={onKeyDown}
-          data-test-id={TEST_IDS.moreActionsButton}
-        />
-      }
+      scroll
       size='s'
+      items={moreActions.map(item => ({
+        onClick: e => {
+          item.onClick?.(e);
+          setIsOpen(false);
+          e.stopPropagation();
+        },
+        disabled: item.disabled,
+        content: item.content,
+        beforeContent: item.icon,
+        afterContent: item.tagLabel ? <Tag label={item.tagLabel} /> : undefined,
+        'data-test-id': TEST_IDS.option,
+      }))}
     >
-      {moreActions.map(item => (
-        <Droplist.ItemSingle
-          {...item}
-          key={item.option}
-          className={styles.item}
-          onClick={e => {
-            item.onClick?.(e);
-            setIsOpen(false);
-            setNeedsFocus(false);
-            e.stopPropagation();
-          }}
-          data-test-id={TEST_IDS.option}
-        />
-      ))}
+      <ButtonFunction icon={<KebabSVG size={24} />} size='m' data-test-id={TEST_IDS.moreActionsButton} />
     </Droplist>
   );
 }

package/dist/helperComponents/MoreActions/hooks.d.ts

@@ -1,13 +0,0 @@
-import { Dispatch, KeyboardEvent, RefObject, SetStateAction } from 'react';
-type UseHandlersProps = {
-    triggerRef: RefObject<HTMLButtonElement>;
-    setIsOpen: Dispatch<SetStateAction<boolean>>;
-    setNeedsFocus: Dispatch<SetStateAction<boolean>>;
-    needsFocus: boolean;
-};
-export declare function useHandlers({ triggerRef, setIsOpen, setNeedsFocus, needsFocus }: UseHandlersProps): {
-    onFocusLeave: (direction: 'common' | 'top' | 'bottom' | 'left' | 'right') => void;
-    onKeyDown: (e: KeyboardEvent<HTMLButtonElement>) => void;
-    firstElementRefCallback: (el: HTMLButtonElement | null) => void;
-};
-export {};

package/dist/helperComponents/MoreActions/hooks.js

@@ -1,28 +0,0 @@
-import { useCallback } from 'react';
-import { TRIGGER_CLOSE_DROPLIST_KEY_CODES, TRIGGER_OPEN_DROPLIST_KEY_KEYS } from './constants';
-export function useHandlers({ triggerRef, setIsOpen, setNeedsFocus, needsFocus }) {
-    const onKeyDown = useCallback((e) => {
-        if (TRIGGER_OPEN_DROPLIST_KEY_KEYS.includes(e.key)) {
-            e.preventDefault();
-            setNeedsFocus(true);
-            setIsOpen(true);
-        }
-        if (TRIGGER_CLOSE_DROPLIST_KEY_CODES.includes(e.code)) {
-            setNeedsFocus(false);
-            setIsOpen(false);
-        }
-    }, [setIsOpen, setNeedsFocus]);
-    const firstElementRefCallback = (el) => {
-        needsFocus && (el === null || el === void 0 ? void 0 : el.focus());
-        setNeedsFocus(false);
-    };
-    const onFocusLeave = useCallback((direction) => {
-        var _a;
-        if (direction === 'top') {
-            (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            setIsOpen(false);
-            setNeedsFocus(false);
-        }
-    }, [triggerRef, setIsOpen, setNeedsFocus]);
-    return { onFocusLeave, onKeyDown, firstElementRefCallback };
-}

package/dist/helperComponents/MoreActions/styles.module.css

@@ -1,4 +0,0 @@
-.item{
-  width:-moz-max-content;
-  width:max-content;
-}

package/src/helperComponents/MoreActions/hooks.ts

@@ -1,46 +0,0 @@
-import { Dispatch, KeyboardEvent, RefObject, SetStateAction, useCallback } from 'react';
-
-import { TRIGGER_CLOSE_DROPLIST_KEY_CODES, TRIGGER_OPEN_DROPLIST_KEY_KEYS } from './constants';
-
-type UseHandlersProps = {
-  triggerRef: RefObject<HTMLButtonElement>;
-  setIsOpen: Dispatch<SetStateAction<boolean>>;
-  setNeedsFocus: Dispatch<SetStateAction<boolean>>;
-  needsFocus: boolean;
-};
-
-export function useHandlers({ triggerRef, setIsOpen, setNeedsFocus, needsFocus }: UseHandlersProps) {
-  const onKeyDown = useCallback(
-    (e: KeyboardEvent<HTMLButtonElement>) => {
-      if (TRIGGER_OPEN_DROPLIST_KEY_KEYS.includes(e.key)) {
-        e.preventDefault();
-        setNeedsFocus(true);
-        setIsOpen(true);
-      }
-
-      if (TRIGGER_CLOSE_DROPLIST_KEY_CODES.includes(e.code)) {
-        setNeedsFocus(false);
-        setIsOpen(false);
-      }
-    },
-    [setIsOpen, setNeedsFocus],
-  );
-
-  const firstElementRefCallback = (el: HTMLButtonElement | null) => {
-    needsFocus && el?.focus();
-    setNeedsFocus(false);
-  };
-
-  const onFocusLeave = useCallback(
-    (direction: 'common' | 'top' | 'bottom' | 'left' | 'right') => {
-      if (direction === 'top') {
-        triggerRef.current?.focus();
-        setIsOpen(false);
-        setNeedsFocus(false);
-      }
-    },
-    [triggerRef, setIsOpen, setNeedsFocus],
-  );
-
-  return { onFocusLeave, onKeyDown, firstElementRefCallback };
-}

package/src/helperComponents/MoreActions/styles.module.scss

@@ -1,6 +0,0 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toolbar';
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
-
-.item {
-  width: max-content;
-}