@snack-uikit/breadcrumbs 0.4.14-preview-104ad22c.0

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { WithSupportProps } from '@snack-uikit/utils';
+import { ItemRenderMode } from '../../constants';
+import { Item } from '../../types';
+export type CrumbProps = WithSupportProps<{
+    renderMode: ItemRenderMode;
+    className?: string;
+    minWidth?: number;
+    current?: boolean;
+    item: Item;
+    useIconOnly?: boolean;
+}>;
+export declare const Crumb: import("react").NamedExoticComponent<CrumbProps>;

package/dist/components/Crumb/Crumb.js

@@ -0,0 +1,50 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { memo, useContext } from 'react';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { ElementType, ItemRenderMode } from '../../constants';
+import { BreadcrumbsContext } from '../../context';
+import { getTestId } from '../../utils';
+import { CrumbsTypography } from '../CrumbsTypography';
+import styles from './styles.module.css';
+const ELLIPSIS_LABEL_LENGTH = 8;
+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 useIconOnly = Boolean(Icon && useIconOnlyProp);
+    const minWidth = minWidthProp && renderMode === ItemRenderMode.Ellipsis ? minWidthProp : 'auto';
+    const dataAttributes = {
+        'data-render-mode': renderMode,
+        'data-current': current,
+        'data-hidden': hidden,
+        '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 tabIndex = hidden ? { tabIndex: -1 } : {};
+    const title = renderMode === ItemRenderMode.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 })));
+    }
+    else if (onClick) {
+        crumb = (_jsx("button", Object.assign({ title: title, onClick: onClick, className: styles.crumb, "aria-label": useIconOnly ? label : undefined, "data-clickable": true }, dataAttributes, tabIndex, { children: content })));
+    }
+    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 })));
+});

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

@@ -0,0 +1 @@
+export * from './Crumb';

package/dist/components/Crumb/index.js

@@ -0,0 +1 @@
+export * from './Crumb';

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

@@ -0,0 +1,55 @@
+.wrapper{
+  flex-shrink:0;
+  list-style:none;
+}
+.wrapper[data-render-mode=ellipsis]{
+  flex-shrink:1;
+}
+
+.crumb, a.crumb{
+  display:flex;
+  align-items:center;
+  width:100%;
+  margin:0;
+  padding:0;
+  color:var(--sys-neutral-text-light, #898989);
+  text-decoration:none;
+  background:none;
+  border:none;
+}
+.crumb[data-clickable], a.crumb[data-clickable]{
+  cursor:pointer;
+}
+.crumb[data-clickable]:focus-visible, .crumb[data-clickable]:hover, a.crumb[data-clickable]:focus-visible, a.crumb[data-clickable]:hover{
+  color:var(--sys-neutral-text-support, #565656);
+}
+.crumb[data-current=true], a.crumb[data-current=true]{
+  color:var(--sys-neutral-text-support, #565656);
+}
+.crumb:focus-visible, a.crumb:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-color:var(--sys-available-complementary, #131313);
+}
+.crumb[data-size=xs], a.crumb[data-size=xs]{
+  height:var(--size-breadcrumbs-xs, 24px);
+  gap:var(--space-breadcrumbs-crumb-xs-gap, 2px);
+}
+.crumb[data-size=s], a.crumb[data-size=s]{
+  height:var(--size-breadcrumbs-s, 24px);
+  gap:var(--space-breadcrumbs-crumb-s-gap, 2px);
+}
+.crumb .icon, a.crumb .icon{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  width:-moz-fit-content;
+  width:fit-content;
+}
+.crumb .label, a.crumb .label{
+  overflow:hidden;
+  width:100%;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}

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

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import { Size } from '../../constants';
+export type CrumbsTypographyProps = PropsWithChildren<{
+    size: Size;
+    className?: string;
+}>;
+export declare function CrumbsTypography({ size, children, className }: CrumbsTypographyProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/CrumbsTypography/CrumbsTypography.js

@@ -0,0 +1,6 @@
+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, 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 })));
+}

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

@@ -0,0 +1 @@
+export * from './CrumbsTypography';

package/dist/components/CrumbsTypography/index.js

