@snack-uikit/breadcrumbs 0.10.14 → 0.10.16-preview-a3bb0dea.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.10.15 (2024-12-26)
+
+
+### Bug Fixes
+
+* **FF-5734:** eslint fixes ([5ce6f1f](https://github.com/cloud-ru-tech/snack-uikit/commit/5ce6f1f22d3ac3dd367cbdd184e5873e67837c8b))
+
+
+
+
+
 ## 0.10.14 (2024-12-25)
 
 ### Only dependencies have been changed

package/dist/cjs/components/Breadcrumbs/Breadcrumbs.js

@@ -68,18 +68,21 @@ exports.Breadcrumbs = (0, react_1.memo)(function Breadcrumbs(_a) {
               currentConfig: currentConfig.chain
             }, index);
           case constants_1.ELEMENT_TYPE.Item:
-            const {
-              renderMode,
-              id
-            } = block.item;
-            if (renderMode !== constants_1.ITEM_RENDER_MODE.Collapsed) {
-              return (0, jsx_runtime_1.jsx)(Crumb_1.Crumb, {
-                useIconOnly: !index && firstItemIconOnly,
-                current: isLastElement,
-                renderMode: renderMode,
-                minWidth: block.width,
-                item: block.item
-              }, id);
+            {
+              const {
+                renderMode,
+                id
+              } = block.item;
+              if (renderMode !== constants_1.ITEM_RENDER_MODE.Collapsed) {
+                return (0, jsx_runtime_1.jsx)(Crumb_1.Crumb, {
+                  useIconOnly: !index && firstItemIconOnly,
+                  current: isLastElement,
+                  renderMode: renderMode,
+                  minWidth: block.width,
+                  item: block.item
+                }, id);
+              }
+              break;
             }
           default:
             return null;

package/dist/cjs/components/Collapse/Collapse.js

@@ -32,10 +32,18 @@ function Collapse(_ref) {
   const collapsedItems = currentConfig.filter(node => node.element === constants_1.ELEMENT_TYPE.Item && node.item.renderMode === constants_1.ITEM_RENDER_MODE.Collapsed).map(
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
-  node => ({
+  node => Object.assign({
     content: {
       option: node.item.label
-    },
+    }
+  }, node.item.href ? {
+    itemWrapRender: crumb => (0, jsx_runtime_1.jsx)("a", {
+      href: node.item.href,
+      onClick: node.item.onClick,
+      className: styles_module_scss_1.default.a,
+      children: crumb
+    })
+  } : {
     onClick: node.item.onClick
   }));
   return (0, jsx_runtime_1.jsx)("div", {

package/dist/cjs/components/Collapse/styles.module.css

@@ -15,4 +15,8 @@
 
 .collapsedRow{
   display:flex;
+}
+
+.a{
+  text-decoration:none;
 }

package/dist/esm/components/Breadcrumbs/Breadcrumbs.js

@@ -35,11 +35,13 @@ export const Breadcrumbs = memo(function Breadcrumbs(_a) {
                             return _jsx(Separator, {}, index);
                         case ELEMENT_TYPE.Collapse:
                             return _jsx(Collapse, { currentConfig: currentConfig.chain }, index);
-                        case ELEMENT_TYPE.Item:
+                        case ELEMENT_TYPE.Item: {
                             const { renderMode, id } = block.item;
                             if (renderMode !== ITEM_RENDER_MODE.Collapsed) {
                                 return (_jsx(Crumb, { useIconOnly: !index && firstItemIconOnly, current: isLastElement, renderMode: renderMode, minWidth: block.width, item: block.item }, id));
                             }
+                            break;
+                        }
                         default:
                             return null;
                     }

package/dist/esm/components/Collapse/Collapse.js

@@ -15,9 +15,12 @@ export function Collapse({ currentConfig, className }) {
         .map(
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    (node) => ({
-        content: { option: node.item.label },
-        onClick: node.item.onClick,
-    }));
+    (node) => (Object.assign({ content: { option: node.item.label } }, (node.item.href
+        ? {
+            itemWrapRender: crumb => (_jsx("a", { href: node.item.href, onClick: node.item.onClick, className: styles.a, children: crumb })),
+        }
+        : {
+            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", { type: 'button', ref: buttonRef, className: styles.collapse, tabIndex: hidden ? -1 : 0, children: _jsx(CrumbsTypography, { size: size, children: "..." }) }) }) }) }));
 }

package/dist/esm/components/Collapse/styles.module.css

@@ -15,4 +15,8 @@
 
 .collapsedRow{
   display:flex;
+}
+
+.a{
+  text-decoration:none;
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Breadcrumbs",
-  "version": "0.10.14",
+  "version": "0.10.16-preview-a3bb0dea.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,11 +36,11 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/list": "0.22.1",
+    "@snack-uikit/list": "0.22.2",
     "@snack-uikit/typography": "0.8.3",
     "@snack-uikit/utils": "3.6.0",
     "classnames": "2.5.1",
     "lodash.debounce": "4.0.8"
   },
-  "gitHead": "5f981cd3d7c5169db2bff1d58db36b6c83da6861"
+  "gitHead": "8b0b9ad383b7999c2cc9ef43e8d12e3f67df7010"
 }

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -86,7 +86,7 @@ export const Breadcrumbs = memo(function Breadcrumbs({
               return <Separator key={index} />;
             case ELEMENT_TYPE.Collapse:
               return <Collapse key={index} currentConfig={currentConfig.chain} />;
-            case ELEMENT_TYPE.Item:
+            case ELEMENT_TYPE.Item: {
               const { renderMode, id } = block.item;
               if (renderMode !== ITEM_RENDER_MODE.Collapsed) {
                 return (
@@ -100,6 +100,8 @@ export const Breadcrumbs = memo(function Breadcrumbs({
                   />
                 );
               }
+              break;
+            }
             default:
               return null;
           }

package/src/components/Collapse/Collapse.tsx

@@ -1,6 +1,6 @@
 import { useContext, useRef } from 'react';
 
-import { Droplist } from '@snack-uikit/list';
+import { Droplist, DroplistProps } from '@snack-uikit/list';
 
 import { ELEMENT_TYPE, ITEM_RENDER_MODE } from '../../constants';
 import { BreadcrumbsContext } from '../../context';
@@ -19,14 +19,24 @@ export function Collapse({ currentConfig, className }: CollapseProps) {
   const { hidden, size, testId } = ctx;
   const buttonRef = useRef(null);
 
-  const collapsedItems = currentConfig
+  const collapsedItems: DroplistProps['items'] = currentConfig
     .filter(node => node.element === ELEMENT_TYPE.Item && node.item.renderMode === ITEM_RENDER_MODE.Collapsed)
     .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,
+        ...(node.item.href
+          ? {
+              itemWrapRender: crumb => (
+                <a href={node.item.href} onClick={node.item.onClick} className={styles.a}>
+                  {crumb}
+                </a>
+              ),
+            }
+          : {
+              onClick: node.item.onClick,
+            }),
       }),
     );
 

package/src/components/Collapse/styles.module.scss

@@ -13,10 +13,19 @@
   &:focus-visible {
     @include styles-tokens-element.outline-var(styles-tokens-element.$container-focused-s);
 
-    outline-color: styles-tokens-element.simple-var(styles-tokens-element.$theme-variables, 'sys', 'available', 'complementary');
+    outline-color: styles-tokens-element.simple-var(
+      styles-tokens-element.$theme-variables,
+      'sys',
+      'available',
+      'complementary'
+    );
   }
 }
 
 .collapsedRow {
   display: flex;
-}
+}
+
+.a {
+  text-decoration: none;
+}