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

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/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.15",
+  "version": "0.10.16-preview-a3bb0dea.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -42,5 +42,5 @@
     "classnames": "2.5.1",
     "lodash.debounce": "4.0.8"
   },
-  "gitHead": "33621b09b3ca6d177fd8f41e5516566dee9f416a"
+  "gitHead": "8b0b9ad383b7999c2cc9ef43e8d12e3f67df7010"
 }

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;
+}