@snack-uikit/breadcrumbs 0.8.37 → 0.8.39-preview-0eada078.0

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.8.38 (2024-06-06)
+
+### Only dependencies have been changed
+* [@snack-uikit/list@0.13.5](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/list/CHANGELOG.md)
+
+
+
+
+
 ## 0.8.37 (2024-05-31)
 
 ### Only dependencies have been changed

package/dist/components/HiddenChain/HiddenChain.js

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

package/dist/hooks.js

@@ -17,6 +17,9 @@ const selectConfig = (containerWidth, configs) => {
                 }
             }
         }
+        else if (config.width < bestConfig.width) {
+            bestConfig = config;
+        }
     }
     if (bestConfig) {
         return { chain: bestConfig.chain, containerWidth, chainWidth: bestConfig.width };
@@ -49,9 +52,7 @@ export function useBreadcrumbsLayout(containerRef) {
         if (!visibleContainer) {
             return;
         }
-        if (configs.length) {
-            setCurrentConfig(selectConfig(getMaxPossibleWidth(visibleContainer), configs));
-        }
+        setCurrentConfig(selectConfig(getMaxPossibleWidth(visibleContainer), configs));
     }, [configs, containerRef]);
     useEffect(() => {
         var _a;

package/dist/utils/buildBreadcrumbsConfigs.js

@@ -46,6 +46,9 @@ const collapseAllRest = (lastElementRenderMode, rest) => rest.map((element, inde
     return Object.assign(Object.assign({}, element), { renderMode: lastItem ? lastElementRenderMode : ITEM_RENDER_MODE.Collapsed });
 });
 export function buildBreadcrumbsConfigs(items, sizeMap, lastEmpty) {
+    if (!items.length) {
+        return [];
+    }
     const chains = [];
     const [first, ...rest] = items.map(item => (Object.assign(Object.assign({}, item), { renderMode: ITEM_RENDER_MODE.Full })));
     buildSubChain(rest, { useCollapse: true, useEllipse: true }).forEach(subset => {

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Breadcrumbs",
-  "version": "0.8.37",
+  "version": "0.8.39-preview-0eada078.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,11 +32,11 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/list": "0.13.4",
+    "@snack-uikit/list": "0.13.5",
     "@snack-uikit/typography": "0.6.2",
     "@snack-uikit/utils": "3.3.0",
     "classnames": "2.3.2",
     "lodash.debounce": "4.0.8"
   },
-  "gitHead": "a24da7478c0b00f3e60d821466c31b2e9d57a719"
+  "gitHead": "022d623ce1e94b48ac4026b5ef0edaae5b06d0e6"
 }

package/src/components/HiddenChain/HiddenChain.tsx

@@ -25,6 +25,9 @@ export const HiddenChain = memo(function HiddenChain({
   lastEmpty = false,
 }: HiddenChainProps) {
   const containerRef = useRef<HTMLUListElement>(null);
+  const itemsRef = useRef<Item[]>(items);
+
+  itemsRef.current = items;
 
   useEffect(() => {
     const container = containerRef.current;
@@ -32,7 +35,7 @@ export const HiddenChain = memo(function HiddenChain({
       const observer = new ResizeObserver(([{ target }]) => {
         const sizeMap = buildSizeMap(target);
         if (sizeMap) {
-          onConfigsBuilt(buildBreadcrumbsConfigs(items, sizeMap, lastEmpty));
+          onConfigsBuilt(buildBreadcrumbsConfigs(itemsRef.current, sizeMap, lastEmpty));
         }
       });
       observer.observe(container);
@@ -41,7 +44,7 @@ export const HiddenChain = memo(function HiddenChain({
         observer.disconnect();
       };
     }
-  }, [items, lastEmpty, onConfigsBuilt]);
+  }, [lastEmpty, onConfigsBuilt]);
 
   const renderItemModes = useItemModesRender({ firstItemIconOnly });
 

package/src/hooks.tsx

@@ -25,6 +25,8 @@ const selectConfig = (containerWidth: number, configs: BreadcrumbsConfig[]): Cur
           bestConfig = config;
         }
       }
+    } else if (config.width < bestConfig.width) {
+      bestConfig = config;
     }
   }
 
@@ -63,9 +65,7 @@ export function useBreadcrumbsLayout(containerRef: RefObject<HTMLElement>): Brea
       return;
     }
 
-    if (configs.length) {
-      setCurrentConfig(selectConfig(getMaxPossibleWidth(visibleContainer), configs));
-    }
+    setCurrentConfig(selectConfig(getMaxPossibleWidth(visibleContainer), configs));
   }, [configs, containerRef]);
 
   useEffect(() => {

package/src/utils/buildBreadcrumbsConfigs.ts

@@ -72,6 +72,10 @@ const collapseAllRest = (lastElementRenderMode: ItemRenderMode, rest: InnerItem[
   });
 
 export function buildBreadcrumbsConfigs(items: Item[], sizeMap: SizeMap, lastEmpty?: boolean): BreadcrumbsConfig[] {
+  if (!items.length) {
+    return [];
+  }
+
   const chains: InnerItem[][] = [];
   const [first, ...rest] = items.map(item => ({ ...item, renderMode: ITEM_RENDER_MODE.Full }));