@hh.ru/magritte-ui-breadcrumbs 3.3.39

package/Breadcrumbs.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { BreadcrumbsProps } from './types';
+export declare const Breadcrumbs: FC<BreadcrumbsProps>;

package/Breadcrumbs.js

@@ -0,0 +1,69 @@
+import './index.css';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { useRef, useState, useCallback, useMemo } from 'react';
+import classnames from 'classnames';
+import { BottomSheet } from '@hh.ru/magritte-ui-bottom-sheet';
+import { BreadcrumbsDivider } from './BreadcrumbsDivider.js';
+import { BreadcrumbsDynamicLink } from './BreadcrumbsDynamicLink.js';
+import { useDynamicDisplayContent } from './useDynamicDisplayContent.js';
+import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
+import { Card } from '@hh.ru/magritte-ui-card';
+import { Drop } from '@hh.ru/magritte-ui-drop';
+import { Text } from '@hh.ru/magritte-ui-typography';
+import { s as styles } from './breadcrumbs-ae4fd4f8.js';
+import '@hh.ru/magritte-common-func-utils';
+
+const TEXT_TYPOGRAPHY = 'label-3-regular';
+const Breadcrumbs = ({ children, hiddenOnMobile, dataQa }) => {
+    const activatorRef = useRef(null);
+    const { isMobile } = useBreakpoint();
+    const isHidden = hiddenOnMobile && isMobile;
+    const [showCollapseItems, setShowCollapseItems] = useState(false);
+    const showCollapseItemsToggle = useCallback(() => setShowCollapseItems((showCollapseItems) => !showCollapseItems), []);
+    const breadcrumbsExtendedItems = useMemo(() => {
+        return React.Children.map(children, (child) => {
+            const key = child.key || Math.random();
+            return {
+                key,
+                ReactElement: child,
+            };
+        });
+    }, [children]);
+    const { containerRef, contentState, refreshItem, emptySpaceRef } = useDynamicDisplayContent(breadcrumbsExtendedItems);
+    const renderCollapseItems = useMemo(() => {
+        return contentState.collapseItems.map((collapseItem) => {
+            const index = collapseItem.index;
+            const breadcrumbsExtendedItem = breadcrumbsExtendedItems[index];
+            if (!breadcrumbsExtendedItem) {
+                return null;
+            }
+            const { onClick, Element = 'a', children, ...usefulProps } = breadcrumbsExtendedItem.ReactElement.props;
+            return (jsx("div", { className: classnames(styles.breadcrumbsCardBottomSheet, {
+                    [styles.breadcrumbsCardDrop]: !isMobile,
+                }), children: jsx(Card, { ...usefulProps, Element: Element, borderRadius: 12, padding: 8, paddingLeft: 12, paddingRight: 12, style: "blank", hoverStyle: "neutral", actionCard: true, stretched: true, children: jsx("div", { className: classnames(styles.breadcrumbsItemBottomSheet, {
+                            [styles.breadcrumbsItemDrop]: !isMobile,
+                        }), children: jsx(Text, { Element: "span", typography: TEXT_TYPOGRAPHY, children: children }) }) }) }, breadcrumbsExtendedItem.key));
+        });
+    }, [breadcrumbsExtendedItems, contentState.collapseItems, isMobile]);
+    const renderLastItem = (extendedItems) => {
+        if (extendedItems.length <= 1) {
+            return null;
+        }
+        const { style, href, ...usefulProps } = extendedItems[extendedItems.length - 1].ReactElement.props;
+        return (jsx("div", { className: styles.breadcrumbsItemCurrent, children: jsx(Text, { ...usefulProps, Element: "span", typography: TEXT_TYPOGRAPHY }) }));
+    };
+    return (jsxs("div", { className: classnames(styles.breadcrumbs, {
+            [styles.breadcrumbsHidden]: isHidden,
+        }), ref: containerRef, "data-qa": dataQa, children: [jsxs("div", { children: [breadcrumbsExtendedItems[0]?.ReactElement, breadcrumbsExtendedItems.length > 1 && jsx(BreadcrumbsDivider, {})] }), contentState.collapseItems.length > 0 && (jsxs(Fragment, { children: [jsx("button", { type: "button", className: styles.breadcrumbsAction, ref: activatorRef, onClick: showCollapseItemsToggle, "data-qa": "breadcrumbs-action", children: jsx("span", { className: styles.breadcrumbsItem, children: jsx(Text, { Element: "span", typography: TEXT_TYPOGRAPHY, children: "..." }) }) }), jsx(Drop, { activatorRef: activatorRef, host: containerRef, direction: "bottom", alignment: "left", space: 300, visible: showCollapseItems, onClose: showCollapseItemsToggle, children: renderCollapseItems }), jsx(BottomSheet, { visible: !isHidden && showCollapseItems, onClose: showCollapseItemsToggle, children: renderCollapseItems }), jsx(BreadcrumbsDivider, {})] })), contentState.visibleItems.map((visibleItem) => {
+                const index = visibleItem.index;
+                const breadcrumbsExtendedItem = breadcrumbsExtendedItems[index];
+                if (!breadcrumbsExtendedItem) {
+                    return null;
+                }
+                return (jsx(BreadcrumbsDynamicLink, { index: index, refreshItem: refreshItem, children: breadcrumbsExtendedItem.ReactElement }, breadcrumbsExtendedItem.key));
+            }), renderLastItem(breadcrumbsExtendedItems), jsx("div", { className: styles.breadcrumbsEmptySpace, ref: emptySpaceRef })] }));
+};
+Breadcrumbs.displayName = 'Breadcrumbs';
+
+export { Breadcrumbs };
+//# sourceMappingURL=Breadcrumbs.js.map