@@ -0,0 +1 @@
+export * from './CrumbsTypography';

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Size } from '../../constants';
+import { BreadcrumbsConfig, Item } from '../../types';
+export type HiddenChainProps = {
+    separator: string;
+    items: Item[];
+    size: Size;
+    onConfigsBuilt(config: BreadcrumbsConfig[]): void;
+    firstItemIconOnly?: boolean;
+};
+export declare const HiddenChain: import("react").NamedExoticComponent<HiddenChainProps>;

package/dist/components/HiddenChain/HiddenChain.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useRef } from 'react';
+import { buildBreadcrumbsConfigs, buildSizeMap } from '../../utils';
+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, }) {
+    const containerRef = useRef(null);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (container) {
+            const observer = new ResizeObserver(([{ target }]) => {
+                const sizeMap = buildSizeMap(target);
+                if (sizeMap) {
+                    onConfigsBuilt(buildBreadcrumbsConfigs(items, sizeMap));
+                }
+            });
+            observer.observe(container);
+            return () => {
+                observer.disconnect();
+            };
+        }
+    }, [items, onConfigsBuilt]);
+    const renderItemModes = useItemModesRender({ firstItemIconOnly });
+    return (_jsxs(Wrapper, Object.assign({ 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/HiddenChain/hooks.d.ts

@@ -0,0 +1,6 @@
+import { Item } from '../../types';
+type UseItemModesRenderProps = {
+    firstItemIconOnly: boolean;
+};
+export declare const useItemModesRender: ({ firstItemIconOnly }: UseItemModesRenderProps) => (item: Item, index: number) => (import("react/jsx-runtime").JSX.Element | null)[];
+export {};

package/dist/components/HiddenChain/hooks.js

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

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

@@ -0,0 +1 @@
+export * from './HiddenChain';

package/dist/components/HiddenChain/index.js

@@ -0,0 +1 @@
+export * from './HiddenChain';

package/dist/components/Separator/Separator.d.ts

@@ -0,0 +1 @@
+export declare function Separator(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Separator/Separator.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { ElementType } 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 })) })));
+}

package/dist/components/Separator/index.d.ts

@@ -0,0 +1 @@
+export * from './Separator';

package/dist/components/Separator/index.js

@@ -0,0 +1 @@
+export * from './Separator';

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

@@ -0,0 +1,15 @@
+.separator{
+  display:flex;
+  align-items:center;
+  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);
+}
+.separator[data-size=s]{
+  height:var(--size-breadcrumbs-s, 24px);
+  padding-left:var(--space-breadcrumbs-separator-padding-s, 8px);
+  padding-right:var(--space-breadcrumbs-separator-padding-s, 8px);
+}

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

@@ -0,0 +1,19 @@
+import { PropsWithChildren } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { Size } from '../../constants';
+export type WrapperProps = PropsWithChildren<WithSupportProps<{
+    hidden: boolean;
+    className?: string;
+    size: Size;
+    separator: string;
+}>>;
+export declare const Wrapper: import("react").ForwardRefExoticComponent<{
+    'data-test-id'?: string | undefined;
+} & import("react").AriaAttributes & {
+    hidden: boolean;
+    className?: string | undefined;
+    size: Size;
+    separator: string;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLUListElement>>;

package/dist/components/Wrapper/Wrapper.js

@@ -0,0 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import { forwardRef } from 'react';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { BreadcrumbsContext } from '../../context';
+import styles from './styles.module.css';
+export const Wrapper = forwardRef(function HiddenWrapper(_a, ref) {
+    var { children, className, size, hidden, separator, 'data-test-id': testId } = _a, rest = __rest(_a, ["children", "className", "size", "hidden", "separator", 'data-test-id']);
+    return (_jsx("nav", Object.assign({}, extractSupportProps(rest), { className: cn(styles.wrapper, className), "data-test-id": testId, "data-hidden": hidden, "aria-hidden": hidden }, { children: _jsx(BreadcrumbsContext.Provider, Object.assign({ value: { hidden, size, separator, testId } }, { children: _jsx("ul", Object.assign({ className: styles.row, ref: ref, "data-hidden": hidden, "data-size": size }, { children: children })) })) })));
+});

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

@@ -0,0 +1 @@
+export * from './Wrapper';

package/dist/components/Wrapper/index.js

@@ -0,0 +1 @@
+export * from './Wrapper';

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

@@ -0,0 +1,19 @@
+.wrapper{
+  padding:var(--space-breadcrumbs-container, 2px);
+  overflow:hidden;
+}
+.wrapper[data-hidden=true]{
+  position:absolute;
+  width:1px;
+  height:1px;
+  opacity:0;
+}
+
+.row{
+  display:flex;
+  margin:0;
+  padding:0;
+}
+.row[data-hidden=true]{
+  display:inline-flex;
+}

package/dist/components/index.d.ts

@@ -0,0 +1 @@
+export * from './Breadcrumbs';

package/dist/components/index.js

@@ -0,0 +1 @@
+export * from './Breadcrumbs';

package/dist/components/styles.module.css

@@ -0,0 +1,3 @@
+.breadcrumbs{
+  box-sizing:border-box;
+}

package/dist/constants.d.ts

@@ -0,0 +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"
+}

