@snack-uikit/breadcrumbs 0.5.1 → 0.6.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.6.0 (2023-12-14)
+
+
+### BREAKING CHANGES
+
+
+* **FF-3729:** replace enum with unions ([910db4a](https://github.com/cloud-ru-tech/snack-uikit/commit/910db4aa8231ccbc58e538e5c5c1f461b1dec275))
+
+
+
+
+## 0.5.2 (2023-12-07)
+
+### Only dependencies have been changed
+* [@snack-uikit/popover@0.5.2](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/popover/CHANGELOG.md)
+
+
+
+
+
 ## 0.5.1 (2023-12-06)
 
 ### Only dependencies have been changed

package/README.md

@@ -9,13 +9,14 @@
 [//]: DOCUMENTATION_SECTION_START
 [//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
 ## Breadcrumbs
+Компонент хлебных крошек
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
 | items* | `Item[]` | - | Массив айтемов |
 | className | `string` | - | CSS-класс |
 | separator | `string` | "›" | Разделитель |
-| size | enum Size: `"xs"`, `"s"` | Breadcrumbs.sizes.S | Размер |
+| size | enum Size: `"xs"`, `"s"` | s | Размер |
 | firstItemIconOnly | `boolean` | false | Использовать иконку без лейбла в первом айтеме |
 | inactiveLastItem | `boolean` | false | Делает некликабельным последний элемент, даже если для него переданы `href` или `onClick` |
 

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import { WithSupportProps } from '@snack-uikit/utils';
-import { Size } from '../../constants';
-import { Item } from '../../types';
+import { Item, Size } from '../../types';
 export type BreadcrumbsProps = WithSupportProps<{
     /** Массив айтемов */
     items: Item[];
@@ -14,7 +13,7 @@ export type BreadcrumbsProps = WithSupportProps<{
     separator?: string;
     /**
      * Размер
-     * @default Breadcrumbs.sizes.S
+     * @default s
      */
     size?: Size;
     /**
@@ -28,6 +27,7 @@ export type BreadcrumbsProps = WithSupportProps<{
      */
     inactiveLastItem?: boolean;
 }>;
-export declare const Breadcrumbs: import("react").NamedExoticComponent<BreadcrumbsProps> & {
-    sizes: typeof Size;
-};
+/**
+ * Компонент хлебных крошек
+ */
+export declare const Breadcrumbs: import("react").NamedExoticComponent<BreadcrumbsProps>;

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useMemo, useRef } from 'react';
-import { ElementType, ItemRenderMode, SEPARATOR, Size } from '../../constants';
+import { ELEMENT_TYPE, ITEM_RENDER_MODE, SEPARATOR, SIZE } from '../../constants';
 import { useBreadcrumbsLayout } from '../../hooks';
 import { Collapse } from '../Collapse';
 import { Crumb } from '../Crumb';
@@ -21,8 +21,8 @@ import { Wrapper } from '../Wrapper';
 /**
  * Компонент хлебных крошек
  */
-const BreadcrumbsComponent = 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"]);
+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"]);
     const containerRef = useRef(null);
     const { setConfigs, currentConfig } = useBreadcrumbsLayout(containerRef);
     const items = useMemo(() => inactiveLastItem
@@ -31,13 +31,13 @@ const BreadcrumbsComponent = memo(function Breadcrumbs(_a) {
     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) => {
                     const isLastElement = index === array.length - 1;
                     switch (block.element) {
-                        case ElementType.Separator:
+                        case ELEMENT_TYPE.Separator:
                             return _jsx(Separator, {}, index);
-                        case ElementType.Collapse:
+                        case ELEMENT_TYPE.Collapse:
                             return _jsx(Collapse, { currentConfig: currentConfig.chain }, index);
-                        case ElementType.Item:
+                        case ELEMENT_TYPE.Item:
                             const { renderMode, id } = block.item;
-                            if (renderMode !== ItemRenderMode.Collapsed) {
+                            if (renderMode !== ITEM_RENDER_MODE.Collapsed) {
                                 return (_jsx(Crumb, { useIconOnly: !index && firstItemIconOnly, current: isLastElement, renderMode: renderMode, minWidth: block.width, item: block.item }, id));
                             }
                         default:
@@ -45,5 +45,3 @@ const BreadcrumbsComponent = memo(function Breadcrumbs(_a) {
                     }
                 }) }))] }));
 });
-export const Breadcrumbs = BreadcrumbsComponent;
-Breadcrumbs.sizes = Size;

package/dist/components/Collapse/Collapse.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from 'react';
 import { Popover } from '@snack-uikit/popover';
-import { ElementType, ItemRenderMode } from '../../constants';
+import { ELEMENT_TYPE, ITEM_RENDER_MODE } from '../../constants';
 import { BreadcrumbsContext } from '../../context';
 import { getTestId } from '../../utils';
 import { Crumb } from '../Crumb';