package/Breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.js","sources":["../src/Breadcrumbs.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo, useState, useRef } from 'react';\nimport classnames from 'classnames';\n\nimport { BottomSheet } from '@hh.ru/magritte-ui-bottom-sheet';\nimport { BreadcrumbsDivider } from '@hh.ru/magritte-ui-breadcrumbs/BreadcrumbsDivider';\nimport { BreadcrumbsDynamicLink } from '@hh.ru/magritte-ui-breadcrumbs/BreadcrumbsDynamicLink';\nimport { BreadcrumbsProps } from '@hh.ru/magritte-ui-breadcrumbs/types';\nimport { useDynamicDisplayContent } from '@hh.ru/magritte-ui-breadcrumbs/useDynamicDisplayContent';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { Card } from '@hh.ru/magritte-ui-card';\nimport { Drop } from '@hh.ru/magritte-ui-drop';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './breadcrumbs.less';\n\nconst TEXT_TYPOGRAPHY = 'label-3-regular';\n\nexport const Breadcrumbs: FC<BreadcrumbsProps> = ({ children, hiddenOnMobile, dataQa }) => {\n    const activatorRef = useRef(null);\n    const { isMobile } = useBreakpoint();\n    const isHidden = hiddenOnMobile && isMobile;\n    const [showCollapseItems, setShowCollapseItems] = useState(false);\n\n    const showCollapseItemsToggle = useCallback(\n        () => setShowCollapseItems((showCollapseItems) => !showCollapseItems),\n        []\n    );\n\n    const breadcrumbsExtendedItems = useMemo(() => {\n        return React.Children.map(children, (child) => {\n            const key = child.key || Math.random();\n            return {\n                key,\n                ReactElement: child,\n            };\n        });\n    }, [children]);\n\n    const { containerRef, contentState, refreshItem, emptySpaceRef } =\n        useDynamicDisplayContent(breadcrumbsExtendedItems);\n\n    const renderCollapseItems = useMemo(() => {\n        return contentState.collapseItems.map((collapseItem) => {\n            const index = collapseItem.index;\n            const breadcrumbsExtendedItem = breadcrumbsExtendedItems[index];\n            if (!breadcrumbsExtendedItem) {\n                return null;\n            }\n            const { onClick, Element = 'a', children, ...usefulProps } = breadcrumbsExtendedItem.ReactElement.props;\n            return (\n                <div\n                    key={breadcrumbsExtendedItem.key}\n                    className={classnames(styles.breadcrumbsCardBottomSheet, {\n                        [styles.breadcrumbsCardDrop]: !isMobile,\n                    })}\n                >\n                    <Card\n                        {...usefulProps}\n                        Element={Element}\n                        borderRadius={12}\n                        padding={8}\n                        paddingLeft={12}\n                        paddingRight={12}\n                        style=\"blank\"\n                        hoverStyle=\"neutral\"\n                        actionCard\n                        stretched\n                    >\n                        <div\n                            className={classnames(styles.breadcrumbsItemBottomSheet, {\n                                [styles.breadcrumbsItemDrop]: !isMobile,\n                            })}\n                        >\n                            <Text Element=\"span\" typography={TEXT_TYPOGRAPHY}>\n                                {children}\n                            </Text>\n                        </div>\n                    </Card>\n                </div>\n            );\n        });\n    }, [breadcrumbsExtendedItems, contentState.collapseItems, isMobile]);\n\n    const renderLastItem = (extendedItems: typeof breadcrumbsExtendedItems) => {\n        if (extendedItems.length <= 1) {\n            return null;\n        }\n        const { style, href, ...usefulProps } = extendedItems[extendedItems.length - 1].ReactElement.props;\n        return (\n            <div className={styles.breadcrumbsItemCurrent}>\n                <Text {...usefulProps} Element=\"span\" typography={TEXT_TYPOGRAPHY} />\n            </div>\n        );\n    };\n\n    return (\n        <div\n            className={classnames(styles.breadcrumbs, {\n                [styles.breadcrumbsHidden]: isHidden,\n            })}\n            ref={containerRef}\n            data-qa={dataQa}\n        >\n            <div>\n                {breadcrumbsExtendedItems[0]?.ReactElement}\n                {breadcrumbsExtendedItems.length > 1 && <BreadcrumbsDivider />}\n            </div>\n            {contentState.collapseItems.length > 0 && (\n                <>\n                    <button\n                        type=\"button\"\n                        className={styles.breadcrumbsAction}\n                        ref={activatorRef}\n                        onClick={showCollapseItemsToggle}\n                        data-qa=\"breadcrumbs-action\"\n                    >\n                        <span className={styles.breadcrumbsItem}>\n                            <Text Element=\"span\" typography={TEXT_TYPOGRAPHY}>\n                                ...\n                            </Text>\n                        </span>\n                    </button>\n                    <Drop\n                        activatorRef={activatorRef}\n                        host={containerRef}\n                        direction=\"bottom\"\n                        alignment=\"left\"\n                        space={300}\n                        visible={showCollapseItems}\n                        onClose={showCollapseItemsToggle}\n                    >\n                        {renderCollapseItems}\n                    </Drop>\n                    <BottomSheet visible={!isHidden && showCollapseItems} onClose={showCollapseItemsToggle}>\n                        {renderCollapseItems}\n                    </BottomSheet>\n                    <BreadcrumbsDivider />\n                </>\n            )}\n            {contentState.visibleItems.map((visibleItem) => {\n                const index = visibleItem.index;\n                const breadcrumbsExtendedItem = breadcrumbsExtendedItems[index];\n                if (!breadcrumbsExtendedItem) {\n                    return null;\n                }\n                return (\n                    <BreadcrumbsDynamicLink key={breadcrumbsExtendedItem.key} index={index} refreshItem={refreshItem}>\n                        {breadcrumbsExtendedItem.ReactElement}\n                    </BreadcrumbsDynamicLink>\n                );\n            })}\n            {renderLastItem(breadcrumbsExtendedItems)}\n            <div className={styles.breadcrumbsEmptySpace} ref={emptySpaceRef} />\n        </div>\n    );\n};\n\nBreadcrumbs.displayName = 'Breadcrumbs';\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/BreadcrumbsDivider.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const BreadcrumbsDivider: FC;

package/BreadcrumbsDivider.js

@@ -0,0 +1,11 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import { Text } from '@hh.ru/magritte-ui-typography';
+import { s as styles } from './breadcrumbs-ae4fd4f8.js';
+
+const BreadcrumbsDivider = () => {
+    return (jsx("span", { className: styles.breadcrumbsDivider, children: jsx(Text, { Element: "span", typography: "label-3-regular", children: "/" }) }));
+};
+
+export { BreadcrumbsDivider };
+//# sourceMappingURL=BreadcrumbsDivider.js.map

package/BreadcrumbsDivider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbsDivider.js","sources":["../src/BreadcrumbsDivider.tsx"],"sourcesContent":["import { FC } from 'react';\n\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './breadcrumbs.less';\n\nexport const BreadcrumbsDivider: FC = () => {\n    return (\n        <span className={styles.breadcrumbsDivider}>\n            <Text Element=\"span\" typography=\"label-3-regular\">\n                /\n            </Text>\n        </span>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;AAMO,MAAM,kBAAkB,GAAO,MAAK;IACvC,QACIA,cAAM,SAAS,EAAE,MAAM,CAAC,kBAAkB,YACtCA,GAAC,CAAA,IAAI,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,iBAAiB,EAAA,QAAA,EAAA,GAAA,EAAA,CAE1C,EACJ,CAAA,EACT;AACN;;;;"}

package/BreadcrumbsDynamicLink.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { BreadcrumbsItem } from './types';
+import { RefreshItem } from './useDynamicDisplayContent';
+interface BreadcrumbsDynamicLinkProps {
+    index: number;
+    children: BreadcrumbsItem;
+    refreshItem: RefreshItem;
+}
+export declare const BreadcrumbsDynamicLink: FC<BreadcrumbsDynamicLinkProps>;
+export {};

package/BreadcrumbsDynamicLink.js

@@ -0,0 +1,19 @@
+import './index.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { BreadcrumbsDivider } from './BreadcrumbsDivider.js';
+import '@hh.ru/magritte-ui-typography';
+import './breadcrumbs-ae4fd4f8.js';
+
+const BreadcrumbsDynamicLink = ({ index, children, refreshItem }) => {
+    const breadcrumbsDynamicLinkRef = useRef(null);
+    useEffect(() => {
+        if (breadcrumbsDynamicLinkRef.current) {
+            refreshItem(breadcrumbsDynamicLinkRef.current.offsetWidth, index);
+        }
+    }, [refreshItem, index]);
+    return (jsxs("div", { ref: breadcrumbsDynamicLinkRef, children: [children, jsx(BreadcrumbsDivider, {})] }));
+};
+
+export { BreadcrumbsDynamicLink };
+//# sourceMappingURL=BreadcrumbsDynamicLink.js.map

package/BreadcrumbsDynamicLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbsDynamicLink.js","sources":["../src/BreadcrumbsDynamicLink.tsx"],"sourcesContent":["import { FC, useEffect, useRef } from 'react';\n\nimport { BreadcrumbsDivider } from '@hh.ru/magritte-ui-breadcrumbs/BreadcrumbsDivider';\nimport { BreadcrumbsItem } from '@hh.ru/magritte-ui-breadcrumbs/types';\nimport { RefreshItem } from '@hh.ru/magritte-ui-breadcrumbs/useDynamicDisplayContent';\n\ninterface BreadcrumbsDynamicLinkProps {\n    index: number;\n    children: BreadcrumbsItem;\n    refreshItem: RefreshItem;\n}\n\nexport const BreadcrumbsDynamicLink: FC<BreadcrumbsDynamicLinkProps> = ({ index, children, refreshItem }) => {\n    const breadcrumbsDynamicLinkRef = useRef<HTMLDivElement>(null);\n    useEffect(() => {\n        if (breadcrumbsDynamicLinkRef.current) {\n            refreshItem(breadcrumbsDynamicLinkRef.current.offsetWidth, index);\n        }\n    }, [refreshItem, index]);\n    return (\n        <div ref={breadcrumbsDynamicLinkRef}>\n            {children}\n            <BreadcrumbsDivider />\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAYO,MAAM,sBAAsB,GAAoC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAI;AACxG,IAAA,MAAM,yBAAyB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/D,SAAS,CAAC,MAAK;QACX,IAAI,yBAAyB,CAAC,OAAO,EAAE;YACnC,WAAW,CAAC,yBAAyB,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AACrE,SAAA;AACL,KAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;AACzB,IAAA,QACIA,IAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,yBAAyB,EAAA,QAAA,EAAA,CAC9B,QAAQ,EACTC,GAAC,CAAA,kBAAkB,EAAG,EAAA,CAAA,CAAA,EAAA,CACpB,EACR;AACN;;;;"}

package/BreadcrumbsItem.d.ts

@@ -0,0 +1,2 @@
+import { BreadcrumbsItemWithCustomElement } from './types';
+export declare const BreadcrumbsItem: BreadcrumbsItemWithCustomElement;

package/BreadcrumbsItem.js

@@ -0,0 +1,12 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import { Link } from '@hh.ru/magritte-ui-link';
+import { Text } from '@hh.ru/magritte-ui-typography';
+import { s as styles } from './breadcrumbs-ae4fd4f8.js';
+
+const BreadcrumbsItem = ({ ...props }) => {
+    return (jsx(Link, { ...props, typography: "label-3-regular", inline: true, children: jsx("span", { className: styles.breadcrumbsItem, children: jsx(Text, { Element: "span", typography: "label-3-regular", children: props.children }) }) }));
+};
+
+export { BreadcrumbsItem };
+//# sourceMappingURL=BreadcrumbsItem.js.map

package/BreadcrumbsItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbsItem.js","sources":["../src/BreadcrumbsItem.tsx"],"sourcesContent":["import { BreadcrumbsItemWithCustomElement } from '@hh.ru/magritte-ui-breadcrumbs/types';\nimport { Link } from '@hh.ru/magritte-ui-link';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './breadcrumbs.less';\n\nexport const BreadcrumbsItem: BreadcrumbsItemWithCustomElement = ({ ...props }) => {\n    return (\n        <Link {...props} typography=\"label-3-regular\" inline>\n            <span className={styles.breadcrumbsItem}>\n                <Text Element=\"span\" typography=\"label-3-regular\">\n                    {props.children}\n                </Text>\n            </span>\n        </Link>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;;AAMa,MAAA,eAAe,GAAqC,CAAC,EAAE,GAAG,KAAK,EAAE,KAAI;AAC9E,IAAA,QACIA,GAAC,CAAA,IAAI,EAAK,EAAA,GAAA,KAAK,EAAE,UAAU,EAAC,iBAAiB,EAAC,MAAM,EAChD,IAAA,EAAA,QAAA,EAAAA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,eAAe,EACnC,QAAA,EAAAA,GAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,iBAAiB,EAAA,QAAA,EAC5C,KAAK,CAAC,QAAQ,GACZ,EACJ,CAAA,EAAA,CACJ,EACT;AACN;;;;"}

package/breadcrumbs-ae4fd4f8.js

@@ -0,0 +1,5 @@
+import './index.css';
+var styles = {"breadcrumbs":"magritte-breadcrumbs___Go2gs_3-3-39","breadcrumbs_hidden":"magritte-breadcrumbs_hidden___pQ8iE_3-3-39","breadcrumbsHidden":"magritte-breadcrumbs_hidden___pQ8iE_3-3-39","breadcrumbs-empty-space":"magritte-breadcrumbs-empty-space___AtfWO_3-3-39","breadcrumbsEmptySpace":"magritte-breadcrumbs-empty-space___AtfWO_3-3-39","breadcrumbs-item":"magritte-breadcrumbs-item___7mTAI_3-3-39","breadcrumbsItem":"magritte-breadcrumbs-item___7mTAI_3-3-39","breadcrumbs-item_current":"magritte-breadcrumbs-item_current___ab215_3-3-39","breadcrumbsItemCurrent":"magritte-breadcrumbs-item_current___ab215_3-3-39","breadcrumbs-item_bottom-sheet":"magritte-breadcrumbs-item_bottom-sheet___ETvwH_3-3-39","breadcrumbsItemBottomSheet":"magritte-breadcrumbs-item_bottom-sheet___ETvwH_3-3-39","breadcrumbs-item_drop":"magritte-breadcrumbs-item_drop___-3MTt_3-3-39","breadcrumbsItemDrop":"magritte-breadcrumbs-item_drop___-3MTt_3-3-39","breadcrumbs-divider":"magritte-breadcrumbs-divider___0esPB_3-3-39","breadcrumbsDivider":"magritte-breadcrumbs-divider___0esPB_3-3-39","breadcrumbs-action":"magritte-breadcrumbs-action___jZw4w_3-3-39","breadcrumbsAction":"magritte-breadcrumbs-action___jZw4w_3-3-39","breadcrumbs-card_bottom-sheet":"magritte-breadcrumbs-card_bottom-sheet___T4Dpd_3-3-39","breadcrumbsCardBottomSheet":"magritte-breadcrumbs-card_bottom-sheet___T4Dpd_3-3-39","breadcrumbs-card_drop":"magritte-breadcrumbs-card_drop___Gw3ry_3-3-39","breadcrumbsCardDrop":"magritte-breadcrumbs-card_drop___Gw3ry_3-3-39"};
+
+export { styles as s };
+//# sourceMappingURL=breadcrumbs-ae4fd4f8.js.map

package/breadcrumbs-ae4fd4f8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs-ae4fd4f8.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/index.css

@@ -0,0 +1,72 @@
+:root{
+  --magritte-color-component-breadcrumbs-text-primary-v18-1-1:#20262b;
+  --magritte-color-component-breadcrumbs-text-secondary-v18-1-1:#8293a2;
+  --magritte-color-component-breadcrumbs-text-tertiary-v18-1-1:#DCE3EB;
+  --magritte-color-component-breadcrumbs-text-state-secondary-hovered-v18-1-1:#6a7885;
+  --magritte-color-component-breadcrumbs-text-state-secondary-pressed-v18-1-1:#8293a2;
+}
+:root{
+  --magritte-static-space-100-v18-1-1:4px;
+  --magritte-static-space-150-v18-1-1:6px;
+  --magritte-static-space-200-v18-1-1:8px;
+  --magritte-static-space-300-v18-1-1:12px;
+  --magritte-static-space-500-v18-1-1:20px;
+}
+.magritte-night-theme{
+  --magritte-color-component-breadcrumbs-text-primary-v18-1-1:#D4D4D4;
+  --magritte-color-component-breadcrumbs-text-secondary-v18-1-1:#5E5E5E;
+  --magritte-color-component-breadcrumbs-text-tertiary-v18-1-1:#3B3B3B;
+  --magritte-color-component-breadcrumbs-text-state-secondary-hovered-v18-1-1:#767676;
+  --magritte-color-component-breadcrumbs-text-state-secondary-pressed-v18-1-1:#5E5E5E;
+}
+.magritte-breadcrumbs___Go2gs_3-3-39{
+  display:flex;
+  position:relative;
+  white-space:nowrap;
+  padding:var(--magritte-static-space-300-v18-1-1) 0;
+  --magritte-ui-text-color-override:var(--magritte-color-component-breadcrumbs-text-tertiary-v18-1-1);
+}
+.magritte-breadcrumbs_hidden___pQ8iE_3-3-39{
+  display:none;
+}
+.magritte-breadcrumbs-empty-space___AtfWO_3-3-39{
+  width:100%;
+}
+.magritte-breadcrumbs-item___7mTAI_3-3-39{
+  --magritte-ui-text-color-override:var(--magritte-color-component-breadcrumbs-text-secondary-v18-1-1);
+}
+.magritte-breadcrumbs-item___7mTAI_3-3-39:hover{
+  --magritte-ui-text-color-override:var(--magritte-color-component-breadcrumbs-text-state-secondary-hovered-v18-1-1);
+}
+.magritte-breadcrumbs-item___7mTAI_3-3-39:active{
+  --magritte-ui-text-color-override:var(--magritte-color-component-breadcrumbs-text-state-secondary-pressed-v18-1-1);
+}
+.magritte-breadcrumbs-item_current___ab215_3-3-39{
+  --magritte-ui-text-color-override:var(--magritte-color-component-breadcrumbs-text-primary-v18-1-1);
+}
+.magritte-breadcrumbs-item_bottom-sheet___ETvwH_3-3-39{
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+  line-height:22px;
+  color:var(--magritte-color-component-breadcrumbs-text-primary-v18-1-1);
+  --magritte-ui-text-color-override:var(--magritte-color-component-breadcrumbs-text-primary-v18-1-1);
+}
+.magritte-breadcrumbs-item_drop___-3MTt_3-3-39{
+  line-height:inherit;
+}
+.magritte-breadcrumbs-divider___0esPB_3-3-39{
+  position:relative;
+  bottom:1px;
+  padding:0 var(--magritte-static-space-150-v18-1-1);
+  --magritte-ui-text-color-override:var(--magritte-color-component-breadcrumbs-text-tertiary-v18-1-1);
+}
+.magritte-breadcrumbs-action___jZw4w_3-3-39{
+  min-width:var(--magritte-static-space-500-v18-1-1);
+}
+.magritte-breadcrumbs-card_bottom-sheet___T4Dpd_3-3-39:not(.magritte-breadcrumbs-card_bottom-sheet___T4Dpd_3-3-39:last-child){
+  margin-bottom:var(--magritte-static-space-200-v18-1-1);
+}
+.magritte-breadcrumbs-card_drop___Gw3ry_3-3-39:not(.magritte-breadcrumbs-card_drop___Gw3ry_3-3-39:last-child){
+  margin-bottom:var(--magritte-static-space-100-v18-1-1);
+}

package/index.d.ts

@@ -0,0 +1,4 @@
+export { type BreadcrumbsItemProps, type BreadcrumbsProps } from './types';
+export * from './Breadcrumbs';
+export * from './BreadcrumbsItem';
+export * from '@hh.ru/magritte-ui-theme-provider';

package/index.js

@@ -0,0 +1,19 @@
+import './index.css';
+export { Breadcrumbs } from './Breadcrumbs.js';
+export { BreadcrumbsItem } from './BreadcrumbsItem.js';
+export * from '@hh.ru/magritte-ui-theme-provider';
+import 'react/jsx-runtime';
+import 'react';
+import 'classnames';
+import '@hh.ru/magritte-ui-bottom-sheet';
+import './BreadcrumbsDivider.js';
+import '@hh.ru/magritte-ui-typography';
+import './breadcrumbs-ae4fd4f8.js';
+import './BreadcrumbsDynamicLink.js';
+import './useDynamicDisplayContent.js';
+import '@hh.ru/magritte-common-func-utils';
+import '@hh.ru/magritte-ui-breakpoint';
+import '@hh.ru/magritte-ui-card';
+import '@hh.ru/magritte-ui-drop';
+import '@hh.ru/magritte-ui-link';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/index.mock.d.ts

@@ -0,0 +1,5 @@
+import { ForwardRefExoticComponent } from 'react';
+export * from './types';
+declare const ThemeProvider: any;
+export { ThemeProvider };
+export declare const Breadcrumbs: ForwardRefExoticComponent<Record<string, unknown>>;

package/index.mock.js

@@ -0,0 +1,9 @@
+import './index.css';
+import { mockComponent } from '@hh.ru/magritte-ui-mock-component';
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+const { ThemeProvider } = jest.requireActual('@hh.ru/magritte-ui-theme-provider/index');
+const Breadcrumbs = mockComponent('Breadcrumbs');
+
+export { Breadcrumbs, ThemeProvider };
+//# sourceMappingURL=index.mock.js.map

package/index.mock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mock.js","sources":["../src/index.mock.ts"],"sourcesContent":["import { ForwardRefExoticComponent } from 'react';\n\nimport { mockComponent } from '@hh.ru/magritte-ui-mock-component';\n\nexport * from '@hh.ru/magritte-ui-breadcrumbs/types';\n\n// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\nconst { ThemeProvider } = jest.requireActual('@hh.ru/magritte-ui-theme-provider/index');\n\nexport { ThemeProvider };\n\nexport const Breadcrumbs: ForwardRefExoticComponent<Record<string, unknown>> = mockComponent('Breadcrumbs');\n"],"names":[],"mappings":";;AAMA;AACM,MAAA,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC,yCAAyC,EAAE;MAI3E,WAAW,GAAuD,aAAa,CAAC,aAAa;;;;"}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@hh.ru/magritte-ui-breadcrumbs",
+  "version": "3.3.39",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "sideEffects": [
+    "index.css"
+  ],
+  "scripts": {
+    "build": "yarn root:build $(pwd)",
+    "build-test-branch": "yarn root:build-test-branch $(pwd)",
+    "changelog": "yarn root:changelog $(pwd)",
+    "prepack": "yarn root:prepack $(pwd)",
+    "postpublish": "yarn root:postpublish $(pwd)",
+    "stylelint-test": "yarn root:stylelint-test $(pwd)",
+    "eslint-test": "yarn root:eslint-test $(pwd)",
+    "ts-config": "yarn root:ts-config $(pwd)",
+    "ts-check": "yarn root:ts-check $(pwd)",
+    "test": "yarn root:test $(pwd)"
+  },
+  "dependencies": {
+    "@hh.ru/magritte-common-func-utils": "1.3.6",
+    "@hh.ru/magritte-design-tokens": "18.1.1",
+    "@hh.ru/magritte-types": "4.0.1",
+    "@hh.ru/magritte-ui-bottom-sheet": "4.1.22",
+    "@hh.ru/magritte-ui-breakpoint": "4.0.1",
+    "@hh.ru/magritte-ui-card": "6.0.2",
+    "@hh.ru/magritte-ui-drop": "5.0.8",
+    "@hh.ru/magritte-ui-link": "4.1.1",
+    "@hh.ru/magritte-ui-mock-component": "1.0.10",
+    "@hh.ru/magritte-ui-theme-provider": "1.1.21",
+    "@hh.ru/magritte-ui-typography": "3.0.8"
+  },
+  "peerDependencies": {
+    "classnames": ">=2.3.2",
+    "react": ">=18.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "b660dd64fca3eaad5ec44ea9a73f92bb0d9694aa"
+}

package/types.d.ts

@@ -0,0 +1,28 @@
+import { ReactElement, ReactNode } from 'react';
+import { PropsWithCustomElement } from '@hh.ru/magritte-types';
+interface BreadcrumbsItemBaseProps {
+    /** Кастомный элемент */
+    Element?: 'a';
+    /** Ссылка элемента навигационной цепочки */
+    href?: string;
+    /** Лейбл для скринридеров */
+    'aria-label'?: string;
+    /** data-qa атрибут элемента навигационной цепочки */
+    'data-qa'?: string;
+}
+export type BreadcrumbsItemProps<ElementType = 'a'> = PropsWithCustomElement<BreadcrumbsItemBaseProps, ElementType> & {
+    children: ReactNode;
+};
+export interface BreadcrumbsItemWithCustomElement<DefaultElement extends BreadcrumbsItemBaseProps['Element'] = 'a'> {
+    <T extends unknown = DefaultElement>(props: BreadcrumbsItemProps<T>): ReturnType<React.FC>;
+}
+export type BreadcrumbsItem = ReactElement<BreadcrumbsItemProps>;
+export interface BreadcrumbsProps {
+    /** Флаг, позволяющий опционально скрывать breadcrumbs на XS/S экранах */
+    hiddenOnMobile?: boolean;
+    /** Массив элементов из которых будет построена цепочка навигации */
+    children: BreadcrumbsItem[];
+    /** data-qa атрибут */
+    dataQa?: string;
+}
+export {};

package/types.js

@@ -0,0 +1,3 @@
+import './index.css';
+
+//# sourceMappingURL=types.js.map

package/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/useDynamicDisplayContent.d.ts

@@ -0,0 +1,28 @@
+import { Key, RefObject } from 'react';
+import { BreadcrumbsItem } from './types';
+export interface BreadcrumbsItemAdditionalParameters {
+    key: Key;
+    index: number;
+    width: number;
+}
+interface StateOfBreadcrumbs {
+    visibleItems: BreadcrumbsItemAdditionalParameters[];
+    collapseItems: BreadcrumbsItemAdditionalParameters[];
+}
+interface BreadcrumbsExtendedItem {
+    key: React.Key;
+    ReactElement: BreadcrumbsItem;
+}
+export interface RefreshItem {
+    (width: number, index: number): void;
+}
+interface UseDynamicDisplayContent {
+    (data: BreadcrumbsExtendedItem[]): {
+        containerRef: RefObject<HTMLDivElement>;
+        contentState: StateOfBreadcrumbs;
+        refreshItem: RefreshItem;
+        emptySpaceRef: RefObject<HTMLDivElement>;
+    };
+}
+export declare const useDynamicDisplayContent: UseDynamicDisplayContent;
+export {};

package/useDynamicDisplayContent.js

@@ -0,0 +1,205 @@
+import './index.css';
+import { useRef, useReducer, useEffect, useCallback } from 'react';
+import { throttle } from '@hh.ru/magritte-common-func-utils';
+
+const BREAK_INDEX = -2;
+const RESIZE_THROTTLE_MS = 50;
+var BreadcrumbsActionType;
+(function (BreadcrumbsActionType) {
+    BreadcrumbsActionType["Limiter"] = "LIMITER";
+    BreadcrumbsActionType["AddVisibleItem"] = "ADD_VISIBLE_ITEM";
+    BreadcrumbsActionType["AddCollapseItem"] = "ADD_COLLAPSE_ITEM";
+    BreadcrumbsActionType["UpdateItemData"] = "UPDATE_ITEM_DATA";
+    BreadcrumbsActionType["UpdateData"] = "UPDATE_DATA";
+})(BreadcrumbsActionType || (BreadcrumbsActionType = {}));
+function reducer(state, action) {
+    switch (action.type) {
+        case BreadcrumbsActionType.Limiter: {
+            const visibleItems = state.visibleItems.slice(BREAK_INDEX);
+            const collapseItems = state.visibleItems.slice(0, BREAK_INDEX);
+            return {
+                ...state,
+                visibleItems,
+                collapseItems,
+            };
+        }
+        case BreadcrumbsActionType.AddVisibleItem: {
+            if (state.collapseItems.length > 0) {
+                const lastItemInCollapseItems = state.collapseItems[state.collapseItems.length - 1];
+                const visibleItems = [lastItemInCollapseItems, ...state.visibleItems];
+                const collapseItems = state.collapseItems.slice(0, -1);
+                return {
+                    ...state,
+                    visibleItems,
+                    collapseItems,
+                };
+            }
+            return state;
+        }
+        case BreadcrumbsActionType.AddCollapseItem: {
+            if (state.visibleItems.length > 0) {
+                const firstItemInVisibleItems = state.visibleItems[0];
+                const visibleItems = state.visibleItems.slice(1);
+                const collapseItems = [...state.collapseItems, firstItemInVisibleItems];
+                return {
+                    ...state,
+                    visibleItems,
+                    collapseItems,
+                };
+            }
+            return state;
+        }
+        case BreadcrumbsActionType.UpdateItemData: {
+            let updateComplete = false;
+            const visibleItems = state.visibleItems.map((item) => {
+                if (item.index === action.payload.index) {
+                    updateComplete = true;
+                    return { ...item, width: action.payload.width };
+                }
+                return item;
+            });
+            const collapseItems = updateComplete
+                ? [...state.collapseItems]
+                : state.collapseItems.map((item) => {
+                    if (item.index === action.payload.index) {
+                        return { ...item, width: action.payload.width };
+                    }
+                    return item;
+                });
+            return {
+                ...state,
+                visibleItems,
+                collapseItems,
+            };
+        }
+        case BreadcrumbsActionType.UpdateData: {
+            const oldWidthData = {};
+            const oldItems = state.collapseItems.concat(state.visibleItems).reduce((accumulator, currentValue) => {
+                const key = `${currentValue.key}`;
+                accumulator[key] = currentValue.width;
+                return accumulator;
+            }, oldWidthData);
+            const visibleItems = action.payload.visibleItems.map((item) => {
+                if (oldItems[item.key]) {
+                    return { ...item, width: oldItems[item.key] };
+                }
+                return item;
+            });
+            return {
+                visibleItems,
+                collapseItems: action.payload.collapseItems,
+            };
+        }
+        default:
+            return state;
+    }
+}
+function createInitialState(data) {
+    const indexOfLastItem = data.length - 1;
+    const visibleItems = data
+        .map((item, index) => ({ key: item.key, index, width: 0 }))
+        .slice(1, indexOfLastItem);
+    const collapseItems = [];
+    return {
+        visibleItems,
+        collapseItems,
+    };
+}
+const useDynamicDisplayContent = (data) => {
+    const containerRef = useRef(null);
+    const emptySpaceRef = useRef(null);
+    const visibleContentWidth = useRef(0);
+    const staticContentWidth = useRef(0);
+    const expandContentWidth = useRef(0);
+    const [contentState, dispatch] = useReducer(reducer, data, createInitialState);
+    useEffect(() => {
+        dispatch({
+            type: BreadcrumbsActionType.UpdateData,
+            payload: createInitialState(data),
+        });
+    }, [data]);
+    /**
+     * Первоначальный вызов собирает стейт, который содержит только общие данные элементов breadcrumbs. После
+     * рендера элементов (на основе этих данных) мы подтягиваем в стейт ссылки на элементы и ширину каждого из них.
+     */
+    const refreshItem = useCallback((width, index) => {
+        dispatch({
+            type: BreadcrumbsActionType.UpdateItemData,
+            payload: {
+                index,
+                width,
+            },
+        });
+    }, []);
+    /**
+     * Перед отрисовкой компонента в браузере нам нужно привести его в соответствие со спецификацией ДС:
+     * в спецификации указано, что breadcrumbs не может отображать более 5-ти элементов.
+     *
+     * Варианты отображения breadcrumbs:
+     * -> link / link / link / link / text
+     * или
+     * -> link / action / link / link / text
+     *
+     * Если лимит будет превышен, лимитер схлопнет в action все элементы, которые окажутся между первым элементом и
+     * тремя последними. Таким образом компонент breadcrumbs будет приведен к виду -> link / action / link / link / text,
+     * где action - это кнопка, раскрывающая дроп-контейнер, в который складываются сколлапсировавшие элементы.
+     *
+     * Если после лимитирования контейнер-родитель всё равно не будет умещать в себе контент, то видимые элементы
+     * один за другим начнут коллапсировать (переходить из массива visibleItems в collapseItems) пока breadcrumbs не примет вид:
+     * -> ink / action / text - это максимально возможный уровень сворачивания элементов.
+     */
+    useEffect(() => {
+        if (data.length > 5) {
+            dispatch({ type: BreadcrumbsActionType.Limiter });
+        }
+    }, [data]);
+    /**
+     * Здесь мы отслеживаем ширину видимого контента, ширину статичного контента (относительно статичного:
+     * это общая ширина первого и последнего элементов, а также action при его наличии), а также ширину
+     * расширяемого контента.
+     */
+    useEffect(() => {
+        const containerNode = containerRef.current;
+        const emptySpaceNode = emptySpaceRef.current;
+        if (!containerNode || !emptySpaceNode) {
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            return () => { };
+        }
+        visibleContentWidth.current = contentState.visibleItems.reduce((sum, children) => sum + children.width, 0);
+        staticContentWidth.current =
+            containerNode.offsetWidth - visibleContentWidth.current - emptySpaceNode.offsetWidth;
+        if (contentState.collapseItems.length) {
+            expandContentWidth.current =
+                staticContentWidth.current +
+                    visibleContentWidth.current +
+                    contentState.collapseItems[contentState.collapseItems.length - 1].width;
+        }
+        const observer = new ResizeObserver(throttle(() => {
+            if (containerNode.scrollWidth > containerNode.offsetWidth && contentState.visibleItems.length > 0) {
+                dispatch({ type: BreadcrumbsActionType.AddCollapseItem });
+                observer.unobserve(containerNode);
+                return;
+            }
+            if ((contentState.visibleItems.length < 2 && contentState.collapseItems.length > 0) ||
+                (contentState.visibleItems.length < 3 && contentState.collapseItems.length === 1)) {
+                if (containerNode.offsetWidth > expandContentWidth.current) {
+                    dispatch({ type: BreadcrumbsActionType.AddVisibleItem });
+                    observer.unobserve(containerNode);
+                }
+            }
+        }, RESIZE_THROTTLE_MS));
+        observer.observe(containerNode);
+        return () => {
+            observer.disconnect();
+        };
+    }, [contentState.visibleItems, contentState.collapseItems]);
+    return {
+        containerRef,
+        contentState,
+        refreshItem,
+        emptySpaceRef,
+    };
+};
+
+export { useDynamicDisplayContent };
+//# sourceMappingURL=useDynamicDisplayContent.js.map

package/useDynamicDisplayContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDynamicDisplayContent.js","sources":["../src/useDynamicDisplayContent.ts"],"sourcesContent":["import { Key, useCallback, useEffect, useRef, useReducer, RefObject } from 'react';\n\nimport { throttle } from '@hh.ru/magritte-common-func-utils';\nimport { BreadcrumbsItem } from '@hh.ru/magritte-ui-breadcrumbs/types';\n\nconst BREAK_INDEX = -2;\nconst RESIZE_THROTTLE_MS = 50;\n\nexport interface BreadcrumbsItemAdditionalParameters {\n    key: Key;\n    index: number;\n    width: number;\n}\n\ninterface StateOfBreadcrumbs {\n    visibleItems: BreadcrumbsItemAdditionalParameters[];\n    collapseItems: BreadcrumbsItemAdditionalParameters[];\n}\n\nenum BreadcrumbsActionType {\n    Limiter = 'LIMITER',\n    AddVisibleItem = 'ADD_VISIBLE_ITEM',\n    AddCollapseItem = 'ADD_COLLAPSE_ITEM',\n    UpdateItemData = 'UPDATE_ITEM_DATA',\n    UpdateData = 'UPDATE_DATA',\n}\n\ntype ActionOfBreadcrumbs =\n    | {\n          type:\n              | BreadcrumbsActionType.Limiter\n              | BreadcrumbsActionType.AddVisibleItem\n              | BreadcrumbsActionType.AddCollapseItem;\n      }\n    | {\n          type: BreadcrumbsActionType.UpdateItemData;\n          payload: {\n              index: number;\n              width: number;\n          };\n      }\n    | {\n          type: BreadcrumbsActionType.UpdateData;\n          payload: StateOfBreadcrumbs;\n      };\n\ninterface OldWidthData {\n    [key: string]: number;\n}\n\nfunction reducer(state: StateOfBreadcrumbs, action: ActionOfBreadcrumbs) {\n    switch (action.type) {\n        case BreadcrumbsActionType.Limiter: {\n            const visibleItems = state.visibleItems.slice(BREAK_INDEX);\n            const collapseItems = state.visibleItems.slice(0, BREAK_INDEX);\n            return {\n                ...state,\n                visibleItems,\n                collapseItems,\n            };\n        }\n        case BreadcrumbsActionType.AddVisibleItem: {\n            if (state.collapseItems.length > 0) {\n                const lastItemInCollapseItems = state.collapseItems[state.collapseItems.length - 1];\n                const visibleItems = [lastItemInCollapseItems, ...state.visibleItems];\n                const collapseItems = state.collapseItems.slice(0, -1);\n                return {\n                    ...state,\n                    visibleItems,\n                    collapseItems,\n                };\n            }\n            return state;\n        }\n        case BreadcrumbsActionType.AddCollapseItem: {\n            if (state.visibleItems.length > 0) {\n                const firstItemInVisibleItems = state.visibleItems[0];\n                const visibleItems = state.visibleItems.slice(1);\n                const collapseItems = [...state.collapseItems, firstItemInVisibleItems];\n                return {\n                    ...state,\n                    visibleItems,\n                    collapseItems,\n                };\n            }\n            return state;\n        }\n        case BreadcrumbsActionType.UpdateItemData: {\n            let updateComplete = false;\n            const visibleItems = state.visibleItems.map((item) => {\n                if (item.index === action.payload.index) {\n                    updateComplete = true;\n                    return { ...item, width: action.payload.width };\n                }\n                return item;\n            });\n            const collapseItems = updateComplete\n                ? [...state.collapseItems]\n                : state.collapseItems.map((item) => {\n                      if (item.index === action.payload.index) {\n                          return { ...item, width: action.payload.width };\n                      }\n                      return item;\n                  });\n            return {\n                ...state,\n                visibleItems,\n                collapseItems,\n            };\n        }\n        case BreadcrumbsActionType.UpdateData: {\n            const oldWidthData: OldWidthData = {};\n            const oldItems = state.collapseItems.concat(state.visibleItems).reduce((accumulator, currentValue) => {\n                const key = `${currentValue.key}`;\n                accumulator[key] = currentValue.width;\n                return accumulator;\n            }, oldWidthData);\n\n            const visibleItems = action.payload.visibleItems.map((item) => {\n                if (oldItems[item.key]) {\n                    return { ...item, width: oldItems[item.key] };\n                }\n                return item;\n            });\n            return {\n                visibleItems,\n                collapseItems: action.payload.collapseItems,\n            };\n        }\n        default:\n            return state;\n    }\n}\n\ninterface BreadcrumbsExtendedItem {\n    key: React.Key;\n    ReactElement: BreadcrumbsItem;\n}\n\nfunction createInitialState(data: BreadcrumbsExtendedItem[]) {\n    const indexOfLastItem = data.length - 1;\n    const visibleItems: BreadcrumbsItemAdditionalParameters[] = data\n        .map((item, index) => ({ key: item.key, index, width: 0 }))\n        .slice(1, indexOfLastItem);\n    const collapseItems: BreadcrumbsItemAdditionalParameters[] = [];\n    return {\n        visibleItems,\n        collapseItems,\n    };\n}\n\nexport interface RefreshItem {\n    (width: number, index: number): void;\n}\n\ninterface UseDynamicDisplayContent {\n    (data: BreadcrumbsExtendedItem[]): {\n        containerRef: RefObject<HTMLDivElement>;\n        contentState: StateOfBreadcrumbs;\n        refreshItem: RefreshItem;\n        emptySpaceRef: RefObject<HTMLDivElement>;\n    };\n}\n\nexport const useDynamicDisplayContent: UseDynamicDisplayContent = (data) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const emptySpaceRef = useRef<HTMLDivElement>(null);\n    const visibleContentWidth = useRef(0);\n    const staticContentWidth = useRef(0);\n    const expandContentWidth = useRef(0);\n    const [contentState, dispatch] = useReducer(reducer, data, createInitialState);\n\n    useEffect(() => {\n        dispatch({\n            type: BreadcrumbsActionType.UpdateData,\n            payload: createInitialState(data),\n        });\n    }, [data]);\n\n    /**\n     * Первоначальный вызов собирает стейт, который содержит только общие данные элементов breadcrumbs. После\n     * рендера элементов (на основе этих данных) мы подтягиваем в стейт ссылки на элементы и ширину каждого из них.\n     */\n\n    const refreshItem: RefreshItem = useCallback((width, index) => {\n        dispatch({\n            type: BreadcrumbsActionType.UpdateItemData,\n            payload: {\n                index,\n                width,\n            },\n        });\n    }, []);\n\n    /**\n     * Перед отрисовкой компонента в браузере нам нужно привести его в соответствие со спецификацией ДС:\n     * в спецификации указано, что breadcrumbs не может отображать более 5-ти элементов.\n     *\n     * Варианты отображения breadcrumbs:\n     * -> link / link / link / link / text\n     * или\n     * -> link / action / link / link / text\n     *\n     * Если лимит будет превышен, лимитер схлопнет в action все элементы, которые окажутся между первым элементом и\n     * тремя последними. Таким образом компонент breadcrumbs будет приведен к виду -> link / action / link / link / text,\n     * где action - это кнопка, раскрывающая дроп-контейнер, в который складываются сколлапсировавшие элементы.\n     *\n     * Если после лимитирования контейнер-родитель всё равно не будет умещать в себе контент, то видимые элементы\n     * один за другим начнут коллапсировать (переходить из массива visibleItems в collapseItems) пока breadcrumbs не примет вид:\n     * -> ink / action / text - это максимально возможный уровень сворачивания элементов.\n     */\n\n    useEffect(() => {\n        if (data.length > 5) {\n            dispatch({ type: BreadcrumbsActionType.Limiter });\n        }\n    }, [data]);\n\n    /**\n     * Здесь мы отслеживаем ширину видимого контента, ширину статичного контента (относительно статичного:\n     * это общая ширина первого и последнего элементов, а также action при его наличии), а также ширину\n     * расширяемого контента.\n     */\n\n    useEffect(() => {\n        const containerNode = containerRef.current;\n        const emptySpaceNode = emptySpaceRef.current;\n        if (!containerNode || !emptySpaceNode) {\n            // eslint-disable-next-line @typescript-eslint/no-empty-function\n            return () => {};\n        }\n\n        visibleContentWidth.current = contentState.visibleItems.reduce((sum, children) => sum + children.width, 0);\n        staticContentWidth.current =\n            containerNode.offsetWidth - visibleContentWidth.current - emptySpaceNode.offsetWidth;\n\n        if (contentState.collapseItems.length) {\n            expandContentWidth.current =\n                staticContentWidth.current +\n                visibleContentWidth.current +\n                contentState.collapseItems[contentState.collapseItems.length - 1].width;\n        }\n\n        const observer = new ResizeObserver(\n            throttle(() => {\n                if (containerNode.scrollWidth > containerNode.offsetWidth && contentState.visibleItems.length > 0) {\n                    dispatch({ type: BreadcrumbsActionType.AddCollapseItem });\n                    observer.unobserve(containerNode);\n                    return;\n                }\n                if (\n                    (contentState.visibleItems.length < 2 && contentState.collapseItems.length > 0) ||\n                    (contentState.visibleItems.length < 3 && contentState.collapseItems.length === 1)\n                ) {\n                    if (containerNode.offsetWidth > expandContentWidth.current) {\n                        dispatch({ type: BreadcrumbsActionType.AddVisibleItem });\n                        observer.unobserve(containerNode);\n                    }\n                }\n            }, RESIZE_THROTTLE_MS)\n        );\n        observer.observe(containerNode);\n        return () => {\n            observer.disconnect();\n        };\n    }, [contentState.visibleItems, contentState.collapseItems]);\n\n    return {\n        containerRef,\n        contentState,\n        refreshItem,\n        emptySpaceRef,\n    };\n};\n"],"names":[],"mappings":"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"}