@snack-uikit/breadcrumbs 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-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)
+
+
+### Features
+
+* **FF-3960:** change local droplist ([98abced](https://github.com/cloud-ru-tech/snack-uikit/commit/98abced33632f10accbf8140f4cdd99357d3e1ec))
+
+
+
+
+
 ## 0.6.2 (2023-12-25)
 
 ### Only dependencies have been changed

package/README.md

@@ -19,6 +19,7 @@
 | size | enum Size: `"xs"`, `"s"` | s | Размер |
 | firstItemIconOnly | `boolean` | false | Использовать иконку без лейбла в первом айтеме |
 | inactiveLastItem | `boolean` | false | Делает некликабельным последний элемент, даже если для него переданы `href` или `onClick` |
+| lastEmpty | `boolean` | - |  |
 
 
 [//]: DOCUMENTATION_SECTION_END

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -26,6 +26,7 @@ export type BreadcrumbsProps = WithSupportProps<{
      * @default false
      */
     inactiveLastItem?: boolean;
+    lastEmpty?: boolean;
 }>;
 /**
  * Компонент хлебных крошек

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -22,13 +22,13 @@ import { Wrapper } from '../Wrapper';
  * Компонент хлебных крошек
  */
 export const Breadcrumbs = memo(function Breadcrumbs(_a) {
-    var { items: itemsProps, size = SIZE.S, separator = SEPARATOR, className, firstItemIconOnly = false, inactiveLastItem = false } = _a, rest = __rest(_a, ["items", "size", "separator", "className", "firstItemIconOnly", "inactiveLastItem"]);
+    var { items: itemsProps, size = SIZE.S, separator = SEPARATOR, className, firstItemIconOnly = false, inactiveLastItem = false, lastEmpty = false } = _a, rest = __rest(_a, ["items", "size", "separator", "className", "firstItemIconOnly", "inactiveLastItem", "lastEmpty"]);
     const containerRef = useRef(null);
     const { setConfigs, currentConfig } = useBreadcrumbsLayout(containerRef);
     const items = useMemo(() => inactiveLastItem
         ? itemsProps.map((item, index) => index === itemsProps.length - 1 ? Object.assign(Object.assign({}, item), { onClick: undefined, href: undefined }) : item)
         : itemsProps, [inactiveLastItem, itemsProps]);
-    return (_jsxs(_Fragment, { children: [_jsx(HiddenChain, { items: items, size: size, separator: separator, onConfigsBuilt: setConfigs, firstItemIconOnly: firstItemIconOnly }), _jsx(Wrapper, Object.assign({}, rest, { ref: containerRef, hidden: false, size: size, separator: separator, className: className, children: currentConfig === null || currentConfig === void 0 ? void 0 : currentConfig.chain.map((block, index, array) => {
+    return (_jsxs(_Fragment, { children: [_jsx(HiddenChain, { items: items, size: size, separator: separator, onConfigsBuilt: setConfigs, firstItemIconOnly: firstItemIconOnly, lastEmpty: lastEmpty }), _jsx(Wrapper, Object.assign({}, rest, { ref: containerRef, hidden: false, size: size, separator: separator, className: className, children: currentConfig === null || currentConfig === void 0 ? void 0 : currentConfig.chain.map((block, index, array) => {
                     const isLastElement = index === array.length - 1;
                     switch (block.element) {
                         case ELEMENT_TYPE.Separator:

package/dist/components/Collapse/Collapse.js

@@ -1,23 +1,27 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { Popover } from '@snack-uikit/popover';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useState } from 'react';
+import { Droplist } from '@snack-uikit/droplist';
 import { ELEMENT_TYPE, ITEM_RENDER_MODE } from '../../constants';
 import { BreadcrumbsContext } from '../../context';
 import { getTestId } from '../../utils';
-import { Crumb } from '../Crumb';
 import { CrumbsTypography } from '../CrumbsTypography';
-import { Separator } from '../Separator';
 import styles from './styles.module.css';
 export function Collapse({ currentConfig, className }) {
     const ctx = useContext(BreadcrumbsContext);
     const { hidden, size, testId } = ctx;
-    const collapsedItems = currentConfig.map(node => {
-        if (node.element === ELEMENT_TYPE.Item && node.item.renderMode === ITEM_RENDER_MODE.Collapsed) {
-            const { id } = node.item;
-            return (_jsxs("div", { className: styles.collapsedRow, children: [_jsx(Crumb, { item: node.item, renderMode: ITEM_RENDER_MODE.Full }), _jsx(Separator, {})] }, id));
-        }
-        return null;
+    const [open, setDroplistOpen] = useState(false);
+    const { handleTriggerKeyDown, handleDroplistItemKeyDown, handleDroplistItemClick, firstElementRefCallback, triggerElementRef, handleDroplistFocusLeave, } = Droplist.useKeyboardNavigation({
+        setDroplistOpen,
     });
-    const tip = (_jsx(BreadcrumbsContext.Provider, { value: Object.assign(Object.assign({}, ctx), { testId: `${testId}-collapsed` }), children: collapsedItems }));
-    return (_jsx("div", { className: className, "data-test-id": getTestId('collapse', testId), "data-element-type": ELEMENT_TYPE.Collapse, children: _jsx(Popover, { tip: tip, trigger: 'hoverAndFocusVisible', placement: 'top', children: _jsx("button", { className: styles.collapse, tabIndex: hidden ? -1 : 0, children: _jsx(CrumbsTypography, { size: size, children: "..." }) }) }) }));
+    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 }) }) }));
 }

package/dist/components/Crumb/Crumb.js

@@ -33,7 +33,7 @@ export const Crumb = memo(function Crumb(_a) {
         'data-size': size,
         'data-id': id,
     };
-    const content = (_jsxs(_Fragment, { children: [Icon && (_jsx("div", { className: styles.icon, children: _jsx(Icon, { size: 24 }) })), !useIconOnly && (_jsx(CrumbsTypography, { size: size, className: styles.label, children: renderMode === ITEM_RENDER_MODE.ShortLabel ? shortLabel : label }))] }));
+    const content = (_jsxs(_Fragment, { children: [Icon && (_jsx("div", { className: styles.icon, children: _jsx(Icon, { size: 16 }) })), !useIconOnly && (_jsx(CrumbsTypography, { size: size, className: styles.label, children: renderMode === ITEM_RENDER_MODE.ShortLabel ? shortLabel : label }))] }));
     const tabIndex = hidden ? { tabIndex: -1 } : {};
     const title = renderMode === ITEM_RENDER_MODE.Ellipsis ? label : '';
     let crumb = null;

package/dist/components/Crumb/styles.module.css

@@ -33,7 +33,7 @@
   outline-color:var(--sys-available-complementary, #131313);
 }
 .crumb[data-size=xs], a.crumb[data-size=xs]{
-  height:var(--size-breadcrumbs-xs, 24px);
+  height:var(--size-breadcrumbs-xs, 16px);
   gap:var(--space-breadcrumbs-crumb-xs-gap, 2px);
 }
 .crumb[data-size=s], a.crumb[data-size=s]{

package/dist/components/CrumbsTypography/CrumbsTypography.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Typography } from '@snack-uikit/typography';
 import { SIZE } from '../../constants';
 export function CrumbsTypography({ size, children, className }) {
-    return (_jsx(Typography, { className: className, size: size === SIZE.S ? 'l' : 'm', tag: 'div', family: 'sans', purpose: 'body', children: children }));
+    return (_jsx(Typography, { className: className, size: size === SIZE.S ? 'm' : 's', tag: 'div', family: 'sans', purpose: 'body', children: children }));
 }

package/dist/components/HiddenChain/HiddenChain.d.ts

@@ -6,5 +6,6 @@ export type HiddenChainProps = {
     size: Size;
     onConfigsBuilt(config: BreadcrumbsConfig[]): void;
     firstItemIconOnly?: boolean;
+    lastEmpty?: boolean;
 };
 export declare const HiddenChain: import("react").NamedExoticComponent<HiddenChainProps>;

package/dist/components/HiddenChain/HiddenChain.js

@@ -5,7 +5,7 @@ import { Collapse } from '../Collapse';
 import { Separator } from '../Separator';
 import { Wrapper } from '../Wrapper';
 import { useItemModesRender } from './hooks';
-export const HiddenChain = memo(function HiddenChain({ size, separator, items, onConfigsBuilt, firstItemIconOnly = false, }) {
+export const HiddenChain = memo(function HiddenChain({ size, separator, items, onConfigsBuilt, firstItemIconOnly = false, lastEmpty = false, }) {
     const containerRef = useRef(null);
     useEffect(() => {
         const container = containerRef.current;
@@ -13,7 +13,7 @@ export const HiddenChain = memo(function HiddenChain({ size, separator, items, o
             const observer = new ResizeObserver(([{ target }]) => {
                 const sizeMap = buildSizeMap(target);
                 if (sizeMap) {
-                    onConfigsBuilt(buildBreadcrumbsConfigs(items, sizeMap));
+                    onConfigsBuilt(buildBreadcrumbsConfigs(items, sizeMap, lastEmpty));
                 }
             });
             observer.observe(container);
@@ -21,7 +21,7 @@ export const HiddenChain = memo(function HiddenChain({ size, separator, items, o
                 observer.disconnect();
             };
         }
-    }, [items, onConfigsBuilt]);
+    }, [items, lastEmpty, onConfigsBuilt]);
     const renderItemModes = useItemModesRender({ firstItemIconOnly });
     return (_jsxs(Wrapper, { size: size, hidden: true, ref: containerRef, separator: separator, "data-test-id": 'hidden-wrapper', children: [_jsx(Separator, {}), _jsx(Collapse, { currentConfig: [] }), items.map(renderItemModes)] }));
 });

package/dist/components/Separator/styles.module.css

@@ -4,9 +4,9 @@
   color:var(--sys-neutral-text-disabled, #9e9e9e);
 }
 .separator[data-size=xs]{
-  height:var(--size-breadcrumbs-xs, 24px);
-  padding-left:var(--space-breadcrumbs-separator-padding-xs, 8px);
-  padding-right:var(--space-breadcrumbs-separator-padding-xs, 8px);
+  height:var(--size-breadcrumbs-xs, 16px);
+  padding-left:var(--space-breadcrumbs-separator-padding-xs, 4px);
+  padding-right:var(--space-breadcrumbs-separator-padding-xs, 4px);
 }
 .separator[data-size=s]{
   height:var(--size-breadcrumbs-s, 24px);

package/dist/utils/buildBreadcrumbsConfigs.d.ts

@@ -1,2 +1,2 @@
 import { BreadcrumbsConfig, Item, SizeMap } from '../types';
-export declare function buildBreadcrumbsConfigs(items: Item[], sizeMap: SizeMap): BreadcrumbsConfig[];
+export declare function buildBreadcrumbsConfigs(items: Item[], sizeMap: SizeMap, lastEmpty?: boolean): BreadcrumbsConfig[];

package/dist/utils/buildBreadcrumbsConfigs.js

@@ -45,7 +45,7 @@ const collapseAllRest = (lastElementRenderMode, rest) => rest.map((element, inde
     const lastItem = index === array.length - 1;
     return Object.assign(Object.assign({}, element), { renderMode: lastItem ? lastElementRenderMode : ITEM_RENDER_MODE.Collapsed });
 });
-export function buildBreadcrumbsConfigs(items, sizeMap) {
+export function buildBreadcrumbsConfigs(items, sizeMap, lastEmpty) {
     const chains = [];
     const [first, ...rest] = items.map(item => (Object.assign(Object.assign({}, item), { renderMode: ITEM_RENDER_MODE.Full })));
     buildSubChain(rest, { useCollapse: true, useEllipse: true }).forEach(subset => {
@@ -57,7 +57,7 @@ export function buildBreadcrumbsConfigs(items, sizeMap) {
     chains.push(startsWithEllipsis(first, collapseAllRest(ITEM_RENDER_MODE.Ellipsis, rest)));
     chains.push(startsWithCollapsed(first, collapseAllRest(ITEM_RENDER_MODE.Full, rest)));
     chains.push(startsWithCollapsed(first, collapseAllRest(ITEM_RENDER_MODE.Ellipsis, rest)));
-    return chains.map(chain => chain.reduce((acc, item, index) => {
+    return chains.map(chain => chain.reduce((acc, item, index, array) => {
         const { renderMode } = item;
         if (index && RENDER_MODE_WITH_WIDTH.includes(renderMode)) {
             acc.width += sizeMap.separator;
@@ -76,6 +76,10 @@ export function buildBreadcrumbsConfigs(items, sizeMap) {
         acc.weight += RENDER_MODE_WEIGHT[item.renderMode];
         acc.width += width;
         acc.chain.push({ element: ELEMENT_TYPE.Item, item, width });
+        if (index === array.length - 1 && lastEmpty) {
+            acc.width += sizeMap.separator;
+            acc.chain.push({ element: ELEMENT_TYPE.Separator, width: sizeMap.separator });
+        }
         return acc;
     }, { chain: [], weight: 0, width: 0, hasCollapsed: false }));
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Breadcrumbs",
-  "version": "0.6.2",
+  "version": "0.7.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,11 +32,11 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/popover": "0.6.2",
-    "@snack-uikit/typography": "0.6.0",
+    "@snack-uikit/droplist": "0.12.5",
+    "@snack-uikit/typography": "0.6.1",
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2",
     "lodash.debounce": "4.0.8"
   },
-  "gitHead": "420ccb07e016ae79a8b783e88c24f2045fadc026"
+  "gitHead": "c292f4c45173928f57cc5c9f3cb02efb26887b64"
 }

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -36,6 +36,8 @@ export type BreadcrumbsProps = WithSupportProps<{
    * @default false
    */
   inactiveLastItem?: boolean;
+
+  lastEmpty?: boolean;
 }>;
 
 /**
@@ -48,6 +50,7 @@ export const Breadcrumbs = memo(function Breadcrumbs({
   className,
   firstItemIconOnly = false,
   inactiveLastItem = false,
+  lastEmpty = false,
   ...rest
 }: BreadcrumbsProps) {
   const containerRef = useRef<HTMLUListElement>(null);
@@ -72,6 +75,7 @@ export const Breadcrumbs = memo(function Breadcrumbs({
         separator={separator}
         onConfigsBuilt={setConfigs}
         firstItemIconOnly={firstItemIconOnly}
+        lastEmpty={lastEmpty}
       />
       <Wrapper {...rest} ref={containerRef} hidden={false} size={size} separator={separator} className={className}>
         {currentConfig?.chain.map((block, index, array) => {

package/src/components/Collapse/Collapse.tsx

@@ -1,14 +1,12 @@
-import { useContext } from 'react';
+import { MouseEvent, useContext, useState } from 'react';
 
-import { Popover } from '@snack-uikit/popover';
+import { Droplist } from '@snack-uikit/droplist';
 
 import { ELEMENT_TYPE, ITEM_RENDER_MODE } from '../../constants';
 import { BreadcrumbsContext } from '../../context';
-import { BreadcrumbsConfigChain } from '../../types';
+import { BreadcrumbsConfigChain, InnerItem } from '../../types';
 import { getTestId } from '../../utils';
-import { Crumb } from '../Crumb';
 import { CrumbsTypography } from '../CrumbsTypography';
-import { Separator } from '../Separator';
 import styles from './styles.module.scss';
 
 export type CollapseProps = {
@@ -20,33 +18,59 @@ export function Collapse({ currentConfig, className }: CollapseProps) {
   const ctx = useContext(BreadcrumbsContext);
   const { hidden, size, testId } = ctx;
 
-  const collapsedItems = currentConfig.map(node => {
-    if (node.element === ELEMENT_TYPE.Item && node.item.renderMode === ITEM_RENDER_MODE.Collapsed) {
-      const { id } = node.item;
+  const [open, setDroplistOpen] = useState<boolean>(false);
 
-      return (
-        <div key={id} className={styles.collapsedRow}>
-          <Crumb item={node.item} renderMode={ITEM_RENDER_MODE.Full} />
-          <Separator />
-        </div>
-      );
-    }
-    return null;
+  const {
+    handleTriggerKeyDown,
+    handleDroplistItemKeyDown,
+    handleDroplistItemClick,
+    firstElementRefCallback,
+    triggerElementRef,
+    handleDroplistFocusLeave,
+  } = Droplist.useKeyboardNavigation<HTMLButtonElement>({
+    setDroplistOpen,
   });
 
-  const tip = (
-    <BreadcrumbsContext.Provider value={{ ...ctx, testId: `${testId}-collapsed` }}>
-      {collapsedItems}
-    </BreadcrumbsContext.Provider>
-  );
+  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);
+          }}
+        />
+      );
+    });
 
   return (
     <div className={className} data-test-id={getTestId('collapse', testId)} data-element-type={ELEMENT_TYPE.Collapse}>
-      <Popover tip={tip} trigger='hoverAndFocusVisible' placement='top'>
-        <button className={styles.collapse} tabIndex={hidden ? -1 : 0}>
-          <CrumbsTypography size={size}>...</CrumbsTypography>
-        </button>
-      </Popover>
+      <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>
+      </BreadcrumbsContext.Provider>
     </div>
   );
 }

package/src/components/Crumb/Crumb.tsx

@@ -50,7 +50,7 @@ export const Crumb = memo(function Crumb({
     <>
       {Icon && (
         <div className={styles.icon}>
-          <Icon size={24} />
+          <Icon size={16} />
         </div>
       )}
       {!useIconOnly && (

package/src/components/CrumbsTypography/CrumbsTypography.tsx

@@ -12,7 +12,7 @@ export type CrumbsTypographyProps = PropsWithChildren<{
 
 export function CrumbsTypography({ size, children, className }: CrumbsTypographyProps) {
   return (
-    <Typography className={className} size={size === SIZE.S ? 'l' : 'm'} tag='div' family='sans' purpose='body'>
+    <Typography className={className} size={size === SIZE.S ? 'm' : 's'} tag='div' family='sans' purpose='body'>
       {children}
     </Typography>
   );

package/src/components/HiddenChain/HiddenChain.tsx

@@ -13,6 +13,7 @@ export type HiddenChainProps = {
   size: Size;
   onConfigsBuilt(config: BreadcrumbsConfig[]): void;
   firstItemIconOnly?: boolean;
+  lastEmpty?: boolean;
 };
 
 export const HiddenChain = memo(function HiddenChain({
@@ -21,6 +22,7 @@ export const HiddenChain = memo(function HiddenChain({
   items,
   onConfigsBuilt,
   firstItemIconOnly = false,
+  lastEmpty = false,
 }: HiddenChainProps) {
   const containerRef = useRef<HTMLUListElement>(null);
 
@@ -30,7 +32,7 @@ export const HiddenChain = memo(function HiddenChain({
       const observer = new ResizeObserver(([{ target }]) => {
         const sizeMap = buildSizeMap(target);
         if (sizeMap) {
-          onConfigsBuilt(buildBreadcrumbsConfigs(items, sizeMap));
+          onConfigsBuilt(buildBreadcrumbsConfigs(items, sizeMap, lastEmpty));
         }
       });
       observer.observe(container);
@@ -39,7 +41,7 @@ export const HiddenChain = memo(function HiddenChain({
         observer.disconnect();
       };
     }
-  }, [items, onConfigsBuilt]);
+  }, [items, lastEmpty, onConfigsBuilt]);
 
   const renderItemModes = useItemModesRender({ firstItemIconOnly });
 

package/src/utils/buildBreadcrumbsConfigs.ts

@@ -18,8 +18,7 @@ const RENDER_MODE_WITH_WIDTH = [
 
 const startsWith =
   (renderMode: ItemRenderMode) =>
-  (item: InnerItem, tail: Chain): Chain =>
-    [{ ...item, renderMode }, ...tail];
+  (item: InnerItem, tail: Chain): Chain => [{ ...item, renderMode }, ...tail];
 const startsWithFull = startsWith(ITEM_RENDER_MODE.Full);
 const startsWithShortLabel = startsWith(ITEM_RENDER_MODE.ShortLabel);
 const startsWithEllipsis = startsWith(ITEM_RENDER_MODE.Ellipsis);
@@ -72,7 +71,7 @@ const collapseAllRest = (lastElementRenderMode: ItemRenderMode, rest: InnerItem[
     return { ...element, renderMode: lastItem ? lastElementRenderMode : ITEM_RENDER_MODE.Collapsed };
   });
 
-export function buildBreadcrumbsConfigs(items: Item[], sizeMap: SizeMap): BreadcrumbsConfig[] {
+export function buildBreadcrumbsConfigs(items: Item[], sizeMap: SizeMap, lastEmpty?: boolean): BreadcrumbsConfig[] {
   const chains: InnerItem[][] = [];
   const [first, ...rest] = items.map(item => ({ ...item, renderMode: ITEM_RENDER_MODE.Full }));
 
@@ -89,7 +88,7 @@ export function buildBreadcrumbsConfigs(items: Item[], sizeMap: SizeMap): Breadc
 
   return chains.map(chain =>
     chain.reduce<BreadcrumbsConfig>(
-      (acc, item, index) => {
+      (acc, item, index, array) => {
         const { renderMode } = item;
 
         if (index && RENDER_MODE_WITH_WIDTH.includes(renderMode)) {
@@ -112,6 +111,11 @@ export function buildBreadcrumbsConfigs(items: Item[], sizeMap: SizeMap): Breadc
         acc.width += width;
         acc.chain.push({ element: ELEMENT_TYPE.Item, item, width });
 
+        if (index === array.length - 1 && lastEmpty) {
+          acc.width += sizeMap.separator;
+          acc.chain.push({ element: ELEMENT_TYPE.Separator, width: sizeMap.separator });
+        }
+
         return acc;
       },
       { chain: [], weight: 0, width: 0, hasCollapsed: false },