@@ -12,12 +12,12 @@ export function Collapse({ currentConfig, className }) {
     const ctx = useContext(BreadcrumbsContext);
     const { hidden, size, testId } = ctx;
     const collapsedItems = currentConfig.map(node => {
-        if (node.element === ElementType.Item && node.item.renderMode === ItemRenderMode.Collapsed) {
+        if (node.element === ELEMENT_TYPE.Item && node.item.renderMode === ITEM_RENDER_MODE.Collapsed) {
             const { id } = node.item;
-            return (_jsxs("div", Object.assign({ className: styles.collapsedRow }, { children: [_jsx(Crumb, { item: node.item, renderMode: ItemRenderMode.Full }), _jsx(Separator, {})] }), id));
+            return (_jsxs("div", Object.assign({ className: styles.collapsedRow }, { children: [_jsx(Crumb, { item: node.item, renderMode: ITEM_RENDER_MODE.Full }), _jsx(Separator, {})] }), id));
         }
         return null;
     });
     const tip = (_jsx(BreadcrumbsContext.Provider, Object.assign({ value: Object.assign(Object.assign({}, ctx), { testId: `${testId}-collapsed` }) }, { children: collapsedItems })));
-    return (_jsx("div", Object.assign({ className: className, "data-test-id": getTestId('collapse', testId), "data-element-type": ElementType.Collapse }, { children: _jsx(Popover, Object.assign({ tip: tip, trigger: Popover.triggers.HoverAndFocusVisible, placement: Popover.placements.Top }, { children: _jsx("button", Object.assign({ className: styles.collapse, tabIndex: hidden ? -1 : 0 }, { children: _jsx(CrumbsTypography, Object.assign({ size: size }, { children: "..." })) })) })) })));
+    return (_jsx("div", Object.assign({ className: className, "data-test-id": getTestId('collapse', testId), "data-element-type": ELEMENT_TYPE.Collapse }, { children: _jsx(Popover, Object.assign({ tip: tip, trigger: 'hoverAndFocusVisible', placement: 'top' }, { children: _jsx("button", Object.assign({ className: styles.collapse, tabIndex: hidden ? -1 : 0 }, { children: _jsx(CrumbsTypography, Object.assign({ size: size }, { children: "..." })) })) })) })));
 }

package/dist/components/Crumb/Crumb.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import { WithSupportProps } from '@snack-uikit/utils';
-import { ItemRenderMode } from '../../constants';
-import { Item } from '../../types';
+import { Item, ItemRenderMode } from '../../types';
 export type CrumbProps = WithSupportProps<{
     renderMode: ItemRenderMode;
     className?: string;

package/dist/components/Crumb/Crumb.js

@@ -13,7 +13,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import cn from 'classnames';
 import { memo, useContext } from 'react';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { ElementType, ItemRenderMode } from '../../constants';
+import { ELEMENT_TYPE, ITEM_RENDER_MODE } from '../../constants';
 import { BreadcrumbsContext } from '../../context';
 import { getTestId } from '../../utils';
 import { CrumbsTypography } from '../CrumbsTypography';
@@ -23,9 +23,9 @@ export const Crumb = memo(function Crumb(_a) {
     var { minWidth: minWidthProp = 0, current = false, renderMode, className, item: { label: labelProp, shortLabel, icon: Icon, id, onClick, href }, useIconOnly: useIconOnlyProp } = _a, rest = __rest(_a, ["minWidth", "current", "renderMode", "className", "item", "useIconOnly"]);
     const { hidden, size, testId } = useContext(BreadcrumbsContext);
     const isLabelShouldBeEllipse = hidden && labelProp.length > ELLIPSIS_LABEL_LENGTH;
-    const label = isLabelShouldBeEllipse && renderMode === ItemRenderMode.Ellipsis ? `${labelProp.substring(0, 4)}...` : labelProp;
+    const label = isLabelShouldBeEllipse && renderMode === ITEM_RENDER_MODE.Ellipsis ? `${labelProp.substring(0, 4)}...` : labelProp;
     const useIconOnly = Boolean(Icon && useIconOnlyProp);
-    const minWidth = minWidthProp && renderMode === ItemRenderMode.Ellipsis ? minWidthProp : 'auto';
+    const minWidth = minWidthProp && renderMode === ITEM_RENDER_MODE.Ellipsis ? minWidthProp : 'auto';
     const dataAttributes = {
         'data-render-mode': renderMode,
         'data-current': current,
@@ -33,9 +33,9 @@ export const Crumb = memo(function Crumb(_a) {
         'data-size': size,
         'data-id': id,
     };
-    const content = (_jsxs(_Fragment, { children: [Icon && (_jsx("div", Object.assign({ className: styles.icon }, { children: _jsx(Icon, { size: 24 }) }))), !useIconOnly && (_jsx(CrumbsTypography, Object.assign({ size: size, className: styles.label }, { children: renderMode === ItemRenderMode.ShortLabel ? shortLabel : label })))] }));
+    const content = (_jsxs(_Fragment, { children: [Icon && (_jsx("div", Object.assign({ className: styles.icon }, { children: _jsx(Icon, { size: 24 }) }))), !useIconOnly && (_jsx(CrumbsTypography, Object.assign({ size: size, className: styles.label }, { children: renderMode === ITEM_RENDER_MODE.ShortLabel ? shortLabel : label })))] }));
     const tabIndex = hidden ? { tabIndex: -1 } : {};
-    const title = renderMode === ItemRenderMode.Ellipsis ? label : '';
+    const title = renderMode === ITEM_RENDER_MODE.Ellipsis ? label : '';
     let crumb = null;
     if (href) {
         crumb = (_jsx("a", Object.assign({ className: styles.crumb, onClick: onClick, href: href, "aria-label": useIconOnly ? label : undefined, "data-clickable": true }, dataAttributes, tabIndex, { children: content })));
@@ -46,5 +46,5 @@ export const Crumb = memo(function Crumb(_a) {
     else {
         crumb = (_jsx("div", Object.assign({ className: styles.crumb }, dataAttributes, { children: content })));
     }
-    return (_jsx("li", Object.assign({}, extractSupportProps(rest), dataAttributes, { "data-test-id": getTestId('crumb', testId), className: cn(styles.wrapper, className), "data-element-type": ElementType.Item, style: { minWidth }, title: title }, { children: crumb })));
+    return (_jsx("li", Object.assign({}, extractSupportProps(rest), dataAttributes, { "data-test-id": getTestId('crumb', testId), className: cn(styles.wrapper, className), "data-element-type": ELEMENT_TYPE.Item, style: { minWidth }, title: title }, { children: crumb })));
 });

package/dist/components/CrumbsTypography/CrumbsTypography.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { Size } from '../../constants';
+import { Size } from '../../types';
 export type CrumbsTypographyProps = PropsWithChildren<{
     size: Size;
     className?: string;

package/dist/components/CrumbsTypography/CrumbsTypography.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Typography } from '@snack-uikit/typography';
-import { Size } from '../../constants';
+import { SIZE } from '../../constants';
 export function CrumbsTypography({ size, children, className }) {
-    return (_jsx(Typography, Object.assign({ className: className, size: size === Size.S ? Typography.sizes.L : Typography.sizes.M, tag: Typography.tags.div, family: Typography.families.Sans, role: Typography.roles.Body }, { children: children })));
+    return (_jsx(Typography, Object.assign({ className: className, size: size === SIZE.S ? 'l' : 'm', tag: 'div', family: 'sans', purpose: 'body' }, { children: children })));
 }

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-import { Size } from '../../constants';
-import { BreadcrumbsConfig, Item } from '../../types';
+import { BreadcrumbsConfig, Item, Size } from '../../types';
 export type HiddenChainProps = {
     separator: string;
     items: Item[];

package/dist/components/HiddenChain/hooks.js

@@ -1,19 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { ItemRenderMode } from '../../constants';
+import { ITEM_RENDER_MODE } from '../../constants';
 import { Crumb } from '../Crumb';
 /**
  * Варианты отображения для обычного айтема
  */
 const NORMAL_MODES = [
-    [ItemRenderMode.ShortLabel, 'shortLabel'],
-    [ItemRenderMode.Ellipsis, 'label'],
-    [ItemRenderMode.Full, 'label'],
+    [ITEM_RENDER_MODE.ShortLabel, 'shortLabel'],
+    [ITEM_RENDER_MODE.Ellipsis, 'label'],
+    [ITEM_RENDER_MODE.Full, 'label'],
 ];
 /**
  * Варианты отображения айтемов состоящих из одной иконки
  */
-const ICON_ONLY_MODES = [[ItemRenderMode.Full, 'label']];
+const ICON_ONLY_MODES = [[ITEM_RENDER_MODE.Full, 'label']];
 const getItemModesRenderer = (firstItemIconOnly) => (item, index) => {
     const isIconOnlyMode = !index && firstItemIconOnly;
     const modes = isIconOnlyMode ? ICON_ONLY_MODES : NORMAL_MODES;

package/dist/components/Separator/Separator.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from 'react';
-import { ElementType } from '../../constants';
+import { ELEMENT_TYPE } from '../../constants';
 import { BreadcrumbsContext } from '../../context';
 import { getTestId } from '../../utils';
 import { CrumbsTypography } from '../CrumbsTypography';
 import styles from './styles.module.css';
 export function Separator() {
     const { size, separator, testId } = useContext(BreadcrumbsContext);
-    return (_jsx("div", Object.assign({ "aria-hidden": true, "data-size": size, className: styles.separator, "data-test-id": getTestId('separator', testId), "data-element-type": ElementType.Separator }, { children: _jsx(CrumbsTypography, Object.assign({ size: size }, { children: separator })) })));
+    return (_jsx("div", Object.assign({ "aria-hidden": true, "data-size": size, className: styles.separator, "data-test-id": getTestId('separator', testId), "data-element-type": ELEMENT_TYPE.Separator }, { children: _jsx(CrumbsTypography, Object.assign({ size: size }, { children: separator })) })));
 }

package/dist/components/Wrapper/Wrapper.d.ts

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { Size } from '../../constants';
+import { Size } from '../../types';
 export type WrapperProps = PropsWithChildren<WithSupportProps<{
     hidden: boolean;
     className?: string;

package/dist/constants.d.ts

@@ -1,16 +1,16 @@
 export declare const SEPARATOR = "\u203A";
-export declare enum ItemRenderMode {
-    Full = "full",
-    ShortLabel = "shortLabel",
-    Ellipsis = "ellipsis",
-    Collapsed = "collapsed"
-}
-export declare enum ElementType {
-    Separator = "separator",
-    Collapse = "collapse",
-    Item = "item"
-}
-export declare enum Size {
-    Xs = "xs",
-    S = "s"
-}
+export declare const ITEM_RENDER_MODE: {
+    readonly Full: "full";
+    readonly ShortLabel: "shortLabel";
+    readonly Ellipsis: "ellipsis";
+    readonly Collapsed: "collapsed";
+};
+export declare const ELEMENT_TYPE: {
+    readonly Separator: "separator";
+    readonly Collapse: "collapse";
+    readonly Item: "item";
+};
+export declare const SIZE: {
+    readonly Xs: "xs";
+    readonly S: "s";
+};

package/dist/constants.js

@@ -1,19 +1,16 @@
 export const SEPARATOR = '›';
-export var ItemRenderMode;
-(function (ItemRenderMode) {
-    ItemRenderMode["Full"] = "full";
-    ItemRenderMode["ShortLabel"] = "shortLabel";
-    ItemRenderMode["Ellipsis"] = "ellipsis";
-    ItemRenderMode["Collapsed"] = "collapsed";
-})(ItemRenderMode || (ItemRenderMode = {}));
-export var ElementType;
-(function (ElementType) {
-    ElementType["Separator"] = "separator";
-    ElementType["Collapse"] = "collapse";
-    ElementType["Item"] = "item";
-})(ElementType || (ElementType = {}));
-export var Size;
-(function (Size) {
-    Size["Xs"] = "xs";
-    Size["S"] = "s";
-})(Size || (Size = {}));
+export const ITEM_RENDER_MODE = {
+    Full: 'full',
+    ShortLabel: 'shortLabel',
+    Ellipsis: 'ellipsis',
+    Collapsed: 'collapsed',
+};
+export const ELEMENT_TYPE = {
+    Separator: 'separator',
+    Collapse: 'collapse',
+    Item: 'item',
+};
+export const SIZE = {
+    Xs: 'xs',
+    S: 's',
+};

package/dist/context.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Size } from './constants';
+import { Size } from './types';
 type BreadcrumbsContextValue = {
     hidden: boolean;
     size: Size;

package/dist/context.js

@@ -1,7 +1,7 @@
 import { createContext } from 'react';
-import { SEPARATOR, Size } from './constants';
+import { SEPARATOR, SIZE } from './constants';
 export const BreadcrumbsContext = createContext({
     hidden: false,
-    size: Size.S,
+    size: SIZE.S,
     separator: SEPARATOR,
 });

package/dist/types.d.ts

@@ -1,5 +1,9 @@
 import { JSXElementConstructor, MouseEventHandler } from 'react';
-import { ElementType, ItemRenderMode } from './constants';
+import { ValueOf } from '@snack-uikit/utils';
+import { ELEMENT_TYPE, ITEM_RENDER_MODE, SIZE } from './constants';
+export type Size = ValueOf<typeof SIZE>;
+export type ElementType = ValueOf<typeof ELEMENT_TYPE>;
+export type ItemRenderMode = ValueOf<typeof ITEM_RENDER_MODE>;
 export type Item = {
     id: string;
     label: string;
@@ -14,10 +18,10 @@ export type InnerItem = Item & {
     renderMode: ItemRenderMode;
 };
 export type ItemSizeMap = {
-    [ItemRenderMode.ShortLabel]: number;
-    [ItemRenderMode.Collapsed]: number;
-    [ItemRenderMode.Ellipsis]: number;
-    [ItemRenderMode.Full]: number;
+    [ITEM_RENDER_MODE.ShortLabel]: number;
+    [ITEM_RENDER_MODE.Collapsed]: number;
+    [ITEM_RENDER_MODE.Ellipsis]: number;
+    [ITEM_RENDER_MODE.Full]: number;
 };
 export type SizeMap = {
     separator: number;
@@ -27,13 +31,13 @@ export type SizeMap = {
     };
 };
 export type BreadcrumbsConfigChain = Array<{
-    element: ElementType.Collapse;
+    element: typeof ELEMENT_TYPE.Collapse;
     width: number;
 } | {
-    element: ElementType.Separator;
+    element: typeof ELEMENT_TYPE.Separator;
     width: number;
 } | {
-    element: ElementType.Item;
+    element: typeof ELEMENT_TYPE.Item;
     width: number;
     item: InnerItem;
 }>;

package/dist/types.js

@@ -1 +1 @@
-import { ItemRenderMode } from './constants';
+import { ITEM_RENDER_MODE } from './constants';

package/dist/utils/buildBreadcrumbsConfigs.js

@@ -1,16 +1,20 @@
-import { ElementType, ItemRenderMode } from '../constants';
+import { ELEMENT_TYPE, ITEM_RENDER_MODE } from '../constants';
 const RENDER_MODE_WEIGHT = {
-    [ItemRenderMode.Full]: 0,
-    [ItemRenderMode.ShortLabel]: 1,
-    [ItemRenderMode.Ellipsis]: 100,
-    [ItemRenderMode.Collapsed]: 10000,
+    [ITEM_RENDER_MODE.Full]: 0,
+    [ITEM_RENDER_MODE.ShortLabel]: 1,
+    [ITEM_RENDER_MODE.Ellipsis]: 100,
+    [ITEM_RENDER_MODE.Collapsed]: 10000,
 };
-const RENDER_MODE_WITH_WIDTH = [ItemRenderMode.Full, ItemRenderMode.ShortLabel, ItemRenderMode.Ellipsis];
+const RENDER_MODE_WITH_WIDTH = [
+    ITEM_RENDER_MODE.Full,
+    ITEM_RENDER_MODE.ShortLabel,
+    ITEM_RENDER_MODE.Ellipsis,
+];
 const startsWith = (renderMode) => (item, tail) => [Object.assign(Object.assign({}, item), { renderMode }), ...tail];
-const startsWithFull = startsWith(ItemRenderMode.Full);
-const startsWithShortLabel = startsWith(ItemRenderMode.ShortLabel);
-const startsWithEllipsis = startsWith(ItemRenderMode.Ellipsis);
-const startsWithCollapsed = startsWith(ItemRenderMode.Collapsed);
+const startsWithFull = startsWith(ITEM_RENDER_MODE.Full);
+const startsWithShortLabel = startsWith(ITEM_RENDER_MODE.ShortLabel);
+const startsWithEllipsis = startsWith(ITEM_RENDER_MODE.Ellipsis);
+const startsWithCollapsed = startsWith(ITEM_RENDER_MODE.Collapsed);
 function buildSubChain([current, ...rest], { useCollapse = true, useEllipse = true }) {
     const result = [];
     if (!current) {
@@ -39,39 +43,39 @@ function buildSubChain([current, ...rest], { useCollapse = true, useEllipse = tr
 }
 const collapseAllRest = (lastElementRenderMode, rest) => rest.map((element, index, array) => {
     const lastItem = index === array.length - 1;
-    return Object.assign(Object.assign({}, element), { renderMode: lastItem ? lastElementRenderMode : ItemRenderMode.Collapsed });
+    return Object.assign(Object.assign({}, element), { renderMode: lastItem ? lastElementRenderMode : ITEM_RENDER_MODE.Collapsed });
 });
 export function buildBreadcrumbsConfigs(items, sizeMap) {
     const chains = [];
-    const [first, ...rest] = items.map(item => (Object.assign(Object.assign({}, item), { renderMode: ItemRenderMode.Full })));
+    const [first, ...rest] = items.map(item => (Object.assign(Object.assign({}, item), { renderMode: ITEM_RENDER_MODE.Full })));
     buildSubChain(rest, { useCollapse: true, useEllipse: true }).forEach(subset => {
         chains.push(startsWithFull(first, subset));
         first.shortLabel && chains.push(startsWithShortLabel(first, subset));
     });
     /** Первый элемент можно схлопывать/сокращать только когда уже сокращено все что можно */
-    chains.push(startsWithEllipsis(first, collapseAllRest(ItemRenderMode.Full, rest)));
-    chains.push(startsWithEllipsis(first, collapseAllRest(ItemRenderMode.Ellipsis, rest)));
-    chains.push(startsWithCollapsed(first, collapseAllRest(ItemRenderMode.Full, rest)));
-    chains.push(startsWithCollapsed(first, collapseAllRest(ItemRenderMode.Ellipsis, rest)));
+    chains.push(startsWithEllipsis(first, collapseAllRest(ITEM_RENDER_MODE.Full, rest)));
+    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) => {
         const { renderMode } = item;
         if (index && RENDER_MODE_WITH_WIDTH.includes(renderMode)) {
             acc.width += sizeMap.separator;
-            acc.chain.push({ element: ElementType.Separator, width: sizeMap.separator });
+            acc.chain.push({ element: ELEMENT_TYPE.Separator, width: sizeMap.separator });
         }
-        if (!acc.hasCollapsed && renderMode === ItemRenderMode.Collapsed) {
+        if (!acc.hasCollapsed && renderMode === ITEM_RENDER_MODE.Collapsed) {
             if (index) {
                 acc.width += sizeMap.separator;
-                acc.chain.push({ element: ElementType.Separator, width: sizeMap.separator });
+                acc.chain.push({ element: ELEMENT_TYPE.Separator, width: sizeMap.separator });
             }
             acc.hasCollapsed = true;
             acc.width += sizeMap.collapse;
-            acc.chain.push({ element: ElementType.Collapse, width: sizeMap.collapse });
+            acc.chain.push({ element: ELEMENT_TYPE.Collapse, width: sizeMap.collapse });
         }
         const width = sizeMap.items[item.id][renderMode];
         acc.weight += RENDER_MODE_WEIGHT[item.renderMode];
         acc.width += width;
-        acc.chain.push({ element: ElementType.Item, item, width });
+        acc.chain.push({ element: ELEMENT_TYPE.Item, item, width });
         return acc;
     }, { chain: [], weight: 0, width: 0, hasCollapsed: false }));
 }

package/dist/utils/buildSizeMap.js

@@ -1,9 +1,9 @@
-import { ItemRenderMode } from '../constants';
+import { ITEM_RENDER_MODE } from '../constants';
 const getEmptyItemSizeMap = () => ({
-    [ItemRenderMode.ShortLabel]: 0,
-    [ItemRenderMode.Collapsed]: 0,
-    [ItemRenderMode.Ellipsis]: 0,
-    [ItemRenderMode.Full]: 0,
+    [ITEM_RENDER_MODE.ShortLabel]: 0,
+    [ITEM_RENDER_MODE.Collapsed]: 0,
+    [ITEM_RENDER_MODE.Ellipsis]: 0,
+    [ITEM_RENDER_MODE.Full]: 0,
 });
 const getElementWidth = (element) => element.getBoundingClientRect().width;
 export function buildSizeMap(container) {

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Breadcrumbs",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,11 +32,11 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/popover": "0.5.1",
-    "@snack-uikit/typography": "0.5.1",
-    "@snack-uikit/utils": "3.1.0",
+    "@snack-uikit/popover": "0.6.0",
+    "@snack-uikit/typography": "0.6.0",
+    "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2",
     "lodash.debounce": "4.0.8"
   },
-  "gitHead": "76a159dde7baccf49dc7b11e1fd7abc31424b42f"
+  "gitHead": "bd39c5e674f3b91b0e2487782a04b15034cf3d8b"
 }

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -2,9 +2,9 @@ import { memo, useMemo, useRef } from 'react';
 
 import { WithSupportProps } from '@snack-uikit/utils';
 
-import { ElementType, ItemRenderMode, SEPARATOR, Size } from '../../constants';
+import { ELEMENT_TYPE, ITEM_RENDER_MODE, SEPARATOR, SIZE } from '../../constants';
 import { useBreadcrumbsLayout } from '../../hooks';
-import { Item } from '../../types';
+import { Item, Size } from '../../types';
 import { Collapse } from '../Collapse';
 import { Crumb } from '../Crumb';
 import { HiddenChain } from '../HiddenChain';
@@ -23,7 +23,7 @@ export type BreadcrumbsProps = WithSupportProps<{
   separator?: string;
   /**
    * Размер
-   * @default Breadcrumbs.sizes.S
+   * @default s
    */
   size?: Size;
   /**
@@ -41,9 +41,9 @@ export type BreadcrumbsProps = WithSupportProps<{
 /**
  * Компонент хлебных крошек
  */
-const BreadcrumbsComponent = memo(function Breadcrumbs({
+export const Breadcrumbs = memo(function Breadcrumbs({
   items: itemsProps,
-  size = Size.S,
+  size = SIZE.S,
   separator = SEPARATOR,
   className,
   firstItemIconOnly = false,
@@ -78,13 +78,13 @@ const BreadcrumbsComponent = memo(function Breadcrumbs({
           const isLastElement = index === array.length - 1;
 
           switch (block.element) {
-            case ElementType.Separator:
+            case ELEMENT_TYPE.Separator:
               return <Separator key={index} />;
-            case ElementType.Collapse:
+            case ELEMENT_TYPE.Collapse:
               return <Collapse key={index} currentConfig={currentConfig.chain} />;
-            case ElementType.Item:
+            case ELEMENT_TYPE.Item:
               const { renderMode, id } = block.item;
-              if (renderMode !== ItemRenderMode.Collapsed) {
+              if (renderMode !== ITEM_RENDER_MODE.Collapsed) {
                 return (
                   <Crumb
                     useIconOnly={!index && firstItemIconOnly}
@@ -104,9 +104,3 @@ const BreadcrumbsComponent = memo(function Breadcrumbs({
     </>
   );
 });
-
-export const Breadcrumbs = BreadcrumbsComponent as typeof BreadcrumbsComponent & {
-  sizes: typeof Size;
-};
-
-Breadcrumbs.sizes = Size;

package/src/components/Collapse/Collapse.tsx

@@ -2,7 +2,7 @@ import { useContext } from 'react';
 
 import { Popover } from '@snack-uikit/popover';
 
-import { ElementType, ItemRenderMode } from '../../constants';
+import { ELEMENT_TYPE, ITEM_RENDER_MODE } from '../../constants';
 import { BreadcrumbsContext } from '../../context';
 import { BreadcrumbsConfigChain } from '../../types';
 import { getTestId } from '../../utils';
@@ -21,12 +21,12 @@ export function Collapse({ currentConfig, className }: CollapseProps) {
   const { hidden, size, testId } = ctx;
 
   const collapsedItems = currentConfig.map(node => {
-    if (node.element === ElementType.Item && node.item.renderMode === ItemRenderMode.Collapsed) {
+    if (node.element === ELEMENT_TYPE.Item && node.item.renderMode === ITEM_RENDER_MODE.Collapsed) {
       const { id } = node.item;
 
       return (
         <div key={id} className={styles.collapsedRow}>
-          <Crumb item={node.item} renderMode={ItemRenderMode.Full} />
+          <Crumb item={node.item} renderMode={ITEM_RENDER_MODE.Full} />
           <Separator />
         </div>
       );
@@ -41,8 +41,8 @@ export function Collapse({ currentConfig, className }: CollapseProps) {
   );
 
   return (
-    <div className={className} data-test-id={getTestId('collapse', testId)} data-element-type={ElementType.Collapse}>
-      <Popover tip={tip} trigger={Popover.triggers.HoverAndFocusVisible} placement={Popover.placements.Top}>
+    <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>

package/src/components/Crumb/Crumb.tsx

@@ -3,9 +3,9 @@ import { memo, useContext } from 'react';
 
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { ElementType, ItemRenderMode } from '../../constants';
+import { ELEMENT_TYPE, ITEM_RENDER_MODE } from '../../constants';
 import { BreadcrumbsContext } from '../../context';
-import { Item } from '../../types';
+import { Item, ItemRenderMode } from '../../types';
 import { getTestId } from '../../utils';
 import { CrumbsTypography } from '../CrumbsTypography';
 import styles from './styles.module.scss';
@@ -33,10 +33,10 @@ export const Crumb = memo(function Crumb({
   const { hidden, size, testId } = useContext(BreadcrumbsContext);
   const isLabelShouldBeEllipse = hidden && labelProp.length > ELLIPSIS_LABEL_LENGTH;
   const label =
-    isLabelShouldBeEllipse && renderMode === ItemRenderMode.Ellipsis ? `${labelProp.substring(0, 4)}...` : labelProp;
+    isLabelShouldBeEllipse && renderMode === ITEM_RENDER_MODE.Ellipsis ? `${labelProp.substring(0, 4)}...` : labelProp;
   const useIconOnly = Boolean(Icon && useIconOnlyProp);
 
-  const minWidth = minWidthProp && renderMode === ItemRenderMode.Ellipsis ? minWidthProp : 'auto';
+  const minWidth = minWidthProp && renderMode === ITEM_RENDER_MODE.Ellipsis ? minWidthProp : 'auto';
 
   const dataAttributes = {
     'data-render-mode': renderMode,
@@ -55,7 +55,7 @@ export const Crumb = memo(function Crumb({
       )}
       {!useIconOnly && (
         <CrumbsTypography size={size} className={styles.label}>
-          {renderMode === ItemRenderMode.ShortLabel ? shortLabel : label}
+          {renderMode === ITEM_RENDER_MODE.ShortLabel ? shortLabel : label}
         </CrumbsTypography>
       )}
     </>
@@ -63,7 +63,7 @@ export const Crumb = memo(function Crumb({
 
   const tabIndex = hidden ? { tabIndex: -1 } : {};
 
-  const title = renderMode === ItemRenderMode.Ellipsis ? label : '';
+  const title = renderMode === ITEM_RENDER_MODE.Ellipsis ? label : '';
 
   let crumb = null;
   if (href) {
@@ -108,7 +108,7 @@ export const Crumb = memo(function Crumb({
       {...dataAttributes}
       data-test-id={getTestId('crumb', testId)}
       className={cn(styles.wrapper, className)}
-      data-element-type={ElementType.Item}
+      data-element-type={ELEMENT_TYPE.Item}
       style={{ minWidth }}
       title={title}
     >

package/src/components/CrumbsTypography/CrumbsTypography.tsx

@@ -2,7 +2,8 @@ import { PropsWithChildren } from 'react';
 
 import { Typography } from '@snack-uikit/typography';
 
-import { Size } from '../../constants';
+import { SIZE } from '../../constants';
+import { Size } from '../../types';
 
 export type CrumbsTypographyProps = PropsWithChildren<{
   size: Size;
@@ -11,13 +12,7 @@ export type CrumbsTypographyProps = PropsWithChildren<{
 
 export function CrumbsTypography({ size, children, className }: CrumbsTypographyProps) {
   return (
-    <Typography
-      className={className}
-      size={size === Size.S ? Typography.sizes.L : Typography.sizes.M}
-      tag={Typography.tags.div}
-      family={Typography.families.Sans}
-      role={Typography.roles.Body}
-    >
+    <Typography className={className} size={size === SIZE.S ? 'l' : 'm'} tag='div' family='sans' purpose='body'>
       {children}
     </Typography>
   );

package/src/components/HiddenChain/HiddenChain.tsx

@@ -1,7 +1,6 @@
 import { memo, useEffect, useRef } from 'react';
 
-import { Size } from '../../constants';
-import { BreadcrumbsConfig, Item } from '../../types';
+import { BreadcrumbsConfig, Item, Size } from '../../types';
 import { buildBreadcrumbsConfigs, buildSizeMap } from '../../utils';
 import { Collapse } from '../Collapse';
 import { Separator } from '../Separator';

package/src/components/HiddenChain/hooks.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 
-import { ItemRenderMode } from '../../constants';
-import { Item } from '../../types';
+import { ITEM_RENDER_MODE } from '../../constants';
+import { Item, ItemRenderMode } from '../../types';
 import { Crumb } from '../Crumb';
 
 type RenderModes = [ItemRenderMode, 'label' | 'shortLabel'][];
@@ -12,15 +12,15 @@ type UseItemModesRenderProps = { firstItemIconOnly: boolean };
  * Варианты отображения для обычного айтема
  */
 const NORMAL_MODES: RenderModes = [
-  [ItemRenderMode.ShortLabel, 'shortLabel'],
-  [ItemRenderMode.Ellipsis, 'label'],
-  [ItemRenderMode.Full, 'label'],
+  [ITEM_RENDER_MODE.ShortLabel, 'shortLabel'],
+  [ITEM_RENDER_MODE.Ellipsis, 'label'],
+  [ITEM_RENDER_MODE.Full, 'label'],
 ];
 
 /**
  * Варианты отображения айтемов состоящих из одной иконки
  */
-const ICON_ONLY_MODES: RenderModes = [[ItemRenderMode.Full, 'label']];
+const ICON_ONLY_MODES: RenderModes = [[ITEM_RENDER_MODE.Full, 'label']];
 
 const getItemModesRenderer = (firstItemIconOnly: boolean) => (item: Item, index: number) => {
   const isIconOnlyMode = !index && firstItemIconOnly;

package/src/components/Separator/Separator.tsx

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 
-import { ElementType } from '../../constants';
+import { ELEMENT_TYPE } from '../../constants';
 import { BreadcrumbsContext } from '../../context';
 import { getTestId } from '../../utils';
 import { CrumbsTypography } from '../CrumbsTypography';
@@ -15,7 +15,7 @@ export function Separator() {
       data-size={size}
       className={styles.separator}
       data-test-id={getTestId('separator', testId)}
-      data-element-type={ElementType.Separator}
+      data-element-type={ELEMENT_TYPE.Separator}
     >
       <CrumbsTypography size={size}>{separator}</CrumbsTypography>
     </div>

package/src/components/Wrapper/Wrapper.tsx

@@ -3,8 +3,8 @@ import { forwardRef, PropsWithChildren } from 'react';
 
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { Size } from '../../constants';
 import { BreadcrumbsContext } from '../../context';
+import { Size } from '../../types';
 import styles from './styles.module.scss';
 
 export type WrapperProps = PropsWithChildren<

package/src/constants.ts

@@ -1,19 +1,19 @@
 export const SEPARATOR = '›';
 
-export enum ItemRenderMode {
-  Full = 'full',
-  ShortLabel = 'shortLabel',
-  Ellipsis = 'ellipsis',
-  Collapsed = 'collapsed',
-}
+export const ITEM_RENDER_MODE = {
+  Full: 'full',
+  ShortLabel: 'shortLabel',
+  Ellipsis: 'ellipsis',
+  Collapsed: 'collapsed',
+} as const;
 
-export enum ElementType {
-  Separator = 'separator',
-  Collapse = 'collapse',
-  Item = 'item',
-}
+export const ELEMENT_TYPE = {
+  Separator: 'separator',
+  Collapse: 'collapse',
+  Item: 'item',
+} as const;
 
-export enum Size {
-  Xs = 'xs',
-  S = 's',
-}
+export const SIZE = {
+  Xs: 'xs',
+  S: 's',
+} as const;

package/src/context.ts

@@ -1,6 +1,7 @@
 import { createContext } from 'react';
 
-import { SEPARATOR, Size } from './constants';
+import { SEPARATOR, SIZE } from './constants';
+import { Size } from './types';
 
 type BreadcrumbsContextValue = {
   hidden: boolean;
@@ -11,6 +12,6 @@ type BreadcrumbsContextValue = {
 
 export const BreadcrumbsContext = createContext<BreadcrumbsContextValue>({
   hidden: false,
-  size: Size.S,
+  size: SIZE.S,
   separator: SEPARATOR,
 });

package/src/types.ts

@@ -1,6 +1,14 @@
 import { JSXElementConstructor, MouseEventHandler } from 'react';
 
-import { ElementType, ItemRenderMode } from './constants';
+import { ValueOf } from '@snack-uikit/utils';
+
+import { ELEMENT_TYPE, ITEM_RENDER_MODE, SIZE } from './constants';
+
+export type Size = ValueOf<typeof SIZE>;
+
+export type ElementType = ValueOf<typeof ELEMENT_TYPE>;
+
+export type ItemRenderMode = ValueOf<typeof ITEM_RENDER_MODE>;
 
 export type Item = {
   id: string;
@@ -16,10 +24,10 @@ export type InnerItem = Item & {
 };
 
 export type ItemSizeMap = {
-  [ItemRenderMode.ShortLabel]: number;
-  [ItemRenderMode.Collapsed]: number;
-  [ItemRenderMode.Ellipsis]: number;
-  [ItemRenderMode.Full]: number;
+  [ITEM_RENDER_MODE.ShortLabel]: number;
+  [ITEM_RENDER_MODE.Collapsed]: number;
+  [ITEM_RENDER_MODE.Ellipsis]: number;
+  [ITEM_RENDER_MODE.Full]: number;
 };
 
 export type SizeMap = {
@@ -32,15 +40,15 @@ export type SizeMap = {
 
 export type BreadcrumbsConfigChain = Array<
   | {
-      element: ElementType.Collapse;
+      element: typeof ELEMENT_TYPE.Collapse;
       width: number;
     }
   | {
-      element: ElementType.Separator;
+      element: typeof ELEMENT_TYPE.Separator;
       width: number;
     }
   | {
-      element: ElementType.Item;
+      element: typeof ELEMENT_TYPE.Item;
       width: number;
       item: InnerItem;
     }

package/src/utils/buildBreadcrumbsConfigs.ts

@@ -1,25 +1,29 @@
-import { ElementType, ItemRenderMode } from '../constants';
-import { BreadcrumbsConfig, InnerItem, Item, SizeMap } from '../types';
+import { ELEMENT_TYPE, ITEM_RENDER_MODE } from '../constants';
+import { BreadcrumbsConfig, InnerItem, Item, ItemRenderMode, SizeMap } from '../types';
 
 type Chain = InnerItem[];
 
 const RENDER_MODE_WEIGHT = {
-  [ItemRenderMode.Full]: 0,
-  [ItemRenderMode.ShortLabel]: 1,
-  [ItemRenderMode.Ellipsis]: 100,
-  [ItemRenderMode.Collapsed]: 10000,
+  [ITEM_RENDER_MODE.Full]: 0,
+  [ITEM_RENDER_MODE.ShortLabel]: 1,
+  [ITEM_RENDER_MODE.Ellipsis]: 100,
+  [ITEM_RENDER_MODE.Collapsed]: 10000,
 };
 
-const RENDER_MODE_WITH_WIDTH = [ItemRenderMode.Full, ItemRenderMode.ShortLabel, ItemRenderMode.Ellipsis];
+const RENDER_MODE_WITH_WIDTH = [
+  ITEM_RENDER_MODE.Full,
+  ITEM_RENDER_MODE.ShortLabel,
+  ITEM_RENDER_MODE.Ellipsis,
+] as ItemRenderMode[];
 
 const startsWith =
   (renderMode: ItemRenderMode) =>
   (item: InnerItem, tail: Chain): Chain =>
     [{ ...item, renderMode }, ...tail];
-const startsWithFull = startsWith(ItemRenderMode.Full);
-const startsWithShortLabel = startsWith(ItemRenderMode.ShortLabel);
-const startsWithEllipsis = startsWith(ItemRenderMode.Ellipsis);
-const startsWithCollapsed = startsWith(ItemRenderMode.Collapsed);
+const startsWithFull = startsWith(ITEM_RENDER_MODE.Full);
+const startsWithShortLabel = startsWith(ITEM_RENDER_MODE.ShortLabel);
+const startsWithEllipsis = startsWith(ITEM_RENDER_MODE.Ellipsis);
+const startsWithCollapsed = startsWith(ITEM_RENDER_MODE.Collapsed);
 
 type BuildSubChainOptions = {
   useCollapse: boolean;
@@ -65,12 +69,12 @@ function buildSubChain(
 const collapseAllRest = (lastElementRenderMode: ItemRenderMode, rest: InnerItem[]) =>
   rest.map((element, index, array) => {
     const lastItem = index === array.length - 1;
-    return { ...element, renderMode: lastItem ? lastElementRenderMode : ItemRenderMode.Collapsed };
+    return { ...element, renderMode: lastItem ? lastElementRenderMode : ITEM_RENDER_MODE.Collapsed };
   });
 
 export function buildBreadcrumbsConfigs(items: Item[], sizeMap: SizeMap): BreadcrumbsConfig[] {
   const chains: InnerItem[][] = [];
-  const [first, ...rest] = items.map(item => ({ ...item, renderMode: ItemRenderMode.Full }));
+  const [first, ...rest] = items.map(item => ({ ...item, renderMode: ITEM_RENDER_MODE.Full }));
 
   buildSubChain(rest, { useCollapse: true, useEllipse: true }).forEach(subset => {
     chains.push(startsWithFull(first, subset));
@@ -78,10 +82,10 @@ export function buildBreadcrumbsConfigs(items: Item[], sizeMap: SizeMap): Breadc
   });
 
   /** Первый элемент можно схлопывать/сокращать только когда уже сокращено все что можно */
-  chains.push(startsWithEllipsis(first, collapseAllRest(ItemRenderMode.Full, rest)));
-  chains.push(startsWithEllipsis(first, collapseAllRest(ItemRenderMode.Ellipsis, rest)));
-  chains.push(startsWithCollapsed(first, collapseAllRest(ItemRenderMode.Full, rest)));
-  chains.push(startsWithCollapsed(first, collapseAllRest(ItemRenderMode.Ellipsis, rest)));
+  chains.push(startsWithEllipsis(first, collapseAllRest(ITEM_RENDER_MODE.Full, rest)));
+  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<BreadcrumbsConfig>(
@@ -90,23 +94,23 @@ export function buildBreadcrumbsConfigs(items: Item[], sizeMap: SizeMap): Breadc
 
         if (index && RENDER_MODE_WITH_WIDTH.includes(renderMode)) {
           acc.width += sizeMap.separator;
-          acc.chain.push({ element: ElementType.Separator, width: sizeMap.separator });
+          acc.chain.push({ element: ELEMENT_TYPE.Separator, width: sizeMap.separator });
         }
 
-        if (!acc.hasCollapsed && renderMode === ItemRenderMode.Collapsed) {
+        if (!acc.hasCollapsed && renderMode === ITEM_RENDER_MODE.Collapsed) {
           if (index) {
             acc.width += sizeMap.separator;
-            acc.chain.push({ element: ElementType.Separator, width: sizeMap.separator });
+            acc.chain.push({ element: ELEMENT_TYPE.Separator, width: sizeMap.separator });
           }
           acc.hasCollapsed = true;
           acc.width += sizeMap.collapse;
-          acc.chain.push({ element: ElementType.Collapse, width: sizeMap.collapse });
+          acc.chain.push({ element: ELEMENT_TYPE.Collapse, width: sizeMap.collapse });
         }
 
         const width = sizeMap.items[item.id][renderMode];
         acc.weight += RENDER_MODE_WEIGHT[item.renderMode];
         acc.width += width;
-        acc.chain.push({ element: ElementType.Item, item, width });
+        acc.chain.push({ element: ELEMENT_TYPE.Item, item, width });
 
         return acc;
       },

package/src/utils/buildSizeMap.ts

@@ -1,11 +1,11 @@
-import { ItemRenderMode } from '../constants';
-import { ItemSizeMap, SizeMap } from '../types';
+import { ITEM_RENDER_MODE } from '../constants';
+import { ItemRenderMode, ItemSizeMap, SizeMap } from '../types';
 
 const getEmptyItemSizeMap = (): ItemSizeMap => ({
-  [ItemRenderMode.ShortLabel]: 0,
-  [ItemRenderMode.Collapsed]: 0,
-  [ItemRenderMode.Ellipsis]: 0,
-  [ItemRenderMode.Full]: 0,
+  [ITEM_RENDER_MODE.ShortLabel]: 0,
+  [ITEM_RENDER_MODE.Collapsed]: 0,
+  [ITEM_RENDER_MODE.Ellipsis]: 0,
+  [ITEM_RENDER_MODE.Full]: 0,
 });
 
 const getElementWidth = (element: HTMLElement): number => element.getBoundingClientRect().width;