package/dist/constants.js

@@ -0,0 +1,19 @@
+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 = {}));

package/dist/context.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Size } from './constants';
+type BreadcrumbsContextValue = {
+    hidden: boolean;
+    size: Size;
+    separator: string;
+    testId?: string;
+};
+export declare const BreadcrumbsContext: import("react").Context<BreadcrumbsContextValue>;
+export {};

package/dist/context.js

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

package/dist/hooks.d.ts

@@ -0,0 +1,21 @@
+import { RefObject } from 'react';
+import { BreadcrumbsConfig, CurrentConfigState } from './types';
+export type BreadcrumbsLayout = {
+    setConfigs: (configs: BreadcrumbsConfig[]) => void;
+    currentConfig?: CurrentConfigState;
+};
+/**
+ * Расчет способа отображения breadcrumbs работает следующим образом:
+ * Каждый item может быть отображен в одном из режимов:
+ *    full - целиком
+ *    shortLabel - с использованием укороченного лейбла
+ *    ellipsis - cо скруглением текста в ...
+ *    collapse - спрятан в специальный узел "..." с тултипом.
+ *  Для того чтоб эффективно распределить свободное по ширине пространство между айтемами в компоненте создается скрытый контейнер (HiddenChain),
+ *  в котором рендерятся все айтемы во всех возможных способах отображения. Замеряется размер каждого из айтемов и записывается в sizeMap.
+ *  Далее перебираются все возможные варианты отображения всей цепочки - конфиги (buildBreadcrumbsConfigs). У такого конфига есть два атрибута:
+ *    width - суммарная ширина
+ *    weight - вес, отображает общее количество сокращений, примененных к цепочке (например, отображение в режиме full - 0, сокращение shortLabel - +1, а ellipsis - +100 и тд)
+ *  Для того чтоб отобразить breadcrumbs, нужно подобрать конфиг, максимальный по ширине, влезающий в контейнер, но с минимальным весом (наименьшим количеством сокращений).
+ */
+export declare function useBreadcrumbsLayout(containerRef: RefObject<HTMLElement>): BreadcrumbsLayout;

package/dist/hooks.js

