@snack-uikit/breadcrumbs 0.7.0 → 0.8.1-preview-57c837e3.0

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.8.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.7.1 (2024-01-23)
+
+### Only dependencies have been changed
+* [@snack-uikit/droplist@0.12.5](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/droplist/CHANGELOG.md)
+
+
+
+
+
 # 0.7.0 (2023-12-28)
 
 

package/dist/components/Collapse/Collapse.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useState } from 'react';
-import { Droplist } from '@snack-uikit/droplist';
+import { useContext, useRef } from 'react';
+import { Droplist } from '@snack-uikit/list';
 import { ELEMENT_TYPE, ITEM_RENDER_MODE } from '../../constants';
 import { BreadcrumbsContext } from '../../context';
 import { getTestId } from '../../utils';
@@ -9,19 +9,15 @@ import styles from './styles.module.css';
 export function Collapse({ currentConfig, className }) {
     const ctx = useContext(BreadcrumbsContext);
     const { hidden, size, testId } = ctx;
-    const [open, setDroplistOpen] = useState(false);
-    const { handleTriggerKeyDown, handleDroplistItemKeyDown, handleDroplistItemClick, firstElementRefCallback, triggerElementRef, handleDroplistFocusLeave, } = Droplist.useKeyboardNavigation({
-        setDroplistOpen,
-    });
+    const buttonRef = useRef(null);
     const collapsedItems = currentConfig
         .filter(node => node.element === ELEMENT_TYPE.Item && node.item.renderMode === ITEM_RENDER_MODE.Collapsed)
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        .map((node) => {
-        const { id, label, onClick } = node.item;
-        return (_jsx(Droplist.ItemSingle, { option: label, onKeyDown: handleDroplistItemKeyDown, onClick: (e) => {
-                handleDroplistItemClick(e, onClick);
-            } }, id));
-    });
-    return (_jsx("div", { className: className, "data-test-id": getTestId('collapse', testId), "data-element-type": ELEMENT_TYPE.Collapse, children: _jsx(BreadcrumbsContext.Provider, { value: Object.assign(Object.assign({}, ctx), { testId: `${testId}-collapsed` }), children: _jsx(Droplist, { trigger: 'hoverAndFocusVisible', size: 's', open: open, onOpenChange: setDroplistOpen, firstElementRefCallback: firstElementRefCallback, onFocusLeave: handleDroplistFocusLeave, useScroll: true, triggerRef: triggerElementRef, triggerElement: _jsx("button", { className: styles.collapse, tabIndex: hidden ? -1 : 0, onKeyDown: handleTriggerKeyDown, children: _jsx(CrumbsTypography, { size: size, children: "..." }) }), children: collapsedItems }) }) }));
+        .map(
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    (node) => ({
+        content: { option: node.item.label },
+        onClick: node.item.onClick,
+    }));
+    return (_jsx("div", { className: className, "data-test-id": getTestId('collapse', testId), "data-element-type": ELEMENT_TYPE.Collapse, children: _jsx(BreadcrumbsContext.Provider, { value: Object.assign(Object.assign({}, ctx), { testId: `${testId}-collapsed` }), children: _jsx(Droplist, { trigger: 'hoverAndFocusVisible', size: 's', scroll: true, triggerElemRef: buttonRef, items: collapsedItems, children: _jsx("button", { ref: buttonRef, className: styles.collapse, tabIndex: hidden ? -1 : 0, children: _jsx(CrumbsTypography, { size: size, children: "..." }) }) }) }) }));
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Breadcrumbs",
-  "version": "0.7.0",
+  "version": "0.8.1-preview-57c837e3.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,11 +32,11 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/droplist": "0.12.4",
+    "@snack-uikit/list": "0.1.1-preview-57c837e3.0",
     "@snack-uikit/typography": "0.6.1",
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2",
     "lodash.debounce": "4.0.8"
   },
-  "gitHead": "57c597a3eebaf6528c0c61b6b27dd244753de1cf"
+  "gitHead": "0539acbacf5bc065cdb55739e06f63366ac9178b"
 }

package/src/components/Collapse/Collapse.tsx

@@ -1,6 +1,6 @@
-import { MouseEvent, useContext, useState } from 'react';
+import { useContext, useRef } from 'react';
 
-import { Droplist } from '@snack-uikit/droplist';
+import { Droplist } from '@snack-uikit/list';
 
 import { ELEMENT_TYPE, ITEM_RENDER_MODE } from '../../constants';
 import { BreadcrumbsContext } from '../../context';
@@ -17,58 +17,26 @@ export type CollapseProps = {
 export function Collapse({ currentConfig, className }: CollapseProps) {
   const ctx = useContext(BreadcrumbsContext);
   const { hidden, size, testId } = ctx;
-
-  const [open, setDroplistOpen] = useState<boolean>(false);
-
-  const {
-    handleTriggerKeyDown,
-    handleDroplistItemKeyDown,
-    handleDroplistItemClick,
-    firstElementRefCallback,
-    triggerElementRef,
-    handleDroplistFocusLeave,
-  } = Droplist.useKeyboardNavigation<HTMLButtonElement>({
-    setDroplistOpen,
-  });
+  const buttonRef = useRef(null);
 
   const collapsedItems = currentConfig
     .filter(node => node.element === ELEMENT_TYPE.Item && node.item.renderMode === ITEM_RENDER_MODE.Collapsed)
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    .map((node: { element: typeof ELEMENT_TYPE.Item; width: number; item: InnerItem }) => {
-      const { id, label, onClick } = node.item;
-
-      return (
-        <Droplist.ItemSingle
-          option={label}
-          key={id}
-          onKeyDown={handleDroplistItemKeyDown}
-          onClick={(e: MouseEvent) => {
-            handleDroplistItemClick(e, onClick);
-          }}
-        />
-      );
-    });
+    .map(
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      (node: { element: typeof ELEMENT_TYPE.Item; width: number; item: InnerItem }) => ({
+        content: { option: node.item.label },
+        onClick: node.item.onClick,
+      }),
+    );
 
   return (
     <div className={className} data-test-id={getTestId('collapse', testId)} data-element-type={ELEMENT_TYPE.Collapse}>
       <BreadcrumbsContext.Provider value={{ ...ctx, testId: `${testId}-collapsed` }}>
-        <Droplist
-          trigger='hoverAndFocusVisible'
-          size='s'
-          open={open}
-          onOpenChange={setDroplistOpen}
-          firstElementRefCallback={firstElementRefCallback}
-          onFocusLeave={handleDroplistFocusLeave}
-          useScroll
-          triggerRef={triggerElementRef}
-          triggerElement={
-            <button className={styles.collapse} tabIndex={hidden ? -1 : 0} onKeyDown={handleTriggerKeyDown}>
-              <CrumbsTypography size={size}>...</CrumbsTypography>
-            </button>
-          }
-        >
-          {collapsedItems}
+        <Droplist trigger='hoverAndFocusVisible' size='s' scroll triggerElemRef={buttonRef} items={collapsedItems}>
+          <button ref={buttonRef} className={styles.collapse} tabIndex={hidden ? -1 : 0}>
+            <CrumbsTypography size={size}>...</CrumbsTypography>
+          </button>
         </Droplist>
       </BreadcrumbsContext.Provider>
     </div>