@@ -0,0 +1,78 @@
+import debounce from 'lodash.debounce';
+import { useCallback, useEffect, useState } from 'react';
+import { getMaxPossibleWidth } from './utils';
+const selectConfig = (containerWidth, configs) => {
+    if (!configs.length) {
+        return;
+    }
+    let [bestConfig] = configs;
+    for (const config of configs) {
+        if (config.width <= containerWidth) {
+            if (bestConfig.width > containerWidth) {
+                bestConfig = config;
+            }
+            else {
+                if (bestConfig.weight > config.weight) {
+                    bestConfig = config;
+                }
+            }
+        }
+    }
+    if (bestConfig) {
+        return { chain: bestConfig.chain, containerWidth, chainWidth: bestConfig.width };
+    }
+};
+/**
+ * Расчет способа отображения breadcrumbs работает следующим образом:
+ * Каждый item может быть отображен в одном из режимов:
+ *    full - целиком
+ *    shortLabel - с использованием укороченного лейбла
+ *    ellipsis - cо скруглением текста в ...
+ *    collapse - спрятан в специальный узел "..." с тултипом.
+ *  Для того чтоб эффективно распределить свободное по ширине пространство между айтемами в компоненте создается скрытый контейнер (HiddenChain),
+ *  в котором рендерятся все айтемы во всех возможных способах отображения. Замеряется размер каждого из айтемов и записывается в sizeMap.
+ *  Далее перебираются все возможные варианты отображения всей цепочки - конфиги (buildBreadcrumbsConfigs). У такого конфига есть два атрибута:
+ *    width - суммарная ширина
+ *    weight - вес, отображает общее количество сокращений, примененных к цепочке (например, отображение в режиме full - 0, сокращение shortLabel - +1, а ellipsis - +100 и тд)
+ *  Для того чтоб отобразить breadcrumbs, нужно подобрать конфиг, максимальный по ширине, влезающий в контейнер, но с минимальным весом (наименьшим количеством сокращений).
+ */
+export function useBreadcrumbsLayout(containerRef) {
+    const [currentConfig, setCurrentConfig] = useState(undefined);
+    const [configs, setConfigs] = useState([]);
+    const selectConfigForWidth = useCallback((width) => selectConfig(width, configs), [configs]);
+    /**
+     * Подбор подходящего конфига триггерится изменением ширины контейнера и изменением набора конфигов
+     */
+    useEffect(() => {
+        var _a;
+        const visibleContainer = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (!visibleContainer) {
+            return;
+        }
+        if (configs.length) {
+            setCurrentConfig(selectConfig(getMaxPossibleWidth(visibleContainer), configs));
+        }
+    }, [configs, containerRef]);
+    useEffect(() => {
+        var _a;
+        const visibleContainer = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (!visibleContainer) {
+            return;
+        }
+        const reselectConfig = debounce(() => {
+            const width = getMaxPossibleWidth(visibleContainer);
+            setCurrentConfig(prevConfig => {
+                if ((prevConfig === null || prevConfig === void 0 ? void 0 : prevConfig.containerWidth) === width) {
+                    return prevConfig;
+                }
+                const newConf = selectConfigForWidth(width);
+                return newConf || (prevConfig ? Object.assign(Object.assign({}, prevConfig), { containerWidth: width }) : prevConfig);
+            });
+        }, 100);
+        const visibleContainerObserver = new ResizeObserver(reselectConfig);
+        visibleContainerObserver.observe(visibleContainer);
+        visibleContainerObserver.observe(window.document.body);
+        return () => visibleContainerObserver.disconnect();
+    }, [containerRef, selectConfigForWidth]);
+    return { setConfigs, currentConfig };
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export type { Item } from './types';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/types.d.ts

@@ -0,0 +1,50 @@
+import { JSXElementConstructor, MouseEventHandler } from 'react';
+import { ElementType, ItemRenderMode } from './constants';
+export type Item = {
+    id: string;
+    label: string;
+    icon?: JSXElementConstructor<{
+        size: number;
+    }>;
+    href?: string;
+    shortLabel?: string;
+    onClick?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+};
+export type InnerItem = Item & {
+    renderMode: ItemRenderMode;
+};
+export type ItemSizeMap = {
+    [ItemRenderMode.ShortLabel]: number;
+    [ItemRenderMode.Collapsed]: number;
+    [ItemRenderMode.Ellipsis]: number;
+    [ItemRenderMode.Full]: number;
+};
+export type SizeMap = {
+    separator: number;
+    collapse: number;
+    items: {
+        [key: string]: ItemSizeMap;
+    };
+};
+export type BreadcrumbsConfigChain = Array<{
+    element: ElementType.Collapse;
+    width: number;
+} | {
+    element: ElementType.Separator;
+    width: number;
+} | {
+    element: ElementType.Item;
+    width: number;
+    item: InnerItem;
+}>;
+export type CurrentConfigState = {
+    chain: BreadcrumbsConfigChain;
+    chainWidth: number;
+    containerWidth: number;
+};
+export type BreadcrumbsConfig = {
+    chain: BreadcrumbsConfigChain;
+    hasCollapsed: boolean;
+    weight: number;
+    width: number;
+};

package/dist/types.js

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

package/dist/utils/buildBreadcrumbsConfigs.d.ts

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